@dtjoy/dt-design 1.1.0 → 1.1.1

package/esm/blockHeader/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './style';
-import type { LabelTooltipType } from '../_util';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { LabelTooltipType } from '../_util';
 export interface IBlockHeaderProps {
     /** id */
     id?: string;
@@ -23,7 +23,10 @@ export interface IBlockHeaderProps {
      */
     size?: SizeType;
     /** 自定义 Bottom 值 */
-    spaceBottom?: number;
+    spaceBottom?: {
+        expand?: number;
+        collapse?: number;
+    } | number;
     /** 标题一行的样式类名 */
     className?: string;
     /** 标题的样式类名 */

package/esm/blockHeader/index.js

@@ -12,7 +12,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // 优化后的代码示例
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
@@ -34,7 +34,10 @@ var BlockHeader = function BlockHeader(props) {
     _props$size = props.size,
     size = _props$size === void 0 ? 'middle' : _props$size,
     _props$spaceBottom = props.spaceBottom,
-    spaceBottom = _props$spaceBottom === void 0 ? 16 : _props$spaceBottom,
+    spaceBottom = _props$spaceBottom === void 0 ? {
+      expand: 16,
+      collapse: 16
+    } : _props$spaceBottom,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     _props$contentClassNa = props.contentClassName,
@@ -70,11 +73,18 @@ var BlockHeader = function BlockHeader(props) {
   var currentExpand = isControlled(props) ? expand !== null && expand !== void 0 ? expand : false : internalExpand;
   var showCollapse = expandable && !!children;
   var tooltipProps = toTooltipProps(tooltip);
-  var bottomStyle = spaceBottom ? showCollapse && !currentExpand ? {
-    marginBottom: 0
-  } : {
-    marginBottom: spaceBottom
-  } : {};
+  var bottomStyle = useMemo(function () {
+    var _spaceBottom$key;
+    if (typeof spaceBottom === 'number') {
+      return {
+        marginBottom: spaceBottom
+      };
+    }
+    var key = currentExpand ? 'expand' : 'collapse';
+    return {
+      marginBottom: (_spaceBottom$key = spaceBottom[key]) !== null && _spaceBottom$key !== void 0 ? _spaceBottom$key : 0
+    };
+  }, [spaceBottom, currentExpand]);
   var handleExpand = function handleExpand() {
     var newExpandState = !currentExpand;
     !isControlled(props) && setInternalExpand(newExpandState);

package/lib/blockHeader/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './style';
-import type { LabelTooltipType } from '../_util';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { LabelTooltipType } from '../_util';
 export interface IBlockHeaderProps {
     /** id */
     id?: string;
@@ -23,7 +23,10 @@ export interface IBlockHeaderProps {
      */
     size?: SizeType;
     /** 自定义 Bottom 值 */
-    spaceBottom?: number;
+    spaceBottom?: {
+        expand?: number;
+        collapse?: number;
+    } | number;
     /** 标题一行的样式类名 */
     className?: string;
     /** 标题的样式类名 */

package/lib/blockHeader/index.js

@@ -28,7 +28,10 @@ const BlockHeader = props => {
     description = '',
     tooltip,
     size = 'middle',
-    spaceBottom = 16,
+    spaceBottom = {
+      expand: 16,
+      collapse: 16
+    },
     className = '',
     contentClassName = '',
     style = {},
@@ -51,11 +54,17 @@ const BlockHeader = props => {
   const currentExpand = isControlled(props) ? expand ?? false : internalExpand;
   const showCollapse = expandable && !!children;
   const tooltipProps = (0, _util.toTooltipProps)(tooltip);
-  const bottomStyle = spaceBottom ? showCollapse && !currentExpand ? {
-    marginBottom: 0
-  } : {
-    marginBottom: spaceBottom
-  } : {};
+  const bottomStyle = (0, _react.useMemo)(() => {
+    if (typeof spaceBottom === 'number') {
+      return {
+        marginBottom: spaceBottom
+      };
+    }
+    const key = currentExpand ? 'expand' : 'collapse';
+    return {
+      marginBottom: spaceBottom[key] ?? 0
+    };
+  }, [spaceBottom, currentExpand]);
   const handleExpand = () => {
     const newExpandState = !currentExpand;
     !isControlled(props) && setInternalExpand(newExpandState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtjoy/dt-design",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "react-component",
   "author": {
     "name": "夕颜",