@applicaster/zapp-react-native-ui-components 16.0.0-rc.12 → 16.0.0-rc.120

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -21,11 +21,23 @@ export const SHOWN = 1; // opacity = 1
 type Props = {
   componentsToRender: ZappUIComponent[];
   backgroundColor?: string;
+  /**
+   * Renders every component at once instead of revealing them a few at a time.
+   *
+   * For a screen that builds its own components and holds all of them already -
+   * a form, say - staggering buys nothing and costs: each rebuild of the list
+   * tears it back down to the first few and lets the rest crawl in again.
+   *
+   * This is a flag rather than a count on purpose. A count would have to be
+   * re-read whenever the number of components changes, while "do not stagger"
+   * stays true whatever the screen ends up holding.
+   */
+  disableIncrementalLoading?: boolean;
 };
 
 export const withScreenRevealManager = (Component) => {
   return function WithScreenRevealManager(props: Props) {
-    const { componentsToRender } = props;
+    const { componentsToRender, disableIncrementalLoading } = props;
 
     const [isContentReadyToBeShown, setIsContentReadyToBeShown] =
       React.useState(false);
@@ -42,7 +54,8 @@ export const withScreenRevealManager = (Component) => {
       () =>
         new ScreenRevealManager(
           componentsToRender,
-          handleSetIsContentReadyToBeShown
+          handleSetIsContentReadyToBeShown,
+          disableIncrementalLoading ? componentsToRender.length : undefined
         )
     );
 
@@ -72,7 +85,7 @@ export const withScreenRevealManager = (Component) => {
 
     if (isFirstComponentScreenPicker(componentsToRender)) {
       // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
-      return <Component {...props} />;
+      return <Component {...props} initialNumberToLoad={1} />;
     }
 
     return (
@@ -80,7 +93,11 @@ export const withScreenRevealManager = (Component) => {
         <Component
           {...props}
           initialNumberToLoad={
-            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+            // Recomputed on every render, so the count follows the components
+            // even though the manager settled its own expectation at mount.
+            disableIncrementalLoading
+              ? componentsToRender.length
+              : managerRef.current.numberOfComponentsWaitToLoadBeforePresent
           }
           onLoadFinishedFromScreenRevealManager={
             managerRef.current.onLoadFinished

package/Components/TopCutoffOverlay/index.tsx

@@ -7,7 +7,7 @@ import { useMarginTop } from "./hooks";
 
 interface IProps {
   targetScreenId?: string;
-  children?: React.ReactNode;
+  children: React.ReactElement | null;
   applyTopCutoff?: boolean;
 }
 
@@ -21,7 +21,7 @@ export const TopCutoffOverlay: React.FC<IProps> = ({
   targetScreenId,
   children,
   applyTopCutoff = true,
-}: IProps) => {
+}) => {
   const cutoffHeight = useMarginTop(targetScreenId);
 
   const { backgroundColor: screenBackgroundColor } =

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
+   * @param {number} [stepsBack] number of steps back, used by the back action only
    */
   stateForAction({ to, scenes }, action, stepsBack) {
     let rootIndex = to.index;

package/Components/Transitioner/Scene.tsx

@@ -17,13 +17,14 @@ 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, isNil, tail, take, update } from "ramda";
+import { append, compose, identity, tail, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -10,6 +10,7 @@ import {
   shouldSkipAnimationForPreviousWebViewScene,
 } from "./utils";
 import { v4 as uuid_v4 } from "uuid";
+import { isScreenActiveForRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
 export const NAV_ACTION_PUSH = "PUSH";
 
@@ -17,11 +18,23 @@ export const NAV_ACTION_REPLACE = "REPLACE";
 
 export const NAV_ACTION_BACK = "POP";
 
-type SceneProps = {
-  children: React.ReactNode;
-  overlayStyle: any;
-  style: any;
-  animating: boolean;
+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;
 };
 
 /**
@@ -30,7 +43,7 @@ type SceneProps = {
  * @param {Object} children
  * @returns { children: Object, key: string }
  */
-function prepareScene(children) {
+function prepareScene(children: SceneChild): TransitionerScene {
   return {
     children,
     key: children.props.pathname,
@@ -44,22 +57,26 @@ function prepareScene(children) {
  * @param {any} props Component's props
  * @param {any} state Component's state
  */
-function scenesForBackTransition(props: SceneProps, { scenes }) {
+function scenesForBackTransition(
+  props: Pick<Props, "children">,
+  { scenes }: Pick<State, "scenes">
+): TransitionerScene[] {
   return scenes.length > 1
     ? identity(scenes)
     : [prepareScene(props.children), scenes[0]];
 }
 
-const isModalClosed = (navigator) => {
-  return !!isNil(navigator?.modalData);
-};
-
 type Props = {
   transitionConfig: any;
-  children: React.ReactNode;
+  isRTL?: boolean;
+  children: SceneChild;
   navigator: {
     previousAction: string;
     currentRoute: string;
+    videoModalState?: {
+      visible?: boolean;
+      mode?: string;
+    };
     screenData: {
       [key: string]: any;
     };
@@ -77,13 +94,12 @@ type Props = {
 };
 
 type State = {
-  animatedValue: any;
   animating: boolean;
   duration: number;
   easing: any;
   from: any;
   to: any;
-  scenes: any;
+  scenes: TransitionerScene[];
 };
 
 const styles = {
@@ -91,11 +107,18 @@ 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(),
@@ -112,29 +135,36 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
    * and trigger push animation with callbacks.
    */
   pushTransitionStart() {
+    const transitionId = ++this.transitionId;
+
     this.setState(
       {
-        scenes: append(prepareScene(this.props.children), this.state.scenes),
+        // 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),
+        ],
         ...this.animationManager.stateForAction(this.state, NAV_ACTION_PUSH),
       },
       () => {
-        this.animationManager.animate(this.state, this.pushTransitionEnd);
+        this.animationManager.animate(this.state, () =>
+          this.pushTransitionEnd(transitionId)
+        );
       }
     );
   }
 
   /**
    * Trigger back animation.
-   * The last scene in the array is removed in the "backTransitionEnd" callback,
+   * The scenes after the target one are removed in the "backTransitionEnd" callback,
    * only after the animation is complete.
    */
-  backTransitionStart() {
-    const previousRoute = this.props.navigator?.currentRoute;
+  backTransitionStart(previousRoute: string) {
+    const transitionId = ++this.transitionId;
     const currentRoute = this.props.navigator?.currentRoute;
 
     const diffLengthRoutes =
-      (previousRoute?.match(/river\//g) || []).length -
-      (currentRoute?.match(/river\//g) || []).length;
+      countRiverSegments(previousRoute) - countRiverSegments(currentRoute);
 
     const stepsBack =
       diffLengthRoutes && diffLengthRoutes > 0 ? diffLengthRoutes : 1;
@@ -150,30 +180,32 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       },
       () => {
         this.animationManager.animate(this.state, () =>
-          this.backTransitionEnd(stepsBack)
+          this.backTransitionEnd(transitionId)
         );
       }
     );
   }
 
-  shouldSkipAnimationForRoute(route) {
+  shouldSkipAnimationForRoute(route: string) {
     // We are skipping animations for some routes, likes hooks & the player mainly
 
     return route.includes("/playable") || route.includes("/hook");
   }
 
-  shouldResetStateForRoute(route) {
+  shouldResetStateForRoute(route: string) {
     // We are resetting the transitioner state for root routes
 
-    return (route?.match(/river\//g) || []).length === 1;
+    return countRiverSegments(route) === 1;
   }
 
-  transitionWithoutAnimation(resetState) {
-    const { scenes } = this.state;
+  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);
     const newScene = prepareScene(this.props.children);
     const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
 
-    let newState;
+    let newState: Pick<State, "scenes"> | Pick<State, "scenes" | "to">;
 
     if (resetState) {
       newState = {
@@ -241,7 +273,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           break;
 
         case NAV_ACTION_BACK: {
-          this.backTransitionStart();
+          this.backTransitionStart(previousRoute);
           break;
         }
 
@@ -263,28 +295,37 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     }
   }
 
-  // Sets state.animating to false
-  pushTransitionEnd() {
+  // Sets state.animating to false,
+  // unless a newer transition has started since this one
+  pushTransitionEnd(transitionId: number) {
+    if (transitionId !== this.transitionId) return;
+
     this.setState({
       animating: false,
     });
   }
 
   // Sets state.animating to false
-  // and remove last scene from scenes stack
-  backTransitionEnd(stepsBack) {
-    this.setState({
+  // 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 }) => ({
       animating: false,
-      scenes: take(this.state.scenes.length - stepsBack, this.state.scenes),
-    });
+      scenes: scenes.slice(0, to.index + 1),
+    }));
   }
 
   // On initial state, both "to" and "from" point to a single scene
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle } = this.props;
-    const screenData = this.props.children.props.screenData;
+    const { contentStyle, navigator, children } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
+    const screenData = children.props.screenData;
     const pathname = scenes[to.index].key;
 
     return (
@@ -293,7 +334,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
-            isActive={pathname === this.props.navigator.currentRoute}
+            isActive={isScreenActiveForRoute(
+              pathname,
+              currentRoute,
+              videoModalState
+            )}
             contentStyle={contentStyle}
             key={scenes[to.index].key}
             screenUniqueId={scenes[to.index].screenUniqueId}
@@ -311,16 +356,19 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // Looks redundant, but when written like this
   // we do not need to pass or generate keys.
   renderScenes({ scenes, from, to }) {
-    const { contentStyle } = this.props;
+    const { contentStyle, navigator } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
 
     const fromScene = scenes[from.index] && (
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={
-          scenes[from.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[from.index].key,
+          currentRoute,
+          videoModalState
+        )}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -336,10 +384,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={
-          scenes[to.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[to.index].key,
+          currentRoute,
+          videoModalState
+        )}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}