feat(blockheader): supprt cant collapse child

DTStack · Sep 9, 2024 · 87e496e · 87e496e
1 parent 2abcee9
commit 87e496e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 34 deletions.
diff --git a/src/blockHeader/__tests__/blockHeader.test.tsx b/src/blockHeader/__tests__/blockHeader.test.tsx
@@ -51,7 +51,7 @@ describe('test BlockHeader render', () => {
     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>
         );
@@ -60,15 +60,30 @@ 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(
+    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} />);

diff --git a/src/blockHeader/demos/expand.tsx b/src/blockHeader/demos/expand.tsx
@@ -1,11 +1,10 @@
 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}
@@ -15,9 +14,16 @@ export default () => {
                 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>
+        </>
     );
 };
diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md
@@ -19,26 +19,28 @@ demo:
 <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>
+<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`   |
-| hasBottom         | 是否有默认下边距 16px              | `boolean`                   | `false`  |
-| spaceBottom       | 自定义下边距，优先级高于 hasBottom | `number`                    | `0`      |
-| 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`                               | `true`   |
+| hasBottom        | 是否有默认下边距 16px              | `boolean`                               | `false`  |
+| expand           | 当前展开状态                       | `boolean`                               |          |
+| spaceBottom      | 自定义下边距，优先级高于 hasBottom | `number`                                | `0`      |
+| children         | 展开/收起的内容                    | `React.ReactNode`                       | -        |
+| onExpand         | 展开/收起时的回调                  | `(expand: boolean) => void`             | -        |
diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
@@ -38,6 +38,10 @@ export interface IBlockHeaderProps {
     className?: string;
     /** 标题的样式类名 */
     style?: React.CSSProperties;
+    // 展示内容(children)的样式类名
+    contentClassName?: string;
+    // 展示内容(children)的样式
+    contentStyle?: React.CSSProperties;
     /** 是否显示背景, 默认 true */
     background?: boolean;
     /** 当前展开状态 */
@@ -62,9 +66,11 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
         hasBottom = false,
         spaceBottom = 0,
         className = '',
+        contentClassName = '',
         style = {},
+        contentStyle = {},
         background = true,
-        defaultExpand = true,
+        defaultExpand,
         addonAfter,
         expand,
         children = '',
@@ -76,6 +82,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const currentExpand = isControlled(props) ? expand : internalExpand;
 
+    const showCollapse = typeof expand === 'boolean' || typeof defaultExpand === 'boolean';
+
     const tooltipProps = toTooltipProps(tooltip);
 
     let bottomStyle;
@@ -93,9 +101,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
             <div
                 className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
                     [`${preTitleRowCls}--background`]: background,
-                    [`${preTitleRowCls}--pointer`]: children,
+                    [`${preTitleRowCls}--pointer`]: showCollapse && children,
                 })}
-                onClick={() => handleExpand(!currentExpand)}
+                onClick={() => showCollapse && handleExpand(!currentExpand)}
             >
                 <div className="title__box">
                     {addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
@@ -110,7 +118,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 && (
+                {children && showCollapse && (
                     <div className={`title__collapse`}>
                         <div className="collapse__text">{currentExpand ? '收起' : '展开'}</div>
                         <UpOutlined
@@ -124,9 +132,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>