139 lines
3.6 KiB
TypeScript
139 lines
3.6 KiB
TypeScript
import React, { useState, useCallback, useEffect } from 'react';
|
|
import IconButton from '../IconButton';
|
|
import Icon from '../Icon';
|
|
import './InputNumber.css';
|
|
import Label from '../Label';
|
|
import getMaxDigits from '../../utils/getMaxDigits';
|
|
|
|
/**
|
|
* React Number Input component'
|
|
* it has two props, value and onChange
|
|
* value is a number value
|
|
* onChange is a function that will be called when the number input is changed
|
|
* it can get changed by clicking on the up and down buttons
|
|
* or by typing a number in the input
|
|
*/
|
|
|
|
const sizesClasses = {
|
|
sm: 'w-[45px] h-[28px]',
|
|
lg: 'w-[206px] h-[35px]',
|
|
};
|
|
|
|
const InputNumber: React.FC<{
|
|
value: number;
|
|
onChange: (value: number) => void;
|
|
minValue?: number;
|
|
maxValue?: number;
|
|
step?: number;
|
|
size?: 'sm' | 'lg';
|
|
className?: string;
|
|
labelClassName?: string;
|
|
label?: string;
|
|
showAdjustmentArrows?: boolean;
|
|
}> = ({
|
|
value,
|
|
onChange,
|
|
step = 1,
|
|
className,
|
|
size = 'sm',
|
|
minValue = 0,
|
|
maxValue = 100,
|
|
labelClassName,
|
|
label,
|
|
showAdjustmentArrows = true,
|
|
}) => {
|
|
const [numberValue, setNumberValue] = useState(value);
|
|
|
|
const maxDigits = getMaxDigits(maxValue, step);
|
|
const inputWidth = Math.max(maxDigits * 10, showAdjustmentArrows ? 20 : 28);
|
|
const arrowWidth = showAdjustmentArrows ? 20 : 0;
|
|
const containerWidth = `${inputWidth + arrowWidth}px`;
|
|
|
|
useEffect(() => {
|
|
setNumberValue(value);
|
|
}, [value]);
|
|
|
|
const handleMinMax = useCallback(
|
|
(val: number) => Math.min(Math.max(val, minValue), maxValue),
|
|
[maxValue, minValue]
|
|
);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const inputValue = e.target.value;
|
|
|
|
// Allow negative sign, empty string, or single decimal point for user flexibility
|
|
if (inputValue === '-' || inputValue === '' || inputValue === '.') {
|
|
setNumberValue(inputValue);
|
|
return;
|
|
}
|
|
|
|
const number = Number(inputValue);
|
|
|
|
// Filter out invalid inputs like 'NaN'
|
|
if (!isNaN(number)) {
|
|
updateValue(number);
|
|
}
|
|
};
|
|
|
|
const updateValue = (val: number) => {
|
|
const newValue = handleMinMax(val);
|
|
setNumberValue(newValue);
|
|
onChange(newValue);
|
|
};
|
|
|
|
const increment = () => updateValue(numberValue + step);
|
|
const decrement = () => updateValue(numberValue - step);
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col">
|
|
{label && (
|
|
<Label
|
|
className={labelClassName}
|
|
text={label}
|
|
/>
|
|
)}
|
|
<div
|
|
className={`border-secondary-light flex items-center justify-center overflow-hidden rounded-md border-2 bg-black px-1 ${
|
|
sizesClasses[size]
|
|
} ${className || ''}`}
|
|
style={{ width: containerWidth }}
|
|
>
|
|
<div className="flex">
|
|
<input
|
|
type="number"
|
|
value={numberValue}
|
|
step={step}
|
|
onChange={handleChange}
|
|
className={'input-number w-full bg-black text-center text-[12px] text-white'}
|
|
style={{ width: inputWidth }}
|
|
/>
|
|
{showAdjustmentArrows && (
|
|
<div className="up-arrowsize flex flex-col items-center justify-around">
|
|
<ArrowButton
|
|
onClick={increment}
|
|
rotate
|
|
/>
|
|
<ArrowButton onClick={decrement} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ArrowButton = ({ onClick, rotate = false }: { onClick: () => void; rotate?: boolean }) => (
|
|
<IconButton
|
|
id="arrow-icon"
|
|
variant="text"
|
|
color="inherit"
|
|
size="initial"
|
|
className={`text-[#726f7e] ${rotate ? 'rotate-180 transform' : ''}`}
|
|
onClick={onClick}
|
|
>
|
|
<Icon name="ui-arrow-down" />
|
|
</IconButton>
|
|
);
|
|
|
|
export default InputNumber;
|