ManageableList

ManageableList UI Component

Example

<ManageableList
addItemLabel="Add folder"
showMoreLabel="show all"
showLessLabel="show less"
more="more"
less="less"
maxToShowItems={5}
onItemAdd={addItem}
onItemRemove={removeItem}
onItemEdit={editItem}
onItemSelect={action('onItemSelect')}
onChangeOrder=(action('onChangeOrder'))
items={[]}
loading={false}
listType={ListType.default}
/>

Demo

API

PropertyDescriptionTypeDefault
maxToShowItemsShows x first items, rest are hidden under show more buttonnumber5
onItemAddCallback triggered when user hits enter key in the new item input field.({ name: string }) => void-
onItemRemoveCallback triggered when user clicks on the remove item button.({ id: string }) => void-
onItemEditCallback triggered then user hits enter key in the edit item name input field.({ id: string; name: string }) => void-
onItemSelectCallback triggered when user clicks on list item.({ id: string }) => void-
onChangeOrderCallback triggered when user changes order of items(Item[]) => void-
changeOrderByButtonsAllows to change order of items by dedicated buttons in item suffix, requires onChangeOrder propertyboolean-
itemsArray of list itemsItem[]-
loadingLoading stateboolean-
typeType of listdefault / content / filterdefault
addButtonDisabledDisable add item buttonbooleanfalse
changeOrderDisabledDisable change of orderbooleanfalse
greyBackgroundChange background color of list and list itemsbooleanfalse
textsTexts on buttons, confirms and popupsTexts-
searchQuerySearch query used to highlight list item namestring-

Texts

PropertyDescriptionTypeDefault
addItemLabelLabel of add item buttonstring / React.ReactNode-
showMoreLabelLabel of show more items buttonstring / React.ReactNode-
showLessLabelLabel of show less items buttonstring / React.ReactNode-
moreTranslation of 'more'string / React.ReactNode-
lessTranslation of 'less'string / React.ReactNode-
activateItemActivate item confirm titlestring / React.ReactNode-
activateLabel of confirm activation buttonstring / React.ReactNode-
cancelLabel of cancel buttonstring / React.ReactNode-
deleteConfirmationTitleTitle of delete item confirmation popupstring / React.ReactNode-
deleteConfirmationTitleDescription of delete item confirmation popupstring / React.ReactNode-
deleteConfirmationYesLabel of delete confirmation buttonstring / React.ReactNode-
deleteConfirmationNoLabel of delete cancellation buttonstring / React.ReactNode-
itemActionRenameLabel of rename item actionstring / React.ReactNode-
itemActionDuplicateLabel of duplicate item actionstring / React.ReactNode-
itemActionDeleteLabel of delete item actionstring / React.ReactNode-

Item

PropertyDescriptionTypeDefault
idIdentifier of itemstring-
nameName of item (visible on list)string-
canUpdateFlag which allows to update item nameboolean-
canDeleteFlag which allows to remove itemboolean-
canDuplicateFlag which allows to duplicate itemboolean-
tagTag (ds-tags), available only for content list typeTag-
iconIcon (ds-icon)Icon-
contentContent rendered in content type listReact.ReactNode-