refactor(Slider): rename var & refactor Slider handlers

WTTJ · Aug 30, 2023 · 9fdb64f · 9fdb64f
1 parent 1522de6
commit 9fdb64f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/packages/Slider/src/Range.tsx b/packages/Slider/src/Range.tsx
@@ -37,9 +37,9 @@ const ensureMin = ({
   step: number
   min: number
 }) => {
-  let cleanValue = Math.min(value, toCompare - 1 * step)
-  cleanValue = Math.max(cleanValue, min)
-  return round(cleanValue, step)
+  let ensuredValue = Math.min(value, toCompare - 1 * step)
+  ensuredValue = Math.max(ensuredValue, min)
+  return round(ensuredValue, step)
 }
 
 /**
@@ -56,9 +56,9 @@ const ensureMax = ({
   step: number
   max: number
 }) => {
-  let cleanValue = Math.max(value, toCompare + 1 * step)
-  cleanValue = Math.min(cleanValue, max)
-  return round(cleanValue, step)
+  let ensuredValue = Math.max(value, toCompare + 1 * step)
+  ensuredValue = Math.min(ensuredValue, max)
+  return round(ensuredValue, step)
 }
 
 /**

diff --git a/packages/Slider/src/index.tsx b/packages/Slider/src/index.tsx
@@ -70,7 +70,7 @@ export const SliderComponent = forwardRef<'div', SliderProps>(
     }
 
     // Handle enter key
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleSliderKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
       e.preventDefault()
       let value = localValue
 
@@ -93,22 +93,19 @@ export const SliderComponent = forwardRef<'div', SliderProps>(
       setInputValue(value)
     }
 
-    const handleInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        const value = ensureMinMax(inputValue, min, max, step)
-        setInputValue(value)
-        setLocalValue(value)
-        onChange(value)
-      }
-    }
-
-    const handleBlur = () => {
+    const handleInput = () => {
       const value = ensureMinMax(inputValue, min, max, step)
       setInputValue(value)
       setLocalValue(value)
       onChange(value)
     }
 
+    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleInput()
+      }
+    }
+
     const getPercent = useCallback(
       (value: number) => Math.round(((value - min) / (max - min)) * 100),
       [min, max]
@@ -150,9 +147,9 @@ export const SliderComponent = forwardRef<'div', SliderProps>(
                 disabled={disabled}
                 max={max}
                 min={min}
-                onBlur={handleBlur}
+                onBlur={handleInput}
                 onChange={handleInputChange}
-                onKeyDown={handleInput}
+                onKeyDown={handleInputKeyDown}
                 size="sm"
                 type="number"
                 value={inputValue.toString()}
@@ -176,7 +173,7 @@ export const SliderComponent = forwardRef<'div', SliderProps>(
                 _setLocalValue(value)
                 setInputValue(value)
               }}
-              onKeyDown={handleKeyDown}
+              onKeyDown={handleSliderKeyDown}
               onMouseDown={() => {
                 tooltip && tooltipVisible === false && setTooltipVisible(true)
               }}
@@ -216,9 +213,9 @@ export const SliderComponent = forwardRef<'div', SliderProps>(
                 disabled={disabled}
                 max={max}
                 min={min}
-                onBlur={handleBlur}
+                onBlur={handleInput}
                 onChange={handleInputChange}
-                onKeyDown={handleInput}
+                onKeyDown={handleInputKeyDown}
                 size="sm"
                 type="number"
                 value={inputValue.toString()}