feat(blockheader): support cant collapse child

src/blockHeader/__tests__/blockHeader.test.tsx

@@ -44,13 +44,13 @@
     test('should render BlockHeader props default in BlockHeader', () => {
         const { container } = render(<BlockHeader title="测试" background />);
         const wrap = container.firstChild;
         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();
         const { getByText } = render(
-            <BlockHeader onExpand={onChange} title="测试">
+            <BlockHeader defaultExpand onExpand={onChange} title="测试">
                 <div>1111</div>
             </BlockHeader>
         );
@@ -59,15 +59,30 @@
         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(
+    test('should not render collapsed content normally', () => {
+        render(
             <BlockHeader title="测试">
                 <div>Hello World!</div>
             </BlockHeader>
         );
-        expect(getByText('收起')).toBeTruthy();
-        fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
-        expect(getByText('展开')).toBeTruthy();
+        const collapse = document.getElementsByClassName('title__collapse')[0];
+        expect(collapse).toBeFalsy();
+    });
+    test('should render content class and style', () => {
+        render(
+            <BlockHeader
+                title="测试"
+                contentStyle={{ height: 200 }}
+                contentClassName="custom__content"
+            >
+                <div>Hello World!</div>
+            </BlockHeader>
+        );
+        const container = document.getElementsByClassName(`${prefixCls}__content`)[0];
+        expect(container).toHaveStyle({ height: '200px' });
+        expect(container).toHaveClass(
+            'dtc-block-header__content dtc-block-header__content--active custom__content'
+        );
     });
     test('should render BlockHeader with different props', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
@@ -82,11 +97,11 @@
         const props = { title: '测试1', background: false };
         const { container } = render(<BlockHeader {...props} />);
         const wrap = container.firstChild;
         expect(wrap!.firstChild).not.toHaveClass(`dtc-block-header__title--background`);
     });
     test('should render BlockHeader className when size is small', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild!;
         expect(wrap).toHaveClass(`${prefixCls} test__className`);
         expect(wrap.firstChild).toHaveClass(
             `dtc-block-header__title dtc-block-header__title--small dtc-block-header__title--background`
@@ -98,14 +113,14 @@
 
     test('should render BlockHeader tooltip success', () => {
         const { container } = render(<BlockHeader {...props3} />);
         const wrap = container.firstChild!;
         const tooltipWrap = wrap.firstChild!.firstChild!.lastChild;
         expect(tooltipWrap!.firstChild).toHaveClass('anticon-question-circle');
     });
 
     test('should render BlockHeader description success', () => {
         const { container } = render(<BlockHeader {...props4} />);
         const wrap = container.firstChild!;
         const description = wrap.firstChild!.firstChild!.lastChild;
         expect(description).toHaveTextContent('说明文字');
     });

src/blockHeader/demos/expand.tsx

@@ -1,22 +1,29 @@
 import React, { useState } from 'react';
-import { Space } from 'antd';
 import { BlockHeader } from 'dt-react-component';
 
 export default () => {
     const [expand, setExpand] = useState(false);
     return (
-        <Space direction="vertical" style={{ width: '100%' }}>
+        <>
             <BlockHeader
                 title="非受控标题"
                 defaultExpand={false}
+                hasBottom
                 onExpand={(expand) => console.log(expand)}
             >
                 Hello World!
             </BlockHeader>
 
-            <BlockHeader title="受控标题" expand={expand} onExpand={(expand) => setExpand(expand)}>
+            <BlockHeader
+                title="受控标题"
+                expand={expand}
+                onExpand={(expand) => setExpand(expand)}
+                hasBottom
+            >
                 Hello World!
             </BlockHeader>
-        </Space>
+
+            <BlockHeader title="不可收起的标题">Hello World!</BlockHeader>
+        </>
     );
 };

src/blockHeader/index.md

@@ -19,25 +19,27 @@ demo:
 <code src="./demos/basic.tsx" description="配置大小、tooltip、描述">基础使用</code>
 <code src="./demos/addonBefore.tsx" description="通过 `addonBefore` 可以设置标题前的图标，不设置时默认是一个色块，设置为假值(`undefined` 除外)不展示图标">自定义 icon</code>
 <code src="./demos/addonAfter.tsx" description="通过 `addonAfter` 可以设置后缀自定义内容块">带提示信息的标题</code>
-<code src="./demos/expand.tsx" description="若存在 `children` 则支持展开">展开/收起内容</code>
+<code src="./demos/expand.tsx" description="通过配置 expand/defaultExpand 控制展开/收起">支持 `children` 做为内容展示</code>
 
 ## API
 
 ### BlockHeader
 
-| 参数          | 说明                               | 类型                                    | 默认值   |
-| ------------- | ---------------------------------- | --------------------------------------- | -------- |
-| 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`                               |          |
-| defaultExpand | 是否默认展开内容                   | `boolean`                               | `true`   |
-| spaceBottom   | 自定义下边距，优先级高于 hasBottom | `number`                                | `16`     |
-| children      | 展开/收起的内容                    | `React.ReactNode`                       | -        |
-| onExpand      | 展开/收起时的回调                  | `(expand: boolean) => void`             | -        |
+| 参数             | 说明                               | 类型                                    | 默认值   |
+| ---------------- | ---------------------------------- | --------------------------------------- | -------- |
+| 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`                   | -        |
+| contentClassName | 展示内容的样式类名                 | `string`                                | -        |
+| contentStyle     | 展示内容的样式                     | `React.CSSProperties`                   | -        |
+| background       | 是否显示背景                       | `boolean`                               | `true`   |
+| defaultExpand    | 是否默认展开内容                   | `boolean`                               | `-`   |
+| expand           | 当前展开状态                       | `boolean`                               |          |
+| spaceBottom      | 自定义下边距，优先级高于 hasBottom | `number`                                | `16`      |
+| children         | 展开/收起的内容                    | `React.ReactNode`                       | -        |
+| onExpand         | 展开/收起时的回调                  | `(expand: boolean) => void`             | -        |

src/blockHeader/index.tsx

@@ -21,7 +21,7 @@ export interface IBlockHeaderProps {
     description?: ReactNode;
     /** 默认展示为问号的tooltip */
     tooltip?: LabelTooltipType;
-    /**  后缀自定义内容块 */
+    /** 后缀自定义内容块 */
     addonAfter?: ReactNode;
     /**
      * 小标题 font-size: 12px; line-height: 32px
@@ -36,11 +36,15 @@ export interface IBlockHeaderProps {
     className?: string;
     /** 标题的样式类名 */
     style?: React.CSSProperties;
+    /** 展示内容(children)的样式类名 */
+    contentClassName?: string;
+    /** 展示内容(children)的样式 */
+    contentStyle?: React.CSSProperties;
     /** 是否显示背景, 默认 true */
     background?: boolean;
     /** 当前展开状态 */
     expand?: boolean;
-    /** 是否默认展开内容, 默认 true */
+    /** 是否默认展开内容, 默认为 undefined */
     defaultExpand?: boolean;
     /** 展开/收起的内容 */
     children?: ReactNode;
@@ -59,9 +63,11 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
         size = 'middle',
         spaceBottom = 16,
         className = '',
+        contentClassName = '',
         style = {},
+        contentStyle = {},
         background = true,
-        defaultExpand = true,
+        defaultExpand,
         addonAfter,
         expand,
         children = '',
@@ -73,6 +79,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const currentExpand = isControlled(props) ? expand : internalExpand;
 
+    // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
+    const showCollapse =
+        (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
+
     const tooltipProps = toTooltipProps(tooltip);
 
     let bottomStyle;
@@ -89,9 +99,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
             <div
                 className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
                     [`${preTitleRowCls}--background`]: background,
-                    [`${preTitleRowCls}--pointer`]: children,
+                    [`${preTitleRowCls}--pointer`]: showCollapse,
                 })}
-                onClick={() => handleExpand(!currentExpand)}
+                onClick={() => showCollapse && handleExpand(!currentExpand)}
             >
                 <div className="title__box">
                     {addonBefore ? (
@@ -110,7 +120,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                     {description ? <div className={`title__description`}>{description}</div> : null}
                 </div>
                 {addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
-                {children && (
+                {showCollapse && (
                     <div className={`title__collapse`}>
                         <div className="collapse__text">{currentExpand ? '收起' : '展开'}</div>
                         <UpOutlined
@@ -124,9 +134,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
             </div>
             {children && (
                 <div
-                    className={classNames(`${prefixCls}__content`, {
-                        [`${prefixCls}__content--active`]: currentExpand,
+                    className={classNames(`${prefixCls}__content`, contentClassName, {
+                        [`${prefixCls}__content--active`]: currentExpand || !showCollapse,
                     })}
+                    style={contentStyle}
                 >
                     {children}
                 </div>