diff --git a/packages/react-vant/src/form/Form.tsx b/packages/react-vant/src/form/Form.tsx index 712b37fd1..67fa9cc5c 100644 --- a/packages/react-vant/src/form/Form.tsx +++ b/packages/react-vant/src/form/Form.tsx @@ -31,6 +31,7 @@ const Form = forwardRef((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 index 72ae07492..074940f98 100644 --- 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; 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 index 6fd29d92f..41c06a06c 100644 --- a/packages/react-vant/src/form/FormItem.tsx +++ b/packages/react-vant/src/form/FormItem.tsx @@ -35,12 +35,14 @@ const FormItemLayout: React.FC = (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 = (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 = (props) => { showValidateMessage, inputAlign, errorMessageAlign, + border, + layout, ...fieldProps } = props; @@ -126,6 +131,8 @@ const FormItem: FC = (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 index 5512a7b33..b92f20320 100644 --- a/packages/react-vant/src/form/PropsType.ts +++ b/packages/react-vant/src/form/PropsType.ts @@ -19,10 +19,10 @@ export type FormProps = { } & Omit & Omit & BaseTypeProps & - Pick; + Pick; export type RenderChildren = (form: RcFormInstance) => React.ReactNode; -type ChildrenType = RenderChildren | React.ReactNode; +type ChildrenType = RenderChildren | React.ReactElement; export type FormInstance = RcFormInstance; @@ -32,30 +32,31 @@ export type MemoInputProps = { children: React.ReactNode; } & Record; -export type FormItemProps = RcFieldProps & - Pick & - 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, + 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 index 74ecd9c0d..a92dc1e51 100644 --- 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 index 63b0a8540..54dcbe504 100644 --- 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; } }