@applicaster/quick-brick-core 16.0.0-rc.80 → 16.0.0-rc.82

package/App/ModalProvider/ModalContent.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { View, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 
@@ -17,6 +18,8 @@ const styles = StyleSheet.create({
 export function ModalContent(props: Props) {
   const { modalScreenProps } = props;
 
+  const insets = useSafeAreaInsets();
+
   if (modalScreenProps?.screenData?.modalBottomSheetContentProps) {
     const { ModalBottomSheetContent, modalBottomSheetContentProps } =
       modalScreenProps?.screenData || {};
@@ -30,7 +33,20 @@ export function ModalContent(props: Props) {
   }
 
   return (
-    <View style={styles.container}>
+    // A presented screen fills the window, including the status bar and home
+    // indicator. Inset it so chrome it draws at its own edges — a close button,
+    // for example — stays inside the tappable area.
+    <View
+      style={[
+        styles.container,
+        {
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
       <ScreenResolver {...modalScreenProps} />
     </View>
   );

package/App/ModalProvider/__tests__/ModalContent.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { ModalContent } from "../ModalContent";
+
+jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 59, bottom: 34, left: 0, right: 0 }),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => ({ ScreenResolver: () => null })
+);
+
+const flatStyle = (tree: any) => StyleSheet.flatten(tree.props.style);
+
+describe("ModalContent", () => {
+  it("insets a presented screen by the safe area so its chrome stays tappable", () => {
+    const tree = render(
+      <ModalContent modalScreenProps={{ screenId: "river-1" }} />
+    ).toJSON();
+
+    expect(flatStyle(tree)).toMatchObject({
+      paddingTop: 59,
+      paddingBottom: 34,
+    });
+  });
+
+  it("leaves a bottom sheet full-bleed", () => {
+    const tree = render(
+      <ModalContent
+        modalScreenProps={{
+          screenData: { modalBottomSheetContentProps: { items: [] } },
+        }}
+      />
+    ).toJSON();
+
+    // Bottom sheets anchor to the screen edge and manage their own insets.
+    expect(tree).toBeNull();
+  });
+});

package/App/ModalProvider/__tests__/index.test.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { modalStore } from "@applicaster/zapp-react-native-utils/modalState";
+
+import { ModalProvider } from "../";
+
+/**
+ * Records the ScreenDataContext value seen by the presented screen — the
+ * context useScreenContext()/useCurrentScreenData() read from.
+ */
+const mockSeenScreenData: any[] = [];
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => {
+    const ReactLocal = require("react");
+
+    const {
+      ScreenDataContext,
+    } = require("@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext");
+
+    return {
+      ScreenResolver: () => {
+        mockSeenScreenData.push(ReactLocal.useContext(ScreenDataContext));
+
+        return null;
+      },
+    };
+  }
+);
+
+// Needs the navigator + redux to build navbar state; irrelevant to this test.
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext",
+  () => ({
+    ScreenContextProvider: ({ children }: any) => children,
+  })
+);
+
+// Pulls in the whole Components barrel; only the ScreenResolver branch matters here.
+jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const entry = { id: "entry-1", type: { value: "video" } } as any;
+
+const seen = () => mockSeenScreenData[mockSeenScreenData.length - 1];
+
+describe("ModalProvider", () => {
+  beforeEach(() => {
+    mockSeenScreenData.length = 0;
+    modalStore.getState().dismissModal();
+  });
+
+  it("gives the presented screen its screen and entry through ScreenDataContext", () => {
+    modalStore.getState().openModal({ item: river, props: { entry } });
+
+    render(<ModalProvider />);
+
+    expect(seen()).toEqual({ screen: river, entry });
+  });
+
+  it("gives the presented screen its screen when presented without an entry", () => {
+    modalStore.getState().openModal({ item: river });
+
+    render(<ModalProvider />);
+
+    expect(seen()).toMatchObject({ screen: river });
+  });
+});

package/App/ModalProvider/index.tsx

@@ -4,6 +4,7 @@ import { ModalPresenter } from "./ModalPresenter";
 import { ModalContent } from "./ModalContent";
 import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { useModalStoreState } from "@applicaster/zapp-react-native-utils/modalState";
@@ -14,6 +15,9 @@ export function ModalProvider() {
   const [modalVisible, setModalVisible] = React.useState(false);
   const [modalShown, setModalShown] = React.useState(false);
 
+  const screen = modalState?.screen;
+  const entry = modalState?.props?.entry as ZappEntry | undefined;
+
   React.useEffect(() => {
     setModalVisible(!!modalState);
 
@@ -22,13 +26,25 @@ export function ModalProvider() {
     }
   }, [modalState]);
 
-  if (!modalState?.screen) {
+  /**
+   * The modal renders as a sibling of the stack navigator, so nothing upstream
+   * provides ScreenDataContext and the presented screen would otherwise see
+   * `null` from useScreenContext()/useCurrentScreenData(). Provide it here so a
+   * presented screen resolves its own screen and entry, the same way a pushed
+   * screen does through the navigator's scene.
+   */
+  const screenDataContextValue = React.useMemo(
+    () => ({ screen, entry }),
+    [screen, entry]
+  );
+
+  if (!screen) {
     return null;
   }
 
   const modalScreenProps = {
-    screenData: modalState?.screen,
-    screenId: modalState?.screen?.id,
+    screenData: entry ? { ...entry, targetScreen: screen } : screen,
+    screenId: screen?.id,
     screenType: "river",
     ...modalState.props,
   };
@@ -39,17 +55,19 @@ export function ModalProvider() {
 
   return (
     <PathnameContext.Provider value={pathname}>
-      <ScreenContextProvider pathname={pathname}>
-        <ModalPresenter
-          visible={shouldShowModal}
-          {...modalState?.options}
-          statusBarTranslucent
-        >
-          <ModalChildrenWrapper>
-            <ModalContent modalScreenProps={modalScreenProps} />
-          </ModalChildrenWrapper>
-        </ModalPresenter>
-      </ScreenContextProvider>
+      <ScreenDataContext.Provider value={screenDataContextValue}>
+        <ScreenContextProvider pathname={pathname}>
+          <ModalPresenter
+            visible={shouldShowModal}
+            {...modalState?.options}
+            statusBarTranslucent
+          >
+            <ModalChildrenWrapper>
+              <ModalContent modalScreenProps={modalScreenProps} />
+            </ModalChildrenWrapper>
+          </ModalPresenter>
+        </ScreenContextProvider>
+      </ScreenDataContext.Provider>
     </PathnameContext.Provider>
   );
 }

package/App/NotificationToastRenderer/NotificationToastRenderer.tv.tsx

@@ -1,131 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View, Text, Animated, StyleSheet, ViewStyle } from "react-native";
-import {
-  Directions,
-  FlingGestureHandler,
-  State,
-} from "react-native-gesture-handler";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import React from "react";
 
-import {
-  CONFIRMATION_TOAST_SOURCE,
-  notificationToastManager,
-} from "./NotificationToastManager";
-import { useNotificationToastState } from "./useNotificationToastState";
-import { useNotificationHeight } from "./useNotificationHeight";
-import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
-
-const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
-const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
-
-const styles = StyleSheet.create({
-  notificationView: {
-    flex: 1,
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-});
-
-type NumberBoolean = 0 | 1;
+/**
+ * NotificationToastRenderer for TV platforms.
+ * Currently, it does not render anything except for the children passed to it.
+ */
 
 export const NotificationToastRenderer = ({ children }) => {
-  const { statusHeight, notificationHeight } = useNotificationHeight();
-  const theme = useTheme<BaseThemePropertiesMobile>();
-
-  const toast = useNotificationToastState();
-
-  const [notificationOpacity, setNotificationOpacity] =
-    useState<NumberBoolean>(0);
-
-  const yPosition = useRef(new Animated.Value(0)).current;
-
-  const resolvedStyle =
-    toast?.source === CONFIRMATION_TOAST_SOURCE
-      ? resolveConfirmationToastStyle(theme, toast.style)
-      : toast?.style;
-
-  const backgroundColor =
-    resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
-
-  const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
-
-  const textStyles = {
-    color,
-    fontFamily: resolvedStyle?.fontFamily,
-    fontSize: resolvedStyle?.fontSize,
-    lineHeight: resolvedStyle?.lineHeight,
-    letterSpacing: resolvedStyle?.letterSpacing,
-  };
-
-  const animatedViewStyles: ViewStyle = {
-    ...styles.notificationView,
-    transform: [
-      {
-        translateY: yPosition.interpolate({
-          inputRange: [0, 1],
-          outputRange: [-notificationHeight, 0],
-        }),
-      },
-    ],
-    opacity: notificationOpacity,
-    height: notificationHeight,
-    width: "100%",
-
-    backgroundColor,
-  };
-
-  const onFlingStateChange = useCallback(({ nativeEvent }) => {
-    // Fling activates then ends; dismiss once the upward fling is recognized.
-    if (nativeEvent.oldState === State.ACTIVE) {
-      notificationToastManager.dismiss();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (toast) {
-      setNotificationOpacity(1);
-
-      Animated.timing(yPosition, {
-        toValue: 1,
-        useNativeDriver: true,
-        duration: 300,
-      }).start();
-    } else {
-      Animated.timing(yPosition, {
-        toValue: 0,
-        useNativeDriver: true,
-        duration: 300,
-      }).start(() => setNotificationOpacity(0));
-    }
-  }, [toast]);
-
-  return (
-    <View
-      testID="NotificationToastRenderer"
-      style={StyleSheet.absoluteFill}
-      pointerEvents="box-none"
-    >
-      {children}
-      <FlingGestureHandler
-        enabled={!!toast}
-        direction={Directions.UP}
-        onHandlerStateChange={onFlingStateChange}
-      >
-        <Animated.View
-          testID="NotificationToastRenderer-fling"
-          pointerEvents={toast ? "auto" : "none"}
-          style={animatedViewStyles}
-        >
-          <View style={{ height: statusHeight, backgroundColor }} />
-          <Text testID="NotificationToastRenderer-message" style={textStyles}>
-            {toast?.message}
-          </Text>
-        </Animated.View>
-      </FlingGestureHandler>
-    </View>
-  );
+  return <>{children}</>;
 };

package/App/NotificationToastRenderer/index.tsx

@@ -6,6 +6,4 @@ export { CONFIRMATION_TOAST_SOURCE } from "./NotificationToastManager";
 
 export { NotificationToastRenderer } from "./NotificationToastRenderer";
 
-export { useNotificationHeight } from "./useNotificationHeight";
-
 export { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";

package/App/NotificationToastRenderer/useNotificationHeight.tsx

@@ -1,6 +1,7 @@
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { getNavbarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 
+/** Hook calculates the height of the notification area including the status bar and navigation bar, used only for mobile */
 export const useNotificationHeight = () => {
   const insets = useSafeAreaInsets();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "16.0.0-rc.80",
+  "version": "16.0.0-rc.82",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.80",
-    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.80",
-    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.80",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.80",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.80",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.80",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.80",
+    "@applicaster/applicaster-types": "16.0.0-rc.82",
+    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.82",
+    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.82",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.82",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.82",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.82",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.82",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",