diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,582 @@
+// /** @jsxRuntime classic */
+// /** @jsx jsx */
+// import { memo, useEffect, useRef, forwardRef, useState, 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';
+
+// const NumberInput = memo(
+//     forwardRef(
+//         (
+//             {
+//                 viewType,
+//                 required,
+//                 disabledNegative,
+//                 nonStyle,
+//                 decimalDigit: decimalDigitProp,
+//                 decimalSymbol,
+//                 label,
+//                 defaultValue,
+//                 value,
+//                 min,
+//                 max,
+//                 step,
+//                 placeholder,
+//                 startIcon,
+//                 endIcon,
+//                 valueTypeReturn,
+//                 autoFocus,
+//                 disabled,
+//                 readOnly,
+//                 refs,
+//                 inputRef,
+//                 inputProps,
+//                 inputStyle,
+//                 error,
+//                 format,
+//                 onChange,
+//                 onBlur,
+//                 onFocus,
+//                 onInput,
+//                 onKeyDown,
+//                 onKeyUp,
+//                 validates,
+//                 ...props
+//             },
+//             reference
+//         ) => {
+//             const ref = useRef(null);
+//             const local = useRef({
+//                 isSpecialSymbol: false,
+//                 isDeleteDecimalSymbol: false,
+//                 isPaste: false,
+//                 clipboardText: '',
+//             });
+//             if (!inputRef) {
+//                 inputRef = useRef(null);
+//             }
+//             const separatorSymbol = useRef(decimalSymbol === '.' ? ',' : '.');
+//             const updated = useRef(false);
+//             const [decimalDigit, setDecimalDigit] = useState(decimalDigitProp);
+//             const formatPattern = new RegExp(
+//                 `[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${
+//                     disabledNegative ? '' : '|-'
+//                 }`
+//             );
+
+//             /* Start styled */
+//             const NumberInputRoot = css`
+//                 display: block;
+//                 position: relative;
+//                 margin-bottom: 20px;
+//             `;
+//             /* End styled */
+
+//             /* Start handler */
+//             const getFormat = v => {
+//                 let [number, decimal = ''] = v.split(decimalSymbol);
+//                 let existDecimalSymbol = v.includes(decimalSymbol);
+//                 if (!number || String(+number) === 'NaN') return number;
+//                 if (typeof format === 'function') {
+//                     return format(number);
+//                 }
+//                 if (/^#.###$/.test(format)) {
+//                     return (
+//                         number.replace(/\B(?=(\d{3})+(?!\d))/g, separatorSymbol.current) +
+//                         (existDecimalSymbol ? decimalSymbol + decimal : '')
+//                     );
+//                 }
+//                 // #.##.###, #.### %%
+//                 const numberFormat = format.slice(0, format.lastIndexOf('#') + 1);
+//                 if (numberFormat) {
+//                     if (/^#.###$/.test(numberFormat)) {
+//                         number = number.replace(/\B(?=(\d{3})+(?!\d))/g, separatorSymbol.current);
+//                     }
+//                 }
+//                 const dFormat = format.match(/(\d+)?%+$/g)?.[0];
+//                 if (dFormat && decimal) {
+//                     const dDigit = +(dFormat.replaceAll('%', '') || dFormat.length);
+//                     if (dDigit === 0) {
+//                         existDecimalSymbol = false;
+//                         decimal = '';
+//                     } else if (decimal && decimal.length > dDigit) {
+//                         decimal = decimal.slice(0, dDigit);
+//                     }
+//                 }
+
+//                 return number + (existDecimalSymbol ? 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.current);
+//                 for (let i = 0; i < valueArr.length; i++) {
+//                     if (valueArr[i].length > 3) {
+//                         return true;
+//                     }
+//                 }
+//                 return false;
+//             };
+
+//             const onKeyDownHandler = e => {
+//                 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 (!formatPattern.test(key) && !(/a|x|c|v/i.test(key) && e.ctrlKey)) {
+//                     local.current.currentKey = key;
+//                     local.current.currentKeyCode = keyCode;
+//                     e.preventDefault();
+//                     return false;
+//                 }
+//                 if (/Arrow(Up|Down)/.test(key)) {
+//                     const number = +value
+//                         .replace(new RegExp(`[^0-9\\${decimalSymbol}\\-]`, 'g'), '')
+//                         .replace(decimalSymbol, '.');
+//                     const plusNumber = key === 'ArrowDown' ? -step : step;
+//                     let result = number + plusNumber;
+//                     if (result < min) {
+//                         result = min;
+//                     } else if (result > max) {
+//                         result = max;
+//                     }
+//                     if (result !== number) {
+//                         local.current.currentKey = key;
+//                         result = result.toString().replace('.', decimalSymbol);
+//                         inputRef.current.value = result;
+//                         onChangeHandler({ target: inputRef.current });
+//                     }
+//                     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))
+//                 ) {
+//                     e.preventDefault();
+//                     return false;
+//                 }
+//                 if (/x/i.test(key)) {
+//                     local.current.clipboardText = window.getSelection().toString();
+//                 } else if (/\d/.test(key)) {
+//                     local.current.currentValue = value;
+//                 }
+//                 local.current.isSpecialSymbol = false;
+//                 local.current.isDeleteDecimalSymbol = key === 'Backspace' && value[cursor - 1] === decimalSymbol;
+//                 local.current.currentKey = key;
+//                 if (onKeyDown) onKeyDown(e);
+//             };
+
+//             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;
+//                 let selectionText = window.getSelection().toString();
+//                 // Only includes number and decimalSymbol
+//                 if (
+//                     !pattern.test(local.current.clipboardText.replaceAll(separatorSymbol.current, '')) ||
+//                     // 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.replace(
+//                     new RegExp(`[^0-9\\${decimalSymbol}\\${separatorSymbol.current}\\-]`, 'g'),
+//                     ''
+//                 );
+//                 if (!value) {
+//                     e.value = null;
+//                     !!onChange && onChange(e);
+//                     e.value = undefined;
+//                     return;
+//                 }
+//                 let result = getValueWithMinMax(value);
+//                 if (/\d/.test(local.current.currentKey)) {
+//                     if (!!+result && +result < +getValueWithMinMax(value.replace(local.current.currentKey, ''))) {
+//                         e.target.value = local.current.currentValue;
+//                         return;
+//                     }
+//                 }
+//                 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.current, '').substr(0, decimalDigit);
+//                     }
+//                     decimal = (hasDecimal ? decimalSymbol : '') + decimal;
+//                     result = number + decimal;
+//                 }
+//                 if (
+//                     format &&
+//                     (formatPattern.test(local.current.currentKey) ||
+//                         local.current.isPaste ||
+//                         /x|Arrow(Up|Down)/i.test(local.current.currentKey))
+//                 ) {
+//                     const decimalSymbolIndex = result.indexOf(decimalSymbol);
+//                     number = number.replaceAll(separatorSymbol.current, '');
+//                     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.current) {
+//                             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.current}`, '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.current}`, 'g'))
+//                                 ?.length || 0);
+//                         local.current.isPaste = false;
+//                         local.current.clipboardText = '';
+//                     } else if (/x/i.test(local.current.currentKey)) {
+//                         cursor -= +(
+//                             Math.ceil(number.length / 3) !==
+//                             Math.ceil((number.length + local.current.clipboardText.length) / 3)
+//                         );
+//                     } else if (/Arrow(Up|Down)/i.test(local.current.currentKey)) {
+//                         cursor += Math.floor((number.length - 1) / 3);
+//                     }
+//                     result = number + decimal;
+//                     cursor = Math.max(0, cursor);
+//                     e.target.value = getFormat(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;
+//                     el.target.value = result;
+//                 } else {
+//                     const newResult = String(+result.replace(',', '.')) !== 'NaN' ? +result.replace(',', '.') : result;
+//                     el.value = newResult;
+//                     el.target.value = newResult;
+//                 }
+//                 !!onChange && onChange(el);
+//             };
+
+//             const onBlurHandler = e => {
+//                 const v = e.target.value.replace(new RegExp(`[^0-9\\${decimalSymbol}\\-]`, 'g'), '');
+//                 if (v !== getValueWithMinMax(v)) {
+//                     e.target.value = getValueWithMinMax(v);
+//                     onChangeHandler(e);
+//                 }
+//                 !!onBlur && onBlur(e);
+//             };
+
+//             const setValueIntoInput = v => {
+//                 if (v === null || v === undefined) {
+//                     inputRef.current.value = '';
+//                 } else {
+//                     v = v.toString().replace('.', decimalSymbol);
+//                     v = getValueWithDecimal(getValueWithMinMax(v));
+//                     inputRef.current.value = format ? getFormat(v) : v;
+//                 }
+//             };
+
+//             const getValueWithMinMax = v => {
+//                 v = v
+//                     .toString()
+//                     .replace(new RegExp(`[^0-9\\${decimalSymbol}\\-]`, 'g'), '')
+//                     .replace(decimalSymbol, '.');
+//                 if (+v < min) {
+//                     v = min.toString();
+//                 } else if (+v > max) {
+//                     v = max.toString();
+//                 }
+//                 return v.replace('.', decimalSymbol);
+//             };
+
+//             useEffect(() => {
+//                 if (format) {
+//                     if (typeof format === 'string') {
+//                         const numberFormat = format.slice(0, format.lastIndexOf('#') + 1);
+//                         if (/^#.###$/.test(numberFormat)) {
+//                             separatorSymbol.current = format[1];
+//                         }
+//                     }
+//                     if (updated.current) {
+//                         const v = inputRef.current.value;
+//                         if (v) {
+//                             setValueIntoInput(v);
+//                         }
+//                     }
+//                 }
+//             }, [format]);
+
+//             useEffect(() => {
+//                 !!refs && refs(ref);
+//                 if (defaultValue !== undefined && defaultValue !== '') {
+//                     setValueIntoInput(defaultValue);
+//                 }
+//                 // inputRef.current.addEventListener('focus', () => {
+//                 //     inputRef.current.addEventListener('keydown', onKeyDownHandler);
+//                 // }, {once: true});
+//             }, []);
+
+//             useEffect(() => {
+//                 if (placeholder !== undefined) {
+//                     inputRef.current.placeholder = placeholder;
+//                 }
+//             }, [placeholder]);
+
+//             useEffect(() => {
+//                 if (value !== undefined || updated.current) {
+//                     setValueIntoInput(value);
+//                 }
+//             }, [value]);
+
+//             useEffect(() => {
+//                 let dDigit = decimalDigitProp;
+//                 if (format && typeof format === 'string') {
+//                     const dFormat = format.match(/(\d+)?%+$/g)?.[0];
+//                     if (dFormat) {
+//                         dDigit = +(dFormat.replaceAll('%', '') || dFormat.length);
+//                     }
+//                 }
+//                 setDecimalDigit(dDigit);
+//                 if (typeof dDigit === 'number') {
+//                     const valueInput = inputRef.current.value;
+//                     if (valueInput) {
+//                         let [number, decimal] = valueInput.split(decimalSymbol);
+//                         if (decimal && decimal.length > dDigit) {
+//                             if (dDigit) {
+//                                 decimal = decimal.slice(0, dDigit);
+//                                 inputRef.current.value = number + decimalSymbol + decimal;
+//                             } else {
+//                                 inputRef.current.value = number;
+//                             }
+//                         }
+//                     }
+//                 }
+//                 if (!updated.current) {
+//                     updated.current = true;
+//                 }
+//             }, [decimalDigitProp, format]);
+//             /* End handler */
+
+//             const validateResult = validates && onValidate(value, validates, true);
+
+//             useImperativeHandle(reference, () => {
+//                 ref.current.getFormat = getFormat;
+//                 ref.current.setValueIntoInput = setValueIntoInput;
+//                 ref.current.getValueWithMinMax = getValueWithMinMax;
+//                 return ref.current;
+//             });
+
+//             return (
+//                 <div ref={ref} css={NumberInputRoot} {...props}>
+//                     {!!label && (
+//                         <Label required={required} disabled={disabled}>
+//                             {label}
+//                         </Label>
+//                     )}
+//                     <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}
+//                         onChange={onChangeHandler}
+//                         onBlur={onBlurHandler}
+//                         onFocus={onFocus}
+//                         onInput={onInput}
+//                         onKeyDown={onKeyDownHandler}
+//                         onKeyUp={onKeyUp}
+//                         onPaste={onPasteHandler}
+//                     />
+//                     {!!error && <HelperText disabled={disabled}>{error}</HelperText>}
+//                     {!error && validateResult && <HelperText disabled={disabled}>{validateResult}</HelperText>}
+//                 </div>
+//             );
+//         }
+//     )
+// );
+
+// NumberInput.defaultProps = {
+//     viewType: 'underlined',
+//     label: '',
+//     placeholder: '',
+//     error: '',
+//     startIcon: '',
+//     endIcon: '',
+//     decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+//     required: false,
+//     nonStyle: false,
+//     autoFocus: false,
+//     disabled: false,
+//     readOnly: false,
+//     disabledNegative: false,
+//     step: 1,
+//     min: -Infinity,
+//     max: Infinity,
+//     inputProps: {},
+// };
+
+// NumberInput.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']),
+//     /** 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,
+//     /**
+//      * the format to display value<br/>
+//      * * function: value => function(value)<br/>
+//      * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
+//      * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
+//      * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
+//      * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
+//      */
+//     format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+//     /** The function to get ref of NumberInput component */
+//     refs: PropTypes.func,
+//     /** 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 blur function */
+//     onBlur: PropTypes.func,
+//     /** on focus function */
+//     onFocus: PropTypes.func,
+//     /** inputRef of NumberInput component */
+//     inputRef: PropTypes.any,
+// };
+
+// export default NumberInput;

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

@@ -0,0 +1,53 @@
+import { NumberInput } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+
+const theme = useTheme();
+NumberInput.defaultProps = theme?.components?.NumberInput?.defaultProps || {};
+
+export default {
+    title: 'Components/NumberInput',
+    component: NumberInput,
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'NumberInput'} />
+            <NumberInput {...args} onKeyDown={null} onKeyUp={null} onInput={null} />
+        </>
+    );
+};
+
+export const Simple = Template.bind({});
+Simple.args = {
+    label: 'Number',
+    min: -Number.MAX_SAFE_INTEGER,
+    max: Number.MAX_SAFE_INTEGER,
+    thousandSeparator: true,
+};
+
+export const MinMax = Template.bind({});
+MinMax.args = {
+    label: 'Number',
+    min: 9,
+    max: 99,
+};
+
+export const AutoWidth = Template.bind({});
+AutoWidth.args = {
+    label: 'Number',
+    autoWidth: true,
+};
+
+// export const Format = Template.bind({});
+// Format.args = {
+//     label: 'Format',
+//     value: 456789,
+//     decimalDigit: 30,
+//     min: -Number.MAX_SAFE_INTEGER,
+//     max: Number.MAX_SAFE_INTEGER,
+//     format: '# ### %%',
+//     valueTypeReturn: 'string',
+// };