@applicaster/zapp-react-native-ui-components 11.0.0-rc.99 → 12.0.0-rc.1

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/index.test.tsx

@@ -7,7 +7,11 @@ import { CollapsibleTextContainer } from "../CollapsibleTextContainer";
 describe("CollapsibleTextContainer", () => {
   it("render container+children when label is presented", () => {
     const renderer = ReactTestRenderer.create(
-      <CollapsibleTextContainer label={"label"}>
+      <CollapsibleTextContainer
+        backgroundColor="#000000"
+        label={"label"}
+        style={{}}
+      >
         <View />
       </CollapsibleTextContainer>
     );
@@ -20,7 +24,7 @@ describe("CollapsibleTextContainer", () => {
 
   it("render nothing when label is empty", () => {
     const renderer = ReactTestRenderer.create(
-      <CollapsibleTextContainer label={""}>
+      <CollapsibleTextContainer backgroundColor="#000000" label={""} style={{}}>
         <View />
       </CollapsibleTextContainer>
     );
@@ -31,7 +35,7 @@ describe("CollapsibleTextContainer", () => {
 
   it("render nothing when label is not passed", () => {
     const renderer = ReactTestRenderer.create(
-      <CollapsibleTextContainer>
+      <CollapsibleTextContainer backgroundColor="#000000" label={""} style={{}}>
         <View />
       </CollapsibleTextContainer>
     );
@@ -42,7 +46,11 @@ describe("CollapsibleTextContainer", () => {
 
   it("render nothing when label is undefined", () => {
     const renderer = ReactTestRenderer.create(
-      <CollapsibleTextContainer label={undefined}>
+      <CollapsibleTextContainer
+        backgroundColor="#000000"
+        label={undefined}
+        style={{}}
+      >
         <View />
       </CollapsibleTextContainer>
     );

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -1,4 +1,4 @@
-import { path } from "ramda";
+import { path, pathOr } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import {
   getKeyForLabel,
@@ -34,17 +34,31 @@ export const CollapsibleTextContainer = ({
       borderRadius: toNumberWithDefaultZero(getValue("corner_radius")),
       ...additionalStyles,
     },
-    data: customData || [
+    data: [
+      ...(customData || [
+        {
+          func: (data, args) =>
+            isNilOrEmpty(args) ? undefined : path(args, data),
+          args: getKeyForLabel(
+            getValue("data_key"),
+            getValue("custom_data_key")
+          ),
+          propName: "label",
+        },
+      ]),
       {
-        func: (data, args) => {
-          if (isNilOrEmpty(args)) {
-            return undefined;
-          }
+        func: (data) => {
+          const value = getValue("background_color");
 
-          return path(args, data);
+          // check if value is a reference to an extension
+          if (value.startsWith("extensions")) {
+            return pathOr(value, value.split("."), data);
+          } else {
+            // return default value
+            return additionalStyles.backgroundColor;
+          }
         },
-        args: getKeyForLabel(getValue("data_key"), getValue("custom_data_key")),
-        propName: "label",
+        propName: "backgroundColor",
       },
     ],
     elements,

package/Components/MasterCell/hoc/withAsyncRender.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type withAsyncRenderHOCProps = {
-  emitAsyncElementRegistrate?: () => void;
+  emitAsyncElementRegistrate?: () => (() => void) | void;
   emitAsyncElementLayout?: () => void;
 };
 
@@ -15,12 +15,16 @@ export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
     const { emitAsyncElementRegistrate = noop, emitAsyncElementLayout = noop } =
       props;
 
-    React.useLayoutEffect(() => {
-      emitAsyncElementRegistrate();
+    React.useEffect(() => {
+      if (props.emitAsyncElementRegistrate) {
+        return emitAsyncElementRegistrate();
+      }
     }, []);
 
     const onAsyncRender = React.useCallback(() => {
-      emitAsyncElementLayout();
+      if (props.emitAsyncElementLayout) {
+        emitAsyncElementLayout();
+      }
     }, [emitAsyncElementLayout]);
 
     return <Component {...props} onAsyncRender={onAsyncRender} />;

package/Components/MasterCell/hooks/useAsyncRendering/MasterCellAsyncRenderManager.ts

@@ -1,17 +1,15 @@
 import { ReplaySubject } from "rxjs";
 import { map } from "rxjs/operators";
 
-const subjectBuilder = () => new ReplaySubject();
-
 export class MasterCellAsyncRenderManager {
-  readonly asyncElementRegistrate$: ReturnType<typeof subjectBuilder>;
-  readonly asyncElementLayout$: ReturnType<typeof subjectBuilder>;
+  readonly asyncElementRegistrate$: ReplaySubject<any>;
+  readonly asyncElementLayout$: ReplaySubject<any>;
   private asyncElementRegistrationCount: number;
   readonly notifyAllAsyncElementsRendered: () => void;
 
   constructor(notifyAllAsyncElementsRendered: () => void) {
-    this.asyncElementRegistrate$ = subjectBuilder();
-    this.asyncElementLayout$ = subjectBuilder();
+    this.asyncElementRegistrate$ = new ReplaySubject();
+    this.asyncElementLayout$ = new ReplaySubject();
     this.asyncElementRegistrationCount = 0;
 
     this.notifyAllAsyncElementsRendered = notifyAllAsyncElementsRendered;
@@ -19,12 +17,20 @@ export class MasterCellAsyncRenderManager {
 
   public emitAsyncElementRegistrate = () => {
     this.asyncElementRegistrate$.next();
+
+    return this.decrementAsyncElementRegistrationCount;
   };
 
   public emitAsyncElementLayout = () => {
     this.asyncElementLayout$.next();
   };
 
+  public decrementAsyncElementRegistrationCount = () => {
+    if (this.asyncElementRegistrationCount > 0) {
+      this.asyncElementRegistrationCount -= 1;
+    }
+  };
+
   public onCellLayout = () => {
     if (this.asyncElementRegistrationCount === 0) {
       // cell was rendered but no async registrations were occured

package/Components/MasterCell/hooks/useAsyncRendering/__tests__/MasterCellAsyncRenderManager.test.ts

@@ -55,4 +55,25 @@ describe("MasterCellAsyncRenderManager", () => {
 
     expect(callback).toBeCalled();
   });
+
+  it("should return decrementAsyncElementRegistrationCount, call decrementAsyncElementRegistrationCount should decrement count", () => {
+    // setup
+    const callback = jest.fn();
+    const manager = new MasterCellAsyncRenderManager(callback);
+
+    // run
+    manager.start();
+
+    // verify
+    expect(callback).not.toBeCalled();
+
+    const unsubscribe = manager.emitAsyncElementRegistrate();
+
+    expect(manager.asyncElementRegistrationCount).toBe(1);
+    expect(unsubscribe).toBe(manager.decrementAsyncElementRegistrationCount);
+
+    unsubscribe();
+
+    expect(manager.asyncElementRegistrationCount).toBe(0);
+  });
 });

package/Components/MasterCell/hooks/useAsyncRendering/index.ts

@@ -48,18 +48,16 @@ const initialDimensions = () => ({
 export const useAsyncRendering = (viewRef: React.RefObject<View>): Return => {
   const [dimensions, setDimensions] = React.useState(initialDimensions());
 
-  const managerRef = React.useRef(null);
-
-  if (!managerRef.current) {
-    managerRef.current = new MasterCellAsyncRenderManager(() => {
+  const managerRef = React.useRef(
+    new MasterCellAsyncRenderManager(() => {
       measure(viewRef?.current, ({ width, height }) => {
         setDimensions({
           width,
           height,
         });
       });
-    });
-  }
+    })
+  );
 
   React.useEffect(() => {
     return managerRef.current.start();
@@ -69,11 +67,15 @@ export const useAsyncRendering = (viewRef: React.RefObject<View>): Return => {
     setDimensions(initialDimensions());
   }, []);
 
-  return {
-    emitAsyncElementRegistrate: managerRef.current.emitAsyncElementRegistrate,
-    emitAsyncElementLayout: managerRef.current.emitAsyncElementLayout,
-    dimensions,
-    onCellLayout: managerRef.current.onCellLayout,
-    resetDimensions,
-  };
+  return React.useMemo(
+    () => ({
+      emitAsyncElementRegistrate:
+        managerRef.current?.emitAsyncElementRegistrate,
+      emitAsyncElementLayout: managerRef.current.emitAsyncElementLayout,
+      dimensions,
+      onCellLayout: managerRef.current.onCellLayout,
+      resetDimensions,
+    }),
+    [dimensions, resetDimensions]
+  );
 };

package/Components/MasterCell/utils/index.ts

@@ -1,9 +1,14 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import * as R from "ramda";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import { masterCellLogger } from "../logger";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
+import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { getCellState } from "../../Cell/utils";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -192,30 +197,149 @@ export const getFocusedButtonId = (focusable) => {
 };
 
 export const isSelected = (id: string | number, behavior?: Behavior) => {
-  if (behavior && behavior?.select_mode === "single") {
+  if (!behavior) {
+    return false;
+  }
+
+  if (behavior?.selection_source === "now_playing") {
+    const player = playerManager.getActivePlayer();
+
+    if (player?.entry?.id === id) {
+      return true;
+    }
+  }
+
+  if (behavior?.select_mode === "single") {
     return behavior.current_selection === id;
   }
 
-  // TODO: Multi select mode
+  if (behavior?.select_mode === "multi") {
+    // TODO: Use generic resolver source
+
+    if (behavior.selection_source === "@{push/topics}") {
+      const tags = PushTopicManager.getInstance().getRegisteredTags();
+
+      return tags.includes(String(id));
+    }
+
+    if (Array.isArray(behavior.current_selection)) {
+      return behavior.current_selection.includes(id);
+    }
+
+    const currentSelection = String(behavior.current_selection);
+
+    if (currentSelection?.startsWith("@{ctx/")) {
+      const keyWithoutCtx = currentSelection.substring(
+        "@{ctx/".length,
+        currentSelection.length - 1
+      );
+
+      const selectedItems =
+        StorageMultiSelectProvider.getProvider(
+          keyWithoutCtx
+        )?.getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
   return false;
 };
 
-export const useCellState = (
-  id: string | number,
-  behavior: Behavior,
-  focused: boolean
-): CellState => {
-  const selected = useMemo(() => isSelected(id, behavior), [behavior, id]);
-
-  const cellState = selected
-    ? focused
-      ? "focused_selected"
-      : "selected"
-    : focused
-    ? "focused"
-    : "default";
-
-  return cellState;
+export const useBehaviorUpdate = (behavior: Behavior) => {
+  const [lastUpdate, setLastUpdate] = React.useState(null);
+
+  const player = usePlayer();
+
+  const triggerUpdate = () => {
+    setLastUpdate(Date.now());
+  };
+
+  // TODO: Create generic RX to state update
+  useEffect(() => {
+    // TODO: Use generic resolver source
+    if (!behavior) {
+      return;
+    }
+
+    const currentSelection = String(behavior.current_selection);
+
+    if (currentSelection?.startsWith("@{ctx/")) {
+      const keyWithoutCtx = currentSelection.substring(
+        "@{ctx/".length,
+        currentSelection.length - 1
+      );
+
+      if (keyWithoutCtx) {
+        const subscription = StorageMultiSelectProvider.getProvider(
+          keyWithoutCtx
+        )
+          .getObservable()
+          .subscribe(() => {
+            triggerUpdate();
+          });
+
+        return () => {
+          subscription.unsubscribe();
+        };
+      }
+    }
+  }, [behavior]);
+
+  useEffect(() => {
+    if (!behavior) {
+      return;
+    }
+
+    if (behavior?.selection_source === "@{push/topics}") {
+      const subscription = PushTopicManager.getInstance()
+        .getEntryObservable()
+        .subscribe(() => {
+          triggerUpdate();
+        });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }
+  }, [behavior]);
+
+  useEffect(() => {
+    if (!behavior) {
+      return;
+    }
+
+    if (behavior?.selection_source === "now_playing" && player) {
+      const subscription = player.getEntryObservable().subscribe(() => {
+        triggerUpdate();
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }
+  }, [behavior, player]);
+
+  return lastUpdate;
+};
+
+export const useCellState = ({
+  id,
+  behavior,
+  focused,
+}: {
+  id: string | number;
+  behavior: Behavior;
+  focused: boolean;
+}): CellState => {
+  const lastUpdate = useBehaviorUpdate(behavior);
+
+  const _isSelected = useMemo(
+    () => isSelected(id, behavior),
+    [behavior, id, lastUpdate]
+  );
+
+  return getCellState({ focused, selected: _isSelected });
 };
 
 export const hasFocusableInsideBuilder = (elementsBuilder) => (item) => {

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -35,7 +35,10 @@ import {
   log_warning,
 } from "./logger";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import {
+  useSetNavbarState,
+  useTargetScreenData,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import {
   PlayerContainerContext,
   PlayerContainerContextProvider,
@@ -228,6 +231,7 @@ const PlayerContainerComponent = (props: Props) => {
   const { appData } = usePickFromState(["appData"]);
   const prevItemId = usePrevious(item?.id);
   const screenData = useTargetScreenData(item);
+  const { setVisible: showNavBar } = useSetNavbarState();
 
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
@@ -242,8 +246,8 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     navigator.goBack();
-    navigator.showNavBar();
-  }, [isModal, navigator]);
+    showNavBar(true);
+  }, [isModal, navigator.goBack, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -478,7 +482,7 @@ const PlayerContainerComponent = (props: Props) => {
     playerEvent("source_changed", { item });
 
     if (!isModal) {
-      navigator.hideNavBar();
+      showNavBar(false);
     }
 
     if (!Player) {
@@ -489,10 +493,10 @@ const PlayerContainerComponent = (props: Props) => {
       playerEvent("player_did_close");
 
       if (!isModal) {
-        navigator.showNavBar();
+        showNavBar(true);
       }
     };
-  }, []);
+  }, [showNavBar, /* added as suggested: */ item?.id, isModal, Player]);
 
   useEffect(() => {
     if (prevItemId && !R.equals(prevItemId, item?.id)) {

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, FlatList, StyleSheet } from "react-native";
+import { View, FlatList, StyleSheet, Platform } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -208,6 +208,9 @@ function ComponentsMapComponent(props: Props) {
       >
         <ViewportTracker>
           <FlatList
+            // Fix for WebView rerender crashes on Android API 28+
+            // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+            overScrollMode={Platform.OS === "android" ? "never" : "auto"}
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
             onLayout={handleOnLayout}

package/Components/River/River.tsx

@@ -12,9 +12,6 @@ type Props = ZappScreenProps & {
   feedUrl?: string;
   isInsideContainer?: boolean;
   screenData: {};
-  setScreenTitle: (string) => void;
-  setScreenSummary: (string) => void;
-  setIsScreenWrappedInContainer: (any) => void;
   groupId: string;
   scrollViewExtraProps: (
     | import("react-native").ScrollViewProps
@@ -52,7 +49,9 @@ export class RiverComponent extends React.Component<Props, State> {
 
   componentDidUpdate(prevProps) {
     const {
-      navigator: { setScreenTitle, setScreenSummary },
+      screenContext: {
+        navBar: { setTitle: setScreenTitle, setSummary: setScreenSummary },
+      },
       isInsideContainer,
     } = this.props;
 

package/Components/River/TV/River.tsx

@@ -5,7 +5,6 @@ import { Text } from "react-native";
 import * as R from "ramda";
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import {
   useFeedLoader,
   useLayoutVersion,
@@ -17,6 +16,10 @@ import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  useNavbarState,
+  useSetNavbarState,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 type Props = {
   screenId: string;
@@ -43,8 +46,10 @@ export const River = (props: Props) => {
     extraOffset,
   } = props;
 
-  const { setScreenTitle, setScreenSummary, screenTitle, screenSummary } =
-    useNavigation();
+  const { title: screenTitle, summary: screenSummary } = useNavbarState();
+
+  const { setTitle: setScreenTitle, setSummary: setScreenSummary } =
+    useSetNavbarState();
 
   const navigationPluginData = useNavigationPluginData();
 
@@ -92,7 +97,7 @@ export const River = (props: Props) => {
       setScreenTitle(stringOrEmpty(screenData?.title));
       setScreenSummary(stringOrEmpty(screenData?.summary));
     }
-  }, [feedData, screenData]);
+  }, [feedData, screenData, screenTitle, screenSummary]);
 
   React.useEffect(() => {
     if (

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

@@ -60,6 +60,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       onScroll={[Function]}
       onScrollBeginDrag={[Function]}
       onScrollEndDrag={[Function]}
+      overScrollMode="auto"
       refreshControl={null}
       removeClippedSubviews={true}
       renderItem={[Function]}

package/Components/River/index.tsx

@@ -7,6 +7,7 @@ import { ContainerContext } from "../../Contexts";
 import { RiverComponent } from "./River";
 import { withDimensionsProvider } from "@applicaster/zapp-react-native-utils/dimensionsProvider";
 import { WithRiverFeedLoader } from "../../Decorators/RiverFeedLoader";
+import { withScreenContext } from "../../Contexts/ScreenContext";
 
 const reduxConnector = connectToStore(R.pick(["rivers", "appData"]));
 
@@ -16,5 +17,6 @@ export const River = R.compose(
   WithRiverFeedLoader,
   withNavigator,
   withDimensionsProvider,
-  ContainerContext.withConsumer
+  ContainerContext.withConsumer,
+  withScreenContext
 )(RiverComponent);

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

@@ -53,6 +53,9 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
+  useNavbarState: jest.fn(() => ({
+    visible: jest.fn(() => mock_navBarVisibleFlag),
+  })),
 }));
 
 const {
@@ -67,11 +70,11 @@ const navBarProps = { nav_items: [] };
 const screenData = {};
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useNavBarStateForScreen: jest.fn(() => ({
-    isNavBarVisible: jest.fn(() => mock_navBarVisibleFlag),
-    canGoBack: () => false,
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
   })),
   useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
     currentRoute: "/river/testId",
     data: { screen: { id: "testId" } },
   })),

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

@@ -9,6 +9,10 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
     }
   }
 >
+  <View
+    nav_items={Array []}
+    testID="navBar"
+  />
   <View>
     <View
       pathname="/foo/path"