@applicaster/zapp-react-native-ui-components 14.0.0-alpha.2175196485 → 14.0.0-alpha.2292190333

package/Components/AudioPlayer/mobile/Layout.tsx

@@ -27,7 +27,7 @@ export function AudioPlayerMobileLayout({
 }: Props) {
   const fadeAnimation = useRef(new Animated.Value(0)).current;
 
-  const mainContainerStyles = platformSelect({
+  const mainContainerStyles: ViewStyle = platformSelect({
     native: {
       backgroundColor: "transparent",
       overflow: "hidden",

package/Components/AudioPlayer/tv/helpers.tsx

@@ -27,13 +27,20 @@ const LTR = {
   justifyContent: "flex-start",
   textAlign: "left",
   alignItems: "flex-end",
-};
+} as const;
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
   textAlign: "right",
   alignItems: "flex-start",
-};
+} as const;
 
-export const directionStyles = (isRTL) => (isRTL ? RTL : LTR);
+export const directionStyles = (
+  isRTL: boolean
+): {
+  flexDirection: "row" | "row-reverse";
+  justifyContent: "flex-start" | "flex-end";
+  textAlign: "left" | "right";
+  alignItems: "flex-end" | "flex-start";
+} => (isRTL ? RTL : LTR);

package/Components/BaseFocusable/index.tsx

@@ -146,10 +146,14 @@ export class BaseFocusable<
    * @param {Object} scrollDirection
    * @returns {Promise}
    */
-  onFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
+  onFocus: FocusManager.FocusEventCB = (
+    focusable,
+    scrollDirection,
+    context
+  ) => {
     const { onFocus = noop } = this.props;
     this.setFocusedState(true);
-    onFocus(focusable, scrollDirection);
+    onFocus(focusable, scrollDirection, context);
   };
 
   /**
@@ -247,8 +251,8 @@ export class BaseFocusable<
    * @param {Object} scrollDirection
    * @returns {Promise}
    */
-  focus(_, scrollDirection) {
-    return this.onFocus(this, scrollDirection); // invokeComponentMethod(this, "onFocus", scrollDirection);
+  focus(_, scrollDirection, context?: FocusManager.FocusContext) {
+    return this.onFocus(this, scrollDirection, context); // invokeComponentMethod(this, "onFocus", scrollDirection, context);
   }
 
   /**
@@ -258,9 +262,10 @@ export class BaseFocusable<
    */
   blur(
     _,
-    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction
+    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction,
+    context?: FocusManager.FocusContext
   ) {
-    return this.onBlur(this, scrollDirection);
+    return this.onBlur(this, scrollDirection, context);
   }
 
   /**
@@ -272,7 +277,7 @@ export class BaseFocusable<
    * @param {string} scrollDirection string representation of the direction of the navigation which landed
    * to this item being focused
    */
-  _executeFocusSequence(methodNames, scrollDirection) {
+  _executeFocusSequence(methodNames, scrollDirection, context) {
     return R.reduce(
       (sequence, methodName) => {
         const method = this[methodName]; // Access the method by name
@@ -284,7 +289,7 @@ export class BaseFocusable<
         }
 
         return sequence
-          .then(() => method.call(this, scrollDirection))
+          .then(() => method.call(this, this, scrollDirection, context))
           .catch((e) => {
             throw e; // Re-throw for consistent error handling
           });
@@ -294,15 +299,21 @@ export class BaseFocusable<
     );
   }
 
-  setFocus(scrollDirection) {
+  setFocus(
+    scrollDirection?: ScrollDirection,
+    context?: FocusManager.FocusContext
+  ) {
     const focusMethods = ["willReceiveFocus", "focus", "hasReceivedFocus"];
 
-    return this._executeFocusSequence(focusMethods, scrollDirection);
+    return this._executeFocusSequence(focusMethods, scrollDirection, context);
   }
 
-  setBlur(scrollDirection) {
+  setBlur(
+    scrollDirection?: ScrollDirection,
+    context?: FocusManager.FocusContext
+  ) {
     const blurMethods = ["willLoseFocus", "blur", "hasLostFocus"];
 
-    return this._executeFocusSequence(blurMethods, scrollDirection);
+    return this._executeFocusSequence(blurMethods, scrollDirection, context);
   }
 }

package/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,12 +1,13 @@
 import { View } from "react-native";
 import React from "react";
-import { act, render } from "@testing-library/react-native";
+import { act } from "@testing-library/react-native";
 import { CellWithFocusable } from "../CellWithFocusable.tsx";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils/index.tsx";
 
 const renderWith = (props) => {
-  return render(<CellWithFocusable {...props} />);
+  return renderWithProviders(<CellWithFocusable {...props} />);
 };
 
 describe("CellWithFocusable", () => {

package/Components/Cell/index.js

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import {

package/Components/ComponentResolver/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { ComponentResolverComponent } from "./ComponentResolver";
 

package/Components/FeedLoader/FeedLoader.tsx

@@ -1,25 +1,16 @@
 import React from "react";
 import * as R from "ramda";
+import { selectZappPipes } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
-  zappPipes: ZappPipesData;
-  loadPipesData: (
-    feed: string,
-    options?: Partial<{
-      clearCache: boolean;
-      meta: any;
-      loadLocalFavorites: boolean;
-      silentRefresh: boolean;
-      parentFeed: ZappFeed;
-      callback: () => void;
-      bodyParams: any;
-      riverId: string;
-    }>
-  ) => void;
+  zappPipes: ReturnType<typeof selectZappPipes>;
+  loadPipesData: ReturnType<
+    typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
+  >;
   feedUrl: string;
   children: (feed: ZappFeed) => React.ComponentType<any>;
   onFeedLoaded: (feed: ZappFeed) => {};
-  onError: (feed: ZappFeed) => {};
+  onError: (error: ZappPipesData["error"]) => {};
   refreshing: boolean;
   refreshCallback: () => void;
 };

package/Components/FeedLoader/FeedLoaderHOC.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import {
+  selectZappPipes,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+export const FeedLoaderHOC = (_Component: any) => {
+  return function FeedLoaderHOC(props: any) {
+    const zappPipes = useAppSelector(selectZappPipes);
+    const loadPipesData = useLoadPipesDataDispatch();
+
+    return (
+      <_Component
+        {...props}
+        zappPipes={zappPipes}
+        loadPipesData={loadPipesData}
+      />
+    );
+  };
+};

package/Components/FeedLoader/index.js

@@ -1,10 +1,4 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
 import { FeedLoaderComponent } from "./FeedLoader";
+import { FeedLoaderHOC } from "./FeedLoaderHOC";
 
-export const FeedLoader = connectToStore(R.pick(["zappPipes"]), {
-  loadPipesData,
-})(FeedLoaderComponent);
+export const FeedLoader = FeedLoaderHOC(FeedLoaderComponent);

package/Components/Focusable/FocusableiOS.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type Props = {
   children: () => React.ReactNode;
-};
+} & Record<string, any>;
 
 function FocusableiOSComponent({ children }: Props) {
   if (typeof children === "function") {

package/Components/Focusable/Touchable.tsx

@@ -9,7 +9,8 @@ type Props = {
   onLongPress?: (ref: FocusManager.TouchableRef) => void;
   onFocus?: (
     ref: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onBlur?: (
     ref: FocusManager.TouchableRef,
@@ -18,6 +19,7 @@ type Props = {
 
   disableFocus?: boolean;
   blockFocus?: boolean;
+  isSelected: (id?: string) => boolean;
 } & Partial<ParentFocus>;
 
 export class Touchable extends React.Component<Props> {
@@ -39,9 +41,10 @@ export class Touchable extends React.Component<Props> {
 
   onFocus(
     focusableRef: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ): void {
-    this.props?.onFocus?.(focusableRef, options);
+    this.props?.onFocus?.(focusableRef, options, context);
   }
 
   onBlur(

package/Components/Focusable/index.android.tsx

@@ -22,7 +22,8 @@ type Props = {
   onPress?: (ref: FocusManager.FocusableRef) => void;
   onFocus?: (
     ref: FocusManager.FocusableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) => void;
   onBlur?: (
     ref: FocusManager.FocusableRef,
@@ -32,9 +33,11 @@ type Props = {
   onPressOut?: (ref: FocusManager.FocusableRef) => void;
   onLongPress?: (ref: FocusManager.FocusableRef) => void;
   onRegister?: () => void;
+  onUnRegister?: () => void;
   isFocusableCell?: boolean;
   /** only for FocusableScrollView */
   onSetIsFocusable?: (isFocusable: boolean) => void;
+  isSelected?: (id?: string) => boolean;
 } & ParentFocus;
 
 export const FocusableContext = React.createContext<
@@ -70,8 +73,10 @@ function FocusableComponent(props: Props, forwardedRef) {
     onPressOut,
     onLongPress,
     onRegister = noop,
+    onUnRegister = noop,
     isFocusableCell = true,
     onSetIsFocusable,
+    isSelected,
   } = props;
 
   const isRTL = useIsRTL();
@@ -113,9 +118,10 @@ function FocusableComponent(props: Props, forwardedRef) {
 
       return () => {
         unregister();
+        onUnRegister();
       };
     }
-  }, [id, onRegister, isFocusableCell, parentFocusableId]);
+  }, [id, onRegister, onUnRegister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -125,9 +131,9 @@ function FocusableComponent(props: Props, forwardedRef) {
   }
 
   const _onFocus = React.useCallback(
-    (ref, options) => {
+    (ref, options, context) => {
       setFocused(true);
-      onFocus?.(ref, options);
+      onFocus?.(ref, options, context);
     },
     [onFocus]
   );
@@ -183,6 +189,7 @@ function FocusableComponent(props: Props, forwardedRef) {
       blockFocus={blockFocus}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
+      isSelected={isSelected}
       {...parentFocus}
     >
       <FocusableContext.Provider value={contextState}>

package/Components/Focusable/index.tsx

@@ -4,7 +4,7 @@ import { FocusableiOS } from "./FocusableiOS";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-export const Focusable = platformSelect({
+export const Focusable: React.ComponentType<any> = platformSelect({
   tvos: FocusableTvOS,
   ios: FocusableiOS,
   default: FocusableDefault,

package/Components/FocusableList/FocusableItem.tsx

@@ -10,7 +10,8 @@ type FocusableItemComponentProps = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: FocusableItemComponentProps["item"]; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    direction: FocusManager.Android.FocusNavigationDirections,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onListElementFocus?: (any, RenderItemProps, Direction) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
@@ -45,8 +46,8 @@ const FocusableItemComponent = ({
   const renderArgs = { item, index };
 
   const onFocusHandler = React.useCallback(
-    (element, direction) => {
-      onFocus?.(element, renderArgs, direction);
+    (element, direction, context) => {
+      onFocus?.(element, renderArgs, direction, context);
     },
     [item, onFocus]
   );
@@ -79,6 +80,23 @@ const FocusableItemComponent = ({
     [item, onListElementPressOut]
   );
 
+  const isSelected = React.useCallback(
+    (id_: Option<string>) => {
+      console.log("debug_2", "isSelected", {
+        item,
+        extraChildrenData,
+        id_,
+      });
+
+      if (id_) {
+        return id_ === item.id;
+      }
+
+      return item?.data?.target === extraChildrenData;
+    },
+    [item, extraChildrenData]
+  );
+
   return (
     <Focusable
       nextFocusDown={nextFocusDown}
@@ -91,6 +109,7 @@ const FocusableItemComponent = ({
       onLongPress={onLongPressHandler}
       onPressOut={onPressOutHandler}
       id={id}
+      isSelected={isSelected}
       {...focusableItemProps}
     >
       <FocusableChild

package/Components/FocusableList/FocusableListItemWrapper.tsx

@@ -17,7 +17,8 @@ type Props = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: Item; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    direction: FocusManager.Android.FocusNavigationDirections,
+    context: FocusManager.FocusContext
   ) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
   onListElementPress?: (any, RenderItemProps) => void;

package/Components/FocusableList/index.tsx

@@ -30,17 +30,24 @@ export type IListRenderItem<ItemT> = (
 export const getFocusableId = (parentId, index) =>
   `${parentId}___index:${index}`;
 
+type Item = ZappEntry | ZappUIComponent | any;
+
 export type Props<ItemT> = FlatListProps<ItemT> & {
   id?: number | string;
   horizontal?: boolean;
   loop?: boolean;
   numColumns?: number;
   data: ZappEntry[] | ZappUIComponent[] | any[];
-  onListElementFocus?: (any, RenderItemProps, Direction) => void;
-  onListElementBlur?: (any, RenderItemProps, Direction) => void;
-  onListElementPress?: (any, RenderItemProps) => void;
-  onListElementPressOut?: (any, RenderItemProps) => void;
-  onListElementLongPress?: (any, RenderItemProps) => void;
+  onListElementFocus?: (
+    element: FocusManager.FocusableRef,
+    renderItemProps: { item: Item; index: number },
+    direction: FocusManager.Android.FocusNavigationDirections,
+    context: FocusManager.FocusContext
+  ) => void;
+  onListElementBlur?: (element, renderItemProps, direction) => void;
+  onListElementPress?: (element, renderItemProps) => void;
+  onListElementPressOut?: (element, renderItemProps) => void;
+  onListElementLongPress?: (element, renderItemProps) => void;
   focusableItemProps?: any;
   focused?: boolean;
   initialScrollIndex?: number;
@@ -138,11 +145,11 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const onFocus = React.useCallback(
-    (element, renderArgs, direction) => {
+    (element, renderArgs, direction, context) => {
       const { index } = renderArgs;
 
       updateFocusedIndex?.(index);
-      onListElementFocus?.(element, renderArgs, direction);
+      onListElementFocus?.(element, renderArgs, direction, context);
     },
     [onListElementFocus, updateFocusedIndex]
   );

package/Components/FreezeWithCallback/__tests__/index.test.tsx

@@ -1,19 +1,18 @@
 import React, { Dispatch, useEffect, useState } from "react";
-import {
-  act,
-  create,
-  ReactTestRenderer,
-  ReactTestRendererJSON,
-} from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
+import { View } from "react-native";
 import { FreezeWithCallback } from "../index";
 
-const SimpleContent = () => <div />;
+const SimpleContent = () => <View testID="simple-content" />;
 
 interface InnerProps {
   value: number;
 }
+
 // eslint-disable-next-line unused-imports/no-unused-vars
-const Inner = ({ value }: InnerProps) => <div />;
+const Inner = ({ value }: InnerProps) => (
+  <View testID="inner-component" data-value={value} />
+);
 
 interface TestSubscriber {
   renderCount: number;
@@ -51,24 +50,20 @@ const Container = ({ freeze, children }: ContainerProps) => (
 );
 
 function setupTest(initialFreeze: boolean = false) {
-  let testRenderer: ReactTestRenderer | undefined;
   const [Subscriber, subscriberState] = createSubscriberComponent();
 
-  act(() => {
-    testRenderer = create(
-      <Container freeze={initialFreeze}>
-        <Subscriber />
-      </Container>
-    );
-  });
+  const renderResult = render(
+    <Container freeze={initialFreeze}>
+      <Subscriber />
+    </Container>
+  );
 
   return {
-    testRenderer,
-    testInstance: testRenderer?.root,
+    renderResult,
     subscriberState,
     updateFreeze: (freeze: boolean) => {
       act(() =>
-        testRenderer?.update(
+        renderResult.rerender(
           <Container freeze={freeze}>
             <Subscriber />
           </Container>
@@ -80,91 +75,120 @@ function setupTest(initialFreeze: boolean = false) {
 
 describe("FreezeWithCallback", () => {
   test("Renders stuff not frozen", () => {
-    const testRenderer = create(
+    const { getByTestId } = render(
       <Container freeze={false}>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+    expect(getByTestId("simple-content")).toBeTruthy();
   });
 
   test("Does not render stuff when frozen", () => {
-    const testRenderer = create(
+    const { queryByTestId } = render(
       <Container freeze>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findAllByType(SimpleContent)).toHaveLength(0);
+    expect(queryByTestId("simple-content")).toBe(null);
   });
 
   test("Stuff is gone after freeze", () => {
-    const testRenderer = create(
+    const { toJSON, getByTestId, rerender } = render(
       <Container freeze={false}>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+    expect(getByTestId("simple-content")).toBeTruthy();
 
     act(() =>
-      testRenderer.update(
+      rerender(
         <Container freeze>
           <SimpleContent />
         </Container>
       )
     );
 
-    expect(testRenderer.toJSON()).toBe(null);
+    expect(toJSON()).toBe(null);
   });
 
   test("Updates work when not frozen", () => {
-    const { testInstance, subscriberState } = setupTest();
+    const { renderResult, subscriberState } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
+
     expect(subscriberState.renderCount).toBe(2);
   });
 
   test("Updates does not propagate when frozen", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     updateFreeze(true);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
+
     expect(subscriberState.renderCount).toBe(1);
   });
 
   test("State persists after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze, testRenderer } =
-      setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
 
     updateFreeze(true);
-    expect(testRenderer?.toJSON()).toBe(null);
+    expect(renderResult.toJSON()).toBe(null);
 
     updateFreeze(false);
-    expect((testRenderer?.toJSON() as ReactTestRendererJSON).type).toBe("div");
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+    expect(renderResult.getByTestId("inner-component")).toBeTruthy();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
   });
 
   test("Update propagate after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
 
     updateFreeze(true);
     act(() => subscriberState.subscription(1));
     act(() => subscriberState.subscription(2));
     act(() => subscriberState.subscription(3));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
     updateFreeze(false);
-    expect(testInstance?.findByType(Inner).props.value).toEqual(3);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(3);
+
     expect(subscriberState.renderCount).toBe(2);
   });
 });