1.1.13 • Published 2 months ago

@synerise/ds-context-selector v1.1.13

Weekly downloads
57
License
ISC
Repository
github
Last release
2 months ago

id: context-selector

title: ContextSelector

ContextSelector UI Component

Installation

npm i @synerise/ds-context-selector
or
yarn add @synerise/ds-context-selector

Usage

import ContextSelector from '@synerise/ds-context-selector'

<ContextSelector
    texts={{
     buttonLabel: 'Choose',
     searchPlaceholder: 'Search',
     noResults: 'No results',
   }}
    onSelectItem={(item) => {}}
    selectedItem={{
       name: 'Transaction charge',
       id: 6,
       icon: <NotificationsM />,
       groupId: 'RECENT',
       groupName: 'Activity',
     }}
    items={[
        {
            name: 'Pricelist 02',
            id: 0,
            icon: <SegmentM />,
            groupId: 'RECENT',
            groupName: 'Parameters',
        },
        {
            name: 'Transaction charge',
            id: 6,
            icon: <NotificationsM />,
            groupId: 'RECENT',
            groupName: 'Activity',
        },
        {
          name: 'Segmentation 1',
          id: 'segmentation_1',
          icon: <SegmentM />,
          groupId: 'SEGMENTATIONS',
        }
    ]}
    groups={[
        {
            id: 'RECENT',
            name: 'Recent',
            defaultGroup: true,
          },
          {
            id: 'ALL',
            name: 'All',
            defaultGroup: false,
            subGroups: [
            {
                name: 'Segmentations',
                id: 'SEGMENTATIONS',
                icon: <FolderM />,
                groupName: 'Parameters',
            },
            ]
        }]}
/>

Demo

API

PropertyDescriptionTypeDefault
groupsGroups of itemsContextGroup[][]
itemsArray of itemsContextItem[][]
menuItemHeightSize of single menu itemItemSize.LARGE \ ItemSize.DEFAULTItemSize.DEFAULT
onSelectItemCallback called when user selects item(item: ContextItem \ ContextGroup \ undefined) => void-
defaultDropdownVisibilitydefault visibility of dropdownbooleanfalse
openedWhether if dropdown should opens from outside of componentbooleanfalse
textsTranslations objectContextTexts-
selectedItemSelected itemContextItem \ undefinedundefined
addModeIf true trigger doesn't change style when value is setContextItem \ undefinedundefined
customTriggerComponentAdd custom triggerReact.ReactNodeundefined
triggerAdd custom trigger to modal'click' \ 'hover' \ 'contextMenu''click
getMenuEntryPropsConfigure tooltip (information-card by default)(arg: ParameterValueType) => MenuItemProps \ undefinedundefined
dropdownWrapperStylesApply custom styles to dropdown wrapperCSSProperties \ undefined-
onClickOutsideEventsOverwrite default events for document listenerHandledEventsType[] \ undefined-
onClickOutsideCallback called when user click outside dropdown() => void \ undefined-
onSearchCallback called when user enter any char in search input(query: string) => void-
hideSearchFieldWhether to hide the search field in the dropdownbooleanfalse
onFetchDataCallback called when user scrolls to the end of dropdown list() => void-
onActivateCallback called when user opens dropdown(fieldType: string) => void-
onDeactivateCallback called when user closes dropdown() => void-
hasMoreItemsWhether if onFetchData should be calledboolean-
getPopupContainerOverridePopup container function for child tooltips and dropdowns(trigger: HTMLElement \ null) => HTMLElement;
dropdownPropsLimited part of props for dropdown on ContextSelector componentOmit<DropdownProps, 'trigger' 'getPopupContainer' 'onVisibleChange' 'visible' 'overlay'>-
errorTextError message to display below componentReactNode-
isErrorRender trigger with error styles, even if errorText is emptyboolean-

ContextGroup

PropertyDescriptionTypeDefault
defaultGroupWhether if this group is defaultbooleanfalse
iconIcon of groupReact.ReactNode-
idId of groupReact.ReactText-
itemTypeType of itemsstring-
nameName of groupstring-
subGroupsSubgroups of groupsContextGroup[]-
tooltipTooltip textstring-
useCustomIconUse custom icon instead of wrapping it inside Icon componentbooleanfalse
descriptionSet menu item description ( recommended to use with 'large' sizeReact.ReactNode-
customSuffixUse custom suffix instead of default 'check' iconReact.ReactNode-

ContextItem

PropertyDescriptionTypeDefault
groupIdId of groupReact.ReactText-
groupNameName of groupstring-
iconIcon of itemReact.ReactNode-
idId of itemReact.ReactText-
nameName of itemstring-
subGroupsSubgroups of itemContextGroup[]-
useCustomIconUse custom icon instead of wrapping it inside Icon componentbooleanfalse
descriptionSet menu item description ( recommended to use with 'large' sizeReact.ReactNode-
customSuffixUse custom suffix instead of default 'check' iconReact.ReactNode-

ContextTexts

PropertyDescriptionTypeDefault
buttonLabelButton labelReactNode'Choose'
noResultsNo results infoReactNode'No results'
searchPlaceholderSearch box placeholderstring'Search'
showMoreShow more button labelReactNode'Show more'
recentItemsGroupNameDropdown section title for recent resultsstring'Recent'
allItemsGroupNameDropdown section title for all resultsstring'All'
1.1.1

4 months ago

1.1.0

4 months ago

1.1.9

2 months ago

1.1.8

2 months ago

1.1.7

2 months ago

1.1.6

3 months ago

1.1.5

3 months ago

1.1.4

3 months ago

1.1.3

3 months ago

1.1.2

4 months ago

1.1.12

2 months ago

1.1.11

2 months ago

1.1.10

2 months ago

1.1.13

2 months ago

1.0.2

4 months ago

1.0.1

5 months ago

1.0.0

5 months ago

1.0.5

4 months ago

1.0.4

4 months ago

1.0.3

4 months ago

0.26.14

5 months ago

0.26.12

5 months ago

0.26.13

5 months ago

0.26.11

5 months ago

0.26.10

5 months ago

0.26.9

5 months ago

0.26.8

5 months ago

0.26.7

5 months ago

0.26.6

5 months ago

0.26.5

6 months ago

0.26.4

6 months ago

0.26.3

6 months ago

0.26.2

6 months ago

0.26.1

6 months ago

0.26.0

6 months ago

0.25.25

6 months ago

0.25.24

7 months ago

0.25.18

8 months ago

0.25.19

8 months ago

0.25.14

9 months ago

0.25.15

8 months ago

0.25.16

8 months ago

0.25.17

8 months ago

0.25.13

9 months ago

0.25.21

8 months ago

0.25.22

8 months ago

0.25.23

8 months ago

0.25.20

8 months ago

0.25.11

9 months ago

0.25.12

9 months ago

0.25.10

9 months ago

0.25.9

9 months ago

0.25.8

9 months ago

0.25.7

10 months ago

0.25.6

10 months ago

0.25.4

10 months ago

0.25.3

10 months ago

0.25.5

10 months ago

0.21.23

1 year ago

0.21.24

1 year ago

0.21.21

1 year ago

0.21.22

1 year ago

0.22.4

1 year ago

0.22.3

1 year ago

0.22.2

1 year ago

0.22.1

1 year ago

0.22.0

1 year ago

0.25.2

11 months ago

0.25.1

11 months ago

0.25.0

11 months ago

0.23.3

1 year ago

0.23.2

1 year ago

0.23.1

1 year ago

0.23.0

1 year ago

0.24.5

11 months ago

0.24.4

12 months ago

0.24.3

12 months ago

0.24.2

1 year ago

0.24.1

1 year ago

0.24.0

1 year ago

0.24.8

11 months ago

0.24.7

11 months ago

0.24.6

11 months ago

0.21.20

1 year ago

0.21.19

1 year ago

0.21.18

1 year ago

0.21.17

1 year ago

0.21.16

1 year ago

0.21.14

1 year ago

0.21.15

1 year ago

0.21.13

1 year ago

0.21.12

1 year ago

0.21.10

1 year ago

0.21.11

1 year ago

0.21.9

1 year ago

0.21.8

1 year ago

0.21.7

1 year ago

0.21.6

1 year ago

0.21.5

1 year ago

0.21.4

1 year ago

0.21.3

1 year ago

0.21.2

1 year ago

0.21.1

1 year ago

0.21.0

1 year ago

0.20.8

1 year ago

0.20.7

1 year ago

0.20.6

1 year ago

0.20.5

1 year ago

0.20.4

1 year ago

0.20.3

1 year ago

0.20.2

1 year ago

0.20.1

2 years ago

0.20.0

2 years ago

0.19.25

2 years ago

0.19.24

2 years ago

0.19.23

2 years ago

0.19.22

2 years ago

0.19.21

2 years ago

0.19.20

2 years ago

0.17.7

2 years ago

0.17.9

2 years ago

0.17.10

2 years ago

0.17.12

2 years ago

0.17.11

2 years ago

0.17.13

2 years ago

0.18.1

2 years ago

0.18.2

2 years ago

0.18.3

2 years ago

0.18.4

2 years ago

0.18.5

2 years ago

0.18.0

2 years ago

0.19.8

2 years ago

0.19.9

2 years ago

0.19.0

2 years ago

0.19.1

2 years ago

0.19.2

2 years ago

0.19.3

2 years ago

0.19.4

2 years ago

0.19.5

2 years ago

0.19.6

2 years ago

0.19.7

2 years ago

0.19.11

2 years ago

0.19.12

2 years ago

0.19.13

2 years ago

0.19.14

2 years ago

0.19.15

2 years ago

0.19.16

2 years ago

0.19.17

2 years ago

0.19.18

2 years ago

0.19.10

2 years ago

0.19.19

2 years ago

0.17.5

2 years ago

0.17.6

2 years ago

0.17.4

2 years ago

0.17.3

2 years ago

0.17.2

2 years ago

0.17.0

2 years ago

0.17.1

2 years ago

0.16.14

2 years ago

0.16.10

2 years ago

0.16.11

2 years ago

0.16.12

2 years ago

0.16.13

2 years ago

0.16.3

2 years ago

0.16.4

2 years ago

0.16.5

2 years ago

0.16.6

2 years ago

0.16.7

2 years ago

0.16.8

2 years ago

0.16.9

2 years ago

0.16.2

2 years ago

0.15.10

2 years ago

0.15.9

2 years ago

0.16.0

2 years ago

0.16.1

2 years ago

0.15.7

2 years ago

0.15.6

2 years ago

0.15.4

2 years ago

0.15.5

2 years ago

0.14.12

3 years ago

0.14.11

3 years ago

0.15.0

3 years ago

0.15.1

3 years ago

0.15.2

3 years ago

0.15.3

3 years ago

0.14.10

3 years ago

0.14.5

3 years ago

0.14.6

3 years ago

0.14.7

3 years ago

0.14.8

3 years ago

0.14.9

3 years ago

0.14.3

3 years ago

0.14.4

3 years ago

0.13.0

3 years ago

0.12.16

3 years ago

0.12.17

3 years ago

0.14.0

3 years ago

0.12.19

3 years ago

0.14.1

3 years ago

0.14.2

3 years ago

0.12.13

3 years ago

0.12.14

3 years ago

0.12.15

3 years ago

0.12.20

3 years ago

0.12.21

3 years ago

0.12.10

3 years ago

0.12.11

3 years ago

0.12.12

3 years ago

0.12.7

3 years ago

0.12.2

3 years ago

0.12.3

3 years ago

0.12.4

3 years ago

0.12.5

3 years ago

0.12.6

3 years ago

0.11.0

3 years ago

0.12.0

3 years ago

0.12.1

3 years ago

0.10.10

3 years ago

0.10.9

3 years ago

0.10.5

3 years ago

0.10.6

3 years ago

0.10.7

3 years ago

0.10.8

3 years ago

0.9.0

4 years ago

0.10.1

4 years ago

0.10.2

3 years ago

0.10.3

3 years ago

0.10.4

3 years ago

0.10.0

4 years ago

0.8.5

4 years ago

0.8.4

4 years ago

0.8.7

4 years ago

0.8.6

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.8.3

4 years ago

0.8.2

4 years ago

0.7.3

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

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.5.0

4 years ago

0.5.1

4 years ago

0.6.0

4 years ago

0.4.43

4 years ago

0.4.42

4 years ago

0.4.41

4 years ago

0.4.40

4 years ago

0.4.39

4 years ago

0.4.38

4 years ago

0.4.37

4 years ago

0.4.36

4 years ago

0.4.35

4 years ago

0.4.32

4 years ago

0.4.33

4 years ago

0.4.34

4 years ago

0.4.31

4 years ago

0.4.30

4 years ago

0.4.29

4 years ago

0.4.28

4 years ago

0.4.27

4 years ago

0.4.26

4 years ago

0.4.23

4 years ago

0.4.20

4 years ago

0.4.19

4 years ago

0.4.18

4 years ago

0.4.17

4 years ago

0.4.16

4 years ago

0.4.15

4 years ago

0.4.14

4 years ago

0.4.13

4 years ago

0.4.12

4 years ago

0.4.9

4 years ago

0.4.8

4 years ago

0.4.10

4 years ago

0.4.11

4 years ago

0.4.7

4 years ago

0.4.6

4 years ago

0.4.5

4 years ago

0.4.4

4 years ago

0.4.3

4 years ago

0.4.1

4 years ago

0.4.2

4 years ago

0.4.0

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.9

4 years ago

0.2.8

4 years ago

0.2.7

4 years ago

0.2.6

4 years ago

0.2.4

4 years ago

0.2.3

4 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.0.1

5 years ago

0.1.0

5 years ago