feat: min/max
This commit is contained in:
parent
fad35e4c2f
commit
311c5879c4
|
@ -7,16 +7,24 @@ import {
|
|||
|
||||
const Number = ({
|
||||
integer,
|
||||
max,
|
||||
min,
|
||||
onChange,
|
||||
step,
|
||||
value,
|
||||
}) => {
|
||||
const inputRef = useRef(null);
|
||||
const parser = integer ? (v) => parseInt(v, 10) : parseFloat;
|
||||
const changeClamped = (event, change) => {
|
||||
const clamped = Math.min(max, Math.max(min, change));
|
||||
if (value !== clamped) {
|
||||
onChange(event, clamped);
|
||||
}
|
||||
};
|
||||
const increment = (event, factor) => {
|
||||
const value = parser(inputRef.current.value);
|
||||
const incrementBy = event.shiftKey ? (step / 10) : step;
|
||||
onChange(event, parser(parser(value + (factor * incrementBy)).toPrecision(12)), event);
|
||||
changeClamped(event, parser(parser(value + (factor * incrementBy)).toPrecision(12)));
|
||||
};
|
||||
const onWheel = (event) => {
|
||||
event.preventDefault();
|
||||
|
@ -46,7 +54,7 @@ const Number = ({
|
|||
<input
|
||||
className="number__input"
|
||||
onChange={(event) => {
|
||||
onChange(event, parser(event.target.value));
|
||||
changeClamped(event, parser(event.target.value));
|
||||
}}
|
||||
// onWheel={onWheel}
|
||||
ref={inputRef}
|
||||
|
@ -79,6 +87,8 @@ const Number = ({
|
|||
|
||||
Number.defaultProps = {
|
||||
integer: false,
|
||||
max: Infinity,
|
||||
min: -Infinity,
|
||||
onChange: null,
|
||||
step: 1,
|
||||
};
|
||||
|
@ -87,6 +97,8 @@ Number.displayName = 'Number';
|
|||
|
||||
Number.propTypes = {
|
||||
integer: PropTypes.bool,
|
||||
max: PropTypes.number,
|
||||
min: PropTypes.number,
|
||||
onChange: PropTypes.func,
|
||||
step: PropTypes.number,
|
||||
value: PropTypes.number.isRequired,
|
||||
|
|
Loading…
Reference in New Issue
Block a user