From a0a61a579f999360be6f0307e9046fd7316d5716 Mon Sep 17 00:00:00 2001
From: Gevorg Sekhleyan <vnd_gevorg@beaxy.com>
Date: Fri, 12 Mar 2021 15:26:03 +0400
Subject: [PATCH] fix: Round inputSlider value by step on blur

---
 src/InputSlider/index.js             | 41 +++++++++++++++++++---------
 src/InputSlider/inputSlider.story.js |  7 +++--
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/InputSlider/index.js b/src/InputSlider/index.js
index c547bac..b3c3ccd 100644
--- a/src/InputSlider/index.js
+++ b/src/InputSlider/index.js
@@ -68,6 +68,20 @@ export class InputSlider extends React.Component {
     }
   };
 
+  getStepValue = (value) => {
+    const { min, max, step } = this.props;
+
+    if (value && step) {
+      const newVal = +(Math.round(value / step)) * step;
+
+      if (!Number.isNaN(newVal) && newVal >= min && newVal <= max) {
+        return newVal;
+      }
+    }
+
+    return value;
+  };
+
   onBlur = (event) => {
     const { min, max, distance, inputProps: { onBlur, formatter = null }, separator, children } = this.props;
     const { minControl, maxControl, value } = this.state;
@@ -142,6 +156,9 @@ export class InputSlider extends React.Component {
       nextState.maxControl.value = max;
     }
 
+    nextState.minControl.value = this.getStepValue(nextState.minControl.value);
+    nextState.maxControl.value = this.getStepValue(nextState.maxControl.value);
+
     if (nextState.minControl.value < min) {
       nextState.minControl.value = min;
     }
@@ -150,22 +167,20 @@ export class InputSlider extends React.Component {
       nextState.minControl.value = max;
     }
 
-    if (nextState.maxControl) {
-      if (nextState.maxControl.value < min) {
-        nextState.maxControl.value = min;
-      }
+    if (nextState.maxControl.value < min) {
+      nextState.maxControl.value = min;
+    }
 
-      if (nextState.maxControl.value > max) {
-        nextState.maxControl.value = max;
-      }
+    if (nextState.maxControl.value > max) {
+      nextState.maxControl.value = max;
+    }
 
-      if (nextState.maxControl.value <= nextState.minControl.value) {
-        nextState.maxControl.value = nextState.minControl.value + distance;
-      }
+    if (nextState.maxControl.value <= nextState.minControl.value) {
+      nextState.maxControl.value = nextState.minControl.value + distance;
+    }
 
-      if (nextState.minControl.value >= nextState.maxControl.value) {
-        nextState.minControl.value = nextState.maxControl.value - distance;
-      }
+    if (nextState.minControl.value >= nextState.maxControl.value) {
+      nextState.minControl.value = nextState.maxControl.value - distance;
     }
 
     nextState.value = (nextState.maxControl && nextState.maxControl.value
diff --git a/src/InputSlider/inputSlider.story.js b/src/InputSlider/inputSlider.story.js
index c90ac23..6f9979b 100644
--- a/src/InputSlider/inputSlider.story.js
+++ b/src/InputSlider/inputSlider.story.js
@@ -18,7 +18,7 @@ import { InfoStoryConfig } from '../configs';
 storiesOf('Form controls/Input Slider', module)
   .add('Examples', () => {
     const store = new Store({
-      test1: 75,
+      test1: 7500,
       test2: 36,
       test3: 55,
       min1: 25,
@@ -44,8 +44,9 @@ storiesOf('Form controls/Input Slider', module)
               <Item style={{ width: '40%' }}>
                 <InputSlider
                   onChange={handler}
-                  min={5}
-                  step={5}
+                  min={500}
+                  step={100}
+                  max={10000}
                   hasError
                 >
                   <Control name='test1' value={state.test1} icon={<Icon name='tracker' />} />