shineout 3.9.0 → 3.9.1-beta.2

package/cjs/index.js

@@ -522,5 +522,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.9.0'
+  version: '3.9.1-beta.2'
 };

package/dist/shineout.js

@@ -12400,7 +12400,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.9.0');
+/* harmony default export */ var version = ('3.9.1-beta.2');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -60463,6 +60463,108 @@ var useMenuItem = function useMenuItem(props) {
   };
 };
 /* harmony default export */ var use_menu_item = (useMenuItem);
+;// CONCATENATED MODULE: ../hooks/src/common/use-collapse-animation/use-collapse-animation.ts
+
+/**
+ * 为元素添加折叠/展开动画的 Hook
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * useCollapseAnimation(ref, { isOpen: true });
+ *
+ * return <div ref={ref}>Content</div>;
+ * ```
+ */
+function useCollapseAnimation(elementRef, options) {
+  var isOpen = options.isOpen,
+    _options$duration = options.duration,
+    duration = _options$duration === void 0 ? 240 : _options$duration,
+    _options$disabled = options.disabled,
+    disabled = _options$disabled === void 0 ? false : _options$disabled,
+    _options$timingFuncti = options.timingFunction,
+    timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti;
+  var isFirstRenderRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(true);
+
+  // 当 disabled 状态变化时，重置首次渲染标记
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (disabled) {
+      isFirstRenderRef.current = true;
+    }
+  }, [disabled]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (!elementRef.current) return;
+    var el = elementRef.current;
+
+    // 如果禁用动画，清除所有样式并返回
+    if (disabled) {
+      el.style.height = '';
+      el.style.overflow = '';
+      el.style.transition = '';
+      el.style.display = '';
+      return;
+    }
+    var timer = null;
+
+    // 设置 display: block，让元素始终可见，由高度控制折叠
+    el.style.display = 'block';
+
+    // 首次渲染时，直接设置初始状态，不做动画
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      if (!isOpen) {
+        el.style.height = '0px';
+        el.style.overflow = 'hidden';
+      }
+      return;
+    }
+    if (isOpen) {
+      // 展开动画
+      el.style.height = '0px';
+      el.style.overflow = 'hidden';
+
+      // 强制重绘
+      void el.offsetHeight;
+
+      // 获取实际高度
+      var scrollHeight = el.scrollHeight;
+
+      // 启动动画
+      requestAnimationFrame(function () {
+        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
+        el.style.height = "".concat(scrollHeight, "px");
+
+        // 动画结束后恢复 auto
+        timer = setTimeout(function () {
+          if (el && isOpen) {
+            el.style.height = '';
+            el.style.overflow = '';
+            el.style.transition = '';
+          }
+        }, duration);
+      });
+    } else {
+      // 收起动画
+      var _scrollHeight = el.scrollHeight;
+      el.style.height = "".concat(_scrollHeight, "px");
+      el.style.overflow = 'hidden';
+
+      // 强制重绘
+      void el.offsetHeight;
+      requestAnimationFrame(function () {
+        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
+        el.style.height = '0px';
+      });
+    }
+
+    // 清理函数：组件卸载或依赖变化时清除定时器
+    return function () {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [isOpen, disabled, duration, timingFunction]);
+}
 ;// CONCATENATED MODULE: ../base/src/menu/item.tsx
 
 
@@ -60496,7 +60598,8 @@ var MenuItem = function MenuItem(props) {
     _useState2 = slicedToArray_default()(_useState, 2),
     popOpen = _useState2[0],
     setOpen = _useState2[1];
-  var liRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef(null);
+  var liRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var childrenRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var hasExpandAbleChildren = children.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
@@ -60532,6 +60635,12 @@ var MenuItem = function MenuItem(props) {
     handleItemClick = _useMenuItem.handleItemClick,
     handleMouseEnter = _useMenuItem.handleMouseEnter,
     handleMouseLeave = _useMenuItem.handleMouseLeave;
+
+  // 为 inline 模式添加折叠动画（仅当 inlineAnimate 为 true 时启用）
+  useCollapseAnimation(childrenRef, {
+    isOpen: isOpen,
+    disabled: !props.inlineAnimate || shoudPop || !children.length
+  });
   var renderChildren = function renderChildren() {
     var _items;
     var items = children;
@@ -60546,6 +60655,7 @@ var MenuItem = function MenuItem(props) {
     }
     var content = function content(close) {
       return /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
+        ref: !shoudPop && props.inlineAnimate ? childrenRef : undefined,
         className: classnames_default()(shoudPop && (classes === null || classes === void 0 ? void 0 : classes.childrenShow), classes === null || classes === void 0 ? void 0 : classes.children, isUp && (classes === null || classes === void 0 ? void 0 : classes.childrenUp), hasExpandAbleChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand))
         // 子菜单点击弹出
         ,
@@ -60604,6 +60714,8 @@ var MenuItem = function MenuItem(props) {
         }
       });
     }
+
+    // inline 模式
     return content();
   };
   var renderItem = function renderItem() {
@@ -60816,6 +60928,7 @@ var Menu = function Menu(props) {
             frontCaretType: props.frontCaretType,
             caretColor: props.caretColor,
             inlineIndent: props.inlineIndent,
+            inlineAnimate: props.inlineAnimate,
             scrollRef: scrollRef,
             theme: theme,
             renderIcon: props.renderIcon,
@@ -63936,7 +64049,8 @@ var scroll_table_Scroll = function Scroll(props) {
   var wrapperRef = useForkRef(scrollRef, props.wrapperRef);
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       isMouseDown: false,
-      lastTableHeight: 0
+      lastTableHeight: 0,
+      prevTableHeight: 0
     }),
     context = _useRef.current;
   var _props$scrollHeight = props.scrollHeight,
@@ -64048,16 +64162,16 @@ var scroll_table_Scroll = function Scroll(props) {
     if (!props.tableRef.current) return;
     var isVisible = props.tableRef.current.offsetParent !== null;
     var wasHidden = props.tableRef.current.getAttribute('data-was-hidden') === 'true';
-    var h = context.lastTableHeight || props.tableRef.current.clientHeight;
+    var h = context.prevTableHeight || props.tableRef.current.clientHeight;
     if (h > 0) {
-      context.lastTableHeight = h;
+      context.prevTableHeight = h;
     }
     if (isVisible && wasHidden) {
       props.tableRef.current.style.height = '100%';
       props.tableRef.current.removeAttribute('data-was-hidden');
-    } else if (!isVisible && props.tableRef.current.style.height === '100%') {
+    } else if (!isVisible && props.tableRef.current.style.height === '100%' && context.prevTableHeight > 0) {
       // 加height === '100%'判断是因为：多层父级flex嵌套才有这个问题
-      props.tableRef.current.style.height = "".concat(context.lastTableHeight, "px");
+      props.tableRef.current.style.height = "".concat(context.prevTableHeight, "px");
       props.tableRef.current.setAttribute('data-was-hidden', 'true');
     }
   }, [paddingTop]);
@@ -74296,7 +74410,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.9.0'
+  version: '3.9.1-beta.2'
 });
 }();
 /******/ 	return __webpack_exports__;