@synerise/ds-filter v0.18.9
id: filter
title: 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
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 | - |
Expression
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 | - |
FilterTexts
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' |
6 days ago
9 days ago
17 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
7 months ago
7 months ago
8 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months 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
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
3 years ago
3 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
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