diginet-core-ui 1.4.53 → 1.4.54

package/components/form-control/attachment/index.js

@@ -1442,17 +1442,17 @@ Attachment.propTypes = {
   allowSort: PropTypes.bool,
   /** Class for component. */
   className: PropTypes.string,
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/demo.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/demo.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
   /** The message to display when deleting files. */
@@ -1483,16 +1483,16 @@ Attachment.propTypes = {
   onChange: PropTypes.func,
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
   /** View attached event, if not it will use default. */

package/components/form-control/date-input/useDateInputState.js

@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import { addDays, addHours, addMinutes, addMonths, addSeconds, addYears, format, isLastDayOfMonth, isValid, lastDayOfMonth } from 'date-fns';
-import { enUS, vi } from 'date-fns/locale';
+import { addDays, addHours, addMinutes, addMonths, addSeconds, addYears, isLastDayOfMonth, isValid, lastDayOfMonth } from 'date-fns';
 import { getGlobal } from "../../../global";
 import { capitalize } from "../../../utils";
 import { patternMap, useDateField } from "./DateField";
 import { lowerCaseDayYear } from "./utils";
+import { parseDateString } from "../../../utils/getLang";
 export const useDateInputState = ({
   formatStr,
   locale,
@@ -95,9 +95,7 @@ export const useDateInputState = ({
   };
   const toControlledDateString = () => {
     if (date && isValid(date)) {
-      return format(date, lowerCaseDayYear(formatStr), {
-        locale: locale === 'vi' ? vi : enUS
-      });
+      return parseDateString(date, lowerCaseDayYear(formatStr), locale);
     }
     // if date is not valid, return uncontrolled date string
     return toDateString();

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

@@ -2,8 +2,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Button, ButtonIcon, DateInput, HelperText, InputBase, Label, Popover, Tooltip } from "../..";
-import { format, isValid, parse } from 'date-fns';
-import { enUS, vi } from 'date-fns/locale';
+import { isValid, parse } from 'date-fns';
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import PropTypes from 'prop-types';
@@ -14,6 +13,7 @@ import useThemeProps from "../../../theme/utils/useThemeProps";
 import { capitalizeSentenceCase, classNames, isValidDate, useControlled } from "../../../utils";
 import Calendar from "../calendar";
 import { lowerCaseDayYear } from "../date-input/utils";
+import { parseDateString } from "../../../utils/getLang";
 const unique = {
   footer: 'DGN-UI-DatePicker-Footer',
   cancel: 'DGN-UI-DatePicker-cancel',
@@ -23,6 +23,10 @@ const unique = {
 const confirmText = getGlobal(['confirm']);
 const cancelText = getGlobal(['cancel']);
 const viDisplayFormat = new Map([['year', 'YYYY'], ['quarter', 'Q-YYYY'], ['month', 'MM-YYYY']]);
+const zhDisplayFormat = new Map([['year', 'YYYY年'], ['quarter', 'YYYY年第Q季度'], ['month', 'YYYY年MM月']]);
+const enDisplayFormat = new Map([['year', 'YYYY'], ['quarter', 'YYYY [Q]Q'],
+// Exp: 2025 Q1
+['month', 'MM/YYYY']]);
 const pickerReturnFormat = new Map([['year', 'YYYY'], ['quarter', 'YYYY-Q'], ['month', 'YYYY-MM']]);
 const parseValueToDate = valueProp => {
   if (!valueProp) return null;else if (isValidDate(valueProp)) {
@@ -42,8 +46,26 @@ const parseValueToDate = valueProp => {
     return valueProp;
   }
 };
+const getDateFormats = (locale, minZoom) => {
+  let formatMap;
+  switch (locale) {
+    case 'vi':
+      formatMap = viDisplayFormat;
+      break;
+    case 'zh':
+      formatMap = zhDisplayFormat;
+      break;
+    case 'en':
+      formatMap = enDisplayFormat;
+      break;
+    default:
+      formatMap = pickerReturnFormat; // fallback
+      break;
+  }
+  return formatMap.get(minZoom);
+};
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
-  var _ref, _pickerReturnFormat$g, _ipRef$current, _ipRef$current2;
+  var _getDateFormats, _pickerReturnFormat$g, _ipRef$current, _ipRef$current2;
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 
@@ -87,7 +109,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     ...other
   } = props;
   const dateLocale = locale.get();
-  const displayFormat = (_ref = dateLocale === 'vi' ? viDisplayFormat.get(minZoom) : pickerReturnFormat.get(minZoom)) !== null && _ref !== void 0 ? _ref : displayFormatProp;
+  const displayFormat = (_getDateFormats = getDateFormats(dateLocale, minZoom)) !== null && _getDateFormats !== void 0 ? _getDateFormats : displayFormatProp;
   const returnFormat = (_pickerReturnFormat$g = pickerReturnFormat.get(minZoom)) !== null && _pickerReturnFormat$g !== void 0 ? _pickerReturnFormat$g : returnFormatProp;
   const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : displayFormat;
   const [value, setValue] = useControlled(parseValueToDate(valueProp), parseValueToDate(defaultValue));
@@ -112,9 +134,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   };
   const formatValue = (value, formatStr) => {
     // return moment(value).format(format, utc = false);
-    return format(value, lowerCaseDayYear(formatStr), {
-      locale: dateLocale === 'vi' ? vi : enUS
-    });
+    return parseDateString(value, lowerCaseDayYear(formatStr), dateLocale);
   };
   const onChangeValue = e => {
     const vl = (e === null || e === void 0 ? void 0 : e.value) || e;

package/components/form-control/date-range-picker/index.js

@@ -262,8 +262,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       tableData = [],
       weekDateFirst = getDateOfWeek(firstDay),
       weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth(), 1));
@@ -275,8 +275,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -302,8 +302,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         type: 'h6'
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
     for (let i = 0; i < 13 - weekDateLast; i++) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth() + 1, 0));

package/components/form-control/dropdown/index.js

@@ -294,6 +294,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
+    if (text === null || text === undefined) text = '';
     if (typeof text !== 'string') text = text.toString();
     if (!txtSearch) return true;
     if (searchMode === 'startswith') {
@@ -436,6 +437,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
   const mapTreeView = () => {
+    console.log('here');
     return jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
@@ -459,7 +461,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       parentID: treeViewParentID,
       value: typeof currentValue[unique] === 'string' ? [currentValue[unique]] : currentValue[unique],
       onChange: (e, value) => onChangeValue(e, '', multiple ? value : e.value),
-      renderItem: renderItem
+      renderItem: renderItem,
+      isInDropdown: true
     }) : EmptyDataText);
   };
 

package/components/form-control/money-input/index.js

@@ -10,6 +10,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react'
 import { displayBlock, positionRelative } from "../../../styles/general";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { onValidate } from "../../../utils";
+import { getThousandSeparatorByCountry } from "../../../utils/getLang";
 const num2WordsVi = function () {
   let t = ['không', 'một', 'hai', 'ba', 'bốn', 'năm', 'sáu', 'bảy', 'tám', 'chín'],
     r = function (r, n) {
@@ -72,6 +73,61 @@ const num2WordsEn = n => {
   if (n === '0') return 'zero';
   return comp(chunk(3))(reverse)(arr(n)).map(makeGroup).map(thousand).filter(comp(not)(isEmpty)).reverse().join(' ');
 };
+const num2WordsZh = (() => {
+  const t = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+  const units = ['', '十', '百', '千'];
+  const bigUnits = ['', '万', '亿', '兆'];
+  const readSection = num => {
+    let str = '';
+    let zero = true;
+    for (let i = 0; i < 4 && num > 0; i++) {
+      const digit = num % 10;
+      if (digit === 0) {
+        if (!zero) {
+          zero = true;
+          str = t[0] + str;
+        }
+      } else {
+        zero = false;
+        str = t[digit] + units[i] + str;
+      }
+      num = Math.floor(num / 10);
+    }
+    return str;
+  };
+  return {
+    convert: num => {
+      if (num === 0) return t[0];
+      let str = '';
+      let unitPos = 0;
+      let needZero = false;
+      while (num > 0) {
+        const section = num % 10000;
+        if (section === 0) {
+          if (needZero) {
+            str = t[0] + str;
+            needZero = false;
+          }
+        } else {
+          const sectionStr = readSection(section) + bigUnits[unitPos];
+          str = sectionStr + str;
+          needZero = true;
+        }
+        num = Math.floor(num / 10000);
+        unitPos++;
+      }
+
+      // Special cases
+      str = str.replace(/^一十/, '十'); // "一十X" => "十X"
+      return str;
+    }
+  };
+})();
+const converters = {
+  vi: num2WordsVi,
+  en: num2WordsEn,
+  zh: num2WordsZh
+};
 const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
@@ -126,7 +182,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     isPaste: false,
     clipboardText: ''
   });
-  const separatorSymbol = typeof thousandSeparator === 'string' ? thousandSeparator : locale.get() === 'vi' ? '.' : ',';
+  const separatorSymbol = typeof thousandSeparator === 'string' ? thousandSeparator : getThousandSeparatorByCountry(locale.get());
   const decimalSymbol = separatorSymbol === '.' ? ',' : '.';
   const thousandSeparatorPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|-'}`);
   const isError = !!error && !value && value !== 0;
@@ -350,7 +406,9 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         if (convertToWords && !decimalDigit && (disabled || readOnly)) {
           let valueConverted = getGlobal('helperInvalid');
           if (Number.isInteger(number)) {
-            valueConverted = locale.get() === 'vi' ? num2WordsVi.convert(number) : num2WordsEn(number);
+            const currentLocale = locale.get();
+            const converter = converters[currentLocale] || num2WordsVi; // fallback VN
+            valueConverted = converter.convert(number);
           }
           inputRef.current.value = parseValueWithFix(valueConverted);
         } else {

package/components/paging/page-info.js

@@ -533,22 +533,22 @@ PagingInfo.propTypes = {
   onChangePage: PropTypes.func,
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
   /** Style inline of component. */
@@ -557,26 +557,26 @@ PagingInfo.propTypes = {
   totalItems: PropTypes.number,
   /** Compact type for mobile. */
   typeShort: PropTypes.bool
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 export { PagingInfo };

package/components/tree-view/index.js

@@ -54,6 +54,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     showSelectedItems,
     value: valueProp,
     valueExpr,
+    isInDropdown: isInDropDownProps,
     ...other
   } = props;
   let searchDelayTime = searchDelayTimeProp;
@@ -69,7 +70,10 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     allowNumber: false,
     allowSymbol: false
   }));
-  const _TreeViewRootCSS = TreeViewRootCSS(theme);
+  const [isChanged, setIsChanged] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
+  const [isInDropdown, setIsInDropdown] = useState(isInDropDownProps);
+  const _TreeViewRootCSS = TreeViewRootCSS(theme, isInDropdown);
   const determinateCheckbox = (input, determinate) => {
     if (multipleValueMode === 'multiple' || disabledRelevantValue) {
       input.classList[determinate ? 'add' : 'remove']('determinate');
@@ -212,7 +216,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           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');
+            e.classList[isChecked ? 'add' : 'remove']('disabled');
           });
         } else {
           el.firstChild.firstChild.firstChild.firstChild.disabled = isChecked;
@@ -233,12 +237,14 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         const checkbox = node.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild;
         if (checkbox) {
           var _node$querySelectorAl;
-          // 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$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;
+          // // 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;
           determinateCheckbox(checkbox.firstChild, !mustDisabled);
+          setTimeout(() => {
+            // Nếu có ít nhất một input con được check thì phải checked cho input này
+            checkbox.firstChild.checked = mustDisabled;
+          }, 200);
           node.classList[mustDisabled || isChecked ? 'add' : 'remove']('disabled');
           checkbox.classList[mustDisabled || isChecked ? 'add' : 'remove']('disabled');
           Array.from(node.childNodes).forEach(e => {
@@ -347,6 +353,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       } else {
         currentValue[unique][value] = checked;
         if (disabledRelevantValue) {
+          setIsChanged(!isChanged);
+          setIsChecked(checked);
           // Disabled/Enabled parent and children node
           if (!currentTarget.classList.contains('non-child')) {
             handleDisabledChildren(currentTarget.nextElementSibling, checked);
@@ -619,7 +627,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     return jsx("div", {
       className: classNames('TreeView-Item', 'non-child', focusClass),
       style: {
-        paddingLeft: 34 + 16 * level
+        paddingLeft: multipleValueMode === 'single' && !parentID ? 16 : 34 + 16 * level
       },
       onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
       key: index,
@@ -634,6 +642,14 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     })) : null, renderContent(data, keyArr, index));
   };
   useEffect(() => {
+    if (isInDropdown === false) {
+      var _Array$from;
+      const treeViewNode = (_Array$from = Array.from(document.getElementsByClassName('DGN-UI-TreeView'))) === null || _Array$from === void 0 ? void 0 : _Array$from[0];
+      const treeViewParentNode = treeViewNode === null || treeViewNode === void 0 ? void 0 : treeViewNode.parentNode;
+      if (treeViewParentNode && treeViewParentNode !== null && treeViewParentNode !== void 0 && treeViewParentNode.className.includes('DGN-Dropdown-List')) {
+        setIsInDropdown(true);
+      }
+    }
     currentValue[unique] = {};
     return () => {
       currentValue[unique] = null;
@@ -687,17 +703,32 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           }
         };
       } 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);
+        setTimeout(() => {
+          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);
             }
-            handleDisabledParent(el.parentNode, true);
-          }
-        });
+          });
+        }, 200);
       }
     }
   }, []);
+  useEffect(() => {
+    if (value && multiple) {
+      if (disabledRelevantValue) {
+        setTimeout(() => {
+          Array.from(ref.current.querySelectorAll('.TreeView-Item.non-child, .DGN-UI-Accordion')).forEach(el => {
+            if (el.firstChild.querySelector('input').checked) {
+              handleDisabledParent(el.parentNode, isChecked);
+            }
+          });
+        });
+      }
+    }
+  }, [isChanged, isChecked]);
   useEffect(() => {
     if (selectAllRef.current) {
       checkedSelectAllCheckbox();
@@ -793,7 +824,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
 const TreeViewRootCSS = ({
   colors,
   spacing
-}) => css`
+}, isInDD) => css`
     ${displayBlock};
     ${positionRelative};
     .DGN-UI-Accordion {
@@ -806,6 +837,12 @@ const TreeViewRootCSS = ({
             &.focus {
                 ${bgColor(getProp(colors, 'fill/focus'))};
             }
+            &.disabled {
+                .TreeView-Item {
+                    ${textColor(getProp(colors, 'system/disabled'))};
+                }
+                ${bgColor(getProp(colors, 'system/white'))};
+            }
             .Accordion-Icon-Root {
                 ${displayFlex};
                 ${flexRow};
@@ -833,7 +870,7 @@ const TreeViewRootCSS = ({
     .TreeView-Content {
         ${displayBlock};
         ${positionRelative};
-        ${parseMaxHeight(240)};
+        ${isInDD ? parseMaxHeight(240) : parseHeight('100%')};
         ${overflowYScroll};
         &::-webkit-scrollbar {
             ${borderRadius(4)};
@@ -904,35 +941,34 @@ const TreeViewRootCSS = ({
         }
     }
 `;
-
-// 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.defaultProps = {
+  isInDropdown: false
+  // 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,

package/global/index.js

@@ -161,6 +161,86 @@ const globalObject = {
     inputPlaceholder: 'Type something',
     dropdownPlaceholder: 'Select'
   },
+  zh: {
+    agree: '同意',
+    cancel: '取消',
+    close: '关闭',
+    confirm: '确认',
+    error: '错误',
+    unknownError: '未知错误',
+    no: '否',
+    noDataText: '无数据',
+    notify: '通知',
+    ok: '确定',
+    showLess: '收起',
+    showMore: '展开',
+    yes: '是',
+    warning: '警告',
+    // attachment
+    dropFileHere: '将文件拖到此处',
+    deleteNotifyText: '您确定要删除此附件吗？',
+    attachText: '附件',
+    noFileText: '无附件',
+    byName: '按名称',
+    byType: '按类型',
+    bySize: '按大小',
+    byDate: '按日期',
+    byOwner: '按所有者',
+    errorDefault: {
+      maxFile: ' 超过允许的数量！',
+      maxSize: ' 文件过大！',
+      fileType: ' 文件格式不正确！',
+      existingFile: ' 已经添加！'
+    },
+    // Paging
+    lineNumber: '每页条数',
+    total: '总计',
+    // Transfer
+    choices: '可选',
+    chosen: '已选',
+    selected: '已选择',
+    // Date Picker
+    helperInvalid: '无效',
+    helperValid: '有效',
+    label: '时间',
+    weekdaysLong: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    weekdaysShort: ['一', '二', '三', '四', '五', '六', '日'],
+    // Daterange Picker
+    today: '今天',
+    yesterday: '昨天',
+    thisWeek: '本周',
+    thisMonth: '本月',
+    // Time Picker
+    months: {
+      full: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+      notFull: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+    },
+    days: {
+      full: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+      notFull: ['日', '一', '二', '三', '四', '五', '六']
+    },
+    night: '夜',
+    day: '日',
+    month: '月',
+    year: '年',
+    save: '保存',
+    now: '现在',
+    // Localize
+    selectAll: '全选',
+    thisFieldIsRequired: '此字段为必填项',
+    validate: {
+      isEmail: '邮箱无效',
+      isNotEmptyString: '不能为空',
+      isNotEmptyObject: '必须包含至少一个属性',
+      isNotEmptyArray: '必须包含至少一个元素',
+      invalidInput: '输入值不正确',
+      max: '超过允许的最大值',
+      min: '未达到允许的最小值',
+      required: '此字段为必填项'
+    },
+    inputPlaceholder: '请输入内容',
+    dropdownPlaceholder: '请选择'
+  },
   //Global variable
   delayOnInput: 500,
   maxSizeUpload: Infinity

package/icons/basic.js

@@ -1454,6 +1454,30 @@ export const Category = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const Camera = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M16.8301 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4H7.16992L9 2H15L16.8301 4ZM12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7ZM12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 18,
+    viewBox: "0 0 20 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14.8301 2H18C19.1 2 20 2.9 20 4V16C20 17.1 19.1 18 18 18H2C0.9 18 0 17.1 0 16V4C0 2.9 0.9 2 2 2H5.16992L7 0H13L14.8301 2ZM10 5C7.24 5 5 7.24 5 10C5 12.76 7.24 15 10 15C12.76 15 15 12.76 15 10C15 7.24 12.76 5 10 5ZM10 7C11.6569 7 13 8.34315 13 10C13 11.6569 11.6569 13 10 13C8.34315 13 7 11.6569 7 10C7 8.34315 8.34315 7 10 7Z",
+    fill: fillColor(color)
+  }));
+});
 export const CenterFocus = /*#__PURE__*/memo(({
   width,
   height,

package/locale/index.js

@@ -1,7 +1,7 @@
 import GlobalObject from "../global";
 const locale = {
   get: () => {
-    const language = GlobalObject.language === 'en' ? 'en' : 'vi';
+    const language = GlobalObject.language || 'vi';
     return language;
   },
   set: language => {

package/package.json

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

package/readme.md

@@ -42,6 +42,13 @@ npm test
 
 ## Changelog
 
+## 1.4.54
+- \[Added\]: Icon – Add Icon Camera
+- \[Fixed\]: Treeview  - Fix bug Treeview keeps the search bar visible while scrolling
+- \[Fixed\]: Dropdown  – Fix Dropdown treeview size
+- \[Added\]: Paging, TextInput, Label, Dropdown,...  – Update Chinese language
+
+
 ## 1.4.53
 - \[Added\]: Icon – Add IconMenu MHRP09N0036, MHRP09N0037
 - \[Added\]: Icon – Add IconMenu MHRP25N0009

package/theme/settings.js

@@ -3,6 +3,7 @@ import { font } from "../styles/font";
 import { typography as typographies } from "../styles/typography";
 import createTheme from "./createTheme";
 import locale from "../locale";
+import { getFormatDateByCountry, getDecimalSymbolByCountry } from "../utils/getLang";
 // import { getGlobal } from 'global';
 const {
   fontSize,
@@ -345,7 +346,7 @@ const settings = {
         className: '',
         disabled: false,
         error: '',
-        format: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'DD/MM/YYYY',
+        format: getFormatDateByCountry(locale.get()),
         label: '',
         readOnly: false,
         required: false,
@@ -360,7 +361,7 @@ const settings = {
         controls: false,
         disabled: false,
         displayAnotherMonth: true,
-        displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
+        displayFormat: getFormatDateByCountry(locale.get()),
         pressESCToClose: true,
         readOnly: false,
         required: false,
@@ -596,7 +597,7 @@ const settings = {
         autoFocus: false,
         className: '',
         decimalDigit: Infinity,
-        decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+        decimalSymbol: getDecimalSymbolByCountry(locale.get()),
         disabled: false,
         disabledNegative: false,
         endIcon: '',

package/utils/getLang.js

@@ -0,0 +1,69 @@
+import { format } from 'date-fns';
+import { lowerCaseDayYear } from "../components/form-control/date-input/utils";
+import { enUS, zhCN, vi, ja } from 'date-fns/locale';
+const getFormatDateByCountry = (lang, isDateFns = false) => {
+  let result = '';
+  switch (lang) {
+    case 'en':
+      result = isDateFns ? enUS : 'MM/DD/YYYY';
+      break;
+    case 'zh':
+      result = isDateFns ? zhCN : 'YYYY/MM/DD';
+      break;
+    case 'ja':
+      result = isDateFns ? ja : 'YYYY/MM/DD';
+      break;
+    case 'vi':
+      result = isDateFns ? vi : 'DD/MM/YYYY';
+      break;
+    default:
+      result = 'DD/MM/YYYY';
+      break;
+  }
+  return result;
+};
+const parseDateString = (date, formatStr, locale) => {
+  return format(date, lowerCaseDayYear(formatStr), {
+    locale: getFormatDateByCountry(locale, true)
+  });
+};
+const getDecimalSymbolByCountry = lang => {
+  let result = '';
+  switch (lang) {
+    case 'vi': // Việt Nam
+    case 'de': // Đức
+    case 'fr': // Pháp
+    case 'it': // Ý
+    case 'es': // Tây Ban Nha
+    case 'ru':
+      // Nga
+      result = ','; // Dấu phẩy làm thập phân
+      break;
+    case 'en': // Anh, Mỹ
+    case 'zh': // Trung Quốc
+    case 'ja': // Nhật Bản
+    default:
+      result = '.'; // Dấu chấm làm thập phân
+      break;
+  }
+  return result;
+};
+const getThousandSeparatorByCountry = lang => {
+  switch (lang) {
+    case 'vi': // Việt Nam
+    case 'de': // Đức
+    case 'es':
+      // Tây Ban Nha
+      return '.';
+    case 'fr':
+      // Pháp
+      return '\u00A0';
+    // space không ngắt
+    case 'en': // Anh, Mỹ
+    case 'zh': // Trung Quốc
+    case 'ja': // Nhật
+    default:
+      return ',';
+  }
+};
+export { getFormatDateByCountry, parseDateString, getDecimalSymbolByCountry, getThousandSeparatorByCountry };

package/utils/index.js

@@ -35,4 +35,5 @@ export * from "./sb-template";
 export * from "./string/string";
 export * from "./validate";
 export * from "./object/object";
+export * from "./getLang";
 export default utils;