diginet-core-ui 1.3.24

package/components/tree-view/css.js

@@ -0,0 +1,94 @@
+import { css } from '@emotion/core';
+import theme from '../../theme/settings';
+export const TreeViewRoot = css`
+    display: block;
+    position: relative;
+    .DGN-UI-Accordion {
+        box-shadow: none !important;
+        .DGN-UI-Accordion-Summary {
+            min-height: 40px;
+            padding: 0;
+            border-radius: 0;
+            &.focus {
+            background-color: ${theme.colors.focus};
+            }
+            .Accordion-Icon-Root {
+                margin-right: 4px;
+            }
+        }
+        .DGN-UI-Accordion-Details-Content {
+            padding: 0;
+            margin-left: 16px;
+            border-radius: 0;
+        }
+        .Accordion-Icon-Root {
+            transition: opacity 0.2s ease-out;
+            opacity: 1;
+            &.DGN-Invisible {
+                opacity: 0;
+            }
+        }
+        &.DGN-Hidden {
+            display: none !important;
+        }
+    }
+    .TreeView-All,
+    .TreeView-Content {
+        display: block;
+        position: relative;
+        .DGN-UI-Accordion {
+            margin-bottom: 0;
+        }
+    }
+    .TreeView-Item-Checkbox {
+        display: inline-block;
+        position: relative;
+        height: 100%;
+        margin-right: 8px;
+    }
+    .TreeView-Item {
+        display: flex;
+        position: relative;
+        align-items: center;
+        min-height: 40px;
+        text-align: left;
+        color: ${theme.colors.text};
+        box-sizing: border-box;
+        &.non-child {
+            transition: background-color 300ms ease;
+            cursor: pointer;
+            &.disabled {
+                color: ${theme.colors.disabled};
+                cursor: no-drop;
+            }
+            &:not(.disabled) {
+                &:hover {
+                    background-color: ${theme.colors.hover};
+                }
+                &:focus {
+                    background-color: ${theme.colors.focus};
+                }
+                &:active {
+                    background-color: ${theme.colors.pressing};
+                }
+            }
+            &.DGN-Hidden {
+                display: none !important;
+            }
+        }
+        &.focus {
+            background-color: ${theme.colors.focus};
+        }
+        &.TreeView-Item-active .DGN-UI-Typography {
+            font-weight: bold;
+        }
+    }
+    &.expand-able {
+        .TreeView-All {
+            margin-left: 34px;
+        }
+        .TreeView-Item.non-child {
+            padding-left: 34px;
+        }
+    }
+`;

package/components/tree-view/index.js

@@ -0,0 +1,1009 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, useState, useEffect, useRef, forwardRef, Fragment, useImperativeHandle } from 'react';
+import { render } from 'react-dom';
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import { TreeViewRoot } from './css';
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase } from '..';
+import Icon from '../../icons';
+import { mapParent, randomString, removeUnicode } from '../../utils';
+import { getGlobal } from '../../global';
+const separatorPattern = /\{\w+\}/g;
+const currentValue = {},
+      itemsRenderAsync = {};
+const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  expand,
+  disabled,
+  disabledMap,
+  selectBox,
+  multiple,
+  selectAll,
+  allowSearch,
+  showSelectedItems,
+  disabledRelevantValue,
+  disabledBoldResult,
+  autoExpandToResult,
+  showChildrenOfResult,
+  displayExpr,
+  valueExpr,
+  id,
+  parentID,
+  className,
+  selectAllLabel,
+  multipleValueMode,
+  searchMode,
+  searchDelayTime,
+  renderAsyncWithLength,
+  renderAsyncFromLevel,
+  expandIcon,
+  collapseIcon,
+  dataSource,
+  value,
+  renderItem,
+  onChange,
+  searchProps,
+  ...props
+}, reference) => {
+  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 determinateCheckbox = (input, determinate) => {
+    if (multipleValueMode === 'multiple' || disabledRelevantValue) {
+      input.classList[determinate ? 'add' : 'remove']('determinate');
+      input.classList[determinate ? 'remove' : 'add']('indeterminate');
+      input.nextElementSibling.classList[determinate ? 'add' : 'remove']('determinate');
+      input.nextElementSibling.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) {
+          var _node$parentNode;
+
+          // 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 = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _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.firstChild.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
+          el.firstChild.firstChild.firstChild.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 checkbox = node.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild; // 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 => {
+          e.classList[mustDisabled || isChecked ? 'add' : 'remove']('treeview-disabled');
+        });
+        const summaryEl = node.firstChild;
+
+        if (!summaryEl.classList.contains('expanding')) {
+          summaryEl.lastChild.firstChild.click();
+        }
+      }
+    }
+  };
+
+  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 = '';
+      clearIconRef.current.style.opacity = 0;
+      return;
+    }
+
+    if (clearIconRef.current.style.opacity === '0') {
+      clearIconRef.current.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) => {
+    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 = false;
+      let inputEl = null; // 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]));
+      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 jsx(Typography, {
+      mapping: 'div',
+      color: 'inherit',
+      style: {
+        width: '100%'
+      }
+    }, displayText);
+  };
+
+  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 focusClass = isTrue && !selectBox && !multiple ? 'focus' : '';
+    const childItems = data.childItems; // is Summary
+
+    if (childItems && childItems.length) {
+      const id = randomString(6, {
+        allowSymbol: false,
+        allowNumber: false
+      });
+      return jsx(Accordion, {
+        key: index,
+        className: focusClass,
+        expand: expand || data.expand
+      }, jsx(AccordionSummary, {
+        expandIcon: expandIcon,
+        collapseIcon: collapseIcon,
+        expandIconAt: 'start',
+        expandIconProps: {
+          className: 'TreeView'
+        },
+        className: focusClass,
+        onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined
+      }, jsx("div", {
+        className: 'TreeView-Item'
+      }, (selectBox || multiple) && jsx("span", {
+        className: 'TreeView-Item-Checkbox'
+      }, jsx(Checkbox, {
+        checked: isTrue,
+        inputProps: {
+          value: typeof data === 'object' ? data[valueExpr] : data
+        }
+      })), renderContent(data, keyArr, index))), jsx(AccordionDetails, {
+        id: id
+      }, childItems.map((child, i) => renderTreeView(child, index + i, level + 1, sync, id))));
+    }
+
+    return jsx("div", {
+      className: 'TreeView-Item non-child ' + focusClass,
+      onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
+      key: index,
+      tabIndex: "-1"
+    }, (selectBox || multiple) && jsx("span", {
+      className: 'TreeView-Item-Checkbox'
+    }, jsx(Checkbox, {
+      checked: isTrue,
+      inputProps: {
+        value: typeof data === 'object' ? data[valueExpr] : data
+      }
+    })), renderContent(data, keyArr, index));
+  };
+
+  useEffect(() => {
+    currentValue[unique] = {};
+    return () => {
+      currentValue[unique] = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (searchDelayTime) {
+      var _searchDelayTime$matc, _searchDelayTime$matc2;
+
+      const units = {
+        m: 60000,
+        s: 1000,
+        ms: 1
+      };
+      timeout.current = typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[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);
+          }
+        });
+      }
+    }
+  }, [value]);
+  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 (disabled && ref.current) {
+      const childNodes = ref.current.childNodes;
+      Array.from(childNodes).forEach(node => {
+        node.classList.add('disabled');
+      });
+      return () => {
+        Array.from(childNodes).forEach(node => {
+          node.classList.remove('disabled');
+        });
+      };
+    }
+  }, [disabled]);
+  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, () => ({
+    disabled,
+    displayExpr,
+    valueExpr,
+    id,
+    parentID,
+    value,
+    getValue: () => Object.keys(currentValue[unique]).filter(v => currentValue[unique][v]),
+    setValue,
+    handleCheckbox,
+    get: () => ref.current
+  }));
+  const TreeViewComp = useMemo(() => {
+    if (typeof value === 'string') {
+      value = [value];
+    }
+
+    if (!multiple && value.length > 1) {
+      value.length = 1;
+    }
+
+    itemsRenderAsync[unique] = {};
+    const sync = dataSource.length > renderAsyncWithLength;
+    return jsx("div", {
+      css: TreeViewRoot,
+      className: 'DGN-UI-TreeView' + (disabled ? ' disabled' : '')
+    }, showSelectedItems && jsx(InputBase, {
+      inputRef: inputValueRef,
+      viewType: 'outlined',
+      readOnly: true,
+      style: {
+        marginBottom: 1
+      },
+      inputStyle: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      },
+      endIcon: jsx(Icon, {
+        ref: clearIconRef,
+        name: 'Cancel',
+        onClick: clearAllValue
+      })
+    }), allowSearch && jsx(InputBase, _extends({
+      startIcon: 'Search',
+      onChange: onChangeHandler,
+      viewType: 'outlined'
+    }, searchProps)), multiple && selectAll && jsx(Fragment, null, jsx("div", {
+      className: 'TreeView-All'
+    }, jsx(Checkbox, {
+      label: selectAllLabel,
+      onChange: onSelectAll,
+      inputRef: selectAllRef
+    })), jsx(Divider, null)), jsx("div", _extends({
+      ref: ref
+    }, props, {
+      className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim()
+    }), disabledMap ? dataSource : mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
+  }, [dataSource, value, multiple, selectBox, disabledBoldResult, autoExpandToResult, showChildrenOfResult, searchMode, onChange, searchProps]);
+  return TreeViewComp;
+}));
+TreeView.defaultProps = {
+  expand: false,
+  disabled: false,
+  disabledMap: false,
+  selectBox: false,
+  multiple: false,
+  selectAll: false,
+  allowSearch: false,
+  showSelectedItems: false,
+  disabledRelevantValue: false,
+  disabledBoldResult: false,
+  autoExpandToResult: true,
+  showChildrenOfResult: false,
+  displayExpr: 'name',
+  id: 'id',
+  parentID: 'parentID',
+  valueExpr: '',
+  className: '',
+  selectAllLabel: getGlobal('selectAll'),
+  dataSource: [],
+  value: [],
+  expandIcon: 'ArrowDown',
+  multipleValueMode: 'multiple',
+  searchMode: 'contains',
+  renderAsyncWithLength: 200,
+  renderAsyncFromLevel: 2,
+  searchProps: {}
+};
+TreeView.propTypes = {
+  /** expand immediate if true */
+  expand: PropTypes.bool,
+
+  /** prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** Will not map parent from data */
+  disabledMap: PropTypes.bool,
+
+  /** show checkbox in each item */
+  selectBox: PropTypes.bool,
+
+  /** allow select multiple item if true */
+  multiple: PropTypes.bool,
+
+  /** allow select/unselect all items on one click (just support for multiple) */
+  selectAll: PropTypes.bool,
+
+  /** display input box search if true */
+  allowSearch: PropTypes.bool,
+
+  /** display all value in a box */
+  showSelectedItems: PropTypes.bool,
+
+  /** disabled parent and children item if true (only supported for multipleValueMode is single) */
+  disabledRelevantValue: PropTypes.bool,
+
+  /** prevent display content of match values with bold style */
+  disabledBoldResult: PropTypes.bool,
+
+  /** expand TreeView to match result if true */
+  autoExpandToResult: PropTypes.bool,
+
+  /** still show children of last result was found if true */
+  showChildrenOfResult: PropTypes.bool,
+
+  /** Used to identify the parent key */
+  id: PropTypes.string.isRequired,
+
+  /** used for mapping into a nested list */
+  parentID: PropTypes.string.isRequired,
+
+  /** class on element */
+  className: PropTypes.string,
+
+  /**
+   * field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
+   */
+  displayExpr: PropTypes.string,
+
+  /** the key to determine value to return */
+  valueExpr: PropTypes.string,
+
+  /** return value for the select multiple use case */
+  multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
+
+  /**
+   * return value for the select multiple use case
+   * * contains: "Công ty" contains "công", but not contains "cong"
+   * * similar: "Công ty" contains "công" and "cong"
+   */
+  searchMode: PropTypes.oneOf(['contains', 'similar']),
+
+  /** The content display for label of checkbox select all */
+  selectAllLabel: PropTypes.string,
+
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   */
+  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** will render asynchronously if the number of elements is greater than this number */
+  renderAsyncWithLength: PropTypes.number,
+
+  /** will render asynchronously from level equal this number */
+  renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
+
+  /** data to show in tree list */
+  dataSource: PropTypes.array,
+
+  /** the value was selected */
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
+   */
+  renderItem: PropTypes.func,
+
+  /**
+   * on change value function<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,
+
+  /** the icon to display for expand icon */
+  expandIcon: PropTypes.any,
+
+  /** the props for InputBase */
+  searchProps: PropTypes.object,
+
+  /** the icon to display for collapse icon */
+  collapseIcon: PropTypes.any,
+
+  /**
+   * 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/>
+   * }
+   */
+  ref: PropTypes.any
+};
+export default TreeView;