Skip to content

Commit 479bcf3

Browse files
LuckyFBBLuckyFBB
committed
feat(blockheader): supprt cant collapse child
1 parent cfc126b commit 479bcf3

File tree

4 files changed

+78
-35
lines changed

4 files changed

+78
-35
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__title--middle 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-
| defaultExpand | 是否默认展开内容 | `boolean` | `true` |
40-
| hasBottom | 是否有默认下边距 16px | `boolean` | `false` |
41-
| expand | 当前展开状态 | `boolean` | |
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

+27-7
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ export interface IBlockHeaderProps {
5050
className?: string;
5151
// 标题的样式
5252
style?: React.CSSProperties;
53+
// 展示内容(children)的样式类名
54+
contentClassName?: string;
55+
// 展示内容(children)的样式
56+
contentStyle?: React.CSSProperties;
5357
/** 是否显示背景, 默认 true */
5458
background?: boolean;
5559
/** 当前展开状态 */
@@ -71,9 +75,11 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
7175
hasBottom = false,
7276
spaceBottom = 0,
7377
className = '',
78+
contentClassName = '',
7479
style = {},
80+
contentStyle = {},
7581
background = true,
76-
defaultExpand = true,
82+
defaultExpand,
7783
addonAfter,
7884
expand,
7985
children = '',
@@ -85,6 +91,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
8591

8692
const currentExpand = isControlled(props) ? expand : internalExpand;
8793

94+
const showCollapse = typeof expand === 'boolean' || typeof defaultExpand === 'boolean';
95+
8896
const preTitleRowCls = `${prefixCls}__title`;
8997

9098
const tooltipProps = toTooltipProps(tooltip);
@@ -110,9 +118,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
110118
<div
111119
className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
112120
[`${preTitleRowCls}--background`]: background,
113-
[`${preTitleRowCls}--pointer`]: children,
121+
[`${preTitleRowCls}--pointer`]: showCollapse && children,
114122
})}
115-
onClick={() => handleExpand(!currentExpand)}
123+
onClick={() => showCollapse && handleExpand(!currentExpand)}
116124
>
117125
<div className="title__box">
118126
{addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
@@ -123,15 +131,27 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
123131
{description ? <div className={`title__description`}>{description}</div> : null}
124132
</div>
125133
{addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
126-
{children && (
134+
{children && showCollapse && (
127135
<div className={`title__collapse`}>
128-
<div className="text">{expand ? '收起' : '展开'}</div>
129-
<UpOutlined className={`icon ${expand ? 'up' : 'down'}`} />
136+
<div className="text">{currentExpand ? '收起' : '展开'}</div>
137+
<UpOutlined className={`icon ${currentExpand ? 'up' : 'down'}`} />
130138
</div>
131139
)}
132140
</div>
133141
{children && (
134-
<div className={`${prefixCls}__content ${expand ? 'active' : ''}`}>{children}</div>
142+
<div
143+
className={classNames(
144+
`${prefixCls}__content`,
145+
`${preTitleRowCls}--${size}`,
146+
contentClassName,
147+
{
148+
active: currentExpand || !showCollapse,
149+
}
150+
)}
151+
style={contentStyle}
152+
>
153+
{children}
154+
</div>
135155
)}
136156
</div>
137157
);

0 commit comments

Comments
 (0)