@applicaster/zapp-react-native-ui-components 16.0.0-rc.42 → 16.0.0-rc.44

package/Components/ModalComponent/BottomSheetDragArea.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import { View } from "react-native";
+import { useBottomSheet } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+/**
+ * Turns its children into a drag zone for the enclosing DraggableBottomSheet:
+ * dragging here moves/dismisses the sheet (used for the modal header bar).
+ * Outside a sheet (no context) it renders children unchanged.
+ */
+export const BottomSheetDragArea = ({
+  children,
+}: {
+  children: React.ReactElement;
+}) => {
+  const sheet = useBottomSheet();
+
+  // Outside a sheet (no context) render children unchanged.
+  if (!sheet) return children;
+
+  return (
+    <PanGestureHandler
+      simultaneousHandlers={[sheet.masterDrawerRef]}
+      shouldCancelWhenOutside={false}
+      onGestureEvent={sheet.onDragGestureEvent}
+      onHandlerStateChange={sheet.onDragStateChange}
+    >
+      {/* Old-API PanGestureHandler needs a host-component child; children may
+          be a function component (e.g. ModalHeader), so wrap in a View. */}
+      <View>{children}</View>
+    </PanGestureHandler>
+  );
+};

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -6,11 +6,11 @@ import { ItemProps } from "./Button/Item";
 import { ItemLabelProps } from "./Button/ItemLabel";
 import { getItemIconProps, getItemLabelProps, getItemProps } from "./utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
 import type { PluginConfiguration } from "./";
 
 import { ModalHeader as DefaultModalHeader } from "./Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BottomSheetDragArea } from "./BottomSheetDragArea";
 
 type ModalComponentProps = {
   items: any[];
@@ -55,8 +55,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent: ModalHeader = DefaultModalHeader,
-
+    headerComponent = DefaultModalHeader,
     scrollViewContent = null,
 
     buttonComponent: ButtonComponent = Button,
@@ -72,6 +71,8 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
+  const Header = headerComponent;
+
   useEffect(() => {
     if (currentRoute !== route.current) {
       props.dismiss();
@@ -107,13 +108,20 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
         paddingTop: paddingTop,
       }}
     >
-      <ModalHeader
-        dismiss={dismiss}
-        configuration={theme}
-        summary={summary}
-        title={title}
-      />
+      {Header ? (
+        <BottomSheetDragArea>
+          <Header
+            dismiss={dismiss}
+            configuration={theme}
+            summary={summary}
+            title={title}
+          />
+        </BottomSheetDragArea>
+      ) : null}
       <ScrollView
+        overScrollMode="never"
+        bounces={false}
+        showsVerticalScrollIndicator={false}
         contentContainerStyle={{
           paddingBottom: paddingBottom + bottomInset,
         }}
@@ -123,7 +131,6 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
               scrollViewContent.renderItem(item, index)
             )
           : null}
-
         {!scrollViewContent &&
           items.map((item, index) =>
             item ? (

package/Components/ModalComponent/__tests__/BottomSheetDragArea.test.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, screen } from "@testing-library/react-native";
+import { BottomSheetDragArea } from "../BottomSheetDragArea";
+import { BottomSheetContext } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+// Reveal PanGestureHandler and capture its props.
+jest.mock("react-native-gesture-handler", () => {
+  const { View } = require("react-native");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  return {
+    __esModule: true,
+    ...actual,
+    PanGestureHandler: ({
+      children,
+      onGestureEvent,
+      onHandlerStateChange,
+      simultaneousHandlers,
+    }: any) => (
+      <View
+        testID="drag-pan"
+        onGestureEvent={onGestureEvent}
+        onHandlerStateChange={onHandlerStateChange}
+        simultaneousHandlers={simultaneousHandlers}
+      >
+        {children}
+      </View>
+    ),
+  };
+});
+
+const makeValue = () => ({
+  scrollRef: React.createRef<any>(),
+  masterDrawerRef: React.createRef<any>(),
+  drawerRef: React.createRef<any>(),
+  onScroll: jest.fn(),
+  setBodyDragEnabled: jest.fn(),
+  onDragGestureEvent: jest.fn(),
+  onDragStateChange: jest.fn(),
+});
+
+describe("BottomSheetDragArea", () => {
+  it("wraps children in a sheet-wired PanGestureHandler when inside a sheet", () => {
+    const value = makeValue();
+
+    render(
+      <BottomSheetContext.Provider value={value}>
+        <BottomSheetDragArea>
+          <Text testID="child">hi</Text>
+        </BottomSheetDragArea>
+      </BottomSheetContext.Provider>
+    );
+
+    const pan = screen.getByTestId("drag-pan");
+    expect(pan.props.onGestureEvent).toBe(value.onDragGestureEvent);
+    expect(pan.props.onHandlerStateChange).toBe(value.onDragStateChange);
+
+    expect(pan.props.simultaneousHandlers).toEqual([value.masterDrawerRef]);
+
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+
+  it("renders children bare when used outside a sheet", () => {
+    render(
+      <BottomSheetDragArea>
+        <Text testID="child">hi</Text>
+      </BottomSheetDragArea>
+    );
+
+    expect(screen.queryByTestId("drag-pan")).toBeNull();
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.42",
+  "version": "16.0.0-rc.44",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.42",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.42",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.42",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.42",
+    "@applicaster/applicaster-types": "16.0.0-rc.44",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.44",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.44",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.44",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",