@applicaster/zapp-react-native-ui-components 14.0.0-alpha.1235043154 → 14.0.0-alpha.1308901965

package/Components/Focusable/index.android.tsx

@@ -43,11 +43,13 @@ export const FocusableContext = React.createContext<
     // eslint-disable-next-line
     setIsFocusable: (enableFocus: boolean) => void;
     ref: FocusManager.FocusableRef;
+    parentFocusableId: Option<string>;
   } & ParentFocus
 >({
   focused: false,
   setIsFocusable: () => {},
   ref: { current: null },
+  parentFocusableId: undefined,
 });
 
 export const useFocusable = () => React.useContext(FocusableContext);
@@ -74,7 +76,7 @@ function FocusableComponent(props: Props, forwardedRef) {
 
   const isRTL = useIsRTL();
   const focusManager = useFocusManager();
-  const { ref: parentFocusable } = useFocusable();
+  const { ref: parentFocusableRef, parentFocusableId } = useFocusable();
   const touchableRef = React.useRef(null);
 
   const [focused, setFocused] = React.useState(() =>
@@ -98,13 +100,14 @@ function FocusableComponent(props: Props, forwardedRef) {
     }
   }, [disableFocus]);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (id) {
-      const unregister = focusManager.registerFocusable(
+      const unregister = focusManager.registerFocusable({
         touchableRef,
-        parentFocusable,
-        isFocusableCell
-      );
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId,
+      });
 
       onRegister();
 
@@ -112,7 +115,7 @@ function FocusableComponent(props: Props, forwardedRef) {
         unregister();
       };
     }
-  }, [id, onRegister, isFocusableCell]);
+  }, [id, onRegister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -164,8 +167,9 @@ function FocusableComponent(props: Props, forwardedRef) {
       ...parentFocus,
       ref: touchableRef,
       setIsFocusable,
+      parentFocusableId: id,
     };
-  }, [parentFocus, focused]);
+  }, [parentFocus, focused, id]);
 
   return (
     <Touchable

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -13,7 +13,6 @@ import {
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
-import { ViewStyle } from "react-native";
 
 type Props = {
   item: ZappEntry;
@@ -141,19 +140,14 @@ export function HandlePlayable({
   const modalSize = useModalSize();
 
   const style = React.useMemo(
-    () =>
-      ({
-        width: isModal
-          ? modalSize.width
-          : mode === "PIP"
-            ? "100%"
-            : screenWidth,
-        height: isModal
-          ? modalSize.height
-          : mode === "PIP"
-            ? "100%"
-            : screenHeight,
-      }) as ViewStyle,
+    () => ({
+      width: isModal ? modalSize.width : mode === "PIP" ? "100%" : screenWidth,
+      height: isModal
+        ? modalSize.height
+        : mode === "PIP"
+          ? "100%"
+          : screenHeight,
+    }),
     [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 

package/Components/MasterCell/elementMapper.tsx

@@ -73,6 +73,7 @@ export function elementMapper(
       : {};
 
     const componentProps = {
+      key,
       style,
       skipButtons: otherProps?.skipButtons,
       emitAsyncElementRegistrate: otherProps?.emitAsyncElementRegistrate,
@@ -90,7 +91,7 @@ export function elementMapper(
     const fn = mapElementWithKey(elementMapper(components, otherProps));
 
     return (
-      <Component key={key} {...componentProps}>
+      <Component {...componentProps}>
         {focusableTypes.has(type) && elements.length > 0
           ? elements.map(fn)
           : null}

package/Components/MasterCell/index.tsx

@@ -86,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
+      [state, item, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -1,28 +1,58 @@
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/StorageSingleSelectProvider";
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
 import React, { useEffect } from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { BehaviorSubject } from "rxjs";
 import { masterCellLogger } from "../logger";
 import get from "lodash/get";
-
-const parseContextKey = (key: string): string | null => {
-  if (!key?.startsWith("@{ctx/")) return null;
-
-  return key.substring("@{ctx/".length, key.length - 1);
+import { ScreenMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenStateMultiSelectProvider";
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+
+const parseContextKey = (
+  key: string,
+  context: string = "ctx"
+): string | null => {
+  if (!key?.startsWith(`@{${context}/`)) return null;
+
+  return key.substring(`@{${context}/`.length, key.length - 1);
 };
 
 const getDataSourceProvider = (
-  behavior: Behavior
+  behavior: Behavior,
+  screenRoute: string,
+  screenStateStore: ScreenStateStore
 ): BehaviorSubject<string[] | string> | null => {
   if (!behavior) return null;
 
   const selection = String(behavior.current_selection);
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "multi") {
+      return ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+
+    if (behavior.select_mode === "single") {
+      return ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+  }
+
   const contextKey = parseContextKey(selection);
 
   if (contextKey) {
+    // TODO: Add storage scope to behavior
     if (behavior.select_mode === "multi") {
       return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
     }
@@ -41,6 +71,8 @@ const getDataSourceProvider = (
 
 export const useBehaviorUpdate = (behavior: Behavior) => {
   const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
+  const screenRoute = useRoute()?.pathname || "";
+  const screenStateStore = useScreenStateStore();
   const player = usePlayer();
 
   const triggerUpdate = () => setLastUpdate(Date.now());
@@ -48,7 +80,11 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
   useEffect(() => {
     if (!behavior) return;
 
-    const dataSource = getDataSourceProvider(behavior);
+    const dataSource = getDataSourceProvider(
+      behavior,
+      screenRoute,
+      screenStateStore
+    );
 
     if (dataSource) {
       const subscription = dataSource.subscribe(triggerUpdate);
@@ -72,10 +108,17 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
-export const isCellSelected = (
-  item: ZappEntry,
-  behavior?: Behavior
-): boolean => {
+export const isCellSelected = ({
+  item,
+  screenRoute,
+  screenStateStore,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  screenStateStore: ScreenStateStore;
+  behavior?: Behavior;
+}): boolean => {
   if (!behavior) return false;
 
   const id = behavior.selector ? get(item, behavior.selector) : item.id;
@@ -99,7 +142,32 @@ export const isCellSelected = (
   }
 
   const selection = String(behavior.current_selection);
-  const contextKey = parseContextKey(selection);
+
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "single") {
+      const selectedItem = ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getValue();
+
+      return selectedItem === String(id);
+    }
+
+    if (behavior.select_mode === "multi") {
+      const selectedItems = ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
+  const contextKey = parseContextKey(selection, "ctx");
 
   if (contextKey) {
     if (behavior.select_mode === "single") {

package/Components/MasterCell/utils/index.ts

@@ -8,6 +8,8 @@ import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -190,8 +192,18 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
-  return isCellSelected(item, behavior);
+export const isSelected = ({
+  item,
+  screenRoute,
+  screenStateStore,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  screenStateStore: ScreenStateStore;
+  behavior?: Behavior;
+}) => {
+  return isCellSelected({ item, screenRoute, screenStateStore, behavior });
 };
 
 export const useCellState = ({
@@ -204,9 +216,17 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
+  const router = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(
-    () => isSelected(item, behavior),
+    () =>
+      isSelected({
+        item,
+        screenRoute: router?.pathname,
+        screenStateStore,
+        behavior,
+      }),
     [behavior, item, lastUpdate]
   );
 

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,12 +1,9 @@
 import React from "react";
 import { Text, Animated } from "react-native";
-import { render } from "@testing-library/react-native";
 
-import {
-  NotificationView,
-  onlinePhrase,
-  offlinePhrase,
-} from "../NotificationView";
+import renderer from "react-test-renderer";
+
+jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   usePickFromState: () => ({
@@ -35,31 +32,39 @@ jest.mock("react-native-safe-area-context", () => ({
 
 const dismiss = jest.fn();
 
+const {
+  NotificationView,
+  onlinePhrase,
+  offlinePhrase,
+} = require("../NotificationView");
+
 describe("NotificationView", () => {
   it("Show online message when Online", () => {
-    const component = render(<NotificationView online dismiss={dismiss} />);
+    const component = renderer.create(
+      <NotificationView online dismiss={dismiss} />
+    );
 
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
+    expect(component.root.findByType(Text).props.children).toBe(onlinePhrase);
   });
 
   it("Show offline message when Online", () => {
-    const component = render(
+    const component = renderer.create(
       <NotificationView online={false} dismiss={dismiss} />
     );
 
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
+    expect(component.root.findByType(Text).props.children).toBe(offlinePhrase);
   });
 
   it("When hidden is false to true notification is visible", () => {
-    const component = render(
+    const component = renderer.create(
       <NotificationView online={false} hidden={false} dismiss={dismiss} />
     );
 
-    component.rerender(
+    component.update(
       <NotificationView online={false} hidden={true} dismiss={dismiss} />
     );
 
-    const animatedView = component.UNSAFE_getByType(Animated.View);
+    const animatedView = component.root.findByType(Animated.View);
     const animatedViewStyles = animatedView.props.style;
 
     expect(animatedViewStyles.opacity).toBe(1);

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -21,15 +21,6 @@ exports[`OfflineHandler renders 1`] = `
     }
   >
     <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
       accessible={true}
       collapsable={false}
       focusable={true}

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -627,7 +627,7 @@ const PlayerContainerComponent = (props: Props) => {
         <PlayerContainerContext.Consumer>
           {(context) => (
             <TVEventHandlerComponent
-              tvEventHandler={(event) =>
+              tvEventHandler={(_component, event) =>
                 playerRemoteHandler(event, context.isLanguageOverlayVisible)
               }
             >

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -286,6 +286,7 @@ function ComponentsMapComponent(props: Props) {
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
+            listKey={riverId}
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}

package/Components/River/TV/withTVEventHandler.tsx

@@ -8,7 +8,7 @@ export const withTvEventHandler = (Component) => {
   return function WithTVEventHandler(props) {
     const navigator = useNavigation();
 
-    const remoteHandler = (event) => {
+    const remoteHandler = (_, event) => {
       const { eventType } = event;
 
       const canGoBack = navigator.canGoBack();

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

@@ -159,7 +159,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     >
       <View>
         <View
-          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >
@@ -175,7 +174,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           </View>
         </View>
         <View
-          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >

package/Components/Touchable/__tests__/__snapshots__/touchable.test.tsx.snap

@@ -3,23 +3,6 @@
 exports[`<Touchable /> when not running in automated tests environment renders correctly 1`] = `
 <View
   accessibilityLabel="some-test-id"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -46,23 +29,6 @@ exports[`<Touchable /> when not running in automated tests environment renders c
 exports[`<Touchable /> when running in automated tests environment has accessible flag set to false 1`] = `
 <View
   accessibilityLabel="some-test-id"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
   accessible={false}
   collapsable={false}
   focusable={true}

package/Components/Transitioner/Scene.tsx

@@ -36,6 +36,7 @@ export function CurrentScreenContextProvider({
   screenData: NavigationScreenData;
 }) {
   const { pathname, isActive = false, screenData } = props;
+  console.log("CurrentScreenContextProvider", { screenData });
 
   const [initialScreenData, setInitialScreenData] = React.useState(screenData);
 

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -6,21 +6,15 @@ exports[`<Scene /> renders correctly 1`] = `
     collapsable={false}
     pointerEvents="auto"
     style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "paddingBottom": 49,
-        },
-        {
-          "fontScale": 2,
-          "height": 1334,
-          "scale": 2,
-          "statusBarHeight": null,
-          "width": 750,
-        },
-      ]
+      {
+        "flex": 1,
+        "fontScale": 2,
+        "height": 1334,
+        "paddingBottom": 49,
+        "scale": 2,
+        "statusBarHeight": null,
+        "width": 750,
+      }
     }
   />
 </View>

package/Components/VideoLive/animationUtils.ts

@@ -1,8 +1,8 @@
 import { Animated, Easing, EasingFunction, StyleProp } from "react-native";
 
 type AnimatedInterpolatedStyle =
-  | Animated.AnimatedInterpolation<number>
-  | [{ [Key: string]: Animated.AnimatedInterpolation<number> }];
+  | Animated.AnimatedInterpolation
+  | [{ [Key: string]: Animated.AnimatedInterpolation }];
 
 type AnimationConfig = {
   duration: number;
@@ -31,7 +31,7 @@ const interpolate = (
   animatedValue: Animated.Value,
   from: number = 0,
   to: number = 1
-): Animated.AnimatedInterpolation<number> =>
+): Animated.AnimatedInterpolation =>
   animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [from, to],

package/Components/Viewport/ViewportAware/__tests__/viewportAware.test.js

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { act, render } from "@testing-library/react-native";
+import { act, create as render } from "react-test-renderer";
 
 import { ViewportAware } from "../";
 import { ViewportTracker } from "../../ViewportTracker";
@@ -12,17 +12,21 @@ import ReactNative from "react-native";
 
 jest.useFakeTimers();
 
-const { ScrollView } = ReactNative;
-
-jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
+jest.mock("react-native/Libraries/ReactNative/UIManager", () => {
+  return {
+    ...jest.requireActual("react-native/Libraries/ReactNative/NativeUIManager"),
+    measureLayout: (handle, parent, error, success) => {
+      success(100, 100, 400, 400);
+    },
+  };
+});
 
-ReactNative.UIManager.measureLayout = jest.fn(
-  (handle, parent, error, success) => {
-    success(100, 100, 400, 400);
-  }
-);
+jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
+  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
+  findNodeHandle: () => 1234,
+}));
 
-ReactNative.findNodeHandle = () => 1234;
+const { ScrollView } = ReactNative;
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -134,7 +138,7 @@ describe("<ViewportAware />", () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(onViewportEnter).toHaveBeenCalled();
 
-    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
+    const scrollviews = wrapper.root.findAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 
@@ -175,7 +179,7 @@ describe("<ViewportAware />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
 
-    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
+    const scrollviews = wrapper.root.findAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);