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

API

PropertyDescriptionTypeDefault
groupsGroups of itemsContextGroup[][]
itemsArray of itemsContextItem[][]
onSelectItemCallback called when user selects item(item: ContextItem \ ContextGroup \ undefined) => void-
openedWhether if dropdown should opens from outside of componentbooleanfalse
textsTranslations objectContextSelectorTexts-
selectedItemSelected itemContextItem \ undefinedundefined
addModeIf true trigger doesn't change style when value is setContextItem \ undefinedundefined

ContextGroup

PropertyDescriptionTypeDefault
defaultGroupWhether if this group is defaultbooleanfalse
iconIcon of groupReact.ReactNode-
idId of groupReact.ReactText-
itemTypeType of itemsstring-
nameName of groupstring-
subGroupsSubgroups of groupsContextGroup[]-
tooltipTooltip textstring-

ContextItem

PropertyDescriptionTypeDefault
groupIdId of groupReact.ReactText-
groupNameName of groupstring-
iconIcon of itemReact.ReactNode-
idId of itemReact.ReactText-
nameName of itemstring-
subGroupsSubgroups of itemContextGroup[]-

ContextSelectorTexts

PropertyDescriptionTypeDefault
buttonLabelButton labelstring \ React.ReactNode'Choose'
noResultsNo results infostring \ React.ReactNode'No results'
searchPlaceholderSearch box placeholderstring'Search'