diff --git a/components/form/demo/typeByDivider.tsx b/components/form/demo/typeByDivider.tsx index f152e7a..93aab0c 100644 --- a/components/form/demo/typeByDivider.tsx +++ b/components/form/demo/typeByDivider.tsx @@ -1,7 +1,7 @@ -import React from 'react' -import { Form } from 'at-console-components' -import { Store } from 'antd/lib/form/interface' import { FormItemProps } from '..' +import { Store } from 'antd/lib/form/interface' +import { Form } from 'at-console-components' +import React from 'react' const { useForm } = Form diff --git a/components/form/demo/typeBySubTitle.tsx b/components/form/demo/typeBySubTitle.tsx new file mode 100644 index 0000000..3eb82d6 --- /dev/null +++ b/components/form/demo/typeBySubTitle.tsx @@ -0,0 +1,50 @@ +import { FormItemProps } from '..' +import { Store } from 'antd/lib/form/interface' +import { Form } from 'at-console-components' +import React from 'react' + +const { useForm } = Form + +export default function BaseDemo() { + const [form] = useForm() + const baseItems: FormItemProps[] = [ + { + label: '介绍', + type: 'subTitle', + }, + { + name: 'name', + label: '姓名', + }, + { + name: 'sex', + label: '性别', + }, + { + label: '其他', + type: 'subTitle', + }, + { + name: 'website', + label: '个人主页', + }, + ] + + return ( +
+ new Promise(resolve => { + setTimeout(() => { + // eslint-disable-next-line no-console + console.log('BaseDemo', values) + resolve(values) + }, 1000) + }) + } + /> + ) +} diff --git a/components/form/index.tsx b/components/form/index.tsx index 1fd6980..f0438d6 100644 --- a/components/form/index.tsx +++ b/components/form/index.tsx @@ -66,6 +66,9 @@ interface FormCommonProps { // 信息脱敏 desensitize?: DesensitizeType | string + + // 标题 + title?: string } export interface FormItemProps extends Omit, FormCommonProps { @@ -87,7 +90,7 @@ export interface FormItemProps extends Omit, Form suffix?: ReactNode | ((fieldsValue: Store) => ReactNode) // Default render - type?: 'divider' + type?: 'divider' | 'subTitle' // disabled disabled?: boolean @@ -128,6 +131,10 @@ const RenderChild: FC{label} } + if (type === 'subTitle') { + return

{label}

+ } + if (suffix) { return ( @@ -154,6 +161,7 @@ const InternalForm: ForwardRefRenderFunction = ( onReset: onResetInternal, isView = false, form, + title, layoutCol = { span: 24 }, initialValues: initialValuesInternal, placeholder: placeholderInternal = '-', @@ -390,6 +398,7 @@ const InternalForm: ForwardRefRenderFunction = ( // Better use Button loading when submit, but we can't control button return ( + {title &&

{title}

} +##### SubTitle + + + ### 参数 | 属性 | 描述 | 类型 | 默认值 | @@ -79,6 +83,6 @@ group: | layoutCol | 布局 | [ColProps](https://ant.design/components/grid/#Col) | Form `layoutCol` | | extraNames | 额外的 name | `NamePath[]` | - | | placeholder | 占位符(View 模式下数据为 `null` `undefined` `''` 显示的文字) | `string` | `-` | -| type | 默认类型 | `divider` | `-` | +| type | 默认类型 | `divider` `subTitle` | `-` | | suffix | 设置后置标签 | `ReactNode \| (fieldValue: StoreValue, fieldsValue: Store) => ReactNode` | `-` | | tips | 设置提示标签 | `ReactNode \| (fieldValue: StoreValue, fieldsValue: Store) => ReactNode` | `-` |