Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(NumberInput): apply suggested improvements

Browse source
This commit is contained in:
Botzy 2025-02-12 16:00:41 +02:00
parent 10a36d2c4d
commit f678375633
1 changed files with 19 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/NumberInput/NumberInput.tsx
View file

@ -31,52 +31,38 @@ const NumberInput = forwardRef<HTMLInputElement, Props>(({ defaultValue, showBut
}
}, [props.onKeyDown, props.onSubmit]);
const updateValueAndNotify = (valueAsNumber: number) => {
setValue(valueAsNumber);
onUpdate?.(valueAsNumber);
};
const handleIncrease = () => {
const { max } = props;
if (max !== undefined) {
return setValue((prevVal) => {
const value = prevVal || 0;
return value + 1 > max ? max : value + 1;
});
if (props.max !== undefined) {
updateValueAndNotify(Math.min(props.max, (value || 0) + 1));
return;
}
setValue((prevVal) => {
const value = prevVal || 0;
return value + 1;
});
updateValueAndNotify((value || 0) + 1);
};
const handleDecrease = () => {
const { min } = props;
if (min !== undefined) {
return setValue((prevVal) => {
const value = prevVal || 0;
return value - 1 < min ? min : value - 1;
});
if (props.min !== undefined) {
updateValueAndNotify(Math.max(props.min, (value || 0) - 1));
return;
}
setValue((prevVal) => {
const value = prevVal || 0;
return value - 1;
});
updateValueAndNotify((value || 0) - 1);
};
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
const handleChange = ({ target: { valueAsNumber }}: ChangeEvent<HTMLInputElement>) => {
const min = props.min || 0;
let newValue = event.target.valueAsNumber;
if (newValue && newValue < min) {
newValue = min;
if (valueAsNumber && valueAsNumber < min) {
valueAsNumber = min;
}
if (props.max !== undefined && newValue && newValue > props.max) {
newValue = props.max;
if (props.max !== undefined && valueAsNumber && valueAsNumber > props.max) {
valueAsNumber = props.max;
}
setValue(newValue);
updateValueAndNotify(valueAsNumber);
};
useEffect(() => {
if (typeof onUpdate === 'function') {
onUpdate(value);
}
}, [value]);
return (
<div className={classnames(props.containerClassName, styles['number-input'])}>
{