feat: update blockHeader margin-bottom (#281)

DTStack · Dec 30, 2022 · 2962911 · 2962911
1 parent e7bb941
commit 2962911
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/src/components/blockHeader/__tests__/blockHeader.test.tsx b/src/components/blockHeader/__tests__/blockHeader.test.tsx
@@ -121,4 +121,18 @@ describe('test BlockHeader render', () => {
         const titleBoxWrap1 = container1.firstChild.firstChild.firstChild;
         expect(titleBoxWrap1.childNodes.length).toEqual(3);
     });
+    test('should render BlockHeader correct margin-bottom', () => {
+        const { container: noStyle } = render(<BlockHeader title="分类级别" beforeTitle="" />);
+        expect(noStyle.querySelector('.dtc-block-header')).not.toHaveAttribute('style');
+        const { container: defaultBottom } = render(
+            <BlockHeader title="分类级别" beforeTitle="" />
+        );
+        expect(defaultBottom.querySelector('.dtc-block-header')).toHaveStyle({ marginBottom: 16 });
+        const { container: customizeBottom } = render(
+            <BlockHeader title="分类级别" beforeTitle="" hasBottom spaceBottom={10} />
+        );
+        expect(customizeBottom.querySelector('.dtc-block-header')).toHaveStyle({
+            marginBottom: 10,
+        });
+    });
 });
diff --git a/src/components/blockHeader/index.tsx b/src/components/blockHeader/index.tsx
@@ -19,6 +19,8 @@ export interface BlockHeaderProps {
      * 默认 false
      */
     isSmall?: boolean;
+    hasBottom?: boolean;
+    spaceBottom?: number;
     // 标题一行的样式类名
     titleRowClassName?: string;
     // 标题的样式类名
@@ -38,6 +40,8 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
         afterTitle = '',
         tooltip = '',
         isSmall = false,
+        hasBottom = false,
+        spaceBottom = 0,
         titleRowClassName = '',
         titleClassName = '',
         showBackground = true,
@@ -53,6 +57,9 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
         </Tooltip>
     );
     const newAfterTitle = afterTitle || questionTooltip;
+    let bottomStyle;
+    if (hasBottom) bottomStyle = { marginBottom: 16 };
+    if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
     const [expand, setExpand] = useState(defaultExpand);
 
     const handleExpand = (expand) => {
@@ -61,7 +68,7 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
         onChange?.(expand);
     };
     return (
-        <div className={`${prefixCls}`}>
+        <div className={`${prefixCls}`} style={bottomStyle}>
             <div
                 className={`${prefixCls}-title-row ${isSmall ? 'small' : 'default'} ${
                     showBackground ? 'background' : ''

diff --git a/src/stories/blockHeader.stories.tsx b/src/stories/blockHeader.stories.tsx
@@ -71,6 +71,20 @@ const propDefinitions = [
         description: '是否默认展开内容',
         defaultValue: 'true',
     },
+    {
+        property: 'hasBottom',
+        propType: 'boolean',
+        required: false,
+        description: '是否有默认下边距16px',
+        defaultValue: 'false',
+    },
+    {
+        property: 'spaceBottom',
+        propType: 'number',
+        required: false,
+        description: '自定义下边距，优先级高于 hasBottom',
+        defaultValue: 0,
+    },
     {
         property: 'children',
         propType: 'React.ReactNode',