feat: develop BlockHeader doc (#298)

* feat: develop BlockHeader doc

* feat: supplementary BlockHeader unit test

* docs: optimized blockerHeader customIcon and size demos

* refactor: blockHeader api and className

* test: fix unit test

Author: kongshan-zhuyu

src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
         class="dtc-block-header"
       >
         <div
-          class="dtc-block-header-title-row default background  "
+          class="dtc-block-header-title-row dtc-block-header-title-row-middle dtc-block-header-title-row-background"
         >
           <div
             class="dtc-block-header-title-box"
@@ -18,7 +18,7 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
               class="dtc-block-header-before-title"
             >
               <div
-                class="default "
+                class="dtc-block-header__beforeTitle-middle"
               />
             </div>
             <div
@@ -39,7 +39,7 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
       class="dtc-block-header"
     >
       <div
-        class="dtc-block-header-title-row default background  "
+        class="dtc-block-header-title-row dtc-block-header-title-row-middle dtc-block-header-title-row-background"
       >
         <div
           class="dtc-block-header-title-box"
@@ -48,7 +48,7 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
             class="dtc-block-header-before-title"
           >
             <div
-              class="default "
+              class="dtc-block-header__beforeTitle-middle"
             />
           </div>
           <div

src/blockHeader/__tests__/blockHeader.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import BlockHeader from '../index';
 import '@testing-library/jest-dom/extend-expect';
+import { SizeType } from 'dt-react-component/esm/blockHeader';
 
 const props = {
     title: '标题1',
@@ -11,7 +12,7 @@ const props2 = {
     beforeTitle: <span>Icon</span>,
     afterTitle: '说明文字',
     addonAfter: <div className="test-button-after">新增按钮</div>,
-    isSmall: true,
+    size: 'small' as SizeType,
     titleRowClassName: 'test-row-className',
     titleClassName: 'test-title-className',
 };
@@ -41,10 +42,9 @@ describe('test BlockHeader render', () => {
         expect(getByText('标题2')).toBeTruthy();
     });
     test('should render BlockHeader props default in BlockHeader', () => {
-        const { container } = render(<BlockHeader title="测试" isSmall showBackground />);
+        const { container } = render(<BlockHeader title="测试" 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('should render BlockHeader with different props', () => {
@@ -70,6 +70,16 @@ describe('test BlockHeader render', () => {
         expect(getByText('展开')).toBeTruthy();
         expect(onChange).toHaveBeenCalledTimes(1);
     });
+    test('should render expanded and collapsed BlockHeader normally if the onChange event is not set', () => {
+        const { getByText } = render(
+            <BlockHeader title="测试">
+                <div>Hello World!</div>
+            </BlockHeader>
+        );
+        expect(getByText('收起')).toBeTruthy();
+        fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
+        expect(getByText('展开')).toBeTruthy();
+    });
     test('should render BlockHeader with different props', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild;

src/blockHeader/demos/background.tsx

@@ -1,6 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { BlockHeader } from 'dt-react-component';
+import { Switch } from 'antd';
 
 export default () => {
-    return <BlockHeader title="分类标题" />;
+    const [showBackground, setShowBackground] = useState(true);
+    return (
+        <>
+            背景：
+            <Switch defaultChecked onChange={setShowBackground} />
+            <br />
+            <br />
+            <BlockHeader title="分类标题" showBackground={showBackground} />
+        </>
+    );
 };

src/blockHeader/demos/basic.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
-import { PieChartOutlined } from '@ant-design/icons';
+import { PieChartOutlined, PauseCircleOutlined } from '@ant-design/icons';
 import { BlockHeader } from 'dt-react-component';
-import { Divider } from 'antd';
 
 export default () => {
     return (
         <>
+            <BlockHeader title="分类标题" />
+            <br />
             <BlockHeader
                 title="分类标题"
                 beforeTitle={<PieChartOutlined style={{ fontSize: '14px' }} />}
             />
-            <Divider />
-            <BlockHeader title="分类标题" beforeTitle="" />
+            <br />
+            <BlockHeader
+                title="分类标题"
+                beforeTitle={<PauseCircleOutlined style={{ fontSize: '14px' }} />}
+            />
         </>
     );
 };

src/blockHeader/demos/customIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BlockHeader } from 'dt-react-component';
+
+export default () => {
+    return (
+        <>
+            <BlockHeader title="分类标题" afterTitle="说明文字" />
+            <br />
+            <BlockHeader title="分类标题" tooltip="hover展示更多" />
+        </>
+    );
+};

src/blockHeader/demos/description.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { Radio } from 'antd';
+import { BlockHeader } from 'dt-react-component';
+import { SizeType } from 'dt-react-component/esm/blockHeader';
+
+export default () => {
+    const [size, setSize] = useState<SizeType>('middle');
+    return (
+        <>
+            <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
+                <Radio.Button value="middle">Default</Radio.Button>
+                <Radio.Button value="small">Small</Radio.Button>
+            </Radio.Group>
+            <br />
+            <br />
+            <BlockHeader title="分类标题" size={size} />
+        </>
+    );
+};