@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.5

package/Collapse/index.js

@@ -1,18 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import RcCollapse from 'rc-collapse';
-import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-5317fc89.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;
+const CollapsePanelProps = props => {
+  const {
+    className = '',
+    showArrow = true
+  } = props;
   /** 处理className */
-  var handClass = function handClass() {
-    var str = '';
+  const handClass = () => {
+    let str = '';
     if (className) str += className;
     if (!showArrow) str += ' collapse-panel-no-arrow';
     return str;
@@ -23,7 +23,9 @@ var CollapsePanelProps = function CollapsePanelProps(props) {
   }));
 };
 
-var isValidElement = React.isValidElement;
+const {
+  isValidElement
+} = React;
 function replaceElement(element, replacement, props) {
   if (!isValidElement(element)) return replacement;
   return /*#__PURE__*/React.cloneElement(element, typeof props === 'function' ? props(element.props || {}) : props);
@@ -40,9 +42,9 @@ function toArray(list) {
 }
 /** omit */
 function omit(obj, fields) {
-  var clone = Object.assign({}, obj);
+  const clone = Object.assign({}, obj);
   if (Array.isArray(fields)) {
-    fields.forEach(function (key) {
+    fields.forEach(key => {
       delete clone[key];
     });
   }
@@ -50,28 +52,24 @@ function omit(obj, fields) {
 }
 
 // ================== Collapse Motion ==================
-var getCollapsedHeight = function getCollapsedHeight() {
-  return {
-    height: 0,
-    opacity: 0
-  };
-};
-var getRealHeight = function getRealHeight(node) {
-  var scrollHeight = node.scrollHeight;
+const getCollapsedHeight = () => ({
+  height: 0,
+  opacity: 0
+});
+const getRealHeight = node => {
+  const {
+    scrollHeight
+  } = node;
   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 = {
+const getCurrentHeight = node => ({
+  height: node ? node.offsetHeight : 0
+});
+const skipOpacityTransition = (_, event) => (event === null || event === void 0 ? void 0 : event.deadline) === true || event.propertyName === 'height';
+const collapseMotion = {
   motionName: 'collapse-motion-collapse',
   onAppearStart: getCollapsedHeight,
   onEnterStart: getCollapsedHeight,
@@ -88,23 +86,26 @@ var collapseMotion = {
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-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 rgb(234, 236, 241);\n}\n.paraui-v4-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-v4-collapse > .component-collapse-item {\n  border-top: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-header {\n  display: flex;\n  align-items: center;\n  padding: 10px 20px;\n  color: rgb(29, 33, 38);\n  cursor: pointer;\n  font-weight: 700;\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-header > .collapse-svg-box {\n  line-height: 0;\n  margin-right: 8px;\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-header > .collapse-svg-box svg {\n  color: rgb(92, 101, 115);\n  font-size: 18px;\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-header > .collapse-svg-box svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-header > .collapse-svg-box .collapse-expand-svg {\n  transition: all 0.3s, visibility 0s;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-header > .component-collapse-extra {\n  line-height: 0;\n  margin-left: auto;\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-header > .component-collapse-extra svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-content.collapse-content-hidden {\n  display: none;\n}\n.paraui-v4-collapse > .component-collapse-item > .component-collapse-content > .component-collapse-content-box {\n  padding: 0 20px 10px;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n}\n.paraui-v4-collapse > .component-collapse-item.component-collapse-item-active > .component-collapse-header > .collapse-svg-box .collapse-expand-svg {\n  transform: rotate(90deg);\n}\n.paraui-v4-collapse.paraui-v4-collapse-svg-right > .component-collapse-item > .component-collapse-header {\n  padding-right: 40px;\n  position: relative;\n}\n.paraui-v4-collapse.paraui-v4-collapse-svg-right > .component-collapse-item > .component-collapse-header > .collapse-svg-box {\n  position: absolute;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  margin-right: 0;\n}\n.paraui-v4-collapse > .component-collapse-item-disabled > .component-collapse-header {\n  color: rgb(29, 33, 38);\n  cursor: not-allowed;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-collapse > .component-collapse-item-disabled > .component-collapse-header > .collapse-svg-box svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-collapse > .component-collapse-item-disabled > .component-collapse-header > .collapse-svg-box svg:hover {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-collapse > .component-collapse-item-disabled > .component-collapse-header > .collapse-svg-box .collapse-expand-svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-collapse > .component-collapse-item-disabled > .component-collapse-header > .component-collapse-extra svg {\n  color: rgb(29, 33, 38);\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;
+const Collapse = props => {
+  const {
+    className = '',
+    expandIconPosition = 'left'
+  } = props;
   /** 处理字内容 */
-  var getItems = function getItems() {
-    var children = props.children;
-    return toArray(children).map(function (child, index) {
+  const getItems = () => {
+    const {
+      children
+    } = props;
+    return toArray(children).map((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,
+        const key = child.key || String(index);
+        const {
+          disabled,
+          collapsible
+        } = child.props;
+        const childProps = Object.assign(Object.assign({}, omit(child.props, ['disabled'])), {
+          key,
           collapsible: collapsible !== null && collapsible !== void 0 ? collapsible : disabled ? 'disabled' : undefined
         });
         return cloneElement(child, childProps);
@@ -113,10 +114,12 @@ var Collapse = function Collapse(props) {
     });
   };
   /** 处理展开图标 */
-  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, {
+  const renderExpandIcon = function () {
+    let panelProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      expandIcon
+    } = props;
+    const icon = expandIcon ? expandIcon(panelProps) : jsx(Right, {
       className: "collapse-expand-svg"
     });
     return jsx("div", Object.assign({
@@ -126,14 +129,14 @@ var Collapse = function Collapse(props) {
     }));
   };
   /** 处理className */
-  var handClass = function handClass() {
-    var str = "".concat($prefixCls, "-collapse");
+  const handClass = () => {
+    let str = "".concat($prefixCls, "-collapse");
     if (className) str += " ".concat(className);
     if (expandIconPosition) str += " ".concat($prefixCls, "-collapse-svg-").concat(expandIconPosition);
     return str;
   };
   /** 处理过度动画 */
-  var openMotion = Object.assign(Object.assign({}, collapseMotion), {
+  const openMotion = Object.assign(Object.assign({}, collapseMotion), {
     motionAppear: false,
     leavedClassName: "collapse-content-hidden"
   });

package/CollapseBox/index.js

@@ -1,62 +1,58 @@
-import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.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-0d9802f7.js';
+import { g as getTransitionProps, a as getAutoHeightDuration } from '../_verture/util-82646c4f.js';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.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 linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-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-v4-collapse-box > .collapse-box-wrapper {\n  display: flex;\n  width: 100%;\n}\n.paraui-v4-collapse-box > .collapse-box-wrapper > .collapse-box-wrapper-inner {\n  width: 100%;\n}\n.paraui-v4-collapse-box.paraui-v4-collapse-box-entered {\n  overflow: visible;\n}\n.paraui-v4-collapse-box.paraui-v4-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;
+const CollapseBox = props => {
+  const {
+    className,
+    style,
+    in: open,
+    collapsedHeight: collapsedHeightProp = '0px',
+    timeout = 'auto',
+    unmountOnExit,
+    children
+  } = props;
   // timer
-  var timer = useRef(null);
+  const timer = useRef(null);
   // 动画节点
-  var nodeRef = useRef(null);
+  const nodeRef = useRef(null);
   // 内置容器
-  var wrapperRef = useRef(null);
+  const wrapperRef = useRef(null);
   // 存储动画时间变量
-  var autoTransitionDuration = useRef(null);
+  const 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 () {
+  const collapsedHeight = typeof collapsedHeightProp === 'number' ? "".concat(collapsedHeightProp, "px") : collapsedHeightProp;
+  const [inProp, setInProp] = useState(false);
+  useEffect(() => {
+    return () => {
       clearTimeout(timer.current);
     };
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     setInProp(open);
   }, [open]);
   // 下拉
-  var handleEnter = function handleEnter(node) {
+  const handleEnter = node => {
     node.style.height = collapsedHeight;
   };
-  var handleEntering = function handleEntering(node) {
-    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
-    var _getTransitionProps = getTransitionProps({
-        style: style,
-        timeout: timeout
-      }, {
-        mode: 'enter'
-      }),
-      transitionDuration = _getTransitionProps.duration;
+  const handleEntering = node => {
+    const wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
+    const {
+      duration: transitionDuration
+    } = getTransitionProps({
+      style,
+      timeout
+    }, {
+      mode: 'enter'
+    });
     if (timeout === 'auto') {
-      var duration2 = getAutoHeightDuration(wrapperHeight);
+      const duration2 = getAutoHeightDuration(wrapperHeight);
       node.style.transitionDuration = "".concat(duration2, "ms");
       autoTransitionDuration.current = duration2;
     } else {
@@ -64,25 +60,26 @@ var CollapseBox = function CollapseBox(props) {
     }
     node.style.height = "".concat(wrapperHeight, "px");
   };
-  var handleEntered = function handleEntered(node) {
+  const handleEntered = node => {
     node.style.height = 'auto';
   };
   // 收起
-  var handleExit = function handleExit(node) {
-    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
+  const handleExit = node => {
+    const wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
     node.style.height = "".concat(wrapperHeight, "px");
   };
-  var handleExiting = function handleExiting(node) {
-    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
-    var _getTransitionProps2 = getTransitionProps({
-        style: style,
-        timeout: timeout
-      }, {
-        mode: 'exit'
-      }),
-      transitionDuration = _getTransitionProps2.duration;
+  const handleExiting = node => {
+    const wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
+    const {
+      duration: transitionDuration
+    } = getTransitionProps({
+      style,
+      timeout
+    }, {
+      mode: 'exit'
+    });
     if (timeout === 'auto') {
-      var duration2 = getAutoHeightDuration(wrapperHeight);
+      const duration2 = getAutoHeightDuration(wrapperHeight);
       node.style.transitionDuration = "".concat(duration2, "ms");
       autoTransitionDuration.current = duration2;
     } else {
@@ -91,12 +88,12 @@ var CollapseBox = function CollapseBox(props) {
     node.style.height = collapsedHeight;
   };
   // 完成下拉/收起回调
-  var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
+  const addEndListener = (nodeOrNext, maybeNext) => {
     timer.current = setTimeout(maybeNext, autoTransitionDuration.current || 0);
   };
   // 处理className
-  var handClass = function handClass(state) {
-    var str = "".concat($prefixCls, "-collapse-box");
+  const handClass = state => {
+    let str = "".concat($prefixCls, "-collapse-box");
     if (className) str += " ".concat(className);
     if (state === 'entered') str += " ".concat($prefixCls, "-collapse-box-entered");
     if (state === 'exited' && !inProp && collapsedHeight === '0px') str += " ".concat($prefixCls, "-collapse-box-hidden");
@@ -114,26 +111,24 @@ var CollapseBox = function CollapseBox(props) {
     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: (state, childProps) => 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',
-          ref: wrapperRef
+          className: 'collapse-box-wrapper-inner'
         }, {
-          children: jsx("div", Object.assign({
-            className: 'collapse-box-wrapper-inner'
-          }, {
-            children: _children
-          }))
+          children: children
         }))
-      }));
-    }
+      }))
+    }))
   }));
 };