diginet-core-ui 1.3.88 → 1.3.89

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

@@ -1,23 +1,18 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { HelperText, InputBase, Label } from "../..";
 import locale from "../../../locale";
-import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
+import PropTypes from 'prop-types';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cursorNotAllowed, displayBlock, mgb, positionRelative } from "../../../styles/general";
 import { classNames, onValidate, refType as ref } from "../../../utils";
-const {
-  spacing
-} = useTheme();
 const regexValidNumber = /[^0-9.,-]/g;
 const regexNumber = /[^0-9]/g;
-const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g; // Clamp number between two values with the following line:
+const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
 
+// Clamp number between two values with the following line:
 const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
-
 const NumberInput = /*#__PURE__*/forwardRef(({
   action = {},
   autoFocus,
@@ -34,7 +29,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   fixedDecimalDigit,
   helperTextProps,
   inputProps,
-  inputRef,
+  inputRef: inputRefProp,
   inputStyle,
   label,
   labelProps,
@@ -59,15 +54,17 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   value: valueProps,
   viewType
 }, reference) => {
-  inputRef = inputRef || useRef(null);
+  if (!reference) reference = useRef(null);
+  if (!inputRefProp) inputRefProp = useRef(null);
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});
+  const inputRef = useRef(null);
   const [value, setValue] = useState(defaultValue);
-  const isError = !!error; // nếu không cho nhập số âm mà max là âm thì remove giá trị max
+  const isError = !!error;
 
+  // nếu không cho nhập số âm mà max là âm thì remove giá trị max
   if (max < 0 && disabledNegative) max = null;
-
   if (thousandSymbol) {
     thousandSymbol = useMemo(() => {
       return typeof thousandSymbol === 'string' ? thousandSymbol : decimalSymbol === ',' ? '.' : ',';
@@ -78,21 +75,18 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   } else {
     thousandSymbol = '';
   }
-
-  const validateResult = validates && onValidate(value, validates, true);
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
-   */
 
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
+   */
   const parseNumberToMoney = useCallback((vl, isNumber) => {
     var _number, _number2, _number$, _number3;
-
     const {
       current: {
         selectionStart
@@ -100,49 +94,44 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     } = inputRef;
     let number = convertMoneyToNumber(vl, isNumber);
     if (disabledNegative && Number(number || 0) < 0) number = clamp(number, min, max);
-    if (typeof max !== 'undefined' && Number(number) > max) number = Math.min(number, max); // number = Currency.format(number);
+    if (typeof max !== 'undefined' && Number(number) > max) number = Math.min(number, max);
 
+    // number = Currency.format(number);
     if (!number) return number;
     number = (_number = number) === null || _number === void 0 ? void 0 : _number.toString().split('.');
-
     if (number.length === 2 && !number[0]) {
       number[0] = '0';
       pos.current = 2;
     }
-
     number[0] = (_number2 = number) === null || _number2 === void 0 ? void 0 : _number2[0].replace(regexThousandNumber, '$1' + thousandSymbol); // add a thousand symbol to number
 
     if (!decimalDigit) number.length = 1;else if (number[1]) number[1] = (_number$ = number[1]) === null || _number$ === void 0 ? void 0 : _number$.slice(0, decimalDigit || 0);
-    number = number.join(decimalSymbol); // keep focus position
-
+    number = number.join(decimalSymbol);
+    // keep focus position
     if (((_number3 = number) === null || _number3 === void 0 ? void 0 : _number3.indexOf(thousandSymbol)) > -1 && selectionStart !== number.length + 1) {
       pos.current = selectionStart + (number.toString().length - 1 === vl.toString().length ? 1 : 0);
     }
-
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
-   */
 
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
+   */
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
     var _number4, _number4$toString, _number4$toString$rep, _number4$toString$rep2, _number4$toString$rep3;
-
     let number = vl === null || vl === void 0 ? void 0 : vl.toString().replace(regexValidNumber, ''); // allow number and , || . || -
-    // remove <thousandSymbol> and replace . to <decimalSymbol>
 
+    // remove <thousandSymbol> and replace . to <decimalSymbol>
     if (!isNumber) number = (_number4 = number) === null || _number4 === void 0 ? void 0 : (_number4$toString = _number4.toString()) === null || _number4$toString === void 0 ? void 0 : (_number4$toString$rep = _number4$toString.replaceAll) === null || _number4$toString$rep === void 0 ? void 0 : (_number4$toString$rep2 = (_number4$toString$rep3 = _number4$toString$rep.call(_number4$toString, thousandSymbol, '')).replaceAll) === null || _number4$toString$rep2 === void 0 ? void 0 : _number4$toString$rep2.call(_number4$toString$rep3, decimalSymbol, '.');
     return number;
   }, [decimalSymbol]);
-
   const _onInput = e => {
     var _e$target$value;
-
     let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
     if (disabledNegative && Number(valueT || 0) < 0) return;
     valueT = parseNumberToMoney(valueT);
@@ -153,32 +142,25 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     onInput === null || onInput === void 0 ? void 0 : onInput(e);
     setValue(valueT);
   };
-
   const _onBlur = e => {
     var _e$value;
-
     let value = (_e$value = e.value) !== null && _e$value !== void 0 ? _e$value : e.target.value;
     if (fixedDecimalDigit) value = Number(value).toFixed(decimalDigit);
-
     if ((value || value === '' && typeof min !== 'undefined') && (typeof min !== 'undefined' || typeof max !== 'undefined')) {
       value = convertMoneyToNumber(value);
-
       if (Number(value) < min || Number(value) > max) {
         const target = e.target;
         target.value = clamp(value, min, max);
-
-        _onInput({ ...e,
+        _onInput({
+          ...e,
           target
         });
       }
     }
-
     onBlur && onBlur(e);
   };
-
   const _onKeyDown = e => {
     var _value$split, _value$split$;
-
     const {
       key,
       keyCode,
@@ -190,64 +172,74 @@ const NumberInput = /*#__PURE__*/forwardRef(({
         selectionStart,
         selectionEnd
       }
-    } = e; // 0-9 only
-
-    const isNumber = keyCode >= 48 && keyCode <= 57 && shiftKey === false || keyCode >= 96 && keyCode <= 105 || keyCode === 231 && key >= '0' && key <= '9'; // character input type="number"
-
-    let allowKeyTypeNumber = isNumber || keyCode === 8 || // key backspace
-    keyCode > 34 && keyCode < 40 || key === thousandSymbol || key === decimalSymbol || (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) || // ctrl + A, ctrl + C, ctrl + V
-    keyCode === 46 || // key delete
-    keyCode === 189 || keyCode === 109 || // -
+    } = e;
+
+    // 0-9 only
+    const isNumber = keyCode >= 48 && keyCode <= 57 && shiftKey === false || keyCode >= 96 && keyCode <= 105 || keyCode === 231 && key >= '0' && key <= '9';
+
+    // character input type="number"
+    let allowKeyTypeNumber = isNumber || keyCode === 8 ||
+    // key backspace
+    keyCode > 34 && keyCode < 40 || key === thousandSymbol || key === decimalSymbol || (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) ||
+    // ctrl + A, ctrl + C, ctrl + V
+    keyCode === 46 ||
+    // key delete
+    keyCode === 189 || keyCode === 109 ||
+    // -
     keyCode === 9; // tab
+
     // The key is delete (|| remove) and focus after the thousand digit
+    const removeDot = keyCode === 8 && selectionEnd - selectionStart <= 1 && value.charAt(selectionEnd - 1) === thousandSymbol;
 
-    const removeDot = keyCode === 8 && selectionEnd - selectionStart <= 1 && value.charAt(selectionEnd - 1) === thousandSymbol; // Decimal
+    // Decimal
     // Do not allow the character decimal if decimalDigit is undefined
-
     const isDecimalSymbol = decimalSymbol === key;
-    const disabledDecimalSymbol = isDecimalSymbol && !decimalDigit; // Accepts only one decimal separator
+    const disabledDecimalSymbol = isDecimalSymbol && !decimalDigit;
 
-    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol; // Disabled typing input when decimal digit to limit and focus is last
+    // Accepts only one decimal separator
+    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol;
 
-    const disabledTypingDecimal = ((_value$split = value.split(decimalSymbol)) === null || _value$split === void 0 ? void 0 : (_value$split$ = _value$split[1]) === null || _value$split$ === void 0 ? void 0 : _value$split$.length) >= decimalDigit && // total number after decimal symbol > {decimalDigit}
+    // Disabled typing input when decimal digit to limit and focus is last
+    const disabledTypingDecimal = ((_value$split = value.split(decimalSymbol)) === null || _value$split === void 0 ? void 0 : (_value$split$ = _value$split[1]) === null || _value$split$ === void 0 ? void 0 : _value$split$.length) >= decimalDigit &&
+    // total number after decimal symbol > {decimalDigit}
     selectionStart === value.length; // the focus is at the end of the string
-
-    const target = e.target; // key arrow up
-
+    const target = e.target;
+    // key arrow up
     if (keyCode === 38) {
       target.value = Number(convertMoneyToNumber(value) || 0) + step;
-
-      _onInput({ ...e,
+      _onInput({
+        ...e,
         target
       });
-
       e.preventDefault();
-    } // key arrow down
+    }
+    // key arrow down
     else if (keyCode === 40) {
       target.value = Number(convertMoneyToNumber(value) || 0) - step;
-
-      _onInput({ ...e,
+      _onInput({
+        ...e,
         target
       });
-
       e.preventDefault();
-    } // disabled negative
-
+    }
 
-    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // disabled max digit
+    // disabled negative
+    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-'));
 
-    const isMaxDigit = maxDigit && (value === null || value === void 0 ? void 0 : value.replace(regexNumber, '').length) === maxDigit && (isNumber || key === thousandSymbol || key === decimalSymbol) && selectionStart === selectionEnd; // Block event if include conditions
+    // disabled max digit
+    const isMaxDigit = maxDigit && (value === null || value === void 0 ? void 0 : value.replace(regexNumber, '').length) === maxDigit && (isNumber || key === thousandSymbol || key === decimalSymbol) && selectionStart === selectionEnd;
 
+    // Block event if include conditions
     if (decimalExists || removeDot || isNumber && disabledTypingDecimal || disabledDecimalSymbol || !allowKeyTypeNumber || disabled180 || isMaxDigit) {
       e.preventDefault();
     }
-
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
   };
-
+  const validateResult = validates && onValidate(Number(convertMoneyToNumber(value) || 0), validates, true);
   useEffect(() => {
-    inputRef.current.value = value !== null && value !== void 0 ? value : null; // keep focus position
+    inputRef.current.value = value !== null && value !== void 0 ? value : null;
 
+    // keep focus position
     if (pos.current) {
       inputRef.current.setSelectionRange(pos.current, pos.current);
       pos.current = null;
@@ -255,7 +247,6 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   }, [value]);
   useEffect(() => {
     var _valueProps;
-
     if (typeof valueProps !== 'undefined') if (disabledNegative && Number(valueProps || 0) < 0) {
       // nếu không cho nhập số âm mà value đầu vào là âm thì reset value về 0
       valueProps = clamp(0, min, max);
@@ -265,11 +256,10 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -278,12 +268,16 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     css: NumberInputRoot,
     className: classNames('DGN-UI-NumberInput', className, disabled && 'disabled'),
     style: style
-  }, !!label && jsx(Label, {
+  }, label ? jsx(Label, {
     required: required,
     disabled: disabled,
     ...labelProps
-  }, label), jsx(InputBase, {
-    inputRef: inputRef,
+  }, label) : null, jsx(InputBase, {
+    inputRef: refs => {
+      if (!refs) return;
+      inputRef.current = refs;
+      typeof inputRefProp === 'function' ? inputRefProp(refs) : inputRefProp.current = refs;
+    },
     viewType: viewType,
     defaultValue: defaultValue,
     value: value,
@@ -308,21 +302,24 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       const target = e.target;
       target.value = globalRef.current.valueString;
       target.valueString = globalRef.current.returnValue;
-      onChange({ ...e,
+      onChange({
+        ...e,
         value: globalRef.current.value,
         target
       });
     }
-  }), isError && jsx(HelperText, { ...helperTextProps,
+  }), isError ? jsx(HelperText, {
+    ...helperTextProps,
     disabled: disabled
-  }, error), !isError && validateResult && jsx(HelperText, { ...helperTextProps,
+  }, error) : null, !isError && validateResult ? jsx(HelperText, {
+    ...helperTextProps,
     disabled: disabled
-  }, validateResult));
+  }, validateResult) : null);
 });
 const NumberInputRoot = css`
     ${displayBlock};
     ${positionRelative};
-    margin-bottom: ${spacing([5])};
+    ${mgb([5])};
     &.disabled {
         ${cursorNotAllowed};
     }
@@ -351,116 +348,80 @@ NumberInput.defaultProps = {
 NumberInput.propTypes = {
   /** If `true`, the input element is focused during the first mount. */
   autoFocus: PropTypes.bool,
-
   /** If `true`, width of input will resize according to content. */
   autoWidth: PropTypes.bool,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Number of decimal places allowed. */
   decimalDigit: PropTypes.number,
-
   /** Separator symbol. */
   decimalSymbol: PropTypes.oneOf([',', '.']),
-
   /** The default value. Use when the component is not controlled. */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The number of milliseconds to wait before call onChange. */
   delayOnChange: PropTypes.number,
-
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-
   /** If `true`, negative numbers are not allowed. */
   disabledNegative: PropTypes.bool,
-
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
   endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** Error displayed below input. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** If `true`, decimal digit is fixed. */
   fixedDecimalDigit: PropTypes.bool,
-
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-
   /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
   inputProps: PropTypes.object,
-
   /** Pass a ref to the input element. */
   inputRef: ref,
-
   /** Style inline of input element. */
   inputStyle: PropTypes.object,
-
   /** The label of the component. */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /**  Props applied to the [Label](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) element. */
   labelProps: PropTypes.object,
-
   /** Maximum possible value. */
   max: PropTypes.number,
-
   /** Maximum value character (not including separator). */
   maxDigit: PropTypes.number,
-
   /** Minimal possible value. */
   min: PropTypes.number,
-
   /** Callback fired when the input is blurred. */
   onBlur: PropTypes.func,
-
   /** Callback fired when the value is changed. */
   onChange: PropTypes.func,
-
   /** Callback fired when the input is focused. */
   onFocus: PropTypes.func,
-
   /** Callback fired when input. */
   onInput: PropTypes.func,
-
   /** Callback fired when pressing a key. */
   onKeyDown: PropTypes.func,
-
   /** Callback fired when releases a key. */
   onKeyUp: PropTypes.func,
-
   /** The short hint displayed in the input before the user enters a value. */
   placeholder: PropTypes.string,
-
   /** If `true`, the component is readOnly. */
   readOnly: PropTypes.bool,
-
   /** If `true`, the input element is required. */
   required: PropTypes.bool,
-
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
   startIcon: PropTypes.any,
-
   /** Specify how much the values should increase/decrease upon clicking on up/down button. */
   step: PropTypes.number,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Thousand separator character. */
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
-
-  /** 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]),
-
   /** The value of the input element, required for a controlled component. */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
 };