feat(blockheader): change tooltip to TooltipProps and use toTooltipProps

DTStack · Sep 3, 2024 · da4da8a · da4da8a
1 parent 6fc8676
commit da4da8a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/src/blockHeader/demos/addonAfter.tsx b/src/blockHeader/demos/addonAfter.tsx
@@ -9,6 +9,7 @@ export default () => (
             background={false}
             title="分类标题"
             addonAfter={<Input placeholder="请输入" />}
+            tooltip={{ title: '这里展示问号提示' }}
         />
     </Space>
 );
diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md
@@ -25,19 +25,19 @@ demo:
 
 ### BlockHeader
 
-| 参数              | 说明                               | 类型                        | 默认值   |
-| ----------------- | ---------------------------------- | --------------------------- | -------- |
-| title             | 标题                               | `string`                    | -        |
-| addonBefore       | 标题前的图标，默认是一个色块       | `React.ReactNode`           | -        |
-| description       | 标题提示文案                       | `React.ReactNode`           | -        |
-| tooltip           | 默认展示问号提示                   | `React.ReactNode`           | -        |
-| addonAfter        | 标题后的内容                       | `React.ReactNode`           | -        |
-| size              | 小标题、中标题，默认为中标题       | `small \| middle \| large`  | `middle` |
-| titleRowClassName | 标题一行的样式类名                 | `string`                    | -        |
-| titleClassName    | 标题的样式类名                     | `string`                    | -        |
-| background        | 是否显示背景                       | `boolean`                   | `true`   |
-| defaultExpand     | 是否默认展开内容                   | `boolean`                   | `true`   |
-| hasBottom         | 是否有默认下边距 16px              | `boolean`                   | `false`  |
-| spaceBottom       | 自定义下边距，优先级高于 hasBottom | `number`                    | `0`      |
-| children          | 展开/收起的内容                    | `React.ReactNode`           | -        |
-| onChange          | 展开/收起时的回调                  | `(expand: boolean) => void` | -        |
+| 参数              | 说明                               | 类型                              | 默认值   |
+| ----------------- | ---------------------------------- | --------------------------------- | -------- |
+| title             | 标题                               | `string`                          | -        |
+| addonBefore       | 标题前的图标，默认是一个色块       | `React.ReactNode`                 | -        |
+| description       | 标题提示文案                       | `React.ReactNode`                 | -        |
+| tooltip           | 默认展示问号提示                   | `TooltipProps \| React.ReactNode` | -        |
+| addonAfter        | 标题后的内容                       | `React.ReactNode`                 | -        |
+| size              | 小标题、中标题，默认为中标题       | `small \| middle \| large`        | `middle` |
+| titleRowClassName | 标题一行的样式类名                 | `string`                          | -        |
+| titleClassName    | 标题的样式类名                     | `string`                          | -        |
+| background        | 是否显示背景                       | `boolean`                         | `true`   |
+| defaultExpand     | 是否默认展开内容                   | `boolean`                         | `true`   |
+| hasBottom         | 是否有默认下边距 16px              | `boolean`                         | `false`  |
+| spaceBottom       | 自定义下边距，优先级高于 hasBottom | `number`                          | `0`      |
+| children          | 展开/收起的内容                    | `React.ReactNode`                 | -        |
+| onChange          | 展开/收起时的回调                  | `(expand: boolean) => void`       | -        |
diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
@@ -1,10 +1,24 @@
 import React, { ReactNode, useState } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
+import { Tooltip, TooltipProps } from 'antd';
 import classNames from 'classnames';
 
 import './style.scss';
 
+function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null {
+    if (!tooltip) {
+        return null;
+    }
+    if (typeof tooltip === 'object' && !React.isValidElement(tooltip)) {
+        return tooltip as TooltipProps;
+    }
+    return {
+        title: tooltip,
+    };
+}
+
+export type LabelTooltipType = TooltipProps | React.ReactNode;
+
 export declare type SizeType = 'small' | 'middle' | 'large';
 
 export interface IBlockHeaderProps {
@@ -15,7 +29,7 @@ export interface IBlockHeaderProps {
     // 标题后的提示说明文字
     description?: ReactNode;
     // 默认展示为问号的tooltip
-    tooltip?: ReactNode;
+    tooltip?: LabelTooltipType;
     // 后缀自定义内容块
     addonAfter?: ReactNode;
     /**
@@ -61,8 +75,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const preTitleRowCls = `${prefixCls}-title-row`;
 
-    const questionTooltip = tooltip && (
-        <Tooltip title={tooltip}>
+    const tooltipProps = toTooltipProps(tooltip);
+
+    const questionTooltip = tooltipProps && (
+        <Tooltip {...tooltipProps}>
             <QuestionCircleOutlined />
         </Tooltip>
     );