@synerise/ds-item-filter NPM

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	-

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',

@synerise/ds-button @synerise/ds-drawer @synerise/ds-icon @synerise/ds-manageable-list @synerise/ds-result @synerise/ds-scrollbar @synerise/ds-search-bar @synerise/ds-tabs @synerise/ds-typography @synerise/ds-utils react-window

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @zalastax/nolb-_syn @synerise/design-system

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

4 months ago

5 months ago

5 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

11 months ago

11 months ago

11 months ago

11 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

11 months ago

11 months ago

11 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

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

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

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

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

title: ItemFilter

Installation

Usage

Demo

API

ItemFilter

Search

Category

Item

User

Texts