id: items-roll title: ItemsRoll

ItemsRoll UI Component

Installation

npm i @synerise/ds-items-roll
or
yarn add @synerise/ds-items-roll

Usage

import ItemsRoll from '@synerise/ds-items-roll';

<ItemsRoll
  items={items}
  onSearch={onSearch}
  onSearchClear={onSearchClear}
  searchValue={searchValue}
  searchPlaceholder={searchPlaceholder}
/>;

Demo

API

| Property | Description | Type | Default | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- | | actions | ItemRollElement array with configuration for action dropdown menu | ItemRollElement[] | - | | changeSelectionIcon | The custom changeSelection icon | (props: React.SVGProps<SVGSVGElement>) => JSX.Element | EditM | | changeSelectionDropdownProps | Object with ds-dropdown props | DropdownProps | | | className | Additional class for ItemsRoll wrapper | string | - | | customSidebarActions | Allow put developer sidebar actions that are not defined | React.ReactNode | - | | groups | Array of strings where each one corresponds to a group prop in ItemRollElement | string[] | - | | hideSearch | Hide search component in itemsroll | booleam | - | | items | ItemRollElement array for list | ItemRollElement[] | - | | maxToShowItems | Amount of initial ItemsRollElement to render. Note that if number is greater than 20, list will becoma scrollable | number | 10 | | onClearAll | Callback function that is fired when click on clearAll button | () => void | - | | onChangeSelection | Callback function that is fired when click on changeSelection button | () => void | - | | onItemClick | Callback function that is fired when list element is clicked | (id: string, group?: string) => void | - | | onItemRemove | Callback function that is fired when list element remove icon is clicked | (id: string, group?: string) => void | - | | onSearch | Callback function that is fired when input changed | (value: string) => void | - | | onSearchClear | Callback function that is fired when input is cleared | () => void | - | | searchPlaceholder | Placeholder for search input component | string | - | | searchValue | Value of search input component | string | - | | showMoreStep | Amount of items to load on show more button click | number | 10 | | style | Object with CSS properties | React.CSSProperties | - | | texts | Object contains texts for buttons, title etc. | Texts | - | | useFooter | Whether the footer is visibile | boolean | - | | useVirtualizedList | Whether to use react-virtualized for list | boolean | false | | virtualizedRowHeight | Height of virtualizedlist row | number | 32px | | virtualizedRowWidth | Width of virtualized list | number | - |

ItemRollElement

| Property | Description | Type | Default | | -------- | ----------------------------------------------------------------------------------- | ------ | ------- | | group | Define affiliation to a specific group in groups Array passed as props to ItemsRoll | string | - | | id | Unique identifier for element. Used as a key in map | string | - |

Rest of the ItemRollElement props is inherited from MenuItemProps

Texts

| Property | Description | Type | Default | | ----------------------- | ----------------------------- | ------------------------ | ------------------ | | changeSelectionLabel | Change selection button label | string / React.ReactNode | 'Change selection' | | clearAllLabel | Clear all button label | string / React.ReactNode | 'Clear all' | | itemsLabel | Items label | string / React.ReactNode | 'Items' | | moreLabel | Show more second part label | string / React.ReactNode | 'more' | | noResultsLabel | No results label | string / React.ReactNode | 'No results' | | removeTooltipLabel | Tooltip for item remove icon | string / React.ReactNode | 'Remove' | | searchClearTooltipLabel | Input clear tooltip label | string / React.ReactNode | 'clear' | | showLabel | Show more first part label | string / React.ReactNode | 'Show' | | showLessLabel | Show less button label | string / React.ReactNode | 'Show less' |