diginet-core-ui 1.3.44 → 1.3.46

package/components/form-control/time-picker/index.js

@@ -3,8 +3,9 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import { Cancel as CancelIcon, Clock as ClockIcon } from '../../../icons';
+import HelperText from '../helper-text';
 import { randomString, useOnClickOutside } from '../../../utils';
 import theme from '../../../theme/settings';
 import Swiper from './swiper';
@@ -432,21 +433,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         }
                     `
     },
-    error: {
-      outlined: css`
-                        color: ${theme.colors.danger};
-                        ${typography.paragraph3};
-                        margin-top: 8px;
-                        pointer-events: none;
-                    `,
-      underlined: css`
-                        color: ${theme.colors.danger};
-                        ${typography.paragraph3};
-                        bottom: -20px;
-                        position: absolute;
-                        pointer-events: none;
-                    `
-    },
+    error: css`
+                    position: absolute;
+                    top: 100%;
+                `,
     clock: {
       container: css`
                         background-color: white;
@@ -762,9 +752,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: selected => setInputSecond(selected),
     parentNode: swiperWrapperSecondsRef
   })) : null), [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]);
-  const ErrorMemo = useMemo(() => error && jsx("span", {
-    css: styles.error[viewType]
-  }, error), [error]);
+  const ErrorMemo = useMemo(() => error && jsx(HelperText, {
+    css: styles.error,
+    disabled: disabled
+  }, error), [error, disabled]);
   const MainMemo = useMemo(() => jsx("div", {
     className: IDs.main,
     css: styles.main[viewType],

package/components/tree-view/css.js

@@ -1,8 +1,9 @@
 import { css } from '@emotion/core';
+import { alignCenter, borderBox, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
-export const TreeViewRoot = css`
-    display: block;
-    position: relative;
+export const TreeViewRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
     .DGN-UI-Accordion {
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
@@ -10,20 +11,19 @@ export const TreeViewRoot = css`
             padding: 0;
             border-radius: 0;
             &.focus {
-            background-color: ${theme.colors.focus};
+                background-color: ${theme.colors.focus};
             }
             .Accordion-Icon-Root {
-                display: flex;
+                ${flexRow};
                 margin-right: 4px;
             }
         }
         .DGN-UI-Accordion-Details-Content {
             padding: 0;
-            margin-left: 16px;
             border-radius: 0;
         }
         .Accordion-Icon-Root {
-            display: flex;
+            ${flexRow};
             transition: opacity 0.2s ease-out;
             opacity: 1;
             &.DGN-Invisible {
@@ -36,29 +36,30 @@ export const TreeViewRoot = css`
     }
     .TreeView-All,
     .TreeView-Content {
-        display: block;
-        position: relative;
+        ${displayBlock};
+        ${positionRelative};
         .DGN-UI-Accordion {
             margin-bottom: 0;
         }
     }
     .TreeView-Item-Checkbox {
-        display: inline-block;
-        position: relative;
+        ${displayInlineBlock};
+        ${positionRelative};
         height: 100%;
         margin-right: 8px;
     }
     .TreeView-Item {
-        display: flex;
-        position: relative;
-        align-items: center;
+        ${flexRow};
+        ${positionRelative};
+        ${alignCenter};
+        ${borderBox};
         min-height: 40px;
         text-align: left;
         color: ${theme.colors.text.main};
-        box-sizing: border-box;
+        width: 100%;
         &.non-child {
+            ${cursorPointer};
             transition: background-color 300ms ease;
-            cursor: pointer;
             &.disabled {
                 color: ${theme.colors.disabled};
                 cursor: no-drop;

package/components/tree-view/index.js

@@ -5,7 +5,7 @@ import { memo, useMemo, useState, useEffect, useRef, forwardRef, Fragment, useIm
 import { render } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import { TreeViewRoot } from './css';
+import { TreeViewRootCSS } from './css';
 import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
 import { mapParent, randomString, removeUnicode } from '../../utils';
 import { getGlobal } from '../../global';
@@ -63,7 +63,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       input.nextElementSibling.classList[determinate ? 'add' : 'remove']('determinate');
       input.nextElementSibling.classList[determinate ? 'remove' : 'add']('indeterminate');
     }
-  };
+  }; // eslint-disable-next-line no-unused-vars
+
 
   const triggerCheckboxRecursion = (nodes, isChecked) => {
     nodes.forEach(el => {
@@ -77,7 +78,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const checkedParentFollowValue = nodes => {
-    if (nodes && nodes.length) {
+    if (nodes && nodes !== null && nodes !== void 0 && nodes.length) {
       nodes.forEach(node => {
         if (!node.classList.contains('non-child')) {
           const input = node.firstChild.querySelector('input');
@@ -147,7 +148,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               } else {
                 input.checked = true;
 
-                if (checkedQuantity === childNodes.length && checkedQuantity === determinateQuantity) {
+                if (checkedQuantity === (childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) && checkedQuantity === determinateQuantity) {
                   if (!input.classList.contains('determinate')) {
                     determinateCheckbox(input, true);
                   }
@@ -238,10 +239,12 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       node = node.parentNode;
 
       if (node.classList.contains('DGN-UI-Accordion') && node.firstChild.classList.contains('DGN-UI-Accordion-Summary')) {
+        var _node$querySelectorAl;
+
         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
+        const mustDisabled = !!((_node$querySelectorAl = node.querySelectorAll('input:checked')) !== null && _node$querySelectorAl !== void 0 && _node$querySelectorAl.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);
@@ -261,9 +264,11 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const setValue = (data, isChecked) => {
     if (multiple && multipleValueMode !== 'single') {
+      var _data$childItems;
+
       currentValue[unique][typeof data === 'object' ? data[valueExpr] : data] = isChecked;
 
-      if (data.childItems && data.childItems.length) {
+      if (data.childItems && (_data$childItems = data.childItems) !== null && _data$childItems !== void 0 && _data$childItems.length) {
         data.childItems.forEach(d => {
           setValue(d, isChecked);
         });
@@ -287,7 +292,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setValueIntoInput = data => {
-    if (!data || !data.length) {
+    if (!data || !(data !== null && data !== void 0 && data.length)) {
       inputValueRef.current.value = '';
       clearIconRef.current.style.opacity = 0;
       return;
@@ -334,6 +339,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const checkBoxEl = currentTarget.querySelector('.TreeView-Item-Checkbox');
 
     if (multiple) {
+      var _value;
+
       let checked = false;
       let inputEl = null; // Click on text (not checkbox)
 
@@ -378,7 +385,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       result.push(...Object.keys(currentValue[unique]).filter(v => currentValue[unique][v]));
       value = result;
 
-      if (value.length) {
+      if ((_value = value) !== null && _value !== void 0 && _value.length) {
         data = dataSource.filter(obj => value.includes(typeof obj === 'object' ? obj[valueExpr] : obj));
       } else {
         data = [];
@@ -529,7 +536,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           if (entry.classList.contains('TreeView-Item-contain-children-active')) {
             const hiddenEls = entry.querySelectorAll('.DGN-Hidden, .DGN-Invisible');
 
-            if (hiddenEls && hiddenEls.length) {
+            if (hiddenEls && hiddenEls !== null && hiddenEls !== void 0 && hiddenEls.length) {
               hiddenEls.forEach(hiddenEl => hiddenEl.classList.remove('DGN-Hidden', 'DGN-Invisible'));
             }
           }
@@ -545,7 +552,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
       const activeEls = ref.current.querySelectorAll('.TreeView-Item-active');
 
-      if (!disabledBoldResult && activeEls && activeEls.length) {
+      if (!disabledBoldResult && activeEls && activeEls !== null && activeEls !== void 0 && activeEls.length) {
         activeEls.forEach(activeEl => {
           activeEl.classList.remove('TreeView-Item-active', 'TreeView-Item-contain-children-active');
         });
@@ -580,12 +587,12 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const renderData = (data, keyArr) => {
-    const pattern = keyArr.join('|').replace(/([\{\}])/g, '\\$1');
+    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++) {
+    for (i; i < (keyArr === null || keyArr === void 0 ? void 0 : keyArr.length); i++) {
       str += separatorArr[i] + (data[keyArr[i].replace(/\W/g, '')] !== undefined ? data[keyArr[i].replace(/\W/g, '')] : keyArr[i]);
     }
 
@@ -630,7 +637,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const focusClass = isTrue && !selectBox && !multiple ? 'focus' : '';
     const childItems = data.childItems; // is Summary
 
-    if (childItems && childItems.length) {
+    if (childItems && childItems !== null && childItems !== void 0 && childItems.length) {
       const id = randomString(6, {
         allowSymbol: false,
         allowNumber: false
@@ -647,7 +654,10 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           className: 'TreeView'
         },
         className: focusClass,
-        onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined
+        onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
+        style: {
+          paddingLeft: 16 * level
+        }
       }, jsx("div", {
         className: 'TreeView-Item'
       }, (selectBox || multiple) && jsx("span", {
@@ -665,6 +675,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return jsx("div", {
       className: 'TreeView-Item non-child ' + focusClass,
+      style: {
+        paddingLeft: 34 + 16 * level
+      },
       onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
       key: index,
       tabIndex: "-1"
@@ -701,11 +714,13 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [searchDelayTime]);
   useEffect(() => {
+    var _value2;
+
     dataSource.forEach(data => {
       currentValue[unique][typeof data === 'object' ? data[valueExpr] : data] = false;
     });
 
-    if (value && value.length) {
+    if (value && (_value2 = value) !== null && _value2 !== void 0 && _value2.length) {
       value.forEach(v => {
         currentValue[unique][v] = true;
       });
@@ -720,7 +735,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (multipleValueMode !== 'single') {
         const childNodes = Array.from(ref.current.childNodes);
 
-        if (childNodes && childNodes.length) {
+        if (childNodes && childNodes !== null && childNodes !== void 0 && childNodes.length) {
           checkedParentFollowValue(childNodes);
         }
 
@@ -780,7 +795,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [disabled]);
   useEffect(() => {
-    if (Object.keys(itemsRenderAsync[unique]).length) {
+    var _Object$keys;
+
+    if ((_Object$keys = Object.keys(itemsRenderAsync[unique])) !== null && _Object$keys !== void 0 && _Object$keys.length) {
       Object.keys(itemsRenderAsync[unique]).forEach(async key => {
         await renderDataAsync(key, itemsRenderAsync[unique][key]);
       });
@@ -798,19 +815,21 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     handleCheckbox,
     get: () => ref.current
   }));
-  const TreeViewComp = useMemo(() => {
+  return useMemo(() => {
+    var _value3;
+
     if (typeof value === 'string') {
       value = [value];
     }
 
-    if (!multiple && value.length > 1) {
+    if (!multiple && ((_value3 = value) === null || _value3 === void 0 ? void 0 : _value3.length) > 1) {
       value.length = 1;
     }
 
     itemsRenderAsync[unique] = {};
-    const sync = dataSource.length > renderAsyncWithLength;
+    const sync = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > renderAsyncWithLength;
     return jsx("div", {
-      css: TreeViewRoot,
+      css: TreeViewRootCSS,
       className: 'DGN-UI-TreeView' + (disabled ? ' disabled' : '')
     }, showSelectedItems && jsx(InputBase, {
       inputRef: inputValueRef,
@@ -845,10 +864,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     })), jsx(Divider, null)), jsx("div", {
       ref: ref,
       ...props,
-      className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim()
+      className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, 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,

package/components/typography/index.js

@@ -26,79 +26,18 @@ const {
 } = typography;
 const {
   system: {
-    active,
     rest
   },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
-  },
   text: {
-    main
+    main,
+    tooltip: textTooltip
   },
   fill: {
     tooltip: fillTooltip
-  },
-  text: {
-    tooltip: textTooltip
   }
 } = colors;
 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], ['primary', active], ['secondary', rest], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
-
-const getDirectionPopover = direction => {
-  switch (direction) {
-    case 'top':
-      return {
-        anchorOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        }
-      };
-
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-
-    default:
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-  }
-};
+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);
 
@@ -119,6 +58,9 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const [openTooltip, setOpenTooltip] = useState(false);
+
+  const _TextRootCSS = TextRootCSS(color, type, lineClamp);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -131,7 +73,9 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   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 setHoverTooltip = open => {
+  const setHoverTooltip = (open, isTooltip) => {
+    !isTooltip && setOpenTooltip(false);
+
     if (hoverTooltip && isTextClamped(ref.current)) {
       setOpenTooltip(open);
     }
@@ -151,11 +95,11 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: {
       color: textTooltip
     },
-    onMouseEnter: () => setHoverTooltip(true),
-    onMouseLeave: () => setHoverTooltip(false),
-    ...getDirectionPopover(tooltipDirection)
+    onMouseEnter: () => setHoverTooltip(true, true),
+    onMouseLeave: () => setHoverTooltip(false, true),
+    direction: tooltipDirection
   }, renderHTML(renderChildren(), mapping, {
-    css: TextRoot(color, type, lineClamp),
+    css: _TextRootCSS,
     className: classNames(true),
     style: {
       color: textTooltip,
@@ -164,7 +108,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   })), [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp]);
   return jsx(Fragment, null, renderHTML(renderChildren(), mapping, {
     ref: ref,
-    css: TextRoot(color, type, lineClamp),
+    css: _TextRootCSS,
     className: classNames(false),
     onMouseEnter: () => setHoverTooltip(true),
     onMouseLeave: () => setHoverTooltip(false),
@@ -172,7 +116,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }), hoverTooltip && renderTooltip);
 }));
 
-const TextRoot = (color, type, lineClamp) => css`
+const TextRootCSS = (color, type, lineClamp) => css`
     ${displayInlineBlock};
     ${positionRelative};
     ${breakWord};
@@ -213,7 +157,7 @@ Typography.defaultProps = {
   mapping: 'span',
   className: '',
   hoverTooltip: false,
-  tooltipDirection: 'down'
+  tooltipDirection: 'bottom'
 };
 /** type of text<br/>
  * h1: Title <br/>
@@ -246,7 +190,7 @@ Typography.propTypes = {
   /** text-transform is uppercase if true */
   uppercase: PropTypes.bool,
 
-  /** text-transform is capitalize if true (and uppercase is false) */
+  /** text-transform is capitalized if true (and uppercase is false) */
   capitalize: PropTypes.bool,
 
   /** The line-clamp property truncates text at a specific number of lines. */
@@ -256,7 +200,7 @@ Typography.propTypes = {
   hoverTooltip: PropTypes.bool,
 
   /** Tooltip direction */
-  tooltipDirection: PropTypes.oneOf(['top', 'down', 'left', 'right']),
+  tooltipDirection: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
   /** allows maximum screen width if true */
   fullWidth: PropTypes.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.44",
+  "version": "1.3.46",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,24 @@ npm test
 ```
 
 ## Changelog
+## 1.3.46
+- \[Added\]: MenuIcon – MHRM09N1025
+- \[Changed\]: Dropdown – Ref set value not in dataSource
+- \[Changed\]: Dropdown – Add logic if multiple then selectBox is true
+- \[Fixed\]: Typography – Fix bug tooltip show wrong when hover
+- \[Fixed\]: Avatar – Fix bug flickering
+- \[Fixed\]: Radio – Fix cursor pointer:none when readonly - Fix event onchange - Fix warning
+- \[Fixed\]: Dropdown – Bug not reload dataSource when onClear
+- \[Fixed\]: Dropdown – Fix bug scroll to top after load more
+
+## 1.3.45
+- \[Added\]: MenuIcon – MHRM00N0005, MHRM09N1015, MHRM09N1400, MHRP25L0101, MHRP25L0501, MHRM09N1020
+- \[Changed\]: LineChart – Allow pointsColor, pathColor use CORE colors; Add prop className, style, pointHoverAlignment
+- \[Changed\]: HelperText – Add truncates text 1 line
+- \[Fixed\]: TreeView – Fix css
+- \[Fixed\]: Dropdown – Fix bug when multiple or selectBox value not array
+- \[Fixed\]: Dropdown – Fix bug closeAfterSelect when multiple is true
+
 ## 1.3.44
 - \[Added\]: MenuIcon – MHRP09N0033
 - \[Changed\]: Modal – Add prop className