You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

295 lines
9.9 KiB
JavaScript

'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
import * as React from 'react';
import { unstable_useForkRef as useForkRef, unstable_useId as useId, unstable_useControlled as useControlled } from '@mui/utils';
import { extractEventHandlers } from '../utils/extractEventHandlers';
import { useFormControlContext } from '../FormControl';
import { clampStepwise, isNumber } from './utils';
const STEP_KEYS = ['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'];
const SUPPORTED_KEYS = [...STEP_KEYS, 'Home', 'End'];
export function getInputValueAsString(v) {
return v ? String(v.trim()) : String(v);
}
/**
*
* Demos:
*
* - [Number Input](https://mui.com/base-ui/react-number-input/#hook)
*
* API:
*
* - [useNumberInput API](https://mui.com/base-ui/react-number-input/hooks-api/#use-number-input)
*/
export function useNumberInput(parameters) {
const {
min,
max,
step,
shiftMultiplier = 10,
defaultValue: defaultValueProp,
disabled: disabledProp = false,
error: errorProp = false,
onBlur,
onInputChange,
onFocus,
onChange,
required: requiredProp = false,
readOnly: readOnlyProp = false,
value: valueProp,
inputRef: inputRefProp,
inputId: inputIdProp
} = parameters;
// TODO: make it work with FormControl
const formControlContext = useFormControlContext();
const {
current: isControlled
} = React.useRef(valueProp != null);
const handleInputRefWarning = React.useCallback(instance => {
if (process.env.NODE_ENV !== 'production') {
if (instance && instance.nodeName !== 'INPUT' && !instance.focus) {
console.error(['MUI: You have provided a `slots.input` to the input component', 'that does not correctly handle the `ref` prop.', 'Make sure the `ref` prop is called with a HTMLInputElement.'].join('\n'));
}
}
}, []);
const inputRef = React.useRef(null);
const handleInputRef = useForkRef(inputRef, inputRefProp, handleInputRefWarning);
const inputId = useId(inputIdProp);
const [focused, setFocused] = React.useState(false);
// the "final" value
const [value, setValue] = useControlled({
controlled: valueProp,
default: defaultValueProp,
name: 'NumberInput'
});
// the (potentially) dirty or invalid input value
const [dirtyValue, setDirtyValue] = React.useState(value ? String(value) : undefined);
React.useEffect(() => {
if (!formControlContext && disabledProp && focused) {
setFocused(false);
onBlur?.();
}
}, [formControlContext, disabledProp, focused, onBlur]);
const createHandleFocus = otherHandlers => event => {
otherHandlers.onFocus?.(event);
if (event.defaultMuiPrevented || event.defaultPrevented) {
return;
}
if (formControlContext && formControlContext.onFocus) {
formControlContext?.onFocus?.();
}
setFocused(true);
};
const handleValueChange = () => (event, val) => {
let newValue;
if (val === undefined) {
newValue = val;
setDirtyValue('');
} else {
newValue = clampStepwise(val, min, max, step);
setDirtyValue(String(newValue));
}
setValue(newValue);
if (isNumber(newValue)) {
onChange?.(event, newValue);
} else {
onChange?.(event, undefined);
}
};
const createHandleInputChange = otherHandlers => event => {
if (!isControlled && event.target === null) {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Expected valid input target. Did you use a custom \`slots.input\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` : _formatMuiErrorMessage(17));
}
formControlContext?.onChange?.(event);
otherHandlers.onInputChange?.(event);
if (event.defaultMuiPrevented || event.defaultPrevented) {
return;
}
// TODO: event.currentTarget.value will be passed straight into the InputChange action
const val = getInputValueAsString(event.currentTarget.value);
if (val === '' || val === '-') {
setDirtyValue(val);
setValue(undefined);
}
if (val.match(/^-?\d+?$/)) {
setDirtyValue(val);
setValue(parseInt(val, 10));
}
};
const createHandleBlur = otherHandlers => event => {
otherHandlers.onBlur?.(event);
if (event.defaultMuiPrevented || event.defaultPrevented) {
return;
}
// TODO: event.currentTarget.value will be passed straight into the Blur action, or just pass inputValue from state
const val = getInputValueAsString(event.currentTarget.value);
if (val === '' || val === '-') {
handleValueChange()(event, undefined);
} else {
handleValueChange()(event, parseInt(val, 10));
}
if (formControlContext && formControlContext.onBlur) {
formControlContext.onBlur();
}
setFocused(false);
};
const createHandleClick = otherHandlers => event => {
otherHandlers.onClick?.(event);
if (event.defaultMuiPrevented || event.defaultPrevented) {
return;
}
if (inputRef.current && event.currentTarget === event.target) {
inputRef.current.focus();
}
};
const handleStep = direction => event => {
let newValue;
if (isNumber(value)) {
const multiplier = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? shiftMultiplier : 1;
newValue = {
up: value + (step ?? 1) * multiplier,
down: value - (step ?? 1) * multiplier
}[direction];
} else {
// no value
newValue = {
up: min ?? 0,
down: max ?? 0
}[direction];
}
handleValueChange()(event, newValue);
};
const createHandleKeyDown = otherHandlers => event => {
otherHandlers.onKeyDown?.(event);
if (event.defaultMuiPrevented || event.defaultPrevented) {
return;
}
if (event.defaultPrevented) {
return;
}
if (SUPPORTED_KEYS.includes(event.key)) {
event.preventDefault();
}
if (STEP_KEYS.includes(event.key)) {
const direction = {
ArrowUp: 'up',
ArrowDown: 'down',
PageUp: 'up',
PageDown: 'down'
}[event.key];
handleStep(direction)(event);
}
if (event.key === 'Home' && isNumber(max)) {
handleValueChange()(event, max);
}
if (event.key === 'End' && isNumber(min)) {
handleValueChange()(event, min);
}
};
const getRootProps = (externalProps = {}) => {
const propsEventHandlers = extractEventHandlers(parameters, [
// these are handled by the input slot
'onBlur', 'onInputChange', 'onFocus', 'onChange']);
const externalEventHandlers = _extends({}, propsEventHandlers, extractEventHandlers(externalProps));
return _extends({}, externalProps, externalEventHandlers, {
onClick: createHandleClick(externalEventHandlers)
});
};
const getInputProps = (externalProps = {}) => {
const propsEventHandlers = {
onBlur,
onFocus,
// onChange from normal props is the custom onChange so we ignore it here
onChange: onInputChange
};
const externalEventHandlers = _extends({}, propsEventHandlers, extractEventHandlers(externalProps, [
// onClick is handled by the root slot
'onClick'
// do not ignore 'onInputChange', we want slotProps.input.onInputChange to enter the DOM and throw
]));
const mergedEventHandlers = _extends({}, externalEventHandlers, {
onFocus: createHandleFocus(externalEventHandlers),
// slotProps.onChange is renamed to onInputChange and passed to createHandleInputChange
onChange: createHandleInputChange(_extends({}, externalEventHandlers, {
onInputChange: externalEventHandlers.onChange
})),
onBlur: createHandleBlur(externalEventHandlers),
onKeyDown: createHandleKeyDown(externalEventHandlers)
});
const displayValue = (focused ? dirtyValue : value) ?? '';
// get rid of slotProps.input.onInputChange before returning to prevent it from entering the DOM
// if it was passed, it will be in mergedEventHandlers and throw
delete externalProps.onInputChange;
return _extends({
type: 'text',
id: inputId,
'aria-invalid': errorProp || undefined,
defaultValue: undefined,
value: displayValue,
'aria-valuenow': displayValue,
'aria-valuetext': String(displayValue),
'aria-valuemin': min,
'aria-valuemax': max,
autoComplete: 'off',
autoCorrect: 'off',
spellCheck: 'false',
required: requiredProp,
readOnly: readOnlyProp,
'aria-disabled': disabledProp,
disabled: disabledProp
}, externalProps, {
ref: handleInputRef
}, mergedEventHandlers);
};
const handleStepperButtonMouseDown = event => {
event.preventDefault();
if (inputRef.current) {
inputRef.current.focus();
}
};
const stepperButtonCommonProps = {
'aria-controls': inputId,
tabIndex: -1
};
const isIncrementDisabled = disabledProp || (isNumber(value) ? value >= (max ?? Number.MAX_SAFE_INTEGER) : false);
const getIncrementButtonProps = (externalProps = {}) => {
return _extends({}, externalProps, stepperButtonCommonProps, {
disabled: isIncrementDisabled,
'aria-disabled': isIncrementDisabled,
onMouseDown: handleStepperButtonMouseDown,
onClick: handleStep('up')
});
};
const isDecrementDisabled = disabledProp || (isNumber(value) ? value <= (min ?? Number.MIN_SAFE_INTEGER) : false);
const getDecrementButtonProps = (externalProps = {}) => {
return _extends({}, externalProps, stepperButtonCommonProps, {
disabled: isDecrementDisabled,
'aria-disabled': isDecrementDisabled,
onMouseDown: handleStepperButtonMouseDown,
onClick: handleStep('down')
});
};
return {
disabled: disabledProp,
error: errorProp,
focused,
formControlContext,
getInputProps,
getIncrementButtonProps,
getDecrementButtonProps,
getRootProps,
required: requiredProp,
value: focused ? dirtyValue : value,
isIncrementDisabled,
isDecrementDisabled,
inputValue: dirtyValue
};
}