diginet-core-ui 1.4.53 → 1.4.54-beta.1

package/assets/images/menu/dhr/MHRM09N1401.svg

@@ -0,0 +1,14 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2363_38)">
+<path d="M39 9.7C38.9 9.1 38.9 8.4 38.7 7.7C37.6 3.4 33.8 0.3 29.2 0H29C28.9 0 28.8 0 28.6 0C27.9 0 27.5 0.5 27.5 1.1C27.5 1.7 28 2.1 28.6 2.1H28.7C29 2.1 29.3 2.1 29.6 2.2C33.7 2.7 36.8 6.1 36.9 10.1C36.9 10.8 37.3 11.2 37.9 11.2C38.2 11.2 38.5 11.1 38.7 10.9C39 10.6 39 10.3 39 9.9V9.7Z" fill="#FFC766"/>
+<path d="M35.3 10.1C35.3 10 35.3 9.9 35.3 9.7C34.9 7.3 33.6 5.6 31.4 4.5C30.4 4 29.3 3.8 28.1 3.8C27.5 3.8 27.1 4.2 27.1 4.7C27.1 5.2 27.4 5.7 27.9 5.8C28 5.8 28.1 5.8 28.2 5.8H28.3C29.9 5.9 31.2 6.5 32.2 7.6C32.9 8.4 33.3 9.4 33.3 10.4C33.3 11 33.7 11.5 34.3 11.5C34.9 11.5 35.3 11 35.3 10.4V10.1Z" fill="#FFC766"/>
+<path d="M0 29.3C0.1 29.9 0.1 30.6 0.3 31.3C1.4 35.6 5.2 38.7 9.8 39H10C10.1 39 10.2 39 10.4 39C11.1 39 11.5 38.5 11.5 37.9C11.5 37.3 11 36.9 10.4 36.9H10.3C10 36.9 9.7 36.9 9.4 36.8C5.2 36.4 2.1 33 2.1 29C2.1 28.3 1.7 27.9 1.1 27.9C0.8 27.9 0.5 28 0.3 28.2C0.1 28.4 0 28.7 0 29V29.3Z" fill="#FFC766"/>
+<path d="M3.7 28.9C3.7 29 3.7 29.1 3.7 29.3C4.1 31.7 5.4 33.4 7.6 34.5C8.6 35 9.7 35.2 10.9 35.2C11.5 35.2 11.9 34.8 11.9 34.3C11.9 33.8 11.6 33.3 11.1 33.2C11 33.2 10.9 33.2 10.8 33.2H10.7C9.1 33.1 7.8 32.5 6.8 31.4C6.1 30.6 5.7 29.6 5.7 28.6C5.7 28 5.3 27.5 4.7 27.5C4.1 27.5 3.7 28 3.7 28.6V28.9Z" fill="#FFC766"/>
+<path d="M31.8001 26.9999C31.8001 29.8999 30.6001 32.1999 28.2001 33.7999C24.7001 36.1999 20.4001 35.7999 17.3001 32.6999L11.1001 26.4999L9.30009 24.6999C7.70009 23.0999 6.10009 21.4999 4.50009 19.8999C4.10009 19.3999 3.90009 18.9999 4.00009 18.3999C4.10009 17.7999 4.50009 17.3999 5.10009 17.1999C5.70009 16.9999 6.30009 17.1999 6.70009 17.5999C8.20009 19.0999 9.70009 20.5999 11.2001 22.0999L13.0001 23.8999C13.0001 23.9999 13.1001 23.9999 13.2001 24.0999C13.5001 24.2999 13.8001 24.2999 14.1001 24.0999C14.4001 23.7999 14.4001 23.4999 14.2001 23.1999C14.2001 23.0999 14.1001 23.0999 14.0001 22.9999L7.40009 16.3999C6.50009 15.4999 5.70009 14.6999 4.80009 13.7999C4.40009 13.3999 4.30009 12.8999 4.40009 12.3999C4.50009 11.8999 4.80009 11.4999 5.30009 11.1999C5.90009 10.8999 6.60009 11.0999 7.20009 11.5999L12.9001 17.2999L16.2001 20.5999C16.3001 20.6999 16.3001 20.6999 16.4001 20.7999C16.7001 20.9999 17.0001 20.9999 17.3001 20.7999C17.6001 20.5999 17.6001 20.1999 17.4001 19.9999C17.4001 19.8999 17.3001 19.8999 17.2001 19.7999L7.40009 9.99994C7.30009 9.89994 7.20009 9.69994 7.10009 9.59994C6.70009 9.09994 6.70009 8.29994 7.10009 7.69994C7.40009 7.29994 7.80009 7.09994 8.20009 7.09994C8.70009 7.09994 9.20009 7.29994 9.60009 7.59994C11.9001 9.99994 14.4001 12.3999 16.7001 14.6999L19.4001 17.2999L19.6001 17.4999C19.9001 17.7999 20.3001 17.7999 20.5001 17.4999C20.8001 17.1999 20.8001 16.8999 20.5001 16.4999C20.4001 16.3999 20.4001 16.3999 20.3001 16.2999L12.8001 8.99994C12.4001 8.59994 12.2001 8.09994 12.3001 7.59994C12.4001 6.99994 12.8001 6.49994 13.4001 6.29994C14.0001 6.09994 14.6001 6.19994 15.0001 6.69994C18.9001 10.5999 22.8001 14.4999 26.7001 18.3999C26.9001 18.5999 27.2001 18.8999 27.6001 18.6999C28.0001 18.4999 28.0001 18.0999 28.0001 17.8999V17.3999C28.0001 16.0999 28.0001 14.6999 28.0001 13.3999C28.0001 12.2999 28.8001 11.4999 29.9001 11.4999C31.0001 11.4999 31.8001 12.2999 31.8001 13.3999V16.3999C31.8001 19.7999 31.8001 23.3999 31.8001 26.9999Z" fill="#FFAA00"/>
+</g>
+<defs>
+<clipPath id="clip0_2363_38">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRM09N1402.svg

@@ -0,0 +1,15 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2363_39)">
+<path d="M38.6992 9.52442L29.5758 0.401028C29.275 0.100257 28.9743 0 28.6735 0H12.6324C10.7275 0 9.22363 1.50386 9.22363 3.40874V6.01542C9.72492 6.11568 10.2262 6.3162 10.527 6.71722L11.4293 7.61954V3.40874C11.4293 2.8072 11.9306 2.30591 12.5321 2.30591H27.4704V8.02057C27.4704 9.92545 28.9743 11.4293 30.8792 11.4293H36.5938V35.6915C36.5938 36.2931 36.0925 36.7943 35.491 36.7943H12.6324C12.0308 36.7943 11.5295 36.2931 11.5295 35.6915V31.8817C11.4293 31.7815 11.329 31.6812 11.2288 31.581L9.22363 29.5758V35.5913C9.22363 37.4961 10.7275 39 12.6324 39H35.5912C37.4961 39 39 37.4961 39 35.5913V10.3265C39 10.0257 38.8997 9.72493 38.6992 9.52442ZM30.9794 9.12339C30.3779 9.12339 29.7763 8.62211 29.7763 8.02057V3.91003L34.9897 9.12339H30.9794Z" fill="#2680EB"/>
+<path d="M34.0002 26.3C34.0002 26.9 33.5002 27.4 32.9002 27.4H25.8002C25.9002 26.8 26.0002 26.2 26.0002 25.6V25.1H32.9002C33.5002 25.2 34.0002 25.7 34.0002 26.3Z" fill="#2680EB"/>
+<path d="M34.0002 21.2C34.0002 21.8 33.5002 22.3 32.9002 22.3H26.0002C26.0002 21.5 26.0002 20.8 26.0002 20H32.9002C33.5002 20.1 34.0002 20.6 34.0002 21.2Z" fill="#2680EB"/>
+<path d="M34.0002 16.1C34.0002 16.7 33.5002 17.3 32.9002 17.3H26.0002V15H32.9002C33.5002 15 34.0002 15.5 34.0002 16.1Z" fill="#2680EB"/>
+<path d="M29.4002 31.4C29.4002 32 28.9002 32.5 28.3002 32.5H22.4002C23.3002 31.8 24.1002 31.1 24.7002 30.2H28.3002C28.9002 30.3 29.4002 30.8 29.4002 31.4Z" fill="#2680EB"/>
+<path d="M25.0001 25.7C25.0001 28.3 23.9001 30.4 21.8001 31.8C18.7001 34 14.8001 33.6 12.1001 30.9L4.9001 23.7C3.5001 22.3 2.0001 20.8 0.600098 19.4C0.100098 18.9 -0.0999023 18.5 9.76566e-05 18C0.100098 17.4 0.400098 17.1 1.0001 16.9C1.6001 16.7 2.1001 16.9 2.5001 17.3C3.8001 18.6 5.2001 20 6.6001 21.3L8.3001 23C8.6001 23.2 8.9001 23.2 9.1001 23C9.4001 22.8 9.4001 22.5 9.2001 22.2C9.1001 22.2 9.0001 22.1 9.0001 22L3.0001 16.1C2.2001 15.3 1.4001 14.5 0.700098 13.8C0.400098 13.5 0.200098 13 0.300098 12.6C0.400098 12.1 0.700098 11.8 1.1001 11.6C1.7001 11.3 2.3001 11.5 2.8001 12L8.0001 17L11.0001 20C11.1001 20.1 11.1001 20.1 11.2001 20.2C11.5001 20.4 11.7001 20.4 12.0001 20.2C12.2001 20 12.3001 19.7 12.1001 19.4C12.1001 19.3 12.0001 19.3 11.9001 19.2L3.2001 10.4C3.1001 10.3 3.0001 10.2 2.9001 10.1C2.5001 9.6 2.6001 8.9 2.9001 8.4C3.2001 8.1 3.5001 7.9 3.9001 7.9C4.3001 7.9 4.8001 8.1 5.1001 8.4C7.2001 10.5 9.4001 12.7 11.5001 14.8L14.1001 17.4C14.4001 17.6 14.7001 17.6 14.9001 17.4C15.1001 17.2 15.1001 16.8 14.9001 16.5C14.8001 16.4 14.8001 16.4 14.7001 16.3L7.9001 9.5C7.6001 9.1 7.4001 8.7 7.5001 8.2C7.6001 7.6 7.9001 7.2 8.5001 7.1C9.0001 6.9 9.5001 7 9.9001 7.4C13.4001 10.9 16.9001 14.4 20.4001 17.9C20.6001 18.1 20.8001 18.3 21.2001 18.2C21.6001 18 21.6001 17.7 21.6001 17.5V17C21.6001 15.8 21.6001 14.6 21.6001 13.4C21.6001 12.4 22.3001 11.7 23.3001 11.7C24.3001 11.7 25.0001 12.4 25.0001 13.4V16.1C25.0001 19.2 25.0001 22.5 25.0001 25.7Z" fill="#FFAA00"/>
+</g>
+<defs>
+<clipPath id="clip0_2363_39">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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/calendar/function.js

@@ -652,7 +652,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     color: 'primary',
     type: 'h3',
     ref: refs.content,
-    format: ['lowercase']
+    format: ['sentence']
   }))), jsx("div", {
     className: className.navigator.around
   }, jsx(ButtonIcon, {

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

@@ -226,7 +226,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    * START EFFECT
    */
   useEffect(() => {
-    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
+    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue) && !value) {
       if (isBeforeLimit(min, defaultValue)) {
         onUpdate(min);
       } else if (isAfterLimit(max, defaultValue)) {

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/dropdown-box/index.js

@@ -1,13 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
 const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
+   */
+  const displayValue = data => {
+    let text = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

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/form-control/number-input/index2.js

@@ -49,7 +49,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     labelProps,
     max: maxProp,
     maxDigit,
-    min,
+    min: minProp,
     nonStyle,
     onBlur,
     onChange,
@@ -69,9 +69,12 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     viewType
   } = props;
   let max = maxProp;
+  let min = minProp;
   let thousandSymbol = thousandSeparator;
   let decimalSymbol = decimalSymbolProp;
   let valueProps = valueProp;
+  if (!min && min !== 0) min = -Infinity;
+  if (!max && max !== 0) max = Infinity;
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});

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,
@@ -7355,6 +7379,30 @@ export const Bank = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const Book = /*#__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: "M12.8667 17.5168C13.6667 17.1223 14.457 16.8264 15.2375 16.6293C16.018 16.4319 16.8388 16.3333 17.7 16.3333C18.3222 16.3333 18.9541 16.3833 19.5958 16.4832C20.2374 16.5833 20.8166 16.7222 21.3333 16.9V6.45C20.7723 6.18333 20.182 5.98608 19.5625 5.85825C18.943 5.73058 18.3222 5.66675 17.7 5.66675C16.8388 5.66675 15.9999 5.79175 15.1833 6.04175C14.3666 6.29175 13.5944 6.65008 12.8667 7.11675V17.5168ZM12.0332 20C11.1999 19.3667 10.2944 18.8778 9.31675 18.5333C8.33892 18.1889 7.33333 18.0167 6.3 18.0167C5.42783 18.0167 4.4945 18.1862 3.5 18.525C2.5055 18.8638 1.67217 19.2722 1 19.75V5.38325C1.71117 4.94992 2.54308 4.61108 3.49575 4.36675C4.44858 4.12225 5.38333 4 6.3 4C7.32217 4 8.318 4.13608 9.2875 4.40825C10.257 4.68058 11.1722 5.0945 12.0332 5.65C12.8833 5.0945 13.7874 4.68058 14.7458 4.40825C15.7041 4.13608 16.6888 4 17.7 4C18.6167 4 19.5514 4.125 20.5042 4.375C21.4569 4.625 22.2888 4.96108 23 5.38325V19.75C22.3445 19.2612 21.5153 18.8501 20.5125 18.5167C19.5097 18.1834 18.5722 18.0167 17.7 18.0167C16.6667 18.0167 15.6722 18.1917 14.7168 18.5417C13.7611 18.8917 12.8666 19.3778 12.0332 20ZM14 9.73325V8.36675C14.55 8.13342 15.1125 7.95842 15.6875 7.84175C16.2625 7.72508 16.8667 7.66675 17.5 7.66675C17.9333 7.66675 18.3583 7.70008 18.775 7.76675C19.1917 7.83342 19.6 7.91675 20 8.01675V9.28325C19.6 9.13325 19.1958 9.02075 18.7875 8.94575C18.3792 8.87075 17.95 8.83325 17.5 8.83325C16.8667 8.83325 16.2583 8.91242 15.675 9.07075C15.0917 9.22908 14.5333 9.44992 14 9.73325ZM14 15.2332V13.85C14.55 13.6167 15.1125 13.4444 15.6875 13.3333C16.2625 13.2222 16.8667 13.1668 17.5 13.1668C17.9333 13.1668 18.3583 13.2001 18.775 13.2668C19.1917 13.3334 19.6 13.4168 20 13.5168V14.7832C19.6 14.6333 19.1958 14.5208 18.7875 14.4458C18.3792 14.3707 17.95 14.3333 17.5 14.3333C16.8667 14.3333 16.2583 14.4082 15.675 14.5582C15.0917 14.7083 14.5333 14.9332 14 15.2332ZM14 12.4832V11.1167C14.55 10.8834 15.1125 10.7084 15.6875 10.5917C16.2625 10.4751 16.8667 10.4167 17.5 10.4167C17.9333 10.4167 18.3583 10.4501 18.775 10.5167C19.1917 10.5834 19.6 10.6667 20 10.7667V12.0332C19.6 11.8832 19.1958 11.7707 18.7875 11.6957C18.3792 11.6207 17.95 11.5832 17.5 11.5832C16.8667 11.5832 16.2583 11.6624 15.675 11.8207C15.0917 11.9791 14.5333 12.1999 14 12.4832Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 22,
+    height: height || 16,
+    viewBox: "0 0 22 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.8667 13.5168C12.6667 13.1223 13.457 12.8264 14.2375 12.6293C15.018 12.4319 15.8388 12.3333 16.7 12.3333C17.3222 12.3333 17.9541 12.3833 18.5958 12.4832C19.2374 12.5833 19.8166 12.7222 20.3333 12.9V2.45C19.7723 2.18333 19.182 1.98608 18.5625 1.85825C17.943 1.73058 17.3222 1.66675 16.7 1.66675C15.8388 1.66675 14.9999 1.79175 14.1833 2.04175C13.3666 2.29175 12.5944 2.65008 11.8667 3.11675V13.5168ZM11.0332 16C10.1999 15.3667 9.29442 14.8778 8.31675 14.5333C7.33892 14.1889 6.33333 14.0167 5.3 14.0167C4.42783 14.0167 3.4945 14.1862 2.5 14.525C1.5055 14.8638 0.672167 15.2722 0 15.75V1.38325C0.711167 0.949917 1.54308 0.611083 2.49575 0.36675C3.44858 0.12225 4.38333 0 5.3 0C6.32217 0 7.318 0.136084 8.2875 0.40825C9.257 0.680584 10.1722 1.0945 11.0332 1.65C11.8833 1.0945 12.7874 0.680584 13.7458 0.40825C14.7041 0.136084 15.6888 0 16.7 0C17.6167 0 18.5514 0.125 19.5042 0.375C20.4569 0.625 21.2888 0.961084 22 1.38325V15.75C21.3445 15.2612 20.5153 14.8501 19.5125 14.5167C18.5097 14.1834 17.5722 14.0167 16.7 14.0167C15.6667 14.0167 14.6722 14.1917 13.7168 14.5417C12.7611 14.8917 11.8666 15.3778 11.0332 16ZM13 5.73325V4.36675C13.55 4.13342 14.1125 3.95842 14.6875 3.84175C15.2625 3.72508 15.8667 3.66675 16.5 3.66675C16.9333 3.66675 17.3583 3.70008 17.775 3.76675C18.1917 3.83342 18.6 3.91675 19 4.01675V5.28325C18.6 5.13325 18.1958 5.02075 17.7875 4.94575C17.3792 4.87075 16.95 4.83325 16.5 4.83325C15.8667 4.83325 15.2583 4.91242 14.675 5.07075C14.0917 5.22908 13.5333 5.44992 13 5.73325ZM13 11.2332V9.85C13.55 9.61667 14.1125 9.44442 14.6875 9.33325C15.2625 9.22225 15.8667 9.16675 16.5 9.16675C16.9333 9.16675 17.3583 9.20008 17.775 9.26675C18.1917 9.33342 18.6 9.41675 19 9.51675V10.7832C18.6 10.6333 18.1958 10.5208 17.7875 10.4458C17.3792 10.3707 16.95 10.3333 16.5 10.3333C15.8667 10.3333 15.2583 10.4082 14.675 10.5582C14.0917 10.7083 13.5333 10.9332 13 11.2332ZM13 8.48325V7.11675C13.55 6.88342 14.1125 6.70842 14.6875 6.59175C15.2625 6.47508 15.8667 6.41675 16.5 6.41675C16.9333 6.41675 17.3583 6.45008 17.775 6.51675C18.1917 6.58342 18.6 6.66675 19 6.76675V8.03325C18.6 7.88325 18.1958 7.77075 17.7875 7.69575C17.3792 7.62075 16.95 7.58325 16.5 7.58325C15.8667 7.58325 15.2583 7.66242 14.675 7.82075C14.0917 7.97908 13.5333 8.19992 13 8.48325Z",
+    fill: fillColor(color)
+  }));
+});
 export const Bookmark = /*#__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,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.53",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
-  "main": "index.js",
-  "scripts": {
-    "start-js": "react-scripts start --max_old_space_size=4096",
-    "start": "npx npm-run-all -p start-js",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "prop-types": "^15.7.2",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
-  },
-  "keywords": [
-    "core ui",
-    "diginet"
-  ],
-  "author": "rocachien",
-  "contributors": [
-    {
-      "name": "Chien Do",
-      "email": "rocachien@gmail.com"
-    },
-    {
-      "name": "Nhat Tran",
-      "email": "tranminhnhat1005@gmail.com"
-    },
-    {
-      "name": "Thuan Nguyen",
-      "email": "nt.thuan.hutech@gmail.com"
-    }
-  ],
-  "license": "MIT"
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.54-beta.1",
+  "description": "",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "scripts": {
+    "start": "npm-run-all --parallel start-sb eslint-test",
+    "start-sb": "start-storybook -p 9050",
+    "build-storybook": "build-storybook -c .storybook -s src",
+    "build": "run-script-os",
+    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
+    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
+    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
+    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
+    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
+    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
+    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:bump": "npm version patch --no-git-tag-version --silent",
+    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
+    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
+    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
+    "test-storybook": "test-storybook --url http://localhost:9050",
+    "preinstall": "echo {} > package-lock.json"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "date-fns": "^2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "6.2.9",
+    "@storybook/test-runner": "^0.7.1",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-regex": "^1.10.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "sass": "1.58.3"
+  }
+}

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;