feat(blockheader): use utils tooltip and use BEM style

Author: LuckyFBB

src/blockHeader/index.tsx

@@ -1,24 +1,11 @@
 import React, { ReactNode, useState } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
-import { Tooltip, TooltipProps } from 'antd';
+import { Tooltip } from 'antd';
 import classNames from 'classnames';
 
+import { LabelTooltipType, toTooltipProps } from '../utils';
 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 | TooltipProps['title'];
-
 export declare type SizeType = 'small' | 'middle' | 'large';
 
 function isControlled(props: IBlockHeaderProps) {
@@ -34,7 +21,7 @@ export interface IBlockHeaderProps {
     description?: ReactNode;
     /** 默认展示为问号的tooltip */
     tooltip?: LabelTooltipType;
-    // 后缀自定义内容块
+    /**  后缀自定义内容块 */
     addonAfter?: ReactNode;
     /**
      * 小标题 font-size: 12px; line-height: 32px
@@ -62,12 +49,15 @@ export interface IBlockHeaderProps {
     /** 展开/收起时的回调 */
     onExpand?: (expand: boolean) => void;
 }
+
+const prefixCls = 'dtc-block-header';
+const preTitleRowCls = `${prefixCls}__title`;
+
 const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
-    const prefixCls = 'dtc-block-header';
     const {
         title,
         description = '',
-        tooltip = '',
+        tooltip,
         size = 'middle',
         hasBottom = false,
         spaceBottom = 0,
@@ -86,11 +76,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const currentExpand = isControlled(props) ? expand : internalExpand;
 
-    const preTitleRowCls = `${prefixCls}__title`;
-
     const tooltipProps = toTooltipProps(tooltip);
 
-    const questionTooltip = tooltipProps && (
+    const questionTooltip = (
         <Tooltip {...tooltipProps}>
             <QuestionCircleOutlined />
         </Tooltip>
@@ -113,21 +101,25 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                     [`${preTitleRowCls}--background`]: background,
                     [`${preTitleRowCls}--pointer`]: children,
                 })}
-                onClick={() => handleExpand(!expand)}
+                onClick={() => handleExpand(!currentExpand)}
             >
                 <div className="title__box">
                     {addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
                     <div className="title__text">{title}</div>
-                    {questionTooltip ? (
+                    {tooltipProps?.title ? (
                         <div className={`title__tooltip`}>{questionTooltip}</div>
                     ) : null}
                     {description ? <div className={`title__description`}>{description}</div> : null}
                 </div>
                 {addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
                 {children && (
                     <div className={`title__collapse`}>
-                        <div className="text">{expand ? '收起' : '展开'}</div>
-                        <UpOutlined className={`icon ${expand ? 'up' : 'down'}`} />
+                        <div className="collapse__text">{currentExpand ? '收起' : '展开'}</div>
+                        <UpOutlined
+                            className={`collapse__icon ${
+                                currentExpand ? 'collapse__icon--up' : 'collapse__icon--down'
+                            }`}
+                        />
                     </div>
                 )}
             </div>

src/blockHeader/style.scss

@@ -72,6 +72,7 @@ $card_prefix: "dtc-block-header";
                 margin-right: 4px;
                 font-size: 16px;
                 color: #B1B4C5;
+                cursor: pointer;
             }
             &__text {
                 color: #3D446E;
@@ -93,18 +94,20 @@ $card_prefix: "dtc-block-header";
                 align-items: center;
                 cursor: pointer;
                 user-select: none;
-                .text {
-                    font-size: 12px;
-                    margin: 0 4px;
-                }
-                .icon {
-                    font-size: 16px;
-                    transition: transform 0.4s;
-                    &.down {
-                        transform: rotate(-180deg);
+                .collapse {
+                    &__text {
+                        font-size: 12px;
+                        margin: 0 4px;
                     }
-                    &.up {
-                        transform: rotate(0deg);
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+                        &--up {
+                            transform: rotate(0deg);
+                        }
                     }
                 }
             }

src/copy/demos/basic.tsx

@@ -9,21 +9,17 @@ export default () => {
     return (
         <Space direction="vertical">
             <div>
-                <BlockHeader title="使用 tooltip 对象" showBackground={false} size="small" />
+                <BlockHeader title="使用 tooltip 对象" background={false} size="small" />
                 <Copy text={text} tooltip={{ title: '使用 tooltip 对象，复制该文本' }} />
                 <p>{text}</p>
             </div>
             <div>
-                <BlockHeader title="使用 React.ReactNode" showBackground={false} size="small" />
+                <BlockHeader title="使用 React.ReactNode" background={false} size="small" />
                 <Copy text={text} tooltip="使用 React.ReactNode，复制该文本" />
                 <p>{text}</p>
             </div>
             <div>
-                <BlockHeader
-                    title={`使用 ()=>React.ReactNode`}
-                    showBackground={false}
-                    size="small"
-                />
+                <BlockHeader title={`使用 ()=>React.ReactNode`} background={false} size="small" />
                 <Copy text={text} tooltip={() => `使用 ()=>React.ReactNode，复制该文本`} />
                 <p>{text}</p>
             </div>