feat: Form 新增 border 和 layout属性

3lang3 · Mar 18, 2022 · e69fc38 · e69fc38
1 parent a4a6a90
commit e69fc38
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 33 deletions.
diff --git a/packages/react-vant/src/form/Form.tsx b/packages/react-vant/src/form/Form.tsx
@@ -31,6 +31,7 @@ const Form = forwardRef<FormInstance, FormProps>((props, ref) => {
       value={{
         layout,
         colon,
+        border,
         showValidateMessage,
         inputAlign,
         labelAlign,

diff --git a/packages/react-vant/src/form/FormContext.tsx b/packages/react-vant/src/form/FormContext.tsx
@@ -2,13 +2,14 @@ import React from 'react';
 import { FormLayout, FormItemProps } from './PropsType';
 
 export type FormContextType = {
-  layout: FormLayout;
-  colon: boolean;
-  showValidateMessage: boolean;
+  layout?: FormLayout;
+  colon?: boolean;
+  border?: boolean;
+  showValidateMessage?: boolean;
 } & Pick<FormItemProps, 'labelAlign' | 'inputAlign'>;
 
 export const DEFAULT_FORM_CONTEXT: FormContextType = {
-  layout: 'horizontal',
+  border: true,
   colon: false,
   showValidateMessage: true,
   labelAlign: 'left',

diff --git a/packages/react-vant/src/form/FormItem.tsx b/packages/react-vant/src/form/FormItem.tsx
@@ -35,12 +35,14 @@ const FormItemLayout: React.FC<FormItemLayoutProps> = (props) => {
     layout,
     labelAlign,
     inputAlign,
+    border,
     ...fieldProps
   } = props;
   const { prefixCls, createNamespace } = React.useContext(ConfigProviderContext);
   const [bem] = createNamespace('form', prefixCls);
   const context = React.useContext(FormContext);
   const itemLayout = layout ?? context.layout;
+  const itemBorder = border ?? context.border;
   const itemColon = colon ?? context.colon;
   const itemShowValidateMessage = showValidateMessage ?? context.showValidateMessage;
   const itemLabelAlign = labelAlign ?? context.labelAlign;
@@ -51,12 +53,13 @@ const FormItemLayout: React.FC<FormItemLayoutProps> = (props) => {
 
   const attrs = {
     ...fieldProps,
-    className: clsx(bem({ vertical: itemLayout === 'vertical' && !isFieldChildren }), className),
+    className: clsx(bem({ vertical: itemLayout === 'vertical' }), className),
     colon: itemColon,
     error,
     errorMessage,
     labelAlign: itemLabelAlign,
     inputAlign: itemInputAlign,
+    border: itemBorder,
   };
 
   if (isFieldChildren) return React.cloneElement(children as React.ReactElement, attrs);
@@ -91,6 +94,8 @@ const FormItem: FC<FormItemProps> = (props) => {
     showValidateMessage,
     inputAlign,
     errorMessageAlign,
+    border,
+    layout,
     ...fieldProps
   } = props;
 
@@ -126,6 +131,8 @@ const FormItem: FC<FormItemProps> = (props) => {
         htmlFor={fieldId}
         meta={meta}
         colon={colon}
+        border={border}
+        layout={layout}
         labelWidth={labelWidth}
         labelAlign={labelAlign}
         labelClass={labelClass}

diff --git a/packages/react-vant/src/form/PropsType.ts b/packages/react-vant/src/form/PropsType.ts
@@ -19,10 +19,10 @@ export type FormProps = {
 } & Omit<RcFormProps, 'style'> &
   Omit<CellGroupProps, 'title'> &
   BaseTypeProps &
-  Pick<FieldProps, 'labelAlign' | 'inputAlign'>;
+  Pick<FieldProps, 'labelAlign' | 'inputAlign' | 'border'>;
 
 export type RenderChildren<Values = unknown> = (form: RcFormInstance<Values>) => React.ReactNode;
-type ChildrenType<Values = unknown> = RenderChildren<Values> | React.ReactNode;
+type ChildrenType<Values = unknown> = RenderChildren<Values> | React.ReactElement;
 
 export type FormInstance = RcFormInstance;
 
@@ -32,30 +32,31 @@ export type MemoInputProps = {
   children: React.ReactNode;
 } & Record<string, unknown>;
 
-export type FormItemProps = RcFieldProps &
-  Pick<FormProps, 'showValidateMessage'> &
-  Pick<
-    FieldProps,
-    | 'style'
-    | 'className'
-    | 'tooltip'
-    | 'intro'
-    | 'colon'
-    | 'labelWidth'
-    | 'labelAlign'
-    | 'labelClass'
-    | 'onClick'
-    | 'inputAlign'
-    | 'errorMessageAlign'
-  > & {
-    label?: string;
-    required?: boolean;
-    noStyle?: boolean;
-    disabled?: boolean;
-    /** 自定义item，此时不会渲染内置的field */
-    customField?: boolean;
-    children?: ChildrenType;
-  };
+export interface FormItemProps
+  extends RcFieldProps,
+    Pick<FormProps, 'showValidateMessage' | 'border' | 'layout'>,
+    Pick<
+      FieldProps,
+      | 'style'
+      | 'className'
+      | 'tooltip'
+      | 'intro'
+      | 'colon'
+      | 'labelWidth'
+      | 'labelAlign'
+      | 'labelClass'
+      | 'onClick'
+      | 'inputAlign'
+      | 'errorMessageAlign'
+    > {
+  label?: string;
+  required?: boolean;
+  noStyle?: boolean;
+  disabled?: boolean;
+  /** 自定义item，此时不会渲染内置的field */
+  customField?: boolean;
+  children?: ChildrenType;
+}
 
 export type FormItemLayoutProps = Pick<
   FormItemProps,
@@ -73,11 +74,12 @@ export type FormItemLayoutProps = Pick<
   | 'showValidateMessage'
   | 'inputAlign'
   | 'errorMessageAlign'
+  | 'border'
+  | 'layout'
 > & {
   onClick?: (e?: React.MouseEvent) => void;
   htmlFor?: string;
   meta?: Meta;
-  layout?: FormLayout;
   /** @private */
   isFieldChildren?: boolean;
 };
diff --git a/packages/react-vant/src/form/README.md b/packages/react-vant/src/form/README.md
@@ -568,6 +568,7 @@ export default () => {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | layout | 表单布局 | _horizontal \| vertical_ | `horizontal` |
+| border | 是否显示表单项底部边框 | _border_ | `true` |
 | colon | 配置 Form.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 | _boolean_ | `false` |
 | showValidateMessage | 是否显示验证错误信息 | _boolean_ | `true` |
 | labelAlign | 统一设置左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` |
@@ -582,6 +583,8 @@ export default () => {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| layout | 表单项布局 | _horizontal \| vertical_ | `horizontal` |
+| border | 是否显示表单项底部边框 | _border_ | `true` |
 | colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | _boolean_ | `false` |
 | showValidateMessage | 是否显示验证信息 | _boolean_ | `true` |
 | intro | 额外的提示信息 | _ReactNode_ | - |

diff --git a/packages/react-vant/src/form/style/index.less b/packages/react-vant/src/form/style/index.less
@@ -2,8 +2,9 @@
 
 .@{rv-prefix}-form {
   &--vertical {
-    display: block;
+    flex-wrap: wrap;
     .@{rv-prefix}-field__label {
+      width: 100%;
       margin-bottom: 8 * @hd;
     }
   }