Operators

Operators UI Component

Installation

npm i @synerise/ds-operators
or
yarn add @synerise/ds-operators

Usage

import Operators from '@synerise/ds-operators'
<Operators
texts={{
buttonLabel: 'Choose',
searchPlaceholder: 'Search',
noResults: 'No results',
}}
onChange={(item) => {}}
value={{
'id': 'NUMBER_ONEEQUAL',
'value': 'NUMBER_ONEEQUAL',
'logic': 'EQUAL',
'name': 'Equal',
'groupId': 'NUMBER_ONE',
'group': 'NUMBER_ONE',
'icon': <HashM />,
}}
items={[ {
'id': 'NUMBER_ONEEQUAL',
'value': 'NUMBER_ONEEQUAL',
'logic': 'EQUAL',
'name': 'Equal',
'groupId': 'NUMBER_ONE',
'group': 'NUMBER_ONE',
'icon': <HashM />,
},
{
'id': 'DATE_ONEMORE',
'value': 'DATE_ONEMORE',
'logic': 'MORE',
'name': 'More than',
'groupId': 'DATE_ONE',
'group': 'DATE_ONE',
'icon': <CalendarM />,
'groupName': 'Date',
}]}
groups={[{
'id': 'DATE_ONE',
'name': 'Date',
'itemsType': null,
'tooltip': 'Date',
'icon': <CalendarM />,
'defaultGroup': true,
}, {
'id': 'NUMBER_ONE',
'name': 'Number',
'itemsType': null,
'tooltip': 'Number',
'icon': <HashM />,
'defaultGroup': false,
}]}
/>

Demo

API

PropertyDescriptionTypeDefault
groupsGroups of operatorsOperatorsGroup[][]
itemsArray of operatorsOperatorsItem[][]
onChangeCallback called when user selects operator(item: OperatorsItem \ OperatorsGroup \ undefined) => void-
openedWhether if dropdown should opens from outside of componentbooleanfalse
textsTranslations objectOperatorTexts-
valueSelected operatorOperatorsItem \ undefinedundefined

OperatorsGroup

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

OperatorsItem

PropertyDescriptionTypeDefault
groupGroup of itemstring-
groupIdId of groupReact.ReactText-
groupNameName of groupstring-
iconIcon of operatorReact.ReactNode-
idId of itemReact.ReactText-
logicLogic of operatorstring-
nameName of operatorstring-
subGroupsSubgroups of operatorOperatorsGroup[]-
value?Value of operatorstring-

OperatorTexts

PropertyDescriptionTypeDefault
buttonLabelButton label'Choose'
noResultsNo results info'No results'
searchPlaceholderSearch box placeholder'Search'