Filter UI Component
npm i @synerise/ds-filter
or
yarn add @synerise/ds-filter
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',
}}
/>
<iframe src="/storybook-static/iframe.html?id=components-filter--default"></iframe>
Property |
Description |
Type |
Default |
expressions |
Array of expressions |
Expression[] |
- |
matching |
Main matching configuration |
: MatchingProps |
- |
onChangeOrder |
Function called when user change order of StepCards |
(newOrder: Expression[]) => void |
- |
onChangeLogic |
Function called when user change value of Logic |
(id: string, logic: LogicOperatorValue) => void |
- |
onChangeStepMatching |
Function called when user change value of StepCard matching |
(id: string, matching: boolean) => void |
- |
onChangeStepName |
Function called when user change name of StepCard |
(id: string, name: string) => void |
- |
onDeleteStep |
Function called when user click on delete StepCard icon |
(id: string) => void |
- |
onDuplicateStep |
Function called when user click on duplicate StepCard icon |
(id: string) => void |
- |
renderHeaderRightSide |
Renders filter header right side slot |
(expressions: Expression[]) => React.ReactNode; |
- |
renderStepFooter |
Function which renders footer of StepCard |
(expression: Expression) => React.ReactNode |
- |
renderStepContent |
Function which render content of StepCard |
(expression: Expression) => React.ReactNode |
- |
renderStepHeaderRightSide |
Function which renders right side slot in StepCard header |
(expression: Expression, index: number) => React.ReactNode |
- |
onAdd |
Function called when user click on AddFilter button |
() => void |
- |
texts |
Object with translations |
FilterTexts |
- |
Property |
Description |
Type |
Default |
type |
Type of expression: STEP or LOGIC
|
STEP \ LOGIC
|
- |
id |
Id of expression |
string |
- |
data |
Object with props of expression, base of type value |
Partial<StepCardProps> \ Partial<LogicProps>
|
- |
logic |
Logic component related to Step expression |
Expression |
- |
Property |
Description |
Type |
Default |
matching |
Object with translations for Matching component |
MatchingTexts |
- |
step |
Object with translations for StepCard component |
StepCardTexts |
- |
addFilter |
Label of AddFilter button |
string |
'Add filter' |
dropMeHere |
Label of drop area |
string |
'Drop me here' |