Allow to enter value increased by step in Number input (#40)

* Allow to enter value increased by step in number input * Prepare components release 2.0.0 * Fix decimal steps for Number input
VolkovLabs · May 15, 2024 · 4039d82 · 4039d82
1 parent 0af2000
commit 4039d82
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 7 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.0.1 (2024-05-15)
+
+### Features
+
+- Allow to enter value increased by step in Number input (#40)
+
 ## 1.10.0 (2024-05-02)
 
 ### Features

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -86,5 +86,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "1.10.0"
+  "version": "2.0.1"
 }
diff --git a/packages/components/src/components/Form/Form.story.tsx b/packages/components/src/components/Form/Form.story.tsx
@@ -27,6 +27,8 @@ const meta = {
     const Preview = () => {
       const form = useFormBuilder<{
         opacity: number;
+        step: number;
+        decimal: number;
         normalize: [number, number];
         custom: string;
         color: string;
@@ -47,6 +49,44 @@ const meta = {
               grow: true,
             },
           })
+          .addSlider({
+            path: 'step',
+            defaultValue: 1,
+            step: 2,
+            min: 1,
+            max: 9,
+            marks: {
+              1: '1',
+              3: '3',
+              5: '5',
+              7: '7',
+              9: '9',
+            },
+            label: 'Step',
+            description: 'Move by 2 step',
+            view: {
+              grow: true,
+            },
+          })
+          .addSlider({
+            path: 'decimal',
+            defaultValue: 1,
+            step: 0.01,
+            min: 1,
+            max: 9,
+            marks: {
+              1: '1',
+              3: '3',
+              5: '5',
+              7: '7',
+              9: '9',
+            },
+            label: 'Decimal step',
+            description: 'Move by 0.01 step',
+            view: {
+              grow: true,
+            },
+          })
           .addRangeSlider({
             path: 'normalize',
             defaultValue: [0, 255],

diff --git a/packages/components/src/components/NumberInput/NumberInput.test.tsx b/packages/components/src/components/NumberInput/NumberInput.test.tsx
@@ -44,19 +44,19 @@ describe('Number Input', () => {
   it('Should allow to enter decimal value', () => {
     const onChange = jest.fn();
 
-    render(getComponent({ min: -1, max: 1, step: 0.3, onChange }));
+    render(getComponent({ min: -1, max: 1.1, step: 0.3, onChange }));
 
-    fireEvent.change(selectors.field(), { target: { value: '0.9' } });
+    fireEvent.change(selectors.field(), { target: { value: '0.8' } });
     fireEvent.blur(selectors.field());
 
-    expect(onChange).toHaveBeenCalledWith(0.9);
+    expect(onChange).toHaveBeenCalledWith(0.8);
 
     onChange.mockClear();
 
     fireEvent.change(selectors.field(), { target: { value: '0.7' } });
     fireEvent.blur(selectors.field());
 
-    expect(onChange).toHaveBeenCalledWith(0);
+    expect(onChange).toHaveBeenCalledWith(0.8);
   });
 
   it('Should validate value on NaN and use min value', () => {
@@ -70,6 +70,28 @@ describe('Number Input', () => {
     expect(onChange).toHaveBeenCalledWith(15);
   });
 
+  it('Should allow to increase value by step', () => {
+    const onChange = jest.fn();
+
+    render(getComponent({ min: 1, max: 9, onChange, value: 1, step: 2 }));
+
+    fireEvent.change(selectors.field(), { target: { value: '3' } });
+    fireEvent.blur(selectors.field());
+
+    expect(onChange).toHaveBeenCalledWith(3);
+  });
+
+  it('Should ceil value if increased more than step', () => {
+    const onChange = jest.fn();
+
+    render(getComponent({ min: 1, max: 9, onChange, value: 1, step: 2 }));
+
+    fireEvent.change(selectors.field(), { target: { value: '2' } });
+    fireEvent.blur(selectors.field());
+
+    expect(onChange).toHaveBeenCalledWith(3);
+  });
+
   it('Should set min value', () => {
     const onChange = jest.fn();
 

diff --git a/packages/components/src/components/NumberInput/NumberInput.tsx b/packages/components/src/components/NumberInput/NumberInput.tsx
@@ -73,8 +73,26 @@ export const NumberInput: React.FC<Props> = ({ value, onChange, min, max, step,
       v = 0;
     }
 
-    if (step !== undefined && (v * 1000) % (step * 1000) !== 0) {
-      v = 0;
+    /**
+     * Round value by step
+     */
+    if (step !== undefined) {
+      let availableValue = step * 1000;
+
+      if (min !== undefined) {
+        availableValue = min * 1000;
+      }
+
+      /**
+       * Find nearest available value
+       * Next available value will be taken if entered value between allowed range
+       * 7 will be used for 6 entered value with 5,7 available values
+       */
+      while (availableValue < v * 1000) {
+        availableValue += step * 1000;
+      }
+
+      v = availableValue / 1000;
     }
 
     if (max !== undefined && v > max) {