@para-ui/core 3.0.55 → 3.0.56

package/CheckboxGroup/index.js

@@ -0,0 +1,142 @@
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { useState, useEffect, createElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../Checkbox/index.js';
+import Label from '../Label/index.js';
+import HelperText from '../HelperText/index.js';
+import { DeepClone } from '@paraview/lib';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../Help/index.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import 'clsx';
+import '@para-ui/icons/Help';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-checkbox-group {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 100%;\n}\n.paraui-v3-checkbox-group > .checkbox-group-label {\n  margin-bottom: 4px;\n}\n.paraui-v3-checkbox-group > .checkbox-group-content {\n  line-height: 0;\n}\n.paraui-v3-checkbox-group > .checkbox-group-content > .paraui-v3-checkbox {\n  margin-top: 8px;\n  margin-bottom: 4px;\n}\n.paraui-v3-checkbox-group.paraui-v3-checkbox-group-column > .checkbox-group-content {\n  display: flex;\n  flex-direction: column;\n}";
+styleInject(css_248z);
+
+var CheckboxGroup = function CheckboxGroup(props) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? '' : _props$label,
+    labelTooltip = props.labelTooltip,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? '28px' : _props$spacing,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
+    _props$row = props.row,
+    row = _props$row === void 0 ? true : _props$row,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
+    hideErrorDom = props.hideErrorDom,
+    _props$helperText = props.helperText,
+    helperText = _props$helperText === void 0 ? '' : _props$helperText,
+    _props$id = props.id,
+    id = _props$id === void 0 ? 'name' : _props$id,
+    list = props.list,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    onChange = props.onChange,
+    style = props.style;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    valueCom = _useState2[0],
+    setValueCom = _useState2[1];
+  useEffect(function () {
+    if (props.defaultValue !== undefined) setValueCom(props.defaultValue);
+  }, []);
+  useEffect(function () {
+    if (props.value !== undefined) setValueCom(props.value);
+  }, [props.value]);
+  /**
+   *
+   * @param item 点击当前项数据
+   * @event 点击元素
+   * @checked 当前值
+   */
+  var onchangeCom = function onchangeCom(item) {
+    return function (event, checked) {
+      var name = item[id]; // 值
+      var arr = DeepClone(valueCom);
+      if (checked) {
+        arr.push(name);
+      } else {
+        var index = arr.indexOf(name);
+        arr.splice(index, 1);
+      }
+      if (props.value === undefined) setValueCom(arr);
+      onChange && onChange(arr);
+    };
+  };
+  var handLabel = function handLabel() {
+    if (label || required) {
+      var handLabelClass = function handLabelClass() {
+        var str = 'checkbox-group-label';
+        if (labelTooltip && labelTooltip.className) {
+          str += ' ' + labelTooltip.className;
+        }
+        return str;
+      };
+      return jsx(Label, Object.assign({
+        label: label,
+        required: required
+      }, labelTooltip, {
+        className: handLabelClass()
+      }));
+    }
+    return null;
+  };
+  /**
+   * @description 处理单选框每一项样式
+   * */
+  var handStyleItem = function handStyleItem(item, index) {
+    var obj = Object.assign({}, item.style);
+    if (spacing && row && list.length !== index + 1) {
+      obj.marginRight = spacing;
+    }
+    return obj;
+  };
+  // 处理class
+  var handClass = function handClass() {
+    var str = $prefixCls + '-checkbox-group';
+    if (className) str += ' ' + className;
+    if (size) str += " ".concat($prefixCls, "-checkbox-group-").concat(size);
+    if (error) str += " ".concat($prefixCls, "-checkbox-group-error");
+    if (disabled) str += " ".concat($prefixCls, "-checkbox-group-disabled");
+    if (row) str += " ".concat($prefixCls, "-checkbox-group-row");else str += " ".concat($prefixCls, "-checkbox-group-column");
+    return str;
+  };
+  return jsxs("div", Object.assign({
+    className: handClass(),
+    style: style
+  }, {
+    children: [handLabel(), jsx("div", Object.assign({
+      className: "checkbox-group-content"
+    }, {
+      children: list.map(function (item, index) {
+        return /*#__PURE__*/createElement(Checkbox, Object.assign({}, item, {
+          style: handStyleItem(item, index),
+          checked: valueCom.indexOf(item[id]) !== -1,
+          size: size,
+          disabled: Boolean(disabled || item.disabled),
+          key: index,
+          onChange: onchangeCom(item)
+        }));
+      })
+    })), jsx(HelperText, {
+      className: "checkbox-group-error-text",
+      error: error,
+      helperText: helperText,
+      hideErrorDom: hideErrorDom
+    })]
+  }));
+};
+
+export { CheckboxGroup, CheckboxGroup as default };

package/Collapse/collapsePanel.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @author linhd
+ * @date 2022/3/7 4:12 PM
+ * @description 折叠面板
+ */
+import React, { FunctionComponent } from 'react';
+export type CollapsibleType = 'header' | 'disabled';
+export interface CollapsePanelProps {
+    /** className */
+    className?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+    /** 对应 activeKey */
+    key: string | number;
+    /** 面板头内容 */
+    header: React.ReactNode;
+    /** @deprecated Use `collapsible="disabled"` instead */
+    disabled?: boolean;
+    /** 是否展示当前面板上的箭头 */
+    showArrow?: boolean;
+    /** 被隐藏时是否渲染 DOM 结构 */
+    forceRender?: boolean;
+    id?: string;
+    /** 自定义渲染每个面板右上角的内容 */
+    extra?: React.ReactNode;
+    /** 是否可折叠或指定可折叠触发区域 */
+    collapsible?: CollapsibleType;
+}
+export declare const CollapsePanelProps: FunctionComponent<CollapsePanelProps>;
+export default CollapsePanelProps;

package/Collapse/index.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @author linhd
+ * @date 2022/3/7 4:03 PM
+ * @description 折叠面板
+ */
+import React from 'react';
+import CollapsePanel, { CollapsibleType } from './collapsePanel';
+import './index.scss';
+export type ExpandIconPosition = 'left' | 'right' | undefined;
+export interface CollapseProps {
+    /** className */
+    className?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+    /** 初始化选中面板的 key */
+    defaultActiveKey?: Array<string | number> | string | number;
+    /** 当前激活 tab 面板的 key */
+    activeKey?: Array<string | number> | string | number;
+    /** 手风琴模式 */
+    accordion?: boolean;
+    /** 所有子面板是否可折叠或指定可折叠触发区域 */
+    collapsible?: CollapsibleType;
+    /** 销毁折叠隐藏的面板 */
+    destroyInactivePanel?: boolean;
+    /** 自定义切换图标 */
+    expandIcon?: (panelProps: PanelProps) => React.ReactNode;
+    /** 设置图标位置 */
+    expandIconPosition?: ExpandIconPosition;
+    /** onChange */
+    onChange?: (key: string | string[]) => void;
+    children?: any;
+}
+interface PanelProps {
+    /** 是否展开 */
+    isActive?: boolean;
+    /** 面板头内容 */
+    header?: React.ReactNode;
+    /** className */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 是否展示当前面板上的箭头 */
+    showArrow?: boolean;
+    /** 被隐藏时是否渲染 DOM 结构 */
+    forceRender?: boolean;
+    /** @deprecated Use `collapsible="disabled"` instead */
+    disabled?: boolean;
+    /** 自定义渲染每个面板右上角的内容 */
+    extra?: React.ReactNode;
+    /** 是否可折叠或指定可折叠触发区域 */
+    collapsible?: CollapsibleType;
+}
+interface CollapseInterface extends React.FC<CollapseProps> {
+    Panel: typeof CollapsePanel;
+}
+export declare const Collapse: CollapseInterface;
+export default Collapse;

package/Collapse/index.js

@@ -0,0 +1,152 @@
+import { jsx } from 'react/jsx-runtime';
+import RcCollapse from 'rc-collapse';
+import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import * as React from 'react';
+import Right from '@para-ui/icons/Right';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+
+var CollapsePanelProps = function CollapsePanelProps(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$showArrow = props.showArrow,
+    showArrow = _props$showArrow === void 0 ? true : _props$showArrow;
+  /** 处理className */
+  var handClass = function handClass() {
+    var str = '';
+    if (className) str += className;
+    if (!showArrow) str += ' collapse-panel-no-arrow';
+    return str;
+  };
+  return jsx(RcCollapse.Panel, Object.assign({}, props, {
+    className: handClass(),
+    prefixCls: $rcPrefixCls + '-collapse'
+  }));
+};
+
+var isValidElement = React.isValidElement;
+function replaceElement(element, replacement, props) {
+  if (!isValidElement(element)) return replacement;
+  return /*#__PURE__*/React.cloneElement(element, typeof props === 'function' ? props(element.props || {}) : props);
+}
+function cloneElement(element, props) {
+  return replaceElement(element, element, props);
+}
+/** toArray */
+function toArray(list) {
+  if (!list) {
+    return [];
+  }
+  return Array.isArray(list) ? list : [list];
+}
+/** omit */
+function omit(obj, fields) {
+  var clone = Object.assign({}, obj);
+  if (Array.isArray(fields)) {
+    fields.forEach(function (key) {
+      delete clone[key];
+    });
+  }
+  return clone;
+}
+
+// ================== Collapse Motion ==================
+var getCollapsedHeight = function getCollapsedHeight() {
+  return {
+    height: 0,
+    opacity: 0
+  };
+};
+var getRealHeight = function getRealHeight(node) {
+  var scrollHeight = node.scrollHeight;
+  return {
+    height: scrollHeight,
+    opacity: 1
+  };
+};
+var getCurrentHeight = function getCurrentHeight(node) {
+  return {
+    height: node ? node.offsetHeight : 0
+  };
+};
+var skipOpacityTransition = function skipOpacityTransition(_, event) {
+  return (event === null || event === void 0 ? void 0 : event.deadline) === true || event.propertyName === 'height';
+};
+var collapseMotion = {
+  motionName: 'collapse-motion-collapse',
+  onAppearStart: getCollapsedHeight,
+  onEnterStart: getCollapsedHeight,
+  onAppearActive: getRealHeight,
+  onEnterActive: getRealHeight,
+  onLeaveStart: getCurrentHeight,
+  onLeaveActive: getCollapsedHeight,
+  onAppearEnd: skipOpacityTransition,
+  onEnterEnd: skipOpacityTransition,
+  onLeaveEnd: skipOpacityTransition,
+  motionDeadline: 500
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-collapse {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  background-color: white;\n  border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-collapse .collapse-motion-collapse {\n  overflow: hidden;\n  transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important;\n}\n.paraui-v3-collapse > .component-collapse-item {\n  border-top: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-collapse > .component-collapse-item > .component-collapse-header {\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  color: rgb(46, 55, 67);\n  cursor: pointer;\n  font-weight: 700;\n}\n.paraui-v3-collapse > .component-collapse-item > .component-collapse-header > .collapse-svg-box {\n  line-height: 0;\n  margin-right: 16px;\n}\n.paraui-v3-collapse > .component-collapse-item > .component-collapse-header > .collapse-svg-box svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-collapse > .component-collapse-item > .component-collapse-header > .collapse-svg-box .collapse-expand-svg {\n  transition: all 0.3s, visibility 0s;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-collapse > .component-collapse-item > .component-collapse-header > .component-collapse-extra {\n  line-height: 0;\n  margin-left: auto;\n}\n.paraui-v3-collapse > .component-collapse-item > .component-collapse-header > .component-collapse-extra svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-collapse > .component-collapse-item > .component-collapse-content.collapse-content-hidden {\n  display: none;\n}\n.paraui-v3-collapse > .component-collapse-item > .component-collapse-content > .component-collapse-content-box {\n  padding: 0 16px 16px;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-v3-collapse > .component-collapse-item.component-collapse-item-active > .component-collapse-header > .collapse-svg-box .collapse-expand-svg {\n  transform: rotate(90deg);\n}\n.paraui-v3-collapse.paraui-v3-collapse-svg-right > .component-collapse-item > .component-collapse-header {\n  padding-right: 40px;\n  position: relative;\n}\n.paraui-v3-collapse.paraui-v3-collapse-svg-right > .component-collapse-item > .component-collapse-header > .collapse-svg-box {\n  position: absolute;\n  right: 12px;\n  top: 17px;\n  margin-right: 0;\n}\n.paraui-v3-collapse > .component-collapse-item-disabled > .component-collapse-header {\n  color: rgb(46, 55, 67);\n  cursor: not-allowed;\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-collapse > .component-collapse-item-disabled > .component-collapse-header > .collapse-svg-box svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-collapse > .component-collapse-item-disabled > .component-collapse-header > .collapse-svg-box .collapse-expand-svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-collapse > .component-collapse-item-disabled > .component-collapse-header > .component-collapse-extra svg {\n  color: rgb(46, 55, 67);\n}";
+styleInject(css_248z);
+
+var Collapse = function Collapse(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$expandIconPosi = props.expandIconPosition,
+    expandIconPosition = _props$expandIconPosi === void 0 ? 'left' : _props$expandIconPosi;
+  /** 处理字内容 */
+  var getItems = function getItems() {
+    var children = props.children;
+    return toArray(children).map(function (child, index) {
+      var _a;
+      if ((_a = child.props) === null || _a === void 0 ? void 0 : _a.disabled) {
+        var key = child.key || String(index);
+        var _child$props = child.props,
+          disabled = _child$props.disabled,
+          collapsible = _child$props.collapsible;
+        var childProps = Object.assign(Object.assign({}, omit(child.props, ['disabled'])), {
+          key: key,
+          collapsible: collapsible !== null && collapsible !== void 0 ? collapsible : disabled ? 'disabled' : undefined
+        });
+        return cloneElement(child, childProps);
+      }
+      return child;
+    });
+  };
+  /** 处理展开图标 */
+  var renderExpandIcon = function renderExpandIcon() {
+    var panelProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var expandIcon = props.expandIcon;
+    var icon = expandIcon ? expandIcon(panelProps) : jsx(Right, {
+      className: "collapse-expand-svg"
+    });
+    return jsx("div", Object.assign({
+      className: "collapse-svg-box"
+    }, {
+      children: icon
+    }));
+  };
+  /** 处理className */
+  var handClass = function handClass() {
+    var str = $prefixCls + '-collapse';
+    if (className) str += ' ' + className;
+    if (expandIconPosition) str += " ".concat($prefixCls, "-collapse-svg-").concat(expandIconPosition);
+    return str;
+  };
+  /** 处理过度动画 */
+  var openMotion = Object.assign(Object.assign({}, collapseMotion), {
+    motionAppear: false,
+    leavedClassName: "collapse-content-hidden"
+  });
+  return jsx(RcCollapse, Object.assign({
+    openMotion: openMotion
+  }, props, {
+    expandIcon: renderExpandIcon,
+    prefixCls: $rcPrefixCls + '-collapse',
+    className: handClass()
+  }, {
+    children: getItems()
+  }));
+};
+Collapse.Panel = CollapsePanelProps;
+
+export { Collapse, Collapse as default };

package/Collapse/motion.d.ts

@@ -0,0 +1,5 @@
+import { CSSMotionProps } from 'rc-motion';
+declare const collapseMotion: CSSMotionProps;
+declare const getTransitionName: (rootPrefixCls: string, motion: string, transitionName?: string) => string;
+export { getTransitionName };
+export default collapseMotion;

package/Collapse/util.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare const isValidElement: typeof React.isValidElement;
+type AnyObject = Record<any, any>;
+type RenderProps = undefined | AnyObject | ((originProps: AnyObject) => AnyObject | undefined);
+export declare function replaceElement(element: React.ReactNode, replacement: React.ReactNode, props: RenderProps): React.ReactNode;
+export declare function cloneElement(element: React.ReactNode, props?: RenderProps): React.ReactElement;
+/** toArray */
+export declare function toArray<T>(list: T | T[]): T[];
+/** omit */
+export declare function omit<T extends object, K extends keyof T>(obj: T, fields: K[]): Omit<T, K>;
+export {};

package/CollapseBox/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @author linhd
+ * @date 2022/5/23 2:19 PM
+ * @description 折叠容器
+ */
+import React, { FunctionComponent } from 'react';
+import './index.scss';
+export interface CollapseBoxProps {
+    /** className */
+    className?: string;
+    /** css样式 */
+    style?: React.CSSProperties;
+    /** 收起状态最小高度 */
+    collapsedHeight?: string | number;
+    /** 收起时是否不渲染子节点 */
+    unmountOnExit?: boolean;
+    /** 动画时间 */
+    timeout?: 'auto' | number | {
+        appear?: number | undefined;
+        enter?: number | undefined;
+        exit?: number | undefined;
+    };
+    children?: any;
+    [name: string]: any;
+}
+declare const CollapseBox: FunctionComponent<CollapseBoxProps>;
+export default CollapseBox;

package/CollapseBox/index.js

@@ -0,0 +1,148 @@
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { Transition } from 'react-transition-group';
+import { g as getTransitionProps, a as getAutoHeightDuration } from '../_verture/util-7e1fb1e2.js';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-collapse-box {\n  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  width: 100%;\n  overflow: hidden;\n  height: 0;\n}\n.paraui-v3-collapse-box > .collapse-box-wrapper {\n  display: flex;\n  width: 100%;\n}\n.paraui-v3-collapse-box > .collapse-box-wrapper > .collapse-box-wrapper-inner {\n  width: 100%;\n}\n.paraui-v3-collapse-box.paraui-v3-collapse-box-entered {\n  overflow: visible;\n}\n.paraui-v3-collapse-box.paraui-v3-collapse-box-hidden {\n  visibility: hidden;\n}";
+styleInject(css_248z);
+
+var CollapseBox = function CollapseBox(props) {
+  var className = props.className,
+    style = props.style,
+    open = props.in,
+    _props$collapsedHeigh = props.collapsedHeight,
+    collapsedHeightProp = _props$collapsedHeigh === void 0 ? '0px' : _props$collapsedHeigh,
+    _props$timeout = props.timeout,
+    timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
+    unmountOnExit = props.unmountOnExit,
+    _children = props.children;
+  // timer
+  var timer = useRef(null);
+  // 动画节点
+  var nodeRef = useRef(null);
+  // 内置容器
+  var wrapperRef = useRef(null);
+  // 存储动画时间变量
+  var autoTransitionDuration = useRef(null);
+  // 下拉收起的高度
+  var collapsedHeight = typeof collapsedHeightProp === 'number' ? "".concat(collapsedHeightProp, "px") : collapsedHeightProp;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    inProp = _useState2[0],
+    setInProp = _useState2[1];
+  useEffect(function () {
+    return function () {
+      clearTimeout(timer.current);
+    };
+  }, []);
+  useEffect(function () {
+    setInProp(open);
+  }, [open]);
+  // 处理节点
+  var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
+    return function (nodeOrAppearing) {
+      if (callback) {
+        callback(nodeOrAppearing);
+      }
+    };
+  };
+  // 下拉
+  var handleEnter = normalizedTransitionCallback(function (node) {
+    node.style.height = collapsedHeight;
+  });
+  var handleEntering = normalizedTransitionCallback(function (node) {
+    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
+    var _getTransitionProps = getTransitionProps({
+        style: style,
+        timeout: timeout
+      }, {
+        mode: 'enter'
+      }),
+      transitionDuration = _getTransitionProps.duration;
+    if (timeout === 'auto') {
+      var duration2 = getAutoHeightDuration(wrapperHeight);
+      node.style.transitionDuration = "".concat(duration2, "ms");
+      autoTransitionDuration.current = duration2;
+    } else {
+      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
+    }
+    node.style.height = "".concat(wrapperHeight, "px");
+  });
+  var handleEntered = normalizedTransitionCallback(function (node) {
+    node.style.height = 'auto';
+  });
+  // 收起
+  var handleExit = normalizedTransitionCallback(function (node) {
+    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
+    node.style.height = "".concat(wrapperHeight, "px");
+  });
+  var handleExiting = normalizedTransitionCallback(function (node) {
+    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
+    var _getTransitionProps2 = getTransitionProps({
+        style: style,
+        timeout: timeout
+      }, {
+        mode: 'exit'
+      }),
+      transitionDuration = _getTransitionProps2.duration;
+    if (timeout === 'auto') {
+      var duration2 = getAutoHeightDuration(wrapperHeight);
+      node.style.transitionDuration = "".concat(duration2, "ms");
+      autoTransitionDuration.current = duration2;
+    } else {
+      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
+    }
+    node.style.height = collapsedHeight;
+  });
+  // 完成下拉/收起回调
+  var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
+    timer.current = setTimeout(maybeNext, autoTransitionDuration.current || 0);
+  };
+  // 处理className
+  var handClass = function handClass(state) {
+    var str = $prefixCls + '-collapse-box';
+    if (className) str += ' ' + className;
+    if (state === 'entered') str += " ".concat($prefixCls, "-collapse-box-entered");
+    if (state === 'exited' && !inProp && collapsedHeight === '0px') str += " ".concat($prefixCls, "-collapse-box-hidden");
+    return str;
+  };
+  return jsx(Transition, Object.assign({
+    in: inProp,
+    unmountOnExit: unmountOnExit,
+    onEnter: handleEnter,
+    onEntered: handleEntered,
+    onEntering: handleEntering,
+    onExit: handleExit,
+    onExiting: handleExiting,
+    //nodeRef={nodeRef}
+    timeout: timeout === 'auto' ? undefined : timeout,
+    addEndListener: addEndListener
+  }, {
+    children: function children(state, childProps) {
+      return jsx("div", Object.assign({
+        className: handClass(state),
+        style: Object.assign({
+          minHeight: collapsedHeight
+        }, style),
+        ref: nodeRef
+      }, childProps, {
+        children: jsx("div", Object.assign({
+          className: 'collapse-box-wrapper',
+          ref: wrapperRef
+        }, {
+          children: jsx("div", Object.assign({
+            className: 'collapse-box-wrapper-inner'
+          }, {
+            children: _children
+          }))
+        }))
+      }));
+    }
+  }));
+};
+
+export { CollapseBox as default };

package/CollapseBox/util.d.ts

@@ -0,0 +1,5 @@
+export declare function getTransitionProps(props: any, options: any): {
+    duration: any;
+    delay: any;
+};
+export declare function getAutoHeightDuration(height: any): number;

package/CollapseLayout/index.d.ts

@@ -0,0 +1,53 @@
+import React, { FC } from 'react';
+import './index.scss';
+export interface CollapseLayoutProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * 收起出现的位置
+     * 默认 left
+     */
+    type?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * 普通展示数据
+     */
+    defaultContent?: React.ReactNode;
+    /**
+     * 显示隐藏的数据
+     */
+    displayContent?: React.ReactNode;
+    /**
+     * 展开还是收起
+     */
+    open?: boolean;
+    /**
+     * 允许缩放的长度
+     * */
+    zoomLength?: number;
+    /**
+     * 单位
+     * 默认px
+     */
+    unit?: string;
+    /**
+     * 展开按钮显示文字
+     */
+    showLabel?: string;
+    /**
+     * 收起按钮展示文字
+     */
+    hideLabel?: string;
+    /**
+     * 间距
+     * 默认20
+     */
+    spacing?: number;
+    /** 点击回调 bol 显示/展开 */
+    onClickBtn?: (bol?: boolean) => void;
+}
+/**
+ * @author zhanzl
+ * @date 2022/08/09
+ */
+declare const CollapseLayout: FC<CollapseLayoutProps>;
+export default CollapseLayout;