diginet-core-ui 1.3.43 → 1.3.45

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/package.json

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

package/readme.md

@@ -38,6 +38,26 @@ npm test
 ```
 
 ## Changelog
+## 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
+- \[Changed\]: Slider – Update design button next, previous
+- \[Changed\]: Settings – Return CORE typography in setting
+- \[Changed\]: PagingInfo – Update design typeShort (Design update)
+- \[Fixed\]: DatePicker – Fix bug clearable when readOnly, picker out of screen
+- \[Fixed\]: DropdownBox – Fix bug press Tab close DropdownBox
+- \[Fixed\]: ButtonIcon – Change element tag from button to div; Fix ripple effect circular
+- \[Fixed\]: DatePicker – Fix bug warning proptype, keydown Tab not close DatePicker
+- \[Fixed\]: InputBase – Fix css disabled
+
 ## 1.3.43
 - \[Added\]: MenuIcon – MHRM00N0002, MHRM39N0018, MHRM39N0019, MHRM00N0003, MHRM00N0004 , MHRM13N0002, MHRM13N0003, MHRM29N0004
 - \[Changed\]: Checkbox - Add labelProps

package/theme/settings.js

@@ -8,6 +8,7 @@ const {
   fontFamilyBold,
   fontFamilyMedium
 } = font;
+import { typography as typographies } from '../styles/typography';
 const settings = {
   border: {
     radius: '4px',
@@ -51,7 +52,8 @@ const settings = {
       fontFamily,
       fontWeight: 'normal',
       lineHeight: '16px'
-    }
+    },
+    ...typographies
   },
   breakpoints: {
     values: {