@applicaster/zapp-react-native-ui-components 14.0.0-alpha.8387612031 → 14.0.0-alpha.8557119261

package/Components/AudioPlayer/tv/__tests__/__snapshots__/channel.test.js.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Channel /> renders correctly 1`] = `
-<View
+<Image
+  fadeDuration={0}
+  source={
+    {
+      "uri": "https://example.com",
+    }
+  }
   style={
     {
       "height": 72,
@@ -9,20 +15,5 @@ exports[`<Channel /> renders correctly 1`] = `
       "width": 128,
     }
   }
->
-  <Image
-    fadeDuration={0}
-    source={
-      {
-        "uri": "https://example.com",
-      }
-    }
-    style={
-      {
-        "height": 72,
-        "width": 128,
-      }
-    }
-  />
-</View>
+/>
 `;

package/Components/AudioPlayer/tv/__tests__/__snapshots__/summary.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Summary /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 80,
       "marginBottom": 30,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/tv/__tests__/__snapshots__/title.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Title /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 100,
       "marginBottom": 12,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/tv/__tests__/audioPlayer.test.js

@@ -3,6 +3,10 @@ import { render } from "@testing-library/react-native";
 
 import { AudioPlayerTV } from "..";
 
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
+
 const audioPlayerProps = {
   audio_item: {
     title: "tittle",

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/AudioPlayer/tv/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { getArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
+import { useArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 import { AudioPlayerTVLayout } from "./Layout";
 
@@ -17,6 +17,8 @@ export function AudioPlayerTV(props: Props) {
   const { audio_item, plugin_configuration, style = {} } = props;
   const { extensions, title, summary } = audio_item;
 
+  const artwork = useArtworkImage(audio_item);
+
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,
@@ -33,6 +35,11 @@ export function AudioPlayerTV(props: Props) {
     const backgroundImage = getProp("audio_player_background_image");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
+
+    const backgroundImageOverlay = getProp(
+      "audio_player_background_image_overlay"
+    );
+
     const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
@@ -111,19 +118,10 @@ export function AudioPlayerTV(props: Props) {
       runTimeFontSize,
       channelIcon,
       artworkBorderRadius,
+      backgroundImageOverlay,
     };
   }, [getProp]);
 
-  const artwork = React.useMemo(
-    () =>
-      getArtworkImage({
-        key: "audio_player_artwork_image_key",
-        entry: audio_item,
-        plugin_configuration,
-      }),
-    [audio_item, plugin_configuration]
-  );
-
   return (
     <AudioPlayerTVLayout artwork={artwork} config={config} style={style}>
       <Channel srcImage={config?.channelIcon} config={config} />

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,13 +1,17 @@
 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 { HorizontalScrollContext, RiverOffsetContext } from "../../Contexts";
+import {
+  HorizontalScrollContext,
+  RiverOffsetContext,
+  ScreenScrollingContext,
+} from "../../Contexts";
+
 import { CellComponent } from "./Cell";
 import { TvOSCellComponent } from "./TvOSCellComponent";
 import { withConsumer } from "../../Contexts/HeaderOffsetContext";
-import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";

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/Focusable.tsx

@@ -5,6 +5,7 @@ import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
+import { StyleSheet, ViewStyle } from "react-native";
 
 type Props = {
   initialFocus?: boolean;
@@ -21,7 +22,7 @@ type Props = {
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
   children: (boolean, string) => React.ComponentType<any>;
   selected?: boolean;
-  style?: React.CSSProperties;
+  style?: ViewStyle[] | ViewStyle;
 };
 
 class Focusable extends BaseFocusable<Props> {
@@ -122,7 +123,7 @@ class Focusable extends BaseFocusable<Props> {
   }
 
   render() {
-    const { children, style } = this.props;
+    const { children, style, ...otherProps } = this.props;
     const { focused } = this.state;
 
     const id = this.getId();
@@ -139,7 +140,8 @@ class Focusable extends BaseFocusable<Props> {
         onMouseUp={this.pressOut}
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
-        style={style}
+        style={StyleSheet.flatten(style) as any as React.CSSProperties}
+        {...otherProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/Focusable/FocusableTvOS.tsx

@@ -16,9 +16,9 @@ function noop() {}
 type Props = {
   id: string;
   groupId: string;
-  onPress?: (nativeEvent: React.SyntheticEvent) => void;
-  onFocus?: (nativeEvent: React.SyntheticEvent) => void;
-  onBlur?: (nativeEvent: React.SyntheticEvent) => void;
+  onPress?: (nativeEvent: any) => void;
+  onFocus?: (nativeEvent: any) => void;
+  onBlur?: (nativeEvent: any) => void;
   children: (focused?: boolean) => React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;

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") {
@@ -12,4 +12,4 @@ function FocusableiOSComponent({ children }: Props) {
   return children;
 }
 
-export const FocusableiOS = React.forwardRef(FocusableiOSComponent);
+export const FocusableiOS = FocusableiOSComponent;

package/Components/Focusable/__tests__/index.android.test.tsx

@@ -38,6 +38,9 @@ describe("Focusable", () => {
   });
 
   it("updates disableFocus state when disableFocus prop changes", () => {
+    const unregister = jest.fn();
+    mockFocusManager.registerFocusable.mockReturnValue(unregister);
+
     const { rerender } = render(
       <Focusable id="test-id" disableFocus={false}>
         <Touchable testID="touchable" />

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/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/index.tsx

@@ -91,6 +91,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     // eslint-disable-next-line unused-imports/no-unused-vars
     omitPropsPropagation = [],
     useScrollView = false,
+    onScrollToIndexFailed = noop,
   } = props;
 
   useCheckItemIdsForUnique({ componentId: props.id, items: data });
@@ -277,6 +278,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "withStateMemory",
         "useSequentialLoading",
         "useScrollView",
+        "onScrollToIndexFailed",
         ...omitPropsPropagation,
       ],
       R.__
@@ -305,6 +307,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           {...getFlatListProps(props)}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
           renderItem={renderItem}
           focused={focused}
           data={data}
@@ -319,6 +322,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           renderItem={renderItem}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
         />
       )}
     </ChildrenFocusDeactivatorView>