diginet-core-ui 1.4.39 → 1.4.40

package/src/components/tree-view/index.js

@@ -0,0 +1,1085 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    ButtonIcon,
+    Checkbox,
+    Divider,
+    InputBase,
+    Typography,
+} from 'components';
+import { getGlobal } from 'global';
+import PropTypes from 'prop-types';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { render } from 'react-dom';
+import {
+    bgColor,
+    borderRadius,
+    boxBorder,
+    cursorNotAllowed,
+    cursorPointer,
+    displayBlock,
+    displayFlex,
+    displayInlineBlock,
+    flexRow,
+    itemsCenter,
+    parseHeight,
+    parseMinHeight,
+    parseWidth,
+    positionRelative,
+    textColor,
+    textLeft,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp, mapParent, randomString, removeUnicode } from 'utils';
+
+const separatorPattern = /\{\w+\}/g;
+const currentValue = {},
+    itemsRenderAsync = {};
+
+const TreeView = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'TreeView' });
+        const {
+            action = {},
+            allowSearch,
+            autoExpandToResult,
+            className,
+            collapseIcon,
+            dataSource,
+            disabled,
+            disabledBoldResult,
+            disabledRelevantValue,
+            displayExpr,
+            expand,
+            expandIcon,
+            id,
+            multiple,
+            multipleValueMode,
+            onChange,
+            parentID,
+            renderAsyncFromLevel,
+            renderAsyncWithLength,
+            renderItem,
+            searchDelayTime: searchDelayTimeProp,
+            searchMode,
+            searchProps,
+            selectAll,
+            selectAllLabel: selectAllLabelProp,
+            selectBox,
+            showChildrenOfResult,
+            showSelectedItems,
+            value: valueProp,
+            valueExpr,
+            ...other
+        } = props;
+
+        let searchDelayTime = searchDelayTimeProp;
+        let value = valueProp;
+
+        const selectAllLabel = selectAllLabelProp || getGlobal('selectAll');
+
+        const ref = useRef(null);
+        const selectAllRef = useRef(null);
+        const inputValueRef = useRef(null);
+        const clearIconRef = useRef(null);
+        const timer = useRef(null);
+        const timeout = useRef(null);
+
+        const [unique] = useState(randomString(6, { allowNumber: false, allowSymbol: false }));
+
+        const _TreeViewRootCSS = TreeViewRootCSS(theme);
+
+        const determinateCheckbox = (input, determinate) => {
+            if (multipleValueMode === 'multiple' || disabledRelevantValue) {
+                input.classList[determinate ? 'add' : 'remove']('determinate');
+                input.classList[determinate ? 'remove' : 'add']('indeterminate');
+                input.nextElementSibling.firstChild.classList[determinate ? 'add' : 'remove']('determinate');
+                input.nextElementSibling.firstChild.classList[determinate ? 'remove' : 'add']('indeterminate');
+            }
+        };
+
+        // const triggerCheckboxRecursion = (nodes, isChecked) => {
+        //     nodes.forEach(el => {
+        //         if (el.classList.contains('non-child')) {
+        //             el.querySelector('input').checked = isChecked;
+        //         } else {
+        //             el.firstChild.querySelector('input').checked = isChecked;
+        //             triggerCheckboxRecursion(Array.from(el.lastChild.firstChild.childNodes), isChecked);
+        //         }
+        //     });
+        // };
+
+        const checkedParentFollowValue = nodes => {
+            if (nodes && nodes?.length) {
+                nodes.forEach(node => {
+                    if (!node.classList.contains('non-child')) {
+                        const input = node.firstChild.querySelector('input');
+                        if (input.checked) {
+                            if (!input.classList.contains('determinate')) {
+                                determinateCheckbox(input, true);
+                            }
+                            Array.from(node.querySelectorAll('input')).forEach(el => {
+                                el.checked = true;
+                                if (!el.classList.contains('determinate')) {
+                                    determinateCheckbox(el, true);
+                                }
+                            });
+                        } else {
+                            const checkedLeastOfOne = Array.from(node.querySelectorAll('input')).some(el => el.checked);
+                            if (checkedLeastOfOne) {
+                                input.checked = checkedLeastOfOne;
+                                if (input.classList.contains('determinate')) {
+                                    determinateCheckbox(input, false);
+                                }
+                            } else if (input.checked) {
+                                input.checked = false;
+                            }
+                            const childNodes = Array.from(node?.lastChild?.firstChild?.childNodes || '');
+                            checkedParentFollowValue(childNodes);
+                        }
+                    }
+                });
+            }
+        };
+
+        const checkParentCheckbox = node => {
+            while (ref.current.contains(node)) {
+                node = node.parentNode;
+                if (multipleValueMode === 'multiple' && node.classList.contains('DGN-UI-Accordion-Details-Content')) {
+                    const childNodes = Array.from(node.childNodes);
+                    if (childNodes) {
+                        // Số lượng input đã check, dùng để kiểm tra là đã check tất cả, check chưa đầy đủ hoặc chưa check phần tử nào
+                        let determinateQuantity = 0;
+                        const checkedQuantity = childNodes.reduce((quantity, el) => {
+                            const input = el.querySelector('input');
+                            determinateQuantity += +input.classList.contains('determinate');
+                            return quantity + +input.checked;
+                        }, 0);
+                        // Accordion root
+                        node = node.parentNode?.parentNode;
+                        if (node && node.firstChild) {
+                            const input = node.firstChild.querySelector('input');
+                            if (input) {
+                                if (!checkedQuantity) {
+                                    input.checked = false;
+                                    currentValue[unique][input.value] = false;
+                                } else {
+                                    input.checked = true;
+                                    if (
+                                        checkedQuantity === childNodes?.length &&
+                                        checkedQuantity === determinateQuantity
+                                    ) {
+                                        if (!input.classList.contains('determinate')) {
+                                            determinateCheckbox(input, true);
+                                        }
+                                        currentValue[unique][input.value] = true;
+                                    } else {
+                                        if (input.classList.contains('determinate')) {
+                                            determinateCheckbox(input, false);
+                                        }
+                                        // currentValue[unique][input.value] = false;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                } else if (multipleValueMode === 'inheritance' && node.classList.contains('DGN-UI-Accordion')) {
+                    const input = node.firstChild.firstChild.querySelector('input');
+                    input.checked = true;
+                    currentValue[unique][input.value] = true;
+                }
+            }
+        };
+
+        const checkChildrenCheckbox = (node, isChecked) => {
+            // node = node.nextElementSibling?.firstChild;
+            // if (node) {
+            //     const childNodes = Array.from(node.childNodes);
+            //     if (childNodes) {
+            //         triggerCheckboxRecursion(childNodes, isChecked);
+            //     }
+            // }
+            if (node) {
+                node.querySelectorAll('input').forEach(el => {
+                    if (!el.classList.contains('determinate')) {
+                        determinateCheckbox(el, true);
+                    }
+                    el.checked = isChecked;
+                });
+            }
+        };
+
+        const checkedSelectAllCheckbox = () => {
+            const allInput = Array.from(ref.current.querySelectorAll('input'));
+            if (allInput.some(i => i.checked)) {
+                const isCheckedAll = allInput.every(i => i.checked);
+                if (isCheckedAll) {
+                    if (!selectAllRef.current.classList.contains('determinate')) {
+                        determinateCheckbox(selectAllRef.current, true);
+                    }
+                } else {
+                    if (selectAllRef.current.classList.contains('determinate')) {
+                        determinateCheckbox(selectAllRef.current, false);
+                    }
+                }
+                selectAllRef.current.checked = true;
+            } else if (selectAllRef.current.checked) {
+                selectAllRef.current.checked = false;
+            }
+        };
+
+        const handleDisabledChildren = (node, isChecked) => {
+            if (node) {
+                node.querySelectorAll('.TreeView-Item.non-child, .DGN-UI-Accordion').forEach(el => {
+                    el.classList[isChecked ? 'add' : 'remove']('disabled');
+                    if (el.classList.contains('DGN-UI-Accordion')) {
+                        el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.classList[
+                            isChecked ? 'add' : 'remove'
+                        ]('disabled');
+                        el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.disabled = isChecked;
+                        Array.from(el.childNodes).forEach(e => {
+                            e.classList[isChecked ? 'add' : 'remove']('treeview-disabled');
+                        });
+                    } else {
+                        el.firstChild.firstChild.firstChild.firstChild.disabled = isChecked;
+                        el.parentNode.classList[isChecked ? 'add' : 'remove']('disabled');
+                        el.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
+                    }
+                });
+            }
+        };
+
+        const handleDisabledParent = (node, isChecked) => {
+            while (ref.current.contains(node)) {
+                node = node.parentNode;
+                if (
+                    node.classList.contains('DGN-UI-Accordion') &&
+                    node.firstChild.classList.contains('DGN-UI-Accordion-Summary')
+                ) {
+                    const summaryEl = node.firstChild;
+                    if (!summaryEl.classList.contains('expanding')) {
+                        summaryEl.lastChild.firstChild.click();
+                    }
+                    const checkbox = node.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild;
+                    if (checkbox) {
+                        // Trường hợp phải set về false để xét các input đã check không bao gồm node này
+                        checkbox.firstChild.checked = isChecked;
+                        const mustDisabled = !!node.querySelectorAll('input:checked')?.length;
+                        // Nếu có ít nhất một input con được check thì phải checked cho input này
+                        checkbox.firstChild.checked = mustDisabled;
+                        determinateCheckbox(checkbox.firstChild, !mustDisabled);
+                        node.classList[mustDisabled || isChecked ? 'add' : 'remove']('disabled');
+                        checkbox.classList[mustDisabled || isChecked ? 'add' : 'remove']('disabled');
+                        Array.from(node.childNodes).forEach(e => {
+                            setTimeout(() => {
+                                e.classList[mustDisabled || isChecked ? 'add' : 'remove']('treeview-disabled');
+                            });
+                        });
+                    }
+                }
+            }
+        };
+
+        const setValue = (data, isChecked) => {
+            if (multiple && multipleValueMode !== 'single') {
+                currentValue[unique][typeof data === 'object' ? data[valueExpr] : data] = isChecked;
+                if (data.childItems && data.childItems?.length) {
+                    data.childItems.forEach(d => {
+                        setValue(d, isChecked);
+                    });
+                }
+            }
+        };
+
+        const clearAllValue = () => {
+            inputValueRef.current.value = '';
+            clearIconRef.current.style.opacity = 0;
+            Object.keys(currentValue[unique]).forEach(key => {
+                currentValue[unique][key] = false;
+            });
+            Array.from(ref.current.querySelectorAll('input')).forEach(input => {
+                input.checked = false;
+            });
+            !!onChange && onChange({ value: [], data: [] }, []);
+        };
+
+        const setValueIntoInput = data => {
+            if (!data || !data?.length) {
+                inputValueRef.current.value = '';
+                if (clearIconRef.current?.element) clearIconRef.current.element.style.opacity = 0;
+                return;
+            }
+            if (clearIconRef.current?.element && clearIconRef.current.element.style.opacity === '0') {
+                clearIconRef.current.element.style.opacity = null;
+            }
+            let result = '';
+            const keyArr = displayExpr.match(separatorPattern);
+            data.forEach(d => {
+                result += keyArr ? renderData(d, keyArr) : d[displayExpr] + ', ';
+            });
+            inputValueRef.current.value = result.replace(/, $/, '');
+        };
+
+        const handleCheckbox = (isChecked = false, value = 'all') => {
+            if ((selectBox || multiple) && ref.current) {
+                if (value === 'all') {
+                    ref.current.querySelectorAll('input').forEach(input => (input.checked = isChecked));
+                } else if (value) {
+                    if (typeof value === 'string') {
+                        value = [value];
+                    }
+                    value.forEach(v => {
+                        const input = ref.current.querySelector(`input[value="${v}"]`);
+                        if (input) {
+                            input.checked = isChecked;
+                        }
+                    });
+                }
+            }
+        };
+
+        const onClickHandler = (e, data) => {
+            if (disabled) return;
+            const target = e.target;
+            const currentTarget = e.currentTarget;
+            let value = typeof data === 'object' ? data[valueExpr] : data;
+            const justSelected = value;
+            const result = [];
+            const checkBoxEl = currentTarget.querySelector('.TreeView-Item-Checkbox');
+            if (multiple) {
+                let checked;
+                let inputEl;
+                // Click on text (not checkbox)
+                if (!checkBoxEl.contains(target)) {
+                    inputEl = checkBoxEl.querySelector('input');
+                    checked = !inputEl.checked || inputEl.classList.contains('indeterminate');
+                    inputEl.checked = checked;
+                } else {
+                    inputEl = currentTarget.querySelector('input');
+                    checked = inputEl.checked || inputEl.classList.contains('indeterminate');
+                    inputEl.checked = checked;
+                }
+                if (multipleValueMode !== 'single') {
+                    if (!currentTarget.classList.contains('non-child')) {
+                        checkChildrenCheckbox(currentTarget.nextElementSibling, checked);
+                        if (checked) {
+                            determinateCheckbox(inputEl, true);
+                        }
+                    }
+                    if (checked || multipleValueMode === 'multiple') {
+                        checkParentCheckbox(currentTarget);
+                    }
+                    // Handle result when multiple
+                    setValue(data, checked);
+                } else {
+                    currentValue[unique][value] = checked;
+                    if (disabledRelevantValue) {
+                        // Disabled/Enabled parent and children node
+                        if (!currentTarget.classList.contains('non-child')) {
+                            handleDisabledChildren(currentTarget.nextElementSibling, checked);
+                        }
+                        handleDisabledParent(currentTarget.parentNode, checked);
+                    }
+                }
+                result.push(
+                    ...Object.keys(currentValue[unique])
+                        .filter(v => currentValue[unique][v])
+                        .filter(v => v !== '')
+                );
+                value = result;
+                if (value?.length) {
+                    data = dataSource?.filter(obj => value.includes(typeof obj === 'object' ? obj[valueExpr] : obj));
+                } else {
+                    data = [];
+                }
+                if (showSelectedItems) {
+                    setValueIntoInput(data);
+                }
+            } else {
+                if (selectBox) {
+                    const checkedInput = ref.current.querySelectorAll('input:checked');
+                    let input = currentTarget.querySelector('input');
+                    // Click on checkbox
+                    if (checkBoxEl.contains(target)) {
+                        if (!input.checked) {
+                            input.checked = true;
+                            return;
+                        }
+                    } else if (checkedInput[0].isSameNode(input)) {
+                        return;
+                    }
+                    if (checkedInput) {
+                        checkedInput.forEach(el => (el.checked = false));
+                    }
+                    input.checked = true;
+                }
+                currentValue[unique][value] = true;
+                result.push(value);
+            }
+            if (selectAllRef.current) {
+                checkedSelectAllCheckbox();
+            }
+            e.value = value;
+            e.justSelected = justSelected;
+            e.data = data;
+            !!onChange && onChange(e, result);
+        };
+
+        const onSelectAll = e => {
+            let result;
+            if (!e.target.checked && e.target.classList.contains('determinate')) {
+                ref.current.querySelectorAll('input:checked').forEach(input => (input.checked = false));
+                e.value = [];
+                result = [];
+            } else {
+                if (!e.target.classList.contains('determinate')) {
+                    determinateCheckbox(e.target, true);
+                }
+                e.target.checked = true;
+                ref.current.querySelectorAll('input').forEach(input => {
+                    input.checked = true;
+                    if (!input.classList.contains('determinate')) {
+                        determinateCheckbox(input, true);
+                    }
+                });
+                result = Object.keys(currentValue[unique]).map(v => v);
+                e.value = result;
+            }
+            !!onChange && onChange(e, result);
+        };
+
+        const onChangeHandler = e => {
+            const value = e.target.value;
+            if (timeout.current) {
+                if (timer.current) clearTimeout(timer.current);
+                timer.current = setTimeout(
+                    () => {
+                        onSearchHandler(value);
+                    },
+                    /^\d+$/.test(timeout.current) ? timeout.current : 700
+                );
+            } else {
+                onSearchHandler(value);
+            }
+        };
+
+        const onSearchHandler = value => {
+            const entries = ref.current.querySelectorAll('.TreeView-Item.non-child, .DGN-UI-Accordion');
+            if (value) {
+                entries.forEach(entry => {
+                    if (compareTwoString(value, entry.textContent)) {
+                        entry.classList.remove('DGN-Hidden');
+                        // Check exactly entry
+                        if (entry.classList.contains('TreeView-Item')) {
+                            if (!disabledBoldResult && !entry.classList.contains('TreeView-Item-active')) {
+                                entry.classList.add('TreeView-Item-active');
+                            }
+                        } else {
+                            const summaryEl = entry.firstChild;
+                            const TreeViewItemEl = summaryEl.querySelector('.TreeView-Item');
+                            if (TreeViewItemEl) {
+                                if (compareTwoString(value, TreeViewItemEl.textContent)) {
+                                    if (
+                                        !disabledBoldResult &&
+                                        !TreeViewItemEl.classList.contains('TreeView-Item-active')
+                                    ) {
+                                        TreeViewItemEl.classList.add('TreeView-Item-active');
+                                        entry.classList.add('TreeView-Item-contain-children-active');
+                                    }
+                                    if (!compareTwoString(value, entry.lastChild.textContent)) {
+                                        summaryEl.lastChild.classList.add('DGN-Invisible');
+                                    } else {
+                                        summaryEl.lastChild.classList.remove('DGN-Invisible');
+                                    }
+                                } else if (TreeViewItemEl.classList.contains('TreeView-Item-active')) {
+                                    TreeViewItemEl.classList.remove('TreeView-Item-active');
+                                    entry.classList.remove('TreeView-Item-contain-children-active');
+                                }
+                                if (autoExpandToResult && !summaryEl.classList.contains('expanding')) {
+                                    summaryEl.lastChild.firstChild.click();
+                                }
+                            }
+                        }
+                    } else {
+                        entry.classList.add('DGN-Hidden');
+                        if (entry.classList.contains('TreeView-Item')) {
+                            if (entry.classList.contains('TreeView-Item-active')) {
+                                entry.classList.remove('TreeView-Item-active');
+                            }
+                            entry.classList.remove('TreeView-Item-contain-children-active');
+                        } else {
+                            const summaryEl = entry.firstChild;
+                            const TreeViewItemEl = summaryEl.querySelector('.TreeView-Item');
+                            if (TreeViewItemEl) {
+                                if (TreeViewItemEl.classList.contains('TreeView-Item-active')) {
+                                    TreeViewItemEl.classList.remove('TreeView-Item-active');
+                                }
+                                summaryEl.lastChild.classList.remove('DGN-Invisible');
+                            }
+                        }
+                    }
+                });
+                if (showChildrenOfResult) {
+                    entries.forEach(entry => {
+                        if (entry.classList.contains('TreeView-Item-contain-children-active')) {
+                            const hiddenEls = entry.querySelectorAll('.DGN-Hidden, .DGN-Invisible');
+                            if (hiddenEls && hiddenEls?.length) {
+                                hiddenEls.forEach(hiddenEl => hiddenEl.classList.remove('DGN-Hidden', 'DGN-Invisible'));
+                            }
+                        }
+                    });
+                }
+            } else {
+                entries.forEach(entry => {
+                    entry.classList.remove('DGN-Hidden');
+                    if (
+                        !entry.classList.contains('TreeView-Item') &&
+                        entry.firstChild.lastChild.classList.contains('DGN-Invisible')
+                    ) {
+                        entry.firstChild.lastChild.classList.remove('DGN-Invisible');
+                    }
+                });
+                const activeEls = ref.current.querySelectorAll('.TreeView-Item-active');
+                if (!disabledBoldResult && activeEls && activeEls?.length) {
+                    activeEls.forEach(activeEl => {
+                        activeEl.classList.remove('TreeView-Item-active', 'TreeView-Item-contain-children-active');
+                    });
+                }
+            }
+        };
+
+        const compareTwoString = (search, content) => {
+            if (searchMode === 'similar') {
+                search = removeUnicode(search.normalize(), '.*?');
+                content = removeUnicode(content);
+            }
+            return new RegExp(search.normalize(), 'img').test(content.normalize());
+        };
+
+        const renderDataAsync = (id, array) => {
+            return new Promise(res => {
+                const node = array.map(({ data, index, level }) => {
+                    return renderTreeView(data, index, level, false);
+                });
+                const container = document.getElementById(id);
+                if (container && node) {
+                    render(node, container.firstChild, () => res(1));
+                }
+            });
+        };
+
+        const renderData = (data, keyArr) => {
+            const pattern = keyArr.join('|').replace(/([{}])/g, '\\$1');
+            const separatorArr = displayExpr.split(new RegExp(pattern));
+            let str = '';
+            let i = 0;
+            for (i; i < keyArr?.length; i++) {
+                str +=
+                    separatorArr[i] +
+                    (data[keyArr[i].replace(/\W/g, '')] !== undefined ? data[keyArr[i].replace(/\W/g, '')] : keyArr[i]);
+            }
+            return str + separatorArr[i];
+        };
+
+        const renderContent = (item, keyArr, index) => {
+            const displayText =
+                renderItem && typeof renderItem === 'function'
+                    ? renderItem({ data: item, index })
+                    : typeof item === 'object'
+                    ? keyArr
+                        ? renderData(item, keyArr)
+                        : item[displayExpr]
+                    : item;
+            return (
+                <Typography mapping={'div'} color={'inherit'} style={{ width: '100%' }}>
+                    {displayText}
+                </Typography>
+            );
+        };
+
+        const renderTreeView = (data, index, level, sync = true, id) => {
+            if (level > renderAsyncFromLevel - 1 && sync) {
+                if (itemsRenderAsync[unique][id]) {
+                    itemsRenderAsync[unique][id].push({ data, index, level });
+                } else {
+                    itemsRenderAsync[unique][id] = [{ data, index, level }];
+                }
+                return null;
+            }
+            const keyArr = displayExpr.match(separatorPattern);
+            const isTrue = value.includes(data[valueExpr] || data);
+            const isParentTrue = value.includes(data[parentID]);
+            const focusClass = isTrue && !selectBox && !multiple ? 'focus' : '';
+            const childItems = data.childItems;
+            // is Summary
+            if (childItems && childItems?.length) {
+                const id = randomString(6, { allowSymbol: false, allowNumber: false });
+                return (
+                    <Accordion
+                        key={index}
+                        className={focusClass}
+                        expand={expand || data.expand}
+                        onExpand={e => {
+                            if (disabledRelevantValue && !isTrue && !isParentTrue) {
+                                handleDisabledParent(e, isTrue);
+                            }
+                        }}
+                        onCollapse={e => {
+                            if (disabledRelevantValue && !isTrue && !isParentTrue) {
+                                handleDisabledParent(e, isTrue);
+                            }
+                        }}
+                    >
+                        <AccordionSummary
+                            expandIcon={expandIcon}
+                            collapseIcon={collapseIcon}
+                            expandIconAt={'start'}
+                            expandIconProps={{ className: 'TreeView' }}
+                            className={focusClass}
+                            onClick={multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined}
+                            style={{ paddingLeft: 16 * level }}
+                        >
+                            <div className={'TreeView-Item'}>
+                                {selectBox || multiple ? (
+                                    <span className={'TreeView-Item-Checkbox'}>
+                                        <Checkbox
+                                            checked={isTrue}
+                                            value={typeof data === 'object' ? data[valueExpr] : data}
+                                            stopPropagation={false}
+                                            disabled={disabled}
+                                        />
+                                    </span>
+                                ) : null}
+                                {renderContent(data, keyArr, index)}
+                            </div>
+                        </AccordionSummary>
+                        <AccordionDetails id={id}>
+                            {childItems.map((child, i) => renderTreeView(child, index + i, level + 1, sync, id))}
+                        </AccordionDetails>
+                    </Accordion>
+                );
+            }
+            return (
+                <div
+                    className={classNames('TreeView-Item', 'non-child', focusClass)}
+                    style={{ paddingLeft: 34 + 16 * level }}
+                    onClick={multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined}
+                    key={index}
+                    tabIndex="-1"
+                >
+                    {selectBox || multiple ? (
+                        <span className={'TreeView-Item-Checkbox'}>
+                            <Checkbox
+                                checked={isTrue}
+                                value={typeof data === 'object' ? data[valueExpr] : data}
+                                stopPropagation={false}
+                                disabled={disabled}
+                            />
+                        </span>
+                    ) : null}
+                    {renderContent(data, keyArr, index)}
+                </div>
+            );
+        };
+
+        useEffect(() => {
+            currentValue[unique] = {};
+            return () => {
+                currentValue[unique] = null;
+            };
+        }, []);
+
+        useEffect(() => {
+            if (searchDelayTime) {
+                if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
+                const units = {
+                    m: 60000,
+                    s: 1000,
+                    ms: 1,
+                };
+                timeout.current =
+                    typeof searchDelayTime === 'number'
+                        ? searchDelayTime
+                        : (searchDelayTime.match(/[^a-z]+/i)?.[0] || 1) *
+                          units[searchDelayTime.match(/ms|s|m/i)?.[0] || 's'];
+                return () => {
+                    timeout.current = null;
+                };
+            }
+        }, [searchDelayTime]);
+
+        useEffect(() => {
+            dataSource?.forEach(data => {
+                currentValue[unique][typeof data === 'object' ? data[valueExpr] : data] = false;
+            });
+            if (value && value?.length) {
+                value.forEach(v => {
+                    currentValue[unique][v] = true;
+                });
+            }
+            return () => {
+                currentValue[unique] = {};
+            };
+        }, [dataSource, value]);
+
+        useEffect(() => {
+            if (value && multiple) {
+                if (multipleValueMode !== 'single') {
+                    const childNodes = Array.from(ref.current.childNodes);
+                    if (childNodes && childNodes?.length) {
+                        checkedParentFollowValue(childNodes);
+                    }
+                    if (showSelectedItems) {
+                        const data = dataSource?.filter(d => value.includes(d[valueExpr]));
+                        setValueIntoInput(data);
+                    }
+                    return () => {
+                        if (ref.current) {
+                            Array.from(ref.current.querySelectorAll('input')).forEach(input => {
+                                input.checked = value.includes(input.value);
+                            });
+                        }
+                    };
+                } else if (disabledRelevantValue) {
+                    Array.from(ref.current.querySelectorAll('.TreeView-Item.non-child, .DGN-UI-Accordion')).forEach(
+                        el => {
+                            if (el.firstChild.querySelector('input').checked) {
+                                if (!el.classList.contains('non-child')) {
+                                    handleDisabledChildren(el, true);
+                                }
+                                handleDisabledParent(el.parentNode, true);
+                            }
+                        }
+                    );
+                }
+            }
+        }, []);
+
+        useEffect(() => {
+            if (selectAllRef.current) {
+                checkedSelectAllCheckbox();
+            }
+            if (ref.current.querySelector('.DGN-UI-Accordion-Details-Content')) {
+                if (!ref.current.parentNode.classList.contains('expand-able')) {
+                    ref.current.parentNode.classList.add('expand-able');
+                }
+                return () => {
+                    if (ref.current) {
+                        ref.current.parentNode.classList.remove('expand-able');
+                    }
+                };
+            }
+        }, [dataSource, value, multiple, selectBox]);
+
+        useEffect(() => {
+            if (Object.keys(itemsRenderAsync[unique])?.length) {
+                Object.keys(itemsRenderAsync[unique]).forEach(async key => {
+                    await renderDataAsync(key, itemsRenderAsync[unique][key]);
+                });
+            }
+        }, [dataSource, value, multiple, selectBox, onChange]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            // keep old method
+            currentRef.disabled = disabled;
+            currentRef.displayExpr = displayExpr;
+            currentRef.valueExpr = valueExpr;
+            currentRef.id = id;
+            currentRef.parentID = parentID;
+            currentRef.value = value;
+            currentRef.getValue = () => Object.keys(currentValue[unique]).filter(v => currentValue[unique][v]);
+            currentRef.setValue = setValue;
+            currentRef.handleCheckbox = handleCheckbox;
+            currentRef.get = () => ref.current;
+            return currentRef;
+        });
+
+        if (typeof value === 'string') {
+            value = [value];
+        }
+        if (!multiple && value?.length > 1) {
+            value.length = 1;
+        }
+        itemsRenderAsync[unique] = {};
+        const sync = dataSource?.length > renderAsyncWithLength;
+        return (
+            <div css={_TreeViewRootCSS} className={classNames('DGN-UI-TreeView', disabled && 'disabled')}>
+                {showSelectedItems && multiple ? (
+                    <InputBase
+                        inputRef={inputValueRef}
+                        viewType={'outlined'}
+                        readOnly
+                        style={{ marginBottom: 1 }}
+                        inputStyle={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+                        endIcon={
+                            <ButtonIcon viewType={'ghost'} ref={clearIconRef} name={'Cancel'} onClick={clearAllValue} />
+                        }
+                    />
+                ) : null}
+                {allowSearch ? (
+                    <InputBase startIcon={'Search'} onChange={onChangeHandler} viewType={'outlined'} {...searchProps} />
+                ) : null}
+                {multiple && selectAll ? (
+                    <Fragment>
+                        <div className={'TreeView-All'}>
+                            <Checkbox
+                                label={selectAllLabel}
+                                onChange={onSelectAll}
+                                inputRef={selectAllRef}
+                                stopPropagation={false}
+                                disabled={disabled}
+                            />
+                        </div>
+                        <Divider />
+                    </Fragment>
+                ) : null}
+                <div ref={ref} className={classNames('TreeView-Content', disabled && 'disabled', className)} {...other}>
+                    {mapParent(dataSource || [], id, parentID, true).map((data, index) =>
+                        renderTreeView(data, index.toString(), 0, sync)
+                    )}
+                </div>
+            </div>
+        );
+    })
+);
+
+const TreeViewRootCSS = ({ colors, spacing }) => css`
+    ${displayBlock};
+    ${positionRelative};
+    .DGN-UI-Accordion {
+        box-shadow: none !important;
+        .DGN-UI-Accordion-Summary {
+            ${itemsCenter};
+            ${parseMinHeight(40)};
+            padding: ${spacing([0])};
+            ${borderRadius(0)};
+            &.focus {
+                ${bgColor(getProp(colors, 'fill/focus'))};
+            }
+            .Accordion-Icon-Root {
+                ${displayFlex};
+                ${flexRow};
+                margin-right: ${spacing([1])};
+            }
+        }
+        .DGN-UI-Accordion-Details-Content {
+            padding: ${spacing([0])};
+            ${borderRadius(0)};
+        }
+        .Accordion-Icon-Root {
+            ${displayFlex};
+            ${flexRow};
+            transition: opacity 0.2s ease-out;
+            opacity: 1;
+            &.DGN-Invisible {
+                opacity: 0;
+            }
+        }
+        &.DGN-Hidden {
+            display: none !important;
+        }
+    }
+    .TreeView-All,
+    .TreeView-Content {
+        ${displayBlock};
+        ${positionRelative};
+        .DGN-UI-Accordion {
+            margin-bottom: 0px;
+        }
+    }
+    .TreeView-Item-Checkbox {
+        ${displayInlineBlock};
+        ${positionRelative};
+        ${parseHeight('100%')};
+        margin-right: ${spacing([2])};
+    }
+    .TreeView-Item {
+        ${flexRow};
+        ${positionRelative};
+        ${itemsCenter};
+        ${boxBorder};
+        ${parseWidth('100%')};
+        ${parseMinHeight(40)};
+        ${textLeft};
+        ${textColor(getProp(colors, 'text/main'))};
+        &.non-child {
+            ${cursorPointer};
+            transition: background-color 300ms ease;
+            &.disabled {
+                ${cursorNotAllowed};
+                ${textColor(getProp(colors, 'system/disabled'))};
+            }
+            &:not(.disabled) {
+                &:hover {
+                    ${bgColor(getProp(colors, 'fill/hover'))};
+                }
+                &:focus {
+                    ${bgColor(getProp(colors, 'fill/focus'))};
+                }
+                &:active {
+                    ${bgColor(getProp(colors, 'fill/pressed'))};
+                }
+            }
+            &.DGN-Hidden {
+                display: none !important;
+            }
+        }
+        &.focus {
+            ${bgColor(getProp(colors, 'fill/focus'))};
+        }
+        &.TreeView-Item-active .DGN-UI-Typography {
+            font-weight: bold;
+        }
+    }
+    &.expand-able {
+        .TreeView-All {
+            margin-left: ${spacing([8.5])};
+        }
+        .TreeView-Item.non-child {
+            padding-left: ${spacing([8.5])};
+        }
+    }
+`;
+
+// TreeView.defaultProps = {
+//     allowSearch: false,
+//     autoExpandToResult: true,
+//     className: '',
+//     dataSource: [],
+//     disabled: false,
+//     disabledBoldResult: false,
+//     disabledRelevantValue: false,
+//     displayExpr: 'name',
+//     expand: false,
+//     expandIcon: 'ArrowDown',
+//     id: 'id',
+//     multiple: false,
+//     multipleValueMode: 'multiple',
+//     parentID: 'parentID',
+//     renderAsyncFromLevel: 2,
+//     renderAsyncWithLength: 200,
+//     searchMode: 'contains',
+//     searchProps: {},
+//     selectAll: false,
+//     selectAllLabel: getGlobal('selectAll'),
+//     selectBox: false,
+//     showChildrenOfResult: false,
+//     showSelectedItems: false,
+//     value: [],
+//     valueExpr: '',
+// };
+
+TreeView.propTypes = {
+    /** If `true`, display input box search. */
+    allowSearch: PropTypes.bool,
+    /** If `true`, expand TreeView to match result. */
+    autoExpandToResult: PropTypes.bool,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Icon display for collapse icon. */
+    collapseIcon: PropTypes.any,
+    /** The array of elements that appear in the tree list. */
+    dataSource: PropTypes.array,
+    /** If `true`, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** If `true`, prevent display content of match values with bold style. */
+    disabledBoldResult: PropTypes.bool,
+    /** If `true`, disabled parent and children item (only supported for multipleValueMode is single). */
+    disabledRelevantValue: PropTypes.bool,
+    /** Field name used for text display in dropdown list.<br/>
+     * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+     * Note: don't use 'id - name', return undefined
+     */
+    displayExpr: PropTypes.string,
+    /** If `true`, expand immediate after render (shouldn't use this). */
+    expand: PropTypes.bool,
+    /** Icon display for expand icon. */
+    expandIcon: PropTypes.any,
+    /** If `true`, value must be an array and the treeview will support multiple selections. */
+    multiple: PropTypes.bool,
+    /** Return value for the select multiple use case. */
+    multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
+    /**
+     * Callback fired when the value changes.<br />
+     * return 2 parameters (e, data)<br />
+     * * e: element (insist {value, justSelected, data})<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
+     * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
+     * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
+     * * data: array of selected values (not recommend because it's the same e.value)
+     */
+    onChange: PropTypes.func,
+    /** Used for mapping into a nested list. */
+    parentID: PropTypes.string.isRequired,
+    /** Will render asynchronously from level equal this number. */
+    renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
+    /** Will render asynchronously if the number of elements is greater than this number. */
+    renderAsyncWithLength: PropTypes.number,
+    /** Function displays items by custom.<br/>
+     * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+     * --> such as: displayExpr={'name - role'}
+     */
+    renderItem: PropTypes.func,
+    /**
+     * Duration wait enter search content on search.<br/>
+     * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+     * If `true`, used default delayOnInput.
+     */
+    searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Specifies a comparison operation used to search items. */
+    searchMode: PropTypes.oneOf(['contains', 'similar']),
+    /** The props for InputBase. */
+    searchProps: PropTypes.object,
+    /** If `true`, allow select/unselect all items on one click (just support for multiple). */
+    selectAll: PropTypes.bool,
+    /** The content display for label of checkbox select all */
+    selectAllLabel: PropTypes.string,
+    /** If `true`, show checkbox in each item. */
+    selectBox: PropTypes.bool,
+    /** If `true`, still show children of last result was found. */
+    showChildrenOfResult: PropTypes.bool,
+    /** If `true`, display all value in a box. */
+    showSelectedItems: PropTypes.bool,
+    /** Used to identify the parent key. */
+    id: PropTypes.string.isRequired,
+    /** The displayed value of component. */
+    value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    /** The field name used for the returned result. */
+    valueExpr: PropTypes.string,
+    /**
+     * get ref of TreeView component, insist:<br/>
+     * {<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;disabled: true/false,<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;displayExpr: string,<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;valueExpr: string,<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;id: string,<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;parentID: string,<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;value: string/array<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;getValue: get selected values (instead of onChange function),<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;setValue: set array of value (only multiple),<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;handleCheckbox: checked/unchecked a Checkbox, includes 2 parameters (isChecked, value):<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + isChecked: checked if true (default is false) <br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + value: selected values, use 'all' for all values (default is 'all') <br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
+     * }
+     */
+};
+
+export default TreeView;