ContextSelector
ContextSelector UI Component
Installation
npm i @synerise/ds-context-selector
or
yarn add @synerise/ds-context-selector
Usage
import ContextSelector from '@synerise/ds-context-selector'
<ContextSelector
texts={{
buttonLabel: 'Choose',
searchPlaceholder: 'Search',
noResults: 'No results',
}}
onSelectItem={(item) => {}}
selectedItem={{
name: 'Transaction charge',
id: 6,
icon: <NotificationsM />,
groupId: 'RECENT',
groupName: 'Activity',
}}
items={[
{
name: 'Pricelist 02',
id: 0,
icon: <SegmentM />,
groupId: 'RECENT',
groupName: 'Parameters',
},
{
name: 'Transaction charge',
id: 6,
icon: <NotificationsM />,
groupId: 'RECENT',
groupName: 'Activity',
},
{
name: 'Segmentation 1',
id: 'segmentation_1',
icon: <SegmentM />,
groupId: 'SEGMENTATIONS',
}
]}
groups={[
{
id: 'RECENT',
name: 'Recent',
defaultGroup: true,
},
{
id: 'ALL',
name: 'All',
defaultGroup: false,
subGroups: [
{
name: 'Segmentations',
id: 'SEGMENTATIONS',
icon: <FolderM />,
groupName: 'Parameters',
},
]
}]}
/>
Demo
API
Property | Description | Type | Default |
---|---|---|---|
groups | Groups of items | ContextGroup[] | [] |
items | Array of items | ContextItem[] | [] |
menuItemHeight | Size of single menu item | ItemSize.LARGE \ ItemSize.DEFAULT | ItemSize.DEFAULT |
onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
defaultDropdownVisibility | default visibility of dropdown | boolean | false |
opened | Whether if dropdown should opens from outside of component | boolean | false |
texts | Translations object | ContextSelectorTexts | - |
selectedItem | Selected item | ContextItem \ undefined | undefined |
addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
getMenuEntryProps | Configure tooltip (information-card by default) | (arg: ParameterValueType) => MenuItemProps \ undefined | undefined |
dropdownWrapperStyles | Apply custom styles to dropdown wrapper | CSSProperties \ undefined | - |
onClickOutsideEvents | Overwrite default events for document listener | HandledEventsType[] \ undefined | - |
onClickOutside | Callback called when user click outside dropdown | () => void \ undefined | - |
onSearch | Callback called when user enter any char in search input | (query: string) => void | - |
hideSearchField | Whether to hide the search field in the dropdown | boolean | false |
onFetchData | Callback called when user scrolls to the end of dropdown list | () => void | - |
onActivate | Callback called when user opens dropdown | (fieldType: string) => void | - |
onDeactivate | Callback called when user closes dropdown | () => void | - |
hasMoreItems | Whether if onFetchData should be called | boolean | - |
getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; |
dropdownProps | Limited part of props for dropdown on ContextSelector component | Omit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'> | - |
ContextGroup
Property | Description | Type | Default |
---|---|---|---|
defaultGroup | Whether if this group is default | boolean | false |
icon | Icon of group | React.ReactNode | - |
id | Id of group | React.ReactText | - |
itemType | Type of items | string | - |
name | Name of group | string | - |
subGroups | Subgroups of groups | ContextGroup[] | - |
tooltip | Tooltip text | string | - |
useCustomIcon | Use custom icon instead of wrapping it inside Icon component | boolean | false |
description | Set menu item description ( recommended to use with 'large' size | React.ReactNode | - |
customSuffix | Use custom suffix instead of default 'check' icon | React.ReactNode | - |
ContextItem
Property | Description | Type | Default |
---|---|---|---|
groupId | Id of group | React.ReactText | - |
groupName | Name of group | string | - |
icon | Icon of item | React.ReactNode | - |
id | Id of item | React.ReactText | - |
name | Name of item | string | - |
subGroups | Subgroups of item | ContextGroup[] | - |
useCustomIcon | Use custom icon instead of wrapping it inside Icon component | boolean | false |
description | Set menu item description ( recommended to use with 'large' size | React.ReactNode | - |
customSuffix | Use custom suffix instead of default 'check' icon | React.ReactNode | - |
ContextSelectorTexts
Property | Description | Type | Default |
---|---|---|---|
buttonLabel | Button label | string \ React.ReactNode | 'Choose' |
noResults | No results info | string \ React.ReactNode | 'No results' |
searchPlaceholder | Search box placeholder | string | 'Search' |