@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3543181154 → 12.0.0-alpha.3977160850

package/Components/FocusableList/FocusableChild.ts

@@ -1,28 +1,38 @@
 import * as React from "react";
 import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
-import { FocusableContext } from "../Focusable/index.android";
+import { useFocusable } from "../Focusable/index.android";
 import { useCellState } from "./hooks/useCellState.android";
 
-function FocusableChildComponent(props) {
-  const context = React.useContext(FocusableContext);
-
-  const { setIsFocusable } = context || {};
-
-  const nextFocusDown = props.nextFocusDown ?? context.nextFocusDown;
-  const nextFocusUp = props.nextFocusUp ?? context.nextFocusUp;
-  const nextFocusRight = props.nextFocusRight ?? context.nextFocusRight;
-  const nextFocusLeft = props.nextFocusLeft ?? context.nextFocusLeft;
-
-  const parentFocus = React.useMemo(
+/**
+ * returns parent focus from prop or from context
+ * */
+const useParentFocus = (
+  { nextFocusDown, nextFocusUp, nextFocusRight, nextFocusLeft },
+  context
+) =>
+  React.useMemo(
     () => ({
+      nextFocusRight: nextFocusRight ?? context.nextFocusRight,
+      nextFocusDown: nextFocusDown ?? context.nextFocusDown,
+      nextFocusLeft: nextFocusLeft ?? context.nextFocusLeft,
+      nextFocusUp: nextFocusUp ?? context.nextFocusUp,
+    }),
+    [
       nextFocusRight,
       nextFocusDown,
       nextFocusLeft,
       nextFocusUp,
-    }),
-    [nextFocusRight, nextFocusDown, nextFocusLeft, nextFocusUp]
+      context.nextFocusLeft,
+      context.nextFocusRight,
+      context.nextFocusUp,
+      context.nextFocusDown,
+    ]
   );
 
+function FocusableChildComponent(props) {
+  const { setIsFocusable, ...focusableContext } = useFocusable();
+  const parentFocus = useParentFocus(props, focusableContext);
+
   const onLoadFailed = React.useCallback(() => {
     setIsFocusable(false);
   }, []);

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,
@@ -103,8 +106,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 +146,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 +162,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 +218,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}
         />
       );
     },
@@ -287,7 +288,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const initialNumToRender = toFiniteNumberWithDefault(
-    data.length,
+    10,
     flatListProps.initialNumToRender
   );
 

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

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

@@ -1,6 +1,3 @@
-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 const HookRenderer = HookRendererComponent;

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -14,46 +14,6 @@ exports[`Layout TV renders 1`] = `
   <View
     backgroundImageUrl="http://applicaster.com"
     testID="background-component"
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "position": "absolute",
-            "top": 0,
-            "width": 1920,
-            "zIndex": 10,
-          },
-          Object {
-            "maxHeight": 10,
-          },
-        ]
-      }
-      testID="nav-bar-container"
-    >
-      <View
-        isVisible={true}
-        menuPlugin={
-          Object {
-            "module": [Function],
-            "name": "resolved-menu-plug",
-            "type": "menu",
-          }
-        }
-        navigationProps={
-          Object {
-            "assets": undefined,
-            "home": undefined,
-            "nav_items": undefined,
-            "rules": undefined,
-            "selected": undefined,
-            "styles": undefined,
-            "title": "",
-          }
-        }
-        testID="nav-bar-component"
-      />
-    </View>
-  </View>
+  />
 </View>
 `;

package/Components/Layout/TV/index.tsx

@@ -118,7 +118,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
           ) : null}
           {/** Render NavBarContainer over ScreenContainer to let tvOS native
           focus manager works correctly to focus nav bar items first **/}
-          {isTVOS ? navBarContainer : null}
+          {!isTVOS ? navBarContainer : null}
           <TransitionOverlay />
         </Components.Background>
       </ScreenLayoutContextProvider>

package/Components/River/TV/River.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import { Text } from "react-native";
 import * as R from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useFeedLoader,
   useLayoutVersion,
@@ -20,6 +19,7 @@ import {
   useNavbarState,
   useSetNavbarState,
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 type Props = {
   screenId: string;
@@ -53,7 +53,7 @@ export const River = (props: Props) => {
 
   const navigationPluginData = useNavigationPluginData();
 
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const isV2 = useLayoutVersion({ isV2: true });
 
   const river = React.useMemo(() => rivers?.[screenId], [screenId]);

package/Components/River/useScreenConfiguration.ts

@@ -1,10 +1,10 @@
 import * as R from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { toCamelCase } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { useMemo } from "react";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 type GeneralContentScreen = ZappRiver & {
   styles: {
@@ -46,7 +46,7 @@ const stylingKeys = [
 ];
 
 export function useScreenConfiguration(screenId: string): ScreenConfiguration {
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const isTablet = useIsTablet();
 
   return useMemo(() => {

package/Components/RouteManager/index.tsx

@@ -14,7 +14,7 @@ type Props = { pathname: string; screenData: Record<string, any> };
  * @param {Props}: see props above
  */
 export function RouteManager(props: Props) {
-  const { pathname, screenData: _screenData } = useRoute();
+  const { pathname, screenData } = useRoute();
   const pathAttributes = getPathAttributes({ pathname });
 
   const { screenType, screenId } = R.last(pathAttributes);
@@ -25,7 +25,7 @@ export function RouteManager(props: Props) {
         screenType={screenType}
         screenId={screenId}
         {...props}
-        screenData={props.screenData}
+        screenData={screenData}
       />
     </TestId>
   );

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -19,7 +19,6 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   <View>
     <View
       pathname="/river/testId"
-      screenData={Object {}}
       testID="routeManager"
     />
   </View>
@@ -45,7 +44,6 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   <View>
     <View
       pathname="/river/testId"
-      screenData={Object {}}
       testID="routeManager"
     />
   </View>

package/Components/Screen/index.tsx

@@ -14,7 +14,6 @@ import {
   useCurrentScreenData,
   useNavbarState,
   useScreenData,
-  useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
@@ -42,18 +41,13 @@ function isValidColor(string) {
 
 type Props = {
   pathname: string;
-  screenData: Record<string, any>;
+  screenData: unknown;
   setToggleMenu: () => void;
   setCloseMenu: () => void;
 };
 
-export function Screen({
-  setToggleMenu,
-  setCloseMenu,
-  screenData: _screenData,
-}: Props) {
+export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
-  const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
 
   // Gets the data for the current screen configuration
@@ -69,8 +63,7 @@ export function Screen({
 
   const currentRiver = useScreenData(
     (routeData.screenData as ZappRiver)?.targetScreen
-      ? (routeData.screenData as ZappRiver)?.targetScreen?.id ??
-          navigation.activeRiver.id
+      ? (routeData.screenData as ZappRiver)?.targetScreen.id
       : (routeData.screenData as ZappRiver)?.screen_id
   );
 
@@ -137,7 +130,7 @@ export function Screen({
 
         <OfflineFallbackScreen screenData={screenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-          <RouteManager pathname={pathname} screenData={_screenData} />
+          <RouteManager pathname={pathname} screenData={screenData} />
         </OfflineFallbackScreen>
       </View>
     </ScreenContextProvider>

package/Components/ScreenResolver/index.tsx

@@ -91,7 +91,7 @@ export function ScreenResolverComponent(props: Props) {
         <HookRenderer
           screenData={screenData}
           focused={props.focused}
-          parentFocus={props.parentFocus}
+          parentFocus={props.parentFocus as ParentFocus}
         />
       )
     );

package/Components/ZappUIComponent/index.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Placeholder } from "./Placeholder";
 import { useInitialLoading } from "./hooks";
-import { FocusableContext } from "../Focusable/index.android";
+import { useFocusable } from "../Focusable/index.android";
 
 type ReactComponent = React.ComponentType<any>;
 
@@ -26,13 +26,23 @@ type ZappUIComponentType = {
   options?: Options;
 };
 
-const renderComponent = (Component: ReactComponent | undefined, props) => {
-  if (Component) {
-    const { component, parent } = props;
+type RenderComponentProps = any;
+
+const RenderComponent = (
+  Component: ReactComponent | undefined,
+  args: RenderComponentProps
+) => {
+  const { component, parent } = args;
 
+  const contextValue = React.useMemo(
+    () => ({ ...component, parent }),
+    [component, parent]
+  );
+
+  if (Component) {
     return (
-      <UIComponentContext.Provider value={{ ...component, parent }}>
-        <Component {...props} />
+      <UIComponentContext.Provider value={contextValue}>
+        <Component {...args} />
       </UIComponentContext.Provider>
     );
   }
@@ -117,7 +127,7 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
       props;
 
     const parent = useUIComponentContext();
-    const { setIsFocusable } = React.useContext(FocusableContext) || {};
+    const { setIsFocusable } = useFocusable();
 
     const isLoading = toBooleanWithDefaultFalse(zappPipesData?.loading);
     const isInitialLoading = useInitialLoading(isLoading);
@@ -154,11 +164,11 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
     }, [props.component?.rules?.component_cells_focusable]);
 
     if (isDataSourceEmpty(props) && allowsEmptyDataSource) {
-      return renderComponent(Component, componentProps);
+      return RenderComponent(Component, componentProps);
     }
 
-    if (isLoading && !zappPipesData.data && isInitialLoading) {
-      return renderComponent(LoadingComponent || Placeholder, componentProps);
+    if (isLoading && !zappPipesData?.data && isInitialLoading) {
+      return RenderComponent(LoadingComponent || Placeholder, componentProps);
     }
 
     if (zappPipesData?.error) {
@@ -167,9 +177,9 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
         index: componentIndex,
       });
 
-      return renderComponent(ErrorComponent, componentProps);
+      return RenderComponent(ErrorComponent, componentProps);
     }
 
-    return renderComponent(Component, componentProps);
+    return RenderComponent(Component, componentProps);
   };
 }

package/Contexts/ScreenContext/index.tsx

@@ -1,5 +1,4 @@
 import React, { createContext, ReactNode, useMemo, useState } from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useCurrentScreenData,
   useNavigation,
@@ -42,8 +41,6 @@ export function ScreenContextProvider({
 }) {
   const { data, modalData, videoModalState, canGoBack } = useNavigation();
 
-  const { rivers: _rivers } = usePickFromState(["rivers", "plugins"]);
-
   // There are 4 route scenarios
   // For regular screens take date from navigator stack.
   // is path is model grab screenData from modal state

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.3543181154",
+  "version": "12.0.0-alpha.3977160850",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.3543181154",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3543181154",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3543181154",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3543181154",
+    "@applicaster/applicaster-types": "12.0.0-alpha.3977160850",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3977160850",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3977160850",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3977160850",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",