From 9ae87789ae4f274e406dc79a6fb211cb73b12736 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Mon, 2 Sep 2024 11:02:38 +0800 Subject: [PATCH 1/5] feat(blockheader): supprt large size and change some props name --- src/blockHeader/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx index 8a2c33c03..4b1b14adc 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 From 01c20ccbdf3064e509513ed314c2c24f592fcaf6 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Tue, 3 Sep 2024 20:21:01 +0800 Subject: [PATCH 2/5] feat(blockheader): change tooltip to TooltipProps and use toTooltipProps --- src/blockHeader/index.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md index 8f512d556..e8e273ac1 100644 --- a/src/blockHeader/index.md +++ b/src/blockHeader/index.md @@ -25,19 +25,19 @@ demo: ### 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` | - | +| background | 是否显示背景 | `boolean` | `true` | +| expand | 当前展开状态 | `boolean` | | +| defaultExpand | 是否默认展开内容 | `boolean` | `true` | +| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `16` | +| children | 展开/收起的内容 | `React.ReactNode` | - | +| onExpand | 展开/收起时的回调 | `(expand: boolean) => void` | - | From 4b9d9a34ddaa3683df19c243b4af47775fcadaa1 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Wed, 6 Mar 2024 20:02:47 +0800 Subject: [PATCH 3/5] feat(blockheader): support expand controll and change callname to onExpand --- src/blockHeader/demos/expand.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/blockHeader/demos/expand.tsx b/src/blockHeader/demos/expand.tsx index 7aae5b7c8..72930e333 100644 --- a/src/blockHeader/demos/expand.tsx +++ b/src/blockHeader/demos/expand.tsx @@ -9,6 +9,7 @@ export default () => { console.log(expand)} > Hello World! From e98a4b821bd7c29fd385d74edaac7d79d044a4d5 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Mon, 9 Sep 2024 11:59:41 +0800 Subject: [PATCH 4/5] feat(blockheader): supprt cant collapse child --- .../__tests__/blockHeader.test.tsx | 27 ++++++++++---- src/blockHeader/demos/expand.tsx | 14 +++++--- src/blockHeader/index.md | 36 ++++++++++--------- src/blockHeader/index.tsx | 21 +++++++---- 4 files changed, 65 insertions(+), 33 deletions(-) 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( - +
1111
 ); @@ -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(
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 72930e333..3f23d6cba 100644 --- a/src/blockHeader/demos/expand.tsx +++ b/src/blockHeader/demos/expand.tsx @@ -1,11 +1,10 @@ import React, { useState } from 'react'; -import { Space } from 'antd'; import { BlockHeader } from 'dt-react-component'; export default () => { const [expand, setExpand] = useState(false); return ( - + <> { Hello World! - setExpand(expand)}> + setExpand(expand)} + hasBottom + > Hello World! - + + Hello World! + ); }; diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md index e8e273ac1..f94b62909 100644 --- a/src/blockHeader/index.md +++ b/src/blockHeader/index.md @@ -19,25 +19,27 @@ 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` | -| 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` | `true` | +| 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 4b1b14adc..3c02e946b 100644 --- a/src/blockHeader/index.tsx +++ b/src/blockHeader/index.tsx @@ -36,6 +36,10 @@ export interface IBlockHeaderProps { className?: string; /** 标题的样式类名 */ style?: React.CSSProperties; + // 展示内容(children)的样式类名 + contentClassName?: string; + // 展示内容(children)的样式 + contentStyle?: React.CSSProperties; /** 是否显示背景, 默认 true */ background?: boolean; /** 当前展开状态 */ @@ -59,9 +63,11 @@ const BlockHeader: React.FC = function (props) { size = 'middle', spaceBottom = 16, className = '', + contentClassName = '', style = {}, + contentStyle = {}, background = true, - defaultExpand = true, + defaultExpand, addonAfter, expand, children = '', @@ -73,6 +79,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; @@ -89,9 +97,9 @@ const BlockHeader: React.FC = function (props) {
handleExpand(!currentExpand)} + onClick={() => showCollapse && handleExpand(!currentExpand)} >
{addonBefore ? ( @@ -110,7 +118,7 @@ const BlockHeader: React.FC = function (props) { {description ?
{description}
: null}
{addonAfter &&
{addonAfter}
} - {children && ( + {children && showCollapse && (
{currentExpand ? '收起' : '展开'}
= function (props) {
{children && (
{children}
From f5de46dae186e9b031864f68ca66c1238d937a8a Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Tue, 27 May 2025 15:12:15 +0800 Subject: [PATCH 5/5] fix(blockheader): change comment and showCollapse judge --- src/blockHeader/index.md | 2 +- src/blockHeader/index.tsx | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md index f94b62909..42b713b11 100644 --- a/src/blockHeader/index.md +++ b/src/blockHeader/index.md @@ -38,7 +38,7 @@ demo: | contentClassName | 展示内容的样式类名 | `string` | - | | contentStyle | 展示内容的样式 | `React.CSSProperties` | - | | background | 是否显示背景 | `boolean` | `true` | -| defaultExpand | 是否默认展开内容 | `boolean` | `true` | +| defaultExpand | 是否默认展开内容 | `boolean` | `-` | | expand | 当前展开状态 | `boolean` | | | spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `16` | | children | 展开/收起的内容 | `React.ReactNode` | - | diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx index 3c02e946b..5a54a8c7e 100644 --- a/src/blockHeader/index.tsx +++ b/src/blockHeader/index.tsx @@ -36,15 +36,15 @@ export interface IBlockHeaderProps { className?: string; /** 标题的样式类名 */ style?: React.CSSProperties; - // 展示内容(children)的样式类名 + /** 展示内容(children)的样式类名 */ contentClassName?: string; - // 展示内容(children)的样式 + /** 展示内容(children)的样式 */ contentStyle?: React.CSSProperties; /** 是否显示背景, 默认 true */ background?: boolean; /** 当前展开状态 */ expand?: boolean; - /** 是否默认展开内容, 默认 true */ + /** 是否默认展开内容, 默认为 undefined */ defaultExpand?: boolean; /** 展开/收起的内容 */ children?: ReactNode; @@ -79,7 +79,9 @@ const BlockHeader: React.FC = function (props) { const currentExpand = isControlled(props) ? expand : internalExpand; - const showCollapse = typeof expand === 'boolean' || typeof defaultExpand === 'boolean'; + // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起 + const showCollapse = + (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children; const tooltipProps = toTooltipProps(tooltip); @@ -97,7 +99,7 @@ const BlockHeader: React.FC = function (props) {
showCollapse && handleExpand(!currentExpand)} > @@ -118,7 +120,7 @@ const BlockHeader: React.FC = function (props) { {description ?
{description}
: null}
{addonAfter &&
{addonAfter}
} - {children && showCollapse && ( + {showCollapse && (
{currentExpand ? '收起' : '展开'}