@rainbow-oh/yee-c 0.14.2 → 0.14.4

package/dist/esm/Splitter/splitter.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "itemsSize", "onClick"],
-  _excluded2 = ["prefixCls", "className", "layout", "children", "bordered", "onResize"];
+var _excluded = ["children", "itemsSize", "itemTransition", "animation", "onDraggingChange", "onClick"],
+  _excluded2 = ["prefixCls", "className", "layout", "children", "bordered", "onResize", "animation"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -35,10 +35,13 @@ var getPanelSize = function getPanelSize(children, _ref) {
   var totalSize = _ref.totalSize,
     layout = _ref.layout;
   var panelsRect = [];
-  var count = React.Children.count(children);
+  // toArray 剔除 null/undefined/boolean（如 `{open ? <Item/> : null}` 条件面板）。
+  // Children.count 会把 null 也计为一面板，导致 auto 面板被平分出错误尺寸。
+  var items = React.Children.toArray(children);
+  var count = items.length;
   var remainingSize = totalSize;
   var remainingItem = count;
-  React.Children.forEach(children, function (child) {
+  items.forEach(function (child) {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       var _ref2 = child.props || {},
         style = _ref2.style,
@@ -100,6 +103,8 @@ var getPanelSize = function getPanelSize(children, _ref) {
   });
   panelsRect.forEach(function (item) {
     if (item.type === 'default') {
+      // currentSize 缺失会导致 Wrapper 注入的 flexBasis 为空，defaultSize 失效（宽度由内容撑开）
+      item.currentSize = item.size;
       remainingSize -= item.size || 0;
       remainingItem--;
     } else if (item.type === 'percent') {
@@ -112,7 +117,8 @@ var getPanelSize = function getPanelSize(children, _ref) {
   if (remainingItem > 0) {
     panelsRect.forEach(function (item) {
       if (item.type === 'auto') {
-        item.size = remainingSize / remainingItem;
+        // 显式尺寸总和超出 totalSize 时 remainingSize 为负，负 flexBasis 会被浏览器丢弃导致面板回退内容尺寸
+        item.size = Math.max(0, remainingSize / remainingItem);
         item.currentSize = item.size;
       }
     });
@@ -122,12 +128,16 @@ var getPanelSize = function getPanelSize(children, _ref) {
 var Wrapper = function Wrapper(_ref3) {
   var children = _ref3.children,
     itemsSize = _ref3.itemsSize,
+    itemTransition = _ref3.itemTransition,
+    animation = _ref3.animation,
+    onDraggingChange = _ref3.onDraggingChange,
     onClick = _ref3.onClick,
     props = _objectWithoutProperties(_ref3, _excluded);
   var wrappered = [];
   var refs = useRef({});
+  // 与 getPanelSize 同口径：toArray 剔除 null，index/handler 判断不受条件渲染干扰
   var arr = React.Children.toArray(children);
-  React.Children.forEach(children, function (child, index) {
+  arr.forEach(function (child, index) {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       var n = index + 1;
       var _ref4 = child.props || {},
@@ -145,7 +155,9 @@ var Wrapper = function Wrapper(_ref3) {
         // @ts-ignore
         style: _objectSpread(_objectSpread({}, style), {}, {
           // If there is a border or other size-related design, it may cause calculation issues
-          flexBasis: currentSize
+          flexBasis: currentSize,
+          // animation 模式下受控尺寸变更走 flex-basis 过渡；拖拽期间为 undefined 保证跟手
+          transition: itemTransition
         }),
         min: min,
         max: max,
@@ -186,15 +198,64 @@ var Wrapper = function Wrapper(_ref3) {
         flexable: flexable,
         expandable: _expandable,
         onClick: onClick,
+        onDraggingChange: onDraggingChange,
         key: "handler-".concat(n)
       })));
     }
   });
+
+  // ── 出场动画：children 数量减少（条件渲染的面板卸载）时，保留上一次渲染的
+  // 尾部面板克隆，flex-basis 过渡到 0 后再真正移除，避免右栏瞬间消失导致跳变。
+  var prevCountRef = React.useRef(arr.length);
+  var prevClonesRef = React.useRef([]);
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    exiting = _React$useState2[0],
+    setExiting = _React$useState2[1];
+  React.useEffect(function () {
+    var prevCount = prevCountRef.current;
+    prevCountRef.current = arr.length;
+    if (!animation || arr.length >= prevCount) {
+      return;
+    }
+    // 上一帧克隆里已带原 flex-basis（本帧 records 已不含被移除面板）
+    var removed = prevClonesRef.current.slice(arr.length);
+    if (!removed.length) {
+      return;
+    }
+    setExiting(removed);
+    // 第二阶段：下一帧 flex-basis 归 0，触发过渡
+    var raf = requestAnimationFrame(function () {
+      setExiting(function (list) {
+        return list.map(function (el) {
+          return /*#__PURE__*/React.cloneElement(el, {
+            style: _objectSpread(_objectSpread({}, el.props.style), {}, {
+              flexBasis: 0
+            })
+          });
+        });
+      });
+    });
+    var timer = window.setTimeout(function () {
+      return setExiting([]);
+    }, 320);
+    return function () {
+      // 过渡期间面板重新打开：立即丢弃残留克隆
+      cancelAnimationFrame(raf);
+      window.clearTimeout(timer);
+      setExiting([]);
+    };
+  }, [arr.length, animation]);
+
+  // 记录本帧克隆，供下一次渲染的移除检测读取（声明在其后：上方 effect 读到的是旧值）
+  React.useEffect(function () {
+    prevClonesRef.current = wrappered;
+  });
   return /*#__PURE__*/React.createElement(SplitterWrapperCtx.Provider, {
     value: {
       refs: refs
     }
-  }, wrappered);
+  }, wrappered, exiting);
 };
 var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   var _useContext = useContext(GlobalContext),
@@ -208,6 +269,7 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     children = props.children,
     bordered = props.bordered,
     onResize = props.onResize,
+    animation = props.animation,
     rest = _objectWithoutProperties(props, _excluded2);
   var internalRef = useRef(null);
   var componentRef = ref || internalRef;
@@ -215,6 +277,14 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     records = _useState2[0],
     setRecords = _useState2[1];
+
+  // animation 模式：拖拽期间关掉面板的 flex-basis 过渡（onMove 直接写 DOM，过渡会导致跟不
+  // 上鼠标）；其余程序性尺寸变更（受控 size、collapsible 收展、面板增减）都走过渡。
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dragging = _React$useState4[0],
+    setDragging = _React$useState4[1];
+  var itemTransition = animation ? dragging ? undefined : 'flex-basis 0.28s cubic-bezier(0.22, 0.61, 0.36, 1)' : undefined;
   var handleClick = function handleClick(index, action) {
     var c = index - 1;
     var newRecords = _toConsumableArray(records);
@@ -232,10 +302,10 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     setRecords(newRecords);
   };
   var cls = clsx(prefixCls, ["".concat(prefixCls, "-").concat(layout)], _defineProperty({}, "".concat(prefixCls, "-bordered"), bordered), className);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    totalSize = _React$useState2[0],
-    setTotalSize = _React$useState2[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    totalSize = _React$useState6[0],
+    setTotalSize = _React$useState6[1];
   var updateTotalSize = function updateTotalSize(ele) {
     if (layout === 'horizontal') {
       setTotalSize(ele.offsetWidth);
@@ -260,15 +330,35 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       };
     }
   }, [layout]);
+  var prevPanelCountRef = React.useRef(-1);
   React.useEffect(function () {
     if (totalSize) {
       var panelsSize = getPanelSize(children, {
         totalSize: totalSize,
         layout: layout
       });
+      // animation 模式下面板新增（条件渲染的面板挂载）时先以 0 尺寸入库，下一帧再落到
+      // 目标尺寸，配合 flex-basis 过渡播放入场动画；否则新面板瞬间撑开、旧面板瞬间收窄。
+      var prevCount = prevPanelCountRef.current;
+      prevPanelCountRef.current = panelsSize.length;
+      if (animation && prevCount >= 0 && panelsSize.length > prevCount) {
+        panelsSize.slice(prevCount).forEach(function (item) {
+          item.currentSize = 0;
+        });
+        setRecords(panelsSize);
+        var raf = requestAnimationFrame(function () {
+          setRecords(getPanelSize(children, {
+            totalSize: totalSize,
+            layout: layout
+          }));
+        });
+        return function () {
+          return cancelAnimationFrame(raf);
+        };
+      }
       setRecords(panelsSize);
     }
-  }, [children, totalSize, layout]);
+  }, [children, totalSize, layout, animation]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cls
   }, rest, {
@@ -284,7 +374,10 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     setRecords: setRecords,
     totalSize: totalSize,
     itemsSize: records,
-    onClick: handleClick
+    onClick: handleClick,
+    animation: animation,
+    itemTransition: itemTransition,
+    onDraggingChange: setDragging
   }, children)));
 });
 Splitter.displayName = 'Splitter';

package/dist/esm/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-20T02:38:16.830Z
+ * Generated on 2026-09-23T09:41:24.738Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/esm/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-20T02:38:16.830Z
+ * Generated on 2026-09-23T09:41:24.738Z
  */
 
 /* ========== color.css ========== */

package/dist/esm/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.14.2";
+export declare const version = "0.14.4";

package/dist/esm/version.js

@@ -1,4 +1,4 @@
-export var version = "0.14.2";
+export var version = "0.14.4";
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;
 }