Merge pull request #950 from oceanbase/dengfuping-dev

chore(design): Add form demo for Modal and Card

packages/design/src/card/demo/with-form.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button, Card, Form, Input } from '@oceanbase/design';
+
+export default () => {
+  const [form] = Form.useForm();
+  const { validateFields } = form;
+
+  const handleSubmit = () => {
+    validateFields().then(values => {
+      const { name, age } = values;
+      alert(`name: ${name}; age: ${age}`);
+    });
+  };
+
+  return (
+    <Card>
+      <Form layout="vertical" form={form} preserve={false}>
+        <Form.Item
+          name="name"
+          label="Name"
+          rules={[
+            {
+              required: true,
+              message: 'Name is required',
+            },
+          ]}
+        >
+          <Input placeholder="name" />
+        </Form.Item>
+        <Form.Item
+          name="age"
+          label="Age"
+          rules={[
+            {
+              required: true,
+              message: 'Age is required',
+            },
+          ]}
+        >
+          <Input placeholder="age" />
+        </Form.Item>
+        <Form.Item style={{ marginBottom: 0 }}>
+          <Button type="primary" onClick={handleSubmit}>
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+    </Card>
+  );
+};

packages/design/src/card/index.md

@@ -19,6 +19,7 @@ nav:
 <code src="./demo/inner.tsx" title="嵌套卡片" description="多层级展示，支持多种内部卡片样式。"></code>
 <code src="./demo/grid.tsx" title="网格型内嵌卡片"></code>
 <code src="./demo/tabs.tsx" title="带页签的卡片" description="页签可设置选项卡后面的标签。"></code>
+<code src="./demo/with-form.tsx" title="和 Form 组合使用"></code>
 <code src="../table/demo/card-table.tsx" title="和 Table 组合使用"></code>
 <code src="./demo/config-provider.tsx" title="ConfigProvider" description="用于调试内部的 ConfigProvider 是否表现正常，需要连续触发 2 次及以上，观察第二个弹窗是否正常展示" debug></code>
 

packages/design/src/modal/demo/form.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Button, Form, Input, Modal } from '@oceanbase/design';
+
+export default () => {
+  const [form] = Form.useForm();
+  const { validateFields } = form;
+
+  const [open, setOpen] = useState(false);
+
+  const handleSubmit = () => {
+    validateFields().then(values => {
+      const { name, age } = values;
+      alert(`name: ${name}; age: ${age}`);
+    });
+  };
+
+  return (
+    <>
+      <Button
+        type="primary"
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Open Modal
+      </Button>
+      <Modal
+        open={open}
+        title="Title"
+        onOk={() => {
+          handleSubmit();
+        }}
+        onCancel={() => {
+          setOpen(false);
+        }}
+      >
+        <Form layout="vertical" form={form} preserve={false}>
+          <Form.Item
+            name="name"
+            label="Name"
+            rules={[
+              {
+                required: true,
+                message: 'Name is required',
+              },
+            ]}
+          >
+            <Input placeholder="name" />
+          </Form.Item>
+          <Form.Item
+            name="age"
+            label="Age"
+            rules={[
+              {
+                required: true,
+                message: 'Age is required',
+              },
+            ]}
+          >
+            <Input placeholder="age" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+};

packages/design/src/modal/index.md

@@ -15,6 +15,7 @@ nav:
 
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx" title="基本"></code>
+<code src="./demo/form.tsx" title="Form 表单"></code>
 <code src="./demo/max-height.tsx" title="高度限制" description="超出指定高度可设置滚动"></code>
 <code src="./demo/progress.tsx" title="带百分比的进度对话框" description="可用于异步任务或耗时较长的场景"></code>
 <code src="./demo/progress-with-loading.tsx" title="不带百分比的进度对话框" description="无法获取具体进度时，会展示 loading 态"></code>