chore(form): demo拆解与规范 (#2148)

jdf2e · Apr 3, 2024 · 31a894a · 31a894a
1 parent 8b7d34c
commit 31a894a
Show file tree

Hide file tree

Showing 20 changed files with 1,001 additions and 2,884 deletions.
diff --git a/src/packages/form/demo.taro.tsx b/src/packages/form/demo.taro.tsx
diff --git a/src/packages/form/demo.tsx b/src/packages/form/demo.tsx
diff --git a/src/packages/form/demos/h5/demo1.tsx b/src/packages/form/demos/h5/demo1.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Form, Button, InputNumber, Input, TextArea } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Form
+        labelPosition="right"
+        footer={
+          <>
+            <Button nativeType="submit" block type="primary">
+              提交
+            </Button>
+          </>
+        }
+      >
+        <Form.Item
+          required
+          label="字段A"
+          name="username"
+          rules={[
+            { max: 5, message: '字段A不能超过5个字' },
+            { required: true, message: '请输入字段A' },
+          ]}
+        >
+          <Input
+            className="nut-input-text"
+            placeholder="请输入字段A"
+            type="text"
+          />
+        </Form.Item>
+        <Form.Item
+          label="字段D"
+          name="address"
+          rules={[
+            { max: 15, message: '字段D不能超过15个字' },
+            { required: true, message: '请输入字段D' },
+          ]}
+        >
+          <TextArea placeholder="请输入字段D" maxLength={100} />
+        </Form.Item>
+        <Form.Item
+          label="数量"
+          name="num"
+          getValueFromEvent={(...args) => args[0]}
+        >
+          <InputNumber />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default Demo1
diff --git a/src/packages/form/demos/h5/demo2.tsx b/src/packages/form/demos/h5/demo2.tsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import {
+  Form,
+  Button,
+  Input,
+  Toast,
+  type FormItemRuleWithoutValidator,
+} from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  const submitFailed = (error: any) => {
+    Toast.show({ content: JSON.stringify(error), icon: 'fail' })
+  }
+
+  const submitSucceed = (values: any) => {
+    Toast.show({ content: JSON.stringify(values), icon: 'success' })
+  }
+
+  // 函数校验
+  const customValidator = (
+    rule: FormItemRuleWithoutValidator,
+    value: string
+  ) => {
+    return /^\d+$/.test(value)
+  }
+
+  const valueRangeValidator = (
+    rule: FormItemRuleWithoutValidator,
+    value: string
+  ) => {
+    return /^(\d{1,2}|1\d{2}|200)$/.test(value)
+  }
+  return (
+    <>
+      <Form
+        divider
+        labelPosition="left"
+        onFinish={(values) => submitSucceed(values)}
+        onFinishFailed={(values, errors) => submitFailed(errors)}
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              width: '100%',
+            }}
+          >
+            <Button nativeType="submit" type="primary">
+              提交
+            </Button>
+            <Button nativeType="reset" style={{ marginLeft: '20px' }}>
+              重置
+            </Button>
+          </div>
+        }
+      >
+        <Form.Item
+          label="字段A"
+          name="username"
+          rules={[{ required: true, message: '请输入字段A' }]}
+        >
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+        <Form.Item
+          label="字段B"
+          name="age"
+          rules={[
+            { required: true, message: '请输入字段B' },
+            { validator: customValidator, message: '必须输入数字' },
+            { validator: valueRangeValidator, message: '必须输入0-200区间' },
+          ]}
+        >
+          <Input placeholder="请输入字段B，必须数字且0-200区间" type="text" />
+        </Form.Item>
+        <Form.Item
+          label="字段C"
+          name="tel"
+          rules={[{ max: 13, message: '请输入字段C' }]}
+        >
+          <Input placeholder="字段C格式不正确" type="number" />
+        </Form.Item>
+        <Form.Item
+          label="字段D"
+          name="address"
+          rules={[{ required: true, message: '请输入字段D' }]}
+        >
+          <Input placeholder="请输入字段D" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default Demo2
diff --git a/src/packages/form/demos/h5/demo3.tsx b/src/packages/form/demos/h5/demo3.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Form, Input, TextArea, type FormInstance } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  return (
+    <>
+      <Form divider labelPosition="right">
+        <Form.Item label="字段A" name="username">
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+        <Form.Item label="字段D" name="address" shouldUpdate noStyle>
+          {({ getFieldValue }: FormInstance) => {
+            const value = getFieldValue('username')
+            if (!value) return null
+            return <TextArea placeholder="字段D" maxLength={100} />
+          }}
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default Demo3
diff --git a/src/packages/form/demos/h5/demo4.tsx b/src/packages/form/demos/h5/demo4.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import {
+  Form,
+  Input,
+  Toast,
+  Button,
+  type FormItemRuleWithoutValidator,
+} from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  const submitFailed = (error: any) => {
+    Toast.show({ content: JSON.stringify(error), icon: 'fail' })
+  }
+
+  const submitSucceed = (values: any) => {
+    Toast.show({ content: JSON.stringify(values), icon: 'success' })
+  }
+  // 函数校验
+  const customValidator = (
+    rule: FormItemRuleWithoutValidator,
+    value: string
+  ) => {
+    return /^\d+$/.test(value)
+  }
+
+  const valueRangeValidator = (
+    rule: FormItemRuleWithoutValidator,
+    value: string
+  ) => {
+    return /^(\d{1,2}|1\d{2}|200)$/.test(value)
+  }
+  return (
+    <>
+      <Form
+        initialValues={{ username: 'LiSi', age: 20 }}
+        onFinish={(values) => submitSucceed(values)}
+        onFinishFailed={(values, errors) => submitFailed(errors)}
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              width: '100%',
+            }}
+          >
+            <Button nativeType="submit" type="primary">
+              提交
+            </Button>
+            <Button nativeType="reset" style={{ marginLeft: '20px' }}>
+              重置
+            </Button>
+          </div>
+        }
+      >
+        <Form.Item
+          label="字段A"
+          name="username"
+          rules={[{ required: true, message: '请输入字段A' }]}
+          initialValue="ZhangSan"
+        >
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+        <Form.Item
+          label="字段B"
+          name="age"
+          initialValue={18}
+          rules={[
+            { required: true, message: '请输入字段B' },
+            { validator: customValidator, message: '必须输入数字' },
+            { validator: valueRangeValidator, message: '必须输入0-200区间' },
+          ]}
+        >
+          <Input placeholder="请输入字段B，必须数字且0-200区间" type="number" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default Demo4
diff --git a/src/packages/form/demos/h5/demo5.tsx b/src/packages/form/demos/h5/demo5.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { Form, Input, Radio, Toast } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  const submitFailed = (error: any) => {
+    Toast.show({ content: JSON.stringify(error), icon: 'fail' })
+  }
+
+  const submitSucceed = (values: any) => {
+    Toast.show({ content: JSON.stringify(values), icon: 'success' })
+  }
+
+  const [form] = Form.useForm()
+  const onMenuChange = (value: string | number | boolean) => {
+    switch (value) {
+      case 'male':
+        form.setFieldsValue({ note: '👨' })
+        break
+      case 'female':
+        form.setFieldsValue({ note: '👩' })
+        break
+      default:
+    }
+  }
+  return (
+    <>
+      <Form
+        form={form}
+        onFinish={(values) => submitSucceed(values)}
+        onFinishFailed={(values, errors) => submitFailed(errors)}
+      >
+        <Form.Item
+          label="字段A"
+          name="username"
+          rules={[{ required: true, message: '请输入字段A' }]}
+        >
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+        <Form.Item label="标注" name="note">
+          <Input placeholder="请输入标注" type="string" />
+        </Form.Item>
+        <Form.Item label="字段E" name="gender">
+          <Radio.Group onChange={onMenuChange}>
+            <Radio value="male">A</Radio>
+            <Radio value="female">B</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default Demo5
diff --git a/src/packages/form/demos/h5/demo6.tsx b/src/packages/form/demos/h5/demo6.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Form, Input } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="字段A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: '请输入字段A' }]}
+        >
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default Demo6