ItemFilter
ItemFilter UI Component
Installation
npm i @synerise/ds-item-filter
or
yarn add @synerise/ds-item-filter
Usage
import ItemFilter from '@synerise/ds-item-filter'
<ItemFilter
visible={true}
hide={() => {}}
texts={TEXTS}
removeItem={(props) => {}}
editItem={(props) => {}}
selectItem={(props) => {}}
duplicateItem={(props) => {}}
selectedItemId="0001"
categories={CATEGORIES}
items={ITEMS}
/>
Demo
API
ItemFilter
Property | Description | Type | Default |
---|---|---|---|
visible | Whether the ItemFilter is visible or not. | boolean | false |
hide | Specify a callback that will be called when a user clicks mask or close button. | () => void | - |
removeItem | Specify a callback that will be called when a user removes list item | ({ id: string } ) =>void | - |
editItem | Specify a callback that will be called when a user change name of list item | ({ id: string, name: string } ) => void | - |
duplicateItem | Specify a callback that will be called when a user duplicates list item | ({ id: string } ) => void | - |
selectItem | Specify a callback that will be called when a user select list item | ({ id: string } ) => void | - |
categories | Array of categories | Category[] | [] |
selectedItemId | Id of selected item | string | undefined |
texts | Object contains texts for buttons, title, confirms etc. | Texts | - |
maxToShowItems | Shows x first items, rest are hidden under show more button | number | 200 |
search | Whether the search input is availabla | number | 200 |
Search
Property | Description | Type | Default |
---|---|---|---|
onChange | Callback called, when value of search input changes | (value: string) => void | - |
onClear | Callback called, when user click on clear search icon | () => void | - |
value | Current value of search input | string | - |
Category
Property | Description | Type | Default |
---|---|---|---|
label | Name of category | string | '' |
hasMore | Whether the category contains more items | boolean | - |
items | Array of list items | Item[] | [] |
Item
Property | Description | Type | Default |
---|---|---|---|
id | Id of item | string | - |
canUpdate? | Whether the item can be edited | boolean | false |
canDelete? | Whether the item can be deleted | boolean | false |
canDuplicate? | Whether the item can be duplicated | boolean | false |
name | Name of item | string | - |
description? | Description of item | string | - |
user | Object contains informations about user | User | - |
created | Item creation timestamp | string | - |
User
Property | Description | Type | Default |
---|---|---|---|
avatar_url | Link avatar | string | - |
firstname | First name | string | - |
lastname | Last name | string | - |
string | - |
Texts
Property | Description | Type | Default |
---|---|---|---|
activateItemTitle | Popconfirm title | string / React.ReactNode | 'By activating this filter, you will cancel your unsaved filter settings', |
activate | Activate button label | string / React.ReactNode | 'Activate', |
cancel | Cancel button label | string / React.ReactNode | 'Cancel', |
deleteConfirmationTitle | Delete confirmation title | string / React.ReactNode | 'Delete filter', |
deleteConfirmationDescription | Delete confirmation description | string / React.ReactNode | 'Deleting this filter will permanently remove it from templates library. All tables using this filter will be reset.', |
deleteConfirmationYes | Label of delete confirmation button | string / React.ReactNode | 'Delete' |
deleteConfirmationNo | Label of delete cancellation button | string / React.ReactNode | 'Cancel' |
itemActionRename | Label of rename item action | string / React.ReactNode | 'Rename' |
itemActionDuplicate | Label of duplicate item action | string / React.ReactNode | 'Duplicate' |
itemActionDelete | Label of delete item action | string / React.ReactNode | 'Delete' |
noResults | No results information | string / React.ReactNode | 'No results', |
searchPlaceholder | Placeholder of search input | string | 'Search', |
title | Title of ItemFilter drawer | string / React.ReactNode | 'Filter', |
searchClearTooltip | Tooltip copy on clear search button | string / React.ReactNode | 'Clear', |