diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -13,10 +14,10 @@ const {
 } = useTheme();
 const regexValidNumber = /[^0-9.,-]/g;
 const regexNumber = /[^0-9]/g;
-const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
+const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g; // Clamp number between two values with the following line:
 
-// 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,
@@ -63,10 +64,10 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const globalRef = useRef({});
   const [value, setValue] = useState(defaultValue);
-  const isError = !!error;
+  const isError = !!error; // nếu không cho nhập số âm mà max là âm thì remove giá trị max
 
-  // 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 === ',' ? '.' : ',';
@@ -77,19 +78,21 @@ 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
@@ -97,44 +100,49 @@ 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);
+    if (typeof max !== 'undefined' && Number(number) > max) number = Math.min(number, max); // number = Currency.format(number);
 
-    // 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 , || . || -
 
+    let number = vl === null || vl === void 0 ? void 0 : vl.toString().replace(regexValidNumber, ''); // allow number and , || . || -
     // 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);
@@ -145,25 +153,32 @@ 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,
@@ -175,73 +190,64 @@ 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 ||
-    // -
-    keyCode === 9; // tab
+    } = 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;
 
-    // Decimal
+    const removeDot = keyCode === 8 && selectionEnd - selectionStart <= 1 && value.charAt(selectionEnd - 1) === thousandSymbol; // Decimal
     // Do not allow the character decimal if decimalDigit is undefined
+
     const isDecimalSymbol = decimalSymbol === key;
-    const disabledDecimalSymbol = isDecimalSymbol && !decimalDigit;
+    const disabledDecimalSymbol = isDecimalSymbol && !decimalDigit; // Accepts only one decimal separator
 
-    // Accepts only one decimal separator
-    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol;
+    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol; // Disabled typing input when decimal digit to limit and focus is last
 
-    // 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}
+    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
 
-    // disabled negative
-    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-'));
 
-    // 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;
+    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // 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
 
-    // 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);
   };
+
   useEffect(() => {
-    inputRef.current.value = value !== null && value !== void 0 ? value : null;
+    inputRef.current.value = value !== null && value !== void 0 ? value : null; // keep focus position
 
-    // keep focus position
     if (pos.current) {
       inputRef.current.setSelectionRange(pos.current, pos.current);
       pos.current = null;
@@ -249,6 +255,7 @@ 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);
@@ -258,10 +265,11 @@ 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;
   });
@@ -300,17 +308,14 @@ 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), !isError && validateResult && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, validateResult));
 });
@@ -346,80 +351,116 @@ 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'])
 };