@synerise/ds-operators NPM

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
buttonLabel	Button label	'Choose'
noResults	No results info	'No results'
searchPlaceholder	Search box placeholder	'Search'

@synerise/ds-button @synerise/ds-dropdown @synerise/ds-icon @synerise/ds-list-item @synerise/ds-result @synerise/ds-scrollbar @synerise/ds-tabs @synerise/ds-tooltip @synerise/ds-utils uuid

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-890 @zalastax/nolb-_syn @synerise/ds-condition @synerise/design-system

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

6 months ago

6 months ago

6 months ago

6 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

1 year 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

2 years ago

2 years ago

2 years ago

2 years 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

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

2 years ago

2 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

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago