feat: add addonAfter param the blockHeader component (#246)

DTStack · Nov 9, 2022 · 8780a46 · 8780a46
1 parent 5daace3
commit 8780a46
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/src/components/blockHeader/__tests__/blockHeader.test.tsx b/src/components/blockHeader/__tests__/blockHeader.test.tsx
@@ -10,6 +10,7 @@ const props2 = {
     title: '标题2',
     beforeTitle: <span>Icon</span>,
     afterTitle: '说明文字',
+    addonAfter: <div className="test-button-after">新增按钮</div>,
     isSmall: true,
     titleRowClassName: 'test-row-className',
     titleClassName: 'test-title-className',
@@ -54,6 +55,7 @@ describe('test BlockHeader render', () => {
         expect(wrap.firstChild).toHaveClass(`test-row-className`);
         expect(getByText('标题2')).toHaveClass('test-title-className');
         expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
+        expect(getByText('新增按钮')).toHaveClass(`test-button-after`);
         expect(getByText('Icon')).toBeTruthy();
     });
     test('should render BlockHeader test click event', () => {

diff --git a/src/components/blockHeader/index.tsx b/src/components/blockHeader/index.tsx
@@ -11,6 +11,8 @@ export interface BlockHeaderProps {
     afterTitle?: string | React.ReactNode;
     // 默认展示为问号的toolip
     tooltip?: React.ReactNode;
+    // 后缀自定义内容块
+    addonAfter?: React.ReactNode;
     /**
      * true 小标题 font-size: 12px; line-height: 32px
      * false 大标题 font-size: 14px; line-height: 40px
@@ -40,6 +42,7 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
         titleClassName = '',
         showBackground = true,
         defaultExpand = true,
+        addonAfter,
         children = '',
         onChange,
     } = props;
@@ -74,7 +77,7 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
                         <div className={`${prefixCls}-after-title`}>{newAfterTitle}</div>
                     ) : null}
                 </div>
-
+                {addonAfter && <div className={`${prefixCls}-addonAfter-box`}>{addonAfter}</div>}
                 {children && (
                     <div className={`${prefixCls}-collapse-box`}>
                         <div className="text">{expand ? '收起' : '展开'}</div>

diff --git a/src/stories/blockHeader.stories.tsx b/src/stories/blockHeader.stories.tsx
@@ -143,6 +143,9 @@ stories.add(
 
             <p style={style}>8、简洁版</p>
             <BlockHeader title="分类标题" beforeTitle="" />
+
+            <p style={style}>9、自定义后缀元素</p>
+            <BlockHeader title="分类标题" addonAfter={<Button type="primary" onClick={() => alert('触发了点击事件')} size="small">点击</Button>} />
             ~~~
         `,
             TableComponent: () => PropsTable({ propDefinitions }),

diff --git a/src/stories/components/blockHeader/index.tsx b/src/stories/components/blockHeader/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { DingdingOutlined, PieChartOutlined } from '@ant-design/icons';
 import BlockHeader from '../../../components/blockHeader';
 
@@ -50,6 +50,9 @@ export default function BlockHeaderRender() {
 
             <p style={style}>8、简洁版</p>
             <BlockHeader title="分类标题" beforeTitle="" />
+
+            <p style={style}>9、自定义后缀元素</p>
+            <BlockHeader title="分类标题" addonAfter={<Button type="primary" onClick={() => alert('触发了点击事件')} size="small">点击</Button>} />
         </React.Fragment>
     );
 }