@synerise/ds-item-filter
v0.9.8
Published
ItemFilter UI Component for the Synerise Design System
Downloads
866
Readme
id: item-filter title: 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 | - | | email | Email | 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', |