Filter

Filter UI Component

Installation

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

Usage

import Filter from '@synerise/ds-filter'
<Filter
expressions={[]}
onAdd={() => {}}
onChangeLogic={(stepId, logicValue) => {}}
onChangeOrder={(expressions) => {}}
onChangeStepMatching={(stepId, matchingValue) => {}}
onChangeStepName={(stepId, name) => {}}
onDeleteStep={(stepId) => {}}
onDuplicateStep={(stepId) => {}}
renderStepFooter={(expression) => <span>Footer</span>}
renderStepContent={(expression) => <span>Content</span>}
matching={{
onChange: (matchingValue) => {},
matching: false,
}}
texts={{
step: {
matching: 'Matching',
notMatching: 'Not matching',
namePlaceholder: 'name',
moveTooltip: 'Move',
deleteTooltip: 'Delete',
duplicateTooltip: 'Duplicate',
},
matching: {
matching: 'matching',
notMatching: 'not matching',
},
addFilter: 'Add filter',
dropMeHere: 'Drop me here',
}}
/>

Demo

API

PropertyDescriptionTypeDefault
expressionsArray of expressionsExpression[]-
matchingMain matching configuration: MatchingProps-
onChangeOrderFunction called when user change order of StepCards(newOrder: Expression[]) => void-
onChangeLogicFunction called when user change value of Logic(id: string, logic: LogicOperatorValue) => void-
onChangeStepMatchingFunction called when user change value of StepCard matching(id: string, matching: boolean) => void-
onChangeStepNameFunction called when user change name of StepCard(id: string, name: string) => void-
onDeleteStepFunction called when user click on delete StepCard icon(id: string) => void-
onDuplicateStepFunction called when user click on duplicate StepCard icon(id: string) => void-
renderStepFooterFunction which renders footer of StepCard: (expression: Expression) => React.ReactNode-
renderStepContentFunction which render content of StepCard: (expression: Expression) => React.ReactNode-
onAddFunction called when user click on AddFilter button: () => void-
textsObject with translationsFilterTexts-

Expression

PropertyDescriptionTypeDefault
typeType of expression: STEP or LOGICSTEP \ LOGIC-
idId of expressionstring-
dataObject with props of expression, base of type valuePartial<StepCardProps> \ Partial<LogicProps>-
logicLogic component related to Step expressionExpression-

FilterTexts

PropertyDescriptionTypeDefault
matchingObject with translations for Matching componentMatchingTexts-
stepObject with translations for StepCard componentStepCardTexts-
addFilterLabel of AddFilter buttonstring'Add filter'
dropMeHereLabel of drop areastring'Drop me here'