Logic UI Component
npm i @synerise/ds-logic
or
yarn add @synerise/ds-logic
import Logic from '@synerise/ds-logic'
<Logic value={'AND'} onChange={handleChange} />
import Logic from '@synerise/ds-logic'
<Logic.Matching matching={true} onChange={handleChange} sentence="Find all items #MATCHING_TOGGLE# this condition." />
<iframe src="/storybook-static/iframe.html?id=components-logic--default"></iframe>
Property |
Description |
Type |
Default |
value |
Value of logic component |
string |
- |
onChange |
Function called when user change the value |
(value: string) => void |
- |
options |
Custom list of options |
LogicOperator[] |
[{value: 'AND', label: 'And'}, {value: 'OR', label: 'Or'}] |
Property |
Description |
Type |
Default |
value |
Value of logic option |
string |
- |
label |
Label of logic option |
string \ React.ReactNode |
- |
Property |
Description |
Type |
Default |
matching |
Value of Matching component |
boolean |
false |
sentence |
Custom sentence require #MATCHING_TOGGLE# , which will be replaced by Toggle component |
string |
- |
onChange |
Function called when user click on Toggle component |
(matching: boolean) => void |
- |
texts |
Custom labels of Matching, Not matching |
MatchingTexts |
- |
Property |
Description |
Type |
Default |
matching |
Label of Toggle component, visible when matching is true |
string |
matching |
notMatching |
Label of Toggle component, visible when matching is false |
string |
not matching |