TagsList

TagsList UI Component

Installation

npm i @synerise/ds-tagslist
# or
yarn add @synerise/ds-tagslist

Usage

import TagsList from '@synerise/ds-tagslist'
const items = [
{ id: 1, name: 'Tag 1' },
{ id: 2, name: 'Tag 2' }
];
const onChange = (
action: TagsListActions,
newItems: TagsListItem[],
newTargetItem: TagsListItem,
originItems: TagsListItem[],
originTargetItem: TagsListItem
) => {
console.log(
action, // action string that was triggered
newItems, // new items object with changed data
newTargetItem: // new item object with changed data
originItems, // basically previous items
originTargetItem, // previous item
);
};
<TagsList
items={items}
onChange={onChange}
/>

Demo

API

PropertyDescriptionTypeDefault
addButtonDisabledDefines if add button is disabledbooleanfalse
itemsArray of items which should be displayed as tags for controlled stateTagsListItem[]
onChangeEvent function triggered when items change(action: TagsListActions, newItems: TagsListItem[], newTargetItem: TagsListItem, originItems: TagsListItem[], originTargetItem: TagsListItem) => void
defaultItemsArray of items for no controlled stateTagsListItem[]
maxItemsVisibleThe maximum amount of items which will be visible on the initial rendernumber10
showMoreStepNumber of items shown after clicking "show more" buttonnumber10
textsOverride translation texts passed to the componentTagsListTexts-
onAddDropdownEvent function triggered on "Add tag" visibility change(visible: boolean) => void
onSearchEvent function triggered on search input change(query: string) => void
onManageTagsTriggered when Manage tags buttons are clicked(event: React.MouseEvent<HTMLElement, MouseEvent>) => void
onItemsAddEvent triggered when "Apply" button is clicked inside "Add tag" dropdown.(items: TagsListItem[]) => void
withCheckboxShow checkboxes on items hoverbooleantrue

TagsListItem

TagsListItem object contains information about specific tag.

PropertyDescriptionTypeDefault
nameName of the tagstring-
descriptionDescription info, if set it will be shown in AddModalstring-
favouriteWhether item is added to favouritesbooleanfalse
checkedWhether item is checked/selected (for controlled state)booleanfalse
canUpdateWhether item is editablebooleanfalse
canDeleteWhether item is removablebooleanfalse
canEnterSettingsWhether user can enter settings for the itembooleanfalse
idUnique id of the tag itemstring-

TagsListTexts

PropertyDescriptionTypeDefault
add"Add" textReactNode-
addItemLabelA label of the add formReactNode-
addToFavouriteA tooltip used for adding to the favouritesReactNode-
delete"Delete" textReactNode-
deleteFromFavouritesA tooltip used for removing from favouritesReactNode-
deleteAllContentA message displayed when user wants to delete all the content of the folderReactNode-
edit"Edit" text - displayed in actions menuReactNode-
enterSettings"Settings" text - displayed in actions menuReactNode-
invalidNameErrorError displayed when user provides invalid folder nameReactNode-
less"Less" text - displayed in the footerReactNode-
more"More" text - displayed in the footerReactNode-
moveToDefaultA message displayed when user wants to all the content of the folder to the default folderReactNode-
moveToOtherFolderA message displayed when user wants to all the content of the folder to the other folderReactNode-
showLessLabelAdditional label of the "show less" button in the footerReactNode-
showMoreLabelAdditional label of the "show more" button in the footerReactNode-

AddModal

PropertyDescriptionTypeDefault
disabledShould the trigger be disabledbooleanfalse
itemsList of itemsTagsListItem[]
loadingShow loadingbooleanfalse
tristateUse <CheckboxTristate> for tagsbooleanfalse
triggerReplace default trigger buttonReactNode
searchAddTagAbility to add new tags with search inputbooleantrue
textsOverride translation texts passed to the componentTagsListTexts
onItemsAddEvent function triggered when hit Apply button(items: TagsListItem[]) => void
onVisibleChangeEvent function triggered when dropdown visibility changes(visible: boolean) => void
onManageTagsFunction triggered when "Manage tags" button is clicked(event: React.MouseEvent<HTMLElement, MouseEvent>) => void