feat: support titleTooltip attribute in form table (#354)

* feat: support titleTooltip attribute in form table * fix: fix form.table tooltip icon style --------- Co-authored-by: jialan <jialan@dtstack.com>
DTStack · Jun 15, 2023 · 379d4dd · 379d4dd
1 parent cd644cf
commit 379d4dd
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 6 deletions.
diff --git a/src/form/demos/basic.tsx b/src/form/demos/basic.tsx
@@ -42,6 +42,7 @@ export default () => {
                         {
                             key: 'name',
                             title: 'Name',
+                            titleTooltip: 'This is Name',
                             dataIndex: 'name',
                             required: true,
                             rules: [

diff --git a/src/form/index.md b/src/form/index.md
@@ -52,8 +52,9 @@ demo:
 
 继承全部 `Form.Item` 以及 `ColumnType` 类型, 以下类型有所不同
 
-| 参数         | 说明                                                                      | 类型                                          | 默认值 |
-| ------------ | ------------------------------------------------------------------------- | --------------------------------------------- | ------ |
-| dependencies | 支持回调函数形式获取当前字段名，详见<a href="#form-demo-related">Demo</a> | -                                             | -      |
-| rules        | 支持回调函数形式获取当前字段名，详见<a href="#form-demo-rules">Demo</a>   | -                                             | -      |
-| render       | 生成复杂数据的渲染函数，详见<a href="#form-demo-related">Demo</a>         | `(record, namePath, form) => React.ReactNode` | -      |
+| 参数         | 说明                                                                      | 类型                                                                                                                             | 默认值 |
+| ------------ | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------ |
+| dependencies | 支持回调函数形式获取当前字段名，详见<a href="#form-demo-related">Demo</a> | -                                                                                                                                | -      |
+| rules        | 支持回调函数形式获取当前字段名，详见<a href="#form-demo-rules">Demo</a>   | -                                                                                                                                | -      |
+| titleTooltip | 表格`title`上的`tooltip`                                                  | `ReactNode` \| <a href="https://4x.ant.design/components/tooltip-cn/#API" target="_blank">TooltipProps & { icon: ReactNode }</a> | -      |
+| render       | 生成复杂数据的渲染函数，详见<a href="#form-demo-related">Demo</a>         | `(record, namePath, form) => React.ReactNode`                                                                                    | -      |
diff --git a/src/form/index.scss b/src/form/index.scss
@@ -17,6 +17,12 @@ $errorColor: #FF4D4F;
                 vertical-align: -0.1em;
             }
         }
+        &__tooltip {
+            margin-left: 4px;
+            font-size: 16px;
+            color: #B1B4C5;
+            cursor: help;
+        }
         .ant-table,
         .ant-table-container {
             height: 100%;

diff --git a/src/form/table.tsx b/src/form/table.tsx
@@ -1,9 +1,11 @@
 import React, { useMemo, ReactNode } from 'react';
-import { Form, Table, type FormListFieldData, type TableProps } from 'antd';
+import { Form, Table, type FormListFieldData, type TableProps, Tooltip } from 'antd';
 import classnames from 'classnames';
 import utils from '../utils';
 import type { FormItemProps, FormListProps, Rule, RuleObject, RuleRender } from 'antd/lib/form';
+import type { LabelTooltipType, WrapperTooltipProps } from 'antd/lib/form/FormItemLabel';
 import type { ColumnsType, ColumnType as TableColumnType } from 'antd/lib/table';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import './index.scss';
 
 type NotNullRowSelection = NonNullable<TableProps<any>['rowSelection']>;
@@ -90,6 +92,10 @@ export interface ColumnType
      * 校验规则，设置字段的校验逻辑，支持通过回调函数获取当前字段名
      */
     rules?: (RuleObject | ((form: RcFormInstance, namePath: OverrideParameters) => RuleObject))[];
+    /**
+     * 表格title上的tooltip，使用方法与formItem中的一致
+     */
+    titleTooltip?: LabelTooltipType;
     /**
      * 渲染函数
      * @param formInstance 只有在设置了 `dependencies` 的情况下才有该参数
@@ -103,6 +109,20 @@ export interface ColumnType
 
 const className = 'dtc-form__table';
 
+function toTooltipProps(tooltip: LabelTooltipType): WrapperTooltipProps | null {
+    if (!tooltip) {
+        return null;
+    }
+
+    if (typeof tooltip === 'object' && !React.isValidElement(tooltip)) {
+        return tooltip as WrapperTooltipProps;
+    }
+
+    return {
+        title: tooltip,
+    };
+}
+
 export default function InternalTable({
     name,
     rules,
@@ -134,6 +154,7 @@ export default function InternalTable({
                 initialValue,
                 messageVariables,
                 tooltip,
+                titleTooltip,
                 dependencies,
                 rules: rawRules,
                 render,
@@ -156,12 +177,26 @@ export default function InternalTable({
                 const isRequired =
                     required || rawRules?.some((rule) => typeof rule === 'object' && rule.required);
 
+                const tooltipProps = toTooltipProps(titleTooltip);
+                let tooltipNode: React.ReactNode | null = null;
+                if (tooltipProps) {
+                    const { icon = <QuestionCircleOutlined />, ...restTooltipProps } = tooltipProps;
+                    tooltipNode = (
+                        <Tooltip {...restTooltipProps}>
+                            {React.cloneElement(icon, {
+                                className: `dtc-form__table__tooltip ${icon.props?.className}`,
+                            })}
+                        </Tooltip>
+                    );
+                }
+
                 return {
                     ...cols,
                     title: (
                         <>
                             {isRequired && <span className="dtc-form__table__column--required" />}
                             {cols.title}
+                            {tooltipNode}
                         </>
                     ),
                     render(_, record) {