@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-alpha.1089439460

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/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,
@@ -39,9 +40,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/__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

@@ -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,6 +33,7 @@ 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;
@@ -43,11 +45,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);
@@ -68,13 +72,14 @@ function FocusableComponent(props: Props, forwardedRef) {
     onPressOut,
     onLongPress,
     onRegister = noop,
+    onUnregister = noop,
     isFocusableCell = true,
     onSetIsFocusable,
   } = props;
 
   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,21 +103,23 @@ 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();
 
       return () => {
         unregister();
+        onUnregister();
       };
     }
-  }, [id, onRegister, isFocusableCell]);
+  }, [id, onRegister, onUnregister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -122,9 +129,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]
   );
@@ -164,8 +171,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/FocusableGroup/FocusableTvOS.tsx

@@ -22,7 +22,7 @@ type FocusableGroupNativeEvent = {
 
 type Props = {
   id: string;
-  children: (arg1: boolean) => React.ComponentType<any>;
+  children: React.ReactNode;
   isFocusDisabled: boolean;
   isWithMemory: boolean;
   focusGroupRef: React.Component;

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
+    options: FocusManager.Android.CallbackOptions,
+    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, options, context) => {
+      onFocus?.(element, renderArgs, options, context);
     },
     [item, onFocus]
   );

package/Components/FocusableList/FocusableListItemWrapper.tsx

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

package/Components/FocusableList/hooks/useCellState.android.ts

@@ -10,15 +10,25 @@ export const useCellState = (id: string) => {
   );
 
   React.useEffect(() => {
-    const handler = (focusable) => {
+    const focusHandler = (focusable) => {
       const isChildren = focusManager.isFocusableChildOf(focusable, id);
+
       setCurrentCellFocused(isChildren);
     };
 
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+    focusManager.on(FOCUS_EVENTS.FOCUS, focusHandler);
+
+    const resetHandler = ({ focusedId }) => {
+      if (id === focusedId) {
+        setCurrentCellFocused(false);
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.RESET, resetHandler);
 
     return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, focusHandler);
+      focusManager.removeHandler(FOCUS_EVENTS.RESET, resetHandler);
     };
   }, [id]);
 

package/Components/FocusableList/index.tsx

@@ -20,27 +20,34 @@ import { FocusableScrollView } from "../FocusableScrollView";
 const mapIndexed = R.addIndex(R.map);
 
 export type IListRenderItem<ItemT> = (
-  info: IListRenderItemInfo<ItemT> & {
+  info: {
     focused: boolean;
     onLoadFinished: () => void;
     onLoadFailed: () => void;
-  }
+  } & IListRenderItemInfo<ItemT>
 ) => React.ReactElement | null;
 
 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 },
+    options: FocusManager.Android.CallbackOptions,
+    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;
@@ -91,6 +98,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 });
@@ -137,11 +145,11 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const onFocus = React.useCallback(
-    (element, renderArgs, direction) => {
+    (element, renderArgs, options, context) => {
       const { index } = renderArgs;
 
       updateFocusedIndex?.(index);
-      onListElementFocus?.(element, renderArgs, direction);
+      onListElementFocus?.(element, renderArgs, options, context);
     },
     [onListElementFocus, updateFocusedIndex]
   );
@@ -277,6 +285,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "withStateMemory",
         "useSequentialLoading",
         "useScrollView",
+        "onScrollToIndexFailed",
         ...omitPropsPropagation,
       ],
       R.__
@@ -305,6 +314,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           {...getFlatListProps(props)}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
           renderItem={renderItem}
           focused={focused}
           data={data}
@@ -319,6 +329,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           renderItem={renderItem}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
         />
       )}
     </ChildrenFocusDeactivatorView>

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);
   });
 });

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -8,13 +8,10 @@ import {
   useCurationAPI,
 } from "../useCurationAPI";
 import * as redux from "react-redux";
-import * as layoutPresets from "@applicaster/zapp-react-native-redux/hooks/useLayoutPresets";
-import * as pipesFeeds from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 
-import { Provider } from "react-redux";
-import configureStore from "redux-mock-store";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
@@ -42,19 +39,20 @@ const mainStackNavigator = {
   },
 };
 
-const store = configureStore()({});
-
-const wrapper = ({ children }) => (
-  <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, currentRoute: homeStack.route }}
-    >
-      <PathnameContext.Provider value={homeStack.route}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
-  </Provider>
-);
+const getWrapper =
+  (store) =>
+  // eslint-disable-next-line react/display-name, react/prop-types
+  ({ children }) => (
+    <WrappedWithProviders store={store}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, currentRoute: homeStack.route }}
+      >
+        <PathnameContext.Provider value={homeStack.route}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </WrappedWithProviders>
+  );
 
 describe("getTransformedPreset should return the passed components if smartComponents is empty", () => {
   describe("getTransformedPreset function", () => {
@@ -312,19 +310,10 @@ describe("getTransformedPreset should return the passed components if smartCompo
         { id: "02", component_type: "not_smart_another" },
       ];
 
-      // mock the hooks
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue({});
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue({});
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: {},
+        }),
       });
 
       // if there are no smart components, it should return the original array
@@ -366,18 +355,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
         "http://curation": { loading: false, data: { entry: mockPresetEntry } },
       };
 
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: mockFeeds,
+          presetsMapping: {
+            presets_mappings: {
+              ...mockLayoutPresets,
+            },
+          },
+        }),
       });
 
       expect(result.current).toEqual(mockTransformedComponents);
@@ -437,19 +423,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
         },
       };
 
-      // mock the hooks
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: mockFeeds,
+          presetsMapping: {
+            presets_mappings: {
+              ...mockLayoutPresets,
+            },
+          },
+        }),
       });
 
       expect(result.current).toEqual(mockTransformedComponents);
@@ -495,14 +477,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
       "http://curation": { loading: false, data: { entry: mockPresetEntry } },
     };
 
-    // mock the hooks
-    const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-    mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-    const mockUseLayoutPresets = jest.spyOn(layoutPresets, "useLayoutPresets");
-    mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
     const { result } = renderHook(() => useCurationAPI(mockComponents), {
-      wrapper,
+      wrapper: getWrapper({
+        zappPipes: mockFeeds,
+        presetsMapping: {
+          presets_mappings: {
+            ...mockLayoutPresets,
+          },
+        },
+      }),
     });
 
     expect(result.current).toEqual(mockTransformedComponents);