diginet-core-ui 1.3.73 → 1.3.74

package/components/tree-view/index.js

@@ -6,52 +6,60 @@ import { render } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
-import { mapParent, randomString, removeUnicode } from '../../utils';
+import { classNames, mapParent, randomString, removeUnicode } from '../../utils';
 import { getGlobal } from '../../global';
 import { alignCenter, borderBox, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
 const {
   colors: {
+    system: {
+      disabled: systemDisabled
+    },
     fill: {
       focus: fillFocus,
       hover: fillHover,
       pressed: fillPressed
+    },
+    text: {
+      main: textMain
     }
-  }
+  },
+  spacing
 } = theme;
 const separatorPattern = /\{\w+\}/g;
 const currentValue = {},
       itemsRenderAsync = {};
 const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  expand,
-  disabled,
-  selectBox,
-  multiple,
-  selectAll,
+  action = {},
   allowSearch,
-  showSelectedItems,
-  disabledRelevantValue,
-  disabledBoldResult,
   autoExpandToResult,
-  showChildrenOfResult,
+  className,
+  collapseIcon,
+  dataSource,
+  disabled,
+  disabledBoldResult,
+  disabledRelevantValue,
   displayExpr,
-  valueExpr,
+  expand,
+  expandIcon,
   id,
-  parentID,
-  className,
-  selectAllLabel,
+  multiple,
   multipleValueMode,
-  searchMode,
-  searchDelayTime,
-  renderAsyncWithLength,
+  onChange,
+  parentID,
   renderAsyncFromLevel,
-  expandIcon,
-  collapseIcon,
-  dataSource,
-  value,
+  renderAsyncWithLength,
   renderItem,
-  onChange,
+  searchDelayTime,
+  searchMode,
   searchProps,
+  selectAll,
+  selectAllLabel,
+  selectBox,
+  showChildrenOfResult,
+  showSelectedItems,
+  value,
+  valueExpr,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -248,6 +256,12 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (node.classList.contains('DGN-UI-Accordion') && node.firstChild.classList.contains('DGN-UI-Accordion-Summary')) {
         var _node$querySelectorAl;
 
+        const summaryEl = node.firstChild;
+
+        if (!summaryEl.classList.contains('expanding')) {
+          summaryEl.lastChild.firstChild.click();
+        }
+
         const checkbox = node.firstChild.firstChild.lastChild.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;
@@ -258,13 +272,10 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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');
+          setTimeout(() => {
+            e.classList[mustDisabled || isChecked ? 'add' : 'remove']('treeview-disabled');
+          });
         });
-        const summaryEl = node.firstChild;
-
-        if (!summaryEl.classList.contains('expanding')) {
-          summaryEl.lastChild.firstChild.click();
-        }
       }
     }
   };
@@ -646,6 +657,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     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
 
@@ -657,7 +669,17 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return jsx(Accordion, {
         key: index,
         className: focusClass,
-        expand: expand || data.expand
+        expand: expand || data.expand,
+        onExpand: e => {
+          if (disabledRelevantValue && !isTrue && !isParentTrue) {
+            handleDisabledParent(e, isTrue);
+          }
+        },
+        onCollapse: e => {
+          if (disabledRelevantValue && !isTrue && !isParentTrue) {
+            handleDisabledParent(e, isTrue);
+          }
+        }
       }, jsx(AccordionSummary, {
         expandIcon: expandIcon,
         collapseIcon: collapseIcon,
@@ -776,7 +798,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       }
     }
-  }, [value]);
+  }, []);
   useEffect(() => {
     if (selectAllRef.current) {
       checkedSelectAllCheckbox();
@@ -803,18 +825,32 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   }, [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
-  }));
+  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;
+  });
   return useMemo(() => {
     var _value3;
 
@@ -830,7 +866,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const sync = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > renderAsyncWithLength;
     return jsx("div", {
       css: TreeViewRootCSS,
-      className: 'DGN-UI-TreeView' + (disabled ? ' disabled' : '')
+      className: classNames('DGN-UI-TreeView', disabled && 'disabled')
     }, showSelectedItems && jsx(InputBase, {
       inputRef: inputValueRef,
       viewType: 'outlined',
@@ -866,9 +902,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     })), jsx(Divider, null)), jsx("div", {
       ref: ref,
       ...props,
-      className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('TreeView-Content', disabled && 'disabled', className)
     }, mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
-  }, [dataSource, value, renderAsyncWithLength, disabled, showSelectedItems, allowSearch, multiple, selectAll, selectAllLabel, className, selectBox, id, parentID, disabledBoldResult, autoExpandToResult, showChildrenOfResult, searchMode, onChange, searchProps]);
+  }, [allowSearch, autoExpandToResult, className, collapseIcon, dataSource, disabled, disabledBoldResult, disabledRelevantValue, displayExpr, expandIcon, id, multiple, multipleValueMode, onChange, parentID, renderAsyncFromLevel, renderAsyncWithLength, renderItem, searchMode, searchProps, selectAll, selectAllLabel, selectBox, showChildrenOfResult, showSelectedItems, value, valueExpr]);
 }));
 const TreeViewRootCSS = css`
     ${displayBlock};
@@ -881,11 +917,11 @@ const TreeViewRootCSS = css`
             padding: 0;
             border-radius: 0;
             &.focus {
-                background-color: ${theme.colors.focus};
+                background-color: ${fillFocus};
             }
             .Accordion-Icon-Root {
                 ${flexRow};
-                margin-right: 4px;
+                margin-right: ${spacing([1])};
             }
         }
         .DGN-UI-Accordion-Details-Content {
@@ -916,7 +952,7 @@ const TreeViewRootCSS = css`
         ${displayInlineBlock};
         ${positionRelative};
         height: 100%;
-        margin-right: 8px;
+        margin-right: ${spacing([2])};
     }
     .TreeView-Item {
         ${flexRow};
@@ -925,13 +961,13 @@ const TreeViewRootCSS = css`
         ${borderBox};
         min-height: 40px;
         text-align: left;
-        color: ${theme.colors.text.main};
+        color: ${textMain};
         width: 100%;
         &.non-child {
             ${cursorPointer};
             transition: background-color 300ms ease;
             &.disabled {
-                color: ${theme.colors.disabled};
+                color: ${systemDisabled};
                 cursor: no-drop;
             }
             &:not(.disabled) {
@@ -950,7 +986,7 @@ const TreeViewRootCSS = css`
             }
         }
         &.focus {
-            background-color: ${theme.colors.focus};
+            background-color: ${fillFocus};
         }
         &.TreeView-Item-active .DGN-UI-Typography {
             font-weight: bold;
@@ -958,40 +994,39 @@ const TreeViewRootCSS = css`
     }
     &.expand-able {
         .TreeView-All {
-            margin-left: 34px;
+            margin-left: ${spacing([8.5])};
         }
         .TreeView-Item.non-child {
-            padding-left: 34px;
+            padding-left: ${spacing([8.5])};
         }
     }
 `;
 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: [],
+  disabled: false,
+  disabledBoldResult: false,
+  disabledRelevantValue: false,
+  displayExpr: 'name',
+  expand: false,
   expandIcon: 'ArrowDown',
+  id: 'id',
+  multiple: false,
   multipleValueMode: 'multiple',
-  searchMode: 'contains',
-  renderAsyncWithLength: 200,
+  parentID: 'parentID',
   renderAsyncFromLevel: 2,
-  searchProps: {}
+  renderAsyncWithLength: 200,
+  searchMode: 'contains',
+  searchProps: {},
+  selectAll: false,
+  selectAllLabel: getGlobal('selectAll'),
+  selectBox: false,
+  showChildrenOfResult: false,
+  showSelectedItems: false,
+  value: [],
+  valueExpr: ''
 };
 TreeView.propTypes = {
   /** expand immediate if true */

package/components/typography/index.js

@@ -4,9 +4,9 @@
 import { memo, useRef, forwardRef, useImperativeHandle, Fragment, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { renderHTML } from '../../utils';
+import { classNames, renderHTML } from '../../utils';
 import { Popover } from '..';
-import { breakWord, displayBlock, displayInlineBlock, overflowHidden, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
+import { breakWord, cursorPointer, displayBlock, displayInlineBlock, overflowHidden, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
 import { color as colors } from '../../styles/colors';
 import theme from '../../theme/settings';
 const {
@@ -36,7 +36,8 @@ const {
     paragraph1,
     paragraph2,
     paragraph3
-  }
+  },
+  spacing
 } = theme;
 const typographyMap = new Map([['t1', title1], ['t2', title2], ['t3', title3], ['t4', title4], ['h1', heading1], ['h2', heading2], ['h3', heading3], ['h4', heading4], ['h5', heading5], ['h6', heading6], ['p1', paragraph1], ['p2', paragraph2], ['p3', paragraph3]]);
 const colorMap = new Map([['default', main], ['secondary', rest]]);
@@ -44,28 +45,32 @@ const colorMap = new Map([['default', main], ['secondary', rest]]);
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
-  color,
-  center,
-  uppercase,
+  action = {},
   capitalize,
-  fullWidth,
-  mapping,
-  className,
-  lineClamp,
+  center,
   children,
+  className,
+  color,
+  fullWidth,
   hoverTooltip,
+  lineClamp,
+  mapping,
+  onClick,
   tooltipDirection,
+  type,
+  uppercase,
   ...props
 }, reference) => {
   const ref = useRef(null);
   const [openTooltip, setOpenTooltip] = useState(false);
 
-  const _TextRootCSS = TextRootCSS(color, type, lineClamp);
+  const _TextRootCSS = TextRootCSS(color, type, lineClamp, onClick);
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -73,7 +78,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
 
-  const classNames = inTooltip => ['DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className].join(' ').trim().replace(/\s+/g, ' ');
+  const classes = inTooltip => classNames('DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className);
 
   const setHoverTooltip = (open, isTooltip) => {
     !isTooltip && setOpenTooltip(false);
@@ -105,28 +110,31 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       direction: tooltipDirection
     }, renderHTML(renderChildren(), mapping, {
       css: _TextRootCSS,
-      className: classNames(true),
+      className: classes(true),
       style: {
         color: textTooltip,
-        padding: '4px 6px'
+        padding: spacing([1, 1.5]),
+        height: 'fit-content'
       }
     }));
-  }, [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp]);
+  }, [openTooltip, capitalize, center, children, className, color, fullWidth, hoverTooltip, lineClamp, mapping, onClick, tooltipDirection, type, uppercase]);
   return jsx(Fragment, null, renderHTML(renderChildren(), mapping, {
     ref: ref,
     css: _TextRootCSS,
-    className: classNames(false),
+    className: classes(false),
     onMouseEnter: () => setHoverTooltip(true),
     onMouseLeave: () => setHoverTooltip(false),
+    onClick: onClick,
     ...props
   }), hoverTooltip && renderTooltip);
 }));
 
-const TextRootCSS = (color, type, lineClamp) => css`
+const TextRootCSS = (color, type, lineClamp, onClick) => css`
     ${displayInlineBlock};
     ${positionRelative};
     ${breakWord};
     ${paragraph1};
+    ${onClick && cursorPointer};
     white-space: break-spaces;
     color: ${colorMap.get(color) || colors[color] || color};
     max-width: max-content;
@@ -155,14 +163,14 @@ const TextRootCSS = (color, type, lineClamp) => css`
 `;
 
 Typography.defaultProps = {
-  type: 'p1',
-  color: 'default',
   center: false,
-  fullWidth: true,
-  mapping: 'span',
   className: '',
+  color: 'default',
+  fullWidth: true,
   hoverTooltip: false,
-  tooltipDirection: 'bottom'
+  mapping: 'span',
+  tooltipDirection: 'bottom',
+  type: 'p1'
 };
 /** type of text<br/>
  * h1: Title <br/>
@@ -193,7 +201,7 @@ Typography.propTypes = {
   /** Color of text ['primary', 'secondary', 'success', 'warning', 'danger', 'info', '#hex', rgb(#,#,#)]. */
   color: PropTypes.string,
 
-  /** If true, the component will take up the full width of its container. */
+  /** If `true`, the component will take up the full width of its container. */
   fullWidth: PropTypes.bool,
 
   /** If `true`, hover will show tooltip when text clamped. */
@@ -205,6 +213,9 @@ Typography.propTypes = {
   /** The component used for the root node. Either a string to use a HTML element or a component. */
   mapping: PropTypes.string,
 
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
+
   /** Accepts all props which `mapping` tag support. */
   props: PropTypes.object,