diginet-core-ui 1.4.53-beta.6 → 1.4.53-beta.8

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, reference
     ...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, reference
   };
   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/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') {

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, reference
     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, reference
         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/tree-view/index.js

@@ -239,8 +239,10 @@ const TreeView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
           // // 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);
-          // Nếu có ít nhất một input con được check thì phải checked cho input này
-          checkbox.firstChild.checked = 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 => {
@@ -691,16 +693,16 @@ 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')) {
-              setTimeout(() => {
+        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);
-              }, 200);
+              }
+              handleDisabledParent(el.parentNode, true);
             }
-            handleDisabledParent(el.parentNode, true);
-          }
-        });
+          });
+        }, 200);
       }
     }
   }, []);

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-beta.6",
+  "version": "1.4.53-beta.8",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

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;