Skip to content

Commit b689c8a

Browse files
LuckyFBBLuckyFBB
authored
feat(blockheader): support cant collapse child (#480)
* feat(blockheader): supprt large size and change some props name * feat(blockheader): change tooltip to TooltipProps and use toTooltipProps * feat(blockheader): support expand controll and change callname to onExpand * feat(blockheader): supprt cant collapse child * fix(blockheader): change comment and showCollapse judge
1 parent 3e1a2be commit b689c8a

File tree

4 files changed

+70
-35
lines changed

4 files changed

+70
-35
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: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
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}
11+
hasBottom
1212
onExpand={(expand) => console.log(expand)}
1313
>
1414
Hello World!
1515
</BlockHeader>
1616

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

‎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` | `-` |
42+
| expand | 当前展开状态 | `boolean` | |
43+
| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `16` |
44+
| children | 展开/收起的内容 | `React.ReactNode` | - |
45+
| onExpand | 展开/收起时的回调 | `(expand: boolean) => void` | - |

‎src/blockHeader/index.tsx

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export interface IBlockHeaderProps {
2121
description?: ReactNode;
2222
/** 默认展示为问号的tooltip */
2323
tooltip?: LabelTooltipType;
24-
/** 后缀自定义内容块 */
24+
/** 后缀自定义内容块 */
2525
addonAfter?: ReactNode;
2626
/**
2727
* 小标题 font-size: 12px; line-height: 32px
@@ -36,11 +36,15 @@ 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
/** 当前展开状态 */
4246
expand?: boolean;
43-
/** 是否默认展开内容, 默认 true */
47+
/** 是否默认展开内容, 默认为 undefined */
4448
defaultExpand?: boolean;
4549
/** 展开/收起的内容 */
4650
children?: ReactNode;
@@ -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,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
7379

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

82+
// 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
83+
const showCollapse =
84+
(typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
85+
7686
const tooltipProps = toTooltipProps(tooltip);
7787

7888
let bottomStyle;
@@ -89,9 +99,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
8999
<div
90100
className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
91101
[`${preTitleRowCls}--background`]: background,
92-
[`${preTitleRowCls}--pointer`]: children,
102+
[`${preTitleRowCls}--pointer`]: showCollapse,
93103
})}
94-
onClick={() => handleExpand(!currentExpand)}
104+
onClick={() => showCollapse && handleExpand(!currentExpand)}
95105
>
96106
<div className="title__box">
97107
{addonBefore ? (
@@ -110,7 +120,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
110120
{description ? <div className={`title__description`}>{description}</div> : null}
111121
</div>
112122
{addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
113-
{children && (
123+
{showCollapse && (
114124
<div className={`title__collapse`}>
115125
<div className="collapse__text">{currentExpand ? '收起' : '展开'}</div>
116126
<UpOutlined
@@ -124,9 +134,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
124134
</div>
125135
{children && (
126136
<div
127-
className={classNames(`${prefixCls}__content`, {
128-
[`${prefixCls}__content--active`]: currentExpand,
137+
className={classNames(`${prefixCls}__content`, contentClassName, {
138+
[`${prefixCls}__content--active`]: currentExpand || !showCollapse,
129139
})}
140+
style={contentStyle}
130141
>
131142
{children}
132143
</div>

0 commit comments

Comments
 (0)