diff --git a/src/blockHeader/__tests__/blockHeader.test.tsx b/src/blockHeader/__tests__/blockHeader.test.tsx index 6f082db81..1ec0c6c9f 100644 --- a/src/blockHeader/__tests__/blockHeader.test.tsx +++ b/src/blockHeader/__tests__/blockHeader.test.tsx @@ -51,7 +51,7 @@ describe('test BlockHeader render', () => { test('should render BlockHeader test click event', () => { const onChange = jest.fn(); const { getByText } = render( - +
1111
); @@ -60,15 +60,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(
Hello World!
); - 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( + +
Hello World!
+
+ ); + 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(); 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 ( - + <> console.log(expand)} > Hello World! - setExpand(expand)}> + setExpand(expand)} + hasBottom + > Hello World! - + + Hello World! + ); }; diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md index 19e3b083b..992b846bc 100644 --- a/src/blockHeader/index.md +++ b/src/blockHeader/index.md @@ -19,26 +19,28 @@ demo: 基础使用 自定义 icon 带提示信息的标题 -展开/收起内容 +支持 `children` 做为内容展示 ## 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` | -| hasBottom | 是否有默认下边距 16px | `boolean` | `false` | -| spaceBottom | 自定义下边距,优先级高于 hasBottom | `number` | `0` | -| 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` | `true` | +| hasBottom | 是否有默认下边距 16px | `boolean` | `false` | +| expand | 当前展开状态 | `boolean` | | +| spaceBottom | 自定义下边距,优先级高于 hasBottom | `number` | `0` | +| children | 展开/收起的内容 | `React.ReactNode` | - | +| onExpand | 展开/收起时的回调 | `(expand: boolean) => void` | - | diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx index 67117aee8..b351f1172 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 @@ -38,6 +38,10 @@ export interface IBlockHeaderProps { className?: string; /** 标题的样式类名 */ style?: React.CSSProperties; + // 展示内容(children)的样式类名 + contentClassName?: string; + // 展示内容(children)的样式 + contentStyle?: React.CSSProperties; /** 是否显示背景, 默认 true */ background?: boolean; /** 当前展开状态 */ @@ -62,9 +66,11 @@ const BlockHeader: React.FC = function (props) { hasBottom = false, spaceBottom = 0, className = '', + contentClassName = '', style = {}, + contentStyle = {}, background = true, - defaultExpand = true, + defaultExpand, addonAfter, expand, children = '', @@ -76,6 +82,8 @@ const BlockHeader: React.FC = function (props) { const currentExpand = isControlled(props) ? expand : internalExpand; + const showCollapse = typeof expand === 'boolean' || typeof defaultExpand === 'boolean'; + const tooltipProps = toTooltipProps(tooltip); let bottomStyle; @@ -93,9 +101,9 @@ const BlockHeader: React.FC = function (props) {
handleExpand(!currentExpand)} + onClick={() => showCollapse && handleExpand(!currentExpand)} >
{addonBefore ?
{addonBefore}
: null} @@ -110,7 +118,7 @@ const BlockHeader: React.FC = function (props) { {description ?
{description}
: null}
{addonAfter &&
{addonAfter}
} - {children && ( + {children && showCollapse && (
{currentExpand ? '收起' : '展开'}
= function (props) {
{children && (
{children}