feat(form): 多端适配

scripts/rn/copy-file.js

@@ -32,6 +32,7 @@ const childAdaptedArray = [
   'hoverbuttonitem',
   'avatargroup',
   'icon',
+  'formitem',
 ]
 
 // copy文件并增加css引入

src/config.json

@@ -492,7 +492,7 @@
           "author": "dsj"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Form",
           "type": "component",
           "cName": "表单",
@@ -503,7 +503,7 @@
           "author": "hanyuxinting"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "FormItem",
           "type": "component",
           "cName": "表单项",

src/packages/form/demo.taro.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { ScrollView, View } from '@tarojs/components'
+import { ScrollView, View, Text } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -10,6 +10,7 @@ import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const FormDemo = () => {
   const [translated] = useTranslate({
@@ -37,20 +38,35 @@ const FormDemo = () => {
     <>
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <View className="h2">{translated.basic}</View>
+        <View className="h2">
+          <Text>{translated.basic}</Text>
+        </View>
         <Demo1 />
         <View className="h2">{translated.title2}</View>
         <Demo2 />
-        <View className="h2">{translated.relatedDisplay}</View>
-        <Demo3 />
+        {!harmonyAndRn() ? (
+          <>
+            <View className="h2">{translated.relatedDisplay}</View>
+            <Demo3 />
+          </>
+        ) : null}
         <View className="h2">{translated.title3}</View>
         <Demo4 />
-        <View className="h2">{translated.title4}</View>
-        <Demo5 />
+        {!harmonyAndRn() ? (
+          <>
+            <View className="h2">{translated.title4}</View>
+            <Demo5 />
+          </>
+        ) : null}
+
         <View className="h2">{translated.validateTrigger}</View>
         <Demo6 />
-        <View className="h2">{translated.title5}</View>
-        <Demo7 />
+        {!harmonyAndRn() ? (
+          <>
+            <View className="h2">{translated.title5}</View>
+            <Demo7 />
+          </>
+        ) : null}
       </ScrollView>
     </>
   )

src/packages/form/demos/taro/demo1.tsx

@@ -1,11 +1,5 @@
 import React from 'react'
-import {
-  Button,
-  Form,
-  Input,
-  InputNumber,
-  TextArea,
-} from '@nutui/nutui-react-taro'
+import { Button, Form, Input, TextArea } from '@nutui/nutui-react-taro'
 import { FormItemRuleWithoutValidator } from '@/packages/formitem/types'
 
 const Demo1 = () => {
@@ -53,14 +47,11 @@ const Demo1 = () => {
             { required: true, message: '请输入字段D' },
           ]}
         >
-          <TextArea placeholder="请输入字段D" maxLength={100} />
-        </Form.Item>
-        <Form.Item
-          label="数量"
-          name="num"
-          getValueFromEvent={(...args) => args[0]}
-        >
-          <InputNumber />
+          <TextArea
+            placeholder="请输入字段D"
+            maxLength={100}
+            style={{ paddingTop: 0, paddingBottom: 0 }}
+          />
         </Form.Item>
       </Form>
     </>

src/packages/form/demos/taro/demo2.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
 import {
   Form,
   Button,
   Input,
   type FormItemRuleWithoutValidator,
 } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
   const submitFailed = (error: any) => {
@@ -38,20 +40,21 @@ const Demo2 = () => {
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={
-          <div
+          <View
             style={{
               display: 'flex',
+              flexDirection: 'row',
               justifyContent: 'center',
               width: '100%',
             }}
           >
             <Button nativeType="submit" type="primary">
               提交
             </Button>
-            <Button nativeType="reset" style={{ marginLeft: '20px' }}>
+            <Button nativeType="reset" style={{ marginLeft: pxTransform(20) }}>
               重置
             </Button>
-          </div>
+          </View>
         }
       >
         <Form.Item

src/packages/form/demos/taro/demo4.tsx

@@ -7,6 +7,7 @@ import {
   type FormItemRuleWithoutValidator,
 } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   const submitFailed = (error: any) => {
@@ -41,13 +42,14 @@ const Demo4 = () => {
             style={{
               display: 'flex',
               justifyContent: 'center',
+              flexDirection: 'row',
               width: '100%',
             }}
           >
             <Button nativeType="submit" type="primary">
               提交
             </Button>
-            <Button nativeType="reset" style={{ marginLeft: '20px' }}>
+            <Button nativeType="reset" style={{ marginLeft: pxTransform(20) }}>
               重置
             </Button>
           </View>

src/packages/form/doc.en-US.md

@@ -80,6 +80,7 @@ import { Form } from '@nutui/nutui-react'
 | name | form name | `any` | `-` |
 | labelPosition | The position of the form item label | `top` \| `left` \| `right` | `right` |
 | starPosition | The red star position of the required form item label | `left` \| `right` | `left` |
+| validateTrigger | uniformly set the timing for fields to trigger validation | `string` \| `string[]` | `onChange` |
 | onFinish | Triggered after verification is successful | `(values: any) => void` | `-` |
 | onFinishFailed | Triggered when any form item fails validation | `(values: any, errorFields: any) => void` | `-` |
 
@@ -125,7 +126,8 @@ Form.useForm() creates a Form instance, which is used to manage all data states.
 | --- | --- | --- |
 | getFieldValue | Get the value of the corresponding field name | `(name: NamePath) => any` |
 | getFieldsValue | Get values by a set of field names. Return according to the corresponding structure. Default return mounted field value, but you can use getFieldsValue(true) to get all values | `(name: NamePath \| boolean) => any` |
-| setFieldsValue | set field values | `(values) => void` |
+| setFieldsValue | Set the value of the form (the value will be passed directly to the form store. If you do not want the object passed in to be modified, please copy it and pass it in) | `(values) => void` |
+| setFieldValue | Set the value of the corresponding field name | `<T>(name: NamePath, value: T) => void` |
 | resetFields | Reset form prompt state | `() => void` |
 | submit | method to submit a form for validation | `Promise` |
 

src/packages/form/doc.md

@@ -78,6 +78,7 @@ import { Form } from '@nutui/nutui-react'
 | name | 表单名称 | `any` | `-` |
 | labelPosition | 表单项 label 的位置 | `top` \| `left` \| `right` | `right` |
 | starPosition | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
+| validateTrigger | 统一设置字段触发验证的时机 | `string` \| `string[]` | `onChange` |
 | onFinish | 校验成功后触发 | `(values: any) => void` | `-` |
 | onFinishFailed | 任一表单项被校验失败后触发 | `(values: any, errorFields: any) => void` | `-` |
 
@@ -124,7 +125,8 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。
 | --- | --- | --- |
 | getFieldValue | 获取对应字段名的值 | `(name: NamePath) => any` |
 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` |
-| setFieldsValue | 设置表单的值 | `(values) => void` |
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | `(values) => void` |
+| setFieldValue | 设置对应字段名的值 | `<T>(name: NamePath, value: T) => void` |
 | resetFields | 重置表单提示状态 | `() => void` |
 | submit | 提交表单进行校验的方法 | `Promise` |
 

src/packages/form/doc.taro.md

@@ -78,6 +78,7 @@ import { Form } from '@nutui/nutui-react-taro'
 | name | 表单名称 | `any` | `-` |
 | labelPosition | 表单项 label 的位置 | \`\`'top' | 'left'\` | \`'right'\`\` |
 | starPosition | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
+| validateTrigger | 统一设置字段触发验证的时机 | `string` \| `string[]` | `onChange` |
 | onFinish | 校验成功后触发 | `(values: any) => void` | `-` |
 | onFinishFailed | 任一表单项被校验失败后触发 | `(values: any, errorFields: any) => void` | `-` |
 
@@ -124,7 +125,8 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。
 | --- | --- | --- |
 | getFieldValue | 获取对应字段名的值 | `(name: NamePath) => any` |
 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` |
-| setFieldsValue | 设置表单的值 | `(values) => void` |
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | `(values) => void` |
+| setFieldValue | 设置对应字段名的值 | `<T>(name: NamePath, value: T) => void` |
 | resetFields | 重置表单提示状态 | `() => void` |
 | submit | 提交表单进行校验的方法 | `Promise` |
 

src/packages/form/doc.zh-TW.md

@@ -79,6 +79,7 @@ import { Form } from '@nutui/nutui-react'
 | label | 标签名 | `ReactNode` | `-` |
 | labelPosition | 錶單項 label 的位置 | `top` \| `left` \| `right` | `right` |
 | starPosition | 必填錶單項 label 的紅色星標位置 | `left` \| `right` | `left` |
+| validateTrigger | 統一設定字段觸發驗證的時機 | `string` \| `string[]` | `onChange` |
 | onFinish | 校驗成功後觸發 | `(values: any) => void` | `-` |
 | onFinishFailed | 任一錶單項被校驗失敗後觸發 | `(values: any, errorFields: any) => void` | `-` |
 
@@ -124,7 +125,8 @@ Form.useForm()創建 Form 實例，用於管理所有數據狀態。
 | --- | --- | --- |
 | getFieldValue | 獲取對應字段名的值 | `(name: NamePath) => any` |
 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` |
-| setFieldsValue | 設置錶單的值 | `(values) => void` |
+| setFieldsValue | 設定表單的值（該值將直接傳入 form store 中。如果你不希望傳入物件被修改，請複製後傳入） | `(values) => void` |
+| setFieldValue | 設定對應欄位名的值 | `<T>(name: NamePath, value: T) => void` |
 | resetFields | 重置錶單提示狀態 | `() => void` |
 | submit | 提交錶單進行校驗的方法 | `Promise` |