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-
additionalActionsAdditional actions for single list itemAdditionalAction[]-
stylesAdditional styles for ManageableList wrapperReact.CSSProperties-
expandedIds (deprecated)Array of item ids that should be rendered openReact.Key[]-

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-
headerSuffixComponent that will be rendered on the start of the itemReact.ReactNode-
hideHeaderSuffixOnHoverWhether to hide suffixHeader on hoverboolean-
expandedRender openedboolean-
additionalSuffixComponent that will be rendered on the end of the item suffixReact.ReactNode-

AdditionalAction

PropertyDescriptionTypeDefault
tooltipName of action visible on tooltipstring-
iconds-icon component visible on itemReact.ReactNode-
onClickCallback triggered when user clicks on icon(item: ItemProps) => void-
colorcolor of iconstringgrey-500