From ab0b227d91cd2d1e217bb8bf0dfc5d2e233f6e8b Mon Sep 17 00:00:00 2001 From: Mio <159118620+miownag@users.noreply.github.com> Date: Tue, 24 Sep 2024 11:09:12 +0800 Subject: [PATCH] docs(form): add customized form controls example (#3112) --- .../_example/customized-form-controls.tsx | 87 +++++++++++ src/form/form.md | 10 +- test/snap/__snapshots__/csr.test.jsx.snap | 141 ++++++++++++++++++ test/snap/__snapshots__/ssr.test.jsx.snap | 2 + 4 files changed, 238 insertions(+), 2 deletions(-) create mode 100644 src/form/_example/customized-form-controls.tsx diff --git a/src/form/_example/customized-form-controls.tsx b/src/form/_example/customized-form-controls.tsx new file mode 100644 index 0000000000..43a5340001 --- /dev/null +++ b/src/form/_example/customized-form-controls.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { Form, Input, Button, MessagePlugin, Space, Select } from 'tdesign-react'; +import type { FormProps } from 'tdesign-react'; + +interface ICourseSelect { + value?: { + type?: string; + name?: string; + }; + onChange?: (v: { type?: string; name?: string }) => void; +} + +const { FormItem } = Form; + +function CourseSelect(props: ICourseSelect) { + const { value, onChange } = props; + + return ( + + { + onChange?.({ + ...value, + name: v, + }); + }} + placeholder="请输入课程名称" + /> + + ); +} + +export default function BaseForm() { + const [form] = Form.useForm(); + + const onSubmit: FormProps['onSubmit'] = (e) => { + console.log(e); + if (e.validateResult === true) { + MessagePlugin.info('提交成功'); + } + }; + const setData = () => { + form.setFieldsValue?.({ + course: { + type: 'math', + name: '线性代数', + }, + }); + }; + + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/form/form.md b/src/form/form.md index 245d49d880..09fc055486 100644 --- a/src/form/form.md +++ b/src/form/form.md @@ -2,16 +2,22 @@ ### 复杂嵌套数据结构表单 -可给 `name` 传入数组整理成对象嵌套数据结构 +可给 `name` 传入数组整理成对象嵌套数据结构。 {{ nested-data }} ### 动态增减嵌套表单 -可使用 `Form.FormList` 组件创建动态表单 +可使用 `Form.FormList` 组件创建动态表单。 {{ form-list }} +### 自定义表单控件 + +可以使用 `Form.FormItem` 包裹自定义组件并在组件中接受 `value` 和 `onChange` 的入参，实现自定义表单控件。 + +{{ customized-form-controls }} + ## Hooks ### Form.useForm diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 0b6bd3dde1..6de91ccc07 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -42674,6 +42674,145 @@ exports[`csr snapshot test > csr test src/form/_example/custom-validator.tsx 1`] `; +exports[`csr snapshot test > csr test src/form/_example/customized-form-controls.tsx 1`] = ` +
+
+
+
+ + : +
+
+
+
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + +
+
+
+ +
+`; + exports[`csr snapshot test > csr test src/form/_example/disabled.tsx 1`] = `
ssr test src/form/_example/clear-validate.tsx 1`] = exports[`ssr snapshot test > ssr test src/form/_example/custom-validator.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/form/_example/customized-form-controls.tsx 1`] = `"
:
"`; + exports[`ssr snapshot test > ssr test src/form/_example/disabled.tsx 1`] = `"
:
:
:
:
:
:
:
:
:
:
:
请选择单张图片文件上传
提交
重置
"`; exports[`ssr snapshot test > ssr test src/form/_example/error-message.tsx 1`] = `"
这是用户名字段帮助说明
一句话介绍自己
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index c4d3d7d792..e721e63c7a 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -406,6 +406,8 @@ exports[`ssr snapshot test > ssr test src/form/_example/clear-validate.tsx 1`] = exports[`ssr snapshot test > ssr test src/form/_example/custom-validator.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/form/_example/customized-form-controls.tsx 1`] = `"
:
"`; + exports[`ssr snapshot test > ssr test src/form/_example/disabled.tsx 1`] = `"
:
:
:
:
:
:
:
:
:
:
:
请选择单张图片文件上传
提交
重置
"`; exports[`ssr snapshot test > ssr test src/form/_example/error-message.tsx 1`] = `"
这是用户名字段帮助说明
一句话介绍自己
"`;