Added screens property to animation effect props

example/src/animations.ts

@@ -1,33 +1,34 @@
-import { AnimationEffectFactoryProps } from "@react-motion-router/core";
+import { AnimationEffectFactoryProps } from '@react-motion-router/core';
 import { SlideInFromRightKeyframes, SlideOutToLeftKeyframes } from '@react-motion-router/stack';
-import { isIOS, isPWA } from "./common/utils";
+import { isIOS, isPWA } from './common/utils';
 
-export function animation({ref, direction, playbackRate, index}: AnimationEffectFactoryProps) {
-	const duration = isIOS() && !isPWA() ? 0 : 300;
-	const options: KeyframeEffectOptions = {
-		duration,
-		direction,
-		playbackRate,
-		fill: "both"
-	};
-	const keyframes = [
-		SlideOutToLeftKeyframes,
-		SlideInFromRightKeyframes
-	];
-	return new KeyframeEffect(ref, keyframes[index], options);
+export function animation({ screens, ref, direction, playbackRate, index }: AnimationEffectFactoryProps) {
+  console.log({ screens, index });
+  const duration = isIOS() && !isPWA() ? 0 : 300;
+  const options: KeyframeEffectOptions = {
+    duration,
+    direction,
+    playbackRate,
+    fill: 'both',
+  };
+  const keyframes = [
+    SlideOutToLeftKeyframes,
+    SlideInFromRightKeyframes,
+  ];
+  return new KeyframeEffect(ref, keyframes[index], options);
 }
 
-export function slideToStatic({ref, direction, playbackRate, index}: AnimationEffectFactoryProps) {
-	const duration = isIOS() && !isPWA() ? 0 : 300;
-	const options: KeyframeEffectOptions = {
-		duration,
-		direction,
-		playbackRate,
-		fill: "both"
-	};
-	const keyframes = [
-		[],
-		SlideInFromRightKeyframes
-	];
-	return new KeyframeEffect(ref, keyframes[index], options);
+export function slideToStatic({ ref, direction, playbackRate, index }: AnimationEffectFactoryProps) {
+  const duration = isIOS() && !isPWA() ? 0 : 300;
+  const options: KeyframeEffectOptions = {
+    duration,
+    direction,
+    playbackRate,
+    fill: 'both',
+  };
+  const keyframes = [
+    [],
+    SlideInFromRightKeyframes,
+  ];
+  return new KeyframeEffect(ref, keyframes[index], options);
 }

packages/core/src/ScreenBase.tsx

@@ -103,7 +103,7 @@ export abstract class ScreenBase<
     return this.state.focused;
   }
 
-  get name() {
+  public get name() {
     if (this.props.name)
       return this.props.name
         .toLowerCase()

packages/core/src/ScreenTransitionLayer.tsx

@@ -20,127 +20,127 @@ interface ScreenTransitionLayerState {
 }
 
 export class ScreenTransitionLayer extends Component<ScreenTransitionLayerProps, ScreenTransitionLayerState> {
-    public readonly sharedElementTransitionLayer = createRef<SharedElementTransitionLayer>();
-    public readonly animation: Animation = new Animation();
-    #direction: PlaybackDirection = "normal";
-    #screens: RefObject<ScreenBase>[] = new Array();
-
-    state: ScreenTransitionLayerState = {
-        gestureNavigating: false,
-        progress: 1
+  public readonly sharedElementTransitionLayer = createRef<SharedElementTransitionLayer>();
+  public readonly animation: Animation = new Animation();
+  #direction: PlaybackDirection = 'normal';
+  #screens: RefObject<ScreenBase>[] = [];
+
+  state: ScreenTransitionLayerState = {
+    gestureNavigating: false,
+    progress: 1,
+  };
+
+  private onAnimationFrame() {
+    const progress = this.animation.effect?.getComputedTiming().progress;
+
+    if (progress)
+      this.onProgress(progress);
+
+    if (this.animation.playState === 'running')
+      requestAnimationFrame(this.onAnimationFrame.bind(this));
+  }
+
+  private onTransitionCancel() {
+    this.props.navigation.dispatchEvent(new TransitionCancelEvent());
+  }
+
+  private onTransitionStart() {
+    this.props.navigation.dispatchEvent(new TransitionStartEvent());
+
+    this.onAnimationFrame();
+  }
+
+  private onTransitionEnd() {
+    this.props.navigation.dispatchEvent(new TransitionEndEvent());
+  }
+
+  private onProgress(progress: number) {
+    this.setState({ progress });
+    this.props.navigation.dispatchEvent(new MotionProgressEvent(progress));
+  }
+
+  get screens() {
+    return this.#screens;
+  }
+
+  set screens(screens: RefObject<ScreenBase>[]) {
+    this.#screens = screens;
+  }
+
+  set direction(direction: PlaybackDirection) {
+    this.#direction = direction;
+    this.animation.effect?.updateTiming({ direction });
+  }
+
+  get direction() {
+    return this.#direction;
+  }
+
+  get hasUAVisualTransition() {
+    return this.props.hasUAVisualTransition;
+  }
+
+  public transition() {
+    const effect = new ParallelEffect(
+      this.screens.map(screen => {
+        return screen.current?.transitionProvider?.current?.animationEffect ?? null;
+      }).filter((effect): effect is AnimationEffect => effect !== null)
+    );
+
+    const sharedElementEffect = this.sharedElementTransitionLayer.current?.animationEffect;
+    const duration = effect.getComputedTiming().duration;
+    if (sharedElementEffect) {
+      sharedElementEffect.updateTiming({
+        duration: duration instanceof CSSNumericValue ? duration.to('ms').value : duration,
+      });
+      effect.append(sharedElementEffect);
+      this.sharedElementTransitionLayer.current?.ref.current?.showModal();
     }
 
-    private onAnimationFrame() {
-        const progress = this.animation.effect?.getComputedTiming().progress;
-
-        if (progress)
-            this.onProgress(progress);
-
-        if (this.animation.playState === "running")
-            requestAnimationFrame(this.onAnimationFrame.bind(this));
-    }
-
-    private onTransitionCancel() {
-        this.props.navigation.dispatchEvent(new TransitionCancelEvent());
-    }
-
-    private onTransitionStart() {
-        this.props.navigation.dispatchEvent(new TransitionStartEvent());
-
-        this.onAnimationFrame();
-    }
-
-    private onTransitionEnd() {
-        this.props.navigation.dispatchEvent(new TransitionEndEvent());
-    }
-
-    private onProgress(progress: number) {
-        this.setState({ progress });
-        this.props.navigation.dispatchEvent(new MotionProgressEvent(progress));
-    }
-
-    get screens() {
-        return this.#screens;
-    }
-
-    set screens(screens: RefObject<ScreenBase>[]) {
-        this.#screens = screens;
-    }
-
-    set direction(direction: PlaybackDirection) {
-        this.#direction = direction;
-        this.animation.effect?.updateTiming({ direction });
-    }
-
-    get direction() {
-        return this.#direction;
-    }
-
-    get hasUAVisualTransition() {
-        return this.props.hasUAVisualTransition;
-    }
-
-    public transition() {
-        const effect = new ParallelEffect(
-            this.screens.map(screen => {
-                return screen.current?.transitionProvider?.current?.animationEffect ?? null;
-            }).filter((effect): effect is AnimationEffect => effect !== null)
-        );
-
-        const sharedElementEffect = this.sharedElementTransitionLayer.current?.animationEffect;
-        const duration = effect.getComputedTiming().duration;
-        if (sharedElementEffect) {
-            sharedElementEffect.updateTiming({
-                duration: duration instanceof CSSNumericValue ? duration.to('ms').value : duration
-            });
-            effect.append(sharedElementEffect);
-            this.sharedElementTransitionLayer.current?.ref.current?.showModal();
-        }
-
-        this.animation.effect = effect;
-
-        this.animation.play();
-        this.onTransitionStart();
-
-        this.animation.oncancel = () => {
-            this.sharedElementTransitionLayer.current?.ref.current?.close();
-            this.onTransitionCancel();
-            this.animation.effect = null;
-        }
-        this.animation.finished.then(() => {
-            this.animation.commitStyles();
-            this.onTransitionEnd();
-            this.sharedElementTransitionLayer.current?.ref.current?.close();
-            this.animation.effect = null;
-        });
-
-        return this.animation;
-    }
-
-    render() {
-        return (
-            <ScreenTransitionLayerContext.Provider value={this}>
-                <SharedElementTransitionLayer
-                    ref={this.sharedElementTransitionLayer}
-                    navigation={this.props.navigation}
-                    direction={this.animation.playbackRate > 0 ? "forwards" : "backwards"}
-                />
-                <div
-                    className="screen-transition-layer"
-                    style={{
-                        width: '100%',
-                        height: '100%',
-                        display: 'grid',
-                        contain: 'layout',
-                        isolation: 'isolate',
-                        '--motion-progress': this.state.progress
-                    } as React.CSSProperties}
-                >
-                    <MotionContext.Provider value={this.state.progress}>
-                        {this.props.children}
-                    </MotionContext.Provider>
-                </div>
-            </ScreenTransitionLayerContext.Provider>
-        );
-    }
+    this.animation.effect = effect;
+
+    this.animation.play();
+    this.onTransitionStart();
+
+    this.animation.oncancel = () => {
+      this.sharedElementTransitionLayer.current?.ref.current?.close();
+      this.onTransitionCancel();
+      this.animation.effect = null;
+    };
+    this.animation.finished.then(() => {
+      this.animation.commitStyles();
+      this.onTransitionEnd();
+      this.sharedElementTransitionLayer.current?.ref.current?.close();
+      this.animation.effect = null;
+    });
+
+    return this.animation;
+  }
+
+  render() {
+    return (
+      <ScreenTransitionLayerContext.Provider value={this}>
+        <SharedElementTransitionLayer
+          ref={this.sharedElementTransitionLayer}
+          navigation={this.props.navigation}
+          direction={this.animation.playbackRate > 0 ? 'forwards' : 'backwards'}
+        />
+        <div
+          className="screen-transition-layer"
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'grid',
+            contain: 'layout',
+            isolation: 'isolate',
+            '--motion-progress': this.state.progress,
+          } as React.CSSProperties}
+        >
+          <MotionContext.Provider value={this.state.progress}>
+            {this.props.children}
+          </MotionContext.Provider>
+        </div>
+      </ScreenTransitionLayerContext.Provider>
+    );
+  }
 }