@rn-tools/sheets 0.1.4 → 3.0.2

package/src/index.ts

@@ -1 +1,4 @@
-export * from './native-sheets-view'
+export * from "./native-sheets-view";
+export * from "./sheets-client";
+export * from "./sheet-slot";
+export * from "./sheets-provider";

package/src/native-sheets-view.tsx

@@ -6,8 +6,11 @@ import {
   ViewStyle,
   Platform,
   LayoutChangeEvent,
+  StyleSheet,
+  useWindowDimensions,
 } from "react-native";
 import { requireNativeViewManager } from "expo-modules-core";
+import { useSafeAreaInsets } from "@rn-tools/core";
 
 type SheetState = "DRAGGING" | "OPEN" | "SETTLING" | "HIDDEN";
 
@@ -17,25 +20,19 @@ type ChangeEvent<T extends SheetState, P = unknown> = {
 };
 
 type OpenChangeEvent = ChangeEvent<"OPEN", { index: number }>;
-type DraggingChangeEvent = ChangeEvent<"DRAGGING">;
-type SettlingChangeEvent = ChangeEvent<"SETTLING">;
 type HiddenChangeEvent = ChangeEvent<"HIDDEN">;
 
-type SheetChangeEvent =
-  | OpenChangeEvent
-  | DraggingChangeEvent
-  | SettlingChangeEvent
-  | HiddenChangeEvent;
+export type SheetChangeEvent = OpenChangeEvent | HiddenChangeEvent;
 
 type NativeOnChangeEvent = NativeSyntheticEvent<SheetChangeEvent>;
 
-type AppearanceIOS = {
+export type AppearanceIOS = {
   grabberVisible?: boolean;
   backgroundColor?: string;
   cornerRadius?: number;
 };
 
-type AppearanceAndroid = {
+export type AppearanceAndroid = {
   dimAmount?: number;
   cornerRadius?: number;
   backgroundColor?: string;
@@ -45,8 +42,10 @@ type NativeSheetViewProps = {
   children: React.ReactNode;
   snapPoints?: number[];
   isOpen: boolean;
-  openToIndex: number;
+  initialIndex: number;
   onDismiss: () => void;
+  canDismiss?: boolean;
+  onDismissPrevented: () => void;
   onStateChange: (event: NativeOnChangeEvent) => void;
   appearanceAndroid?: AppearanceAndroid;
   appearanceIOS?: AppearanceIOS;
@@ -60,17 +59,16 @@ export type BottomSheetProps = {
   containerStyle?: ViewStyle;
   snapPoints?: number[];
   isOpen: boolean;
-  openToIndex?: number;
-  onOpenChange: (isOpen: boolean) => void;
+  initialIndex?: number;
+  setIsOpen: (isOpen: boolean) => void;
+  onDismissed?: () => void;
+  canDismiss?: boolean;
+  onDismissPrevented?: () => void;
   onStateChange?: (event: SheetChangeEvent) => void;
   appearanceAndroid?: AppearanceAndroid;
   appearanceIOS?: AppearanceIOS;
 };
 
-// TODO:
-// - get sheet container height from native side and clamp maxHeight to that value
-//
-
 export function BottomSheet(props: BottomSheetProps) {
   const {
     onStateChange,
@@ -78,12 +76,22 @@ export function BottomSheet(props: BottomSheetProps) {
     snapPoints = [],
     containerStyle,
     isOpen,
-    openToIndex = 0,
-    onOpenChange: setIsOpen,
+    initialIndex = 0,
+    setIsOpen,
+    onDismissed,
     appearanceAndroid,
     appearanceIOS,
+    canDismiss = true,
+    onDismissPrevented,
   } = props;
 
+  const { height: windowHeight } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const maxSheetHeight = React.useMemo(
+    () => Math.max(0, windowHeight - insets.top - insets.bottom),
+    [windowHeight, insets.top, insets.bottom],
+  );
+
   const [layout, setLayout] = React.useState<LayoutRectangle>({
     height: 0,
     width: 0,
@@ -91,13 +99,35 @@ export function BottomSheet(props: BottomSheetProps) {
     y: 0,
   });
 
+  const hasOpened = React.useRef(false);
+
   const computedSnapPoints = React.useMemo(() => {
-    if (snapPoints.length === 0 && layout.height > 0) {
-      return [layout.height];
+    if (snapPoints.length === 0) {
+      if (layout.height === 0) {
+        return [];
+      }
+
+      return [Math.round(Math.min(layout.height, maxSheetHeight))];
+    }
+
+    let effectiveSnapPoints =
+      Platform.OS === "android" ? snapPoints.slice(0, 2) : [...snapPoints];
+
+    const snapPointsExceedingMaxHeight = snapPoints.filter(
+      (snapPoint) => snapPoint >= maxSheetHeight,
+    );
+
+    if (snapPointsExceedingMaxHeight.length > 0) {
+      effectiveSnapPoints = [
+        ...effectiveSnapPoints.filter(
+          (snapPoint) => snapPoint < maxSheetHeight,
+        ),
+        maxSheetHeight,
+      ];
     }
 
-    return Platform.OS === "android" ? snapPoints.slice(0, 2) : [...snapPoints];
-  }, [snapPoints, layout]);
+    return effectiveSnapPoints.map((snapPoint) => Math.round(snapPoint));
+  }, [layout.height, maxSheetHeight, snapPoints]);
 
   const maxHeight = React.useMemo(
     () =>
@@ -110,38 +140,92 @@ export function BottomSheet(props: BottomSheetProps) {
   const style = React.useMemo(() => {
     return {
       height: maxHeight,
+      borderTopLeftRadius: 16,
+      borderTopRightRadius: 16,
+      backgroundColor: "white",
       ...containerStyle,
     };
-  }, [maxHeight]);
+  }, [maxHeight, containerStyle]);
+
+  const computedIsOpen = React.useMemo(
+    () => isOpen && computedSnapPoints.length > 0,
+    [isOpen, computedSnapPoints],
+  );
+
+  const notifyDismissed = React.useCallback(
+    () => {
+      if (hasOpened.current) {
+        setIsOpen(false);
+      }
+      onDismissed?.();
+      hasOpened.current = false;
+    },
+    [setIsOpen, onDismissed],
+  );
 
   const handleOnDismiss = React.useCallback(() => {
-    setIsOpen(false);
-  }, []);
+    notifyDismissed();
+  }, [notifyDismissed]);
 
   const handleStateChange = React.useCallback(
     (event: NativeOnChangeEvent) => {
+      if (event.nativeEvent.type === "OPEN") {
+        hasOpened.current = true;
+      }
+
+      if (event.nativeEvent.type === "HIDDEN") {
+        notifyDismissed();
+      }
+
       onStateChange?.(event.nativeEvent);
     },
-    [onStateChange],
+    [onStateChange, notifyDismissed],
+  );
+
+  const handleLayout = React.useCallback(
+    (event: LayoutChangeEvent) => {
+      setLayout(event.nativeEvent.layout);
+    },
+    [],
+  );
+
+  const handleDismissWithChanges = React.useCallback(() => {
+    onDismissPrevented?.();
+  }, [onDismissPrevented]);
+
+  const isAutosized = React.useMemo(
+    () => snapPoints.length === 0,
+    [snapPoints],
   );
 
-  const handleLayout = React.useCallback((event: LayoutChangeEvent) => {
-    setLayout(event.nativeEvent.layout);
-  }, []);
+  const pointerEvents = React.useMemo(() => {
+    return isOpen ? "auto" : "none";
+  }, [isOpen]);
+
+  const innerStyle = React.useMemo(
+    () => (isAutosized ? undefined : StyleSheet.absoluteFill),
+    [isAutosized],
+  );
 
   return (
-    <NativeSheetsView
-      isOpen={isOpen}
-      openToIndex={openToIndex}
-      onDismiss={handleOnDismiss}
-      onStateChange={handleStateChange}
-      snapPoints={computedSnapPoints}
-      appearanceAndroid={appearanceAndroid}
-      appearanceIOS={appearanceIOS}
-    >
-      <View style={style} onLayout={handleLayout}>
-        {children}
-      </View>
-    </NativeSheetsView>
+    <View style={StyleSheet.absoluteFill} pointerEvents={pointerEvents}>
+      <NativeSheetsView
+        isOpen={computedIsOpen}
+        canDismiss={canDismiss}
+        initialIndex={initialIndex}
+        onDismiss={handleOnDismiss}
+        onStateChange={handleStateChange}
+        onDismissPrevented={handleDismissWithChanges}
+        snapPoints={computedSnapPoints}
+        appearanceAndroid={appearanceAndroid}
+        appearanceIOS={appearanceIOS}
+      >
+        <View style={style} collapsable={false}>
+          <View onLayout={handleLayout} style={innerStyle} collapsable={false}>
+            {children}
+          </View>
+        </View>
+      </NativeSheetsView>
+    </View>
   );
 }

package/src/sheet-slot.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { useStore } from "@rn-tools/core";
+import { BottomSheet } from "./native-sheets-view";
+import type { SheetChangeEvent } from "./native-sheets-view";
+import { SheetsContext, SheetsStoreContext } from "./sheets-client";
+import type { SheetEntry } from "./sheets-client";
+
+function SheetSlotEntry({ entry }: { entry: SheetEntry }) {
+  const sheets = React.useContext(SheetsContext);
+  const isOpen = entry.status !== "closing";
+
+  const handleStateChange = React.useCallback(
+    (event: SheetChangeEvent) => {
+      if (event.type === "OPEN") {
+        sheets?.markDidOpen(entry.key);
+      }
+
+      if (event.type === "HIDDEN") {
+        sheets?.markDidDismiss(entry.key);
+      }
+
+      entry.options.onStateChange?.(event);
+    },
+    [sheets, entry.key, entry.options.onStateChange],
+  );
+
+  const handleSetIsOpen = React.useCallback(
+    (nextIsOpen: boolean) => {
+      if (!nextIsOpen) {
+        sheets?.dismiss(entry.key);
+      }
+    },
+    [sheets, entry.key],
+  );
+
+  const handleDismissed = React.useCallback(() => {
+    sheets?.markDidDismiss(entry.key);
+  }, [sheets, entry.key]);
+
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      setIsOpen={handleSetIsOpen}
+      onDismissed={handleDismissed}
+      snapPoints={entry.options.snapPoints}
+      initialIndex={entry.options.initialIndex}
+      canDismiss={entry.options.canDismiss}
+      onDismissPrevented={entry.options.onDismissPrevented}
+      onStateChange={handleStateChange}
+      containerStyle={entry.options.containerStyle}
+      appearanceAndroid={entry.options.appearanceAndroid}
+      appearanceIOS={entry.options.appearanceIOS}
+    >
+      {entry.element}
+    </BottomSheet>
+  );
+}
+
+export function SheetSlot() {
+  const store = React.useContext(SheetsStoreContext);
+  const sheets = useStore(store, (state) => state.sheets);
+
+  return (
+    <>
+      {sheets.map((entry) => (
+        <SheetSlotEntry key={entry.key} entry={entry} />
+      ))}
+    </>
+  );
+}

package/src/sheets-client.test.tsx

@@ -0,0 +1,239 @@
+import * as React from "react";
+import { describe, expect, it } from "vitest";
+import { createSheets } from "./sheets-client";
+
+describe("createSheets", () => {
+  it("returns the expected client API", () => {
+    const sheets = createSheets();
+
+    expect(sheets.store).toBeDefined();
+    expect(typeof sheets.present).toBe("function");
+    expect(typeof sheets.dismiss).toBe("function");
+    expect(typeof sheets.dismissAll).toBe("function");
+    expect(typeof sheets.remove).toBe("function");
+    expect(typeof sheets.markDidOpen).toBe("function");
+    expect(typeof sheets.markDidDismiss).toBe("function");
+  });
+
+  it("starts with empty state", () => {
+    const sheets = createSheets();
+    expect(sheets.store.getState().sheets).toEqual([]);
+  });
+});
+
+describe("present", () => {
+  it("adds a new sheet in opening state", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>hello</span>);
+
+    const state = sheets.store.getState().sheets;
+    expect(typeof key).toBe("string");
+    expect(state).toHaveLength(1);
+    expect(state[0].key).toBe(key);
+    expect(state[0].status).toBe("opening");
+  });
+
+  it("stores element and options", () => {
+    const sheets = createSheets();
+    const element = <span>content</span>;
+    const options = { id: "edit", snapPoints: [300, 500] };
+
+    sheets.present(element, options);
+
+    const entry = sheets.store.getState().sheets[0];
+    expect(entry.element).toBe(element);
+    expect(entry.options).toBe(options);
+  });
+
+  it("reuses key and replaces entry when id already exists", () => {
+    const sheets = createSheets();
+
+    const key1 = sheets.present(<span>a</span>, { id: "edit", snapPoints: [240] });
+    sheets.markDidOpen(key1);
+
+    const key2 = sheets.present(<span>b</span>, { id: "edit", snapPoints: [320] });
+
+    const state = sheets.store.getState().sheets;
+    expect(key2).toBe(key1);
+    expect(state).toHaveLength(1);
+    expect(state[0].key).toBe(key1);
+    expect(state[0].status).toBe("opening");
+    expect(state[0].options.snapPoints).toEqual([320]);
+  });
+});
+
+describe("markDidOpen", () => {
+  it("transitions opening to open", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+
+    sheets.markDidOpen(key);
+
+    expect(sheets.store.getState().sheets[0].status).toBe("open");
+  });
+
+  it("is a no-op for closing sheets", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+    sheets.dismiss(key);
+
+    const before = sheets.store.getState();
+    sheets.markDidOpen(key);
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+
+  it("is a no-op for unknown key", () => {
+    const sheets = createSheets();
+    const before = sheets.store.getState();
+
+    sheets.markDidOpen("missing");
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});
+
+describe("dismiss", () => {
+  it("marks the top non-closing sheet as closing", () => {
+    const sheets = createSheets();
+    const keyA = sheets.present(<span>a</span>);
+    const keyB = sheets.present(<span>b</span>);
+    sheets.markDidOpen(keyA);
+    sheets.markDidOpen(keyB);
+
+    sheets.dismiss();
+
+    const state = sheets.store.getState().sheets;
+    expect(state[0].status).toBe("open");
+    expect(state[1].status).toBe("closing");
+  });
+
+  it("can dismiss by id", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>, { id: "edit" });
+    sheets.markDidOpen(key);
+
+    sheets.dismiss("edit");
+
+    expect(sheets.store.getState().sheets[0].status).toBe("closing");
+  });
+
+  it("can dismiss by key", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+    sheets.markDidOpen(key);
+
+    sheets.dismiss(key);
+
+    expect(sheets.store.getState().sheets[0].status).toBe("closing");
+  });
+
+  it("is a no-op when empty", () => {
+    const sheets = createSheets();
+    const before = sheets.store.getState();
+
+    sheets.dismiss();
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+
+  it("is a no-op for unknown id", () => {
+    const sheets = createSheets();
+    sheets.present(<span>a</span>);
+    const before = sheets.store.getState();
+
+    sheets.dismiss("missing");
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});
+
+describe("markDidDismiss", () => {
+  it("removes a closing sheet", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+    sheets.markDidOpen(key);
+    sheets.dismiss(key);
+
+    sheets.markDidDismiss(key);
+
+    expect(sheets.store.getState().sheets).toHaveLength(0);
+  });
+
+  it("does not remove opening sheet", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+    const before = sheets.store.getState();
+
+    sheets.markDidDismiss(key);
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+
+  it("is a no-op for unknown key", () => {
+    const sheets = createSheets();
+    const before = sheets.store.getState();
+
+    sheets.markDidDismiss("missing");
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});
+
+describe("dismissAll", () => {
+  it("marks every non-closing sheet as closing", () => {
+    const sheets = createSheets();
+    const keyA = sheets.present(<span>a</span>);
+    const keyB = sheets.present(<span>b</span>);
+    const keyC = sheets.present(<span>c</span>);
+    sheets.markDidOpen(keyA);
+    sheets.markDidOpen(keyB);
+    sheets.markDidOpen(keyC);
+    sheets.dismiss(keyB);
+
+    sheets.dismissAll();
+
+    const state = sheets.store.getState().sheets;
+    expect(state).toHaveLength(3);
+    expect(state.every((entry) => entry.status === "closing")).toBe(true);
+  });
+
+  it("is a no-op when empty", () => {
+    const sheets = createSheets();
+    const before = sheets.store.getState();
+
+    sheets.dismissAll();
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});
+
+describe("remove", () => {
+  it("removes by key", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+
+    sheets.remove(key);
+
+    expect(sheets.store.getState().sheets).toHaveLength(0);
+  });
+
+  it("removes by id", () => {
+    const sheets = createSheets();
+    sheets.present(<span>a</span>, { id: "edit" });
+
+    sheets.remove("edit");
+
+    expect(sheets.store.getState().sheets).toHaveLength(0);
+  });
+
+  it("is a no-op when no match", () => {
+    const sheets = createSheets();
+    sheets.present(<span>a</span>);
+    const before = sheets.store.getState();
+
+    sheets.remove("missing");
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});