@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

3 months ago

4 months ago

4 months ago

3 months ago

3 months ago

3 months ago

3 months ago

6 months ago

6 months ago

6 months ago

4 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

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 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

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

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

2 years ago

3 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

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

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

title: ItemFilter

Installation

Usage

Demo

API

ItemFilter

Search

Category

Item

User

Texts