@dtjoy/dt-design 1.0.9 → 1.1.1

package/esm/blockHeader/index.d.ts

@@ -1,21 +1,20 @@
-import type { ReactNode } from 'react';
 import React from 'react';
 import './style';
-import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
 import type { LabelTooltipType } from '../_util';
 export interface IBlockHeaderProps {
     /** id */
     id?: string;
     /** 标题 */
-    title: ReactNode;
+    title: React.ReactNode;
     /** 标题前的图标，默认是一个色块 */
-    addonBefore?: ReactNode;
+    addonBefore?: React.ReactNode;
     /** 标题后的提示说明文字 */
-    description?: ReactNode;
+    description?: React.ReactNode;
     /** 默认展示为问号的tooltip */
     tooltip?: LabelTooltipType;
     /** 后缀自定义内容块 */
-    addonAfter?: ReactNode;
+    addonAfter?: React.ReactNode;
     /**
      * 小标题 font-size: 12px; line-height: 32px
      * 中标题 font-size: 14px; line-height: 40px
@@ -24,7 +23,10 @@ export interface IBlockHeaderProps {
      */
     size?: SizeType;
     /** 自定义 Bottom 值 */
-    spaceBottom?: number;
+    spaceBottom?: {
+        expand?: number;
+        collapse?: number;
+    } | number;
     /** 标题一行的样式类名 */
     className?: string;
     /** 标题的样式类名 */
@@ -37,10 +39,12 @@ export interface IBlockHeaderProps {
     background?: boolean;
     /** 当前展开状态 */
     expand?: boolean;
-    /** 是否默认展开内容, 默认为 undefined */
+    /** 是否可展开, 默认 true */
+    expandable?: boolean;
+    /** 是否默认展开内容, 默认为 false */
     defaultExpand?: boolean;
     /** 展开/收起的内容 */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** 展开/收起时的回调 */
     onExpand?: (expand: boolean) => void;
     /** 标题的样式 */

package/esm/blockHeader/index.js

@@ -11,7 +11,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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';
@@ -33,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,
@@ -44,7 +48,8 @@ var BlockHeader = function BlockHeader(props) {
     contentStyle = _props$contentStyle === void 0 ? {} : _props$contentStyle,
     _props$background = props.background,
     background = _props$background === void 0 ? true : _props$background,
-    defaultExpand = props.defaultExpand,
+    _props$defaultExpand = props.defaultExpand,
+    defaultExpand = _props$defaultExpand === void 0 ? true : _props$defaultExpand,
     addonAfter = props.addonAfter,
     expand = props.expand,
     _props$children = props.children,
@@ -55,27 +60,35 @@ var BlockHeader = function BlockHeader(props) {
     }) : _props$addonBefore,
     onExpand = props.onExpand,
     titleStyle = props.titleStyle,
-    keepDOM = props.keepDOM,
-    lazy = props.lazy;
+    _props$keepDOM = props.keepDOM,
+    keepDOM = _props$keepDOM === void 0 ? false : _props$keepDOM,
+    _props$lazy = props.lazy,
+    lazy = _props$lazy === void 0 ? false : _props$lazy,
+    _props$expandable = props.expandable,
+    expandable = _props$expandable === void 0 ? true : _props$expandable;
   var _useState = useState(defaultExpand),
     _useState2 = _slicedToArray(_useState, 2),
     internalExpand = _useState2[0],
     setInternalExpand = _useState2[1];
-  var currentExpand = isControlled(props) ? expand : internalExpand;
-
-  // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
-  var showCollapse = (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
+  var currentExpand = isControlled(props) ? expand !== null && expand !== void 0 ? expand : false : internalExpand;
+  var showCollapse = expandable && !!children;
   var tooltipProps = toTooltipProps(tooltip);
-  var bottomStyle = {};
-  if (spaceBottom) bottomStyle = showCollapse && !currentExpand ? {
-    marginBottom: 0
-  } : {
-    marginBottom: spaceBottom
-  };
-  var handleExpand = function handleExpand(expand) {
-    if (!children) return;
-    !isControlled(props) && setInternalExpand(expand);
-    onExpand === null || onExpand === void 0 || onExpand(expand);
+  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);
+    onExpand === null || onExpand === void 0 || onExpand(newExpandState);
   };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -84,9 +97,7 @@ var BlockHeader = function BlockHeader(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: clsx(preTitleRowCls, "".concat(preTitleRowCls, "--").concat(size), _defineProperty(_defineProperty({}, "".concat(preTitleRowCls, "--background"), background), "".concat(preTitleRowCls, "--pointer"), showCollapse)),
     style: titleStyle,
-    onClick: function onClick() {
-      return showCollapse && handleExpand(!currentExpand);
-    }
+    onClick: showCollapse ? handleExpand : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: "title__box"
   }, addonBefore ? /*#__PURE__*/React.createElement("div", {
@@ -111,7 +122,7 @@ var BlockHeader = function BlockHeader(props) {
       'collapse__icon--down': !currentExpand
     })
   }))), /*#__PURE__*/React.createElement(Collapsible, {
-    isOpen: !currentExpand,
+    isOpen: currentExpand,
     keepDOM: keepDOM,
     lazyRender: lazy
   }, /*#__PURE__*/React.createElement("div", {

package/lib/blockHeader/index.d.ts

@@ -1,21 +1,20 @@
-import type { ReactNode } from 'react';
 import React from 'react';
 import './style';
-import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
 import type { LabelTooltipType } from '../_util';
 export interface IBlockHeaderProps {
     /** id */
     id?: string;
     /** 标题 */
-    title: ReactNode;
+    title: React.ReactNode;
     /** 标题前的图标，默认是一个色块 */
-    addonBefore?: ReactNode;
+    addonBefore?: React.ReactNode;
     /** 标题后的提示说明文字 */
-    description?: ReactNode;
+    description?: React.ReactNode;
     /** 默认展示为问号的tooltip */
     tooltip?: LabelTooltipType;
     /** 后缀自定义内容块 */
-    addonAfter?: ReactNode;
+    addonAfter?: React.ReactNode;
     /**
      * 小标题 font-size: 12px; line-height: 32px
      * 中标题 font-size: 14px; line-height: 40px
@@ -24,7 +23,10 @@ export interface IBlockHeaderProps {
      */
     size?: SizeType;
     /** 自定义 Bottom 值 */
-    spaceBottom?: number;
+    spaceBottom?: {
+        expand?: number;
+        collapse?: number;
+    } | number;
     /** 标题一行的样式类名 */
     className?: string;
     /** 标题的样式类名 */
@@ -37,10 +39,12 @@ export interface IBlockHeaderProps {
     background?: boolean;
     /** 当前展开状态 */
     expand?: boolean;
-    /** 是否默认展开内容, 默认为 undefined */
+    /** 是否可展开, 默认 true */
+    expandable?: boolean;
+    /** 是否默认展开内容, 默认为 false */
     defaultExpand?: boolean;
     /** 展开/收起的内容 */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** 展开/收起时的回调 */
     onExpand?: (expand: boolean) => void;
     /** 标题的样式 */

package/lib/blockHeader/index.js

@@ -15,7 +15,7 @@ var _collapsible = _interopRequireDefault(require("../collapsible"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // 优化后的代码示例
 function isControlled(props) {
   return props.expand !== undefined;
 }
@@ -28,13 +28,16 @@ const BlockHeader = props => {
     description = '',
     tooltip,
     size = 'middle',
-    spaceBottom = 16,
+    spaceBottom = {
+      expand: 16,
+      collapse: 16
+    },
     className = '',
     contentClassName = '',
     style = {},
     contentStyle = {},
     background = true,
-    defaultExpand,
+    defaultExpand = true,
     addonAfter,
     expand,
     children = '',
@@ -43,25 +46,29 @@ const BlockHeader = props => {
     }),
     onExpand,
     titleStyle,
-    keepDOM,
-    lazy
+    keepDOM = false,
+    lazy = false,
+    expandable = true
   } = props;
   const [internalExpand, setInternalExpand] = (0, _react.useState)(defaultExpand);
-  const currentExpand = isControlled(props) ? expand : internalExpand;
-
-  // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
-  const showCollapse = (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
+  const currentExpand = isControlled(props) ? expand ?? false : internalExpand;
+  const showCollapse = expandable && !!children;
   const tooltipProps = (0, _util.toTooltipProps)(tooltip);
-  let bottomStyle = {};
-  if (spaceBottom) bottomStyle = showCollapse && !currentExpand ? {
-    marginBottom: 0
-  } : {
-    marginBottom: spaceBottom
-  };
-  const handleExpand = expand => {
-    if (!children) return;
-    !isControlled(props) && setInternalExpand(expand);
-    onExpand?.(expand);
+  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);
+    onExpand?.(newExpandState);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     id: id,
@@ -76,7 +83,7 @@ const BlockHeader = props => {
       [`${preTitleRowCls}--pointer`]: showCollapse
     }),
     style: titleStyle,
-    onClick: () => showCollapse && handleExpand(!currentExpand)
+    onClick: showCollapse ? handleExpand : undefined
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "title__box"
   }, addonBefore ? /*#__PURE__*/_react.default.createElement("div", {
@@ -101,7 +108,7 @@ const BlockHeader = props => {
       'collapse__icon--down': !currentExpand
     })
   }))), /*#__PURE__*/_react.default.createElement(_collapsible.default, {
-    isOpen: !currentExpand,
+    isOpen: currentExpand,
     keepDOM: keepDOM,
     lazyRender: lazy
   }, /*#__PURE__*/_react.default.createElement("div", {

package/package.json

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