From bc9421543f4fb49774b4844b60dda39d19e52307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= Date: Sun, 16 Jul 2023 11:42:21 +0800 Subject: [PATCH] fix(form): Fix the issue of the ProFormMoney component causing duplicate currency symbols when using trigger=onBlur close https://github.com/ant-design/pro-components/issues/6779 --- packages/field/src/components/Digit/index.tsx | 7 +- packages/field/src/components/Money/index.tsx | 14 + .../form/src/components/FieldSet/index.tsx | 2 +- packages/form/src/demos/money.tsx | 1 + tests/form/__snapshots__/demo.test.ts.snap | 787 +++++------------- 5 files changed, 209 insertions(+), 602 deletions(-) diff --git a/packages/field/src/components/Digit/index.tsx b/packages/field/src/components/Digit/index.tsx index 00a93db17ed8..5dbd23e02004 100644 --- a/packages/field/src/components/Digit/index.tsx +++ b/packages/field/src/components/Digit/index.tsx @@ -42,7 +42,7 @@ const FieldDigit: ProFieldFC = ( ) { val = Number(val.toFixed(fieldProps.precision)); } - return fieldProps?.onChange?.(val); + return val; }, [fieldProps], ); @@ -72,8 +72,9 @@ const FieldDigit: ProFieldFC = ( ref={ref} min={0} placeholder={placeholderValue} - {...omit(fieldProps, ['onChange'])} - onChange={proxyChange} + {...omit(fieldProps, ['onChange', 'onBlur'])} + onChange={(e) => fieldProps?.onChange?.(proxyChange(e))} + onBlur={(e) => fieldProps?.onBlur?.(proxyChange(e.target.value))} /> ); if (renderFormItem) { diff --git a/packages/field/src/components/Money/index.tsx b/packages/field/src/components/Money/index.tsx index 5ad1fe4c4576..278af597c9e7 100644 --- a/packages/field/src/components/Money/index.tsx +++ b/packages/field/src/components/Money/index.tsx @@ -403,6 +403,20 @@ const FieldMoney: ProFieldFC = ( 'visible', 'open', ])} + onBlur={ + fieldProps.onBlur + ? (e) => { + let value = e.target.value; + if (moneySymbol && value) { + value = value.replace( + new RegExp(`\\${moneySymbol}\\s?|(,*)`, 'g'), + '', + ); + } + fieldProps.onBlur?.(value); + } + : undefined + } /> ); diff --git a/packages/form/src/components/FieldSet/index.tsx b/packages/form/src/components/FieldSet/index.tsx index b2b0777f7184..a4338c82ecd9 100644 --- a/packages/form/src/components/FieldSet/index.tsx +++ b/packages/form/src/components/FieldSet/index.tsx @@ -110,7 +110,7 @@ const FieldSet: React.FC = ({ const Wrapper: React.FC = useCallback( ({ children: dom }: { children?: React.ReactNode }) => ( - + {dom} ), diff --git a/packages/form/src/demos/money.tsx b/packages/form/src/demos/money.tsx index fd4c74ce6218..a8d41c3785f1 100644 --- a/packages/form/src/demos/money.tsx +++ b/packages/form/src/demos/money.tsx @@ -71,6 +71,7 @@ export default () => { locale="en-US" initialValue={22.22} min={0} + trigger="onBlur" />
1
-
2
-
3
@@ -6576,21 +6578,23 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c >
1
2
3
@@ -6673,33 +6677,35 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c >
1
-
2
-
3
@@ -8625,10 +8631,11 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/f >
1
-
2
-
3
@@ -13661,10 +13671,11 @@ exports[`form demos 📸 renders ./packages/form/src/components/Group/demos/list >
-
-
- -
+
- - - - - +
+
+
+
- - - - - +
+ + + + + + +
+
+
+
+
+
-
-
-
-
-
-
-
-
- -
-
- - - - - +
+
+
+
- - - - - + + + + + + + + +
+
+
+
-
-
-
- -
-
-
-
-
-
- - - - - 请选择 - -
- -
-
-
-
-
-
-
-
-
- -
-
-
-
- - - - - - - - - - -
-
-
-
-
-
-
-
- -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
+
+ + - -
-
-
- - 展开 - - - - -
-
-
-
-
-
-
-
+ + 重 置 + +
@@ -33479,10 +33068,11 @@ exports[`form demos 📸 renders ./packages/form/src/components/SchemaForm/demos >