Merge pull request #733 from illacloud/fix/slider-min-value

Fix/slider min value
illacloud · Jul 27, 2023 · a2b7cb9 · a2b7cb9
2 parents cad5352 + ead349c
commit a2b7cb9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 16 deletions.
diff --git a/packages/slider/src/style.ts b/packages/slider/src/style.ts
@@ -36,7 +36,6 @@ export function applyBgColor(
 export const applySliderWrapper = css`
   width: 100%;
   height: 40px;
-  padding: 0 8px;
   box-sizing: content-box;
   display: flex;
   align-items: center;
@@ -161,4 +160,4 @@ export function applyNumTick(
     transform: translateX(-50%);
     cursor: ${disabled ? "auto" : "pointer"};
   `
-}
+}
diff --git a/packages/slider/src/useOffset.ts b/packages/slider/src/useOffset.ts
@@ -1,7 +1,12 @@
 import { useState, useCallback, useMemo, useEffect } from "react"
 import { BarLocation } from "./content"
 import { IUseOffsetReturn } from "./interface"
-import { formatValue, verifyRightValue, verifyLeftValue } from "./utils"
+import {
+  formatValue,
+  verifyRightValue,
+  verifyLeftValue,
+  processNumber,
+} from "./utils"
 
 export const useOffset = (
   min: number,
@@ -15,8 +20,8 @@ export const useOffset = (
   const [partLength, setPartLength] = useState<number>(0)
   const [width, setWidth] = useState<number>(0)
   const cacheValue = useMemo(() => {
-    return formatValue(currentValue)
-  }, [currentValue])
+    return formatValue(currentValue, step)
+  }, [currentValue, step])
 
   const getOffsetValueFromState = useCallback(
     (rightVal: number, leftVal?: number) => {
@@ -81,7 +86,7 @@ export const useOffset = (
       val = tempVal
     }
     onSingleEnd(x, startValue)
-    setBarLength(Math.round(startValue / step) * partLength + val)
+    setBarLength(Math.round((startValue - min) / step) * partLength + val)
   }
 
   const onRangeDragging = (
@@ -158,9 +163,10 @@ export const useOffset = (
     } else {
       currentVal = val
     }
-    onAfterChange && onAfterChange(currentVal)
-    onChange && onChange(currentVal)
-    setCurrentValue(currentVal)
+    const formatVal = processNumber(currentVal, step)
+    onAfterChange && onAfterChange(formatVal)
+    onChange && onChange(formatVal)
+    setCurrentValue(formatVal)
     let [_, rightVal] = getOffsetValueFromState(currentVal)
     setRightOffset(rightVal)
   }
@@ -199,9 +205,10 @@ export const useOffset = (
         break
       }
     }
-    onAfterChange && onAfterChange(currentVal)
-    onChange && onChange(currentVal)
-    setCurrentValue(currentVal.join(","))
+    const formatVal = currentVal.map((v) => processNumber(v, step))
+    onAfterChange && onAfterChange(formatVal)
+    onChange && onChange(formatVal)
+    setCurrentValue(formatVal.join(","))
     let [leftVal, rightVal] = getOffsetValueFromState(
       currentVal[1],
       currentVal[0],
@@ -245,8 +252,9 @@ export const useOffset = (
         return offset
       }
     })
-    onAfterChange && onAfterChange(currentRangeVal)
-    setCurrentValue(currentRangeVal.join(","))
+    const formatVal = currentRangeVal.map((v) => processNumber(v, step))
+    onAfterChange && onAfterChange(formatVal)
+    setCurrentValue(formatVal.join(","))
   }
 
   const onClickTick = (v: number) => {

diff --git a/packages/slider/src/utils.ts b/packages/slider/src/utils.ts
@@ -1,9 +1,14 @@
 import { BarLocation } from "./content"
 
-export const formatValue = (val: string | number) => {
+export const formatValue = (val: string | number, step: number) => {
   if (typeof val !== "number" && !val) return 0
   if (typeof val === "number") return val
-  return Array.from(val.split(","), (v) => parseInt(v))
+  return Array.from(val.split(","), (v) => {
+    if (getDecimalDigitsOrZero(step) !== 0) {
+      return processNumber(parseFloat(v), step)
+    }
+    return parseInt(v)
+  })
 }
 
 export const getMarkBound = (
@@ -72,3 +77,20 @@ export const verifyValue = (value: number | number[]) => {
 }
 
 export const getSafeStep = (step: number) => (step && step > 0 ? step : 1)
+
+export const getDecimalDigitsOrZero = (num: number): number => {
+  if (Number.isInteger(num)) {
+    return 0
+  } else {
+    const numStr = num.toString()
+    const decimalIndex = numStr.indexOf(".")
+    return decimalIndex === -1 ? 0 : numStr.length - decimalIndex - 1
+  }
+}
+
+export const processNumber = (num: number, step: number): number => {
+  const decimalDigits = getDecimalDigitsOrZero(step)
+  return decimalDigits === 0
+    ? Math.floor(num)
+    : parseFloat(num.toFixed(decimalDigits))
+}