@applicaster/zapp-react-native-ui-components 12.0.0-rc.14 → 12.0.0-rc.141

package/Components/FocusableList/FocusableItem.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Focusable } from "../Focusable";
+import { Focusable } from "../Focusable/index.android";
 import { FocusableChild } from "./FocusableChild";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { IListRenderItem } from "./index";

package/Components/FocusableList/FocusableListItemWrapper.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { ListRenderItemInfo as IListRenderItemInfo } from "react-native";
+import { FocusableItem } from "./FocusableItem";
+
+export type IListRenderItem<ItemT> = (
+  info: IListRenderItemInfo<ItemT> & {
+    focused: boolean;
+    onLoadFinished: () => void;
+    onLoadFailed: () => void;
+  }
+) => React.ReactElement | null;
+
+type Item = ZappEntry | ZappUIComponent | any;
+
+type Props = {
+  item: Item;
+  onFocus: (
+    element: FocusManager.FocusableRef,
+    renderArgs: { item: Item; index: number },
+    direction: FocusManager.Android.FocusNavigationDirections
+  ) => void;
+  onListElementBlur?: (any, RenderItemProps, Direction) => void;
+  onListElementPress?: (any, RenderItemProps) => void;
+  onListElementLongPress?: (any, RenderItemProps) => void;
+  onListElementPressOut?: (any, RenderItemProps) => void;
+  focusableItemProps: any;
+  id: string;
+  index: number;
+  extraData: any;
+  extraChildrenData: any;
+  renderItem: IListRenderItem<any> | null | undefined;
+  getNextFocus: (index: number) => ParentFocus;
+} & ParentFocus;
+
+export const FocusableListItemWrapper = React.memo(
+  ({
+    onFocus,
+    onListElementBlur,
+    onListElementPress,
+    onListElementLongPress,
+    onListElementPressOut,
+    focusableItemProps,
+    id,
+    getNextFocus,
+    item,
+    index,
+    extraData,
+    extraChildrenData,
+    renderItem,
+  }: Props) => {
+    const nextFocus = getNextFocus(index);
+
+    return (
+      <FocusableItem
+        nextFocusDown={nextFocus.nextFocusDown}
+        nextFocusRight={nextFocus.nextFocusRight}
+        nextFocusLeft={nextFocus.nextFocusLeft}
+        nextFocusUp={nextFocus.nextFocusUp}
+        id={id}
+        focusableItemProps={focusableItemProps}
+        onFocus={onFocus}
+        item={item}
+        index={index}
+        renderItem={renderItem}
+        extraChildrenData={extraChildrenData}
+        extraData={extraData}
+        onListElementBlur={onListElementBlur}
+        onListElementPress={onListElementPress}
+        onListElementLongPress={onListElementLongPress}
+        onListElementPressOut={onListElementPressOut}
+      />
+    );
+  }
+);
+
+FocusableListItemWrapper.displayName = "FocusableListItemWrapper";

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

@@ -5,7 +5,9 @@ import { useFocusManager } from "@applicaster/zapp-react-native-utils/focusManag
 export const useCellState = (id: string) => {
   const focusManager = useFocusManager();
 
-  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
+  const [currentCellFocused, setCurrentCellFocused] = React.useState(
+    focusManager.isFocused(id)
+  );
 
   React.useEffect(() => {
     const handler = (focusable) => {

package/Components/FocusableList/index.tsx

@@ -12,8 +12,9 @@ import { ChildrenFocusDeactivatorView } from "../ChildrenFocusDeactivatorView";
 import { useInitialFocus } from "@applicaster/zapp-react-native-utils/focusManager";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { FocusableItem } from "./FocusableItem";
+
 import { useParentFocus, useCheckItemIdsForUnique } from "./hooks";
+import { FocusableListItemWrapper } from "./FocusableListItemWrapper";
 
 const mapIndexed = R.addIndex(R.map);
 
@@ -74,6 +75,8 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     nextFocusLeft: parentNextFocusLeft,
     nextFocusUp: parentNextFocusUp,
 
+    numColumns,
+
     focused: parentFocused,
 
     focusableItemProps,
@@ -85,6 +88,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     data = [],
     // eslint-disable-next-line unused-imports/no-unused-vars
     onAllComponentsLoaded, // TODO: re-implement it
+    omitPropsPropagation = [],
   } = props;
 
   useCheckItemIdsForUnique({ componentId: props.id, items: data });
@@ -103,8 +107,8 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     });
 
   const getFocusableEntryId = React.useCallback(
-    (_entry: ZappEntry, index?: number) => {
-      const entry = R.isNil(index) ? _entry : data[index];
+    (_entry: ZappEntry | null, index?: number) => {
+      const entry = R.isNil(index) ? _entry : data[index as number];
 
       return entry ? getFocusableId(props.id, index) : undefined;
     },
@@ -143,7 +147,6 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   const getNextFocus = React.useCallback(
     (index) => {
       const itemCount = R.length(data);
-      const { numColumns } = props;
 
       const getFocusableEntryIdForIndex = (entryIndex) =>
         getFocusableEntryId(null, entryIndex);
@@ -160,22 +163,23 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
       });
 
       const getGridFocus = () => {
-        const numberOfRows = Math.ceil(itemCount / numColumns);
-        const currentRowIndex = Math.floor(index / numColumns);
+        const _numColumns = toFiniteNumberWithDefault(1, numColumns);
+        const numberOfRows = Math.ceil(itemCount / _numColumns);
+        const currentRowIndex = Math.floor(index / _numColumns);
         const isFirstRow = currentRowIndex === 0;
         const isLastRow = currentRowIndex + 1 === numberOfRows;
-        const isLeftEdge = index % numColumns === 0;
+        const isLeftEdge = index % _numColumns === 0;
 
         const isRightEdge =
-          (index + 1) % numColumns === 0 || itemCount === index + 1;
+          (index + 1) % _numColumns === 0 || itemCount === index + 1;
 
         return {
           nextFocusUp: isFirstRow
             ? nextFocusUp
-            : getFocusableEntryIdForIndex(index - numColumns),
+            : getFocusableEntryIdForIndex(index - _numColumns),
           nextFocusDown: isLastRow
             ? nextFocusDown
-            : getFocusableEntryIdForIndex(index + numColumns),
+            : getFocusableEntryIdForIndex(index + _numColumns),
           nextFocusLeft: isLeftEdge
             ? nextFocusLeft
             : getFocusableEntryIdForIndex(index - 1),
@@ -215,26 +219,24 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   const renderItem = React.useCallback(
     ({ item, index }) => {
       const id = getFocusableId(props.id, index);
-      const nextFocus = getNextFocus(index);
 
       return (
-        <FocusableItem
-          nextFocusDown={nextFocus.nextFocusDown}
-          nextFocusRight={nextFocus.nextFocusRight}
-          nextFocusLeft={nextFocus.nextFocusLeft}
-          nextFocusUp={nextFocus.nextFocusUp}
-          id={id}
+        <FocusableListItemWrapper
+          {...{
+            onFocus,
+            onListElementBlur,
+            onListElementPress,
+            onListElementLongPress,
+            onListElementPressOut,
+          }}
+          renderItem={props.renderItem}
           focusableItemProps={focusableItemProps}
-          onFocus={onFocus}
+          getNextFocus={getNextFocus}
+          id={id}
           item={item}
           index={index}
-          renderItem={props.renderItem}
-          extraChildrenData={props.extraChildrenData}
           extraData={props.extraData}
-          onListElementBlur={onListElementBlur}
-          onListElementPress={onListElementPress}
-          onListElementLongPress={onListElementLongPress}
-          onListElementPressOut={onListElementPressOut}
+          extraChildrenData={props.extraChildrenData}
         />
       );
     },
@@ -251,9 +253,9 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     ]
   );
 
-  const flatListProps = React.useMemo(
-    () =>
-      R.omit([
+  const getFlatListProps = React.useCallback(
+    R.omit(
+      [
         "onListElementFocus",
         "onListElementPress",
         "onListElementPressOut",
@@ -266,17 +268,17 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "focusableItemProps",
         "renderItem",
         "extraChildrenData",
-        "extraData",
-        "keyExtractor",
         "onAllComponentsLoaded",
         "focused",
         "id",
         "initialFocusDirection",
         "withStateMemory",
         "useSequentialLoading",
-        ...(props.omitPropsPropagation || []),
-      ])(props),
-    [props]
+        ...omitPropsPropagation,
+      ],
+      R.__
+    ),
+    [omitPropsPropagation]
   );
 
   const onEndReached = React.useCallback(
@@ -287,8 +289,8 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const initialNumToRender = toFiniteNumberWithDefault(
-    data.length,
-    flatListProps.initialNumToRender
+    10,
+    props.initialNumToRender
   );
 
   return (
@@ -297,12 +299,10 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
       <FlatList
         focusable={false}
         scrollEnabled={false}
-        extraData={props.extraData}
         ref={ref}
-        {...flatListProps}
+        {...getFlatListProps(props)}
         renderItem={renderItem}
         onEndReached={onEndReached}
-        keyExtractor={props.keyExtractor}
         initialNumToRender={initialNumToRender}
       />
     </ChildrenFocusDeactivatorView>

package/Components/FocusableScrollView/index.tsx

@@ -284,7 +284,7 @@ function FocusableScrollViewComponent(props: Props, ref) {
       };
 
       return (
-        <View onLayout={onItemLayout}>
+        <View key={id} onLayout={onItemLayout}>
           <Focusable
             {...nextFocus}
             onFocus={(element, direction) =>

package/Components/FreezeWithCallback/Freeze.tsx

@@ -0,0 +1,31 @@
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import React, { Suspense, useEffect } from "react";
+import { Suspender } from "./Suspender";
+
+interface Props {
+  freeze: boolean;
+  children: React.ReactNode;
+  placeholder?: React.ReactNode;
+  onRelease?: () => void;
+}
+
+export function Freeze({
+  freeze,
+  children,
+  placeholder = null,
+  onRelease,
+}: Props) {
+  const prevFreeze = usePrevious(freeze);
+
+  useEffect(() => {
+    if (prevFreeze && !freeze && onRelease) {
+      onRelease();
+    }
+  }, [freeze, onRelease, prevFreeze]);
+
+  return (
+    <Suspense fallback={placeholder}>
+      <Suspender freeze={freeze}>{children}</Suspender>
+    </Suspense>
+  );
+}

package/Components/FreezeWithCallback/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Software Mansion
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Components/FreezeWithCallback/Suspender.tsx

@@ -0,0 +1,17 @@
+import React, { Fragment } from "react";
+
+const infiniteThenable = { then() {} };
+
+export const Suspender = ({
+  freeze,
+  children,
+}: {
+  freeze: boolean;
+  children: React.ReactNode;
+}) => {
+  if (freeze) {
+    throw infiniteThenable;
+  }
+
+  return <Fragment>{children}</Fragment>;
+};

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

@@ -0,0 +1,170 @@
+import React, { Dispatch, useEffect, useState } from "react";
+import {
+  act,
+  create,
+  ReactTestRenderer,
+  ReactTestRendererJSON,
+} from "react-test-renderer";
+import { FreezeWithCallback } from "../index";
+
+const SimpleContent = () => <div />;
+
+interface InnerProps {
+  value: number;
+}
+// eslint-disable-next-line unused-imports/no-unused-vars
+const Inner = ({ value }: InnerProps) => <div />;
+
+interface TestSubscriber {
+  renderCount: number;
+  subscription: Dispatch<number>;
+}
+
+function createSubscriberComponent(): [React.FC, TestSubscriber] {
+  const testState: TestSubscriber = {
+    renderCount: 0,
+    subscription: () => {},
+  };
+
+  const Subscriber: React.FC = () => {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => {
+      testState.subscription = setValue;
+    }, []);
+
+    testState.renderCount += 1;
+
+    return <Inner value={value} />;
+  };
+
+  return [Subscriber, testState];
+}
+
+interface ContainerProps {
+  freeze: boolean;
+  children: React.ReactNode;
+}
+
+const Container = ({ freeze, children }: ContainerProps) => (
+  <FreezeWithCallback freeze={freeze}>{children}</FreezeWithCallback>
+);
+
+function setupTest(initialFreeze: boolean = false) {
+  let testRenderer: ReactTestRenderer | undefined;
+  const [Subscriber, subscriberState] = createSubscriberComponent();
+
+  act(() => {
+    testRenderer = create(
+      <Container freeze={initialFreeze}>
+        <Subscriber />
+      </Container>
+    );
+  });
+
+  return {
+    testRenderer,
+    testInstance: testRenderer?.root,
+    subscriberState,
+    updateFreeze: (freeze: boolean) => {
+      act(() =>
+        testRenderer?.update(
+          <Container freeze={freeze}>
+            <Subscriber />
+          </Container>
+        )
+      );
+    },
+  };
+}
+
+describe("FreezeWithCallback", () => {
+  test("Renders stuff not frozen", () => {
+    const testRenderer = create(
+      <Container freeze={false}>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+  });
+
+  test("Does not render stuff when frozen", () => {
+    const testRenderer = create(
+      <Container freeze>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findAllByType(SimpleContent)).toHaveLength(0);
+  });
+
+  test("Stuff is gone after freeze", () => {
+    const testRenderer = create(
+      <Container freeze={false}>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+
+    act(() =>
+      testRenderer.update(
+        <Container freeze>
+          <SimpleContent />
+        </Container>
+      )
+    );
+
+    expect(testRenderer.toJSON()).toBe(null);
+  });
+
+  test("Updates work when not frozen", () => {
+    const { testInstance, subscriberState } = setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+    expect(subscriberState.renderCount).toBe(2);
+  });
+
+  test("Updates does not propagate when frozen", () => {
+    const { testInstance, subscriberState, updateFreeze } = setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    updateFreeze(true);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    expect(subscriberState.renderCount).toBe(1);
+  });
+
+  test("State persists after defrost", () => {
+    const { testInstance, subscriberState, updateFreeze, testRenderer } =
+      setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    updateFreeze(true);
+    expect(testRenderer?.toJSON()).toBe(null);
+
+    updateFreeze(false);
+    expect((testRenderer?.toJSON() as ReactTestRendererJSON).type).toBe("div");
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+  });
+
+  test("Update propagate after defrost", () => {
+    const { testInstance, 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);
+
+    updateFreeze(false);
+    expect(testInstance?.findByType(Inner).props.value).toEqual(3);
+    expect(subscriberState.renderCount).toBe(2);
+  });
+});

package/Components/FreezeWithCallback/index.tsx

@@ -0,0 +1,3 @@
+import { Freeze } from "./Freeze";
+
+export const FreezeWithCallback = Freeze;

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -52,13 +52,13 @@ export const GeneralContentScreen = ({
       React.useState(actionsInitialStateSetters.length === 0);
 
     useEffect(() => {
-      log_info(
-        `ScreenContainer: starting to check river action provider ready, current status: ${riverActionProvidersReady}`,
-        { actionsInitialStateSetters }
-      );
-
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
+          log_info(
+            "ScreenContainer: starting to check river action providers to initialize",
+            { actionsInitialStateSetters }
+          );
+
           allSettled(actionsInitialStateSetters).finally(() => {
             log_info(
               "ScreenContainer: action provider ready, completed. Starting to present screen"
@@ -98,13 +98,16 @@ export const GeneralContentScreen = ({
 
   const isReady = useRiverActionProviderReady();
 
+  const contextValue = React.useMemo(
+    () => whenMatchingType(Function, cellTapAction) || onCellTapAction,
+    [typeof cellTapAction === "function" ? cellTapAction : onCellTapAction]
+  );
+
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (
     <ScreenTrackedViewPositionsContext.Provider>
-      <CellTapContext.Provider
-        value={whenMatchingType(Function, cellTapAction) || onCellTapAction}
-      >
+      <CellTapContext.Provider value={contextValue}>
         <ComponentsMap
           feed={feed}
           riverId={screenId}

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

@@ -50,7 +50,11 @@ describe("getTransformedPreset should return the passed components if smartCompo
       );
 
       expect(transformed_preset).toBeDefined();
-      expect(transformed_preset.id).toEqual("comp10"); // id was transformed
+
+      expect(transformed_preset.id).toEqual(
+        `${mockComp.id}-${mockPreset.feed_url}-0`
+      ); // id was transformed
+
       expect(transformed_preset.data.source).toEqual(mockPreset.feed_url); // source was replaced with preset feed_url.
     });
   });
@@ -117,7 +121,10 @@ describe("getTransformedPreset should return the passed components if smartCompo
 
       expect(Array.isArray(result)).toBe(true);
       expect(result).toHaveLength(2);
-      expect(result[0].id).toEqual("smart10");
+
+      expect(result[0].id).toEqual(
+        `${mockSmartComp.id}-${mockFeeds.preset_source.data.entry[0].feed_url}-0`
+      );
 
       expect(result[0].data.source).toEqual(
         mockFeeds.preset_source.data.entry[0].feed_url
@@ -287,7 +294,7 @@ describe("getTransformedPreset should return the passed components if smartCompo
         mockComponents[0],
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[1].id + 1,
+          id: `${mockComponents[1].id}-${mockPresetEntry[0].feed_url}-1`,
           data: { source: mockPresetEntry[0].feed_url },
         },
       ];
@@ -344,12 +351,12 @@ describe("getTransformedPreset should return the passed components if smartCompo
       const mockTransformedComponents = [
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[0].id + 0,
+          id: `${mockComponents[0].id}-${mockPresetEntry1[0].feed_url}-0`,
           data: { source: mockPresetEntry1[0].feed_url },
         },
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[1].id + 1,
+          id: `${mockComponents[1].id}-${mockPresetEntry2[0].feed_url}-1`,
           data: { source: mockPresetEntry2[0].feed_url },
         },
       ];
@@ -412,7 +419,7 @@ describe("getTransformedPreset should return the passed components if smartCompo
     const mockTransformedComponents = mockPresetEntry.map((preset, i) => {
       return {
         ...mockLayoutPresets[preset.preset_name],
-        id: mockComponents[0].id + i,
+        id: `${mockComponents[0].id}-${preset.feed_url}-${i}`,
         data: { source: preset.feed_url },
       };
     });

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -41,7 +41,7 @@ export const getTransformedPreset = (
   }
 
   const updatedPresetComponent = produce(presetComponent, (draft) => {
-    draft.id = `${componentId}${index}`;
+    draft.id = `${componentId}-${preset?.feed_url}-${index}`;
     draft.data.source = preset?.feed_url;
 
     if (draft.ui_components) {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -19,6 +19,7 @@ type Props = {
   modalHeight?: number;
   modalWidth?: number;
   mode: VideoModalMode;
+  groupId?: string;
 };
 
 const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
@@ -93,6 +94,7 @@ export function HandlePlayable({
   modalHeight,
   modalWidth,
   mode,
+  groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
@@ -104,7 +106,7 @@ export function HandlePlayable({
   const [Player, playerModuleProperties] = getPlayer(item, state);
 
   const { module: CastPlugin } =
-    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins) || {};
+    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins, true) || {};
 
   const [playable, setPlayable] =
     React.useState<Nullable<PlayableComponent>>(null);
@@ -167,6 +169,7 @@ export function HandlePlayable({
         isModal={isModal}
         mode={mode}
         disableCastAction={playerModuleProperties?.disableCastAction}
+        groupId={groupId}
       />
     );
   }

package/Components/HookRenderer/index.tsx

@@ -1,6 +1 @@
-import * as R from "ramda";
-
-import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator/";
-import { HookRenderer as HookRendererComponent } from "./HookRenderer";
-
-export const HookRenderer = R.compose(withNavigator)(HookRendererComponent);
+export { HookRenderer } from "./HookRenderer";