@rainbow-oh/yee-c 0.14.3 → 0.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Splitter/demo/animation.tsx

@@ -0,0 +1,29 @@
+import { Button, Splitter } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div>
+      <div style={{ marginBottom: 8 }}>
+        <Button type="primary" onClick={() => setOpen((v) => !v)}>
+          {open ? 'Close Panel' : 'Open Panel'}
+        </Button>
+      </div>
+      <div style={{ height: 300 }}>
+        <Splitter animation>
+          <Splitter.Item min="30%">
+            <div style={{ padding: 16, backgroundColor: '#f0f0f0' }}>Content Panel</div>
+          </Splitter.Item>
+          {open ? (
+            // 条件渲染的面板：挂载时从 0 展开到目标尺寸，卸载时过渡收合到 0 后移除
+            <Splitter.Item size="40%" min="200px" max="60%">
+              <div style={{ padding: 16, backgroundColor: '#e0e0e0' }}>Assistant Panel</div>
+            </Splitter.Item>
+          ) : null}
+        </Splitter>
+      </div>
+    </div>
+  );
+};

package/src/Splitter/hooks/useMove.ts

@@ -5,6 +5,7 @@ export default function useMove(
   handler: React.RefObject<HTMLDivElement | null>,
   direction: 'horizontal' | 'vertical',
   onMove: (dis: number) => void,
+  onMovingChange?: (moving: boolean) => void,
 ) {
   const [moving, setMoving] = React.useState(false);
 
@@ -20,6 +21,7 @@ export default function useMove(
       let x = e.pageX;
       let y = e.pageY;
       setMoving(true);
+      onMovingChange?.(true);
 
       const onMouseMove = debounce((e: MouseEvent) => {
         document.body.style.userSelect = 'none';
@@ -38,6 +40,7 @@ export default function useMove(
 
       const onMouseUp = () => {
         setMoving(false);
+        onMovingChange?.(false);
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
         ele.removeEventListener('mouseup', onMouseUp);

package/src/Splitter/index.en-US.md

@@ -21,6 +21,7 @@ Split panels for layout.
 <code src="./demo/size.tsx" title="Size Control" description="Control panel size"></code>
 <code src="./demo/nested.tsx" title="Nested" description="Nested splitters"></code>
 <code src="./demo/bordered.tsx" title="Bordered" description="Splitter with borders"></code>
+<code src="./demo/animation.tsx" title="Animation" description="With animation enabled, conditionally rendered panels mount/unmount and programmatic size changes transition smoothly; dragging stays real-time"></code>
 
 ## API
 
@@ -36,6 +37,7 @@ Split panels for layout.
 | bordered | `boolean` | Display border or not | - |
 | itemPadding | `number \| string` | Item padding | - |
 | onResize | `(sizes: number[]) => void` | Panel size change event | - |
+| animation | `boolean` | Animate programmatic size changes, collapsible expand/collapse and panel mount/unmount with a flex-basis transition; dragging always tracks the pointer in real time | `false` |
 | data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
 
 ### SplitterItemProps

package/src/Splitter/index.zh-CN.md

@@ -21,6 +21,7 @@ toc: 'content'
 <code src="./demo/size.tsx" title="尺寸控制" description="控制面板尺寸"></code>
 <code src="./demo/nested.tsx" title="嵌套" description="嵌套分割面板"></code>
 <code src="./demo/bordered.tsx" title="边框" description="带边框的分割面板"></code>
+<code src="./demo/animation.tsx" title="过渡动画" description="开启 animation 后，条件渲染面板的挂载/卸载与受控尺寸变更有平滑过渡动画；拖拽缩放始终实时跟手"></code>
 
 ## API
 
@@ -36,6 +37,7 @@ toc: 'content'
 | bordered | `boolean` | 是否显示边框 | - |
 | itemPadding | `number \| string` | 项目内边距 | - |
 | onResize | `(sizes: number[]) => void` | 面板尺寸变化事件 | - |
+| animation | `boolean` | 受控尺寸变更、collapsible 收展及面板挂载/卸载时的 flex-basis 过渡动画；拖拽缩放始终实时跟手，不受影响 | `false` |
 | data-* | `string` | - | 支持所有 data-* 属性，透传到组件根 DOM 元素 |
 
 ### SplitterItemProps

package/src/Splitter/interface.ts

@@ -82,4 +82,10 @@ export interface SplitterProps extends DataAttributeProps {
    * panel size change event
    * */
   onResize?: (sizes: PanelRect[]) => void;
+  /**
+   * animate programmatic size changes and panel mount/unmount with a
+   * flex-basis transition; dragging always tracks the pointer in real time
+   * @default false
+   */
+  animation?: boolean;
 }

package/src/Splitter/splitter-handler.tsx

@@ -18,6 +18,8 @@ interface SplitterHandlerProps {
     size: { startSize: number; endSize: number },
     eles: { start: HTMLDivElement; end: HTMLDivElement },
   ) => void;
+  /** 拖拽开始/结束回调（animation 模式下拖拽期间需关闭 flex-basis 过渡） */
+  onDraggingChange?: (dragging: boolean) => void;
 }
 
 const SplitterHandler = ({
@@ -28,6 +30,7 @@ const SplitterHandler = ({
   records,
   setRecords,
   onClick,
+  onDraggingChange,
 }: SplitterHandlerProps) => {
   // eslint-disable-line @typescript-eslint/no-unused-vars
   const { start, end } = collapsible
@@ -91,7 +94,7 @@ const SplitterHandler = ({
     });
   };
 
-  useMove(handler, layout, onMove);
+  useMove(handler, layout, onMove, onDraggingChange);
 
   const handleClick = (action: 'collapse' | 'expand') => {
     const eles = refs.current;

package/src/Splitter/splitter.tsx

@@ -139,7 +139,15 @@ const getPanelSize = (
   return panelsRect;
 };
 
-const Wrapper = ({ children, itemsSize, onClick, ...props }: any) => {
+const Wrapper = ({
+  children,
+  itemsSize,
+  itemTransition,
+  animation,
+  onDraggingChange,
+  onClick,
+  ...props
+}: any) => {
   const wrappered = [] as React.ReactElement[];
   const refs = useRef<
     Record<
@@ -171,6 +179,8 @@ const Wrapper = ({ children, itemsSize, onClick, ...props }: any) => {
           style: {
             ...style, // If there is a border or other size-related design, it may cause calculation issues
             flexBasis: currentSize,
+            // animation 模式下受控尺寸变更走 flex-basis 过渡；拖拽期间为 undefined 保证跟手
+            transition: itemTransition,
           },
           min,
           max,
@@ -212,15 +222,55 @@ const Wrapper = ({ children, itemsSize, onClick, ...props }: any) => {
           flexable={flexable}
           expandable={_expandable}
           onClick={onClick}
+          onDraggingChange={onDraggingChange}
           key={`handler-${n}`}
         />,
       );
     }
   });
 
+  // ── 出场动画：children 数量减少（条件渲染的面板卸载）时，保留上一次渲染的
+  // 尾部面板克隆，flex-basis 过渡到 0 后再真正移除，避免右栏瞬间消失导致跳变。
+  const prevCountRef = React.useRef(arr.length);
+  const prevClonesRef = React.useRef<React.ReactElement[]>([]);
+  const [exiting, setExiting] = React.useState<React.ReactElement<any>[]>([]);
+
+  React.useEffect(() => {
+    const prevCount = prevCountRef.current;
+    prevCountRef.current = arr.length;
+    if (!animation || arr.length >= prevCount) {
+      return;
+    }
+    // 上一帧克隆里已带原 flex-basis（本帧 records 已不含被移除面板）
+    const removed = prevClonesRef.current.slice(arr.length);
+    if (!removed.length) {
+      return;
+    }
+    setExiting(removed);
+    // 第二阶段：下一帧 flex-basis 归 0，触发过渡
+    const raf = requestAnimationFrame(() => {
+      setExiting((list) =>
+        list.map((el) => React.cloneElement(el, { style: { ...el.props.style, flexBasis: 0 } })),
+      );
+    });
+    const timer = window.setTimeout(() => setExiting([]), 320);
+    return () => {
+      // 过渡期间面板重新打开：立即丢弃残留克隆
+      cancelAnimationFrame(raf);
+      window.clearTimeout(timer);
+      setExiting([]);
+    };
+  }, [arr.length, animation]);
+
+  // 记录本帧克隆，供下一次渲染的移除检测读取（声明在其后：上方 effect 读到的是旧值）
+  React.useEffect(() => {
+    prevClonesRef.current = wrappered;
+  });
+
   return (
     <SplitterWrapperCtx.Provider value={{ refs }}>
       {wrappered}
+      {exiting}
     </SplitterWrapperCtx.Provider>
   );
 };
@@ -236,6 +286,7 @@ const Splitter = React.forwardRef(
       children,
       bordered,
       onResize,
+      animation,
       ...rest
     } = props;
 
@@ -245,6 +296,15 @@ const Splitter = React.forwardRef(
 
     const [records, setRecords] = useState<PanelRect[]>([]);
 
+    // animation 模式：拖拽期间关掉面板的 flex-basis 过渡（onMove 直接写 DOM，过渡会导致跟不
+    // 上鼠标）；其余程序性尺寸变更（受控 size、collapsible 收展、面板增减）都走过渡。
+    const [dragging, setDragging] = React.useState(false);
+    const itemTransition = animation
+      ? dragging
+        ? undefined
+        : 'flex-basis 0.28s cubic-bezier(0.22, 0.61, 0.36, 1)'
+      : undefined;
+
     const handleClick = (index: number, action: 'expand' | 'collapse') => {
       const c = index - 1;
 
@@ -303,15 +363,31 @@ const Splitter = React.forwardRef(
       }
     }, [layout]);
 
+    const prevPanelCountRef = React.useRef(-1);
+
     React.useEffect(() => {
       if (totalSize) {
         const panelsSize = getPanelSize(children, {
           totalSize: totalSize,
           layout,
         });
+        // animation 模式下面板新增（条件渲染的面板挂载）时先以 0 尺寸入库，下一帧再落到
+        // 目标尺寸，配合 flex-basis 过渡播放入场动画；否则新面板瞬间撑开、旧面板瞬间收窄。
+        const prevCount = prevPanelCountRef.current;
+        prevPanelCountRef.current = panelsSize.length;
+        if (animation && prevCount >= 0 && panelsSize.length > prevCount) {
+          panelsSize.slice(prevCount).forEach((item) => {
+            item.currentSize = 0;
+          });
+          setRecords(panelsSize);
+          const raf = requestAnimationFrame(() => {
+            setRecords(getPanelSize(children, { totalSize: totalSize, layout }));
+          });
+          return () => cancelAnimationFrame(raf);
+        }
         setRecords(panelsSize);
       }
-    }, [children, totalSize, layout]);
+    }, [children, totalSize, layout, animation]);
 
     return (
       <div className={cls} {...rest} ref={componentRef}>
@@ -323,6 +399,9 @@ const Splitter = React.forwardRef(
             totalSize={totalSize}
             itemsSize={records}
             onClick={handleClick}
+            animation={animation}
+            itemTransition={itemTransition}
+            onDraggingChange={setDragging}
           >
             {children}
           </Wrapper>

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.14.3";
+export const version = "0.14.4";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;