diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,582 +0,0 @@
-// /** @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;