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

PropertyDescriptionTypeDefault
groupsGroups of itemsContextGroup[][]
itemsArray of itemsContextItem[][]
menuItemHeightSize of single menu itemItemSize.LARGE \ ItemSize.DEFAULTItemSize.DEFAULT
onSelectItemCallback called when user selects item(item: ContextItem \ ContextGroup \ undefined) => void-
defaultDropdownVisibilitydefault visibility of dropdownbooleanfalse
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
customTriggerComponentAdd custom triggerReact.ReactNodeundefined
triggerAdd custom trigger to modal'click' \ 'hover' \ 'contextMenu''click
getMenuEntryPropsConfigure tooltip (information-card by default)(arg: ParameterValueType) => MenuItemProps \ undefinedundefined
dropdownWrapperStylesApply custom styles to dropdown wrapperCSSProperties \ undefined-
onClickOutsideEventsOverwrite default events for document listenerHandledEventsType[] \ undefined-
onClickOutsideCallback called when user click outside dropdown() => void \ undefined-
onSearchCallback called when user enter any char in search input(query: string) => void-
hideSearchFieldWhether to hide the search field in the dropdownbooleanfalse
onFetchDataCallback called when user scrolls to the end of dropdown list() => void-
onActivateCallback called when user opens dropdown(fieldType: string) => void-
onDeactivateCallback called when user closes dropdown() => void-
hasMoreItemsWhether if onFetchData should be calledboolean-
getPopupContainerOverridePopup container function for child tooltips and dropdowns(trigger: HTMLElementnull) => HTMLElement;
dropdownPropsLimited part of props for dropdown on ContextSelector componentOmit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'>-

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-
useCustomIconUse custom icon instead of wrapping it inside Icon componentbooleanfalse
descriptionSet menu item description ( recommended to use with 'large' sizeReact.ReactNode-
customSuffixUse custom suffix instead of default 'check' iconReact.ReactNode-

ContextItem

PropertyDescriptionTypeDefault
groupIdId of groupReact.ReactText-
groupNameName of groupstring-
iconIcon of itemReact.ReactNode-
idId of itemReact.ReactText-
nameName of itemstring-
subGroupsSubgroups of itemContextGroup[]-
useCustomIconUse custom icon instead of wrapping it inside Icon componentbooleanfalse
descriptionSet menu item description ( recommended to use with 'large' sizeReact.ReactNode-
customSuffixUse custom suffix instead of default 'check' iconReact.ReactNode-

ContextSelectorTexts

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