feat: table 增加 title 与 subTitle

aotuzuche · Sep 7, 2023 · ae945de · ae945de
1 parent 7224778
commit ae945de
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 5 deletions.
diff --git 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
@@ -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 (
+    <Form
+      items={baseItems}
+      form={form}
+      title="表单标题"
+      // eslint-disable-next-line no-console
+      onFinish={(values: Store) =>
+        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
@@ -66,6 +66,9 @@ interface FormCommonProps {
 
   // 信息脱敏
   desensitize?: DesensitizeType | string
+
+  // 标题
+  title?: string
 }
 
 export interface FormItemProps extends Omit<AntdFormItemProps, 'children'>, FormCommonProps {
@@ -87,7 +90,7 @@ export interface FormItemProps extends Omit<AntdFormItemProps, 'children'>, Form
   suffix?: ReactNode | ((fieldsValue: Store) => ReactNode)
 
   // Default render
-  type?: 'divider'
+  type?: 'divider' | 'subTitle'
 
   // disabled
   disabled?: boolean
@@ -128,6 +131,10 @@ const RenderChild: FC<Pick<FormItemProps, 'suffix' | 'type' | 'label' | 'disable
     return <Divider orientation="left">{label}</Divider>
   }
 
+  if (type === 'subTitle') {
+    return <h3>{label}</h3>
+  }
+
   if (suffix) {
     return (
       <Space>
@@ -154,6 +161,7 @@ const InternalForm: ForwardRefRenderFunction<FormInstance, FormProps> = (
     onReset: onResetInternal,
     isView = false,
     form,
+    title,
     layoutCol = { span: 24 },
     initialValues: initialValuesInternal,
     placeholder: placeholderInternal = '-',
@@ -390,6 +398,7 @@ const InternalForm: ForwardRefRenderFunction<FormInstance, FormProps> = (
   // Better use Button loading when submit, but we can't control button
   return (
     <Spin spinning={loading}>
+      {title && <h2>{title}</h2>}
       <AntdForm
         form={formInsatce}
         onFinish={onFinish}

diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
@@ -55,6 +55,10 @@ group:
 
 <code src="./demo/typeByDivider.tsx" />
 
+##### SubTitle
+
+<code src="./demo/typeBySubTitle.tsx" />
+
 ### 参数
 
 | 属性          | 描述                                                         | 类型                                                | 默认值         |
@@ -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` | `-`                          |