feat(form): Form.Item 增加 align 属性 (#2492)

* feat(form): Form.Item 增加 align 属性 * fix: re * chore: ts --------- Co-authored-by: huxiyang <[email protected]>
jdf2e · Aug 2, 2024 · 62809a0 · 62809a0
1 parent 1a35e29
commit 62809a0
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 0 deletions.
diff --git a/src/packages/form/demos/h5/demo1.tsx b/src/packages/form/demos/h5/demo1.tsx
@@ -16,6 +16,7 @@ const Demo1 = () => {
         }
       >
         <Form.Item
+          align="center"
           required
           label="字段A"
           name="username"

diff --git a/src/packages/form/demos/taro/demo1.tsx b/src/packages/form/demos/taro/demo1.tsx
@@ -22,6 +22,7 @@ const Demo1 = () => {
         }
       >
         <Form.Item
+          align="center"
           required
           label="字段A"
           name="username"

diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md
@@ -95,6 +95,7 @@ import { Form } from '@nutui/nutui-react'
 | errorMessageAlign | Error text alignment | `center` \| `right` \| `left` | `left` |
 | initialValue | set the default value of child elements | `any` | `-` |
 | trigger | Set the timing to collect field value changes | `string` | `-` |
+| align | Alignment | `flex-start` \| `center` \| `flex-end` | `flex-start` |
 | valuePropName | The property of the value of the child node, such as 'checked' for Checkbox | `string` | `-` |
 | getValueFromEvent | Set how to convert event value to field value | `(...args: any) => any` | `-` |
 | validateTrigger | When to validate the value of children node | `string \| string[]` | `onChange` |

diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md
@@ -95,6 +95,7 @@ import { Form } from '@nutui/nutui-react'
 | noStyle | 不使用样式，只使用字段管理 | `boolean` | `false` |
 | shouldUpdate | 更新逻辑 | `boolean` | `false` |
 | trigger | 设置收集字段值变更的时机 | `string` | `-` |
+| align | 对齐方式 | `flex-start` \| `center` \| `flex-end` | `flex-start` |
 | valuePropName | 子节点的值的属性，如 Checkbox 的是 'checked' | `string` | `-` |
 | getValueFromEvent | 设置如何将 event 的值转换成字段值 | `(...args: any) => any` | `-` |
 | validateTrigger | 统一设置字段触发验证的时机 | `string \| string[]` | `onChange` |

diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md
@@ -95,6 +95,7 @@ import { Form } from '@nutui/nutui-react-taro'
 | noStyle | 不使用样式，只使用字段管理 | `boolean` | `false` |
 | shouldUpdate | 更新逻辑 | `boolean` | `false` |
 | trigger | 设置收集字段值变更的时机 | `string` | `-` |
+| align | 对齐方式 | `flex-start` \| `center` \| `flex-end` | `flex-start` |
 | valuePropName | 子节点的值的属性，如 Checkbox 的是 'checked' | `string` | `-` |
 | getValueFromEvent | 设置如何将 event 的值转换成字段值 | `(...args: any) => any` | `-` |
 | validateTrigger | 统一设置字段触发验证的时机 | `string \| string[]` | `onChange` |

diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md
@@ -95,6 +95,7 @@ import { Form } from '@nutui/nutui-react'
 | noStyle | 不使用样式，只使用字段管理 | `boolean` | `false` |
 | shouldUpdate | 更新逻辑 | `boolean` | `false` |
 | trigger | 設置收集字段值變更的時機 | `string` | `-` |
+| align | 對齊方式 | `flex-start` \| `center` \| `flex-end` | `flex-start` |
 | valuePropName | 子節點的值的屬性，如 Checkbox 的是 'checked' | `string` | `-` |
 | getValueFromEvent | 設置如何將 event 的值轉換成字段值 | `(...args: any) => any` | `-` |
 | validateTrigger | 统一设置字段触发验证的时机 | `string \| string[]` | `onChange` |

diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
@@ -34,6 +34,7 @@ export interface FormItemProps
   shouldUpdate: boolean
   noStyle: boolean
   children: ReactNode | ((obj: any) => React.ReactNode)
+  align?: 'flex-start' | 'center' | 'flex-end'
 }
 
 const defaultProps = {
@@ -194,6 +195,7 @@ export class FormItem extends React.Component<
       rules,
       className,
       style,
+      align,
       errorMessageAlign,
     } = {
       ...defaultProps,
@@ -218,6 +220,7 @@ export class FormItem extends React.Component<
       <Cell
         className={`nut-form-item ${className}`}
         style={style}
+        align={align}
         onClick={(e) =>
           this.props.onClick && this.props.onClick(e, this.componentRef)
         }

diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
@@ -34,6 +34,7 @@ export interface FormItemProps
   shouldUpdate: boolean
   noStyle: boolean
   children: ReactNode | ((obj: any) => React.ReactNode)
+  align?: 'flex-start' | 'center' | 'flex-end'
 }
 
 const defaultProps = {
@@ -194,6 +195,7 @@ export class FormItem extends React.Component<
       className,
       style,
       errorMessageAlign,
+      align,
     } = {
       ...defaultProps,
       ...this.props,
@@ -217,6 +219,7 @@ export class FormItem extends React.Component<
       <Cell
         className={`nut-form-item ${className}`}
         style={style}
+        align={align}
         onClick={(e) =>
           this.props.onClick && this.props.onClick(e, this.componentRef)
         }