@applicaster/zapp-react-native-ui-components 16.0.0-alpha.9225550512 → 16.0.0-alpha.9338540010

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -14,95 +14,125 @@ exports[`componentsMap renders renders components map correctly 1`] = `
   >
     <RCTScrollView
       ListFooterComponent={
-        <Memo(RiverFooterComponent)
-          flatListHeight={null}
-          loadingState={
-            BehaviorSubject {
-              "_value": {
-                "done": false,
-                "index": -1,
-                "waitForAllComponents": false,
-              },
-              "closed": false,
-              "currentObservers": null,
-              "hasError": false,
-              "isStopped": false,
-              "observers": [
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
+        <React.Fragment>
+          <Memo(RiverFooterComponent)
+            flatListHeight={null}
+            loadingState={
+              BehaviorSubject {
+                "_value": {
+                  "done": false,
+                  "index": -1,
+                  "waitForAllComponents": false,
                 },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                "closed": false,
+                "currentObservers": null,
+                "hasError": false,
+                "isStopped": false,
+                "observers": [
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                    "initialTeardown": undefined,
+                    "isStopped": false,
+                  },
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-              ],
-              "thrownError": null,
+                ],
+                "thrownError": null,
+              }
+            }
+          />
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
+        </React.Fragment>
+      }
+      ListHeaderComponent={
+        <View
+          edges={
+            {
+              "top": "off",
+            }
+          }
+          mode="margin"
+          style={
+            {
+              "height": 0.5,
+              "paddingTop": undefined,
             }
           }
         />
       }
       contentContainerStyle={
         {
-          "paddingBottom": undefined,
           "paddingLeft": undefined,
           "paddingRight": undefined,
-          "paddingTop": undefined,
         }
       }
       data={
@@ -156,6 +186,25 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       windowSize={12}
     >
       <View>
+        <View
+          collapsable={false}
+          onLayout={[Function]}
+        >
+          <View
+            edges={
+              {
+                "top": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingTop": undefined,
+              }
+            }
+          />
+        </View>
         <View
           onFocusCapture={[Function]}
           onLayout={[Function]}
@@ -164,6 +213,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             onLayout={[Function]}
             style={{}}
+            testID="component-A1"
           >
             <View />
           </View>
@@ -176,6 +226,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             onLayout={[Function]}
             style={{}}
+            testID="component-A2"
           />
         </View>
         <View
@@ -200,6 +251,20 @@ exports[`componentsMap renders renders components map correctly 1`] = `
               size="large"
             />
           </View>
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
         </View>
       </View>
     </RCTScrollView>

package/Components/River/__tests__/componentsMap.test.js

@@ -11,9 +11,14 @@ jest.mock(
   () => () => null
 );
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 50 }),
-}));
+jest.mock("react-native-safe-area-context", () => {
+  const { View } = jest.requireActual("react-native");
+
+  return {
+    SafeAreaView: View,
+    useSafeAreaInsets: () => ({ top: 50 }),
+  };
+});
 
 jest.mock("react-native", () => {
   const RN = jest.genMockFromModule("react-native");

package/Components/River/__tests__/resultCallback.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { RiverComponent } from "../River";
+
+const mockResolverProps: any[] = [];
+
+jest.mock("../../ScreenResolver", () => ({
+  ScreenResolver: (props: any) => {
+    mockResolverProps.push(props);
+
+    return null;
+  },
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const baseProps = {
+  river,
+  screenData: {},
+  groupId: "group-1",
+  scrollViewExtraProps: {},
+  setIsScreenWrappedInContainer: jest.fn(),
+  screenContext: { navBar: { setTitle: jest.fn(), setSummary: jest.fn() } },
+} as any;
+
+const resolved = () => mockResolverProps[mockResolverProps.length - 1];
+
+describe("RiverComponent", () => {
+  beforeEach(() => {
+    mockResolverProps.length = 0;
+  });
+
+  it("forwards resultCallback to the screen it resolves", () => {
+    const resultCallback = jest.fn();
+
+    render(<RiverComponent {...baseProps} resultCallback={resultCallback} />);
+
+    expect(resolved().resultCallback).toBe(resultCallback);
+  });
+
+  it("resolves the screen without a resultCallback when none was given", () => {
+    render(<RiverComponent {...baseProps} />);
+
+    expect(resolved().resultCallback).toBeUndefined();
+  });
+});

package/Components/Screen/__tests__/Screen.test.tsx

@@ -141,6 +141,10 @@ const {
   useGetScreenOrientation,
 } = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
 
+const {
+  useIsScreenActive,
+} = require("@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive");
+
 const navigator = {};
 const navBarProps = { nav_items: [] };
 const screenData = {};
@@ -195,4 +199,24 @@ describe("<Screen Component />", () => {
       expect(toJSON()).toMatchSnapshot();
     });
   });
+
+  describe("when the screen is inactive", () => {
+    afterEach(() => {
+      useIsScreenActive.mockReturnValue(true);
+    });
+
+    it("hides the screen from VoiceOver (iOS) and TalkBack (Android)", () => {
+      useIsScreenActive.mockReturnValue(false);
+
+      const { UNSAFE_root } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
+      expect(UNSAFE_root.findByType(View).props).toMatchObject({
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+      });
+    });
+  });
 });

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   }
 >
   <View
+    accessibilityElementsHidden={false}
     importantForAccessibility="yes"
     style={
       {
@@ -58,6 +59,7 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   }
 >
   <View
+    accessibilityElementsHidden={false}
     importantForAccessibility="yes"
     style={
       {

package/Components/Screen/index.tsx

@@ -121,6 +121,11 @@ export function Screen(_props: Props) {
       ref={ref}
       style={style}
       importantForAccessibility={!isActive ? "no-hide-descendants" : "yes"}
+      // `importantForAccessibility` only affects Android (see RN docs).
+      // Without the iOS counterpart below, VoiceOver keeps traversing and
+      // focusing elements on an inactive/underlying screen (e.g. Albums In
+      // Order) even after a new screen (e.g. an Album) is pushed on top.
+      accessibilityElementsHidden={!isActive}
     >
       {isReady ? (
         <>

package/Components/Screen/navigationHandler.ts

@@ -18,10 +18,9 @@ function shouldShowNavigation(route, screenData) {
     return false;
   }
 
-  if (
-    screenData.type === "qb_search_screen" ||
-    screenData?.targetScreen?.type === "qb_search_screen"
-  ) {
+  const currentScreenData = screenData?.targetScreen || screenData;
+
+  if (currentScreenData.type === "qb_search_screen") {
     return false;
   }
 
@@ -31,10 +30,11 @@ function shouldShowNavigation(route, screenData) {
     return hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true;
   }
 
-  if (
-    screenData?.general?.allow_screen_plugin_presentation ||
-    screenData?.targetScreen?.general?.allow_screen_plugin_presentation
-  ) {
+  if (currentScreenData?.general?.hide_menu) {
+    return false;
+  }
+
+  if (currentScreenData?.general?.allow_screen_plugin_presentation) {
     return false;
   }
 

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -42,9 +42,25 @@ export class ScreenRevealManager {
   private subject$ = new Subject<void>();
   private subscription: Subscription;
 
-  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+  /**
+   * @param initialNumberToLoad how many components to wait for before revealing
+   * the screen. Staggering exists so a screen full of network-backed components
+   * does not load them all at once. A caller that has nothing to stagger - see
+   * `disableIncrementalLoading` on the HOC - passes the full count here so the
+   * reveal waits for exactly what gets rendered. Omitted, the count is derived
+   * from the components themselves.
+   */
+  constructor(
+    componentsToRender: ZappUIComponent[],
+    callback: Callback,
+    initialNumberToLoad?: number
+  ) {
     this.numberOfComponentsWaitToLoadBeforePresent =
-      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+      initialNumberToLoad == null
+        ? getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender)
+        : // Clamped like the computed path: waiting for components that do not
+          // exist would hold the screen behind its overlay until the timeout.
+          Math.min(initialNumberToLoad, componentsToRender.length);
 
     this.renderingState = makeListOf<ComponentLoadingState>(
       COMPONENT_LOADING_STATE.UNKNOWN,

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -22,6 +22,42 @@ import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
+describe("ScreenRevealManager explicit component count", () => {
+  beforeEach(() => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
+
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+
+    (withTimeout$ as jest.Mock).mockReturnValue(new Subject());
+  });
+
+  it("waits for the number of components it is given, not the computed default", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 6);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(6);
+  });
+
+  it("never waits for more components than it was handed", () => {
+    const components = Array(3).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 10);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+
+  it("falls back to the computed default when given no explicit count", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn());
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+});
+
 describe("ScreenRevealManager", () => {
   let mockCallback: jest.Mock;
   let timeout$: Subject<void>;

package/Components/ScreenRevealManager/__tests__/withScreenRevealManager.test.tsx

@@ -9,6 +9,12 @@ import {
   TIMEOUT,
 } from "../withScreenRevealManager";
 
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({ app_background_color: "#000000" }),
+}));
+
+jest.mock("../Overlay", () => ({ Overlay: () => null }));
+
 // jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
 
 const MockComponent = ({
@@ -37,6 +43,56 @@ const MockComponent = ({
 
 const WrappedComponent = withScreenRevealManager(MockComponent);
 
+describe("withScreenRevealManager disableIncrementalLoading", () => {
+  const components = (count: number) =>
+    Array(count).fill({ component_type: "grid-qb" });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("asks for every component at once when incremental loading is disabled", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={components(6)}
+        disableIncrementalLoading
+      />
+    );
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      6
+    );
+  });
+
+  it("still tracks the component count after it changes", () => {
+    const { rerender } = render(
+      <WrappedComponent
+        componentsToRender={components(6)}
+        disableIncrementalLoading
+      />
+    );
+
+    rerender(
+      <WrappedComponent
+        componentsToRender={components(9)}
+        disableIncrementalLoading
+      />
+    );
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      9
+    );
+  });
+
+  it("loads incrementally when the flag is not set", () => {
+    render(<WrappedComponent componentsToRender={components(6)} />);
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      3
+    );
+  });
+});
+
 describe.skip("withScreenRevealManager", () => {
   beforeEach(() => {
     jest.clearAllMocks();

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/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({