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

PropertyDescriptionTypeDefault
actionsItemRollElement array with configuration for action dropdown menuItemRollElement[]-
changeSelectionIconThe custom changeSelection icon(props: React.SVGProps<SVGSVGElement>) => JSX.ElementEditM
changeSelectionDropdownPropsObject with ds-dropdown propsDropdownProps
classNameAdditional class for ItemsRoll wrapperstring-
customSidebarActionsAllow put developer sidebar actions that are not definedReact.ReactNode-
groupsArray of strings where each one corresponds to a group prop in ItemRollElementstring[]-
hideSearchHide search component in itemsrollbooleam-
itemsItemRollElement array for listItemRollElement[]-
maxToShowItemsAmount of initial ItemsRollElement to render. Note that if number is greater than 20, list will becoma scrollablenumber10
onClearAllCallback function that is fired when click on clearAll button() => void-
onChangeSelectionCallback function that is fired when click on changeSelection button() => void-
onItemClickCallback function that is fired when list element is clicked(id: string, group?: string) => void-
onItemRemoveCallback function that is fired when list element remove icon is clicked(id: string, group?: string) => void-
onSearchCallback function that is fired when input changed(value: string) => void-
onSearchClearCallback function that is fired when input is cleared() => void-
searchPlaceholderPlaceholder for search input componentstring-
searchValueValue of search input componentstring-
showMoreStepAmount of items to load on show more button clicknumber10
styleObject with CSS propertiesReact.CSSProperties-
textsObject contains texts for buttons, title etc.Texts-
useFooterWhether the footer is visibileboolean-
useVirtualizedListWhether to use react-virtualized for listbooleanfalse
virtualizedRowHeightHeight of virtualizedlist rownumber32px
virtualizedRowWidthWidth of virtualized listnumber-

ItemRollElement

PropertyDescriptionTypeDefault
groupDefine affiliation to a specific group in groups Array passed as props to ItemsRollstring-
idUnique identifier for element. Used as a key in mapstring-

Rest of the ItemRollElement props is inherited from MenuItemProps

Texts

PropertyDescriptionTypeDefault
changeSelectionLabelChange selection button labelstring / React.ReactNode'Change selection'
clearAllLabelClear all button labelstring / React.ReactNode'Clear all'
itemsLabelItems labelstring / React.ReactNode'Items'
moreLabelShow more second part labelstring / React.ReactNode'more'
noResultsLabelNo results labelstring / React.ReactNode'No results'
removeTooltipLabelTooltip for item remove iconstring / React.ReactNode'Remove'
searchClearTooltipLabelInput clear tooltip labelstring / React.ReactNode'clear'
showLabelShow more first part labelstring / React.ReactNode'Show'
showLessLabelShow less button labelstring / React.ReactNode'Show less'