ItemPicker

ItemPicker UI Component

Installation

npm i @synerise/ds-item-picker
or
yarn add @synerise/ds-item-picker

Usage

import ItemPicker from '@synerise/ds-item-picker'
<ItemPicker
dataSource={[]}
searchPlaceholder={'Search'}
label={'Label'}
description={'Description'}
tooltip={'Tooltip'}
placeholder={'Set customer'}
placeholderIcon={<Icon component={<UserM/>}/>}
selectedItem={null}
onChange={() => {})}
clear={'Remove selection'}
onClear={() => {}}
disabled={false}
error={false}
errorMessage={''}
size={'small'}
changeButtonLabel={'Change'}
onChangeButtonClick={() => {}}
/>

Demo

API

PropertyDescriptionTypeDefault
dataSourceArray of items to display in menuMenuItemProps[]-
dropdownVisibleRowsVisible rows count displayed in the dropdownnumber10
dropdownPropsAntd dropdown propsDropdownProps{}
dropdownRowHeightHeight of the row displayed in the dropdownnumber32
dropdownBottomAction?Dropdown bottom actionReact.ReactNode-
closeOnBottomAction?Close dropdown when bottom action has been clickedbooleanfalse
placeholderPlaceholder textstring, React.ReactNode-
clearClear button tooltipstring, React.ReactNode'Remove'
searchPlaceholderPlaceholder of SearchBar in dropdownstring'Search'
onClearCallback executed when clear icon is clicked() => void-
onChangeCallback executed when item from dropdown is clicked(item: MenuItemProps) => void-
selectedItem?Selected item dataMenuItemProps-
searchBarProps?Additional props passed to the SearchBar componentSearchBarProps-
size?Size of ItemPicker component'small', 'large'-
label?Label of componentstring, React.ReactNode-
description?Description of componentstring, React.ReactNode-
placeholderIcon?Icon visible with placeholderReact.ReactNode-
error?Whether the component has error stateboolean-
errorMessage?Error messagestring, React.ReactNode-
tooltip?Tooltip textstring, React.ReactNode-
disabled?Whether the component is disabledboolean-
changeButtonLabel?Label of change button, available only when size='large'string, React.ReactNode'Change'
withClearConfirmationShows Popconfirm on the clear icon clickboolean-
clearConfirmTitleTitle of Popconfirmstring'Are you sure to remove this selection?'
yesTextLabel of confirm buttonstring'Yes'
noTextLabel of cancel buttonstring'No'
noResultsNo search results infostring'No results'