feat(blockheader): support expand controll and change callname to onExpand

Author: LuckyFBB

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(
-            <BlockHeader onChange={onChange} title="测试">
+            <BlockHeader onExpand={onChange} title="测试">
                 <div>1111</div>
             </BlockHeader>
         );

src/blockHeader/demos/expand.tsx

@@ -1,24 +1,23 @@
-import React from 'react';
+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="分类标题"
+                title="非受控标题"
                 defaultExpand={false}
                 hasBottom
-                onChange={(expand) => console.log(expand)}
+                onExpand={(expand) => console.log(expand)}
             >
                 Hello World!
             </BlockHeader>
-            <BlockHeader
-                title="分类标题"
-                defaultExpand={false}
-                onChange={(expand) => console.log(expand)}
-            >
+
+            <BlockHeader title="受控标题" expand={expand} onExpand={(expand) => setExpand(expand)}>
                 Hello World!
             </BlockHeader>
-        </>
+        </Space>
     );
 };

src/blockHeader/index.md

@@ -38,6 +38,7 @@ demo:
 | background    | 是否显示背景                       | `boolean`                               | `true`   |
 | defaultExpand | 是否默认展开内容                   | `boolean`                               | `true`   |
 | hasBottom     | 是否有默认下边距 16px              | `boolean`                               | `false`  |
+| expand        | 当前展开状态                       | `boolean`                               |          |
 | spaceBottom   | 自定义下边距，优先级高于 hasBottom | `number`                                | `0`      |
 | children      | 展开/收起的内容                    | `React.ReactNode`                       | -        |
-| onChange      | 展开/收起时的回调                  | `(expand: boolean) => void`             | -        |
+| onExpand      | 展开/收起时的回调                  | `(expand: boolean) => void`             | -        |

src/blockHeader/index.tsx

@@ -21,10 +21,14 @@ export type LabelTooltipType = TooltipProps | TooltipProps['title'];
 
 export declare type SizeType = 'small' | 'middle' | 'large';
 
+function isControlled(props: IBlockHeaderProps) {
+    return props.expand !== undefined;
+}
+
 export interface IBlockHeaderProps {
-    // 标题
+    /** 标题 */
     title: string;
-    // 标题前的图标，默认是一个色块
+    /** 标题前的图标，默认是一个色块 */
     addonBefore?: ReactNode;
     // 标题后的提示说明文字
     description?: ReactNode;
@@ -38,19 +42,24 @@ export interface IBlockHeaderProps {
      * 默认 中标题
      */
     size?: SizeType;
+    /** 是否展示 Bottom，默认 false，Bottom 值 16px */
     hasBottom?: boolean;
+    /** 自定义 Bottom 值 */
     spaceBottom?: number;
     // 标题的样式类名
     className?: string;
     // 标题的样式
     style?: React.CSSProperties;
-    // 是否显示背景, 默认 true
+    /** 是否显示背景, 默认 true */
     background?: boolean;
-    // 是否默认展开内容, 默认 true
+    /** 当前展开状态 */
+    expand?: boolean;
+    /** 是否默认展开内容, 默认 true */
     defaultExpand?: boolean;
+    /** 展开/收起的内容 */
     children?: ReactNode;
-    // 展开/收起时的回调
-    onChange?: (expand: boolean) => void;
+    /** 展开/收起时的回调 */
+    onExpand?: (expand: boolean) => void;
 }
 const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
     const prefixCls = 'dtc-block-header';
@@ -66,12 +75,15 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
         background = true,
         defaultExpand = true,
         addonAfter,
+        expand,
         children = '',
         addonBefore = <div className={`title__addon-before--${size}`} />,
-        onChange,
+        onExpand,
     } = props;
 
-    const [expand, setExpand] = useState(defaultExpand);
+    const [internalExpand, setInternalExpand] = useState(defaultExpand);
+
+    const currentExpand = isControlled(props) ? expand : internalExpand;
 
     const preTitleRowCls = `${prefixCls}__title`;
 
@@ -89,8 +101,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const handleExpand = (expand: boolean) => {
         if (!children) return;
-        setExpand(expand);
-        onChange?.(expand);
+        !isControlled(props) && setInternalExpand(expand);
+        onExpand?.(expand);
     };
 
     return (
@@ -100,7 +112,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                     [`${preTitleRowCls}--background`]: background,
                     [`${preTitleRowCls}--pointer`]: children,
                 })}
-                onClick={() => handleExpand(!expand)}
+                onClick={() => handleExpand(!currentExpand)}
             >
                 <div className="title__box">
                     {addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}