feat: min/max

This commit is contained in:
cha0s 2021-02-03 02:10:49 -06:00
parent fad35e4c2f
commit 311c5879c4

View File

@ -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,