@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1054344748 → 16.0.0-alpha.1108851646

package/Components/Transitioner/AnimationManager.js

@@ -66,7 +66,7 @@ export class AnimationManager {
    *
    * @param {object} to contains style to animate and scenes index
    * @param {string} action push|back
-   * @param {number} [stepsBack] number of steps back, used by the back action only
+   * @param {number} stepsBack number of steps back
    */
   stateForAction({ to, scenes }, action, stepsBack) {
     let rootIndex = to.index;

package/Components/Transitioner/Scene.tsx

@@ -17,14 +17,13 @@ const fullWidthDimensions = {
 type Props = {
   children: any;
   style: any;
-  pointerEvents?: ViewProps["pointerEvents"];
-  overlayStyle?: ViewStyle;
-  animating?: boolean;
+  pointerEvents: ViewProps["pointerEvents"];
+  overlayStyle: ViewStyle;
+  animating: boolean;
   contentStyle: ViewStyle;
   pathname: string;
   isActive: boolean;
   screenData: NavigationScreenData;
-  screenUniqueId?: string;
 };
 
 export function CurrentScreenContextProvider({

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { append, compose, identity, tail, update } from "ramda";
+import { append, compose, identity, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -18,23 +18,11 @@ export const NAV_ACTION_REPLACE = "REPLACE";
 
 export const NAV_ACTION_BACK = "POP";
 
-const RIVER_SEGMENT_REGEX = /river\//g;
-
-// Number of "river/" segments in the route, i.e. its depth in the navigation stack
-function countRiverSegments(route?: string): number {
-  return (route?.match(RIVER_SEGMENT_REGEX) || []).length;
-}
-
-// The screen element rendered for the current route
-type SceneChild = React.ReactElement<{
-  pathname: string;
-  screenData: NavigationScreenData;
-}>;
-
-type TransitionerScene = {
-  children: SceneChild;
-  key: string;
-  screenUniqueId: string;
+type SceneProps = {
+  children: React.ReactNode;
+  overlayStyle: any;
+  style: any;
+  animating: boolean;
 };
 
 /**
@@ -43,7 +31,7 @@ type TransitionerScene = {
  * @param {Object} children
  * @returns { children: Object, key: string }
  */
-function prepareScene(children: SceneChild): TransitionerScene {
+function prepareScene(children) {
   return {
     children,
     key: children.props.pathname,
@@ -57,10 +45,7 @@ function prepareScene(children: SceneChild): TransitionerScene {
  * @param {any} props Component's props
  * @param {any} state Component's state
  */
-function scenesForBackTransition(
-  props: Pick<Props, "children">,
-  { scenes }: Pick<State, "scenes">
-): TransitionerScene[] {
+function scenesForBackTransition(props: SceneProps, { scenes }) {
   return scenes.length > 1
     ? identity(scenes)
     : [prepareScene(props.children), scenes[0]];
@@ -68,8 +53,7 @@ function scenesForBackTransition(
 
 type Props = {
   transitionConfig: any;
-  isRTL?: boolean;
-  children: SceneChild;
+  children: React.ReactNode;
   navigator: {
     previousAction: string;
     currentRoute: string;
@@ -94,12 +78,13 @@ type Props = {
 };
 
 type State = {
+  animatedValue: any;
   animating: boolean;
   duration: number;
   easing: any;
   from: any;
   to: any;
-  scenes: TransitionerScene[];
+  scenes: any;
 };
 
 const styles = {
@@ -107,18 +92,11 @@ const styles = {
 } as const;
 
 export class TransitionerComponent extends React.PureComponent<Props, State> {
-  private animationManager: AnimationManager;
-
-  private transitionId: number;
-
   constructor(props: Props) {
     super(props);
 
     this.animationManager = new AnimationManager(props);
 
-    // Bumped by every animated transition; end callbacks of older ones are ignored
-    this.transitionId = 0;
-
     this.state = {
       scenes: [prepareScene(props.children)], // starting with index: 0
       ...this.animationManager.initialState(),
@@ -135,36 +113,28 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
    * and trigger push animation with callbacks.
    */
   pushTransitionStart() {
-    const transitionId = ++this.transitionId;
-
     this.setState(
       {
-        // Append right after the visible scene: stateForAction(PUSH) animates to.index + 1
-        scenes: [
-          ...this.state.scenes.slice(0, this.state.to.index + 1),
-          prepareScene(this.props.children),
-        ],
+        scenes: append(prepareScene(this.props.children), this.state.scenes),
         ...this.animationManager.stateForAction(this.state, NAV_ACTION_PUSH),
       },
       () => {
-        this.animationManager.animate(this.state, () =>
-          this.pushTransitionEnd(transitionId)
-        );
+        this.animationManager.animate(this.state, this.pushTransitionEnd);
       }
     );
   }
 
   /**
    * Trigger back animation.
-   * The scenes after the target one are removed in the "backTransitionEnd" callback,
+   * The last scene in the array is removed in the "backTransitionEnd" callback,
    * only after the animation is complete.
    */
   backTransitionStart(previousRoute: string) {
-    const transitionId = ++this.transitionId;
     const currentRoute = this.props.navigator?.currentRoute;
 
     const diffLengthRoutes =
-      countRiverSegments(previousRoute) - countRiverSegments(currentRoute);
+      (previousRoute?.match(/river\//g) || []).length -
+      (currentRoute?.match(/river\//g) || []).length;
 
     const stepsBack =
       diffLengthRoutes && diffLengthRoutes > 0 ? diffLengthRoutes : 1;
@@ -180,32 +150,30 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       },
       () => {
         this.animationManager.animate(this.state, () =>
-          this.backTransitionEnd(transitionId)
+          this.backTransitionEnd(stepsBack)
         );
       }
     );
   }
 
-  shouldSkipAnimationForRoute(route: string) {
+  shouldSkipAnimationForRoute(route) {
     // We are skipping animations for some routes, likes hooks & the player mainly
 
     return route.includes("/playable") || route.includes("/hook");
   }
 
-  shouldResetStateForRoute(route: string) {
+  shouldResetStateForRoute(route) {
     // We are resetting the transitioner state for root routes
 
-    return countRiverSegments(route) === 1;
+    return (route?.match(/river\//g) || []).length === 1;
   }
 
-  transitionWithoutAnimation(resetState?: boolean) {
-    // Scenes after the visible one are only leaving (back animation in flight),
-    // so the new scene replaces the one being backed to
-    const scenes = this.state.scenes.slice(0, this.state.to.index + 1);
+  transitionWithoutAnimation(resetState) {
+    const { scenes } = this.state;
     const newScene = prepareScene(this.props.children);
     const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
 
-    let newState: Pick<State, "scenes"> | Pick<State, "scenes" | "to">;
+    let newState;
 
     if (resetState) {
       newState = {
@@ -295,27 +263,20 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     }
   }
 
-  // Sets state.animating to false,
-  // unless a newer transition has started since this one
-  pushTransitionEnd(transitionId: number) {
-    if (transitionId !== this.transitionId) return;
-
+  // Sets state.animating to false
+  pushTransitionEnd() {
     this.setState({
       animating: false,
     });
   }
 
   // Sets state.animating to false
-  // and drops every scene after the target one. Reads the latest state,
-  // so it's correct however many backs were merged into this animation.
-  // Ignored if a newer transition has started since this one
-  backTransitionEnd(transitionId: number) {
-    if (transitionId !== this.transitionId) return;
-
-    this.setState(({ scenes, to }) => ({
+  // and remove last scene from scenes stack
+  backTransitionEnd(stepsBack) {
+    this.setState({
       animating: false,
-      scenes: scenes.slice(0, to.index + 1),
-    }));
+      scenes: take(this.state.scenes.length - stepsBack, this.state.scenes),
+    });
   }
 
   // On initial state, both "to" and "from" point to a single scene

package/Components/Transitioner/__tests__/transitioner.test.js

@@ -1,12 +1,10 @@
 import React from "react";
-import { Animated, Text, View } from "react-native";
-import { v4 as uuidV4 } from "uuid";
+import { Text, View } from "react-native";
 
 import { AnimationManager } from "../AnimationManager";
 import {
   NAV_ACTION_BACK,
   NAV_ACTION_PUSH,
-  NAV_ACTION_REPLACE,
   TransitionerComponent,
 } from "../Transitioner";
 import { act, render } from "@testing-library/react-native";
@@ -68,26 +66,6 @@ const sceneFor = (route) => (
   </View>
 );
 
-const root = "/river/root";
-const child = `${root}/river/child`;
-const grandchild = `${child}/river/grandchild`;
-
-const propsFor = (route, previousAction, children = sceneFor(route)) => ({
-  navigator: {
-    previousAction,
-    currentRoute: route,
-    screenData: {},
-  },
-  transitionConfig: sceneTransitionConfig,
-  layoutData: {
-    isTablet: false,
-    isTabletPortrait: false,
-  },
-  children,
-});
-
-const sceneKeys = (ref) => ref.current.state.scenes.map((scene) => scene.key);
-
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
     const wrapper = render(
@@ -105,12 +83,26 @@ describe("<TransitionerComponent />", () => {
       .mockImplementation((_, done) => done());
 
     const ref = React.createRef();
+    const root = "/river/root";
+    const child = `${root}/river/child`;
+    const grandchild = `${child}/river/grandchild`;
+
+    const propsFor = (route, previousAction) => ({
+      navigator: {
+        previousAction,
+        currentRoute: route,
+        screenData: {},
+      },
+      transitionConfig: sceneTransitionConfig,
+      layoutData: {
+        isTablet: false,
+        isTabletPortrait: false,
+      },
+      children: sceneFor(route),
+    });
 
     const { rerender } = render(
-      <TransitionerComponent
-        ref={ref}
-        {...propsFor(root, NAV_ACTION_REPLACE)}
-      />
+      <TransitionerComponent ref={ref} {...propsFor(root, "REPLACE")} />
     );
 
     act(() => {
@@ -137,286 +129,6 @@ describe("<TransitionerComponent />", () => {
       );
     });
 
-    expect(sceneKeys(ref)).toEqual([root]);
-  });
-
-  describe("with interruptible animations", () => {
-    // End callback of the animation that is currently "running"
-    let runningAnimationEnd = null;
-
-    const finishAnimation = () => {
-      act(() => {
-        const done = runningAnimationEnd;
-        runningAnimationEnd = null;
-        done?.();
-      });
-    };
-
-    const mountTransitioner = ({
-      initialRoute = root,
-      renderScene = sceneFor,
-    } = {}) => {
-      const ref = React.createRef();
-
-      const transitioner = (route, action) => (
-        <TransitionerComponent
-          ref={ref}
-          {...propsFor(route, action, renderScene(route))}
-        />
-      );
-
-      const { rerender } = render(
-        transitioner(initialRoute, NAV_ACTION_REPLACE)
-      );
-
-      const navigate = (route, action) => {
-        act(() => {
-          rerender(transitioner(route, action));
-        });
-      };
-
-      return { ref, navigate };
-    };
-
-    beforeEach(() => {
-      let sceneCount = 0;
-      uuidV4.mockImplementation(() => `scene-${++sceneCount}`);
-
-      jest
-        .spyOn(AnimationManager.prototype, "animate")
-        .mockImplementation((_, done) => {
-          runningAnimationEnd = done;
-        });
-
-      const setValue = Animated.Value.prototype.setValue;
-
-      // RN 0.77: setValue() stops the running animation, which calls
-      // its end callback synchronously with { finished: false }
-      jest
-        .spyOn(Animated.Value.prototype, "setValue")
-        .mockImplementation(function (value) {
-          const interrupted = runningAnimationEnd;
-          runningAnimationEnd = null;
-          interrupted?.();
-
-          return setValue.call(this, value);
-        });
-    });
-
-    afterEach(() => {
-      runningAnimationEnd = null;
-      jest.restoreAllMocks();
-      uuidV4.mockReset();
-    });
-
-    it("drops interrupted scenes when going back twice during a back animation", () => {
-      const { ref, navigate } = mountTransitioner();
-
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-      navigate(grandchild, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      navigate(child, NAV_ACTION_BACK);
-      navigate(root, NAV_ACTION_BACK);
-
-      expect(ref.current.state.animating).toBe(true);
-
-      finishAnimation();
-
-      expect(sceneKeys(ref)).toEqual([root]);
-      expect(ref.current.state.animating).toBe(false);
-    });
-
-    it("remounts the screen when revisiting it after a quick double back", () => {
-      const mounts = {};
-
-      const MountProbe = ({ pathname }) => {
-        React.useEffect(() => {
-          mounts[pathname] = (mounts[pathname] || 0) + 1;
-        }, [pathname]);
-
-        return <Text>{pathname}</Text>;
-      };
-
-      const { ref, navigate } = mountTransitioner({
-        renderScene: (route) => <MountProbe pathname={route} />,
-      });
-
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      const originalChildId = ref.current.state.scenes[1].screenUniqueId;
-
-      navigate(grandchild, NAV_ACTION_PUSH);
-      finishAnimation();
-      navigate(child, NAV_ACTION_BACK);
-      navigate(root, NAV_ACTION_BACK);
-      finishAnimation();
-
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      const { scenes, to } = ref.current.state;
-
-      expect(scenes).toHaveLength(2);
-      expect(to.index).toBe(1);
-      expect(scenes[1].screenUniqueId).not.toBe(originalChildId);
-      expect(mounts[child]).toBe(2);
-    });
-
-    it("keeps a single scene when going back from the first scene", () => {
-      const { ref, navigate } = mountTransitioner({ initialRoute: child });
-
-      navigate(root, NAV_ACTION_BACK);
-      finishAnimation();
-
-      expect(sceneKeys(ref)).toEqual([root]);
-      expect(ref.current.state.to.index).toBe(0);
-      expect(ref.current.state.animating).toBe(false);
-    });
-
-    it("pushes a fresh scene after a completed single back", () => {
-      const { ref, navigate } = mountTransitioner();
-
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      const originalChildId = ref.current.state.scenes[1].screenUniqueId;
-
-      navigate(root, NAV_ACTION_BACK);
-      finishAnimation();
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      const { scenes, to } = ref.current.state;
-
-      expect(sceneKeys(ref)).toEqual([root, child]);
-      expect(to.index).toBe(1);
-      expect(scenes[1].screenUniqueId).not.toBe(originalChildId);
-    });
-
-    it("ignores the end of a back animation that a newer back superseded", () => {
-      const { ref, navigate } = mountTransitioner();
-
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-      navigate(grandchild, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      navigate(child, NAV_ACTION_BACK);
-
-      const supersededEnd = runningAnimationEnd;
-
-      // Deliver the interrupted animation's end late, after the newer one started
-      Animated.Value.prototype.setValue.mockImplementation(() => {});
-
-      navigate(root, NAV_ACTION_BACK);
-
-      act(() => {
-        supersededEnd();
-      });
-
-      expect(ref.current.state.animating).toBe(true);
-      expect(sceneKeys(ref)).toEqual([root, child, grandchild]);
-
-      finishAnimation();
-
-      expect(sceneKeys(ref)).toEqual([root]);
-      expect(ref.current.state.animating).toBe(false);
-    });
-
-    it("drops the pushed scene when going back before its push animation ends", () => {
-      const { ref, navigate } = mountTransitioner();
-
-      navigate(child, NAV_ACTION_PUSH);
-      navigate(root, NAV_ACTION_BACK);
-
-      expect(ref.current.state.animating).toBe(true);
-
-      finishAnimation();
-
-      expect(sceneKeys(ref)).toEqual([root]);
-      expect(ref.current.state.animating).toBe(false);
-    });
-
-    it("pushes right after the visible scene even when stale scenes are left behind", () => {
-      const { ref, navigate } = mountTransitioner();
-
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      // Leftover past to.index, as some other path could leave behind
-      act(() => {
-        ref.current.setState(({ scenes }) => ({
-          scenes: [
-            ...scenes,
-            {
-              ...scenes[1],
-              key: `${root}/river/stale`,
-              screenUniqueId: "stale",
-            },
-          ],
-        }));
-      });
-
-      navigate(grandchild, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      const { scenes, to } = ref.current.state;
-
-      expect(sceneKeys(ref)).toEqual([root, child, grandchild]);
-      expect(scenes[to.index].key).toBe(grandchild);
-    });
-
-    it("shows the replaced screen when going home during a back animation", () => {
-      const home = "/river/home";
-      const { ref, navigate } = mountTransitioner();
-
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      navigate(root, NAV_ACTION_BACK);
-      navigate(home, NAV_ACTION_REPLACE);
-
-      const { scenes, to } = ref.current.state;
-
-      expect(scenes[to.index].key).toBe(home);
-
-      finishAnimation();
-
-      expect(sceneKeys(ref)).toEqual([home]);
-      expect(ref.current.state.animating).toBe(false);
-    });
-
-    it("shows the pushed screen when pushing during a back animation", () => {
-      const sibling = `${root}/river/sibling`;
-      const { ref, navigate } = mountTransitioner();
-
-      navigate(child, NAV_ACTION_PUSH);
-      finishAnimation();
-
-      navigate(root, NAV_ACTION_BACK);
-      navigate(sibling, NAV_ACTION_PUSH);
-
-      const { scenes, to } = ref.current.state;
-
-      expect(scenes[to.index].key).toBe(sibling);
-
-      finishAnimation();
-
-      expect(sceneKeys(ref)).not.toContain(child);
-      expect(ref.current.state.animating).toBe(false);
-    });
-
-    it("keeps both scenes when pushing during a push animation", () => {
-      const { ref, navigate } = mountTransitioner();
-
-      navigate(child, NAV_ACTION_PUSH);
-      navigate(grandchild, NAV_ACTION_PUSH);
-
-      expect(sceneKeys(ref)).toEqual([child, grandchild]);
-      expect(ref.current.state.to.index).toBe(1);
-    });
+    expect(ref.current.state.scenes.map((scene) => scene.key)).toEqual([root]);
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-alpha.1054344748",
+  "version": "16.0.0-alpha.1108851646",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.1054344748",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1054344748",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1054344748",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1054344748",
+    "@applicaster/applicaster-types": "16.0.0-alpha.1108851646",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1108851646",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1108851646",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1108851646",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",