diginet-core-ui 1.3.37 → 1.3.39

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

@@ -41,8 +41,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       limit: 'DGN-UI-Calendar-Day-limit'
     }
   };
-  /**
-   * START REFERENCE
+  /**
+   * START REFERENCE
    */
 
   const ref = useRef(null);
@@ -61,12 +61,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
   const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
-  /**
-   * END REFERENCE
+  /**
+   * END REFERENCE
    */
 
-  /**
-   * START FUNCTION
+  /**
+   * START FUNCTION
    */
 
   const onUpdateNavigatorValue = useCallback(value => {
@@ -152,12 +152,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START EFFECT
+  /**
+   * START EFFECT
    */
 
 
@@ -198,12 +198,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdate(activeValue.current);
     }
   }, [onClick, min, max]);
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START COMPONENT
+  /**
+   * START COMPONENT
    */
 
   const tableMemo = jsx("div", {
@@ -212,8 +212,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.table.table,
     ref: tableRef
   }, renderHeader(unique), jsx("tbody", null)));
-  /**
-   * END COMPONENT
+  /**
+   * END COMPONENT
    */
 
   return jsx("div", { ...props,

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

@@ -318,11 +318,11 @@ Checkbox.propTypes = {
   /** The function will run to return a true or false value of Radio Component */
   onChange: PropTypes.func,
 
-  /**
-   * ref methods
-  * 
-   * * setChecked: Set check for input
-   * * getChecked: Get check of input
+  /**
+   * ref methods
+  * 
+   * * setChecked: Set check for input
+   * * getChecked: Get check of input
    */
   ref: PropTypes.any
 };

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

@@ -14,6 +14,10 @@ import { ButtonIcon, HelperText, InputBase, Label } from '../../index';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
 import { isValidDate } from '../calendar/function';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actionIconAt,
   clearAble,
@@ -116,7 +120,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     display: 'block'
   };
   const pickerCSS = {
-    backGr: 'background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: 9001;',
+    backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndex(1)};`,
     picker: (position, left, width) => css`
                     background-color: ${theme.colors.white};
                     border-radius: ${theme.border.radius};
@@ -132,7 +136,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                         transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                     width: ${width}px;
-                    z-index: 9002;
+                    z-index: ${zIndex(2)};
                 `,
     active: {
       opacity: 1,
@@ -399,7 +403,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (!el.classList.contains(unique.focus)) {
       el.classList.add(unique.focus);
-      el.style.zIndex = 9001;
+      el.style.zIndex = zIndex(2);
       openPicker();
     }
   };

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

@@ -12,6 +12,10 @@ import { randomString, updatePosition, date as moment, capitalizeSentenceCase, i
 import { getGlobal } from '../../../global';
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
 import locale from '../../../locale';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actionIconAt,
   controls,
@@ -224,7 +228,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         visibility: hidden;
                         white-space: nowrap;
                         will-change: left top visibility;
-                        z-index: 9003;
+                        z-index: ${zIndex(3)};
                     }
                     @media only screen and (max-width: 599px) {
                         max-width: 400px;
@@ -253,7 +257,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                         transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                     width: ${width}px;
-                    z-index: 9002;
+                    z-index: ${zIndex(2)};
                 `,
     active: {
       opacity: 1,
@@ -458,8 +462,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         tableData = [],
         weekDateFirst = getDateOfWeek(firstDay),
         weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
 
     for (let i = weekDateFirst; i > 0; i--) {
@@ -472,8 +476,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
 
 
@@ -487,8 +491,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, jsx(Typography, { ...typographyProps(unique.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 

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

@@ -15,6 +15,10 @@ import { color as colors } from '../../../styles/colors';
 import { typography } from '../../../styles/typography';
 import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, breakWord, cursorPointer, displayBlock, flexRow, flexWrap, inlineFlex, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
 import isMobile from '../../../utils/isMobile';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const {
   paragraph1,
   paragraph3
@@ -229,7 +233,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       left: `${left}px`,
       width: `${width}px`,
       backgroundColor: '#FFF',
-      zIndex: 9001
+      zIndex: zIndex(1)
     };
     if (_isMobile && allowSearch) dropdownStyle = { ...dropdownStyle,
       bottom: 0,
@@ -248,7 +252,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: '100%',
       backgroundColor: 'rgba(255, 255, 255, 0.6)',
       borderRadius: 4,
-      zIndex: 9002
+      zIndex: zIndex(2)
     };
     const defaultSearch = lastSearchRef.current || (onInput ? (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value : '');
     const el = jsx("div", {
@@ -1624,7 +1628,7 @@ const DropdownBoxCSS = css`
     overflow: auto;
     background-color: ${white};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    z-index: 9001;
+    z-index: ${zIndex(1)};
     &::-webkit-scrollbar {
         ${borderRadius4px};
         width: 24px;

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

@@ -2,6 +2,7 @@
 
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import useInput from '../../../utils/useInput';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { renderIcon } from '../../../utils';
@@ -15,7 +16,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
   defaultValue,
-  value,
+  value: valueProp,
   placeholder,
   resize,
   status,
@@ -31,7 +32,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   endIcon,
   startIconProps,
   endIconProps,
-  inputRef,
+  inputRef: inputBaseRef,
   inputProps,
   iconStyle,
   inputStyle,
@@ -43,10 +44,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onInput,
   onKeyDown,
   onKeyUp,
+  delayOnChange,
   ...props
 }, reference) => {
+  const {
+    bind
+  } = useInput({
+    defaultValue,
+    valueProp,
+    onChange,
+    delayOnChange
+  });
+  if (!inputBaseRef) inputBaseRef = useRef(null);
   const ref = useRef(null);
-  const inputBaseRef = useRef(null);
   const valueArray = useRef([]);
   /* Start styled */
 
@@ -479,9 +489,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     const defaultHeight = 24;
 
-    if (value !== undefined) {
-      valueArray.current.push(value);
-      inputBaseRef.current.value = value;
+    if (valueProp !== undefined) {
+      valueArray.current.push(valueProp);
+      inputBaseRef.current.value = valueProp;
 
       if (multiline && !/\d+/.test(rows)) {
         inputBaseRef.current.style.height = 0;
@@ -490,11 +500,11 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return () => {
-      if (value !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
+      if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
         inputBaseRef.current.style.height = defaultHeight + 'px';
       }
     };
-  }, [value]);
+  }, [valueProp]);
   useEffect(() => {
     if (disabled) {
       if (ref.current) {
@@ -532,9 +542,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInputTextArea,
-    onChange: onChange,
     onBlur: onBlur,
-    onFocus: onFocus
+    onFocus: onFocus,
+    ...bind
   }));
   const InputComp = jsx("div", {
     css: inputBaseRoot,
@@ -569,9 +579,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInput,
-    onChange: onChange,
     onBlur: onBlur,
-    onFocus: onFocus
+    onFocus: onFocus,
+    ...bind
   })), !!endIcon && jsx("div", {
     css: inputBaseIconCSS,
     ...endIconProps,
@@ -587,22 +597,14 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const InputBaseComp = multiline ? MultipleInputComp : InputComp;
   /* End component */
 
-  useImperativeHandle(reference, () => ref.current);
-  useImperativeHandle(inputRef, () => {
-    inputBaseRef.current.resetValue = () => {
-      inputBaseRef.current.value = value;
-      return value;
-    };
+  useImperativeHandle(reference, () => {
+    const currentRef = inputBaseRef.current || {};
+    const _instance = {}; // methods
 
-    inputBaseRef.current.setPreviousValue = () => {
-      valueArray.current.pop();
-      const preValue = valueArray.current[valueArray.current.length - 1];
-      const previousValue = preValue || preValue === 0 ? preValue : defaultValue || '';
-      inputBaseRef.current.value = previousValue;
-      return previousValue;
-    };
+    _instance.__proto__ = {}; // hidden methods
 
-    return inputBaseRef.current;
+    currentRef.instance = _instance;
+    return currentRef;
   });
   return InputBaseComp;
 }));
@@ -719,6 +721,9 @@ InputBase.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of InputBase component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /** delayOnChange of InputBase component */
+  delayOnChange: PropTypes.number
 };
 export default InputBase;

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

@@ -142,15 +142,15 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const separatorSymbol = typeof thousandSeparator === 'string' ? thousandSeparator : locale.get() === 'vi' ? '.' : ',';
   const decimalSymbol = separatorSymbol === '.' ? ',' : '.';
-  const thousandSeparatorPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|\-'}`);
+  const thousandSeparatorPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|-'}`);
   const isError = !!error && !value && value !== 0;
   /* Start styled */
 
   const MoneyInputRoot = css`
-        ${displayBlock}
-        ${positionRelative}
+                ${displayBlock}
+                ${positionRelative}
         margin-bottom: 20px;
-    `;
+            `;
   /* End styled */
 
   /* Start handler */
@@ -277,8 +277,8 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const value = e.target.value;
 
     if (/[a-z]/i.test(value)) {
-      const length = value.match(/[a-z]/ig).length;
-      e.target.value = value.replace(/[a-z]/ig, '');
+      const length = value.match(/[a-z]/gi).length;
+      e.target.value = value.replace(/[a-z]/gi, '');
 
       if (length === 1) {
         const index = value.match(/[a-z]/i).index;
@@ -552,10 +552,10 @@ MoneyInput.propTypes = {
   /** The function to get ref of MoneyInput component */
   refs: PropTypes.func,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 
@@ -568,13 +568,13 @@ MoneyInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
 

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

@@ -591,23 +591,23 @@ NumberInput.propTypes = {
   /** any props of error in NumberInput component */
   errorProps: PropTypes.object,
 
-  /**
-   * the format to display value<br/>
-   * * function: value => function(value)<br/>
-   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
+  /**
+   * the format to display value<br/>
+   * * function: value => function(value)<br/>
+   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
    */
   format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
   /** The function to get ref of NumberInput component */
   refs: PropTypes.func,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),