Skip to content

Commit ab04f05

Browse files
LuckyFBBLuckyFBB
committed
feat(blockheader): change classname and add style
1 parent 1776d18 commit ab04f05

File tree

3 files changed

+37
-51
lines changed

3 files changed

+37
-51
lines changed

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
99
class="dtc-block-header"
1010
>
1111
<div
12-
class="dtc-block-header-title-row dtc-block-header-title-row--middle dtc-block-header-title-row-background"
12+
class="dtc-block-header__title dtc-block-header__title--middle dtc-block-header__title--background"
1313
>
1414
<div
15-
class="dtc-block-header-title-box"
15+
class="title__box"
1616
>
1717
<div
18-
class="dtc-block-header-addon-before"
18+
class="title__addon-before"
1919
>
2020
<div
21-
class="dtc-block-header-addon-before--middle"
21+
class="title__addon-before--middle"
2222
/>
2323
</div>
2424
<div
25-
class="dtc-block-header-title "
25+
class="title__text"
2626
>
2727
标题1
2828
</div>
@@ -36,20 +36,20 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
3636
class="dtc-block-header"
3737
>
3838
<div
39-
class="dtc-block-header-title-row dtc-block-header-title-row--middle dtc-block-header-title-row-background"
39+
class="dtc-block-header__title dtc-block-header__title--middle dtc-block-header__title--background"
4040
>
4141
<div
42-
class="dtc-block-header-title-box"
42+
class="title__box"
4343
>
4444
<div
45-
class="dtc-block-header-addon-before"
45+
class="title__addon-before"
4646
>
4747
<div
48-
class="dtc-block-header-addon-before--middle"
48+
class="title__addon-before--middle"
4949
/>
5050
</div>
5151
<div
52-
class="dtc-block-header-title "
52+
class="title__text"
5353
>
5454
标题1
5555
</div>

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

+14-24
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ const props2: IBlockHeaderProps = {
1313
description: '说明文字',
1414
addonAfter: <div className="test-button-after">新增按钮</div>,
1515
size: 'small' as SizeType,
16-
titleRowClassName: 'test-row-className',
17-
titleClassName: 'test-title-className',
16+
className: 'test__className',
17+
style: { height: '100px' },
18+
hasBottom: true,
1819
};
1920
const props3: IBlockHeaderProps = {
2021
title: 'hover',
@@ -44,18 +45,8 @@ describe('test BlockHeader render', () => {
4445
test('should render BlockHeader props default in BlockHeader', () => {
4546
const { container } = render(<BlockHeader title="测试" background />);
4647
const wrap = container.firstChild;
47-
expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass(`${prefixCls}-addon-before`);
48-
fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
49-
});
50-
test('should render BlockHeader with different props', () => {
51-
const { container, getByText } = render(<BlockHeader {...props2} />);
52-
const wrap = container.firstChild;
53-
expect(wrap).toHaveClass(`${prefixCls}`);
54-
expect(wrap!.firstChild).toHaveClass(`test-row-className`);
55-
expect(getByText('标题2')).toHaveClass('test-title-className');
56-
expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
57-
expect(getByText('新增按钮')).toHaveClass(`test-button-after`);
58-
expect(getByText('Icon')).toBeTruthy();
48+
expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass('title__addon-before');
49+
fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
5950
});
6051
test('should render BlockHeader test click event', () => {
6152
const onChange = jest.fn();
@@ -65,7 +56,7 @@ describe('test BlockHeader render', () => {
6556
</BlockHeader>
6657
);
6758
expect(getByText('收起')).toBeTruthy();
68-
fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
59+
fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
6960
expect(getByText('展开')).toBeTruthy();
7061
expect(onChange).toHaveBeenCalledTimes(1);
7162
});
@@ -76,16 +67,16 @@ describe('test BlockHeader render', () => {
7667
</BlockHeader>
7768
);
7869
expect(getByText('收起')).toBeTruthy();
79-
fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
70+
fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
8071
expect(getByText('展开')).toBeTruthy();
8172
});
8273
test('should render BlockHeader with different props', () => {
8374
const { container, getByText } = render(<BlockHeader {...props2} />);
8475
const wrap = container.firstChild;
85-
expect(wrap).toHaveClass(`${prefixCls}`);
86-
expect(wrap!.firstChild).toHaveClass(`test-row-className`);
87-
expect(getByText('标题2')).toHaveClass('test-title-className');
88-
expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
76+
expect(wrap).toHaveClass(`${prefixCls} test__className`);
77+
expect(wrap).toHaveStyle({ height: '100px', marginBottom: '16px' });
78+
expect(getByText('标题2')).toHaveClass('title__text');
79+
expect(getByText('说明文字')).toHaveClass('title__description');
8980
expect(getByText('Icon')).toBeTruthy();
9081
});
9182
test('should render BlockHeader background success', () => {
@@ -97,10 +88,9 @@ describe('test BlockHeader render', () => {
9788
test('should render BlockHeader className when isSmall is small', () => {
9889
const { container, getByText } = render(<BlockHeader {...props2} />);
9990
const wrap = container.firstChild!;
100-
expect(wrap).toHaveClass(`${prefixCls}`);
101-
expect(wrap.firstChild).toHaveClass(`test-row-className`);
102-
expect(getByText('标题2')).toHaveClass('test-title-className');
103-
expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
91+
expect(wrap).toHaveClass(`${prefixCls} test__className`);
92+
expect(getByText('标题2')).toHaveClass('title__text');
93+
expect(getByText('说明文字')).toHaveClass('title__description');
10494
expect(getByText('Icon')).toBeTruthy();
10595
});
10696

‎src/blockHeader/index.tsx

+13-17
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,17 @@ export interface IBlockHeaderProps {
4040
size?: SizeType;
4141
hasBottom?: boolean;
4242
spaceBottom?: number;
43-
// 标题一行的样式类名
44-
titleRowClassName?: string;
4543
// 标题的样式类名
46-
titleClassName?: string;
44+
className?: string;
45+
// 标题的样式
46+
style?: React.CSSProperties;
4747
// 是否显示背景, 默认 true
4848
background?: boolean;
4949
// 是否默认展开内容, 默认 true
5050
defaultExpand?: boolean;
51+
children?: ReactNode;
5152
// 展开/收起时的回调
5253
onChange?: (expand: boolean) => void;
53-
children?: ReactNode;
5454
}
5555
const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
5656
const prefixCls = 'dtc-block-header';
@@ -61,8 +61,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
6161
size = 'middle',
6262
hasBottom = false,
6363
spaceBottom = 0,
64-
titleRowClassName = '',
65-
titleClassName = '',
64+
className = '',
65+
style = {},
6666
background = true,
6767
defaultExpand = true,
6868
addonAfter,
@@ -82,6 +82,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
8282
<QuestionCircleOutlined />
8383
</Tooltip>
8484
);
85+
8586
let bottomStyle;
8687
if (hasBottom) bottomStyle = { marginBottom: 16 };
8788
if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
@@ -93,22 +94,17 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
9394
};
9495

9596
return (
96-
<div className={`${prefixCls}`} style={bottomStyle}>
97+
<div className={classNames(`${prefixCls}`, className)} style={{ ...bottomStyle, ...style }}>
9798
<div
98-
className={classNames(
99-
preTitleRowCls,
100-
`${preTitleRowCls}--${size}`,
101-
titleRowClassName,
102-
{
103-
[`${preTitleRowCls}--background`]: background,
104-
[`${preTitleRowCls}--pointer`]: children,
105-
}
106-
)}
99+
className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
100+
[`${preTitleRowCls}--background`]: background,
101+
[`${preTitleRowCls}--pointer`]: children,
102+
})}
107103
onClick={() => handleExpand(!expand)}
108104
>
109105
<div className="title__box">
110106
{addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
111-
<div className={`title__text ${titleClassName}`}>{title}</div>
107+
<div className="title__text">{title}</div>
112108
{questionTooltip ? (
113109
<div className={`title__tooltip`}>{questionTooltip}</div>
114110
) : null}

0 commit comments

Comments
 (0)