Skip to content

Commit e98a4b8

Browse files
LuckyFBBLuckyFBB
committed
feat(blockheader): supprt cant collapse child
1 parent 4b9d9a3 commit e98a4b8

File tree

4 files changed

+65
-33
lines changed

4 files changed

+65
-33
lines changed

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

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

‎src/blockHeader/demos/expand.tsx‎

Lines changed: 10 additions & 4 deletions
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‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,27 @@ demo:
1919
<code src="./demos/basic.tsx" description="配置大小、tooltip、描述">基础使用</code>
2020
<code src="./demos/addonBefore.tsx" description="通过 `addonBefore` 可以设置标题前的图标，不设置时默认是一个色块，设置为假值(`undefined` 除外)不展示图标">自定义 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-
| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `16` |
42-
| children | 展开/收起的内容 | `React.ReactNode` | - |
43-
| 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+
| expand | 当前展开状态 | `boolean` | |
43+
| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `16` |
44+
| children | 展开/收起的内容 | `React.ReactNode` | - |
45+
| onExpand | 展开/收起时的回调 | `(expand: boolean) => void` | - |

‎src/blockHeader/index.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ export interface IBlockHeaderProps {
3636
className?: string;
3737
/** 标题的样式类名 */
3838
style?: React.CSSProperties;
39+
// 展示内容(children)的样式类名
40+
contentClassName?: string;
41+
// 展示内容(children)的样式
42+
contentStyle?: React.CSSProperties;
3943
/** 是否显示背景, 默认 true */
4044
background?: boolean;
4145
/** 当前展开状态 */
@@ -59,9 +63,11 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
5963
size = 'middle',
6064
spaceBottom = 16,
6165
className = '',
66+
contentClassName = '',
6267
style = {},
68+
contentStyle = {},
6369
background = true,
64-
defaultExpand = true,
70+
defaultExpand,
6571
addonAfter,
6672
expand,
6773
children = '',
@@ -73,6 +79,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
7379

7480
const currentExpand = isControlled(props) ? expand : internalExpand;
7581

82+
const showCollapse = typeof expand === 'boolean' || typeof defaultExpand === 'boolean';
83+
7684
const tooltipProps = toTooltipProps(tooltip);
7785

7886
let bottomStyle;
@@ -89,9 +97,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
8997
<div
9098
className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
9199
[`${preTitleRowCls}--background`]: background,
92-
[`${preTitleRowCls}--pointer`]: children,
100+
[`${preTitleRowCls}--pointer`]: showCollapse && children,
93101
})}
94-
onClick={() => handleExpand(!currentExpand)}
102+
onClick={() => showCollapse && handleExpand(!currentExpand)}
95103
>
96104
<div className="title__box">
97105
{addonBefore ? (
@@ -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)