feat: min/max

packages/core/src/components/number/index.jsx

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