diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,5 +1,7 @@
 /* eslint-disable no-redeclare */
+
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -9,68 +11,84 @@ import { InputBase, Label, HelperText } from "../../";
 import { onValidate } from "../../../utils";
 import { displayBlock, positionRelative } from "../../../styles/general";
 import { getGlobal } from "../../../global";
+
 const num2WordsVi = function () {
   let t = ['không', 'một', 'hai', 'ba', 'bốn', 'năm', 'sáu', 'bảy', 'tám', 'chín'],
-    r = function (r, n) {
-      let o = '',
+      r = function (r, n) {
+    let o = '',
         a = Math.floor(r / 10),
         e = r % 10;
-      return a > 1 ? (o = ' ' + t[a] + ' mươi', 1 === e && (o += ' mốt')) : 1 === a ? (o = ' mười', 1 === e && (o += ' một')) : n && e > 0 && (o = ' lẻ'), 5 === e && a >= 1 ? o += ' lăm' :
-      // : 4 === e && a >= 1
-      // ? (o += ' tư')
-      (e > 1 || 1 === e && 0 === a) && (o += ' ' + t[e]), o;
-    },
-    n = function (n, o) {
-      var a = '',
+    return a > 1 ? (o = ' ' + t[a] + ' mươi', 1 === e && (o += ' mốt')) : 1 === a ? (o = ' mười', 1 === e && (o += ' một')) : n && e > 0 && (o = ' lẻ'), 5 === e && a >= 1 ? o += ' lăm' : // : 4 === e && a >= 1
+    // ? (o += ' tư')
+    (e > 1 || 1 === e && 0 === a) && (o += ' ' + t[e]), o;
+  },
+      n = function (n, o) {
+    var a = '',
         e = Math.floor(n / 100),
         n = n % 100;
-      return o || e > 0 ? (a = ' ' + t[e] + ' trăm', a += r(n, !0)) : a = r(n, !1), a;
-    },
-    o = function (t, r) {
-      var o = '',
+    return o || e > 0 ? (a = ' ' + t[e] + ' trăm', a += r(n, !0)) : a = r(n, !1), a;
+  },
+      o = function (t, r) {
+    var o = '',
         a = Math.floor(t / 1e6),
         t = t % 1e6;
-      a > 0 && (o = n(a, r) + ' triệu', r = !0);
-      var e = Math.floor(t / 1e3),
+    a > 0 && (o = n(a, r) + ' triệu', r = !0);
+    var e = Math.floor(t / 1e3),
         t = t % 1e3;
-      return e > 0 && (o += n(e, r) + ' ngàn', r = !0), t > 0 && (o += n(t, r)), o;
-    };
+    return e > 0 && (o += n(e, r) + ' ngàn', r = !0), t > 0 && (o += n(t, r)), o;
+  };
+
   return {
     convert: function (r) {
       let ty;
       if (0 === r) return t[0];
       let n = '',
-        a = '';
+          a = '';
+
       do ty = r % 1e9, r = Math.floor(r / 1e9), n = r > 0 ? o(ty, !0) + a + n : o(ty, !1) + a + n, a = ' tỷ'; while (r > 0);
+
       return n.trim();
     }
   };
 }();
+
 const num2WordsEn = n => {
   const arr = x => Array.from(x);
+
   const num = x => Number(x) || 0;
+
   const isEmpty = xs => xs.length === 0;
+
   const take = n => xs => xs.slice(0, n);
+
   const drop = n => xs => xs.slice(n);
+
   const reverse = xs => xs.slice(0).reverse();
+
   const comp = f => g => x => f(g(x));
+
   const not = x => !x;
+
   const chunk = n => xs => isEmpty(xs) ? [] : [take(n)(xs), ...chunk(n)(drop(n)(xs))];
+
   let a = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
   let b = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
-  let g = ['', 'thousand', 'million', 'billion', 'trillion', 'quadrillion', 'quintillion', 'sextillion', 'septillion', 'octillion', 'nonillion'];
-  // this part is really nasty still
+  let g = ['', 'thousand', 'million', 'billion', 'trillion', 'quadrillion', 'quintillion', 'sextillion', 'septillion', 'octillion', 'nonillion']; // this part is really nasty still
   // it might edit this again later to show how Monoids could fix this up
+
   let makeGroup = ([ones, tens, huns]) => {
     return [num(huns) === 0 ? '' : a[huns] + ' hundred ', num(ones) === 0 ? b[tens] : b[tens] && b[tens] + '-' || '', a[tens + ones] || a[ones]].join('');
-  };
-  // "thousands" constructor; no real good names for this, I guess
-  let thousand = (group, i) => group === '' ? group : `${group} ${g[i]}`;
-  // execute !
+  }; // "thousands" constructor; no real good names for this, I guess
+
+
+  let thousand = (group, i) => group === '' ? group : `${group} ${g[i]}`; // execute !
+
+
   if (typeof n === 'number') return num2WordsEn(String(n));
   if (n === '0') return 'zero';
   return comp(chunk(3))(reverse)(arr(n)).map(makeGroup).map(thousand).filter(comp(not)(isEmpty)).reverse().join(' ');
 };
+
 const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   valueTypeReturn,
@@ -116,26 +134,30 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     isPaste: false,
     clipboardText: ''
   });
+
   if (!inputRef) {
     inputRef = useRef(null);
   }
+
   const separatorSymbol = typeof thousandSeparator === 'string' ? thousandSeparator : locale.get() === 'vi' ? '.' : ',';
   const decimalSymbol = separatorSymbol === '.' ? ',' : '.';
   const thousandSeparatorPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|-'}`);
   const isError = !!error && !value && value !== 0;
-
   /* Start handler */
+
   const getThousandSeparator = number => {
     let decimal;
     [number, decimal = ''] = number.split(decimalSymbol);
-    if (!number || String(+number) === 'NaN') return number;
-    // number = +number;
+    if (!number || String(+number) === 'NaN') return number; // number = +number;
     // return number.toLocaleString(separatorSymbol === '.' ? 'vi' : 'en');
+
     return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separatorSymbol) + (decimal ? 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);
@@ -145,38 +167,48 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
+
     return v;
   };
+
   const isDeleteSymbol = v => {
     const valueArr = v.split(separatorSymbol);
+
     for (let i = 0; i < valueArr.length; i++) {
       if (valueArr[i].length > 3) {
         return true;
       }
     }
+
     return false;
   };
+
   const onKeyDownHandler = e => {
     e.stopPropagation();
     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 (!thousandSeparatorPattern.test(key) && !(/a|x|c|v/i.test(key) && e.ctrlKey)) {
       local.current.currentKey = key;
       local.current.currentKeyCode = keyCode;
       e.preventDefault();
       return false;
     }
+
     if (keyCode === 8) {
       if (local.current.currentKeyCode === 231 || local.current.isSpecialSymbol) {
         setTimeout(() => {
@@ -185,84 +217,101 @@ const MoneyInput = /*#__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) || key === '0' && !allowZero && (cursor === 0 || cursor === 1 && value.includes('-'))) {
       e.preventDefault();
       return false;
     }
+
     if (/x/i.test(key)) {
       local.current.clipboardText = window.getSelection().toString();
     }
+
     local.current.isSpecialSymbol = false;
     local.current.isDeleteDecimalSymbol = key === 'Backspace' && value[cursor - 1] === decimalSymbol;
     local.current.currentKey = key;
     !!onKeyDown && onKeyDown(e);
   };
+
   const parseValueWithFix = value => {
     if (!value) return value;
     if (!prefix && !suffix) return value;
     return `${prefix ? prefix + ' ' : ''}${value}${suffix ? ' ' + suffix : ''}`;
   };
+
   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;
-    const selectionText = window.getSelection().toString();
-    // Only includes number and decimalSymbol
-    if (!pattern.test(local.current.clipboardText) ||
-    // Only one decimalSymbol
+    const selectionText = window.getSelection().toString(); // Only includes number and decimalSymbol
+
+    if (!pattern.test(local.current.clipboardText) || // 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;
+
     if (/[a-z]/i.test(value)) {
       const length = value.match(/[a-z]/gi).length;
       e.target.value = value.replace(/[a-z]/gi, '');
+
       if (length === 1) {
         const index = value.match(/[a-z]/i).index;
         e.target.setSelectionRange(index, index);
       }
+
       return;
     }
+
     if (!value) {
       e.value = null;
       !!onChange && onChange(e);
       e.value = undefined;
       return;
     }
+
     let result = value;
     let cursor = e.target.selectionStart;
-    const el = {
-      ...e
-    };
-    // el.target = {...e.target}
+    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, '').substr(0, decimalDigit);
       }
+
       decimal = (hasDecimal ? decimalSymbol : '') + decimal;
       result = number + decimal;
     }
+
     if (thousandSeparator && (thousandSeparatorPattern.test(local.current.currentKey) || local.current.isPaste || /x/i.test(local.current.currentKey))) {
       const decimalSymbolIndex = result.indexOf(decimalSymbol);
       number = number.replaceAll(separatorSymbol, '');
+
       if (local.current.currentKey === decimalSymbol) {
         cursor = number.length + Math.ceil(number.length / 3);
       } else if (!isNaN(local.current.currentKey)) {
@@ -283,6 +332,7 @@ const MoneyInput = /*#__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}`, 'g'))) === null || _result$slice$match === void 0 ? void 0 : _result$slice$match.length) || 0) + local.current.clipboardText.length;
@@ -294,6 +344,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } else if (/x/i.test(local.current.currentKey)) {
         cursor = cursor - +(Math.ceil(number.length / 3) !== Math.ceil((number.length + local.current.clipboardText.length) / 3));
       }
+
       result = number + decimal;
       cursor = Math.max(0, cursor);
       e.target.value = getThousandSeparator(number) + decimal;
@@ -301,15 +352,18 @@ const MoneyInput = /*#__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;
     } else {
       el.value = String(+result.replace(',', '.')) !== 'NaN' ? +result.replace(',', '.') : result;
     }
+
     !!onChange && onChange(el);
   };
+
   useEffect(() => {
     if (defaultValue !== undefined && defaultValue !== '') {
       const v = getValueWithDecimal(defaultValue.toString().replace('.', decimalSymbol));
@@ -327,11 +381,14 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.value = '';
       } else {
         const v = getValueWithDecimal(value.toString().replace('.', decimalSymbol));
+
         if (convertToWords && !decimalDigit && (disabled || readOnly)) {
           let valueConverted = getGlobal('helperInvalid');
+
           if (Number.isInteger(value)) {
             valueConverted = locale.get() === 'vi' ? num2WordsVi.convert(value) : num2WordsEn(value);
           }
+
           inputRef.current.value = parseValueWithFix(valueConverted);
         } else {
           inputRef.current.value = parseValueWithFix(thousandSeparator ? getThousandSeparator(v) : v);
@@ -350,7 +407,9 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const _instance = {
       getThousandSeparator: getThousandSeparator
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     currentRef.getThousandSeparator = getThousandSeparator;
     return currentRef;
@@ -361,8 +420,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: MoneyInputRoot,
     className: ['DGN-UI-Money-Input', className].join(' ').trim().replace(/\s+/g, ' '),
     ...props
-  }, !!label && jsx(Label, {
-    ...labelProps,
+  }, !!label && jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -388,11 +446,9 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDownHandler,
     onKeyUp: onKeyUp,
     onPaste: onPasteHandler
-  }), 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));
 }));
@@ -424,81 +480,114 @@ MoneyInput.defaultProps = {
 MoneyInput.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']),
+
   /** label for input */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
   /** 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,
+
   /** hints for input */
   placeholder: PropTypes.string,
+
   /** class of input */
   className: 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,
+
   /** allow enter number 0 */
   allowZero: PropTypes.bool,
+
   /** negative numbers are not allowed if true */
   disabledNegative: PropTypes.bool,
+
   /** allow thousand separator for number */
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** At least one character is required */
   required: PropTypes.bool,
+
   /** Convert money from number to words when readOnly || disabled */
   convertToWords: PropTypes.bool,
+
   /** Add a string to first of value when convertToWords. */
   prefix: PropTypes.string,
+
   /** Add a string to last of value when convertToWords. */
   suffix: PropTypes.string,
+
   /** props of input in MoneyInput component */
   inputProps: PropTypes.object,
+
   /** style inline of input in MoneyInput 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
+
+  /** 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, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
+
   /** on blur function */
   onBlur: PropTypes.func,
+
   /** on focus function */
   onFocus: PropTypes.func,
+
   /** inputRef of MoneyInput component */
   inputRef: PropTypes.any,
+
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
   labelProps: PropTypes.object,
+
   /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
   helperTextProps: PropTypes.object
 };