feat: support selector (ant-design#46180)

* feat: support selector * fix: ts text * feat: md * feat: snap
wanghui2021 · Nov 30, 2023 · f5e0408 · f5e0408
1 parent e6bf2e2
commit f5e0408
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 3 deletions.
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -19514,6 +19514,9 @@ Array [
     <pre>
       Name Value:
     </pre>
+    <pre>
+      Custom Value: name:
+    </pre>
   </article>,
 ]
 `;

diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -8256,6 +8256,9 @@ Array [
     <pre>
       Name Value:
     </pre>
+    <pre>
+      Custom Value:
+    </pre>
   </article>,
 ]
 `;

diff --git a/components/form/demo/useWatch.tsx b/components/form/demo/useWatch.tsx
@@ -4,6 +4,8 @@ import { Form, Input, InputNumber, Typography } from 'antd';
 const Demo: React.FC = () => {
   const [form] = Form.useForm<{ name: string; age: number }>();
   const nameValue = Form.useWatch('name', form);
+  // The selector is static and does not support closures.
+  const customValue = Form.useWatch((values) => `name: ${values.name || ''}`, form);
 
   return (
     <>
@@ -18,6 +20,7 @@ const Demo: React.FC = () => {
 
       <Typography>
         <pre>Name Value: {nameValue}</pre>
+        <pre>Custom Value: {customValue}</pre>
       </Typography>
     </>
   );

diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
@@ -387,7 +387,9 @@ export default () => {
 
 ### Form.useWatch
 
-`type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance | WatchOptions): Value`
+`type Form.useWatch = (namePath: NamePath | (selector: (values: Store) => any), formInstance?: FormInstance | WatchOptions): Value`
+
+`5.12.0` add `selector`
 
 Watch the value of a field. You can use this to interact with other hooks like `useSWR` to reduce development costs:
 

diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
@@ -386,7 +386,9 @@ export default () => {
 
 ### Form.useWatch
 
-`type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance | WatchOptions): Value`
+`type Form.useWatch = (namePath: NamePath | (selector: (values: Store)) => any, formInstance?: FormInstance | WatchOptions): Value`
+
+`5.12.0` 新增 `selector`
 
 用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本：
 

diff --git a/package.json b/package.json
@@ -132,7 +132,7 @@
     "rc-dialog": "~9.3.4",
     "rc-drawer": "~6.5.2",
     "rc-dropdown": "~4.1.0",
-    "rc-field-form": "~1.40.0",
+    "rc-field-form": "~1.41.0",
     "rc-image": "~7.5.1",
     "rc-input": "~1.3.6",
     "rc-input-number": "~8.4.0",
-Original file line number
+Diff line change
@@ Expand Up / @@ -19514,6 +19514,9 @@ Array [ @@
         <pre>
           Name Value:
         </pre>
+        <pre>
+          Custom Value: name:
+        </pre>
       </article>,
     ]
     `;
@@ Expand Down @@