From bccec4385a421a7ed697291fe2c13381236f9027 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Tue, 10 Oct 2023 11:54:46 +0800
Subject: [PATCH] fix: percent value invalid (#2782)

* fix: percent value invalid

* fix: useMemo
---
 .../schema-component/antd/percent/Percent.tsx | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/percent/Percent.tsx b/packages/core/client/src/schema-component/antd/percent/Percent.tsx
index 96c152d54..9758dbc2b 100644
--- a/packages/core/client/src/schema-component/antd/percent/Percent.tsx
+++ b/packages/core/client/src/schema-component/antd/percent/Percent.tsx
@@ -1,29 +1,36 @@
 import { connect, mapReadPretty } from '@formily/react';
+import { isNumberLike } from '@formily/shared';
 import { InputNumber } from 'antd';
 import * as math from 'mathjs';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ReadPretty } from '../input-number/ReadPretty';
 
+const toValue = (value: any, callback: (v: number) => number) => {
+  if (isNumberLike(value)) {
+    return math.round(callback(value), 9);
+  }
+  return null;
+};
+
 export const Percent = connect(
   (props) => {
     const { value, onChange } = props;
-
+    const v = useMemo(() => toValue(value, (v) => v * 100), [value]);
     return (
       <InputNumber
         {...props}
         addonAfter="%"
-        defaultValue={value ? math.round(value * 100, 9) : null}
-        formatter={(v: any) => (v ? math.round(v * 100, 9) : null)}
+        value={v}
         onChange={(v: any) => {
           if (onChange) {
-            const val = v ? math.round(v / 100, 9) : 0;
-            onChange(val);
+            onChange(toValue(v, (v) => v / 100));
           }
         }}
       />
     );
   },
   mapReadPretty((props) => {
-    return <ReadPretty {...props} value={props.value ? math.round(props.value * 100, 9) : null} />;
+    const value = useMemo(() => toValue(props.value, (v) => v * 100), [props.value]);
+    return <ReadPretty {...props} value={value} />;
   }),
 );