diginet-core-ui 1.3.37 → 1.3.39

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

@@ -0,0 +1,432 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { useState, useRef, forwardRef, useMemo, useCallback, useEffect, 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';
+import { getGlobal } from '../../../global';
+/* Start styled */
+
+const NumberInputRoot = css`
+    display: block;
+    position: relative;
+    margin-bottom: 20px;
+`;
+const regexValidNumber = /[^0-9.,-]/g;
+const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
+const NumberInput = /*#__PURE__*/forwardRef(({
+  viewType,
+  required,
+  disabledNegative,
+  nonStyle,
+  decimalDigit,
+  decimalSymbol,
+  thousandSeparator: thousandSymbol,
+  label,
+  defaultValue,
+  value: valueProps,
+  min,
+  max,
+  step,
+  placeholder,
+  startIcon,
+  endIcon,
+  autoFocus,
+  disabled,
+  readOnly,
+  inputRef,
+  inputProps,
+  inputStyle,
+  error,
+  onChange,
+  onFocus,
+  onInput,
+  onKeyDown,
+  onKeyUp,
+  validates,
+  delayOnChange,
+  fixedDecimalDigit,
+  className
+}, reference) => {
+  inputRef = inputRef || useRef(null);
+  const pos = useRef(null);
+  const ref = useRef(null);
+  const globalRef = useRef({});
+  const [value, setValue] = useState(defaultValue); // 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 === ',' ? '.' : ',';
+    }, [decimalSymbol, thousandSymbol]);
+    decimalSymbol = useMemo(() => {
+      return thousandSymbol === ',' ? '.' : ',';
+    }, [decimalSymbol, decimalSymbol]);
+  } else {
+    thousandSymbol = '';
+  }
+
+  const validateResult = validates && onValidate(value, validates, true); // Clamp number between two values with the following line:
+
+  const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+  if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @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
+      }
+    } = 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 (!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 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
+
+    if ((_number3 = number) !== null && _number3 !== void 0 && _number3.indexOf(thousandSymbol) && !pos.current) {
+      var _number4;
+
+      pos.current = selectionStart + (((_number4 = number) === null || _number4 === void 0 ? void 0 : _number4.toString().split(thousandSymbol).length) - (vl === null || vl === void 0 ? void 0 : vl.toString().split(thousandSymbol).length));
+    }
+
+    return number;
+  }, [decimalSymbol, max, value]);
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
+   */
+
+  const convertMoneyToNumber = useCallback((vl, isNumber) => {
+    var _number5, _number5$toString, _number5$toString$rep, _number5$toString$rep2, _number5$toString$rep3;
+
+    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 = (_number5 = number) === null || _number5 === void 0 ? void 0 : (_number5$toString = _number5.toString()) === null || _number5$toString === void 0 ? void 0 : (_number5$toString$rep = _number5$toString.replaceAll) === null || _number5$toString$rep === void 0 ? void 0 : (_number5$toString$rep2 = (_number5$toString$rep3 = _number5$toString$rep.call(_number5$toString, thousandSymbol, '')).replaceAll) === null || _number5$toString$rep2 === void 0 ? void 0 : _number5$toString$rep2.call(_number5$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);
+    const returnValue = convertMoneyToNumber(valueT);
+    e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
+    e.target.value = globalRef.current.valueString = valueT || '';
+    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 && (typeof min !== 'undefined' || typeof max !== 'undefined')) {
+      value = convertMoneyToNumber(value);
+
+      if (Number(value) < min || Number(value) > max) {
+        _onInput({ ...e,
+          target: { ...e.target,
+            value: clamp(value, min, max)
+          }
+        });
+      }
+    }
+  };
+
+  const _onKeyDown = e => {
+    var _value$split, _value$split$;
+
+    const {
+      keyCode,
+      ctrlKey,
+      metaKey,
+      shiftKey,
+      target: {
+        value,
+        selectionStart,
+        selectionEnd
+      }
+    } = e; // 0-9 only
+
+    const isNumber = keyCode >= 48 && keyCode <= 57 && shiftKey === false || keyCode >= 96 && keyCode <= 105; // character input type="number"
+
+    const allowKeyTypeNumber = isNumber || keyCode === 8 || // key backspace
+    keyCode > 34 && keyCode < 40 || keyCode === 190 || keyCode === 110 || // .
+    keyCode === 188 || // ,
+    (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
+    // Do not allow the character decimal if decimalDigit is undefined
+
+    const isDecimalSymbol = decimalSymbol === '.' && (keyCode === 190 || keyCode === 110) || decimalSymbol === ',' && keyCode === 188;
+    const disabledDecimalSymbol = isDecimalSymbol && !decimalDigit; // Accepts only one decimal separator
+
+    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol; // Do not allow the character thousand
+
+    const isThousandSymbol = (!thousandSymbol || thousandSymbol === '.') && (keyCode === 190 || keyCode === 110) || thousandSymbol === ',' && keyCode === 188;
+    const disabledThousandSymbol = isThousandSymbol; // 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
+    // key arrow up
+
+    if (keyCode === 38) {
+      _onInput({ ...e,
+        target: { ...e.target,
+          value: Number(convertMoneyToNumber(value) || 0) + step
+        }
+      });
+
+      e.preventDefault();
+    } // key arrow down
+    else if (keyCode === 40) {
+      _onInput({ ...e,
+        target: { ...e.target,
+          value: Number(convertMoneyToNumber(value) || 0) - step
+        }
+      });
+
+      e.preventDefault();
+    } // disabled negative
+
+
+    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // Block event if include conditions
+
+    if (decimalExists || disabledThousandSymbol || removeDot || isNumber && disabledTypingDecimal || disabledDecimalSymbol || !allowKeyTypeNumber || disabled180) {
+      e.preventDefault();
+    }
+
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+  };
+
+  useEffect(() => {
+    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;
+    }
+  }, [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);
+    }
+    setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
+  }, [valueProps]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return jsx("div", {
+    ref: ref,
+    css: NumberInputRoot,
+    className: ['DGN-UI-NumberInput', className].join(' ').trim().replace(/\s+/g, ' ')
+  }, !!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,
+    onFocus: onFocus,
+    onInput: _onInput,
+    onKeyUp: onKeyUp,
+    delayOnChange: delayOnChange,
+    onKeyDown: _onKeyDown,
+    onChange: e => {
+      onChange({ ...e,
+        value: globalRef.current.value,
+        target: { ...e.target,
+          value: globalRef.current.valueString
+        }
+      });
+    },
+    onBlur: e => _onBlur(e)
+  }), !!error && jsx(HelperText, {
+    disabled: disabled
+  }, error), !error && validateResult && jsx(HelperText, {
+    disabled: disabled
+  }, validateResult));
+});
+NumberInput.defaultProps = {
+  viewType: 'underlined',
+  label: '',
+  placeholder: getGlobal('inputPlaceholder'),
+  error: '',
+  startIcon: '',
+  endIcon: '',
+  decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+  required: false,
+  nonStyle: false,
+  autoFocus: false,
+  disabled: false,
+  readOnly: false,
+  disabledNegative: false,
+  fixedDecimalDigit: false,
+  step: 1,
+  decimalDigit: 0,
+  thousandSeparator: false,
+  min: -Infinity,
+  max: Infinity,
+  className: ''
+};
+NumberInput.propTypes = {
+  /** the type of border you want to display */
+  viewType: PropTypes.oneOf(['underlined', 'outlined']),
+
+  /** 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,
+
+  /** 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 focus function */
+  onFocus: PropTypes.func,
+
+  /** inputRef of NumberInput component */
+  inputRef: PropTypes.any,
+
+  /** inputRef of fixedDecimalDigit component */
+  fixedDecimalDigit: PropTypes.bool,
+
+  /** inputRef of delayOnChange component */
+  delayOnChange: PropTypes.number,
+
+  /** inputRef of delayOnChange component */
+  thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
+
+  /** className of component */
+  className: PropTypes.string
+};
+export default NumberInput;

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

@@ -410,13 +410,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,