Logic

Logic UI Component

Installation

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

Usage of Login

import Logic from '@synerise/ds-logic'
<Logic value={'AND'} onChange={handleChange} />

Usage of Matching

import Logic from '@synerise/ds-logic'
<Logic.Matching matching={true} onChange={handleChange} sentence="Find all items #MATCHING_TOGGLE# this condition." />

Demo

API

PropertyDescriptionTypeDefault
valueValue of logic componentstring-
onChangeFunction called when user change the value(value: string) => void-
optionsCustom list of optionsLogicOperator[][{value: 'AND', label: 'And'}, {value: 'OR', label: 'Or'}]

LogicOperator

PropertyDescriptionTypeDefault
valueValue of logic optionstring-
labelLabel of logic optionstring \ React.ReactNode-

Logic.Matching

PropertyDescriptionTypeDefault
matchingValue of Matching componentbooleanfalse
sentenceCustom sentence require #MATCHING_TOGGLE#, which will be replaced by Toggle componentstring-
onChangeFunction called when user click on Toggle component(matching: boolean) => void-
textsCustom labels of Matching, Not matchingMatchingTexts-

MatchingTexts

PropertyDescriptionTypeDefault
matchingLabel of Toggle component, visible when matching is truestringmatching
notMatchingLabel of Toggle component, visible when matching is falsestringnot matching