@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4337072244 → 12.0.0-alpha.4354608902

package/Components/VideoModal/PlayerWrapper.tsx

@@ -14,12 +14,13 @@ import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 import {
-  AnimationComponent,
-  ComponentAnimationType,
   AnimatedScrollModal,
   AnimatedVideoPlayerComponent,
+  AnimationComponent,
+  ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type DimensionsT = {
@@ -96,7 +97,7 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   }
 
   if (!isInlineModal && Platform.OS === "android") {
-    return ["top", "left", "right", "bottom"];
+    return [];
   }
 
   return ["top"];
@@ -161,7 +162,7 @@ export const PlayerWrapper = (props: Props) => {
       width: isInlineModal && docked ? undefined : baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [baseDimensions, isInlineModal, pip, docked]
+    [baseDimensions, isInlineModal, pip]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(
@@ -180,65 +181,71 @@ export const PlayerWrapper = (props: Props) => {
     [containerDimensions, playerDimesionsHack]
   );
 
+  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
+
   return (
-    <WrapperView
-      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimesionsHack,
-      ]}
-    >
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        additionalData={{ saveArea: true }}
-        style={directionStyles(isTabletLandscape)}
-      >
-        <ScreenContextProvider pathname={"videoModal"}>
-          <PathnameContext.Provider value={"videoModal"}>
-            <View
-              testID={`${entry?.id}-player-container`}
-              style={[
-                defaultStyles.playerContainer,
-                containerDimensions,
-                containerStyle,
-                playerDimesionsHack,
-              ]}
-            >
-              <AnimationComponent
-                animationType={ComponentAnimationType.moveUpComponent}
-                style={isTabletLandscape ? defaultStyles.flex : undefined}
-                additionalData={{
-                  useLayoutMeasure: isTabletLandscape,
-                  disableAnimatedComponent: !isTabletLandscape,
-                  resetAnimationValue: isTabletLandscape && docked,
-                }}
-              >
-                <AnimatedVideoPlayerComponent>
-                  {children(childrenStyles)}
-                </AnimatedVideoPlayerComponent>
-              </AnimationComponent>
-            </View>
-            <AnimatedScrollModal>
-              {isInlineModal ? (
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                  style={defaultStyles.flex}
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
+        <WrapperView
+          edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+          style={[
+            safeAreaStyles(configuration, isTablet),
+            style,
+            playerDimesionsHack,
+          ]}
+        >
+          <AnimationComponent
+            animationType={ComponentAnimationType.moveUpComponent}
+            additionalData={{ saveArea: true }}
+            style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
+          >
+            <PathnameContext.Provider value={pathname}>
+              <ScreenContextProvider pathname={pathname}>
+                <View
+                  testID={`${entry?.id}-player-container`}
+                  style={[
+                    defaultStyles.playerContainer,
+                    containerDimensions,
+                    containerStyle,
+                    playerDimesionsHack,
+                  ]}
                 >
-                  <PlayerDetails
-                    configuration={configuration}
-                    style={defaultStyles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                  />
-                </AnimationComponent>
-              ) : (
-                <View style={defaultStyles.playerDetails} />
-              )}
-            </AnimatedScrollModal>
-          </PathnameContext.Provider>
-        </ScreenContextProvider>
-      </AnimationComponent>
-    </WrapperView>
+                  <AnimationComponent
+                    animationType={ComponentAnimationType.moveUpComponent}
+                    style={isTabletLandscape ? defaultStyles.flex : undefined}
+                    additionalData={{
+                      useLayoutMeasure: isTabletLandscape,
+                      disableAnimatedComponent: !isTabletLandscape,
+                      resetAnimationValue: isTabletLandscape && docked,
+                    }}
+                  >
+                    <AnimatedVideoPlayerComponent>
+                      {children(childrenStyles)}
+                    </AnimatedVideoPlayerComponent>
+                  </AnimationComponent>
+                </View>
+                <AnimatedScrollModal>
+                  {isInlineModal && !docked ? (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.componentFade}
+                      style={defaultStyles.flex}
+                    >
+                      <PlayerDetails
+                        configuration={configuration}
+                        style={defaultStyles.playerDetails}
+                        entry={entry}
+                        isTabletLandscape={isTabletLandscape}
+                      />
+                    </AnimationComponent>
+                  ) : (
+                    <View style={defaultStyles.playerDetails} />
+                  )}
+                </AnimatedScrollModal>
+              </ScreenContextProvider>
+            </PathnameContext.Provider>
+          </AnimationComponent>
+        </WrapperView>
+      </ScreenContextProvider>
+    </PathnameContext.Provider>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -129,8 +129,8 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <PathnameContext.Provider value={pathname}>
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
         {itemIdHooksFinished === item?.id ? (
           <AnimatedPlayerModalWrapper
             style={[
@@ -153,8 +153,8 @@ const VideoModalComponent = () => {
             <Spinner />
           </View>
         )}
-      </PathnameContext.Provider>
-    </ScreenContextProvider>
+      </ScreenContextProvider>
+    </PathnameContext.Provider>
   );
 };
 

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -25,6 +25,13 @@ jest.mock("react-native-gesture-handler");
 
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet,
 }));

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -42,9 +42,14 @@ exports[`PlayerWrapper renders inline 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -120,9 +125,14 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -198,9 +208,14 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "row",
-        }
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -292,9 +307,14 @@ exports[`PlayerWrapper renders properly 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View

package/Components/VideoModal/hooks/useModalSize.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Dimensions } from "react-native";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import {
   addOrientationChangeListener,
@@ -9,11 +8,10 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 const { Logger } = getXray();
 
-const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
-
 const logger = new Logger(
   "hooks",
   "zapp-react-native-ui-components/Components/VideoModal"
@@ -24,20 +22,18 @@ type Size = {
   height: number | string;
 };
 
-const MODAL_SIZE_FOR_PORTRAIT: Size = {
-  width: WIDTH,
-  height: HEIGHT,
-};
-
 const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   width: "100%",
   height: "100%",
 };
 
 export const useModalSize = (): Size => {
-  const [modalSize, setModalSize] = React.useState<Size>(
-    MODAL_SIZE_FOR_PORTRAIT
-  );
+  const frame = useSafeAreaFrame();
+
+  const [modalSize, setModalSize] = React.useState<Size>({
+    width: frame.width,
+    height: frame.height,
+  });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
     setModalSize((oldSize) => {
@@ -90,7 +86,9 @@ export const useModalSize = (): Size => {
           toOrientation === ORIENTATIONS.landscapeSensor;
 
         setNewModalSize(
-          isLandscape ? MODAL_SIZE_FOR_LANDSCAPE : MODAL_SIZE_FOR_PORTRAIT,
+          isLandscape
+            ? MODAL_SIZE_FOR_LANDSCAPE
+            : { width: frame.width, height: frame.height },
           `useModalSize: set modal size ${
             isLandscape ? "landscape" : "portrait"
           } for orientation: ${to}`

package/Components/VideoModal/utils.ts

@@ -33,8 +33,11 @@ export const useConfiguration = () => {
     ...pluginConfiguration,
   });
 
-  const { minimised_height, minimised_height_tablet, modal_background_color } =
-    config;
+  const {
+    minimised_height = 0,
+    minimised_height_tablet = 0,
+    modal_background_color,
+  } = config;
 
   const minimisedHeight = useIsTablet()
     ? minimised_height_tablet

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) => {
-      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/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/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/Decorators/Analytics/{index.js → index.tsx}

@@ -5,18 +5,18 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 type ComponentProps = {
   component: {
-    id: string,
-    rules: { item_limit: number, component_cells_selectable: boolean },
-    component_type: string,
+    id: string;
+    rules: { item_limit: number; component_cells_selectable: boolean };
+    component_type: string;
     styles: {
-      cell_style: string,
-      header: { visible: boolean },
-      component_cells_selectable: boolean,
-    },
-  },
-  zappPipesData: { url: string, data: { title: string } },
-  selected: boolean,
-  assets: { menu_button: string },
+      cell_style: string;
+      header: { visible: boolean };
+      component_cells_selectable: boolean;
+    };
+  };
+  zappPipesData: { url: string; data: { title: string } };
+  selected: boolean;
+  assets: { menu_button: string };
 };
 
 function withAnalytics(Component) {

package/README.md

@@ -78,17 +78,6 @@ export default MyAwesomeComponent;
 export { MyAwesomeComponent } from "./MyAwesomeComponent";
 ```
 
-We provide flow types for component props - please use it to make sure your component will be compliant
-
-```javascript
-import * as React from "react";
-import type { ZappComponentProps } from "../../flow-types"; // in the root of the project
-
-export class MyComponent extends React.Component<ZappComponentProps> {
-  /* ... */
-}
-```
-
 ## Connecting my component to Zapp Pipes
 
 Zapp App components rely on [Zapp-Pipes](https://github.com/applicaster/zapp-pipes) to load data.
@@ -100,10 +89,9 @@ In order to connect your component to ZappPipes, you simply need to use the `Zap
 import * as React from "react";
 import { View, Text } from "react-native";
 import { zappPipesDataConnector } from "../ZappPipesDataConnector";
-import type { ZappComponentProps } from "../../flow-types";
 
 @zappPipesDataConnector
-export class MyComponent extends React.Component<ZappComponentProps> {
+export class MyComponent extends React.Component {
   renderComponent = (data) => {
     return (
       <View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.4337072244",
+  "version": "12.0.0-alpha.4354608902",
   "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.4337072244",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4337072244",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4337072244",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4337072244",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4354608902",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4354608902",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4354608902",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4354608902",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",