feat: update BlockHeader (#236)

* feat: update BlockHeader * fix: update questionTooltip have tooltip and judge chilren length
DTStack · Oct 23, 2022 · cb42586 · cb42586
1 parent 632a8df
commit cb42586
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 57 deletions.
diff --git a/src/components/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap b/src/components/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`test BlockHeader render success render 1`] = `
+exports[`test BlockHeader render should render BlockHeader success render 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -26,9 +26,6 @@ Object {
             >
               标题1
             </div>
-            <div
-              class="dtc-block-header-after-title"
-            />
           </div>
           
         </div>
@@ -60,9 +57,6 @@ Object {
           >
             标题1
           </div>
-          <div
-            class="dtc-block-header-after-title"
-          />
         </div>
         
       </div>

diff --git a/src/components/blockHeader/__tests__/blockHeader.test.tsx b/src/components/blockHeader/__tests__/blockHeader.test.tsx
@@ -14,30 +14,39 @@ const props2 = {
     titleRowClassName: 'test-row-className',
     titleClassName: 'test-title-className',
 };
+const props3 = {
+    title: 'hover',
+    tooltip: 'hover 展示',
+};
+const props4 = {
+    title: 'hover',
+    tooltip: 'hover 展示',
+    afterTitle: '我的优先级更高',
+};
 const prefixCls = 'dtc-block-header';
 
 describe('test BlockHeader render', () => {
     afterEach(() => {
         cleanup();
     });
-    test('success render', () => {
+    test('should render BlockHeader success render', () => {
         const wrapper = render(<BlockHeader {...props} />);
         expect(wrapper).toMatchSnapshot();
     });
-    test('default BlockHeader render', () => {
+    test('should render BlockHeader default BlockHeader render', () => {
         const { getByText, rerender } = render(<BlockHeader {...props} />);
         expect(getByText(props.title)).toBeTruthy();
         rerender(<BlockHeader title="标题2" />);
         expect(getByText('标题2')).toBeTruthy();
     });
-    test('props default in BlockHeader', () => {
+    test('should render BlockHeader props default in BlockHeader', () => {
         const { container } = render(<BlockHeader title="测试" isSmall showBackground />);
         const wrap = container.firstChild;
         expect(wrap.firstChild.firstChild.firstChild).toHaveClass(`${prefixCls}-before-title`);
         expect(wrap.firstChild.firstChild.firstChild.firstChild).toHaveClass('small');
         fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
     });
-    test('BlockHeader render with different props', () => {
+    test('should render BlockHeader with different props', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild;
         expect(wrap).toHaveClass(`${prefixCls}`);
@@ -47,7 +56,7 @@ describe('test BlockHeader render', () => {
         expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
         expect(getByText('Icon')).toBeTruthy();
     });
-    test('test click event', () => {
+    test('should render BlockHeader test click event', () => {
         const onChange = jest.fn();
         const { getByText } = render(
             <BlockHeader onChange={onChange} title="测试">
@@ -59,7 +68,7 @@ describe('test BlockHeader render', () => {
         expect(getByText('展开')).toBeTruthy();
         expect(onChange).toHaveBeenCalledTimes(1);
     });
-    test('BlockHeader render with different props', () => {
+    test('should render BlockHeader with different props', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild;
         expect(wrap).toHaveClass(`${prefixCls}`);
@@ -69,13 +78,13 @@ describe('test BlockHeader render', () => {
         expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
         expect(getByText('Icon')).toBeTruthy();
     });
-    test('render className when isSmall is small', () => {
+    test('should render BlockHeader className when isSmall is small', () => {
         const props = { title: '测试1', showBackground: false };
         const { container } = render(<BlockHeader {...props} />);
         const wrap = container.firstChild;
         expect(wrap.firstChild).not.toHaveClass(`background`);
     });
-    test('render className when isSmall is small', () => {
+    test('should render BlockHeader className when isSmall is small', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild;
         expect(wrap).toHaveClass(`${prefixCls}`);
@@ -85,4 +94,29 @@ describe('test BlockHeader render', () => {
         expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
         expect(getByText('Icon')).toBeTruthy();
     });
+
+    test('should render BlockHeader tooltip success', () => {
+        const { container } = render(<BlockHeader {...props3} />);
+        const wrap = container.firstChild;
+        const afterTitleWrap = wrap.firstChild.firstChild.lastChild;
+        expect(afterTitleWrap.firstChild).toHaveClass('anticon-question-circle');
+    });
+
+    test('should render BlockHeader tooltip and afterTitle success', () => {
+        const { container } = render(<BlockHeader {...props4} />);
+        const wrap = container.firstChild;
+        const afterTitleWrap = wrap.firstChild.firstChild.lastChild;
+        expect(afterTitleWrap).toHaveTextContent('我的优先级更高');
+    });
+    test('should render BlockHeader correct dom length', () => {
+        const { container } = render(<BlockHeader title="分类级别" beforeTitle="" />);
+        const titleBoxWrap = container.firstChild.firstChild.firstChild;
+        expect(titleBoxWrap.childNodes.length).toEqual(1);
+
+        const { container: container1 } = render(
+            <BlockHeader title="分类级别" afterTitle="测试" />
+        );
+        const titleBoxWrap1 = container1.firstChild.firstChild.firstChild;
+        expect(titleBoxWrap1.childNodes.length).toEqual(3);
+    });
 });
diff --git a/src/components/blockHeader/index.tsx b/src/components/blockHeader/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { UpOutlined } from '@ant-design/icons';
+import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
 
 export interface BlockHeaderProps {
     // 标题
@@ -8,6 +9,8 @@ export interface BlockHeaderProps {
     beforeTitle?: React.ReactNode;
     // 标题后的提示图标或文案
     afterTitle?: string | React.ReactNode;
+    // 默认展示为问号的toolip
+    tooltip?: React.ReactNode;
     /**
      * true 小标题 font-size: 12px; line-height: 32px
      * false 大标题 font-size: 14px; line-height: 40px
@@ -31,6 +34,7 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
     const {
         title,
         afterTitle = '',
+        tooltip = '',
         isSmall = false,
         titleRowClassName = '',
         titleClassName = '',
@@ -40,6 +44,12 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
         onChange,
     } = props;
     const { beforeTitle = <div className={`default ${isSmall ? 'small' : ''}`}></div> } = props;
+    const questionTooltip = tooltip && (
+        <Tooltip title={tooltip}>
+            <QuestionCircleOutlined />
+        </Tooltip>
+    );
+    const newAfterTitle = afterTitle || questionTooltip;
     const [expand, setExpand] = useState(defaultExpand);
 
     const handleExpand = (expand) => {
@@ -56,10 +66,13 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
                 onClick={() => handleExpand(!expand)}
             >
                 <div className={`${prefixCls}-title-box`}>
-                    <div className={`${prefixCls}-before-title`}>{beforeTitle}</div>
+                    {beforeTitle ? (
+                        <div className={`${prefixCls}-before-title`}>{beforeTitle}</div>
+                    ) : null}
                     <div className={`${prefixCls}-title ${titleClassName}`}>{title}</div>
-
-                    <div className={`${prefixCls}-after-title`}>{afterTitle}</div>
+                    {newAfterTitle ? (
+                        <div className={`${prefixCls}-after-title`}>{newAfterTitle}</div>
+                    ) : null}
                 </div>
 
                 {children && (

diff --git a/src/components/blockHeader/style.scss b/src/components/blockHeader/style.scss
@@ -2,7 +2,6 @@ $card_prefix: "dtc-block-header";
 
 .#{$card_prefix} {
     .#{$card_prefix}-title-row {
-        padding: 0 12px;
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -26,6 +25,7 @@ $card_prefix: "dtc-block-header";
             }
         }
         &.background {
+            padding: 0 12px;
             background-color: #F9F9FA;
         }
         &.pointer {

diff --git a/src/stories/blockHeader.stories.tsx b/src/stories/blockHeader.stories.tsx
@@ -29,6 +29,13 @@ const propDefinitions = [
         description: '标题后的提示图标或文案',
         defaultValue: '-',
     },
+    {
+        property: 'tooltip',
+        propType: 'string | React.ReactNode',
+        required: false,
+        description: '默认展示问号提示(优先级低于 afterTitle)',
+        defaultValue: '-',
+    },
     {
         property: 'isSmall',
         propType: 'boolean',
@@ -95,16 +102,12 @@ stories.add(
             text: `
             代码示例：
             ~~~js
+
             <p style={style}>1、默认大标题</p>
-            <BlockHeader
-                title="分类标题"
-            />
+            <BlockHeader title="分类标题" />
 
             <p style={style}>2、小标题</p>
-            <BlockHeader
-                title="小分类标题"
-                isSmall
-            />
+            <BlockHeader title="小分类标题" isSmall />
 
             <p style={style}>3、标题 + icon，有说明文字</p>
             <BlockHeader
@@ -113,39 +116,33 @@ stories.add(
                 afterTitle="说明文字"
             />
 
-            <p style={style}>4、hover 显示说明文字</p>
+            <p style={style}>4、使用 tooltip 展示问号提示</p>
+            <BlockHeader title="分类标题" tooltip="hover 才会显示说明文字哦~" />
+
+            <p style={style}>5、自定义标题图案</p>
             <BlockHeader
                 title="分类标题"
                 afterTitle={
-                    <Tooltip title={'hover 才会显示说明文字哦~'}>
-                        <QuestionCircleOutlined style={{ cursor: 'pointer' }} />
+                    <Tooltip title={'自定义图标'}>
+                        <DingdingOutlined style={{ cursor: 'pointer' }} />
                     </Tooltip>
                 }
             />
 
-            <p style={style}>5、无背景</p>
+            <p style={style}>6、无背景</p>
             <BlockHeader
                 title="分类标题"
                 showBackground={false}
-                afterTitle={
-                    <Tooltip title={'hover 才会显示说明文字哦~'}>
-                        <QuestionCircleOutlined style={{ cursor: 'pointer' }} />
-                    </Tooltip>
-                }
+                tooltip="hover 才会显示说明文字哦~"
             />
 
-            <p style={style}>6、展开/收起内容</p>
-            <BlockHeader
-                title="分类标题"
-            >
+            <p style={style}>7、展开/收起内容</p>
+            <BlockHeader title="分类标题" onChange={(expand) => console.log(expand)}>
                 Hello World!
             </BlockHeader>
 
-            <p style={style}>7、简洁版</p>
-            <BlockHeader
-                title="分类标题"
-                beforeTitle=""
-            />
+            <p style={style}>8、简洁版</p>
+            <BlockHeader title="分类标题" beforeTitle="" />
             ~~~
         `,
             TableComponent: () => PropsTable({ propDefinitions }),

diff --git a/src/stories/components/blockHeader/index.tsx b/src/stories/components/blockHeader/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { PieChartOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { DingdingOutlined, PieChartOutlined } from '@ant-design/icons';
 import BlockHeader from '../../../components/blockHeader';
 
 export default function BlockHeaderRender() {
@@ -23,33 +23,32 @@ export default function BlockHeaderRender() {
                 afterTitle="说明文字"
             />
 
-            <p style={style}>4、hover 显示说明文字</p>
+            <p style={style}>4、使用 tooltip 展示问号提示</p>
+            <BlockHeader title="分类标题" tooltip="hover 才会显示说明文字哦~" />
+
+            <p style={style}>5、自定义标题图案</p>
             <BlockHeader
                 title="分类标题"
                 afterTitle={
-                    <Tooltip title={'hover 才会显示说明文字哦~'}>
-                        <QuestionCircleOutlined style={{ cursor: 'pointer' }} />
+                    <Tooltip title={'自定义图标'}>
+                        <DingdingOutlined style={{ cursor: 'pointer' }} />
                     </Tooltip>
                 }
             />
 
-            <p style={style}>5、无背景</p>
+            <p style={style}>6、无背景</p>
             <BlockHeader
                 title="分类标题"
                 showBackground={false}
-                afterTitle={
-                    <Tooltip title={'hover 才会显示说明文字哦~'}>
-                        <QuestionCircleOutlined style={{ cursor: 'pointer' }} />
-                    </Tooltip>
-                }
+                tooltip="hover 才会显示说明文字哦~"
             />
 
-            <p style={style}>6、展开/收起内容</p>
+            <p style={style}>7、展开/收起内容</p>
             <BlockHeader title="分类标题" onChange={(expand) => console.log(expand)}>
                 Hello World!
             </BlockHeader>
 
-            <p style={style}>7、简洁版</p>
+            <p style={style}>8、简洁版</p>
             <BlockHeader title="分类标题" beforeTitle="" />
         </React.Fragment>
     );