@synerise/ds-context-selector v0.21.19
id: context-selector
title: 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' |
7 days ago
9 days ago
9 days ago
18 days ago
21 days ago
21 days ago
22 days ago
25 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
8 months ago
6 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago