react-panel-layout 0.5.1 → 0.6.0

package/src/demo/pages/Pivot/components/PivotTransitions.tsx

@@ -0,0 +1,120 @@
+/**
+ * @file Pivot transitions demo - CSS-based transitions via design tokens
+ */
+import * as React from "react";
+import { usePivot } from "../../../../pivot/index";
+import type { PivotItem } from "../../../../pivot/index";
+import styles from "./Pivot.module.css";
+import animationsCss from "../../../styles/animations.css?raw";
+
+const createItems = (prefix: string): PivotItem[] => [
+  {
+    id: `${prefix}-1`,
+    label: "Tab 1",
+    content: (
+      <div className={styles.transitionDemoInnerContent}>
+        <h3>Content 1</h3>
+        <p>This is the first tab content.</p>
+      </div>
+    ),
+  },
+  {
+    id: `${prefix}-2`,
+    label: "Tab 2",
+    content: (
+      <div className={styles.transitionDemoInnerContent}>
+        <h3>Content 2</h3>
+        <p>This is the second tab content.</p>
+      </div>
+    ),
+  },
+  {
+    id: `${prefix}-3`,
+    label: "Tab 3",
+    content: (
+      <div className={styles.transitionDemoInnerContent}>
+        <h3>Content 3</h3>
+        <p>This is the third tab content.</p>
+      </div>
+    ),
+  },
+];
+
+type TransitionConfig = {
+  label: string;
+  description: string;
+  transitionMode: "css" | "none";
+};
+
+const transitionConfigs: TransitionConfig[] = [
+  {
+    label: "CSS Transitions (Default)",
+    description: "Smooth opacity fade using design tokens",
+    transitionMode: "css",
+  },
+  {
+    label: "No Transitions",
+    description: "Instant switch - uses React.Activity for memory optimization",
+    transitionMode: "none",
+  },
+];
+
+type TransitionDemoProps = {
+  config: TransitionConfig;
+  index: number;
+};
+
+const TransitionDemo: React.FC<TransitionDemoProps> = ({ config, index }) => {
+  const items = React.useMemo(() => createItems(`demo-${index}`), [index]);
+  const { getItemProps, Outlet } = usePivot({
+    items,
+    defaultActiveId: items[0].id,
+    transitionMode: config.transitionMode,
+  });
+
+  return (
+    <div className={styles.transitionDemoCard}>
+      <div className={styles.transitionDemoHeader}>
+        <h4>{config.label}</h4>
+        <span className={styles.transitionDemoDescription}>{config.description}</span>
+        <code className={styles.transitionDemoCode}>transitionMode: "{config.transitionMode}"</code>
+      </div>
+      <div className={styles.transitionDemoTabs}>
+        {items.map((item) => {
+          const props = getItemProps(item.id);
+          return (
+            <button
+              key={item.id}
+              className={styles.transitionDemoTab}
+              onClick={props.onClick}
+              data-active={props["data-active"]}
+            >
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+      <div className={styles.transitionDemoContent}>
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export const PivotTransitions: React.FC = () => {
+  return (
+    <div className={styles.transitionsContainer}>
+      <div className={styles.transitionsGrid}>
+        {transitionConfigs.map((config, index) => (
+          <TransitionDemo key={config.label} config={config} index={index} />
+        ))}
+      </div>
+
+      <div className={styles.designTokensSection}>
+        <h4>Design Tokens</h4>
+        <p>Customize animations via CSS custom properties:</p>
+        <pre className={styles.codeBlock}>{animationsCss.trim()}</pre>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/Pivot/components/SwipePivot.module.css

@@ -0,0 +1,114 @@
+/* Swipe Pivot demo styles */
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--rpl-color-background, #f8f9fa);
+  overflow: hidden;
+}
+
+.indicators {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+}
+
+.indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: none;
+  background: var(--rpl-color-border, #d0d0d0);
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.indicator:hover {
+  transform: scale(1.2);
+}
+
+.indicator[data-active="true"] {
+  background: var(--rpl-color-primary, #0066cc);
+  transform: scale(1.2);
+}
+
+.swipeContainer {
+  flex: 1;
+  min-height: 250px;
+  position: relative;
+  overflow: hidden;
+  margin: 0 16px;
+  border-radius: 12px;
+  background: var(--rpl-color-surface, #fff);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.pageContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.pageContent h2 {
+  margin: 0 0 16px 0;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.pageContent p {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  color: var(--rpl-color-text-secondary, #666);
+  line-height: 1.6;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  font-size: 14px;
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+.hint {
+  font-style: italic;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px;
+}
+
+.navButton {
+  padding: 10px 24px;
+  font-size: 14px;
+  font-weight: 500;
+  border: 1px solid var(--rpl-color-border, #d0d0d0);
+  border-radius: 8px;
+  background: var(--rpl-color-surface, #fff);
+  color: var(--rpl-color-text-primary, #333);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.navButton:hover:not(:disabled) {
+  background: var(--rpl-color-surface-hover, #f0f0f0);
+  border-color: var(--rpl-color-primary, #0066cc);
+}
+
+.navButton:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/src/demo/pages/Pivot/components/SwipePivot.tsx

@@ -0,0 +1,193 @@
+/**
+ * @file Swipe Pivot demo - horizontal swipe to switch content
+ */
+import * as React from "react";
+import { usePivot } from "../../../../pivot/index.js";
+import { usePivotSwipeInput } from "../../../../modules/pivot/usePivotSwipeInput.js";
+import { SwipePivotContent } from "../../../../modules/pivot/SwipePivotContent.js";
+import type { PivotItem, UsePivotResult } from "../../../../pivot/index.js";
+import type { SwipeInputState } from "../../../../hooks/gesture/types.js";
+import styles from "./SwipePivot.module.css";
+
+type PivotItemsProps = {
+  items: PivotItem[];
+  pivot: UsePivotResult;
+  inputState: SwipeInputState;
+  containerWidth: number;
+};
+
+/** Renders pivot items within the swipe container */
+const PivotItems: React.FC<PivotItemsProps> = ({ items, pivot, inputState, containerWidth }) => {
+  if (containerWidth <= 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {items.map((item) => {
+        // Use getVirtualPosition for loop mode support
+        const position = pivot.getVirtualPosition(item.id);
+        if (position === null) {
+          return null;
+        }
+
+        const canNavigate = position === 0 ? true : pivot.canGo(position);
+
+        return (
+          <SwipePivotContent
+            key={item.id}
+            id={item.id}
+            isActive={pivot.isActive(item.id)}
+            position={position}
+            inputState={inputState}
+            axis="horizontal"
+            containerSize={containerWidth}
+            canNavigate={canNavigate}
+          >
+            {item.content}
+          </SwipePivotContent>
+        );
+      })}
+    </>
+  );
+};
+
+/** Get hint text based on swipe state */
+const getSwipeHintText = (inputState: SwipeInputState): string => {
+  if (inputState.phase === "swiping") {
+    return `Swiping: ${Math.round(inputState.displacement.x)}px`;
+  }
+  return "Swipe to navigate";
+};
+
+const pageColors = ["#ffe0e0", "#e0ffe0", "#e0e0ff"];
+
+const items: PivotItem[] = [
+  {
+    id: "page1",
+    label: "Page 1",
+    content: (
+      <div className={styles.pageContent} style={{ backgroundColor: pageColors[0] }}>
+        <h2>Page 1</h2>
+        <p>Swipe left to see Page 2, or right to loop to Page 3</p>
+        <p>This demo shows infinite loop swipe navigation.</p>
+      </div>
+    ),
+  },
+  {
+    id: "page2",
+    label: "Page 2",
+    content: (
+      <div className={styles.pageContent} style={{ backgroundColor: pageColors[1] }}>
+        <h2>Page 2</h2>
+        <p>Swipe left or right</p>
+        <p>The content follows your finger during the swipe gesture.</p>
+      </div>
+    ),
+  },
+  {
+    id: "page3",
+    label: "Page 3",
+    content: (
+      <div className={styles.pageContent} style={{ backgroundColor: pageColors[2] }}>
+        <h2>Page 3</h2>
+        <p>Swipe left to loop back to Page 1</p>
+        <p>Infinite loop navigation - keep swiping to cycle through all pages.</p>
+      </div>
+    ),
+  },
+];
+
+export const SwipePivot: React.FC = () => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+
+  const pivot = usePivot({
+    items,
+    defaultActiveId: "page1",
+    transitionMode: "none", // We handle our own animations
+    navigationMode: "loop", // Enable infinite loop navigation
+  });
+
+  const { inputState, containerProps } = usePivotSwipeInput({
+    containerRef,
+    pivot,
+    axis: "horizontal",
+    thresholds: {
+      distanceThreshold: 150,
+      velocityThreshold: 0.6,
+      lockThreshold: 25,
+    },
+  });
+
+  // Measure container width for translation calculations
+  React.useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.clientWidth);
+      }
+    };
+
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      {/* Page indicators */}
+      <div className={styles.indicators}>
+        {items.map((item) => (
+          <button
+            key={item.id}
+            className={styles.indicator}
+            data-active={pivot.isActive(item.id)}
+            onClick={() => pivot.setActiveId(item.id)}
+            aria-label={`Go to ${item.label}`}
+          />
+        ))}
+      </div>
+
+      {/* Swipe area */}
+      <div
+        ref={containerRef}
+        className={styles.swipeContainer}
+        {...containerProps}
+        style={containerProps.style}
+      >
+        <PivotItems
+          items={items}
+          pivot={pivot}
+          inputState={inputState}
+          containerWidth={containerWidth}
+        />
+      </div>
+
+      {/* Navigation info */}
+      <div className={styles.info}>
+        <span>Page {pivot.activeIndex + 1} of {pivot.itemCount}</span>
+        <span className={styles.hint}>
+          {getSwipeHintText(inputState)}
+        </span>
+      </div>
+
+      {/* Manual navigation buttons */}
+      <div className={styles.buttons}>
+        <button
+          className={styles.navButton}
+          onClick={() => pivot.go(-1)}
+          disabled={!pivot.canGo(-1)}
+        >
+          Previous
+        </button>
+        <button
+          className={styles.navButton}
+          onClick={() => pivot.go(1)}
+          disabled={!pivot.canGo(1)}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/Pivot/components/SwipeTabsPivot.module.css

@@ -0,0 +1,203 @@
+/**
+ * @file Swipe Tabs Pivot demo styles
+ */
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--rpl-color-background, #f8f9fa);
+  overflow: hidden;
+}
+
+.title {
+  margin: 16px 16px 4px;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.subtitle {
+  margin: 0 16px 16px;
+  font-size: 14px;
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+.mainContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin: 0 16px;
+  overflow: hidden;
+}
+
+.tabsContainer {
+  position: relative;
+  height: 48px;
+  background: var(--rpl-color-surface, #fff);
+  border-radius: 12px 12px 0 0;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* iOS segmented control style */
+.tabsContainer[data-style="ios"] {
+  height: 44px;
+  margin: 0 8px;
+  padding: 4px;
+  background: rgba(118, 118, 128, 0.12);
+  border-radius: 10px;
+  box-shadow: none;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  background: transparent;
+  color: var(--rpl-color-text-secondary, #666);
+  cursor: pointer;
+  transition: color 0.2s ease, background 0.2s ease;
+  box-sizing: border-box;
+}
+
+.tab:hover {
+  background: var(--rpl-color-surface-hover, rgba(0, 0, 0, 0.05));
+}
+
+.tab[data-active="true"] {
+  color: var(--rpl-color-primary, #0066cc);
+  background: var(--rpl-color-primary-light, rgba(0, 102, 204, 0.1));
+}
+
+/* iOS style tab - no hover/active bg, text only */
+.tabIos {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  border: none;
+  background: transparent;
+  color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: color 0.2s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.tabIos[data-active="true"] {
+  color: #000;
+}
+
+.contentContainer {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: var(--rpl-color-surface, #fff);
+  border-radius: 0 0 12px 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.pageContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.pageContent h2 {
+  margin: 0 0 16px 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.pageContent p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: var(--rpl-color-text-secondary, #666);
+  line-height: 1.6;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  font-size: 14px;
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+.hint {
+  font-style: italic;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px;
+}
+
+.navButton {
+  padding: 10px 24px;
+  font-size: 14px;
+  font-weight: 500;
+  border: 1px solid var(--rpl-color-border, #d0d0d0);
+  border-radius: 8px;
+  background: var(--rpl-color-surface, #fff);
+  color: var(--rpl-color-text-primary, #333);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.navButton:hover {
+  background: var(--rpl-color-surface-hover, #f0f0f0);
+  border-color: var(--rpl-color-primary, #0066cc);
+}
+
+.styleToggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 16px 12px;
+  font-size: 14px;
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+.toggleButton {
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid var(--rpl-color-border, #d0d0d0);
+  border-radius: 6px;
+  background: var(--rpl-color-surface, #fff);
+  color: var(--rpl-color-text-secondary, #666);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.toggleButton:hover {
+  background: var(--rpl-color-surface-hover, #f0f0f0);
+}
+
+.toggleButton[data-active="true"] {
+  background: var(--rpl-color-primary, #007AFF);
+  border-color: var(--rpl-color-primary, #007AFF);
+  color: #fff;
+}