Skip to content

Commit cebafe6

Browse files
LuckyFBBLuckyFBB
authored
fix(blockheader): support different size to show different custom icon size (#502)
* fix(blockheader): support different size to show different custom icon size * fix(blockheader): remove addonBefore defaultValue and add undefined judge * fix(blockheader): add !! judge for addonBefore * feat(blockheader): remove judge default addonBefore or icon and add addon-before--default to control
1 parent 943b7de commit cebafe6

File tree

6 files changed

+60
-37
lines changed

6 files changed

+60
-37
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
1515
class="title__box"
1616
>
1717
<div
18-
class="title__addon-before"
18+
class="title__addon-before title__addon-before--middle"
1919
>
2020
<div
21-
class="title__addon-before--middle"
21+
class="addon-before--default"
2222
/>
2323
</div>
2424
<div
@@ -42,10 +42,10 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
4242
class="title__box"
4343
>
4444
<div
45-
class="title__addon-before"
45+
class="title__addon-before title__addon-before--middle"
4646
>
4747
<div
48-
class="title__addon-before--middle"
48+
class="addon-before--default"
4949
/>
5050
</div>
5151
<div

‎src/blockHeader/demos/addonBefore.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,11 @@ export default () => {
77
<>
88
<BlockHeader title="分类标题" />
99
<br />
10-
<BlockHeader
11-
title="分类标题"
12-
addonBefore={<PieChartOutlined style={{ fontSize: '14px' }} />}
13-
/>
10+
<BlockHeader title="分类标题" addonBefore={''} />
1411
<br />
15-
<BlockHeader
16-
title="分类标题"
17-
addonBefore={<PauseCircleOutlined style={{ fontSize: '14px' }} />}
18-
/>
12+
<BlockHeader title="分类标题" addonBefore={<PieChartOutlined />} />
13+
<br />
14+
<BlockHeader title="分类标题" addonBefore={<PauseCircleOutlined />} />
1915
</>
2016
);
2117
};

‎src/blockHeader/demos/basic.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from 'react';
2+
import { PieChartOutlined } from '@ant-design/icons';
23
import { Radio, Space, Switch } from 'antd';
34
import { BlockHeader } from 'dt-react-component';
45
import { SizeType } from 'dt-react-component/blockHeader';
@@ -40,6 +41,15 @@ export default () => {
4041
</Space>
4142
<br />
4243
<br />
44+
<BlockHeader
45+
size={size}
46+
title="分类标题"
47+
hasBottom
48+
addonBefore={<PieChartOutlined />}
49+
background={showBackground}
50+
tooltip={tooltip ? '这里展示问号提示' : ''}
51+
description={description ? '提示说明文字' : ''}
52+
/>
4353
<BlockHeader
4454
size={size}
4555
title="分类标题"

‎src/blockHeader/index.md‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,28 @@ demo:
1717
## 示例
1818

1919
<code src="./demos/basic.tsx" description="配置大小、tooltip、描述">基础使用</code>
20-
<code src="./demos/addonBefore.tsx" description="通过 `addonBefore` 可以设置标题前的图标，不设置时默认是一个色块">自定义 icon</code>
20+
<code src="./demos/addonBefore.tsx" description="通过 `addonBefore` 可以设置标题前的图标，不设置时默认是一个色块，设置为假值(`undefined` 除外)不展示图标">自定义 icon</code>
2121
<code src="./demos/addonAfter.tsx" description="通过 `addonAfter` 可以设置后缀自定义内容块">带提示信息的标题</code>
2222
<code src="./demos/expand.tsx" description="若存在 `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` |
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` |
3636
| className | 标题一行的样式类名 | `string` | - |
3737
| 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` | - |
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` | - |

‎src/blockHeader/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
6868
addonAfter,
6969
expand,
7070
children = '',
71-
addonBefore = <div className={`title__addon-before--${size}`} />,
71+
addonBefore = <div className="addon-before--default" />,
7272
onExpand,
7373
} = props;
7474

@@ -98,7 +98,11 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
9898
onClick={() => handleExpand(!currentExpand)}
9999
>
100100
<div className="title__box">
101-
{addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
101+
{addonBefore ? (
102+
<div className={`title__addon-before title__addon-before--${size}`}>
103+
{addonBefore}
104+
</div>
105+
) : null}
102106
<div className="title__text">{title}</div>
103107
{tooltipProps?.title ? (
104108
<div className={`title__tooltip`}>

‎src/blockHeader/style.scss‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,16 +55,29 @@ $card_prefix: "dtc-block-header";
5555
&__addon-before {
5656
margin-right: 8px;
5757
color: #1D78FF;
58-
&--middle,
58+
&--middle {
59+
.addon-before--default {
60+
width: 4px;
61+
height: 16px;
62+
background-color: #1D78FF;
63+
}
64+
font-size: 20px;
65+
}
5966
&--small {
60-
width: 4px;
61-
height: 16px;
62-
background-color: #1D78FF;
67+
.addon-before--default {
68+
width: 4px;
69+
height: 16px;
70+
background-color: #1D78FF;
71+
}
72+
font-size: 16px;
6373
}
6474
&--large {
65-
width: 4px;
66-
height: 20px;
67-
background-color: #1D78FF;
75+
.addon-before--default {
76+
width: 4px;
77+
height: 20px;
78+
background-color: #1D78FF;
79+
}
80+
font-size: 24px;
6881
}
6982
}
7083
&__tooltip {

0 commit comments

Comments
 (0)