@applicaster/zapp-react-native-ui-components 12.0.0-rc.1 → 12.0.0-rc.100

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

@@ -6,23 +6,23 @@ import { callOnChildren } from "../utils";
 
 export function ViewportTracker(props) {
   const viewportEvents = useViewportEventsContext();
-  const { children } = props;
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-  const [offsetX, setOffsetX] = React.useState(0);
-  const [offsetY, setOffsetY] = React.useState(0);
   const [nodeHandle, setNodeHandle] = React.useState(null);
 
-  const assignRef = React.useCallback(
-    (ref) => {
-      callOnChildren(children, "ref", ref);
-      setNodeHandle(findNodeHandle(ref));
-    },
-    [children]
-  );
+  const childrenRef = React.useRef(props.children);
+
+  const dimensionsRef = React.useRef({ width: 0, height: 0 });
+  const offsetRef = React.useRef({ offsetX: 0, offsetY: 0 });
+
+  const assignRef = React.useCallback((ref) => {
+    childrenRef.current?.ref?.(ref);
+    setNodeHandle(findNodeHandle(ref));
+  }, []);
 
   const onViewportChange = React.useCallback(
-    (event, shouldMeasureLayout = true) => {
+    ({
+      event = { ...dimensionsRef.current, ...offsetRef.current },
+      shouldMeasureLayout = true,
+    } = {}) => {
       if (nodeHandle && event?.width > 0 && event?.height > 0) {
         viewportEvents?.notify?.({
           parentHandle: nodeHandle,
@@ -36,54 +36,45 @@ export function ViewportTracker(props) {
 
   const onLayout = React.useCallback(
     (event) => {
-      callOnChildren(children, "onLayout", event);
-      setWidth(event?.nativeEvent?.layout?.width);
-      setHeight(event?.nativeEvent?.layout?.height);
+      callOnChildren(childrenRef.current, "onLayout", event);
+      dimensionsRef.current = event?.nativeEvent?.layout;
 
-      onViewportChange({
-        width: event?.nativeEvent?.layout?.width,
-        height: event?.nativeEvent?.layout?.height,
-        offsetX,
-        offsetY,
-      });
+      onViewportChange();
     },
-    [offsetX, offsetY, children, onViewportChange]
+    [onViewportChange]
   );
 
   const onContentSizeChange = React.useCallback(
     (contentWidth, contentHeight) => {
       callOnChildren(
-        children,
+        childrenRef.current,
         "onContentSizeChange",
         contentWidth,
         contentHeight
       );
 
-      onViewportChange({ width, height, offsetX, offsetY });
+      onViewportChange();
     },
-    [onViewportChange, children, width, height, offsetX, offsetY]
+    [onViewportChange]
   );
 
   const onScroll = React.useCallback(
     (event) => {
-      callOnChildren(children, "onScroll", event);
-      setOffsetX(event?.nativeEvent?.contentOffset?.x);
-      setOffsetY(event?.nativeEvent?.contentOffset?.y);
+      callOnChildren(childrenRef.current, "onScroll", event);
+      offsetRef.current = event?.nativeEvent?.contentOffset;
 
-      onViewportChange(
-        {
-          width,
-          height,
-          offsetX: event?.nativeEvent?.contentOffset?.x,
-          offsetY: event?.nativeEvent?.contentOffset?.y,
-        },
-        false
-      );
+      onViewportChange({
+        shouldMeasureLayout: false,
+      });
     },
-    [onViewportChange, width, height, children]
+    [onViewportChange]
   );
 
-  return React.cloneElement(React.Children.only(children), {
+  React.useEffect(() => {
+    childrenRef.current = props.children;
+  }, [props.children]);
+
+  return React.cloneElement(React.Children.only(props.children), {
     ref: assignRef,
     onLayout,
     onContentSizeChange,

package/Components/Viewport/ViewportTracker/__tests__/viewportTracker.test.js

@@ -5,11 +5,10 @@ import { ViewportEvents } from "../../ViewportEvents";
 
 const TestComponent = () => <ScrollView />;
 
-jest.mock("react-native", () => {
-  return {
-    findNodeHandle: jest.fn(() => 1234),
-  };
-});
+jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
+  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
+  findNodeHandle: () => 1234,
+}));
 
 const viewportEventsManager = new ViewportEvents(true);
 

package/Components/Viewport/ViewportTracker/index.tsx

@@ -6,6 +6,7 @@ import { ViewportEventContext, ViewportEvents } from "../ViewportEvents";
 type Props = {
   viewportEventsManager?: any;
   children: React.ReactNode;
+  flatListRef?: any; // this ref is used to bind to children component
 };
 
 export function ViewportTracker(props: Props) {

package/Components/Viewport/utils.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export function callOnChildren(children, method, ...args) {
   const childMethod = React.Children.only(children).props[method];
-  childMethod && childMethod(...args);
+  typeof childMethod === "function" && childMethod?.(...args);
 }
 
 export function isInViewport(

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/Components/index.js

@@ -4,6 +4,8 @@ export { River } from "./River";
 
 export { PlayerContainer } from "./PlayerContainer";
 
+export { ModalComponent } from "./ModalComponent";
+
 export { ContentScreen } from "./ContentScreen";
 
 export { TextInputTv } from "./TextInputTv";

package/Contexts/FocusableGroupContext/FocusableGroupContext.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+
+export const FocusableGroupContext = React.createContext<string | null>(null);

package/Contexts/FocusableGroupContext/FocusableGroupContextProvider.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+
+type ProviderArgs = {
+  id: string;
+  children: React.ReactNode;
+};
+
+export const FocusableGroupContextProvider = ({
+  id,
+  children,
+}: ProviderArgs) => (
+  <FocusableGroupContext.Provider value={id}>
+    {children}
+  </FocusableGroupContext.Provider>
+);

package/Contexts/FocusableGroupContext/__tests__/FocusableGroupContextProvider.test.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { FocusableGroupContextProvider, FocusableGroupContext } from "../";
+
+const MockComponent = () => {
+  const focusableContext = useContext(FocusableGroupContext) || "default";
+
+  return <Text testID={focusableContext} />;
+};
+
+describe("FocusableGroupContextProvider", () => {
+  it("should provide focusable context to the wrapped component", () => {
+    const { getByTestId } = render(
+      <FocusableGroupContextProvider id="testId">
+        <MockComponent />
+      </FocusableGroupContextProvider>
+    );
+
+    expect(getByTestId("testId")).toBeTruthy();
+  });
+});

package/Contexts/FocusableGroupContext/__tests__/withFocusableContext.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { withFocusableContext } from "../withFocusableContext";
+import { FocusableGroupContext } from "../FocusableGroupContext";
+
+const MockComponent = ({ groupId }: { groupId: string }) => (
+  <Text testID={groupId} />
+);
+
+const WrappedComponent = withFocusableContext(MockComponent);
+
+describe("withFocusableContext HOC", () => {
+  it("should provide focusable context to the wrapped component", () => {
+    const { getByTestId } = render(<WrappedComponent />, {
+      // eslint-disable-next-line react/display-name
+      wrapper: ({ children }: { children: React.ReactElement }) => (
+        <FocusableGroupContext.Provider value="test">
+          {children}
+        </FocusableGroupContext.Provider>
+      ),
+    });
+
+    expect(getByTestId("test")).toBeTruthy();
+  });
+});

package/Contexts/FocusableGroupContext/index.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+import { FocusableGroupContextProvider } from "./FocusableGroupContextProvider";
+
+export { FocusableGroupContext, FocusableGroupContextProvider };
+
+export const useGroupId = () => React.useContext(FocusableGroupContext);

package/Contexts/FocusableGroupContext/withFocusableContext.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+
+export const withFocusableContext = (Component) => {
+  // eslint-disable-next-line react/display-name
+  return ({ groupId, ...props }: Record<string, any>) => (
+    <FocusableGroupContext.Consumer>
+      {(groupIdContext: string) => {
+        // eslint-disable-next-line react/display-name
+        const propsGroupId = groupId || null;
+        const providedGroupId = propsGroupId || groupIdContext;
+
+        return <Component {...props} groupId={providedGroupId} />;
+      }}
+    </FocusableGroupContext.Consumer>
+  );
+};

package/Contexts/MenuToggleContext/{index.js → index.ts}

@@ -1,4 +1,5 @@
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";
+import React from "react";
 
 const initialContext = { toggleMenu: {}, closeMenu: {}, openMenu: {} };
 
@@ -16,3 +17,18 @@ const stateValidator = ({ property }) =>
   property === "openMenu";
 
 export const MenuToggleContext = createContext(initialContext, stateValidator);
+
+export type MenuToggleContextType = {
+  toggleMenu: any;
+  setToggleMenu: () => void;
+  openMenu: any;
+  setOpenMenu: () => void;
+  closeMenu: any;
+  setCloseMenu: () => void;
+};
+
+export const useMenuToggleContext = () => {
+  return React.useContext<MenuToggleContextType>(
+    MenuToggleContext.ReactContext
+  );
+};

package/Contexts/ScreenContext/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScreenContext withScreenContext should return the context 1`] = `null`;

package/Contexts/ScreenContext/__tests__/index.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react-native";
+import { ScreenContext, ScreenContextProvider, withScreenContext } from "../";
+import React from "react";
+
+describe("ScreenContext", () => {
+  describe("ScreneContext context", () => {
+    it("should return the context", () => {
+      expect(ScreenContext).toBeDefined();
+    });
+  });
+
+  describe("ScreenContextProvider", () => {
+    it("should return the provider", () => {
+      expect(ScreenContextProvider).toBeDefined();
+    });
+  });
+
+  describe("withScreenContext", () => {
+    it("should return the context", () => {
+      const Component = () => null;
+      const WrappedComponent = withScreenContext(Component);
+      const { toJSON } = render(<WrappedComponent />);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/Contexts/ScreenContext/index.tsx

@@ -1,34 +1,79 @@
-import React, { createContext, ReactNode, useMemo, useState } from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
 import {
   useCurrentScreenData,
   useNavigation,
   useRoute,
+  isNavBarVisible,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { isNavBarVisible } from "../../Components/Screen/navigationHandler";
+import { create, StoreApi, UseBoundStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { Animated } from "react-native";
+
+interface NavBarStoreState {
+  visible: boolean;
+  title: string;
+  summary: string;
+  setVisible: (state: boolean) => void;
+  setTitle: (title: string) => void;
+  setSummary: (subtitle: string) => void;
+  height: number;
+  scrollState: number;
+  contentPosition: string;
+  scrollYAnimated: Animated.Value;
+}
+
+interface NavBarState {
+  visible: boolean;
+  title: string;
+  summary: string;
+  setVisible: (state: boolean) => void;
+  setTitle: (title: string) => void;
+  setSummary: (subtitle: string) => void;
+}
 
 type ScreenContextType = {
-  navBar: {
-    visible: boolean;
-    title: string;
-    summary: string;
-    setVisible: (state: boolean) => void;
-    setTitle: (title: string) => void;
-    setSummary: (subtitle: string) => void;
-  };
+  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
+  navBar: NavBarState;
   legacyFormatScreenData: LegacyNavigationScreenData | null;
 };
 
+const createStore = () =>
+  create<NavBarStoreState>((set) => ({
+    title: "",
+    summary: "",
+    visible: true,
+    height: 0,
+    scrollState: 0,
+    contentPosition: "",
+    scrollYAnimated: new Animated.Value(0),
+    setTitle(title) {
+      set({ title });
+    },
+    setSummary(summary) {
+      set({ summary });
+    },
+    setVisible(visible) {
+      set({ visible });
+    },
+  }));
+
 export const ScreenContext = createContext<ScreenContextType>({
+  _navBarStore: createStore(),
   navBar: {
     visible: true,
     title: "",
     summary: "",
-    setVisible: (_state) => {},
-    setTitle: (_title) => {},
-    setSummary: (_subtitle) => {},
+    setVisible: (_state) => void 0,
+    setTitle: (_title) => void 0,
+    setSummary: (_subtitle) => void 0,
   },
   legacyFormatScreenData: {} as LegacyNavigationScreenData,
 });
@@ -42,8 +87,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
@@ -56,9 +99,30 @@ export function ScreenContextProvider({
   const isNested = useNestedNavigationContext();
   const currentScreenScreenData = useCurrentScreenData();
 
-  const [navBarTitle, setNavBarTitle] = useState("");
-  const [navBarSummary, setNavBarSummary] = useState("");
-  const [navBarVisible, setNavBarVisible] = useState(true);
+  const screenNavBarStateRef =
+    useRef<null | ReturnType<typeof createStore>>(null);
+
+  const getScreenNavBarState = useCallback(() => {
+    if (screenNavBarStateRef.current !== null) {
+      return screenNavBarStateRef.current;
+    }
+
+    const navBarState = createStore();
+    screenNavBarStateRef.current = navBarState;
+
+    return navBarState;
+  }, []);
+
+  const screenNavBarState = getScreenNavBarState()(
+    useShallow((state) => ({
+      visible: state.visible,
+      title: state.title,
+      summary: state.summary,
+      setTitle: state.setTitle,
+      setSummary: state.setSummary,
+      setVisible: state.setVisible,
+    }))
+  );
 
   const isHook = pathname.includes("hook");
 
@@ -76,26 +140,28 @@ export function ScreenContextProvider({
   const isVisible = isNavBarVisible(
     pathname,
     currentScreenScreenData, // what fallback should be if currentScreenData is not available?
-    navBarVisible,
+    screenNavBarState.visible,
     canGoBack(isHook, pathname),
     videoModalState
   );
 
-  const navBarState = useMemo(() => {
-    return {
-      title: navBarTitle,
-      summary: navBarSummary,
+  const navBarState = useMemo(
+    () => ({
+      title: screenNavBarState.title,
+      summary: screenNavBarState.summary,
       visible: isVisible,
-      setTitle: setNavBarTitle,
-      setSummary: setNavBarSummary,
-      setVisible: setNavBarVisible,
-    };
-  }, [isVisible, navBarTitle, navBarSummary]);
+      setTitle: screenNavBarState.setTitle,
+      setSummary: screenNavBarState.setSummary,
+      setVisible: screenNavBarState.setVisible,
+    }),
+    [isVisible, screenNavBarState.title, screenNavBarState.summary]
+  );
 
   return (
     <ScreenContext.Provider
       value={useMemo(
         () => ({
+          _navBarStore: getScreenNavBarState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),

package/Contexts/ScreenDataContext/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+export const ScreenDataContext = React.createContext<any>(null);
+
+// Use this only to provide initial screenData context, before the Transitioner and Screen is rendered.
+export const withScreenDataContextProvider = (Component: any) => {
+  return function ScreenDataContextProvider(props: any) {
+    const { activeRiver } = useNavigation();
+
+    // use only initial activeRiver as this context should only be used for "Home", initial route
+    const screenData = React.useMemo(() => ({ screen: activeRiver }), []);
+
+    return (
+      <ScreenDataContext.Provider value={screenData}>
+        <Component {...props} />
+      </ScreenDataContext.Provider>
+    );
+  };
+};

package/Contexts/ZappPipesContext/ZappPipesEntryContext.ts

@@ -63,7 +63,7 @@ function prepareContext(
   const parent = findParent(currentContext, route, getChildren);
 
   const newEntry = {
-    route: route,
+    route,
     id: uuid(),
     data: newContext,
   } as SingleEntry;

package/Decorators/ComponentsMapWrapper/withComponentsMapProvider.tsx

@@ -12,11 +12,16 @@ export function withComponentsMapProvider(Component: React.ComponentType<any>) {
     };
 
     const setComponentHeightById = (id: string | number, height: number) => {
-      componentsHeightMapRef.current = { ...componentsHeightMapRef.current, [id]: height };
+      componentsHeightMapRef.current = {
+        ...componentsHeightMapRef.current,
+        [id]: height,
+      };
     };
 
     return (
-      <ComponentsMapProvider {...{ setComponentHeightById, getComponentHeightById }}>
+      <ComponentsMapProvider
+        {...{ setComponentHeightById, getComponentHeightById }}
+      >
         <Component {...props} />
       </ComponentsMapProvider>
     );

package/Decorators/RiverResolver/index.tsx

@@ -1,9 +1,5 @@
 import * as React from "react";
 
-import type {
-  ZappComponent,
-  ZappRivers,
-} from "@applicaster/zapp-react-native-flow-types";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";

package/Decorators/index.tsx

@@ -1,9 +1,5 @@
 import { zappPipesDataConnector } from "./ZappPipesDataConnector";
 import * as R from "ramda";
-import type {
-  ZappComponent,
-  ZappDecorator,
-} from "@applicaster/zapp-react-native-flow-types";
 
 import { withNavigator } from "./Navigator";
 

package/events/index.ts

@@ -1,4 +1,5 @@
 export enum QBUIComponentEvents {
   toggleGradient = "toggleGradient",
   topMenuBarTV_onFocus = "topMenuBarTV_onFocus",
+  navigatorReplaceItem = "navigatorReplaceItem",
 }