@seed-design/stackflow 1.1.20 → 1.1.21

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -1,136 +1,223 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const reactUseCallbackRef = require('@radix-ui/react-use-callback-ref');
-const React = require('react');
-const useTopActivity = require('../private/useTopActivity.cjs');
-
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_useTopActivity = require("../private/useTopActivity.cjs");
+const require_dom = require("./dom.cjs");
+const require_animation = require("./animation.cjs");
+let react = require("react");
+//#region src/primitive/GlobalInteraction/useGlobalInteraction.ts
+var IDLE_CONTEXT = Object.freeze({
+	x0: 0,
+	t0: 0,
+	displacement: 0,
+	displacementRatio: 0,
+	velocity: 0
+});
+var DEFAULT_DISPLACEMENT_RATIO_THRESHOLD = .4;
+var DEFAULT_VELOCITY_THRESHOLD = 1;
 function useGlobalInteraction() {
-  const [swipeBackState, setSwipeBackState] = React.useState("idle");
-  const swipeBackContextRef = React.useRef({
-    x0: 0,
-    t0: 0,
-    displacement: 0,
-    displacementRatio: 0,
-    velocity: 0
-  });
-  const stackRef = React.useRef(null);
-  const setSwipeBackContext = React.useCallback((ctx) => {
-    swipeBackContextRef.current = ctx;
-    stackRef.current?.style.setProperty(
-      "--swipe-back-displacement",
-      `${ctx.displacement.toString()}px`
-    );
-    stackRef.current?.style.setProperty(
-      "--swipe-back-displacement-ratio",
-      ctx.displacementRatio.toString()
-    );
-  }, []);
-  const getSwipeBackEvents = React.useCallback(
-    (props) => {
-      const {
-        swipeBackDisplacementRatioThreshold: displacementRatioThreshold = 0.4,
-        swipeBackVelocityThreshold: velocityThreshold = 1
-      } = props;
-      const onSwipeStart = reactUseCallbackRef.useCallbackRef(props.onSwipeBackStart);
-      const onSwipeMove = reactUseCallbackRef.useCallbackRef(props.onSwipeBackMove);
-      const onSwipeEnd = reactUseCallbackRef.useCallbackRef(props.onSwipeBackEnd);
-      const startSwipeBack = React.useCallback(
-        ({ x0, t0 }) => {
-          setSwipeBackContext({
-            x0,
-            t0,
-            displacement: 0,
-            displacementRatio: 0,
-            velocity: 0
-          });
-          setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
-          onSwipeStart?.();
-        },
-        [onSwipeStart]
-      );
-      const moveSwipeBack = React.useCallback(
-        ({ x, t }) => {
-          const displacement = Math.max(0, x - swipeBackContextRef.current.x0);
-          const displacementRatio = displacement / window.innerWidth;
-          const velocity = displacement / (t - swipeBackContextRef.current.t0);
-          setSwipeBackContext({
-            ...swipeBackContextRef.current,
-            displacement,
-            displacementRatio,
-            velocity
-          });
-          setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
-          onSwipeMove?.({ displacement, displacementRatio });
-        },
-        [onSwipeMove]
-      );
-      const endSwipeBack = React.useCallback(
-        (_) => {
-          const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
-          if (swiped) {
-            stackRef.current?.style.setProperty("--swipe-back-target", "100%");
-            setSwipeBackState("completing");
-          } else {
-            stackRef.current?.style.setProperty("--swipe-back-target", "0");
-            setSwipeBackState("canceling");
-          }
-          onSwipeEnd?.({ swiped });
-        },
-        [onSwipeEnd, displacementRatioThreshold, velocityThreshold]
-      );
-      const reset = React.useCallback(() => {
-        setSwipeBackContext({
-          x0: 0,
-          t0: 0,
-          displacement: 0,
-          displacementRatio: 0,
-          velocity: 0
-        });
-        stackRef.current?.style.setProperty("--swipe-back-target", "0");
-        setSwipeBackState("idle");
-      }, []);
-      return React.useMemo(
-        () => ({
-          startSwipeBack,
-          moveSwipeBack,
-          endSwipeBack,
-          reset
-        }),
-        [startSwipeBack, moveSwipeBack, endSwipeBack, reset]
-      );
-    },
-    [setSwipeBackContext]
-  );
-  const topActivity = useTopActivity.useTopActivity();
-  const stackProps = React.useMemo(
-    () => ({
-      "data-swipe-back-state": swipeBackState,
-      "data-global-transition-state": topActivity.transitionState,
-      "data-top-activity-type": topActivity.activityType,
-      "data-top-transition-style": topActivity.transitionStyle
-    }),
-    [
-      swipeBackState,
-      topActivity.transitionState,
-      topActivity.activityType,
-      topActivity.transitionStyle
-    ]
-  );
-  return React.useMemo(
-    () => ({
-      stackRef,
-      swipeBackContextRef,
-      swipeBackState,
-      setSwipeBackState,
-      setSwipeBackContext,
-      getSwipeBackEvents,
-      stackProps
-    }),
-    [swipeBackState, setSwipeBackContext, getSwipeBackEvents, stackProps]
-  );
+	const swipeBackStateRef = (0, react.useRef)("idle");
+	const swipeBackContextRef = (0, react.useRef)({ ...IDLE_CONTEXT });
+	const stackRef = (0, react.useRef)(null);
+	const cachedTargetsRef = (0, react.useRef)(null);
+	const runningAnimsRef = (0, react.useRef)([]);
+	const appBarBgScrubAnimRef = (0, react.useRef)(null);
+	const swipeStyleRef = (0, react.useRef)(null);
+	const pendingPushRAFRef = (0, react.useRef)(null);
+	const skipNextExitRef = (0, react.useRef)(false);
+	/** Cancel any running WAAPI animations and clear the ref. */
+	const stopRunningAnims = (0, react.useCallback)(() => {
+		require_animation.cancelAll(runningAnimsRef.current);
+		runningAnimsRef.current = [];
+	}, []);
+	/** Cancel the in-place scrub animation on the AppBar background. */
+	const stopAppBarBgScrub = (0, react.useCallback)(() => {
+		appBarBgScrubAnimRef.current?.cancel();
+		appBarBgScrubAnimRef.current = null;
+	}, []);
+	/** Cancel a pending deferred push animation, if any. */
+	const cancelPendingPushRAF = (0, react.useCallback)(() => {
+		if (pendingPushRAFRef.current !== null) {
+			cancelAnimationFrame(pendingPushRAFRef.current);
+			pendingPushRAFRef.current = null;
+		}
+	}, []);
+	/** Update swipe-back-state attribute on the stack DOM element. */
+	const setSwipeBackState = (0, react.useCallback)((state) => {
+		swipeBackStateRef.current = state;
+		if (stackRef.current) stackRef.current.dataset["swipeBackState"] = state;
+	}, []);
+	const startSwipeBack = (0, react.useCallback)(({ x0, t0 }) => {
+		cancelPendingPushRAF();
+		stopRunningAnims();
+		stopAppBarBgScrub();
+		swipeBackContextRef.current = {
+			...IDLE_CONTEXT,
+			x0,
+			t0
+		};
+		if (stackRef.current) {
+			cachedTargetsRef.current = require_dom.findTransitionTargets(stackRef.current);
+			swipeStyleRef.current = require_dom.readTransitionStyle(stackRef.current);
+		}
+		setSwipeBackState("swiping");
+	}, [
+		cancelPendingPushRAF,
+		stopRunningAnims,
+		stopAppBarBgScrub,
+		setSwipeBackState
+	]);
+	const moveSwipeBack = (0, react.useCallback)(({ x, t }) => {
+		const ctx = swipeBackContextRef.current;
+		const displacement = Math.max(0, x - ctx.x0);
+		const displacementRatio = displacement / window.innerWidth;
+		const velocity = displacement / (t - ctx.t0);
+		ctx.displacement = displacement;
+		ctx.displacementRatio = displacementRatio;
+		ctx.velocity = velocity;
+		const targets = cachedTargetsRef.current;
+		if (targets && swipeStyleRef.current === "slideFromRightIOS") {
+			require_dom.applySwipeStyles(targets, displacement, displacementRatio);
+			appBarBgScrubAnimRef.current = require_animation.scrubAppBarBackground(targets.topAppBarBackground, `translate3d(${displacement}px, 0, 0)`, appBarBgScrubAnimRef.current);
+		}
+		return ctx;
+	}, []);
+	const endSwipeBack = (0, react.useCallback)((thresholds = {}) => {
+		const { displacementRatioThreshold = DEFAULT_DISPLACEMENT_RATIO_THRESHOLD, velocityThreshold = DEFAULT_VELOCITY_THRESHOLD } = thresholds;
+		const ctx = swipeBackContextRef.current;
+		const swiped = ctx.displacementRatio > displacementRatioThreshold || ctx.velocity > velocityThreshold;
+		const targets = cachedTargetsRef.current;
+		if (!targets) {
+			setSwipeBackState("idle");
+			return swiped;
+		}
+		if (swipeStyleRef.current !== "slideFromRightIOS") {
+			cachedTargetsRef.current = null;
+			swipeStyleRef.current = null;
+			setSwipeBackState("idle");
+			return swiped;
+		}
+		stopAppBarBgScrub();
+		const onFinish = (animations, pin) => {
+			pin();
+			require_animation.cancelAll(animations);
+			if (runningAnimsRef.current === animations) {
+				runningAnimsRef.current = [];
+				cachedTargetsRef.current = null;
+				swipeStyleRef.current = null;
+				setSwipeBackState("idle");
+			}
+		};
+		if (swiped) {
+			setSwipeBackState("completing");
+			skipNextExitRef.current = true;
+			const { animations, finished } = require_animation.animateSwipeComplete(targets, ctx.displacement);
+			runningAnimsRef.current = animations;
+			finished.then(() => onFinish(animations, () => require_dom.setPostExitPositions(targets)));
+		} else {
+			setSwipeBackState("canceling");
+			const { animations, finished } = require_animation.animateSwipeCancel(targets, ctx.displacement);
+			runningAnimsRef.current = animations;
+			finished.then(() => onFinish(animations, () => require_dom.setIdlePositions(targets)));
+		}
+		return swiped;
+	}, [setSwipeBackState, stopAppBarBgScrub]);
+	const resetSwipeBack = (0, react.useCallback)(() => {
+		stopRunningAnims();
+		stopAppBarBgScrub();
+		if (cachedTargetsRef.current) require_dom.clearAllStyles(cachedTargetsRef.current);
+		cachedTargetsRef.current = null;
+		swipeStyleRef.current = null;
+		swipeBackContextRef.current = { ...IDLE_CONTEXT };
+		setSwipeBackState("idle");
+	}, [
+		stopRunningAnims,
+		stopAppBarBgScrub,
+		setSwipeBackState
+	]);
+	const topActivity = require_useTopActivity.useTopActivity();
+	const prevTransitionStateRef = (0, react.useRef)(topActivity.transitionState);
+	(0, react.useLayoutEffect)(() => {
+		const prev = prevTransitionStateRef.current;
+		const next = topActivity.transitionState;
+		prevTransitionStateRef.current = next;
+		const stackEl = stackRef.current;
+		if (!stackEl) return;
+		const swipeState = swipeBackStateRef.current;
+		if (next === "enter-active" && prev !== "enter-active") {
+			if (swipeState !== "idle") return;
+			stopRunningAnims();
+			cancelPendingPushRAF();
+			pendingPushRAFRef.current = requestAnimationFrame(() => {
+				pendingPushRAFRef.current = null;
+				const style = require_dom.readTransitionStyle(stackEl);
+				const targets = require_dom.findTransitionTargets(stackEl);
+				const { animations, finished } = require_animation.animateTransition(targets, "push", style);
+				runningAnimsRef.current = animations;
+				finished.then(() => {
+					require_dom.setIdlePositions(targets, style);
+					require_animation.cancelAll(animations);
+					if (runningAnimsRef.current === animations) runningAnimsRef.current = [];
+				});
+			});
+		}
+		if (next === "exit-active" && prev !== "exit-active") {
+			if (skipNextExitRef.current) {
+				skipNextExitRef.current = false;
+				return;
+			}
+			if (swipeState !== "idle") return;
+			cancelPendingPushRAF();
+			stopRunningAnims();
+			const style = require_dom.readTransitionStyle(stackEl);
+			const targets = require_dom.findTransitionTargets(stackEl);
+			const { animations, finished } = require_animation.animateTransition(targets, "pop", style);
+			runningAnimsRef.current = animations;
+			finished.then(() => {
+				require_dom.setPostExitPositions(targets, style);
+				require_animation.cancelAll(animations);
+				if (runningAnimsRef.current === animations) runningAnimsRef.current = [];
+			});
+		}
+	}, [
+		topActivity.transitionState,
+		stopRunningAnims,
+		cancelPendingPushRAF
+	]);
+	(0, react.useEffect)(() => {
+		return () => {
+			cancelPendingPushRAF();
+			stopRunningAnims();
+			stopAppBarBgScrub();
+		};
+	}, [
+		cancelPendingPushRAF,
+		stopRunningAnims,
+		stopAppBarBgScrub
+	]);
+	const stackProps = (0, react.useMemo)(() => ({
+		"data-swipe-back-state": swipeBackStateRef.current,
+		"data-global-transition-state": topActivity.transitionState,
+		"data-top-activity-type": topActivity.activityType,
+		"data-top-transition-style": topActivity.transitionStyle
+	}), [
+		topActivity.transitionState,
+		topActivity.activityType,
+		topActivity.transitionStyle
+	]);
+	return (0, react.useMemo)(() => ({
+		stackRef,
+		startSwipeBack,
+		moveSwipeBack,
+		endSwipeBack,
+		resetSwipeBack,
+		stackProps
+	}), [
+		startSwipeBack,
+		moveSwipeBack,
+		endSwipeBack,
+		resetSwipeBack,
+		stackProps
+	]);
 }
-
+//#endregion
 exports.useGlobalInteraction = useGlobalInteraction;

package/lib/primitive/GlobalInteraction/useGlobalInteraction.d.ts

@@ -1,4 +1,4 @@
-import { RefObject, Dispatch, SetStateAction, HTMLAttributes } from 'react';
+import { RefObject, HTMLAttributes } from 'react';
 export type SwipeBackState = "idle" | "swiping" | "canceling" | "completing";
 export type UseGlobalInteractionReturn = ReturnType<typeof useGlobalInteraction>;
 export interface SwipeBackContext {
@@ -8,25 +8,17 @@ export interface SwipeBackContext {
     displacementRatio: number;
     velocity: number;
 }
-export interface SwipeBackProps {
+export interface SwipeBackThresholds {
     /**
-     * The threshold to determine whether the swipe back is intentional.
+     * The threshold to determine whether the swipe back is intentional, by displacement ratio.
      * @default 0.4
      */
-    swipeBackDisplacementRatioThreshold?: number;
+    displacementRatioThreshold?: number;
     /**
-     * The threshold to determine whether the swipe back is intentional.
+     * The threshold to determine whether the swipe back is intentional, by velocity.
      * @default 1
      */
-    swipeBackVelocityThreshold?: number;
-    onSwipeBackStart?: () => void;
-    onSwipeBackMove?: (props: {
-        displacement: number;
-        displacementRatio: number;
-    }) => void;
-    onSwipeBackEnd?: (props: {
-        swiped: boolean;
-    }) => void;
+    velocityThreshold?: number;
 }
 export interface StartSwipeBackProps {
     x0: number;
@@ -36,19 +28,11 @@ export interface MoveSwipeBackProps {
     x: number;
     t: number;
 }
-export interface EndSwipeBackProps {
-}
 export declare function useGlobalInteraction(): {
     stackRef: RefObject<HTMLDivElement | null>;
-    swipeBackContextRef: RefObject<SwipeBackContext>;
-    swipeBackState: SwipeBackState;
-    setSwipeBackState: Dispatch<SetStateAction<SwipeBackState>>;
-    setSwipeBackContext: (ctx: SwipeBackContext) => void;
-    getSwipeBackEvents: (props: SwipeBackProps) => {
-        startSwipeBack: ({ x0, t0 }: StartSwipeBackProps) => void;
-        moveSwipeBack: ({ x, t }: MoveSwipeBackProps) => void;
-        endSwipeBack: (_: EndSwipeBackProps) => void;
-        reset: () => void;
-    };
+    startSwipeBack: ({ x0, t0 }: StartSwipeBackProps) => void;
+    moveSwipeBack: ({ x, t }: MoveSwipeBackProps) => SwipeBackContext;
+    endSwipeBack: (thresholds?: SwipeBackThresholds) => boolean;
+    resetSwipeBack: () => void;
     stackProps: HTMLAttributes<HTMLElement>;
 };