@applicaster/zapp-react-native-ui-components 14.0.40-alpha.3512631313 → 14.0.40-rc.0

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[];
@@ -38,6 +38,10 @@ type ModalComponentProps = {
     theme: PluginConfiguration
   ) => ItemIconProps["asset"] | null;
   iconPlacement?: "left" | "right";
+  scrollViewContent?: {
+    renderItem: (item: any, index: number) => React.ReactNode;
+    items: any[];
+  } | null;
 };
 
 export function BottomSheetModalContent(props: ModalComponentProps) {
@@ -49,7 +53,9 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent: ModalHeader = DefaultModalHeader,
+    headerComponent = DefaultModalHeader,
+    scrollViewContent = null,
+
     buttonComponent: ButtonComponent = Button,
     getSelectedItemIcon = ({
       modal_bottom_sheet_item_selected_icon,
@@ -63,6 +69,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();
@@ -98,35 +106,48 @@ 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,
         }}
       >
-        {items.map((item, index) =>
-          item ? (
-            <ButtonComponent
-              key={index}
-              configuration={theme}
-              selectedItem={current_selection}
-              item={item}
-              onPress={handlePress}
-              label={theme[item?.label] ?? item?.label}
-              iconBaseProps={iconBaseProps}
-              itemBaseProps={itemBaseProps}
-              labelBaseProps={labelBaseProps}
-              selectedItemIcon={getSelectedItemIcon(theme)}
-              defaultItemIcon={getDefaultItemIcon(theme)}
-              iconPlacement={iconPlacement}
-            />
-          ) : null
-        )}
+        {scrollViewContent
+          ? scrollViewContent.items.map((item, index) =>
+              scrollViewContent.renderItem(item, index)
+            )
+          : null}
+        {!scrollViewContent &&
+          items.map((item, index) =>
+            item ? (
+              <ButtonComponent
+                key={index}
+                configuration={theme}
+                selectedItem={current_selection}
+                item={item}
+                onPress={handlePress}
+                label={theme[item?.label] ?? item?.label}
+                iconBaseProps={iconBaseProps}
+                itemBaseProps={itemBaseProps}
+                labelBaseProps={labelBaseProps}
+                selectedItemIcon={getSelectedItemIcon(theme)}
+                defaultItemIcon={getDefaultItemIcon(theme)}
+                iconPlacement={iconPlacement}
+              />
+            ) : null
+          )}
       </ScrollView>
     </View>
   );

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": "14.0.40-alpha.3512631313",
+  "version": "14.0.40-rc.0",
   "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": "14.0.40-alpha.3512631313",
-    "@applicaster/zapp-react-native-bridge": "14.0.40-alpha.3512631313",
-    "@applicaster/zapp-react-native-redux": "14.0.40-alpha.3512631313",
-    "@applicaster/zapp-react-native-utils": "14.0.40-alpha.3512631313",
+    "@applicaster/applicaster-types": "14.0.40-rc.0",
+    "@applicaster/zapp-react-native-bridge": "14.0.40-rc.0",
+    "@applicaster/zapp-react-native-redux": "14.0.40-rc.0",
+    "@applicaster/zapp-react-native-utils": "14.0.40-rc.0",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",