@synerise/ds-operators

---

id: operators title: 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

Property	Description	Type	Default
error	error validation	boolean	-
getPopupContainerOverride	Popup container function for child tooltips and dropdowns	(trigger: HTMLElement \ null) => HTMLElement;	-
groups	Groups of operators	OperatorsGroup[]	[]
items	Array of operators	OperatorsItem[]	[]
onActivate	Callback called when user opens dropdown	(fieldType: string) => void	-
onChange	Callback called when user selects operator	(item: OperatorsItem \ OperatorsGroup \ undefined) => void	-
onDeactivate	Callback called when user closes dropdown	() => void	-
opened	Whether if dropdown should opens from outside of component	boolean	false
texts	Translations object	OperatorTexts	-
value	Selected operator	OperatorsItem \ undefined	undefined

OperatorsGroup

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	OperatorsGroup[]	-
tooltip	Tooltip text	string	-

OperatorsItem

Property	Description	Type	Default
group	Group of item	string	-
groupId	Id of group	React.ReactText	-
groupName	Name of group	string	-
icon	Icon of operator	React.ReactNode	-
id	Id of item	React.ReactText	-
logic	Logic of operator	string	-
name	Name of operator	string	-
subGroups	Subgroups of operator	OperatorsGroup[]	-
value?	Value of operator	string	-

OperatorTexts

Property	Description	Type	Default
buttonLabel	Button label	'Choose'
noResults	No results info	'No results'
searchPlaceholder	Search box placeholder	'Search'