1
This commit is contained in:
+65
@@ -0,0 +1,65 @@
|
||||
import { ValueType } from '@rc-component/mini-decimal';
|
||||
import * as React from 'react';
|
||||
import { type InputFocusOptions } from '@rc-component/util/lib/Dom/focus';
|
||||
export type { ValueType };
|
||||
export interface InputNumberRef extends HTMLInputElement {
|
||||
focus: (options?: InputFocusOptions) => void;
|
||||
blur: () => void;
|
||||
nativeElement: HTMLElement;
|
||||
}
|
||||
type SemanticName = 'root' | 'actions' | 'input' | 'action' | 'prefix' | 'suffix';
|
||||
export interface InputNumberProps<T extends ValueType = ValueType> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onInput' | 'onChange' | 'prefix' | 'suffix' | 'onMouseDown' | 'onClick' | 'onMouseUp' | 'onMouseLeave' | 'onMouseMove' | 'onMouseEnter' | 'onMouseOut'>, Pick<React.HTMLAttributes<HTMLDivElement>, 'onMouseDown' | 'onClick' | 'onMouseUp' | 'onMouseLeave' | 'onMouseMove' | 'onMouseEnter' | 'onMouseOut'> {
|
||||
disabled?: boolean;
|
||||
readOnly?: boolean;
|
||||
/** value will show as string */
|
||||
stringMode?: boolean;
|
||||
mode?: 'input' | 'spinner';
|
||||
defaultValue?: T;
|
||||
value?: T | null;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
min?: T;
|
||||
max?: T;
|
||||
step?: ValueType;
|
||||
tabIndex?: number;
|
||||
controls?: boolean;
|
||||
prefix?: React.ReactNode;
|
||||
suffix?: React.ReactNode;
|
||||
classNames?: Partial<Record<SemanticName, string>>;
|
||||
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
|
||||
upHandler?: React.ReactNode;
|
||||
downHandler?: React.ReactNode;
|
||||
keyboard?: boolean;
|
||||
changeOnWheel?: boolean;
|
||||
/** Parse display value to validate number */
|
||||
parser?: (displayValue: string | undefined) => T;
|
||||
/** Transform `value` to display value show in input */
|
||||
formatter?: (value: T | undefined, info: {
|
||||
userTyping: boolean;
|
||||
input: string;
|
||||
}) => string;
|
||||
/** Syntactic sugar of `formatter`. Config precision of display. */
|
||||
precision?: number;
|
||||
/** Syntactic sugar of `formatter`. Config decimal separator of display. */
|
||||
decimalSeparator?: string;
|
||||
onInput?: (text: string) => void;
|
||||
onChange?: (value: T | null) => void;
|
||||
onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
|
||||
onStep?: (value: T, info: {
|
||||
offset: ValueType;
|
||||
type: 'up' | 'down';
|
||||
emitter: 'handler' | 'keyboard' | 'wheel';
|
||||
}) => void;
|
||||
/**
|
||||
* Trigger change onBlur event.
|
||||
* If disabled, user must press enter or click handler to confirm the value update
|
||||
*/
|
||||
changeOnBlur?: boolean;
|
||||
}
|
||||
declare const InputNumber: (<T extends ValueType = ValueType>(props: React.PropsWithChildren<InputNumberProps<T>> & {
|
||||
ref?: React.Ref<HTMLInputElement>;
|
||||
}) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
export default InputNumber;
|
||||
+555
@@ -0,0 +1,555 @@
|
||||
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;
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
import * as React from 'react';
|
||||
export interface StepHandlerProps {
|
||||
prefixCls: string;
|
||||
action: 'up' | 'down';
|
||||
children?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
onStep: (up: boolean, emitter: 'handler' | 'keyboard' | 'wheel') => void;
|
||||
}
|
||||
export default function StepHandler({ prefixCls, action, children, disabled, className, style, onStep, }: StepHandlerProps): React.JSX.Element;
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
import raf from "@rc-component/util/es/raf";
|
||||
import { clsx } from 'clsx';
|
||||
import * as React from 'react';
|
||||
|
||||
/**
|
||||
* When click and hold on a button - the speed of auto changing the value.
|
||||
*/
|
||||
const STEP_INTERVAL = 200;
|
||||
|
||||
/**
|
||||
* When click and hold on a button - the delay before auto changing the value.
|
||||
*/
|
||||
const STEP_DELAY = 600;
|
||||
export default function StepHandler({
|
||||
prefixCls,
|
||||
action,
|
||||
children,
|
||||
disabled,
|
||||
className,
|
||||
style,
|
||||
onStep
|
||||
}) {
|
||||
// ======================== MISC ========================
|
||||
const isUpAction = action === 'up';
|
||||
|
||||
// ======================== Step ========================
|
||||
const stepTimeoutRef = React.useRef();
|
||||
const frameIds = React.useRef([]);
|
||||
const onStopStep = () => {
|
||||
clearTimeout(stepTimeoutRef.current);
|
||||
};
|
||||
|
||||
// We will interval update step when hold mouse down
|
||||
const onStepMouseDown = e => {
|
||||
e.preventDefault();
|
||||
onStopStep();
|
||||
onStep(isUpAction, 'handler');
|
||||
|
||||
// Loop step for interval
|
||||
function loopStep() {
|
||||
onStep(isUpAction, 'handler');
|
||||
stepTimeoutRef.current = setTimeout(loopStep, STEP_INTERVAL);
|
||||
}
|
||||
|
||||
// First time press will wait some time to trigger loop step update
|
||||
stepTimeoutRef.current = setTimeout(loopStep, STEP_DELAY);
|
||||
};
|
||||
React.useEffect(() => () => {
|
||||
onStopStep();
|
||||
frameIds.current.forEach(id => {
|
||||
raf.cancel(id);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// ======================= Render =======================
|
||||
const actionClassName = `${prefixCls}-action`;
|
||||
const mergedClassName = clsx(actionClassName, `${actionClassName}-${action}`, {
|
||||
[`${actionClassName}-${action}-disabled`]: disabled
|
||||
}, className);
|
||||
|
||||
// fix: https://github.com/ant-design/ant-design/issues/43088
|
||||
// In Safari, When we fire onmousedown and onmouseup events in quick succession,
|
||||
// there may be a problem that the onmouseup events are executed first,
|
||||
// resulting in a disordered program execution.
|
||||
// So, we need to use requestAnimationFrame to ensure that the onmouseup event is executed after the onmousedown event.
|
||||
const safeOnStopStep = () => frameIds.current.push(raf(onStopStep));
|
||||
return /*#__PURE__*/React.createElement("span", {
|
||||
unselectable: "on",
|
||||
role: "button",
|
||||
onMouseUp: safeOnStopStep,
|
||||
onMouseLeave: safeOnStopStep,
|
||||
onMouseDown: e => {
|
||||
onStepMouseDown(e);
|
||||
},
|
||||
"aria-label": isUpAction ? 'Increase Value' : 'Decrease Value',
|
||||
"aria-disabled": disabled,
|
||||
className: mergedClassName,
|
||||
style: style
|
||||
}, children || /*#__PURE__*/React.createElement("span", {
|
||||
unselectable: "on",
|
||||
className: `${prefixCls}-action-${action}-inner`
|
||||
}));
|
||||
}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
/**
|
||||
* Keep input cursor in the correct position if possible.
|
||||
* Is this necessary since we have `formatter` which may mass the content?
|
||||
*/
|
||||
export default function useCursor(input: HTMLInputElement, focused: boolean): [() => void, () => void];
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
import { useRef } from 'react';
|
||||
import warning from "@rc-component/util/es/warning";
|
||||
/**
|
||||
* Keep input cursor in the correct position if possible.
|
||||
* Is this necessary since we have `formatter` which may mass the content?
|
||||
*/
|
||||
export default function useCursor(input, focused) {
|
||||
const selectionRef = useRef(null);
|
||||
function recordCursor() {
|
||||
// Record position
|
||||
try {
|
||||
const {
|
||||
selectionStart: start,
|
||||
selectionEnd: end,
|
||||
value
|
||||
} = input;
|
||||
const beforeTxt = value.substring(0, start);
|
||||
const afterTxt = value.substring(end);
|
||||
selectionRef.current = {
|
||||
start,
|
||||
end,
|
||||
value,
|
||||
beforeTxt,
|
||||
afterTxt
|
||||
};
|
||||
} catch (e) {
|
||||
// Fix error in Chrome:
|
||||
// Failed to read the 'selectionStart' property from 'HTMLInputElement'
|
||||
// http://stackoverflow.com/q/21177489/3040605
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore logic:
|
||||
* 1. back string same
|
||||
* 2. start string same
|
||||
*/
|
||||
function restoreCursor() {
|
||||
if (input && selectionRef.current && focused) {
|
||||
try {
|
||||
const {
|
||||
value
|
||||
} = input;
|
||||
const {
|
||||
beforeTxt,
|
||||
afterTxt,
|
||||
start
|
||||
} = selectionRef.current;
|
||||
let startPos = value.length;
|
||||
if (value.startsWith(beforeTxt)) {
|
||||
startPos = beforeTxt.length;
|
||||
} else if (value.endsWith(afterTxt)) {
|
||||
startPos = value.length - selectionRef.current.afterTxt.length;
|
||||
} else {
|
||||
const beforeLastChar = beforeTxt[start - 1];
|
||||
const newIndex = value.indexOf(beforeLastChar, start - 1);
|
||||
if (newIndex !== -1) {
|
||||
startPos = newIndex + 1;
|
||||
}
|
||||
}
|
||||
input.setSelectionRange(startPos, startPos);
|
||||
} catch (e) {
|
||||
warning(false, `Something warning of cursor restore. Please fire issue about this: ${e.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
return [recordCursor, restoreCursor];
|
||||
}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
/**
|
||||
* Always trigger latest once when call multiple time
|
||||
*/
|
||||
declare const _default: () => (callback: () => void) => void;
|
||||
export default _default;
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
import { useRef, useEffect } from 'react';
|
||||
import raf from "@rc-component/util/es/raf";
|
||||
|
||||
/**
|
||||
* Always trigger latest once when call multiple time
|
||||
*/
|
||||
export default (() => {
|
||||
const idRef = useRef(0);
|
||||
const cleanUp = () => {
|
||||
raf.cancel(idRef.current);
|
||||
};
|
||||
useEffect(() => cleanUp, []);
|
||||
return callback => {
|
||||
cleanUp();
|
||||
idRef.current = raf(() => {
|
||||
callback();
|
||||
});
|
||||
};
|
||||
});
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { InputNumberProps, ValueType, InputNumberRef } from './InputNumber';
|
||||
import InputNumber from './InputNumber';
|
||||
export type { InputNumberProps, ValueType, InputNumberRef };
|
||||
export default InputNumber;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import InputNumber from "./InputNumber";
|
||||
export default InputNumber;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export declare function getDecupleSteps(step: string | number): string;
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { trimNumber, num2str } from '@rc-component/mini-decimal';
|
||||
export function getDecupleSteps(step) {
|
||||
const stepStr = typeof step === 'number' ? num2str(step) : trimNumber(step).fullStr;
|
||||
const hasPoint = stepStr.includes('.');
|
||||
if (!hasPoint) {
|
||||
return step + '0';
|
||||
}
|
||||
return trimNumber(stepStr.replace(/(\d)\.(\d)/g, '$1$2.')).fullStr;
|
||||
}
|
||||
Reference in New Issue
Block a user