diginet-core-ui 1.3.24

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

@@ -0,0 +1,633 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import locale from '../../../locale';
+import { InputBase, Label, HelperText } from '../../';
+import { onValidate } from '../../../utils';
+const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  viewType,
+  required,
+  disabledNegative,
+  nonStyle,
+  decimalDigit: decimalDigitProp,
+  decimalSymbol,
+  label,
+  defaultValue,
+  value,
+  min,
+  max,
+  step,
+  placeholder,
+  startIcon,
+  endIcon,
+  valueTypeReturn,
+  autoComplete,
+  autoFocus,
+  disabled,
+  readOnly,
+  refs,
+  inputRef,
+  inputProps,
+  iconStyle,
+  inputStyle,
+  labelProps,
+  errorProps,
+  error,
+  format,
+  onChange,
+  onBlur,
+  onFocus,
+  onInput,
+  onKeyDown,
+  onKeyUp,
+  validates,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const local = useRef({
+    isSpecialSymbol: false,
+    isDeleteDecimalSymbol: false,
+    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;
+        margin-bottom: 20px;
+    `;
+  /* 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 = '';
+      } else if (decimal && decimal.length > dDigit) {
+        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);
+          return number + decimalSymbol + decimal;
+        } else {
+          return number;
+        }
+      }
+    }
+
+    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);
+        inputRef.current.value = result;
+        onChangeHandler({
+          target: inputRef.current
+        });
+      }
+
+      e.preventDefault();
+      return false;
+    }
+
+    if (keyCode === 8) {
+      if (local.current.currentKeyCode === 231 || local.current.isSpecialSymbol) {
+        setTimeout(() => {
+          local.current.isSpecialSymbol = false;
+        }, 100);
+        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;
+  };
+
+  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, '')) || 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
+    };
+    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)) {
+        if ((decimalSymbolIndex === -1 || cursor <= decimalSymbolIndex) && number.length % 3 === 1) {
+          cursor++;
+        }
+      } else if (local.current.currentKey === 'Backspace') {
+        if (local.current.isDeleteDecimalSymbol) {
+          cursor++;
+        } else if (number.length % 3 === 0 && !isDeleteSymbol(value)) {
+          cursor--;
+        }
+      } else if (local.current.currentKey === 'Delete') {
+        if (isDeleteSymbol(value)) {
+          cursor++;
+        } else if (number.length % 3 === 0 && value[cursor] !== separatorSymbol.current) {
+          cursor--;
+        }
+      } 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;
+        const decimalSymbolIndex = (simpleNumber.indexOf(decimalSymbol) + 1 || number.length + 1) - 1;
+        const spaceQuantity = Math.floor((number.length - 1) / 3) - Math.floor(Math.max(0, decimalSymbolIndex - cursorAfter) / 3);
+        cursor = cursorAfter + spaceQuantity - (((_local$current$clipbo2 = local.current.clipboardText.match(new RegExp(`\\${separatorSymbol.current}`, 'g'))) === null || _local$current$clipbo2 === void 0 ? void 0 : _local$current$clipbo2.length) || 0);
+        local.current.isPaste = false;
+        local.current.clipboardText = '';
+      } else if (/x/i.test(local.current.currentKey)) {
+        cursor -= +(Math.ceil(number.length / 3) !== Math.ceil((number.length + local.current.clipboardText.length) / 3));
+      } 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;
+      e.target.setSelectionRange(cursor, cursor);
+    } else {
+      e.target.value = result;
+      e.target.setSelectionRange(cursor, cursor);
+    } // el.target.value = result;
+
+
+    if (valueTypeReturn === 'string') {
+      el.value = result;
+    } else {
+      el.value = String(+result.replace(',', '.')) !== 'NaN' ? +result.replace(',', '.') : result;
+    }
+
+    !!onChange && onChange(el);
+  };
+
+  const onBlurHandler = e => {
+    const v = e.target.value.replace(new RegExp(`[^0-9\\${decimalSymbol}\\-]`, 'g'), '').replace(decimalSymbol, '.');
+
+    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 = '';
+    } else {
+      v = getValueWithDecimal(getValueWithMinMax(v).replace('.', decimalSymbol));
+      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);
+        }
+      }
+    }
+  }, [format]);
+  useEffect(() => {
+    !!refs && refs(ref);
+
+    if (defaultValue !== undefined && defaultValue !== '') {
+      setValueIntoInput(defaultValue);
+    }
+
+    inputRef.current.addEventListener('focus', () => {
+      inputRef.current.addEventListener('keydown', onKeyDownHandler);
+    }, {
+      once: true
+    });
+  }, []);
+  useEffect(() => {
+    if (placeholder !== undefined) {
+      inputRef.current.placeholder = placeholder;
+    }
+  }, [placeholder]);
+  useEffect(() => {
+    if (value !== undefined || updated.current) {
+      setValueIntoInput(value);
+    }
+  }, [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);
+            inputRef.current.value = number + decimalSymbol + decimal;
+          } else {
+            inputRef.current.value = number;
+          }
+        }
+      }
+    }
+
+    if (!updated.current) {
+      updated.current = true;
+    }
+  }, [decimalDigitProp, format]);
+  /* End handler */
+
+  const validateResult = validates && onValidate(value, validates, true);
+  useImperativeHandle(reference, () => {
+    ref.current.getFormat = getFormat;
+    ref.current.setValueIntoInput = setValueIntoInput;
+    ref.current.getValueWithMinMax = getValueWithMinMax;
+    return ref.current;
+  });
+  return jsx("div", _extends({
+    ref: ref,
+    css: NumberInputRoot
+  }, props), !!label && jsx(Label, {
+    required: required,
+    disabled: disabled
+  }, label), jsx(InputBase, {
+    inputRef: inputRef,
+    viewType: viewType,
+    defaultValue: defaultValue,
+    value: value,
+    placeholder: placeholder,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    readOnly: readOnly,
+    status: !!error || validateResult ? 'danger' : 'default',
+    inputProps: inputProps,
+    inputStyle: inputStyle,
+    startIcon: startIcon,
+    endIcon: endIcon,
+    nonStyle: nonStyle,
+    onChange: onChangeHandler,
+    onBlur: onBlurHandler,
+    onFocus: onFocus,
+    onInput: onInput,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onPaste: onPasteHandler
+  }), !!error && jsx(HelperText, {
+    disabled: disabled
+  }, error), !error && validateResult && jsx(HelperText, {
+    disabled: disabled
+  }, validateResult));
+}));
+NumberInput.defaultProps = {
+  viewType: 'underlined',
+  label: '',
+  placeholder: '',
+  error: '',
+  startIcon: '',
+  endIcon: '',
+  decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+  required: false,
+  nonStyle: false,
+  autoFocus: false,
+  disabled: false,
+  readOnly: false,
+  disabledNegative: false,
+  step: 1,
+  min: -Infinity,
+  max: Infinity,
+  inputProps: {}
+};
+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]),
+
+  /** type auto complete of input (like new-password) */
+  autoComplete: 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,
+
+  /** any props of label in NumberInput component */
+  labelProps: PropTypes.object,
+
+  /** 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%' === '%%'
+   */
+  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
+   */
+  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
+};
+export default NumberInput;