@applicaster/zapp-react-native-ui-components 16.0.0-rc.77 → 16.0.0-rc.78

package/Components/ModalComponent/SortableList.web.tsx

@@ -1,37 +1,5 @@
 import React from "react";
-import { Text, View, ViewStyle, ScrollView } from "react-native";
-
-const DEFAULT_HEADERS: any[] = [];
-const DEFAULT_SORTABLE_DATA: any[] = [];
-
-const renderHeaderComponent = (component: any) => {
-  if (!component) return null;
-  if (React.isValidElement(component)) return component;
-
-  if (typeof component === "function") {
-    const HeaderComponent = component;
-
-    return <HeaderComponent />;
-  }
-
-  return null;
-};
-
-const SortableListHeader = ({
-  title,
-  style,
-}: {
-  title?: string;
-  style?: ViewStyle;
-}) => {
-  const displayTitle = typeof title === "string" ? title : String(title ?? "");
-
-  return (
-    <View style={style}>
-      {displayTitle ? <Text>{displayTitle}</Text> : null}
-    </View>
-  );
-};
+import type { ViewStyle } from "react-native";
 
 export type SortableListProps = {
   scrollViewStyle?: ViewStyle;
@@ -63,40 +31,4 @@ export type SortableListProps = {
   }) => void;
 };
 
-export const SortableList = ({
-  scrollViewStyle,
-  contentContainerStyle,
-  itemStyle,
-  headerStyle,
-  keyExtractor = (item, index) =>
-    `sortable-item-${item?.id ?? item?.title ?? index}`,
-  renderItem,
-  sortableData = DEFAULT_SORTABLE_DATA,
-  headers = DEFAULT_HEADERS,
-}: SortableListProps) => {
-  return (
-    <ScrollView
-      style={scrollViewStyle}
-      contentContainerStyle={contentContainerStyle}
-    >
-      {(headers || []).map((header, idx) => (
-        <View key={`static-header-${idx}`} style={headerStyle}>
-          {header.title ? (
-            <SortableListHeader title={header.title} />
-          ) : (
-            renderHeaderComponent(header.component)
-          )}
-        </View>
-      ))}
-      {(sortableData || []).map((item, index) => (
-        <View key={keyExtractor(item, index)} style={itemStyle}>
-          {renderItem({
-            item,
-            index,
-            renderHandle: (children) => children,
-          })}
-        </View>
-      ))}
-    </ScrollView>
-  );
-};
+export const SortableList = (_props: SortableListProps) => null;

package/Components/ModalComponent/__tests__/SortableList.web.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { SortableList } from "../SortableList.web";
+
+describe("SortableList.web", () => {
+  it("renders nothing", () => {
+    const { toJSON } = render(
+      <SortableList
+        renderItem={() => null}
+        sortableData={[{ id: "1", title: "Track 1" }]}
+      />
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+});

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
         )
     );
 
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.77",
+  "version": "16.0.0-rc.78",
   "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-rc.77",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.77",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.77",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.77",
+    "@applicaster/applicaster-types": "16.0.0-rc.78",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.78",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.78",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.78",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",