diginet-core-ui 1.3.88 → 1.3.89

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

@@ -1,7 +1,5 @@
 /* eslint-disable no-redeclare */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -11,84 +9,68 @@ 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,
@@ -134,30 +116,26 @@ 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 */
 
+  /* 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);
@@ -167,48 +145,38 @@ 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(() => {
@@ -217,101 +185,84 @@ 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)) {
@@ -332,7 +283,6 @@ 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;
@@ -344,7 +294,6 @@ 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;
@@ -352,18 +301,15 @@ 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));
@@ -381,14 +327,11 @@ 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);
@@ -407,9 +350,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const _instance = {
       getThousandSeparator: getThousandSeparator
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     currentRef.getThousandSeparator = getThousandSeparator;
     return currentRef;
@@ -420,7 +361,8 @@ 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, {
@@ -446,9 +388,11 @@ 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));
 }));
@@ -480,114 +424,81 @@ 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
 };