feat(blockheader): remove hasBottom replace by spaceBottom (#564)

fix #563

Author: LuckyFBB

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

@@ -7,6 +7,7 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
     <div>
       <div
         class="dtc-block-header"
+        style="margin-bottom: 16px;"
       >
         <div
           class="dtc-block-header__title dtc-block-header__title--middle dtc-block-header__title--background"
@@ -34,6 +35,7 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
   "container": <div>
     <div
       class="dtc-block-header"
+      style="margin-bottom: 16px;"
     >
       <div
         class="dtc-block-header__title dtc-block-header__title--middle dtc-block-header__title--background"

src/blockHeader/__tests__/blockHeader.test.tsx

@@ -15,7 +15,6 @@ const props2: IBlockHeaderProps = {
     size: 'small' as SizeType,
     className: 'test__className',
     style: { height: '100px' },
-    hasBottom: true,
 };
 const props3: IBlockHeaderProps = {
     title: 'hover',
@@ -124,14 +123,14 @@ describe('test BlockHeader render', () => {
     });
 
     test('should render BlockHeader correct margin-bottom', () => {
-        const { container: noStyle } = render(<BlockHeader title="分类级别" addonBefore="" />);
-        expect(noStyle.querySelector('.dtc-block-header')).not.toHaveAttribute('style');
+        const { container: haveStyle } = render(<BlockHeader title="分类级别" addonBefore="" />);
+        expect(haveStyle.querySelector('.dtc-block-header')).toHaveAttribute('style');
         const { container: defaultBottom } = render(
             <BlockHeader title="分类级别" addonBefore="" />
         );
         expect(defaultBottom.querySelector('.dtc-block-header')).toHaveStyle({ marginBottom: 16 });
         const { container: customizeBottom } = render(
-            <BlockHeader title="分类级别" addonBefore="" hasBottom spaceBottom={10} />
+            <BlockHeader title="分类级别" addonBefore="" spaceBottom={10} />
         );
         expect(customizeBottom.querySelector('.dtc-block-header')).toHaveStyle({
             marginBottom: 10,

src/blockHeader/demos/addonBefore.tsx

@@ -6,11 +6,8 @@ export default () => {
     return (
         <>
             <BlockHeader title="分类标题" />
-            <br />
             <BlockHeader title="分类标题" addonBefore={''} />
-            <br />
             <BlockHeader title="分类标题" addonBefore={<PieChartOutlined />} />
-            <br />
             <BlockHeader title="分类标题" addonBefore={<PauseCircleOutlined />} />
         </>
     );

src/blockHeader/demos/basic.tsx

@@ -44,7 +44,6 @@ export default () => {
             <BlockHeader
                 size={size}
                 title="分类标题"
-                hasBottom
                 addonBefore={<PieChartOutlined />}
                 background={showBackground}
                 tooltip={tooltip ? '这里展示问号提示' : ''}

src/blockHeader/index.md

@@ -38,7 +38,6 @@ demo:
 | background    | 是否显示背景                       | `boolean`                               | `true`   |
 | expand        | 当前展开状态                       | `boolean`                               |          |
 | defaultExpand | 是否默认展开内容                   | `boolean`                               | `true`   |
-| hasBottom     | 是否有默认下边距 16px              | `boolean`                               | `false`  |
-| spaceBottom   | 自定义下边距，优先级高于 hasBottom | `number`                                | `0`      |
+| spaceBottom   | 自定义下边距，优先级高于 hasBottom | `number`                                | `16`     |
 | children      | 展开/收起的内容                    | `React.ReactNode`                       | -        |
 | onExpand      | 展开/收起时的回调                  | `(expand: boolean) => void`             | -        |

src/blockHeader/index.tsx

@@ -30,8 +30,6 @@ export interface IBlockHeaderProps {
      * 默认 中标题
      */
     size?: SizeType;
-    /** 是否展示 Bottom，默认 false，Bottom 值 16px */
-    hasBottom?: boolean;
     /** 自定义 Bottom 值 */
     spaceBottom?: number;
     /** 标题一行的样式类名 */
@@ -59,8 +57,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
         description = '',
         tooltip,
         size = 'middle',
-        hasBottom = false,
-        spaceBottom = 0,
+        spaceBottom = 16,
         className = '',
         style = {},
         background = true,
@@ -79,7 +76,6 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
     const tooltipProps = toTooltipProps(tooltip);
 
     let bottomStyle;
-    if (hasBottom) bottomStyle = { marginBottom: 16 };
     if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
 
     const handleExpand = (expand: boolean) => {