Skip to content

Commit 87e496e

Browse files
LuckyFBBLuckyFBB
committed
feat(blockheader): supprt cant collapse child
1 parent 2abcee9 commit 87e496e

File tree

4 files changed

+66
-34
lines changed

4 files changed

+66
-34
lines changed

‎src/blockHeader/__tests__/blockHeader.test.tsx

+21-6
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ describe('test BlockHeader render', () => {
5151
test('should render BlockHeader test click event', () => {
5252
const onChange = jest.fn();
5353
const { getByText } = render(
54-
<BlockHeader onExpand={onChange} title="测试">
54+
<BlockHeader defaultExpand onExpand={onChange} title="测试">
5555
<div>1111</div>
5656
</BlockHeader>
5757
);
@@ -60,15 +60,30 @@ describe('test BlockHeader render', () => {
6060
expect(getByText('展开')).toBeTruthy();
6161
expect(onChange).toHaveBeenCalledTimes(1);
6262
});
63-
test('should render expanded and collapsed BlockHeader normally if the onChange event is not set', () => {
64-
const { getByText } = render(
63+
test('should not render collapsed content normally', () => {
64+
render(
6565
<BlockHeader title="测试">
6666
<div>Hello World!</div>
6767
</BlockHeader>
6868
);
69-
expect(getByText('收起')).toBeTruthy();
70-
fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
71-
expect(getByText('展开')).toBeTruthy();
69+
const collapse = document.getElementsByClassName('title__collapse')[0];
70+
expect(collapse).toBeFalsy();
71+
});
72+
test('should render content class and style', () => {
73+
render(
74+
<BlockHeader
75+
title="测试"
76+
contentStyle={{ height: 200 }}
77+
contentClassName="custom__content"
78+
>
79+
<div>Hello World!</div>
80+
</BlockHeader>
81+
);
82+
const container = document.getElementsByClassName(`${prefixCls}__content`)[0];
83+
expect(container).toHaveStyle({ height: '200px' });
84+
expect(container).toHaveClass(
85+
'dtc-block-header__content dtc-block-header__content--active custom__content'
86+
);
7287
});
7388
test('should render BlockHeader with different props', () => {
7489
const { container, getByText } = render(<BlockHeader {...props2} />);

‎src/blockHeader/demos/expand.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React, { useState } from 'react';
2-
import { Space } from 'antd';
32
import { BlockHeader } from 'dt-react-component';
43

54
export default () => {
65
const [expand, setExpand] = useState(false);
76
return (
8-
<Space direction="vertical" style={{ width: '100%' }}>
7+
<>
98
<BlockHeader
109
title="非受控标题"
1110
defaultExpand={false}
@@ -15,9 +14,16 @@ export default () => {
1514
Hello World!
1615
</BlockHeader>
1716

18-
<BlockHeader title="受控标题" expand={expand} onExpand={(expand) => setExpand(expand)}>
17+
<BlockHeader
18+
title="受控标题"
19+
expand={expand}
20+
onExpand={(expand) => setExpand(expand)}
21+
hasBottom
22+
>
1923
Hello World!
2024
</BlockHeader>
21-
</Space>
25+
26+
<BlockHeader title="不可收起的标题">Hello World!</BlockHeader>
27+
</>
2228
);
2329
};

‎src/blockHeader/index.md

+20-18
Original file line numberDiff line numberDiff line change
@@ -19,26 +19,28 @@ demo:
1919
<code src="./demos/basic.tsx" description="配置大小、tooltip、描述">基础使用</code>
2020
<code src="./demos/addonBefore.tsx" description="通过 `addonBefore` 可以设置标题前的图标，不设置时默认是一个色块">自定义 icon</code>
2121
<code src="./demos/addonAfter.tsx" description="通过 `addonAfter` 可以设置后缀自定义内容块">带提示信息的标题</code>
22-
<code src="./demos/expand.tsx" description="若存在 `children` 则支持展开">展开/收起内容</code>
22+
<code src="./demos/expand.tsx" description="通过配置 expand/defaultExpand 控制展开/收起">支持 `children` 做为内容展示</code>
2323

2424
## API
2525

2626
### BlockHeader
2727

28-
| 参数 | 说明 | 类型 | 默认值 |
29-
| ----------------- | ---------------------------------- | --------------------------- | -------- |
30-
| title | 标题 | `string` | - |
31-
| addonBefore | 标题前的图标，默认是一个色块 | `React.ReactNode` | - |
32-
| description | 标题提示文案 | `React.ReactNode` | - |
33-
| tooltip | 默认展示问号提示 | `TooltipProps \| TooltipProps['title']` | - |
34-
| addonAfter | 标题后的内容 | `React.ReactNode` | - |
35-
| size | 小标题、中标题，默认为中标题 | `small \| middle \| large` | `middle` |
36-
| className | 标题一行的样式类名 | `string` | - |
37-
| style | 标题的样式 | `React.CSSProperties` | - |
38-
| background | 是否显示背景 | `boolean` | `true` |
39-
| expand | 当前展开状态 | `boolean` | |
40-
| defaultExpand | 是否默认展开内容 | `boolean` | `true` |
41-
| hasBottom | 是否有默认下边距 16px | `boolean` | `false` |
42-
| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `0` |
43-
| children | 展开/收起的内容 | `React.ReactNode` | - |
44-
| onExpand | 展开/收起时的回调 | `(expand: boolean) => void` | - |
28+
| 参数 | 说明 | 类型 | 默认值 |
29+
| ---------------- | ---------------------------------- | --------------------------------------- | -------- |
30+
| title | 标题 | `string` | - |
31+
| addonBefore | 标题前的图标，默认是一个色块 | `React.ReactNode` | - |
32+
| description | 标题提示文案 | `React.ReactNode` | - |
33+
| tooltip | 默认展示问号提示 | `TooltipProps \| TooltipProps['title']` | - |
34+
| addonAfter | 标题后的内容 | `React.ReactNode` | - |
35+
| size | 小标题、中标题，默认为中标题 | `small \| middle \| large` | `middle` |
36+
| className | 标题的样式类名 | `string` | - |
37+
| style | 标题的样式 | `React.CSSProperties` | - |
38+
| contentClassName | 展示内容的样式类名 | `string` | - |
39+
| contentStyle | 展示内容的样式 | `React.CSSProperties` | - |
40+
| background | 是否显示背景 | `boolean` | `true` |
41+
| defaultExpand | 是否默认展开内容 | `boolean` | `true` |
42+
| hasBottom | 是否有默认下边距 16px | `boolean` | `false` |
43+
| expand | 当前展开状态 | `boolean` | |
44+
| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `0` |
45+
| children | 展开/收起的内容 | `React.ReactNode` | - |
46+
| onExpand | 展开/收起时的回调 | `(expand: boolean) => void` | - |

‎src/blockHeader/index.tsx

+15-6
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ export interface IBlockHeaderProps {
3838
className?: string;
3939
/** 标题的样式类名 */
4040
style?: React.CSSProperties;
41+
// 展示内容(children)的样式类名
42+
contentClassName?: string;
43+
// 展示内容(children)的样式
44+
contentStyle?: React.CSSProperties;
4145
/** 是否显示背景, 默认 true */
4246
background?: boolean;
4347
/** 当前展开状态 */
@@ -62,9 +66,11 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
6266
hasBottom = false,
6367
spaceBottom = 0,
6468
className = '',
69+
contentClassName = '',
6570
style = {},
71+
contentStyle = {},
6672
background = true,
67-
defaultExpand = true,
73+
defaultExpand,
6874
addonAfter,
6975
expand,
7076
children = '',
@@ -76,6 +82,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
7682

7783
const currentExpand = isControlled(props) ? expand : internalExpand;
7884

85+
const showCollapse = typeof expand === 'boolean' || typeof defaultExpand === 'boolean';
86+
7987
const tooltipProps = toTooltipProps(tooltip);
8088

8189
let bottomStyle;
@@ -93,9 +101,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
93101
<div
94102
className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
95103
[`${preTitleRowCls}--background`]: background,
96-
[`${preTitleRowCls}--pointer`]: children,
104+
[`${preTitleRowCls}--pointer`]: showCollapse && children,
97105
})}
98-
onClick={() => handleExpand(!currentExpand)}
106+
onClick={() => showCollapse && handleExpand(!currentExpand)}
99107
>
100108
<div className="title__box">
101109
{addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
@@ -110,7 +118,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
110118
{description ? <div className={`title__description`}>{description}</div> : null}
111119
</div>
112120
{addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
113-
{children && (
121+
{children && showCollapse && (
114122
<div className={`title__collapse`}>
115123
<div className="collapse__text">{currentExpand ? '收起' : '展开'}</div>
116124
<UpOutlined
@@ -124,9 +132,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
124132
</div>
125133
{children && (
126134
<div
127-
className={classNames(`${prefixCls}__content`, {
128-
[`${prefixCls}__content--active`]: currentExpand,
135+
className={classNames(`${prefixCls}__content`, contentClassName, {
136+
[`${prefixCls}__content--active`]: currentExpand || !showCollapse,
129137
})}
138+
style={contentStyle}
130139
>
131140
{children}
132141
</div>

0 commit comments

Comments
 (0)