react-panel-layout 0.5.2 → 0.6.0

package/src/modules/pivot/PivotContent.spec.tsx

@@ -0,0 +1,179 @@
+/**
+ * @file Tests for PivotContent component - animation behavior.
+ *
+ * TDD: Pivotのアニメーションが動作しない問題を再現するテスト
+ *
+ * 要件:
+ * 1. アクティブなパネルのみ表示、非アクティブは display: none
+ * 2. leaveアニメーション中は display: block を維持（アニメーション完了後に none）
+ * 3. 非アクティブパネルはポインターイベントを受け付けない
+ */
+import { render, screen, fireEvent } from "@testing-library/react";
+import * as React from "react";
+import { PivotContent } from "./PivotContent.js";
+import { PIVOT_ANIMATION_ENTER, PIVOT_ANIMATION_LEAVE } from "../../constants/styles.js";
+
+describe("PivotContent", () => {
+  describe("display control", () => {
+    it("shows active content (display: block)", () => {
+      render(
+        <PivotContent id="test" isActive={true} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.display).toBe("block");
+    });
+
+    it("hides inactive content when initially inactive (display: none)", () => {
+      render(
+        <PivotContent id="test" isActive={false} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.display).toBe("none");
+    });
+
+    it("keeps content displayed during leave animation", () => {
+      const { rerender } = render(
+        <PivotContent id="test" isActive={true} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.display).toBe("block");
+
+      // 非アクティブに変更（leaveアニメーション開始）
+      rerender(
+        <PivotContent id="test" isActive={false} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      // leaveアニメーション中は display: block を維持
+      expect(wrapper?.style?.display).toBe("block");
+    });
+
+    it("hides content after leave animation ends", () => {
+      const { rerender } = render(
+        <PivotContent id="test" isActive={true} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement!;
+
+      // 非アクティブに変更
+      rerender(
+        <PivotContent id="test" isActive={false} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      // アニメーション完了をシミュレート
+      fireEvent.animationEnd(wrapper);
+
+      // アニメーション完了後は display: none
+      expect(wrapper.style.display).toBe("none");
+    });
+  });
+
+  describe("animation when transitionMode=css", () => {
+    it("applies enter animation when active", () => {
+      render(
+        <PivotContent id="test" isActive={true} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.animation).toBe(PIVOT_ANIMATION_ENTER);
+    });
+
+    it("applies leave animation when becoming inactive", () => {
+      const { rerender } = render(
+        <PivotContent id="test" isActive={true} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      rerender(
+        <PivotContent id="test" isActive={false} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.animation).toBe(PIVOT_ANIMATION_LEAVE);
+    });
+  });
+
+  describe("no animation when transitionMode=none", () => {
+    it("does not apply animation property", () => {
+      render(
+        <PivotContent id="test" isActive={true} transitionMode="none">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.animation).toBeFalsy();
+    });
+
+    it("hides inactive content immediately (no animation)", () => {
+      render(
+        <PivotContent id="test" isActive={false} transitionMode="none">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.display).toBe("none");
+    });
+  });
+
+  describe("pointer events", () => {
+    it("enables pointer events for active content", () => {
+      render(
+        <PivotContent id="test" isActive={true} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.pointerEvents).toBe("auto");
+    });
+
+    it("disables pointer events for inactive content", () => {
+      render(
+        <PivotContent id="test" isActive={false} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.pointerEvents).toBe("none");
+    });
+
+    it("disables pointer events during leave animation", () => {
+      const { rerender } = render(
+        <PivotContent id="test" isActive={true} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      rerender(
+        <PivotContent id="test" isActive={false} transitionMode="css">
+          <div data-testid="content">Content</div>
+        </PivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("content").parentElement;
+      expect(wrapper?.style?.pointerEvents).toBe("none");
+    });
+  });
+});

package/src/modules/pivot/PivotContent.tsx

@@ -0,0 +1,77 @@
+/**
+ * @file PivotContent component for rendering pivot items with CSS animations.
+ *
+ * Override via CSS custom properties:
+ * - --rpl-pivot-animation-enter: Animation when becoming active
+ * - --rpl-pivot-animation-leave: Animation when becoming inactive
+ *
+ * User defines @keyframes in their CSS and references via these tokens.
+ * Example:
+ *   @keyframes pivotEnter {
+ *     from { opacity: 0; }
+ *     to { opacity: 1; }
+ *   }
+ *   :root { --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards; }
+ */
+import * as React from "react";
+import { PIVOT_ANIMATION_ENTER, PIVOT_ANIMATION_LEAVE } from "../../constants/styles";
+import { useAnimatedVisibility } from "../../hooks/useAnimatedVisibility";
+
+export type PivotContentProps = {
+  id: string;
+  isActive: boolean;
+  transitionMode: "css" | "none";
+  children: React.ReactNode;
+};
+
+const baseStyle: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+};
+
+/**
+ * Renders pivot content with CSS animation support.
+ *
+ * When transitionMode="css": Applies enter/leave animations with display:none when hidden.
+ * When transitionMode="none": Uses React.Activity for memory optimization.
+ */
+export const PivotContent: React.FC<PivotContentProps> = React.memo(({ id, isActive, transitionMode, children }) => {
+  const visibility = useAnimatedVisibility({
+    isVisible: isActive,
+    leaveAnimation: transitionMode === "css" ? PIVOT_ANIMATION_LEAVE : undefined,
+    skipAnimation: transitionMode !== "css",
+  });
+
+  const style = React.useMemo<React.CSSProperties>(() => {
+    const s: React.CSSProperties = {
+      ...baseStyle,
+      ...visibility.style,
+      pointerEvents: isActive ? "auto" : "none",
+    };
+
+    if (transitionMode === "css") {
+      s.animation = isActive ? PIVOT_ANIMATION_ENTER : PIVOT_ANIMATION_LEAVE;
+    }
+
+    return s;
+  }, [isActive, transitionMode, visibility.style]);
+
+  const content = (
+    <div
+      data-pivot-content={id}
+      data-active={isActive ? "true" : "false"}
+      style={style}
+      {...visibility.props}
+    >
+      {children}
+    </div>
+  );
+
+  if (transitionMode === "none") {
+    return <React.Activity mode={isActive ? "visible" : "hidden"}>{content}</React.Activity>;
+  }
+
+  return content;
+});

package/src/modules/pivot/SwipePivotContent.debug.tmp.tsx

@@ -0,0 +1,237 @@
+/**
+ * @file Debug version of SwipePivotContent to investigate iOS swipe issue
+ *
+ * Issue: On iOS, when swiping pages, the next page sticks to the current position.
+ *
+ * Hypotheses to test:
+ * 1. currentPxRef initialization issue when position/containerSize changes
+ * 2. isAnimating timing issue (setIsAnimating is async)
+ * 3. useLayoutEffect execution order issue
+ * 4. pointercancel handling on iOS
+ */
+import * as React from "react";
+import { useAnimationFrame, interpolate, easings } from "../../hooks/useAnimationFrame.js";
+import type { SwipeInputState, GestureAxis } from "../../hooks/gesture/types.js";
+
+const DEFAULT_ANIMATION_DURATION = 300;
+
+export type SwipePivotContentProps = {
+  id: string;
+  isActive: boolean;
+  position: -1 | 0 | 1;
+  inputState: SwipeInputState;
+  axis?: GestureAxis;
+  containerSize: number;
+  children: React.ReactNode;
+  canNavigate?: boolean;
+  animationDuration?: number;
+};
+
+const baseStyle: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+};
+
+const getDisplacement = (inputState: SwipeInputState, axis: GestureAxis): number => {
+  if (inputState.phase === "idle") {
+    return 0;
+  }
+  return axis === "horizontal" ? inputState.displacement.x : inputState.displacement.y;
+};
+
+const shouldBeVisible = (
+  isActive: boolean,
+  position: -1 | 0 | 1,
+  inputState: SwipeInputState,
+  canNavigate: boolean,
+  isAnimating: boolean,
+): boolean => {
+  if (isActive) {
+    return true;
+  }
+  if (isAnimating) {
+    return true;
+  }
+  if (!canNavigate) {
+    return false;
+  }
+  if (inputState.phase === "idle") {
+    return false;
+  }
+  // Show adjacent content based on swipe direction
+  if (position === -1 && inputState.direction === 1) {
+    return true;
+  }
+  if (position === 1 && inputState.direction === -1) {
+    return true;
+  }
+  return false;
+};
+
+// Debug logging
+const DEBUG = true;
+const log = (id: string, ...args: unknown[]) => {
+  if (DEBUG) {
+    console.log(`[SwipePivotContent:${id}]`, ...args);
+  }
+};
+
+export const SwipePivotContentDebug: React.FC<SwipePivotContentProps> = React.memo(({
+  id,
+  isActive,
+  position,
+  inputState,
+  axis = "horizontal",
+  containerSize,
+  children,
+  canNavigate = true,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+}) => {
+  const elementRef = React.useRef<HTMLDivElement>(null);
+
+  // BUG HYPOTHESIS 1: currentPxRef is only initialized once at mount
+  // If position or containerSize changes, this won't be updated
+  const currentPxRef = React.useRef<number>(position * containerSize);
+  const animRef = React.useRef<{ from: number; to: number } | null>(null);
+
+  // Track previous values for debugging
+  const prevPositionRef = React.useRef(position);
+  const prevContainerSizeRef = React.useRef(containerSize);
+
+  const targetPx = position * containerSize;
+  const displacement = getDisplacement(inputState, axis);
+  const isSwiping = inputState.phase === "swiping" || inputState.phase === "tracking";
+
+  // Debug: Log when position or containerSize changes
+  React.useEffect(() => {
+    if (prevPositionRef.current !== position) {
+      log(id, "position changed:", prevPositionRef.current, "->", position);
+      log(id, "  currentPxRef.current:", currentPxRef.current);
+      log(id, "  new targetPx:", targetPx);
+      prevPositionRef.current = position;
+    }
+    if (prevContainerSizeRef.current !== containerSize) {
+      log(id, "containerSize changed:", prevContainerSizeRef.current, "->", containerSize);
+      prevContainerSizeRef.current = containerSize;
+    }
+  }, [id, position, containerSize, targetPx]);
+
+  // Debug: Log inputState changes
+  React.useEffect(() => {
+    log(id, "inputState:", inputState.phase, "direction:", inputState.direction, "displacement:", displacement);
+  }, [id, inputState, displacement]);
+
+  // Animation frame handler
+  const handleFrame = React.useCallback(
+    ({ easedProgress }: { easedProgress: number }) => {
+      const element = elementRef.current;
+      const anim = animRef.current;
+      if (!element || !anim) {
+        return;
+      }
+      const value = interpolate(anim.from, anim.to, easedProgress);
+      currentPxRef.current = value;
+      const fn = axis === "horizontal" ? "translateX" : "translateY";
+      element.style.transform = `${fn}(${value}px)`;
+    },
+    [axis],
+  );
+
+  const handleComplete = React.useCallback(() => {
+    log(id, "animation complete, targetPx:", targetPx);
+    animRef.current = null;
+    currentPxRef.current = targetPx;
+  }, [id, targetPx]);
+
+  const { isAnimating, start, cancel } = useAnimationFrame({
+    duration: animationDuration,
+    easing: easings.easeOutExpo,
+    onFrame: handleFrame,
+    onComplete: handleComplete,
+  });
+
+  // When swipe ends, animate to target
+  React.useLayoutEffect(() => {
+    // If swiping, don't start animation
+    if (isSwiping) {
+      cancel();
+      return;
+    }
+
+    // Check if we need to animate
+    const currentPx = currentPxRef.current;
+    const distance = Math.abs(currentPx - targetPx);
+
+    log(id, "useLayoutEffect[animation]:", {
+      isSwiping,
+      currentPx,
+      targetPx,
+      distance,
+      willAnimate: distance > 1,
+    });
+
+    if (distance > 1) {
+      // Need to animate from current to target
+      animRef.current = { from: currentPx, to: targetPx };
+      log(id, "starting animation:", animRef.current);
+      start();
+    }
+  }, [id, isSwiping, targetPx, start, cancel]);
+
+  // Direct DOM update
+  React.useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+
+    if (isAnimating) {
+      log(id, "useLayoutEffect[dom]: skipped (isAnimating)");
+      return; // Animation handles transform
+    }
+
+    const fn = axis === "horizontal" ? "translateX" : "translateY";
+    const displayPx = targetPx + displacement;
+
+    log(id, "useLayoutEffect[dom]:", {
+      targetPx,
+      displacement,
+      displayPx,
+      prevCurrentPx: currentPxRef.current,
+    });
+
+    currentPxRef.current = displayPx;
+    element.style.transform = `${fn}(${displayPx}px)`;
+  }, [id, targetPx, displacement, axis, isAnimating]);
+
+  // Visibility
+  const visible = shouldBeVisible(isActive, position, inputState, canNavigate, isAnimating);
+
+  React.useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (element) {
+      element.style.visibility = visible ? "visible" : "hidden";
+      log(id, "visibility:", visible);
+    }
+  }, [id, visible]);
+
+  const staticStyle = React.useMemo<React.CSSProperties>(() => ({
+    ...baseStyle,
+    pointerEvents: isActive ? "auto" : "none",
+    willChange: "transform",
+  }), [isActive]);
+
+  return (
+    <div
+      ref={elementRef}
+      data-pivot-content={id}
+      data-active={isActive ? "true" : "false"}
+      data-position={position}
+      style={staticStyle}
+    >
+      {children}
+    </div>
+  );
+});

package/src/modules/pivot/SwipePivotContent.position.spec.tsx

@@ -0,0 +1,167 @@
+/**
+ * @file Tests for SwipePivotContent position handling.
+ *
+ * TDD: Swipe NavigationでPage2,3が重なる問題を再現するテスト
+ *
+ * 問題: Page 1でスワイプすると、Page 2とPage 3が同じ位置に表示される
+ * 原因: getPosition関数が-1, 0, 1しか返さないため、離れたページも同じpositionになる
+ * 解決: 親コンポーネントで隣接するアイテムのみをレンダリングする
+ */
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { SwipePivotContent } from "./SwipePivotContent.js";
+import type { SwipeInputState } from "../../hooks/gesture/types.js";
+
+/**
+ * Helper function to calculate position offset (not clamped)
+ * This is the fix: calculate actual offset, then filter
+ */
+const getPositionOffset = (itemIndex: number, activeIndex: number): number => {
+  return itemIndex - activeIndex;
+};
+
+/**
+ * Helper to determine if item should be rendered
+ */
+const shouldRenderItem = (offset: number): boolean => {
+  return Math.abs(offset) <= 1;
+};
+
+/**
+ * Helper to convert offset to display position
+ */
+const toDisplayPosition = (offset: number): -1 | 0 | 1 => {
+  if (offset < 0) return -1;
+  if (offset > 0) return 1;
+  return 0;
+};
+
+describe("SwipePivotContent position handling", () => {
+  const containerSize = 300;
+
+  const swipingLeftState: SwipeInputState = {
+    phase: "swiping",
+    displacement: { x: -50, y: 0 },
+    velocity: { x: -0.5, y: 0 },
+    direction: -1,
+  };
+
+  describe("correct position offset calculation", () => {
+    it("calculates correct offset for each item", () => {
+      // When on Page 1 (index 0)
+      const activeIndex = 0;
+
+      expect(getPositionOffset(0, activeIndex)).toBe(0);  // Page 1
+      expect(getPositionOffset(1, activeIndex)).toBe(1);  // Page 2
+      expect(getPositionOffset(2, activeIndex)).toBe(2);  // Page 3 - offset is 2!
+    });
+
+    it("filters out non-adjacent items", () => {
+      const activeIndex = 0;
+
+      expect(shouldRenderItem(getPositionOffset(0, activeIndex))).toBe(true);  // Page 1
+      expect(shouldRenderItem(getPositionOffset(1, activeIndex))).toBe(true);  // Page 2
+      expect(shouldRenderItem(getPositionOffset(2, activeIndex))).toBe(false); // Page 3 - should NOT render
+    });
+  });
+
+  describe("rendering only adjacent items", () => {
+    it("only renders Page 1 and Page 2 when on Page 1", () => {
+      // Simulating correct behavior in parent component
+      const items = [
+        { id: "page1", index: 0 },
+        { id: "page2", index: 1 },
+        { id: "page3", index: 2 },
+      ];
+      const activeIndex = 0;
+
+      // Filter to only adjacent items BEFORE rendering
+      const itemsToRender = items.filter(item =>
+        shouldRenderItem(getPositionOffset(item.index, activeIndex))
+      );
+
+      render(
+        <>
+          {itemsToRender.map((item) => {
+            const offset = getPositionOffset(item.index, activeIndex);
+            return (
+              <SwipePivotContent
+                key={item.id}
+                id={item.id}
+                isActive={offset === 0}
+                position={toDisplayPosition(offset)}
+                inputState={swipingLeftState}
+                containerSize={containerSize}
+                canNavigate={true}
+              >
+                <div data-testid={item.id}>{item.id}</div>
+              </SwipePivotContent>
+            );
+          })}
+        </>,
+      );
+
+      expect(screen.queryByTestId("page1")).toBeInTheDocument();
+      expect(screen.queryByTestId("page2")).toBeInTheDocument();
+      expect(screen.queryByTestId("page3")).not.toBeInTheDocument(); // Page 3 not rendered
+    });
+
+    it("only renders Page 2, Page 3 when on Page 2", () => {
+      const items = [
+        { id: "page1", index: 0 },
+        { id: "page2", index: 1 },
+        { id: "page3", index: 2 },
+      ];
+      const activeIndex = 1; // On Page 2
+
+      const itemsToRender = items.filter(item =>
+        shouldRenderItem(getPositionOffset(item.index, activeIndex))
+      );
+
+      render(
+        <>
+          {itemsToRender.map((item) => {
+            const offset = getPositionOffset(item.index, activeIndex);
+            return (
+              <SwipePivotContent
+                key={item.id}
+                id={item.id}
+                isActive={offset === 0}
+                position={toDisplayPosition(offset)}
+                inputState={swipingLeftState}
+                containerSize={containerSize}
+                canNavigate={true}
+              >
+                <div data-testid={item.id}>{item.id}</div>
+              </SwipePivotContent>
+            );
+          })}
+        </>,
+      );
+
+      expect(screen.queryByTestId("page1")).toBeInTheDocument();  // Previous
+      expect(screen.queryByTestId("page2")).toBeInTheDocument();  // Active
+      expect(screen.queryByTestId("page3")).toBeInTheDocument();  // Next
+    });
+  });
+
+  describe("canNavigate for boundary items", () => {
+    it("non-adjacent items should not be visible when canNavigate=false", () => {
+      render(
+        <SwipePivotContent
+          id="page3"
+          isActive={false}
+          position={1}
+          inputState={swipingLeftState}
+          containerSize={containerSize}
+          canNavigate={false}
+        >
+          <div data-testid="page3">Page 3</div>
+        </SwipePivotContent>,
+      );
+
+      const wrapper = screen.getByTestId("page3").parentElement;
+      expect(wrapper?.style?.visibility).toBe("hidden");
+    });
+  });
+});