diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,622 @@
+/* eslint-disable no-redeclare */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { HelperText, InputBase, Label } from 'components';
+import { getGlobal } from 'global';
+import locale from 'locale';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
+import { displayBlock, positionRelative } from 'styles/general';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { onValidate } from 'utils';
+
+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 = '',
+                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 = '',
+                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 = '',
+                a = Math.floor(t / 1e6),
+                t = t % 1e6;
+            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 {
+        convert: function (r) {
+            let ty;
+            if (0 === r) return t[0];
+            let n = '',
+                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
+    // 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 !
+    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 = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'MoneyInput' });
+        const {
+            allowZero,
+            autoFocus,
+            className,
+            convertToWords,
+            decimalDigit,
+            disabled,
+            disabledNegative,
+            endIcon,
+            error,
+            helperTextProps,
+            inputProps,
+            inputRef = useRef(null),
+            inputStyle,
+            label,
+            labelProps,
+            multiline,
+            nonStyle,
+            onBlur,
+            onChange,
+            onFocus,
+            onInput,
+            onKeyDown,
+            onKeyUp,
+            placeholder,
+            prefix,
+            readOnly,
+            required,
+            startIcon,
+            suffix,
+            thousandSeparator,
+            validates,
+            valueTypeReturn,
+            viewType,
+            defaultValue,
+            value,
+            ...other
+        } = props;
+
+        const ref = useRef(null);
+        const local = useRef({
+            isSpecialSymbol: false,
+            isDeleteDecimalSymbol: false,
+            isPaste: false,
+            clipboardText: '',
+        });
+
+        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;
+            // 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);
+                        return number + decimalSymbol + decimal;
+                    } else {
+                        return number;
+                    }
+                }
+            }
+            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(() => {
+                        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)) ||
+                (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 => {
+            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.clipboardText.match(new RegExp(decimalSymbol, 'g'))?.length;
+            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 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)) {
+                    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) {
+                        cursor--;
+                    }
+                } else if (local.current.isPaste) {
+                    const simpleNumber = number + decimal;
+                    const cursorBefore = cursor - local.current.clipboardText.length;
+                    const cursorAfter =
+                        cursorBefore -
+                        (result.slice(0, cursorBefore).match(new RegExp(`\\${separatorSymbol}`, 'g'))?.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.clipboardText.match(new RegExp(`\\${separatorSymbol}`, 'g'))?.length || 0);
+                    local.current.isPaste = false;
+                    local.current.clipboardText = '';
+                } 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;
+                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);
+        };
+
+        useEffect(() => {
+            if (defaultValue !== undefined && defaultValue !== '') {
+                const v = getValueWithDecimal(defaultValue.toString().replace('.', decimalSymbol));
+                inputRef.current.value = thousandSeparator ? getThousandSeparator(v) : v;
+            }
+        }, []);
+
+        useEffect(() => {
+            if (placeholder !== undefined) {
+                inputRef.current.placeholder = placeholder;
+            }
+        }, [placeholder]);
+
+        useEffect(() => {
+            if (!isNaN(value)) {
+                if (value === null) {
+                    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);
+                    }
+                }
+            }
+        }, [disabled, readOnly, value, prefix, suffix]);
+
+        useEffect(() => {
+            const valueInput = inputRef.current.value;
+            inputRef.current.value = getValueWithDecimal(valueInput);
+        }, [decimalDigit]);
+        /* End handler */
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            const _instance = {
+                getThousandSeparator: getThousandSeparator,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            currentRef.getThousandSeparator = getThousandSeparator;
+            return currentRef;
+        });
+
+        const validateResult = validates && onValidate(value, validates, true);
+
+        return (
+            <div
+                ref={ref}
+                css={MoneyInputRoot}
+                className={['DGN-UI-Money-Input', className].join(' ').trim().replace(/\s+/g, ' ')}
+                {...other}
+            >
+                {!!label && (
+                    <Label {...labelProps} required={required} disabled={disabled}>
+                        {label}
+                    </Label>
+                )}
+                <InputBase
+                    inputRef={inputRef}
+                    viewType={viewType}
+                    defaultValue={defaultValue}
+                    value={value}
+                    placeholder={placeholder}
+                    autoFocus={autoFocus}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    multiline={multiline}
+                    status={isError || validateResult ? 'danger' : 'default'}
+                    inputProps={inputProps}
+                    inputStyle={inputStyle}
+                    startIcon={startIcon}
+                    endIcon={endIcon}
+                    nonStyle={nonStyle}
+                    onChange={onChangeHandler}
+                    onBlur={onBlur}
+                    onFocus={onFocus}
+                    onInput={onInput}
+                    onKeyDown={onKeyDownHandler}
+                    onKeyUp={onKeyUp}
+                    onPaste={onPasteHandler}
+                />
+                {isError && (
+                    <HelperText {...helperTextProps} disabled={disabled}>
+                        {error}
+                    </HelperText>
+                )}
+                {!isError && validateResult && (
+                    <HelperText {...helperTextProps} disabled={disabled}>
+                        {validateResult}
+                    </HelperText>
+                )}
+            </div>
+        );
+    })
+);
+
+const MoneyInputRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-bottom: 20px;
+`;
+
+// MoneyInput.defaultProps = {
+//     viewType: 'underlined',
+//     valueTypeReturn: 'number',
+//     label: '',
+//     className: '',
+//     error: '',
+//     startIcon: '',
+//     endIcon: '',
+//     required: false,
+//     nonStyle: false,
+//     autoFocus: false,
+//     disabled: false,
+//     readOnly: false,
+//     multiline: false,
+//     allowZero: false,
+//     disabledNegative: false,
+//     thousandSeparator: false,
+//     inputProps: {},
+//     convertToWords: false,
+// };
+
+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
+     */
+    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/>
+     * }
+     */
+    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,
+};
+
+export default MoneyInput;

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

@@ -0,0 +1,42 @@
+import { MoneyInput } from 'components';
+import React from 'react';
+import { ImportComp } from 'components/others/import/index.stories';
+import { useTheme } from 'theme';
+
+const theme = useTheme();
+MoneyInput.defaultProps = theme?.components?.MoneyInput?.defaultProps || {};
+
+export default {
+    title: 'Components/MoneyInput',
+    component: MoneyInput,
+};
+
+const Template = args => (
+    <>
+        <ImportComp components={'MoneyInput'} />
+        <MoneyInput {...args} />
+    </>
+);
+
+export const Simple = Template.bind({});
+Simple.args = {
+    label: 'Money',
+    validates: [{ name: 'min', compareValue: 100, message: 'Giá trị phải lớn hơn 100' }, { max: 1000 }, 'required'],
+};
+
+export const ThousandSeparator = Template.bind({});
+ThousandSeparator.args = {
+    label: 'Thousand Separator',
+    thousandSeparator: true,
+    value: 5465465465,
+    decimalDigit: 30,
+    onChange: e => console.log(e.value, e.target.value),
+};
+
+export const ConvertToWords = Template.bind({});
+ConvertToWords.args = {
+    label: 'Money',
+    value: 2500000,
+    convertToWords: true,
+    disabled: true,
+};