0.11.10 • Published 6 months ago

@synerise/ds-tagslist v0.11.10

Weekly downloads
22
License
ISC
Repository
github
Last release
6 months ago

id: tagslist

title: 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
0.11.10

6 months ago

0.11.9

7 months ago

0.11.8

8 months ago

0.11.0

9 months ago

0.11.1

9 months ago

0.11.2

9 months ago

0.11.3

8 months ago

0.11.4

8 months ago

0.11.5

8 months ago

0.11.6

8 months ago

0.11.7

8 months ago

0.10.16

9 months ago

0.10.17

9 months ago

0.10.15

9 months ago

0.10.14

10 months ago

0.10.12

10 months ago

0.10.13

10 months ago

0.9.45

1 year ago

0.9.46

1 year ago

0.9.41

1 year ago

0.9.42

1 year ago

0.9.43

1 year ago

0.9.44

1 year ago

0.10.9

11 months ago

0.10.1

1 year ago

0.10.2

1 year ago

0.10.3

1 year ago

0.10.4

12 months ago

0.10.5

12 months ago

0.10.6

11 months ago

0.10.7

11 months ago

0.10.8

11 months ago

0.10.0

1 year ago

0.10.10

11 months ago

0.10.11

11 months ago

0.9.40

1 year ago

0.9.39

1 year ago

0.9.37

1 year ago

0.9.38

1 year ago

0.9.36

1 year ago

0.9.35

1 year ago

0.9.34

1 year ago

0.9.33

1 year ago

0.9.32

1 year ago

0.9.31

1 year ago

0.9.30

1 year ago

0.9.29

1 year ago

0.9.28

1 year ago

0.9.27

1 year ago

0.9.25

1 year ago

0.9.26

1 year ago

0.9.24

1 year ago

0.9.23

2 years ago

0.9.22

2 years ago

0.9.21

2 years ago

0.9.20

2 years ago

0.9.19

2 years ago

0.9.18

2 years ago

0.9.8

2 years ago

0.8.67

2 years ago

0.9.7

2 years ago

0.8.66

2 years ago

0.8.69

2 years ago

0.9.9

2 years ago

0.8.68

2 years ago

0.9.4

2 years ago

0.9.3

2 years ago

0.9.6

2 years ago

0.9.5

2 years ago

0.9.12

2 years ago

0.9.13

2 years ago

0.9.14

2 years ago

0.9.15

2 years ago

0.9.10

2 years ago

0.9.11

2 years ago

0.9.16

2 years ago

0.9.17

2 years ago

0.9.0

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago

0.8.65

2 years ago

0.8.64

2 years ago

0.8.63

2 years ago

0.8.62

2 years ago

0.8.61

2 years ago

0.8.60

2 years ago

0.8.56

2 years ago

0.8.55

2 years ago

0.8.58

2 years ago

0.8.57

2 years ago

0.8.52

2 years ago

0.8.54

2 years ago

0.8.53

2 years ago

0.8.59

2 years ago

0.8.51

2 years ago

0.8.50

2 years ago

0.8.49

2 years ago

0.8.47

2 years ago

0.8.46

2 years ago

0.8.45

2 years ago

0.8.44

2 years ago

0.8.41

3 years ago

0.8.43

3 years ago

0.8.42

3 years ago

0.8.40

3 years ago

0.8.36

3 years ago

0.8.35

3 years ago

0.8.38

3 years ago

0.8.37

3 years ago

0.8.39

3 years ago

0.8.34

3 years ago

0.8.33

3 years ago

0.8.30

3 years ago

0.8.32

3 years ago

0.8.31

3 years ago

0.8.25

3 years ago

0.8.24

3 years ago

0.8.27

3 years ago

0.8.26

3 years ago

0.8.28

3 years ago

0.8.23

3 years ago

0.8.22

3 years ago

0.8.21

3 years ago

0.8.14

3 years ago

0.8.13

3 years ago

0.8.16

3 years ago

0.8.15

3 years ago

0.8.18

3 years ago

0.8.17

3 years ago

0.8.12

3 years ago

0.8.11

3 years ago

0.8.10

3 years ago

0.8.9

3 years ago

0.8.8

3 years ago

0.8.5

3 years ago

0.8.7

3 years ago

0.8.6

3 years ago

0.8.4

3 years ago

0.7.9

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.8.3

3 years ago

0.8.2

3 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.4

4 years ago

0.7.3

4 years ago

0.7.0

4 years ago

0.7.6

4 years ago

0.7.5

4 years ago

0.7.8

4 years ago

0.7.7

4 years ago

0.6.53

4 years ago

0.6.52

4 years ago

0.6.50

4 years ago

0.6.51

4 years ago

0.6.49

4 years ago

0.6.48

4 years ago

0.6.47

4 years ago

0.6.46

4 years ago

0.6.43

4 years ago

0.6.45

4 years ago

0.6.44

4 years ago

0.6.42

4 years ago

0.6.41

4 years ago

0.6.40

4 years ago

0.6.39

4 years ago

0.6.38

4 years ago

0.6.37

4 years ago

0.6.36

4 years ago

0.6.35

4 years ago

0.6.34

4 years ago

0.6.32

4 years ago

0.6.33

4 years ago

0.6.31

4 years ago

0.6.30

4 years ago

0.6.29

4 years ago

0.6.28

4 years ago

0.6.27

4 years ago

0.6.24

4 years ago

0.6.21

4 years ago

0.6.20

4 years ago

0.6.19

4 years ago

0.6.18

4 years ago

0.6.17

4 years ago

0.6.16

4 years ago

0.6.15

4 years ago

0.6.14

4 years ago

0.6.13

4 years ago

0.6.10

4 years ago

0.6.12

4 years ago

0.6.11

4 years ago

0.6.9

4 years ago

0.6.7

4 years ago

0.6.8

4 years ago

0.6.6

4 years ago

0.6.5

4 years ago

0.6.4

4 years ago

0.6.3

4 years ago

0.6.2

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.5.0

4 years ago

0.4.0

4 years ago

0.3.20

4 years ago