diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -48,15 +49,17 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     isPaste: false,
     clipboardText: ''
   });
+
   if (!inputRef) {
     inputRef = useRef(null);
   }
+
   const separatorSymbol = useRef(decimalSymbol === '.' ? ',' : '.');
   const updated = useRef(false);
   const [decimalDigit, setDecimalDigit] = useState(decimalDigitProp);
   const formatPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|-'}`);
-
   /* Start styled */
+
   const NumberInputRoot = css`
                 display: block;
                 position: relative;
@@ -65,27 +68,36 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* End styled */
 
   /* Start handler */
+
   const getFormat = v => {
     var _format$match;
+
     let [number, decimal = ''] = v.split(decimalSymbol);
     let existDecimalSymbol = v.includes(decimalSymbol);
     if (!number || String(+number) === 'NaN') return number;
+
     if (typeof format === 'function') {
       return format(number);
     }
+
     if (/^#.###$/.test(format)) {
       return number.replace(/\B(?=(\d{3})+(?!\d))/g, separatorSymbol.current) + (existDecimalSymbol ? decimalSymbol + decimal : '');
-    }
-    // #.##.###, #.### %%
+    } // #.##.###, #.### %%
+
+
     const numberFormat = format.slice(0, format.lastIndexOf('#') + 1);
+
     if (numberFormat) {
       if (/^#.###$/.test(numberFormat)) {
         number = number.replace(/\B(?=(\d{3})+(?!\d))/g, separatorSymbol.current);
       }
     }
+
     const dFormat = (_format$match = format.match(/(\d+)?%+$/g)) === null || _format$match === void 0 ? void 0 : _format$match[0];
+
     if (dFormat && decimal) {
       const dDigit = +(dFormat.replaceAll('%', '') || dFormat.length);
+
       if (dDigit === 0) {
         existDecimalSymbol = false;
         decimal = '';
@@ -93,11 +105,14 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         decimal = decimal.slice(0, dDigit);
       }
     }
+
     return number + (existDecimalSymbol ? decimalSymbol + decimal : '');
   };
+
   const getValueWithDecimal = v => {
     if (v && typeof decimalDigit === 'number') {
       let [number, decimal] = v.split(decimalSymbol);
+
       if (decimal && decimal.length > decimalDigit) {
         if (decimalDigit) {
           decimal = decimal.slice(0, decimalDigit);
@@ -107,46 +122,58 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
+
     return v;
   };
+
   const isDeleteSymbol = v => {
     const valueArr = v.split(separatorSymbol.current);
+
     for (let i = 0; i < valueArr.length; i++) {
       if (valueArr[i].length > 3) {
         return true;
       }
     }
+
     return false;
   };
+
   const onKeyDownHandler = e => {
     const key = e.key;
     const keyCode = e.keyCode;
     const value = inputRef.current.value;
     let cursor = inputRef.current.selectionStart;
+
     if (key.charCodeAt(0) > 127) {
       local.current.isSpecialSymbol = true;
+
       if (local.current.currentKeyCode === 8) {
         local.current.currentKeyCode = null;
         inputRef.current.value = local.current.currentValue;
       }
+
       e.preventDefault();
       return false;
     }
+
     if (!formatPattern.test(key) && !(/a|x|c|v/i.test(key) && e.ctrlKey)) {
       local.current.currentKey = key;
       local.current.currentKeyCode = keyCode;
       e.preventDefault();
       return false;
     }
+
     if (/Arrow(Up|Down)/.test(key)) {
       const number = +value.replace(new RegExp(`[^0-9\\${decimalSymbol}\\-]`, 'g'), '').replace(decimalSymbol, '.');
       const plusNumber = key === 'ArrowDown' ? -step : step;
       let result = number + plusNumber;
+
       if (result < min) {
         result = min;
       } else if (result > max) {
         result = max;
       }
+
       if (result !== number) {
         local.current.currentKey = key;
         result = result.toString().replace('.', decimalSymbol);
@@ -155,9 +182,11 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           target: inputRef.current
         });
       }
+
       e.preventDefault();
       return false;
     }
+
     if (keyCode === 8) {
       if (local.current.currentKeyCode === 231 || local.current.isSpecialSymbol) {
         setTimeout(() => {
@@ -166,80 +195,94 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         e.preventDefault();
         return false;
       }
+
       local.current.currentKeyCode = 8;
       local.current.currentValue = value;
     }
+
     if (value.includes('-') && cursor === 0 && /[1-9]/.test(key)) {
       inputRef.current.value = value.replace('-', `-${key}`);
       inputRef.current.setSelectionRange(2, 2);
       e.preventDefault();
       return false;
     }
+
     if (key === '-' && (cursor !== 0 || value[0] === '-') || key === decimalSymbol && value.includes(key)) {
       e.preventDefault();
       return false;
     }
+
     if (/x/i.test(key)) {
       local.current.clipboardText = window.getSelection().toString();
     } else if (/\d/.test(key)) {
       local.current.currentValue = value;
     }
+
     local.current.isSpecialSymbol = false;
     local.current.isDeleteDecimalSymbol = key === 'Backspace' && value[cursor - 1] === decimalSymbol;
     local.current.currentKey = key;
     if (onKeyDown) onKeyDown(e);
   };
+
   const onPasteHandler = e => {
     var _local$current$clipbo;
+
     const value = e.target.value;
     const existMinus = value.includes('-');
     const pattern = new RegExp(`^${disabledNegative || existMinus ? '' : '-?'}(?:\\d{1,3}(?:,\\d{3})*|\\d+)?(?:\\${decimalSymbol}(\\d+)?)?$`, 'g');
     local.current.clipboardText = (e.clipboardData || window.clipboardData).getData('text');
     const decimalSymbolDigit = (_local$current$clipbo = local.current.clipboardText.match(new RegExp(decimalSymbol, 'g'))) === null || _local$current$clipbo === void 0 ? void 0 : _local$current$clipbo.length;
-    let selectionText = window.getSelection().toString();
-    // Only includes number and decimalSymbol
-    if (!pattern.test(local.current.clipboardText.replaceAll(separatorSymbol.current, '')) ||
-    // Only one decimalSymbol
+    let selectionText = window.getSelection().toString(); // Only includes number and decimalSymbol
+
+    if (!pattern.test(local.current.clipboardText.replaceAll(separatorSymbol.current, '')) || // Only one decimalSymbol
     decimalSymbolDigit && value.includes(decimalSymbol) && !selectionText.includes(decimalSymbol)) {
       e.preventDefault();
       return;
     }
+
     local.current.isPaste = true;
   };
+
   const onChangeHandler = e => {
     const value = e.target.value.replace(new RegExp(`[^0-9\\${decimalSymbol}\\${separatorSymbol.current}\\-]`, 'g'), '');
+
     if (!value) {
       e.value = null;
       !!onChange && onChange(e);
       e.value = undefined;
       return;
     }
+
     let result = getValueWithMinMax(value);
+
     if (/\d/.test(local.current.currentKey)) {
       if (!!+result && +result < +getValueWithMinMax(value.replace(local.current.currentKey, ''))) {
         e.target.value = local.current.currentValue;
         return;
       }
     }
+
     let cursor = e.target.selectionStart;
-    const el = {
-      ...e
+    const el = { ...e
     };
-    el.target = {
-      ...e.target
+    el.target = { ...e.target
     };
     const hasDecimal = result.includes(decimalSymbol);
     let [number, decimal = ''] = result.split(decimalSymbol);
+
     if (hasDecimal) {
       if (typeof decimalDigit === 'number') {
         decimal = decimal.replaceAll(separatorSymbol.current, '').substr(0, decimalDigit);
       }
+
       decimal = (hasDecimal ? decimalSymbol : '') + decimal;
       result = number + decimal;
     }
+
     if (format && (formatPattern.test(local.current.currentKey) || local.current.isPaste || /x|Arrow(Up|Down)/i.test(local.current.currentKey))) {
       const decimalSymbolIndex = result.indexOf(decimalSymbol);
       number = number.replaceAll(separatorSymbol.current, '');
+
       if (local.current.currentKey === decimalSymbol) {
         cursor = number.length + Math.ceil(number.length / 3);
       } else if (!isNaN(local.current.currentKey)) {
@@ -260,6 +303,7 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       } else if (local.current.isPaste) {
         var _result$slice$match, _local$current$clipbo2;
+
         const simpleNumber = number + decimal;
         const cursorBefore = cursor - local.current.clipboardText.length;
         const cursorAfter = cursorBefore - (((_result$slice$match = result.slice(0, cursorBefore).match(new RegExp(`\\${separatorSymbol.current}`, 'g'))) === null || _result$slice$match === void 0 ? void 0 : _result$slice$match.length) || 0) + local.current.clipboardText.length;
@@ -273,6 +317,7 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } else if (/Arrow(Up|Down)/i.test(local.current.currentKey)) {
         cursor += Math.floor((number.length - 1) / 3);
       }
+
       result = number + decimal;
       cursor = Math.max(0, cursor);
       e.target.value = getFormat(number) + decimal;
@@ -280,8 +325,9 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       e.target.value = result;
       e.target.setSelectionRange(cursor, cursor);
-    }
-    // el.target.value = result;
+    } // el.target.value = result;
+
+
     if (valueTypeReturn === 'string') {
       el.value = result;
       el.target.value = result;
@@ -290,16 +336,21 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       el.value = newResult;
       el.target.value = newResult;
     }
+
     !!onChange && onChange(el);
   };
+
   const onBlurHandler = e => {
     const v = e.target.value.replace(new RegExp(`[^0-9\\${decimalSymbol}\\-]`, 'g'), '');
+
     if (v !== getValueWithMinMax(v)) {
       e.target.value = getValueWithMinMax(v);
       onChangeHandler(e);
     }
+
     !!onBlur && onBlur(e);
   };
+
   const setValueIntoInput = v => {
     if (v === null || v === undefined) {
       inputRef.current.value = '';
@@ -309,25 +360,32 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef.current.value = format ? getFormat(v) : v;
     }
   };
+
   const getValueWithMinMax = v => {
     v = v.toString().replace(new RegExp(`[^0-9\\${decimalSymbol}\\-]`, 'g'), '').replace(decimalSymbol, '.');
+
     if (+v < min) {
       v = min.toString();
     } else if (+v > max) {
       v = max.toString();
     }
+
     return v.replace('.', decimalSymbol);
   };
+
   useEffect(() => {
     if (format) {
       if (typeof format === 'string') {
         const numberFormat = format.slice(0, format.lastIndexOf('#') + 1);
+
         if (/^#.###$/.test(numberFormat)) {
           separatorSymbol.current = format[1];
         }
       }
+
       if (updated.current) {
         const v = inputRef.current.value;
+
         if (v) {
           setValueIntoInput(v);
         }
@@ -336,12 +394,13 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [format]);
   useEffect(() => {
     !!refs && refs(ref);
+
     if (defaultValue !== undefined && defaultValue !== '') {
       setValueIntoInput(defaultValue);
-    }
-    // inputRef.current.addEventListener('focus', () => {
+    } // inputRef.current.addEventListener('focus', () => {
     //     inputRef.current.addEventListener('keydown', onKeyDownHandler);
     // }, {once: true});
+
   }, []);
   useEffect(() => {
     if (placeholder !== undefined) {
@@ -355,18 +414,25 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [value]);
   useEffect(() => {
     let dDigit = decimalDigitProp;
+
     if (format && typeof format === 'string') {
       var _format$match2;
+
       const dFormat = (_format$match2 = format.match(/(\d+)?%+$/g)) === null || _format$match2 === void 0 ? void 0 : _format$match2[0];
+
       if (dFormat) {
         dDigit = +(dFormat.replaceAll('%', '') || dFormat.length);
       }
     }
+
     setDecimalDigit(dDigit);
+
     if (typeof dDigit === 'number') {
       const valueInput = inputRef.current.value;
+
       if (valueInput) {
         let [number, decimal] = valueInput.split(decimalSymbol);
+
         if (decimal && decimal.length > dDigit) {
           if (dDigit) {
             decimal = decimal.slice(0, dDigit);
@@ -377,6 +443,7 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
+
     if (!updated.current) {
       updated.current = true;
     }
@@ -447,77 +514,108 @@ NumberInput.defaultProps = {
 NumberInput.propTypes = {
   /** the type of border you want to display */
   viewType: PropTypes.oneOf(['underlined', 'outlined']),
+
   /** the type of value which you want to return */
   valueTypeReturn: PropTypes.oneOf(['number', 'string']),
+
   /** separator symbol */
   decimalSymbol: PropTypes.oneOf([',', '.']),
+
   /** default value is displayed for first render */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** the displayed value for each change */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** number of decimal places allowed */
   decimalDigit: PropTypes.number,
+
   /** min of value was allowed */
   min: PropTypes.number,
+
   /** max of value was allowed */
   max: PropTypes.number,
+
   /** step of input */
   step: PropTypes.number,
+
   /** label for input */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
   /** hints for input */
   placeholder: PropTypes.string,
+
   /** error for input */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** icon at start */
   startIcon: PropTypes.any,
+
   /** icon at end */
   endIcon: PropTypes.any,
+
   /** prevent all event if true, hide all icon */
   disabled: PropTypes.bool,
+
   /** transparent border color if true */
   nonStyle: PropTypes.bool,
+
   /** prevent all event if true */
   readOnly: PropTypes.bool,
+
   /** auto focus after first render */
   autoFocus: PropTypes.bool,
+
   /** negative numbers are not allowed if true */
   disabledNegative: PropTypes.bool,
+
   /** At least one character is required */
   required: PropTypes.bool,
+
   /** props of input in NumberInput component */
   inputProps: PropTypes.object,
+
   /** style inline of input in NumberInput component */
   inputStyle: 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]),
+
   /** on key down function */
   onKeyDown: PropTypes.func,
+
   /** on key up function */
   onKeyUp: PropTypes.func,
+
   /** on input function */
   onInput: PropTypes.func,
+
   /** on change function */
   onChange: PropTypes.func,
+
   /** on blur function */
   onBlur: PropTypes.func,
+
   /** on focus function */
   onFocus: PropTypes.func,
+
   /** inputRef of NumberInput component */
   inputRef: PropTypes.any
 };