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

PropertyDescriptionTypeDefault
visibleWhether the ItemFilter is visible or not.booleanfalse
hideSpecify a callback that will be called when a user clicks mask or close button.() => void-
removeItemSpecify a callback that will be called when a user removes list item({ id: string }) =>void-
editItemSpecify a callback that will be called when a user change name of list item({ id: string, name: string }) => void-
duplicateItemSpecify a callback that will be called when a user duplicates list item({ id: string }) => void-
selectItemSpecify a callback that will be called when a user select list item({ id: string }) => void-
categoriesArray of categoriesCategory[][]
selectedItemIdId of selected itemstringundefined
textsObject contains texts for buttons, title, confirms etc.Texts-
maxToShowItemsShows x first items, rest are hidden under show more buttonnumber200
searchWhether the search input is availablanumber200

Search

PropertyDescriptionTypeDefault
onChangeCallback called, when value of search input changes(value: string) => void-
onClearCallback called, when user click on clear search icon() => void-
valueCurrent value of search inputstring-

Category

PropertyDescriptionTypeDefault
labelName of categorystring''
hasMoreWhether the category contains more itemsboolean-
itemsArray of list itemsItem[][]

Item

PropertyDescriptionTypeDefault
idId of itemstring-
canUpdate?Whether the item can be editedbooleanfalse
canDelete?Whether the item can be deletedbooleanfalse
canDuplicate?Whether the item can be duplicatedbooleanfalse
nameName of itemstring-
description?Description of itemstring-
userObject contains informations about userUser-
createdItem creation timestampstring-

User

PropertyDescriptionTypeDefault
avatar_urlLink avatarstring-
firstnameFirst namestring-
lastnameLast namestring-
emailEmailstring-

Texts

PropertyDescriptionTypeDefault
activateItemTitlePopconfirm titlestring / React.ReactNode'By activating this filter, you will cancel your unsaved filter settings',
activateActivate button labelstring / React.ReactNode'Activate',
cancelCancel button labelstring / React.ReactNode'Cancel',
deleteConfirmationTitleDelete confirmation titlestring / React.ReactNode'Delete filter',
deleteConfirmationDescriptionDelete confirmation descriptionstring / React.ReactNode'Deleting this filter will permanently remove it from templates library. All tables using this filter will be reset.',
deleteConfirmationYesLabel of delete confirmation buttonstring / React.ReactNode'Delete'
deleteConfirmationNoLabel of delete cancellation buttonstring / React.ReactNode'Cancel'
itemActionRenameLabel of rename item actionstring / React.ReactNode'Rename'
itemActionDuplicateLabel of duplicate item actionstring / React.ReactNode'Duplicate'
itemActionDeleteLabel of delete item actionstring / React.ReactNode'Delete'
noResultsNo results informationstring / React.ReactNode'No results',
searchPlaceholderPlaceholder of search inputstring'Search',
titleTitle of ItemFilter drawerstring / React.ReactNode'Filter',
searchClearTooltipTooltip copy on clear search buttonstring / React.ReactNode'Clear',