From c311d835105a7b12faedb54be6694b4e41630ae8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B9=A4=E4=BB=99?= Date: Mon, 29 Jan 2024 17:52:28 +0800 Subject: [PATCH] refactor: @rc-component/mini-decimal -> big.js --- package.json | 4 +-- src/components/slider/slider.tsx | 18 ++++------ src/components/stepper/stepper.tsx | 53 ++++++++++++++++-------------- 3 files changed, 38 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 0881191c7b..7078cbda42 100644 --- 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" } -} +} \ No newline at end of file diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx index f4dadecb0c..9286f78efc 100644 --- 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 = 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 = 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 = 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 index 8c1b0f1a03..c7486871b9 100644 --- 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( // ========================== 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( 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( 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( setMergedValue(defaultValue) } } else { - setValueWithCheck(getMiniDecimal(valueStr)) + setValueWithCheck(Big(valueStr)) } } @@ -245,14 +252,12 @@ export function InnerStepper( // ============================ 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 = () => {