@rc-component/input-number
Version:
React input-number component
555 lines (515 loc) • 18.8 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import getMiniDecimal, { getNumberPrecision, num2str, toFixed, validateNumber } from '@rc-component/mini-decimal';
import { useLayoutUpdateEffect } from "@rc-component/util/es/hooks/useLayoutEffect";
import proxyObject from "@rc-component/util/es/proxyObject";
import { clsx } from 'clsx';
import * as React from 'react';
import useCursor from "./hooks/useCursor";
import StepHandler from "./StepHandler";
import { getDecupleSteps } from "./utils/numberUtil";
import { useEvent } from '@rc-component/util';
import { triggerFocus } from "@rc-component/util/es/Dom/focus";
import useFrame from "./hooks/useFrame";
/**
* We support `stringMode` which need handle correct type when user call in onChange
* format max or min value
* 1. if isInvalid return null
* 2. if precision is undefined, return decimal
* 3. format with precision
* I. if max > 0, round down with precision. Example: max= 3.5, precision=0 afterFormat: 3
* II. if max < 0, round up with precision. Example: max= -3.5, precision=0 afterFormat: -4
* III. if min > 0, round up with precision. Example: min= 3.5, precision=0 afterFormat: 4
* IV. if min < 0, round down with precision. Example: max= -3.5, precision=0 afterFormat: -3
*/
const getDecimalValue = (stringMode, decimalValue) => {
if (stringMode || decimalValue.isEmpty()) {
return decimalValue.toString();
}
return decimalValue.toNumber();
};
const getDecimalIfValidate = value => {
const decimal = getMiniDecimal(value);
return decimal.isInvalidate() ? null : decimal;
};
const InputNumber = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
mode = 'input',
prefixCls = 'rc-input-number',
className,
style,
classNames,
styles,
min,
max,
step = 1,
defaultValue,
value,
disabled,
readOnly,
upHandler,
downHandler,
keyboard,
changeOnWheel = false,
controls = true,
prefix,
suffix,
stringMode,
parser,
formatter,
precision,
decimalSeparator,
onChange,
onInput,
onPressEnter,
onStep,
// Mouse Events
onMouseDown,
onClick,
onMouseUp,
onMouseLeave,
onMouseMove,
onMouseEnter,
onMouseOut,
changeOnBlur = true,
...restProps
} = props;
const [focus, setFocus] = React.useState(false);
const userTypingRef = React.useRef(false);
const compositionRef = React.useRef(false);
const shiftKeyRef = React.useRef(false);
// ============================= Refs =============================
const rootRef = React.useRef(null);
const inputRef = React.useRef(null);
React.useImperativeHandle(ref, () => proxyObject(inputRef.current, {
focus: option => {
triggerFocus(inputRef.current, option);
},
blur: () => {
inputRef.current?.blur();
},
nativeElement: rootRef.current
}));
// ============================ Value =============================
// Real value control
const [decimalValue, setDecimalValue] = React.useState(() => getMiniDecimal(value ?? defaultValue));
function setUncontrolledDecimalValue(newDecimal) {
if (value === undefined) {
setDecimalValue(newDecimal);
}
}
// ====================== Parser & Formatter ======================
/**
* `precision` is used for formatter & onChange.
* It will auto generate by `value` & `step`.
* But it will not block user typing.
*
* Note: Auto generate `precision` is used for legacy logic.
* We should remove this since we already support high precision with BigInt.
*
* @param number Provide which number should calculate precision
* @param userTyping Change by user typing
*/
const getPrecision = React.useCallback((numStr, userTyping) => {
if (userTyping) {
return undefined;
}
if (precision >= 0) {
return precision;
}
return Math.max(getNumberPrecision(numStr), getNumberPrecision(step));
}, [precision, step]);
// >>> Parser
const mergedParser = React.useCallback(num => {
const numStr = String(num);
if (parser) {
return parser(numStr);
}
let parsedStr = numStr;
if (decimalSeparator) {
parsedStr = parsedStr.replace(decimalSeparator, '.');
}
// [Legacy] We still support auto convert `$ 123,456` to `123456`
return parsedStr.replace(/[^\w.-]+/g, '');
}, [parser, decimalSeparator]);
// >>> Formatter
const inputValueRef = React.useRef('');
const mergedFormatter = React.useCallback((number, userTyping) => {
if (formatter) {
return formatter(number, {
userTyping,
input: String(inputValueRef.current)
});
}
let str = typeof number === 'number' ? num2str(number) : number;
// User typing will not auto format with precision directly
if (!userTyping) {
const mergedPrecision = getPrecision(str, userTyping);
if (validateNumber(str) && (decimalSeparator || mergedPrecision >= 0)) {
// Separator
const separatorStr = decimalSeparator || '.';
str = toFixed(str, separatorStr, mergedPrecision);
}
}
return str;
}, [formatter, getPrecision, decimalSeparator]);
// ========================== InputValue ==========================
/**
* Input text value control
*
* User can not update input content directly. It updates with follow rules by priority:
* 1. controlled `value` changed
* * [SPECIAL] Typing like `1.` should not immediately convert to `1`
* 2. User typing with format (not precision)
* 3. Blur or Enter trigger revalidate
*/
const [inputValue, setInternalInputValue] = React.useState(() => {
const initValue = defaultValue ?? value;
if (decimalValue.isInvalidate() && ['string', 'number'].includes(typeof initValue)) {
return Number.isNaN(initValue) ? '' : initValue;
}
return mergedFormatter(decimalValue.toString(), false);
});
inputValueRef.current = inputValue;
// Should always be string
function setInputValue(newValue, userTyping) {
setInternalInputValue(mergedFormatter(
// Invalidate number is sometime passed by external control, we should let it go
// Otherwise is controlled by internal interactive logic which check by userTyping
// You can ref 'show limited value when input is not focused' test for more info.
newValue.isInvalidate() ? newValue.toString(false) : newValue.toString(!userTyping), userTyping));
}
// >>> Max & Min limit
const maxDecimal = React.useMemo(() => getDecimalIfValidate(max), [max, precision]);
const minDecimal = React.useMemo(() => getDecimalIfValidate(min), [min, precision]);
const upDisabled = React.useMemo(() => {
if (!maxDecimal || !decimalValue || decimalValue.isInvalidate()) {
return false;
}
return maxDecimal.lessEquals(decimalValue);
}, [maxDecimal, decimalValue]);
const downDisabled = React.useMemo(() => {
if (!minDecimal || !decimalValue || decimalValue.isInvalidate()) {
return false;
}
return decimalValue.lessEquals(minDecimal);
}, [minDecimal, decimalValue]);
// Cursor controller
const [recordCursor, restoreCursor] = useCursor(inputRef.current, focus);
// ============================= Data =============================
/**
* Find target value closet within range.
* e.g. [11, 28]:
* 3 => 11
* 23 => 23
* 99 => 28
*/
const getRangeValue = target => {
// target > max
if (maxDecimal && !target.lessEquals(maxDecimal)) {
return maxDecimal;
}
// target < min
if (minDecimal && !minDecimal.lessEquals(target)) {
return minDecimal;
}
return null;
};
/**
* Check value is in [min, max] range
*/
const isInRange = target => !getRangeValue(target);
/**
* Trigger `onChange` if value validated and not equals of origin.
* Return the value that re-align in range.
*/
const triggerValueUpdate = (newValue, userTyping) => {
let updateValue = newValue;
let isRangeValidate = isInRange(updateValue) || updateValue.isEmpty();
// Skip align value when trigger value is empty.
// We just trigger onChange(null)
// This should not block user typing
if (!updateValue.isEmpty() && !userTyping) {
// Revert value in range if needed
updateValue = getRangeValue(updateValue) || updateValue;
isRangeValidate = true;
}
if (!readOnly && !disabled && isRangeValidate) {
const numStr = updateValue.toString();
const mergedPrecision = getPrecision(numStr, userTyping);
if (mergedPrecision >= 0) {
updateValue = getMiniDecimal(toFixed(numStr, '.', mergedPrecision));
// When to fixed. The value may out of min & max range.
// 4 in [0, 3.8] => 3.8 => 4 (toFixed)
if (!isInRange(updateValue)) {
updateValue = getMiniDecimal(toFixed(numStr, '.', mergedPrecision, true));
}
}
// Trigger event
if (!updateValue.equals(decimalValue)) {
setUncontrolledDecimalValue(updateValue);
onChange?.(updateValue.isEmpty() ? null : getDecimalValue(stringMode, updateValue));
// Reformat input if value is not controlled
if (value === undefined) {
setInputValue(updateValue, userTyping);
}
}
return updateValue;
}
return decimalValue;
};
// ========================== User Input ==========================
const onNextPromise = useFrame();
// >>> Collect input value
const collectInputValue = inputStr => {
recordCursor();
// Update inputValue in case input can not parse as number
// Refresh ref value immediately since it may used by formatter
inputValueRef.current = inputStr;
setInternalInputValue(inputStr);
// Parse number
if (!compositionRef.current) {
const finalValue = mergedParser(inputStr);
const finalDecimal = getMiniDecimal(finalValue);
if (!finalDecimal.isNaN()) {
triggerValueUpdate(finalDecimal, true);
}
}
// Trigger onInput later to let user customize value if they want to handle something after onChange
onInput?.(inputStr);
// optimize for chinese input experience
// https://github.com/ant-design/ant-design/issues/8196
onNextPromise(() => {
let nextInputStr = inputStr;
if (!parser) {
nextInputStr = inputStr.replace(/。/g, '.');
}
if (nextInputStr !== inputStr) {
collectInputValue(nextInputStr);
}
});
};
// >>> Composition
const onCompositionStart = () => {
compositionRef.current = true;
};
const onCompositionEnd = () => {
compositionRef.current = false;
collectInputValue(inputRef.current.value);
};
// >>> Input
const onInternalInput = e => {
collectInputValue(e.target.value);
};
// ============================= Step =============================
const onInternalStep = useEvent((up, emitter) => {
// Ignore step since out of range
if (up && upDisabled || !up && downDisabled) {
return;
}
// Clear typing status since it may be caused by up & down key.
// We should sync with input value.
userTypingRef.current = false;
let stepDecimal = getMiniDecimal(shiftKeyRef.current ? getDecupleSteps(step) : step);
if (!up) {
stepDecimal = stepDecimal.negate();
}
const target = (decimalValue || getMiniDecimal(0)).add(stepDecimal.toString());
const updatedValue = triggerValueUpdate(target, false);
onStep?.(getDecimalValue(stringMode, updatedValue), {
offset: shiftKeyRef.current ? getDecupleSteps(step) : step,
type: up ? 'up' : 'down',
emitter
});
inputRef.current?.focus();
});
// ============================ Flush =============================
/**
* Flush current input content to trigger value change & re-formatter input if needed.
* This will always flush input value for update.
* If it's invalidate, will fallback to last validate value.
*/
const flushInputValue = userTyping => {
const parsedValue = getMiniDecimal(mergedParser(inputValue));
let formatValue;
if (!parsedValue.isNaN()) {
// Only validate value or empty value can be re-fill to inputValue
// Reassign the formatValue within ranged of trigger control
formatValue = triggerValueUpdate(parsedValue, userTyping);
} else {
formatValue = triggerValueUpdate(decimalValue, userTyping);
}
if (value !== undefined) {
// Reset back with controlled value first
setInputValue(decimalValue, false);
} else if (!formatValue.isNaN()) {
// Reset input back since no validate value
setInputValue(formatValue, false);
}
};
// Solve the issue of the event triggering sequence when entering numbers in chinese input (Safari)
const onBeforeInput = () => {
userTypingRef.current = true;
};
const onKeyDown = event => {
const {
key,
shiftKey
} = event;
userTypingRef.current = true;
shiftKeyRef.current = shiftKey;
if (key === 'Enter') {
if (!compositionRef.current) {
userTypingRef.current = false;
}
flushInputValue(false);
onPressEnter?.(event);
}
if (keyboard === false) {
return;
}
// Do step
if (!compositionRef.current && ['Up', 'ArrowUp', 'Down', 'ArrowDown'].includes(key)) {
onInternalStep(key === 'Up' || key === 'ArrowUp', 'keyboard');
event.preventDefault();
}
};
const onKeyUp = () => {
userTypingRef.current = false;
shiftKeyRef.current = false;
};
React.useEffect(() => {
if (changeOnWheel && focus) {
const onWheel = event => {
// moving mouse wheel rises wheel event with deltaY < 0
// scroll value grows from top to bottom, as screen Y coordinate
onInternalStep(event.deltaY < 0, 'wheel');
event.preventDefault();
};
const input = inputRef.current;
if (input) {
// React onWheel is passive and we can't preventDefault() in it.
// That's why we should subscribe with DOM listener
// https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listenev
input.addEventListener('wheel', onWheel, {
passive: false
});
return () => input.removeEventListener('wheel', onWheel);
}
}
});
// >>> Focus & Blur
const onBlur = () => {
if (changeOnBlur) {
flushInputValue(false);
}
setFocus(false);
userTypingRef.current = false;
};
// >>> Mouse events
const onInternalMouseDown = event => {
if (inputRef.current && event.target !== inputRef.current) {
inputRef.current.focus();
event.preventDefault();
}
onMouseDown?.(event);
};
// ========================== Controlled ==========================
// Input by precision & formatter
useLayoutUpdateEffect(() => {
if (!decimalValue.isInvalidate()) {
setInputValue(decimalValue, false);
}
}, [precision, formatter]);
// Input by value
useLayoutUpdateEffect(() => {
const newValue = getMiniDecimal(value);
setDecimalValue(newValue);
const currentParsedValue = getMiniDecimal(mergedParser(inputValue));
// When user typing from `1.2` to `1.`, we should not convert to `1` immediately.
// But let it go if user set `formatter`
if (!newValue.equals(currentParsedValue) || !userTypingRef.current || formatter) {
// Update value as effect
setInputValue(newValue, userTypingRef.current);
}
}, [value]);
// ============================ Cursor ============================
useLayoutUpdateEffect(() => {
if (formatter) {
restoreCursor();
}
}, [inputValue]);
// ============================ Render ============================
// >>>>>> Handler
const sharedHandlerProps = {
prefixCls,
onStep: onInternalStep,
className: classNames?.action,
style: styles?.action
};
const upNode = /*#__PURE__*/React.createElement(StepHandler, _extends({}, sharedHandlerProps, {
action: "up",
disabled: upDisabled
}), upHandler);
const downNode = /*#__PURE__*/React.createElement(StepHandler, _extends({}, sharedHandlerProps, {
action: "down",
disabled: downDisabled
}), downHandler);
// >>>>>> Render
return /*#__PURE__*/React.createElement("div", {
ref: rootRef,
className: clsx(prefixCls, `${prefixCls}-mode-${mode}`, className, classNames?.root, {
[`${prefixCls}-focused`]: focus,
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-readonly`]: readOnly,
[`${prefixCls}-not-a-number`]: decimalValue.isNaN(),
[`${prefixCls}-out-of-range`]: !decimalValue.isInvalidate() && !isInRange(decimalValue)
}),
style: {
...styles?.root,
...style
},
onMouseDown: onInternalMouseDown,
onMouseUp: onMouseUp,
onMouseLeave: onMouseLeave,
onMouseMove: onMouseMove,
onMouseEnter: onMouseEnter,
onMouseOut: onMouseOut,
onClick: onClick,
onFocus: () => {
setFocus(true);
},
onBlur: onBlur,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onCompositionStart: onCompositionStart,
onCompositionEnd: onCompositionEnd,
onBeforeInput: onBeforeInput
}, mode === 'spinner' && controls && downNode, prefix !== undefined && /*#__PURE__*/React.createElement("div", {
className: clsx(`${prefixCls}-prefix`, classNames?.prefix),
style: styles?.prefix
}, prefix), /*#__PURE__*/React.createElement("input", _extends({
autoComplete: "off",
role: "spinbutton",
"aria-valuemin": min,
"aria-valuemax": max,
"aria-valuenow": decimalValue.isInvalidate() ? null : decimalValue.toString(),
step: step,
ref: inputRef,
className: clsx(`${prefixCls}-input`, classNames?.input),
style: styles?.input,
value: inputValue,
onChange: onInternalInput,
disabled: disabled,
readOnly: readOnly
}, restProps)), suffix !== undefined && /*#__PURE__*/React.createElement("div", {
className: clsx(`${prefixCls}-suffix`, classNames?.suffix),
style: styles?.suffix
}, suffix), mode === 'spinner' && controls && upNode, mode === 'input' && controls && /*#__PURE__*/React.createElement("div", {
className: clsx(`${prefixCls}-actions`, classNames?.actions),
style: styles?.actions
}, upNode, downNode));
});
if (process.env.NODE_ENV !== 'production') {
InputNumber.displayName = 'InputNumber';
}
export default InputNumber;