diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,531 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { HelperText, InputBase, Label } from 'components';
+import { getGlobal } from 'global';
+import PropTypes from 'prop-types';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cursorNotAllowed, displayBlock, positionRelative } from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, onValidate, refType as ref } from 'utils';
+
+const regexValidNumber = /[^0-9.,-]/g;
+const regexNumber = /[^0-9]/g;
+const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
+
+// Clamp number between two values with the following line:
+const clamp = (num, min, max) => Math.min(Math.max(num, min ?? -Infinity), max ?? Infinity) ?? '';
+
+const NumberInput = forwardRef((inProps, reference) => {
+    if (!reference) reference = useRef(null);
+
+    const theme = useTheme();
+
+    // props priority: `inProps` > `themeDefaultProps`
+    const props = useThemeProps({ props: inProps, name: 'NumberInput' });
+    const {
+        action = {},
+        autoFocus,
+        autoWidth,
+        className,
+        decimalDigit,
+        decimalSymbol: decimalSymbolProp,
+        defaultValue,
+        delayOnChange,
+        disabled,
+        disabledNegative,
+        endIcon,
+        error: errorProp,
+        fixedDecimalDigit,
+        helperTextProps,
+        inputProps,
+        inputRef: inputRefProp = useRef(null),
+        inputStyle,
+        label,
+        labelProps,
+        max: maxProp,
+        maxDigit,
+        min,
+        nonStyle,
+        onBlur,
+        onChange,
+        onFocus,
+        onInput,
+        onKeyDown,
+        onKeyUp,
+        placeholder,
+        readOnly,
+        required,
+        startIcon,
+        step,
+        style,
+        thousandSeparator,
+        validates,
+        value: valueProp,
+        viewType,
+    } = props;
+
+    let max = maxProp;
+    let thousandSymbol = thousandSeparator;
+    let decimalSymbol = decimalSymbolProp;
+    let valueProps = valueProp;
+
+    const pos = useRef(null);
+    const ref = useRef(null);
+    const globalRef = useRef({});
+    const inputRef = useRef(null);
+
+    const [value, setValue] = useState(defaultValue);
+    const [error, setError] = useState(errorProp);
+
+    const _NumberInputRootCSS = NumberInputRootCSS(theme);
+
+    // 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 = '';
+    }
+
+    // if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
+
+    /**
+     * Convert number to format money
+     * @param vl {number} - value
+     * @type {function}
+     * @return {string}
+     * @example 1200300.123 => 1,200,300.123
+     * @example 1200300,123 => 1.200.300,123
+     */
+    const parseNumberToMoney = useCallback(
+        (vl, isNumber) => {
+            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);
+            if (!number || isNaN(number)) return number;
+            else if (number.toString().substr(-1) !== '.') {
+                // number = clamp(number, min, max);
+            }
+
+            // number = Currency.format(number);
+            // if (!number) return number;
+
+            number = number?.toString().split('.');
+            if (number.length === 2 && !number[0]) {
+                number[0] = '0';
+                pos.current = 2;
+            }
+            number[0] = number?.[0].replace(regexThousandNumber, '$1' + thousandSymbol); // add a thousand symbol to number
+
+            if (!decimalDigit) number.length = 1;
+            else if (number[1]) number[1] = number[1]?.slice(0, decimalDigit || 0);
+
+            number = number.join(decimalSymbol);
+            // keep focus position
+            if (number?.indexOf(thousandSymbol) > -1 && selectionStart !== number.length + 1) {
+                pos.current = selectionStart + (number.toString().length - 1 === vl.toString().length ? 1 : 0);
+            }
+
+            return number;
+        },
+        [decimalSymbol, max, value]
+    );
+
+    /**
+     * Convert money to format number
+     * @param vl {string} - value
+     * @type {function}
+     * @return {number}
+     * @example 1,200,300.123 => 1200300.123
+     * @example 1.200.300,123 => 1200300.123
+     */
+    const convertMoneyToNumber = useCallback(
+        (vl, isNumber) => {
+            let number = vl?.toString().replace(regexValidNumber, ''); // allow number and , || . || -
+
+            // remove <thousandSymbol> and replace . to <decimalSymbol>
+            if (!isNumber)
+                number = number?.toString()?.replaceAll?.(thousandSymbol, '').replaceAll?.(decimalSymbol, '.');
+
+            return number;
+        },
+        [decimalSymbol]
+    );
+
+    const _onInput = useCallback(
+        (e, flag) => {
+            let valueT = 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 || '';
+            // globalRef.current.returnValue = returnValue || '';
+            e.target.value = globalRef.current.valueString = valueT || '';
+            globalRef.current.returnValue = returnValue || '';
+            onInput?.(e);
+            setValue(valueT);
+            if (flag) _onChange(e);
+        },
+        [min, max]
+    );
+
+    const _onBlur = useCallback(
+        e => {
+            let value = e.value ?? e.target.value;
+            if (fixedDecimalDigit) value = Number(value).toFixed(decimalDigit);
+
+            value = convertMoneyToNumber(value);
+            if (((min || min === 0) && Number(value) < min) || ((max || max === 0) && Number(value) > max)) {
+                const target = e.target;
+                target.value = clamp(value, min, max);
+                _onInput(
+                    {
+                        ...e,
+                        target,
+                    },
+                    true
+                );
+            }
+
+            onBlur && onBlur(e);
+        },
+        [min, max]
+    );
+
+    const _onKeyDown = e => {
+        const {
+            key,
+            keyCode,
+            ctrlKey,
+            metaKey,
+            shiftKey,
+            target: { value, selectionStart, selectionEnd },
+        } = e;
+
+        // 0-9 only
+        const isNumber =
+            (keyCode >= 48 && keyCode <= 57 && shiftKey === false) ||
+            (keyCode >= 96 && keyCode <= 105) ||
+            (keyCode === 231 && key >= '0' && key <= '9');
+
+        // character input type="number"
+        let allowKeyTypeNumber =
+            isNumber ||
+            keyCode === 8 || // key backspace
+            (keyCode > 34 && keyCode < 40) ||
+            key === thousandSymbol ||
+            key === decimalSymbol ||
+            ((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 === key;
+        const disabledDecimalSymbol = isDecimalSymbol && !decimalDigit;
+
+        // Accepts only one decimal separator
+        const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol;
+
+        // Disabled typing input when decimal digit to limit and focus is last
+        const disabledTypingDecimal =
+            value.split(decimalSymbol)?.[1]?.length >= decimalDigit && // total number after decimal symbol > {decimalDigit}
+            selectionStart === value.length; // the focus is at the end of the string
+        const target = e.target;
+        // key arrow up
+        if (keyCode === 38) {
+            target.value = Number(convertMoneyToNumber(value) || 0) + step;
+            _onInput({
+                ...e,
+                target,
+            });
+            e.preventDefault();
+        }
+        // key arrow down
+        else if (keyCode === 40) {
+            target.value = Number(convertMoneyToNumber(value) || 0) - step;
+            _onInput({
+                ...e,
+                target,
+            });
+            e.preventDefault();
+        }
+
+        // disabled negative
+        // const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-'));
+        const disabled180 = (keyCode === 189 || keyCode === 109) && (min === 0 || value.includes('-'));
+
+        // disabled max digit
+        const isMaxDigit =
+            maxDigit &&
+            value?.replace(regexNumber, '').length === maxDigit &&
+            (isNumber || key === thousandSymbol || key === decimalSymbol) &&
+            selectionStart === selectionEnd;
+
+        // Block event if include conditions
+        if (
+            decimalExists ||
+            removeDot ||
+            (isNumber && disabledTypingDecimal) ||
+            disabledDecimalSymbol ||
+            !allowKeyTypeNumber ||
+            disabled180 ||
+            isMaxDigit
+        ) {
+            e.preventDefault();
+        }
+        onKeyDown?.(e);
+    };
+
+    const _onFocus = e => {
+        const valueLength = inputRef.current?.value?.length || null;
+        inputRef.current.setSelectionRange(valueLength, valueLength);
+        pos.current = valueLength;
+        onFocus && onFocus(e);
+    };
+
+    const _onChange = e => {
+        const target = e.target;
+        target.value = globalRef.current.valueString;
+        target.valueString = globalRef.current.returnValue;
+        onChange({
+            ...e,
+            value: globalRef.current.value,
+            target,
+        });
+    };
+
+    const validateResult = validates && onValidate(Number(convertMoneyToNumber(value) || 0), validates, true);
+
+    useEffect(() => {
+        inputRef.current.value = value ?? null;
+
+        // keep focus position
+        if (pos.current) {
+            inputRef.current.setSelectionRange(pos.current, pos.current);
+            pos.current = null;
+        }
+        const vl = convertMoneyToNumber(value);
+        if ((min || min === 0) && vl < min) {
+            setError(getGlobal('validate')?.min + `: ${min}`);
+        } else if ((max || max === 0) && vl > max) {
+            setError(getGlobal('validate')?.max + `: ${max}`);
+        } else if (error) {
+            setError(errorProp);
+        }
+    }, [value]);
+
+    useEffect(() => {
+        // if (typeof valueProps !== 'undefined')
+        //     if (disabledNegative && Number(valueProps || 0) < 0) {
+        if (!isNaN(valueProps) || !isNaN(value)) {
+            if (min === 0 && 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?.toString().replace(regexValidNumber, ''), true));
+            setValue(parseNumberToMoney(valueProps?.toString().replace(regexValidNumber, ''), true));
+        }
+    }, [valueProps]);
+
+    useEffect(() => {
+        setError(errorProp);
+    }, [errorProp]);
+
+    useImperativeHandle(reference, () => {
+        const currentRef = ref.current || {};
+        currentRef.element = ref.current;
+        const _instance = {
+            ...action,
+        }; // methods
+        _instance.__proto__ = {}; // hidden methods
+        currentRef.instance = _instance;
+        return currentRef;
+    });
+
+    return (
+        <div
+            ref={ref}
+            css={_NumberInputRootCSS}
+            className={classNames('DGN-UI-NumberInput', className, disabled && 'disabled')}
+            style={style}
+        >
+            {label ? (
+                <Label required={required} disabled={disabled} {...labelProps}>
+                    {label}
+                </Label>
+            ) : null}
+            <InputBase
+                inputRef={refs => {
+                    if (!refs) return;
+                    inputRef.current = refs;
+                    typeof inputRefProp === 'function' ? inputRefProp(refs) : (inputRefProp.current = refs);
+                }}
+                viewType={viewType}
+                defaultValue={defaultValue}
+                value={value}
+                placeholder={placeholder}
+                autoFocus={autoFocus}
+                disabled={disabled}
+                readOnly={readOnly}
+                autoWidth={autoWidth}
+                status={error || validateResult ? 'danger' : 'default'}
+                inputProps={inputProps}
+                inputStyle={inputStyle}
+                startIcon={startIcon}
+                endIcon={endIcon}
+                onBlur={e => _onBlur(e)}
+                onFocus={e => _onFocus(e)}
+                onInput={_onInput}
+                onKeyDown={_onKeyDown}
+                onKeyUp={onKeyUp}
+                delayOnChange={delayOnChange}
+                nonStyle={nonStyle}
+                onChange={_onChange}
+            />
+            {(error || validateResult) && (
+                <HelperText {...helperTextProps} disabled={disabled}>
+                    {error || validateResult}
+                </HelperText>
+            )}
+        </div>
+    );
+});
+
+const NumberInputRootCSS = ({ spacing }) => css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-bottom: ${spacing([5])};
+    &.disabled {
+        ${cursorNotAllowed};
+    }
+`;
+
+// NumberInput.defaultProps = {
+//     autoFocus: false,
+//     className: '',
+//     decimalDigit: Infinity,
+//     decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+//     disabled: false,
+//     disabledNegative: false,
+//     endIcon: '',
+//     error: '',
+//     fixedDecimalDigit: false,
+//     label: '',
+//     max: Infinity,
+//     min: -Infinity,
+//     readOnly: false,
+//     required: false,
+//     startIcon: '',
+//     step: 1,
+//     style: {},
+//     thousandSeparator: false,
+//     viewType: 'underlined',
+// };
+
+NumberInput.propTypes = {
+    /** If `true`, the input element is focused during the first mount. */
+    autoFocus: PropTypes.bool,
+    /** If `true`, width of input will resize according to content. */
+    autoWidth: PropTypes.bool,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Number of decimal places allowed. */
+    decimalDigit: PropTypes.number,
+    /** Separator symbol. */
+    decimalSymbol: PropTypes.oneOf([',', '.']),
+    /** The default value. Use when the component is not controlled. */
+    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** The number of milliseconds to wait before call onChange. */
+    delayOnChange: PropTypes.number,
+    /** If `true`, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** If `true`, negative numbers are not allowed. */
+    disabledNegative: PropTypes.bool,
+    /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
+    endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** Error displayed below input. */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** If `true`, decimal digit is fixed. */
+    fixedDecimalDigit: PropTypes.bool,
+    /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
+    helperTextProps: PropTypes.object,
+    /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+    inputProps: PropTypes.object,
+    /** Pass a ref to the input element. */
+    inputRef: ref,
+    /** Style inline of input element. */
+    inputStyle: PropTypes.object,
+    /** The label of the component. */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /**  Props applied to the [Label](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) element. */
+    labelProps: PropTypes.object,
+    /** Maximum possible value. */
+    max: PropTypes.number,
+    /** Maximum value character (not including separator). */
+    maxDigit: PropTypes.number,
+    /** Minimal possible value. */
+    min: PropTypes.number,
+    /** Callback fired when the input is blurred. */
+    onBlur: PropTypes.func,
+    /** Callback fired when the value is changed. */
+    onChange: PropTypes.func,
+    /** Callback fired when the input is focused. */
+    onFocus: PropTypes.func,
+    /** Callback fired when input. */
+    onInput: PropTypes.func,
+    /** Callback fired when pressing a key. */
+    onKeyDown: PropTypes.func,
+    /** Callback fired when releases a key. */
+    onKeyUp: PropTypes.func,
+    /** The short hint displayed in the input before the user enters a value. */
+    placeholder: PropTypes.string,
+    /** If `true`, the component is readOnly. */
+    readOnly: PropTypes.bool,
+    /** If `true`, the input element is required. */
+    required: PropTypes.bool,
+    /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
+    startIcon: PropTypes.any,
+    /** Specify how much the values should increase/decrease upon clicking on up/down button. */
+    step: PropTypes.number,
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Thousand separator character. */
+    thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
+    /** 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]),
+    /** The value of the input element, required for a controlled component. */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** The variant to use. */
+    viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
+};
+
+export default NumberInput;