refactor: @rc-component/mini-decimal -> big.js

ant-design · Jan 29, 2024 · c311d83 · c311d83
1 parent 71c0465
commit c311d83
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -17,12 +17,12 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.4.2",
-    "@rc-component/mini-decimal": "^1.1.0",
     "@react-spring/web": "~9.6.1",
     "@use-gesture/react": "10.3.0",
     "ahooks": "^3.7.6",
     "antd-mobile-icons": "^0.3.0",
     "antd-mobile-v5-count": "^1.0.1",
+    "big.js": "^6.2.1",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
@@ -157,4 +157,4 @@
     "branch": "master",
     "platform": "github"
   }
-}
+}
diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
@@ -4,7 +4,7 @@ import { NativeProps, withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import Ticks from './ticks'
 import Marks, { SliderMarks } from './marks'
-import getMiniDecimal, { toFixed } from '@rc-component/mini-decimal'
+import Big from 'big.js'
 import Thumb from './thumb'
 import { mergeProps } from '../../utils/with-default-props'
 import { nearest } from '../../utils/nearest'
@@ -54,10 +54,10 @@ export const Slider: FC<SliderProps> = p => {
     return (props.range ? value : [props.min, value]) as any
   }
   function alignValue(value: number, decimalLen: number) {
-    const decimal = getMiniDecimal(value)
-    const fixedStr = toFixed(decimal.toString(), '.', decimalLen)
+    const decimal = Big(value)
+    const fixedStr = decimal.toFixed(decimalLen)
 
-    return getMiniDecimal(fixedStr).toNumber()
+    return Big(fixedStr).toNumber()
   }
 
   function reverseValue(value: [number, number]): SliderValue {
@@ -114,11 +114,7 @@ export const Slider: FC<SliderProps> = p => {
         .sort((a, b) => a - b)
     } else if (ticks) {
       const points: number[] = []
-      for (
-        let i = getMiniDecimal(min);
-        i.lessEquals(getMiniDecimal(max));
-        i = i.add(step)
-      ) {
+      for (let i = Big(min); i.lte(Big(max)); i = i.add(step)) {
         points.push(i.toNumber())
       }
       return points
@@ -138,8 +134,8 @@ export const Slider: FC<SliderProps> = p => {
     } else {
       // 使用 MiniDecimal 避免精度问题
       const cell = Math.round((newPosition - min) / step)
-      const nextVal = getMiniDecimal(cell).multi(step)
-      value = getMiniDecimal(min).add(nextVal.toString()).toNumber()
+      const nextVal = Big(cell).mul(step)
+      value = Big(min).add(nextVal).toNumber()
     }
     return value
   }

diff --git a/src/components/stepper/stepper.tsx b/src/components/stepper/stepper.tsx
@@ -7,10 +7,7 @@ import React, {
 } from 'react'
 import { MinusOutline, AddOutline } from 'antd-mobile-icons'
 import { useMergedState } from 'rc-util'
-import getMiniDecimal, {
-  toFixed,
-  type DecimalClass,
-} from '@rc-component/mini-decimal'
+import Big from 'big.js'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import Input, { InputProps, InputRef } from '../input'
@@ -129,13 +126,12 @@ export function InnerStepper<ValueType extends number | string>(
 
   // ========================== Parse / Format ==========================
   const fixedValue = (value: ValueType): string => {
-    const fixedValue =
-      digits !== undefined ? toFixed(value.toString(), '.', digits) : value
+    const fixedValue = digits !== undefined ? Big(value).toFixed(digits) : value
 
     return fixedValue.toString()
   }
 
-  const getValueAsType = (value: DecimalClass) =>
+  const getValueAsType = (value: Big) =>
     (stringMode ? value.toString() : value.toNumber()) as ValueType
 
   const parseValue = (text: string): string | null => {
@@ -145,8 +141,11 @@ export function InnerStepper<ValueType extends number | string>(
       return String(parser(text))
     }
 
-    const decimal = getMiniDecimal(text)
-    return decimal.isInvalidate() ? null : decimal.toString()
+    try {
+      return Big(text).toString()
+    } catch (e) {
+      return null
+    }
   }
 
   const formatValue = (value: ValueType | null): string => {
@@ -169,29 +168,37 @@ export function InnerStepper<ValueType extends number | string>(
   const [inputValue, setInputValue] = useState(() => formatValue(mergedValue))
 
   // >>>>> Value
-  function setValueWithCheck(nextValue: DecimalClass) {
-    if (nextValue.isNaN()) return
+  function setValueWithCheck(nextValue: Big) {
+    if (nextValue === null) return
 
     let target = nextValue
 
     // Put into range
     if (min !== undefined) {
-      const minDecimal = getMiniDecimal(min)
-      if (target.lessEquals(minDecimal)) {
-        target = minDecimal
+      try {
+        const minDecimal = Big(min)
+        if (target.lt(minDecimal)) {
+          target = minDecimal
+        }
+      } catch (e) {
+        console.error('min is not a valid number:', min)
       }
     }
 
     if (max !== undefined) {
-      const maxDecimal = getMiniDecimal(max)
-      if (maxDecimal.lessEquals(target)) {
-        target = maxDecimal
+      try {
+        const maxDecimal = Big(max)
+        if (target.gt(maxDecimal)) {
+          target = maxDecimal
+        }
+      } catch (e) {
+        console.error('max is not a valid number:', max)
       }
     }
 
     // Fix digits
     if (digits !== undefined) {
-      target = getMiniDecimal(fixedValue(getValueAsType(target)))
+      target = Big(fixedValue(getValueAsType(target)))
     }
 
     setMergedValue(getValueAsType(target))
@@ -209,7 +216,7 @@ export function InnerStepper<ValueType extends number | string>(
         setMergedValue(defaultValue)
       }
     } else {
-      setValueWithCheck(getMiniDecimal(valueStr))
+      setValueWithCheck(Big(valueStr))
     }
   }
 
@@ -245,14 +252,12 @@ export function InnerStepper<ValueType extends number | string>(
 
   // ============================ Operations ============================
   const handleOffset = (positive: boolean) => {
-    let stepValue = getMiniDecimal(step)
+    let stepValue = Big(step)
     if (!positive) {
-      stepValue = stepValue.negate()
+      stepValue = stepValue.neg()
     }
 
-    setValueWithCheck(
-      getMiniDecimal(mergedValue ?? 0).add(stepValue.toString())
-    )
+    setValueWithCheck(Big(mergedValue ?? 0).add(stepValue.toString()))
   }
 
   const handleMinus = () => {