@dtjoy/dt-design 1.0.8 → 1.1.0

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 { LabelTooltipType } from '../_util';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
 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
@@ -37,14 +36,20 @@ export interface IBlockHeaderProps {
     background?: boolean;
     /** 当前展开状态 */
     expand?: boolean;
-    /** 是否默认展开内容, 默认为 undefined */
+    /** 是否可展开, 默认 true */
+    expandable?: boolean;
+    /** 是否默认展开内容, 默认为 false */
     defaultExpand?: boolean;
     /** 展开/收起的内容 */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** 展开/收起时的回调 */
     onExpand?: (expand: boolean) => void;
     /** 标题的样式 */
     titleStyle?: React.CSSProperties;
+    /** 是否保留 DOM 结构, 默认 false */
+    keepDOM?: boolean;
+    /** 是否懒加载, 默认 false */
+    lazy?: boolean;
 }
 declare const BlockHeader: React.FC<IBlockHeaderProps>;
 export default BlockHeader;

package/esm/blockHeader/index.js

@@ -11,6 +11,7 @@ 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 { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
@@ -44,7 +45,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,
@@ -54,26 +56,29 @@ var BlockHeader = function BlockHeader(props) {
       className: "addon-before--default"
     }) : _props$addonBefore,
     onExpand = props.onExpand,
-    titleStyle = props.titleStyle;
+    titleStyle = props.titleStyle,
+    _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 ? {
+  var bottomStyle = spaceBottom ? 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 handleExpand = function handleExpand() {
+    var newExpandState = !currentExpand;
+    !isControlled(props) && setInternalExpand(newExpandState);
+    onExpand === null || onExpand === void 0 || onExpand(newExpandState);
   };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -82,9 +87,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", {
@@ -109,7 +112,9 @@ 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", {
     className: clsx("".concat(prefixCls, "__content"), contentClassName, _defineProperty({}, "".concat(prefixCls, "__content--active"), currentExpand || !showCollapse)),
     style: contentStyle

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 { LabelTooltipType } from '../_util';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
 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
@@ -37,14 +36,20 @@ export interface IBlockHeaderProps {
     background?: boolean;
     /** 当前展开状态 */
     expand?: boolean;
-    /** 是否默认展开内容, 默认为 undefined */
+    /** 是否可展开, 默认 true */
+    expandable?: boolean;
+    /** 是否默认展开内容, 默认为 false */
     defaultExpand?: boolean;
     /** 展开/收起的内容 */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** 展开/收起时的回调 */
     onExpand?: (expand: boolean) => void;
     /** 标题的样式 */
     titleStyle?: React.CSSProperties;
+    /** 是否保留 DOM 结构, 默认 false */
+    keepDOM?: boolean;
+    /** 是否懒加载, 默认 false */
+    lazy?: boolean;
 }
 declare const BlockHeader: React.FC<IBlockHeaderProps>;
 export default BlockHeader;

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;
 }
@@ -34,7 +34,7 @@ const BlockHeader = props => {
     style = {},
     contentStyle = {},
     background = true,
-    defaultExpand,
+    defaultExpand = true,
     addonAfter,
     expand,
     children = '',
@@ -42,24 +42,24 @@ const BlockHeader = props => {
       className: "addon-before--default"
     }),
     onExpand,
-    titleStyle
+    titleStyle,
+    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 ? {
+  const bottomStyle = spaceBottom ? showCollapse && !currentExpand ? {
     marginBottom: 0
   } : {
     marginBottom: spaceBottom
-  };
-  const handleExpand = expand => {
-    if (!children) return;
-    !isControlled(props) && setInternalExpand(expand);
-    onExpand?.(expand);
+  } : {};
+  const handleExpand = () => {
+    const newExpandState = !currentExpand;
+    !isControlled(props) && setInternalExpand(newExpandState);
+    onExpand?.(newExpandState);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     id: id,
@@ -74,7 +74,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", {
@@ -99,7 +99,9 @@ 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", {
     className: (0, _clsx.default)(`${prefixCls}__content`, contentClassName, {
       [`${prefixCls}__content--active`]: currentExpand || !showCollapse

package/package.json

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