@para-ui/core 3.0.28 → 3.0.30

package/CollapseBox/index.js

@@ -1,9 +1,9 @@
-import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-77980792.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-a77b261e.js';
-import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+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';
 
 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}";
@@ -11,30 +11,28 @@ 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); // 下拉收起的高度
-
+    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];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    inProp = _useState2[0],
+    setInProp = _useState2[1];
   useEffect(function () {
     return function () {
       clearTimeout(timer.current);
@@ -42,31 +40,28 @@ var CollapseBox = function CollapseBox(props) {
   }, []);
   useEffect(function () {
     setInProp(open);
-  }, [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;
-
+        style: style,
+        timeout: timeout
+      }, {
+        mode: 'enter'
+      }),
+      transitionDuration = _getTransitionProps.duration;
     if (timeout === 'auto') {
       var duration2 = getAutoHeightDuration(wrapperHeight);
       node.style.transitionDuration = "".concat(duration2, "ms");
@@ -74,28 +69,25 @@ var CollapseBox = function CollapseBox(props) {
     } 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;
-
+        style: style,
+        timeout: timeout
+      }, {
+        mode: 'exit'
+      }),
+      transitionDuration = _getTransitionProps2.duration;
     if (timeout === 'auto') {
       var duration2 = getAutoHeightDuration(wrapperHeight);
       node.style.transitionDuration = "".concat(duration2, "ms");
@@ -103,15 +95,13 @@ var CollapseBox = function CollapseBox(props) {
     } 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
-
-
+  };
+  // 处理className
   var handClass = function handClass(state) {
     var str = $prefixCls + '-collapse-box';
     if (className) str += ' ' + className;
@@ -119,7 +109,6 @@ var CollapseBox = function CollapseBox(props) {
     if (state === 'exited' && !inProp && collapsedHeight === '0px') str += " ".concat($prefixCls, "-collapse-box-hidden");
     return str;
   };
-
   return jsx(Transition, Object.assign({
     in: inProp,
     unmountOnExit: unmountOnExit,

package/CollapseLayout/index.js

@@ -1,13 +1,14 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-0590dc61.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
+import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-77980792.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import DoubleLeft from '@para-ui/icons/DoubleLeft';
 import DoubleRight from '@para-ui/icons/DoubleRight';
-import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
 import clsx from 'clsx';
-import { a as getAutoHeightDuration } from '../_verture/util-a77b261e.js';
+import { a as getAutoHeightDuration } from '../_verture/util-7e1fb1e2.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/typeof-498dd2b1.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-layout {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n.paraui-v3-collapse-layout .collapse-layout-icon-transform-top {\n  transform: rotate(90deg);\n}\n.paraui-v3-collapse-layout .collapse-layout-icon-transform-bottom {\n  transform: rotate(-90deg);\n}\n.paraui-v3-collapse-layout .collapse-layout-icon-transform-right {\n  transform: rotate(180deg);\n}\n.paraui-v3-collapse-layout .collapse-layout-display {\n  overflow: hidden;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-left .collapse-layout-click span, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-right .collapse-layout-click span, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-top .collapse-layout-click span, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-bottom .collapse-layout-click span {\n  font-size: 12px;\n  font-weight: 400;\n  text-align: center;\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-right .collapse-layout-click {\n  position: absolute;\n  top: 50%;\n  left: \"\";\n  width: 20px;\n  height: 72px;\n  background: rgba(171, 176, 185, 0.12);\n  text-align: center;\n  cursor: pointer;\n  margin-top: -36px;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: right;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  right: 0px;\n  border-radius: 4px 0 0 4px;\n  border-right: 1px solid rgb(54, 102, 214);\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-right .collapse-layout-display-shadow {\n  transition-property: margin-right;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-left .collapse-layout-click {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 20px;\n  height: 72px;\n  background: rgba(171, 176, 185, 0.12);\n  text-align: center;\n  cursor: pointer;\n  margin-top: -36px;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: left;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  border-left: 1px solid rgb(54, 102, 214);\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-left .collapse-layout-display-shadow {\n  transition-property: margin-left;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-left > div, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-right > div {\n  display: inline-block;\n  vertical-align: middle;\n  height: 100%;\n  position: relative;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-left .collapse-layout-display-shadow, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-right .collapse-layout-display-shadow {\n  height: 100%;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-left .collapse-layout-display,\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-left .collapse-layout-default, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-right .collapse-layout-display,\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-right .collapse-layout-default {\n  transition: width;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-left .collapse-layout-click, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-right .collapse-layout-click {\n  flex-direction: column;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-top .collapse-layout-click {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 72px;\n  height: 20px;\n  background: rgba(171, 176, 185, 0.12);\n  text-align: center;\n  cursor: pointer;\n  margin-top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: top;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  margin-left: -36px;\n  border-top: 1px solid rgb(54, 102, 214);\n  border-radius: 0 0 4px 4px;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-top .collapse-layout-display-shadow {\n  transition-property: margin-top;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-bottom .collapse-layout-click {\n  position: absolute;\n  top: \"\";\n  left: 50%;\n  width: 72px;\n  height: 20px;\n  background: rgba(171, 176, 185, 0.12);\n  text-align: center;\n  cursor: pointer;\n  margin-top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: bottom;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  margin-left: -36px;\n  bottom: 0px;\n  border-bottom: 1px solid rgb(54, 102, 214);\n  border-radius: 4px 4px 0 0;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-bottom .collapse-layout-display-shadow {\n  transition-property: margin-bottom;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-top .collapse-layout-display,\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-top .collapse-layout-default, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-bottom .collapse-layout-display,\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-bottom .collapse-layout-default {\n  transition-property: height;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-top .collapse-layout-display-shadow, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-bottom .collapse-layout-display-shadow {\n  width: 100%;\n}\n.paraui-v3-collapse-layout.paraui-v3-collapse-layout-top > div, .paraui-v3-collapse-layout.paraui-v3-collapse-layout-bottom > div {\n  display: block;\n  width: 100%;\n  position: relative;\n}";
 styleInject(css_248z);
@@ -16,28 +17,26 @@ styleInject(css_248z);
  * @author zhanzl
  * @date 2022/08/09
  */
-
 var CollapseLayout = function CollapseLayout(props) {
   var _props$type = props.type,
-      type = _props$type === void 0 ? 'left' : _props$type,
-      showLabel = props.showLabel,
-      _props$open = props.open,
-      open = _props$open === void 0 ? false : _props$open,
-      hideLabel = props.hideLabel,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? 20 : _props$spacing,
-      _props$zoomLength = props.zoomLength,
-      zoomLength = _props$zoomLength === void 0 ? 0 : _props$zoomLength,
-      _props$unit = props.unit,
-      unit = _props$unit === void 0 ? 'px' : _props$unit,
-      style = props.style,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className;
+    type = _props$type === void 0 ? 'left' : _props$type,
+    showLabel = props.showLabel,
+    _props$open = props.open,
+    open = _props$open === void 0 ? false : _props$open,
+    hideLabel = props.hideLabel,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 20 : _props$spacing,
+    _props$zoomLength = props.zoomLength,
+    zoomLength = _props$zoomLength === void 0 ? 0 : _props$zoomLength,
+    _props$unit = props.unit,
+    unit = _props$unit === void 0 ? 'px' : _props$unit,
+    style = props.style,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className;
   var displayRef = useRef(null);
   /**
    * 处理动画时间
    * */
-
   var handTime = function handTime() {
     var dom = displayRef.current;
     if (!dom) return 0;
@@ -45,19 +44,15 @@ var CollapseLayout = function CollapseLayout(props) {
     var durationHand = getAutoHeightDuration(rect.width);
     return durationHand;
   };
-
   var duration = handTime(); // 动画时间
-
   /**
    * 当前为收起还是展开
    */
-
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      showBox = _useState2[0],
-      setShowBox = _useState2[1]; // 渲染配置
-
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showBox = _useState2[0],
+    setShowBox = _useState2[1];
+  // 渲染配置
   var typeConfig = {
     layout: {
       left: ['display', 'default'],
@@ -65,36 +60,30 @@ var CollapseLayout = function CollapseLayout(props) {
       top: ['display', 'default'],
       bottom: ['default', 'display']
     }
-  }; // 首字母大写
-
+  };
+  // 首字母大写
   var formatterType = function formatterType(str) {
     var newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
     return newStr;
-  }; // 计算方位
-
-
+  };
+  // 计算方位
   var hangWH = function hangWH() {
     var wH = 'width';
-
     if (type === "top" || type === "bottom") {
       wH = 'height';
     }
-
     return wH;
-  }; // 收缩容器的样式
-
-
+  };
+  // 收缩容器的样式
   var handDisplayStyle = function handDisplayStyle() {
     var json = {};
     var collapseL = (showBox ? zoomLength : 0) + unit; // 收缩长度
-
     var wH = hangWH();
     json[wH] = collapseL;
     json['transitionDuration'] = duration + 'ms';
     return json;
-  }; // 收缩容器的样式,里面的样式
-
-
+  };
+  // 收缩容器的样式,里面的样式
   var handDisplayShowStyle = function handDisplayShowStyle() {
     var json = {};
     var direction = "margin".concat(formatterType(type));
@@ -103,22 +92,19 @@ var CollapseLayout = function CollapseLayout(props) {
     json[direction] = (showBox ? 0 : zoomLength) + unit;
     json['transitionDuration'] = duration + 'ms';
     return json;
-  }; // 自适应容器的样式
-
-
+  };
+  // 自适应容器的样式
   var handDefaultStyle = function handDefaultStyle() {
     var json = {};
     var wH = hangWH();
     var collapseL = showBox ? zoomLength : 0; // 收缩长度
-
     json[wH] = "calc(100% - ".concat(collapseL + spacing).concat(unit);
     var direction = "margin".concat(formatterType(type));
     json[direction] = spacing + unit;
     json['transitionDuration'] = duration + 'ms';
     return json;
-  }; // 布局
-
-
+  };
+  // 布局
   var Layout = function Layout() {
     return typeConfig.layout[type].map(function (key, idx) {
       switch (key) {
@@ -136,7 +122,6 @@ var CollapseLayout = function CollapseLayout(props) {
               children: props.displayContent
             }))
           }), idx);
-
         default:
           return jsx("div", Object.assign({
             className: "collapse-layout-default",
@@ -150,11 +135,8 @@ var CollapseLayout = function CollapseLayout(props) {
   /**
    * 展开收起按钮
    * */
-
-
   var handBtn = function handBtn() {
     var _style;
-
     /**
      * 计算后的展示文字
      */
@@ -175,7 +157,6 @@ var CollapseLayout = function CollapseLayout(props) {
       })]
     }));
   };
-
   useEffect(function () {
     setShowBox(open);
   }, [open]);