Tree Multi Selector

v.0.0.2

Installation

yarn

yarn add @mercell/tree-multi-selector-react

pnpm

pnpm add @mercell/tree-multi-selector-react

npm

npm install --save @mercell/tree-multi-selector-react

The Tree Multi Selector has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/checkbox-react": "^5.0.1",
"@mercell/input-react": "^3.0.1",
"@mercell/modal-react": "^2.0.1",
"@mercell/radio-button-react": "^5.0.3",
"@mercell/use-on-outside-click-react-hook": "^3.0.1",
"@mercell/use-window-resize-react-hook": "^0.0.6",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Tree Multi Selector component is as simple as importing it like this.

import { TreeMultiSelector } from '@mercell/tree-multi-selector-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const data = { '100': { description: 'ParentTest', children: ['200'], parents: [], }, '200': { description: 'ChildTest', children: [], parents: ['100'], }, }; const TreeMultiSelectorWrapper = () => { const [isModalView, setIsModalView] = React.useState(true); const [isShowModal, setIsShowModal] = React.useState(false); const [selectedIds, setSelectedIds] = React.useState<string[]>([]); const uri = "https://api.beta.mercell.com/cpv?language=en" return ( <> <Checkbox checked={isModalView} onChange={() => setIsModalView(!isModalView)}> Modal view </Checkbox> {isModalView && <Button scheme='primary' onClick={()=>setIsShowModal(true)}> Click to open Modal </Button>} <TreeMultiSelector modal={isModalView} isModalVisible={isShowModal} onCloseModalCallback={() => setIsShowModal(false)} // baseURI={uri} data={data} selectedIds={selectedIds} onItemsListChange={setSelectedIds} /> <h3>Selected ids:</h3> {selectedIds.map(item => <p key={item}>{item}</p> )} </> ); } render( <div> <TreeMultiSelectorWrapper/> </div> ))

// You can play with code, with HTML tags and text as much as you want!
const data = {
    '100': {
        description: 'ParentTest',
        children: ['200'],
        parents: [],
    },
    '200': {
        description: 'ChildTest',
        children: [],
        parents: ['100'],
    },
};
const TreeMultiSelectorWrapper = () => {
    const [isModalView, setIsModalView] = React.useState(true);
    const [isShowModal, setIsShowModal] = React.useState(false);
    const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
    const uri = "https://api.beta.mercell.com/cpv?language=en"
    return (
        <>  
            <Checkbox 
              checked={isModalView}
              onChange={() => setIsModalView(!isModalView)}>
              Modal view
            </Checkbox>
            
            {isModalView && 
              <Button scheme='primary' onClick={()=>setIsShowModal(true)}>
                Click to open Modal
              </Button>}
  
            <TreeMultiSelector
                modal={isModalView}
                isModalVisible={isShowModal}
                onCloseModalCallback={() => setIsShowModal(false)}
                // baseURI={uri}
                data={data}
                selectedIds={selectedIds}
                onItemsListChange={setSelectedIds}
            />
            
            <h3>Selected ids:</h3>
            {selectedIds.map(item => <p key={item}>{item}</p> )}
        </>
    );
}
render(
    <div>
        <TreeMultiSelectorWrapper/>
    </div>
))

Result

Types, definitions, etc.

Types

TMSProps

interface TMSProps {
    allowToSelectOnlyOne?: boolean;
    ariaCollapseChevronLabel?: string;
    ariaExpandChevronLabel?: string;
    ariaLabelClearSearch?: string;
    baseURI?: string;
    data?: ItemsInterface;
    displayId?: boolean;
    disabledIds?: string[];
    isLoading?: boolean;
    isModalVisible?: boolean;
    modal?: boolean;
    modalProps?: Omit<ModalProps, 'isModalVisible' | 'onCloseCallback'> &
        JSX.IntrinsicElements['div'];
    noItemsFoundText?: string;
    onCloseModalCallback?: () => void;
    onItemsListChange: (selectedIds: string[]) => void;
    searchPlaceholder?: string;
    selectedIds?: string[];
    selectedItemsText?: string;
    title?: string;
}

type ItemsInterface = Record<
    string,
    { description: string; children: string[]; parents: string[] }
>;

Name	Type	Default	Required	Description
allowToSelectOnlyOne	boolean	false	no	Switch from checkbox to radio for item selection
ariaCollapseChevronLabel	sting	Collapse	no	Collapse text for aria-label
ariaExpandChevronLabel	string	Expand	no	Expand text for aria-label
ariaLabelClearSearch	string	Clear search	no	Clear search text for aria-label
baseURI	string	-	no	URI for data auto-fetching
data	Record<string, { description: string; children: string[]; parents: string[]}>	-	no	An object of treenodes (does not trigger if baseURI is set)
displayId	boolean	false	no	Whether to display item's id
disabledIds	string[]	-	no	Initial ids which should be disabled
isLoading	boolean	-	no	Whether to display loading spinner (does not trigger if baseURI is set)
isModalVisible	boolean	false	no	Specifies the visibility of the modal (does not trigger if baseURI is set)
modal	boolean	-	no	Toggle modal mode based on value
modalProps	ModalProps	{}	no	Pass through props for Modal
noItemsFoundText	string	Could not find any results matching your search	no	Text where search function could not find any match
onCloseModalCallback	() => void	-	no	Callback method to close modal (trigger only for modal mode)
onItemsListChange	(selectedIds: string[]) => void	-	yes	Function to catch any change of codes based on user action
searchPlaceholder	string	Search	no	Search placeholder text
selectedIds	string[]	-	no	Initial ids which can be selected by default
selectedItemsText	string	Selected items	no	Text near the counter
title	string	Select categories	no	Title of the compoment

Changelog

Change Log - @mercell/tree-multi-selector-react

This log was last generated on Wed, 08 Mar 2023 14:12:18 GMT and should not be manually modified.

0.0.2

Wed, 08 Mar 2023 14:12:18 GMT

Patches

• Component is created