@applicaster/quick-brick-core 13.0.0-alpha.6400875052 → 13.0.0-alpha.6444233049

package/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/index.tsx

@@ -300,7 +300,6 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
                   simultaneousHandlers={this.drawer}
                 >
                   <Animated.ScrollView
-                    style={{ marginBottom: this._snapPoints.top }}
                     bounces={false}
                     onScrollBeginDrag={this._onRegisterLastScroll}
                     scrollEventThrottle={1}

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -1,21 +1,33 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { LayoutChangeEvent, Platform, StyleSheet, View } from "react-native";
 
 import { Handle, HandleProps } from "./Handle";
 import { DraggableBottomSheet } from "./DraggableBottomSheet";
+import {
+  SafeAreaView,
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   children: React.ReactChild;
   backgroundColor: string;
   cornerRadius: number;
-  contentHeight: number;
   maxHeight: number;
   maxWidth: number;
   visible: boolean;
   handleProps: HandleProps;
   closeToast: () => void;
-  dimensions: { width: number; height: number };
-  paddingBottom: number;
+  dimensions: {
+    statusBarHeight: any;
+    width: number;
+    height: number;
+  };
 };
 
 const styles = StyleSheet.create({
@@ -25,6 +37,32 @@ const styles = StyleSheet.create({
   },
 });
 
+const defaultBottomOffset = platformSelect({
+  ios: 34,
+  android: 0,
+});
+
+const getSheetHeight = ({ height, bottomOffset, maxHeight }) => {
+  return platformSelect({
+    ios: height - bottomOffset,
+    default:
+      (height || maxHeight) -
+      (!isAndroidVersionAtLeast(35) && isAndroidPlatform() ? bottomOffset : 0),
+  });
+};
+
+const useGetSheetHeight = (height, maxHeight) => {
+  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
+
+  const bottomOffset = bottom;
+
+  return getSheetHeight({
+    height,
+    bottomOffset,
+    maxHeight,
+  });
+};
+
 export function ModalBottomSheetFrame(props: Props) {
   const {
     children,
@@ -34,31 +72,50 @@ export function ModalBottomSheetFrame(props: Props) {
     maxWidth,
     visible,
     handleProps,
-    contentHeight,
     dimensions,
-    paddingBottom,
   } = props;
 
+  const safeAreaDims = useSafeAreaFrame();
+
   const extraStyles = {
     backgroundColor,
     borderTopLeftRadius: cornerRadius,
     borderTopRightRadius: cornerRadius,
     maxHeight,
-    paddingBottom,
-    maxWidth: Math.min(Number(maxWidth), dimensions.width),
+    maxWidth: Math.min(Number(maxWidth), safeAreaDims.width),
+  };
+
+  const [height, setHeight] = React.useState(0);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+
+    if (height !== 0) {
+      setHeight((oldHeight) => oldHeight || height);
+    }
   };
 
+  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
+
+  const sheetHeight = useGetSheetHeight(height, maxHeight);
+
   return (
     <DraggableBottomSheet
-      sheetHeight={contentHeight}
-      visible={visible}
+      sheetHeight={sheetHeight}
+      visible={height > 0 && visible}
       dismiss={props.closeToast}
       hasHeader={handleProps.enabled}
       header={(dragging) => <Handle {...handleProps} focused={dragging} />}
       maxWidth={maxWidth}
       {...dimensions}
+      height={safeAreaDims.height - (Platform.OS === "ios" ? bottom : 0)}
     >
-      <View style={[styles.toastFrameContainer, extraStyles]}>{children}</View>
+      <SafeAreaView
+        edges={["left", "right", "bottom"]}
+        style={[styles.toastFrameContainer, extraStyles]}
+      >
+        <View onLayout={onLayout}>{children}</View>
+      </SafeAreaView>
     </DraggableBottomSheet>
   );
 }

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -1,9 +1,7 @@
 /// <reference types="@applicaster/applicaster-types" />
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Keyboard, StyleSheet, View } from "react-native";
 
 import { Overlay } from "./Overlay";
@@ -29,61 +27,38 @@ type Props = {
   modalBottomSheetContentProps: Record<string, any>;
 };
 
-const defaultBottomOffset = platformSelect({
-  ios: 34,
-  android: 0,
-});
-
 export function ModalBottomSheet(props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigator = useNavigation();
   const dimensions = useDimensions();
-  const [sheetHeight, setSheetHeight] = useState(0);
   const [visible, setVisible] = useState(true);
-  const dismiss = () => setVisible(false);
-  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
-
-  const bottomOffset = bottom + dimensions.statusBarHeight;
 
   const {
     modal_bottom_sheet_background_color: sheetBackgroundColor,
     modal_bottom_sheet_overlay_color: sheetOverlayColor,
     modal_bottom_sheet_top_corner_radius: sheetCornerRadius,
-    modal_bottom_sheet_max_height: sheetMaxHeight,
     modal_bottom_sheet_handle: sheetHandleEnabled,
     modal_bottom_sheet_handle_color: sheetHandleColor,
     modal_bottom_sheet_handle_focus_color: sheetHandleFocusedColor,
     modal_bottom_sheet_tablet_max_width: sheetTabletMaxWidth,
   } = theme;
 
+  const sheetMaxHeight = dimensions.height * 0.75; // Set a default max height
+
   const {
     ModalBottomSheetContent = ModalComponent,
     modalBottomSheetContentProps,
   } = props;
 
-  const onLayout = useCallback(({ nativeEvent }) => {
-    const calculatedHeight = nativeEvent?.layout?.height;
-
-    if (calculatedHeight > 0 && sheetHeight === 0) {
-      setSheetHeight(Math.min(calculatedHeight, sheetMaxHeight));
-    }
-  }, []);
-
   useEffect(() => {
     Keyboard.dismiss();
   }, []);
 
-  const isTablet = useIsTablet();
+  const dismiss = useCallback(() => setVisible(false), []);
 
-  const maxWidth = useMemo(
-    () =>
-      isTablet
-        ? Math.max(sheetTabletMaxWidth, dimensions.width)
-        : dimensions.width,
-    [isTablet]
-  );
+  const isTablet = useIsTablet();
 
-  const modalVisible = visible && sheetHeight > 0;
+  const maxWidth = isTablet ? sheetTabletMaxWidth : dimensions.width;
 
   return (
     <View style={styles.container}>
@@ -95,12 +70,10 @@ export function ModalBottomSheet(props: Props) {
       <ModalBottomSheetFrame
         backgroundColor={sheetBackgroundColor}
         cornerRadius={sheetCornerRadius}
-        contentHeight={sheetHeight + bottomOffset}
-        maxHeight={sheetMaxHeight + bottomOffset}
-        paddingBottom={bottomOffset}
+        maxHeight={sheetMaxHeight}
         maxWidth={maxWidth}
         dimensions={dimensions}
-        visible={modalVisible}
+        visible={visible}
         closeToast={dismiss}
         handleProps={{
           enabled: sheetHandleEnabled,
@@ -108,18 +81,15 @@ export function ModalBottomSheet(props: Props) {
           focusedColor: sheetHandleFocusedColor,
         }}
       >
-        <View onLayout={onLayout}>
-          <ModalBottomSheetContent
-            width={
-              Math.min(sheetTabletMaxWidth, dimensions.width) ||
-              dimensions.width
-            }
-            maxHeight={sheetMaxHeight}
-            {...modalBottomSheetContentProps}
-            dismiss={dismiss}
-            currentRoute={navigator.currentRoute}
-          />
-        </View>
+        <ModalBottomSheetContent
+          width={
+            Math.min(sheetTabletMaxWidth, dimensions.width) || dimensions.width
+          }
+          maxHeight={sheetMaxHeight}
+          {...modalBottomSheetContentProps}
+          dismiss={dismiss}
+          currentRoute={navigator.currentRoute}
+        />
       </ModalBottomSheetFrame>
     </View>
   );

package/App/ModalProvider/ModalPresenter.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Modal, ModalProps } from "react-native";
 
-type Props = {
+type Props = ModalProps & {
   children: React.ReactChild;
   ModalContainer?: React.FC<ModalProps> | React.ComponentClass<ModalProps>;
   visible: boolean;

package/App/ModalProvider/index.tsx

@@ -40,7 +40,11 @@ export function ModalProvider() {
   return (
     <PathnameContext.Provider value={pathname}>
       <ScreenContextProvider pathname={pathname}>
-        <ModalPresenter visible={shouldShowModal} {...modalState?.options}>
+        <ModalPresenter
+          visible={shouldShowModal}
+          {...modalState?.options}
+          statusBarTranslucent
+        >
           <ModalChildrenWrapper>
             <ModalContent modalScreenProps={modalScreenProps} />
           </ModalChildrenWrapper>

package/App/NavigationProvider/NavigationProvider.tsx

@@ -58,7 +58,10 @@ import {
   legacyScreenData,
   openExternalUrl,
 } from "./utils";
-import { debounce } from "@applicaster/zapp-react-native-utils/functionUtils";
+import {
+  debounce,
+  getJsonReplacer,
+} from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { findParent } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappPipesContext/ZappPipesEntryContext";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -722,8 +725,8 @@ export function NavigationProvider({ children }: Props) {
       getNestedEntry,
       key: state?.location?.key,
       modalData: state.stack.modal?.state ?? null,
-      openModal: openModal,
-      dismissModal: dismissModal,
+      openModal,
+      dismissModal,
       getModalState,
       videoModalState: state.options.videoModal,
       openVideoModal,
@@ -741,7 +744,15 @@ export function NavigationProvider({ children }: Props) {
       getStackForPathname,
       mainStack: state.stack.mainStack,
     }),
-    [rivers, plugins, JSON.stringify(state), appLaunched, startUpHooks]
+    [
+      rivers,
+      plugins,
+      // TODO: Compare entire screen data from state must be removed
+      // State size could be large ~150kb and take 80ms on android tv on 8 rails
+      JSON.stringify(state, getJsonReplacer()),
+      appLaunched,
+      startUpHooks,
+    ]
   );
 
   // when running the tests, we pass the dispatch function

package/App/NavigationProvider/__tests__/navigationProvider.test.tsx

@@ -461,48 +461,4 @@ describe("<NavigationProvider />", () => {
       });
     });
   });
-
-  describe("modal feature", () => {
-    it("sets the modalState when opening a modal", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.get).toMatchSnapshot();
-    });
-
-    it("removes the visible flag when dismissing a modal", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-      act(() => view.props.navigator.dismissModal());
-      expect(view.props.navigator.getModalState().visible).toBeFalsy();
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-    });
-
-    it("should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-
-      act(() =>
-        view.props.navigator.openModalBottomSheet({
-          ModalBottomSheetContent: rivers.A1234,
-          modalBottomSheetContentProps: { some: "props" },
-        })
-      );
-
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-      act(() => view.props.navigator.closeModalBottomSheet());
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-    });
-  });
 });

package/App/index.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
+
 import {
   initialWindowMetrics,
   SafeAreaProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "13.0.0-alpha.6400875052",
+  "version": "13.0.0-alpha.6444233049",
   "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": "13.0.0-alpha.6400875052",
-    "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.6400875052",
-    "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.6400875052",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.6400875052",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.6400875052",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.6400875052",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6400875052",
+    "@applicaster/applicaster-types": "13.0.0-alpha.6444233049",
+    "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.6444233049",
+    "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.6444233049",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.6444233049",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.6444233049",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.6444233049",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6444233049",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",

package/App/NavigationProvider/__tests__/__snapshots__/navigationProvider.test.tsx.snap

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<NavigationProvider /> modal feature removes the visible flag when dismissing a modal 1`] = `
-{
-  "options": {
-    "animated": true,
-    "animationType": "slide",
-    "onDismiss": [Function],
-    "onRequestClose": [Function],
-    "onShow": [Function],
-    "presentationStyle": "overFullScreen",
-    "transparent": true,
-  },
-  "props": undefined,
-  "screen": {
-    "id": "A1234",
-    "navigations": [],
-    "ui_components": [],
-  },
-  "visible": true,
-}
-`;
-
-exports[`<NavigationProvider /> modal feature removes the visible flag when dismissing a modal 2`] = `
-{
-  "options": {},
-  "props": {},
-  "screen": null,
-  "visible": false,
-}
-`;
-
-exports[`<NavigationProvider /> modal feature sets the modalState when opening a modal 1`] = `undefined`;
-
-exports[`<NavigationProvider /> modal feature should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet 1`] = `
-{
-  "options": {
-    "animated": false,
-    "animationType": "none",
-    "onDismiss": [Function],
-    "onRequestClose": [Function],
-    "onShow": [Function],
-    "presentationStyle": "overFullScreen",
-    "transparent": true,
-  },
-  "props": {},
-  "screen": {
-    "ModalBottomSheetContent": {
-      "id": "A1234",
-      "navigations": [],
-      "ui_components": [],
-    },
-    "modalBottomSheetContentProps": {
-      "some": "props",
-    },
-  },
-  "visible": true,
-}
-`;
-
-exports[`<NavigationProvider /> modal feature should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet 2`] = `
-{
-  "options": {},
-  "props": {},
-  "screen": null,
-  "visible": false,
-}
-`;