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

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 };