diff --git a/src/blockHeader/__tests__/blockHeader.test.tsx b/src/blockHeader/__tests__/blockHeader.test.tsx
index f08d095b5..6abc5958e 100644
--- a/src/blockHeader/__tests__/blockHeader.test.tsx
+++ b/src/blockHeader/__tests__/blockHeader.test.tsx
@@ -50,7 +50,7 @@ describe('test BlockHeader render', () => {
test('should render BlockHeader test click event', () => {
const onChange = jest.fn();
const { getByText } = render(
- <BlockHeader onExpand={onChange} title="测试">
+ <BlockHeader defaultExpand onExpand={onChange} title="测试">
<div>1111</div>
</BlockHeader>
);
@@ -59,15 +59,30 @@ describe('test BlockHeader render', () => {
expect(getByText('展开')).toBeTruthy();
expect(onChange).toHaveBeenCalledTimes(1);
});
- test('should render expanded and collapsed BlockHeader normally if the onChange event is not set', () => {
- const { getByText } = render(
+ test('should not render collapsed content normally', () => {
+ render(
<BlockHeader title="测试">
<div>Hello World!</div>
</BlockHeader>
);
- expect(getByText('收起')).toBeTruthy();
- fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
- expect(getByText('展开')).toBeTruthy();
+ const collapse = document.getElementsByClassName('title__collapse')[0];
+ expect(collapse).toBeFalsy();
+ });
+ test('should render content class and style', () => {
+ render(
+ <BlockHeader
+ title="测试"
+ contentStyle={{ height: 200 }}
+ contentClassName="custom__content"
+ >
+ <div>Hello World!</div>
+ </BlockHeader>
+ );
+ const container = document.getElementsByClassName(`${prefixCls}__content`)[0];
+ expect(container).toHaveStyle({ height: '200px' });
+ expect(container).toHaveClass(
+ 'dtc-block-header__content dtc-block-header__content--active custom__content'
+ );
});
test('should render BlockHeader with different props', () => {
const { container, getByText } = render(<BlockHeader {...props2} />);
diff --git a/src/blockHeader/demos/expand.tsx b/src/blockHeader/demos/expand.tsx
index 7aae5b7c8..3f23d6cba 100644
--- a/src/blockHeader/demos/expand.tsx
+++ b/src/blockHeader/demos/expand.tsx
@@ -1,22 +1,29 @@
import React, { useState } from 'react';
-import { Space } from 'antd';
import { BlockHeader } from 'dt-react-component';
export default () => {
const [expand, setExpand] = useState(false);
return (
- <Space direction="vertical" style={{ width: '100%' }}>
+ <>
<BlockHeader
title="非受控标题"
defaultExpand={false}
+ hasBottom
onExpand={(expand) => console.log(expand)}
>
Hello World!
</BlockHeader>
- <BlockHeader title="受控标题" expand={expand} onExpand={(expand) => setExpand(expand)}>
+ <BlockHeader
+ title="受控标题"
+ expand={expand}
+ onExpand={(expand) => setExpand(expand)}
+ hasBottom
+ >
Hello World!
</BlockHeader>
- </Space>
+
+ <BlockHeader title="不可收起的标题">Hello World!</BlockHeader>
+ </>
);
};
diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md
index 8f512d556..42b713b11 100644
--- a/src/blockHeader/index.md
+++ b/src/blockHeader/index.md
@@ -19,25 +19,27 @@ demo:
<code src="./demos/basic.tsx" description="配置大小、tooltip、描述">基础使用</code>
<code src="./demos/addonBefore.tsx" description="通过 `addonBefore` 可以设置标题前的图标，不设置时默认是一个色块，设置为假值(`undefined` 除外)不展示图标">自定义 icon</code>
<code src="./demos/addonAfter.tsx" description="通过 `addonAfter` 可以设置后缀自定义内容块">带提示信息的标题</code>
-<code src="./demos/expand.tsx" description="若存在 `children` 则支持展开">展开/收起内容</code>
+<code src="./demos/expand.tsx" description="通过配置 expand/defaultExpand 控制展开/收起">支持 `children` 做为内容展示</code>
## API
### BlockHeader
-| 参数 | 说明 | 类型 | 默认值 |
-| ------------- | ---------------------------------- | --------------------------------------- | -------- |
-| title | 标题 | `string` | - |
-| addonBefore | 标题前的图标，默认是一个色块 | `React.ReactNode` | - |
-| description | 标题提示文案 | `React.ReactNode` | - |
-| tooltip | 默认展示问号提示 | `TooltipProps \| TooltipProps['title']` | - |
-| addonAfter | 标题后的内容 | `React.ReactNode` | - |
-| size | 小标题、中标题，默认为中标题 | `small \| middle \| large` | `middle` |
-| className | 标题一行的样式类名 | `string` | - |
-| style | 标题的样式 | `React.CSSProperties` | - |
-| background | 是否显示背景 | `boolean` | `true` |
-| expand | 当前展开状态 | `boolean` | |
-| defaultExpand | 是否默认展开内容 | `boolean` | `true` |
-| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `16` |
-| children | 展开/收起的内容 | `React.ReactNode` | - |
-| onExpand | 展开/收起时的回调 | `(expand: boolean) => void` | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| ---------------- | ---------------------------------- | --------------------------------------- | -------- |
+| title | 标题 | `string` | - |
+| addonBefore | 标题前的图标，默认是一个色块 | `React.ReactNode` | - |
+| description | 标题提示文案 | `React.ReactNode` | - |
+| tooltip | 默认展示问号提示 | `TooltipProps \| TooltipProps['title']` | - |
+| addonAfter | 标题后的内容 | `React.ReactNode` | - |
+| size | 小标题、中标题，默认为中标题 | `small \| middle \| large` | `middle` |
+| className | 标题的样式类名 | `string` | - |
+| style | 标题的样式 | `React.CSSProperties` | - |
+| contentClassName | 展示内容的样式类名 | `string` | - |
+| contentStyle | 展示内容的样式 | `React.CSSProperties` | - |
+| background | 是否显示背景 | `boolean` | `true` |
+| defaultExpand | 是否默认展开内容 | `boolean` | `-` |
+| expand | 当前展开状态 | `boolean` | |
+| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `16` |
+| children | 展开/收起的内容 | `React.ReactNode` | - |
+| onExpand | 展开/收起时的回调 | `(expand: boolean) => void` | - |
diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
index 8a2c33c03..5a54a8c7e 100644
--- a/src/blockHeader/index.tsx
+++ b/src/blockHeader/index.tsx
@@ -21,7 +21,7 @@ export interface IBlockHeaderProps {
description?: ReactNode;
/** 默认展示为问号的tooltip */
tooltip?: LabelTooltipType;
- /** 后缀自定义内容块 */
+ /** 后缀自定义内容块 */
addonAfter?: ReactNode;
/**
* 小标题 font-size: 12px; line-height: 32px
@@ -36,11 +36,15 @@ export interface IBlockHeaderProps {
className?: string;
/** 标题的样式类名 */
style?: React.CSSProperties;
+ /** 展示内容(children)的样式类名 */
+ contentClassName?: string;
+ /** 展示内容(children)的样式 */
+ contentStyle?: React.CSSProperties;
/** 是否显示背景, 默认 true */
background?: boolean;
/** 当前展开状态 */
expand?: boolean;
- /** 是否默认展开内容, 默认 true */
+ /** 是否默认展开内容, 默认为 undefined */
defaultExpand?: boolean;
/** 展开/收起的内容 */
children?: ReactNode;
@@ -59,9 +63,11 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
size = 'middle',
spaceBottom = 16,
className = '',
+ contentClassName = '',
style = {},
+ contentStyle = {},
background = true,
- defaultExpand = true,
+ defaultExpand,
addonAfter,
expand,
children = '',
@@ -73,6 +79,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
const currentExpand = isControlled(props) ? expand : internalExpand;
+ // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
+ const showCollapse =
+ (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
+
const tooltipProps = toTooltipProps(tooltip);
let bottomStyle;
@@ -89,9 +99,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
<div
className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
[`${preTitleRowCls}--background`]: background,
- [`${preTitleRowCls}--pointer`]: children,
+ [`${preTitleRowCls}--pointer`]: showCollapse,
})}
- onClick={() => handleExpand(!currentExpand)}
+ onClick={() => showCollapse && handleExpand(!currentExpand)}
>
<div className="title__box">
{addonBefore ? (
@@ -110,7 +120,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
{description ? <div className={`title__description`}>{description}</div> : null}
</div>
{addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
- {children && (
+ {showCollapse && (
<div className={`title__collapse`}>
<div className="collapse__text">{currentExpand ? '收起' : '展开'}</div>
<UpOutlined
@@ -124,9 +134,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
</div>
{children && (
<div
- className={classNames(`${prefixCls}__content`, {
- [`${prefixCls}__content--active`]: currentExpand,
+ className={classNames(`${prefixCls}__content`, contentClassName, {
+ [`${prefixCls}__content--active`]: currentExpand || !showCollapse,
})}
+ style={contentStyle}
>
{children}
</div>