feat(blockheader): supprt large size and change some props name (#478)

* feat(blockheader): supprt large size and change some props name

* feat(blockheader): supprt padding for blockheader children

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

* feat(blockheader): change classname to use BEM

* feat(blockheader): change classname and add style

* feat(blockheader): change doc and ts

* feat(blockheader): use utils toTooltipProps and use BEM style

Author: LuckyFBB

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

@@ -9,28 +9,25 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
         class="dtc-block-header"
       >
         <div
-          class="dtc-block-header-title-row dtc-block-header-title-row-middle dtc-block-header-title-row-background"
+          class="dtc-block-header__title dtc-block-header__title--middle dtc-block-header__title--background"
         >
           <div
-            class="dtc-block-header-title-box"
+            class="title__box"
           >
             <div
-              class="dtc-block-header-before-title"
+              class="title__addon-before"
             >
               <div
-                class="dtc-block-header__beforeTitle-middle"
+                class="title__addon-before--middle"
               />
             </div>
             <div
-              class="dtc-block-header-title "
+              class="title__text"
             >
               标题1
             </div>
           </div>
         </div>
-        <div
-          class="dtc-block-header-content "
-        />
       </div>
     </div>
   </body>,
@@ -39,28 +36,25 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
       class="dtc-block-header"
     >
       <div
-        class="dtc-block-header-title-row dtc-block-header-title-row-middle dtc-block-header-title-row-background"
+        class="dtc-block-header__title dtc-block-header__title--middle dtc-block-header__title--background"
       >
         <div
-          class="dtc-block-header-title-box"
+          class="title__box"
         >
           <div
-            class="dtc-block-header-before-title"
+            class="title__addon-before"
           >
             <div
-              class="dtc-block-header__beforeTitle-middle"
+              class="title__addon-before--middle"
             />
           </div>
           <div
-            class="dtc-block-header-title "
+            class="title__text"
           >
             标题1
           </div>
         </div>
       </div>
-      <div
-        class="dtc-block-header-content "
-      />
     </div>
   </div>,
   "debug": [Function],

src/blockHeader/__tests__/blockHeader.test.tsx

@@ -2,28 +2,29 @@ import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import BlockHeader, { SizeType } from '../index';
+import BlockHeader, { IBlockHeaderProps, SizeType } from '../index';
 
-const props = {
+const props: IBlockHeaderProps = {
     title: '标题1',
 };
-const props2 = {
+const props2: IBlockHeaderProps = {
     title: '标题2',
-    beforeTitle: <span>Icon</span>,
-    afterTitle: '说明文字',
+    addonBefore: <span>Icon</span>,
+    description: '说明文字',
     addonAfter: <div className="test-button-after">新增按钮</div>,
     size: 'small' as SizeType,
-    titleRowClassName: 'test-row-className',
-    titleClassName: 'test-title-className',
+    className: 'test__className',
+    style: { height: '100px' },
+    hasBottom: true,
 };
-const props3 = {
+const props3: IBlockHeaderProps = {
     title: 'hover',
     tooltip: 'hover 展示',
 };
-const props4 = {
+const props4: IBlockHeaderProps = {
     title: 'hover',
     tooltip: 'hover 展示',
-    afterTitle: '我的优先级更高',
+    description: '说明文字',
 };
 const prefixCls = 'dtc-block-header';
 
@@ -42,21 +43,10 @@ describe('test BlockHeader render', () => {
         expect(getByText('标题2')).toBeTruthy();
     });
     test('should render BlockHeader props default in BlockHeader', () => {
-        const { container } = render(<BlockHeader title="测试" showBackground />);
+        const { container } = render(<BlockHeader title="测试" background />);
         const wrap = container.firstChild;
-        expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass(`${prefixCls}-before-title`);
-        fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
-    });
-    test('should render BlockHeader with different props', () => {
-        const { container, getByText } = render(<BlockHeader {...props2} />);
-        const wrap = container.firstChild;
-        expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap!.lastChild).toHaveClass(`${prefixCls}-content`);
-        expect(wrap!.firstChild).toHaveClass(`test-row-className`);
-        expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
-        expect(getByText('新增按钮')).toHaveClass(`test-button-after`);
-        expect(getByText('Icon')).toBeTruthy();
+        expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass('title__addon-before');
+        fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
     });
     test('should render BlockHeader test click event', () => {
         const onChange = jest.fn();
@@ -66,7 +56,7 @@ describe('test BlockHeader render', () => {
             </BlockHeader>
         );
         expect(getByText('收起')).toBeTruthy();
-        fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
+        fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
         expect(getByText('展开')).toBeTruthy();
         expect(onChange).toHaveBeenCalledTimes(1);
     });
@@ -77,33 +67,30 @@ describe('test BlockHeader render', () => {
             </BlockHeader>
         );
         expect(getByText('收起')).toBeTruthy();
-        fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
+        fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
         expect(getByText('展开')).toBeTruthy();
     });
     test('should render BlockHeader with different props', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild;
-        expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap!.lastChild).toHaveClass(`${prefixCls}-content`);
-        expect(wrap!.firstChild).toHaveClass(`test-row-className`);
-        expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
+        expect(wrap).toHaveClass(`${prefixCls} test__className`);
+        expect(wrap).toHaveStyle({ height: '100px', marginBottom: '16px' });
+        expect(getByText('标题2')).toHaveClass('title__text');
+        expect(getByText('说明文字')).toHaveClass('title__description');
         expect(getByText('Icon')).toBeTruthy();
     });
-    test('should render BlockHeader className when isSmall is small', () => {
-        const props = { title: '测试1', showBackground: false };
+    test('should render BlockHeader background success', () => {
+        const props = { title: '测试1', background: false };
         const { container } = render(<BlockHeader {...props} />);
         const wrap = container.firstChild;
         expect(wrap!.firstChild).not.toHaveClass(`background`);
     });
     test('should render BlockHeader className when isSmall is small', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild!;
-        expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap.lastChild).toHaveClass(`${prefixCls}-content`);
-        expect(wrap.firstChild).toHaveClass(`test-row-className`);
-        expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
+        expect(wrap).toHaveClass(`${prefixCls} test__className`);
+        expect(getByText('标题2')).toHaveClass('title__text');
+        expect(getByText('说明文字')).toHaveClass('title__description');
         expect(getByText('Icon')).toBeTruthy();
     });
 
@@ -114,32 +101,32 @@ describe('test BlockHeader render', () => {
         expect(afterTitleWrap!.firstChild).toHaveClass('anticon-question-circle');
     });
 
-    test('should render BlockHeader tooltip and afterTitle success', () => {
+    test('should render BlockHeader tooltip and desc success', () => {
         const { container } = render(<BlockHeader {...props4} />);
         const wrap = container.firstChild!;
         const afterTitleWrap = wrap.firstChild!.firstChild!.lastChild;
-        expect(afterTitleWrap).toHaveTextContent('我的优先级更高');
+        expect(afterTitleWrap).toHaveTextContent('说明文字');
     });
     test('should render BlockHeader correct dom length', () => {
-        const { container } = render(<BlockHeader title="分类级别" beforeTitle="" />);
+        const { container } = render(<BlockHeader title="分类级别" addonBefore="" />);
         const titleBoxWrap = container.firstChild!.firstChild!.firstChild;
         expect(titleBoxWrap!.childNodes.length).toEqual(1);
 
         const { container: container1 } = render(
-            <BlockHeader title="分类级别" afterTitle="测试" />
+            <BlockHeader title="分类级别" description="测试" />
         );
         const titleBoxWrap1 = container1.firstChild!.firstChild!.firstChild;
         expect(titleBoxWrap1!.childNodes.length).toEqual(3);
     });
     test('should render BlockHeader correct margin-bottom', () => {
-        const { container: noStyle } = render(<BlockHeader title="分类级别" beforeTitle="" />);
+        const { container: noStyle } = render(<BlockHeader title="分类级别" addonBefore="" />);
         expect(noStyle.querySelector('.dtc-block-header')).not.toHaveAttribute('style');
         const { container: defaultBottom } = render(
-            <BlockHeader title="分类级别" beforeTitle="" />
+            <BlockHeader title="分类级别" addonBefore="" />
         );
         expect(defaultBottom.querySelector('.dtc-block-header')).toHaveStyle({ marginBottom: 16 });
         const { container: customizeBottom } = render(
-            <BlockHeader title="分类级别" beforeTitle="" hasBottom spaceBottom={10} />
+            <BlockHeader title="分类级别" addonBefore="" hasBottom spaceBottom={10} />
         );
         expect(customizeBottom.querySelector('.dtc-block-header')).toHaveStyle({
             marginBottom: 10,

src/blockHeader/demos/addonAfter.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Input, Space } from 'antd';
+import { BlockHeader } from 'dt-react-component';
+
+export default () => (
+    <Space size={12} direction="vertical" style={{ width: '100%' }}>
+        <BlockHeader title="分类标题" addonAfter="这是 addonAfter 内容" />
+        <BlockHeader
+            background={false}
+            title="分类标题"
+            addonAfter={<Input placeholder="请输入" />}
+            tooltip={{ title: '这里展示问号提示' }}
+        />
+    </Space>
+);

src/blockHeader/demos/customIcon.tsx src/blockHeader/demos/addonBefore.tsxsrc/blockHeader/demos/customIcon.tsx renamed to src/blockHeader/demos/addonBefore.tsx

@@ -9,12 +9,12 @@ export default () => {
             <br />
             <BlockHeader
                 title="分类标题"
-                beforeTitle={<PieChartOutlined style={{ fontSize: '14px' }} />}
+                addonBefore={<PieChartOutlined style={{ fontSize: '14px' }} />}
             />
             <br />
             <BlockHeader
                 title="分类标题"
-                beforeTitle={<PauseCircleOutlined style={{ fontSize: '14px' }} />}
+                addonBefore={<PauseCircleOutlined style={{ fontSize: '14px' }} />}
             />
         </>
     );

src/blockHeader/demos/basic.tsx

@@ -1,16 +1,52 @@
 import React, { useState } from 'react';
-import { Switch } from 'antd';
+import { Radio, Space, Switch } from 'antd';
 import { BlockHeader } from 'dt-react-component';
+import { SizeType } from 'dt-react-component/blockHeader';
 
 export default () => {
+    const [size, setSize] = useState<SizeType>('middle');
     const [showBackground, setShowBackground] = useState(true);
+    const [tooltip, setTooltip] = useState(true);
+    const [description, setDescription] = useState(true);
+
     return (
-        <>
-            背景：
-            <Switch defaultChecked onChange={setShowBackground} />
+        <div>
+            <Space direction="vertical" size={12}>
+                <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
+                    <Radio.Button value="small">Small</Radio.Button>
+                    <Radio.Button value="middle">Middle</Radio.Button>
+                    <Radio.Button value="large">Large</Radio.Button>
+                </Radio.Group>
+                <Space direction="horizontal" size={12}>
+                    <Switch
+                        defaultChecked
+                        onChange={setShowBackground}
+                        checkedChildren="带背景"
+                        unCheckedChildren="不带背景"
+                    />
+                    <Switch
+                        defaultChecked
+                        onChange={setTooltip}
+                        checkedChildren="展示 tooltip"
+                        unCheckedChildren="不展示 tooltip"
+                    />
+                    <Switch
+                        defaultChecked
+                        onChange={setDescription}
+                        checkedChildren="展示说明文字"
+                        unCheckedChildren="不展示说明文字"
+                    />
+                </Space>
+            </Space>
             <br />
             <br />
-            <BlockHeader title="分类标题" showBackground={showBackground} />
-        </>
+            <BlockHeader
+                size={size}
+                title="分类标题"
+                background={showBackground}
+                tooltip={tooltip && '这里展示问号提示'}
+                description={description && '提示说明文字'}
+            />
+        </div>
     );
 };

src/blockHeader/demos/extraInfo.tsx

@@ -16,29 +16,29 @@ demo:
 
 ## 示例
 
-<code src="./demos/basic.tsx" description="通过设置 `showBackground={false}` 去除标题背景，默认为 `true`">基础使用</code>
-<code src="./demos/size.tsx" description="标题有中、小两种尺寸，默认为中尺寸，通过设置 `size='small'` 把标题设置为小尺寸">标题尺寸</code>
-<code src="./demos/extraInfo.tsx" description="通过设置 `afterTitle` 和 `tooltip` 可以增加两种不同形式的提示信息，同时存在时仅 `afterTitle` 生效">带提示信息的标题</code>
-<code src="./demos/customIcon.tsx" description="通过设置 `beforeTitle` 可以自定义标题icon，不设置时默认是一个色块">自定义 icon</code>
+<code src="./demos/basic.tsx" description="配置大小、tooltip、描述">基础使用</code>
+<code src="./demos/addonBefore.tsx" description="通过 `addonBefore` 可以设置标题前的图标，不设置时默认是一个色块">自定义 icon</code>
+<code src="./demos/addonAfter.tsx" description="通过 `addonAfter` 可以设置后缀自定义内容块">带提示信息的标题</code>
 <code src="./demos/expand.tsx" description="若存在 `children` 则支持展开">展开/收起内容</code>
 
 ## API
 
 ### BlockHeader
 
-| 参数              | 说明                                      | 类型                        | 默认值  |
-| ----------------- | ----------------------------------------- | --------------------------- | ------- |
-| title             | 标题                                      | `string`                    | -       |
-| beforeTitle       | 标题前的图标，默认是一个色块              | `React.ReactNode`           | -       |
-| afterTitle        | 标题后的提示图标或文案                    | `React.ReactNode`           | -       |
-| tooltip           | 默认展示问号提示(优先级低于 `afterTitle`) | `React.ReactNode`           | -       |
-| isSmall           | 大标题、小标题，默认为大标题              | `boolean`                   | `false` |
-| titleRowClassName | 标题一行的样式类名                        | `string`                    | -       |
-| titleClassName    | 标题的样式类名                            | `string`                    | -       |
-| showBackground    | 是否显示背景                              | `boolean`                   | `true`  |
-| defaultExpand     | 是否默认展开内容                          | `boolean`                   | `true`  |
+| 参数              | 说明                               | 类型                        | 默认值   |
+| ----------------- | ---------------------------------- | --------------------------- | -------- |
+| title             | 标题                               | `string`                    | -        |
+| addonBefore       | 标题前的图标，默认是一个色块       | `React.ReactNode`           | -        |
+| description       | 标题提示文案                       | `React.ReactNode`           | -        |
+| tooltip           | 默认展示问号提示                   | `TooltipProps \| TooltipProps['title']` | -        |
+| addonAfter        | 标题后的内容                       | `React.ReactNode`           | -        |
+| size              | 小标题、中标题，默认为中标题       | `small \| middle \| large`  | `middle` |
+| className     | 标题一行的样式类名                 | `string`                                | -        |
+| style         | 标题的样式                         | `React.CSSProperties`                   | -        |
+| background        | 是否显示背景                       | `boolean`                   | `true`   |
 | expand            | 当前展开状态                              | `boolean`                   |         |
-| hasBottom         | 是否有默认下边距 16px                     | `boolean`                   | `false` |
-| spaceBottom       | 自定义下边距，优先级高于 hasBottom        | `number`                    | `0`     |
-| children          | 展开/收起的内容                           | `React.ReactNode`           | -       |
+| defaultExpand     | 是否默认展开内容                   | `boolean`                   | `true`   |
+| hasBottom         | 是否有默认下边距 16px              | `boolean`                   | `false`  |
+| spaceBottom       | 自定义下边距，优先级高于 hasBottom | `number`                    | `0`      |
+| children          | 展开/收起的内容                    | `React.ReactNode`           | -        |
 | onExpand          | 展开/收起时的回调                         | `(expand: boolean) => void` | -       |