react-native-nitro-modal 0.2.0 → 0.3.0-rc

package/src/web/ModalController.ts

@@ -6,7 +6,12 @@ import type {
   NitroModalMethods,
   NitroModalProps,
 } from '../NitroModal.nitro';
-import { canUseDOM, estimateViewport, readSafeAreaInsets } from './dom';
+import {
+  canUseDOM,
+  estimateViewport,
+  inlineInsets,
+  readSafeAreaInsets,
+} from './dom';
 import { isSameConfig, makeConfig, type ModalConfig } from './ModalConfig';
 import type {
   ModalElements,
@@ -58,6 +63,8 @@ export class ModalController implements PresenterListener {
   private isAttached = false;
   private presenter: ModalPresenter | null = null;
   private elements: ModalElements | null = null;
+  /** Inline: the element the sheet fills. */
+  private host: HTMLElement | null = null;
   private lastContentArea: ModalContentArea | null = null;
 
   /** `setMounted` renders (or removes) the modal's elements. */
@@ -110,6 +117,15 @@ export class ModalController implements PresenterListener {
     }
   }
 
+  /** Inline: the element the sheet fills, rendered in place. */
+  hostDidChange(host: HTMLElement | null) {
+    if (host === this.host) return;
+    this.host = host;
+    if (!this.presenter) {
+      this.reportEstimatedContentArea();
+    }
+  }
+
   elementsDidMount(elements: ModalElements) {
     this.elements = elements;
     if (this.presenter && !this.presenter.isShown) {
@@ -273,6 +289,10 @@ export class ModalController implements PresenterListener {
     this.props?.onDetentChange?.(index);
   }
 
+  onPullToRefresh() {
+    this.props?.onPullToRefresh?.();
+  }
+
   onContentAreaChange(width: number, height: number) {
     const area = { width: Math.floor(width), height: Math.floor(height) };
     const last = this.lastContentArea;
@@ -288,12 +308,25 @@ export class ModalController implements PresenterListener {
   private reportEstimatedContentArea() {
     const { config } = this;
     if (!canUseDOM || !this.isAttached || !config) return;
+    if (config.isInline) {
+      const { host } = this;
+      if (!host || host.clientWidth === 0 || host.clientHeight === 0) return;
+      const viewport = { width: host.clientWidth, height: host.clientHeight };
+      const area = sheetContentArea(
+        config.detents,
+        viewport,
+        inlineInsets(host),
+        true
+      );
+      this.onContentAreaChange(area.width, area.height);
+      return;
+    }
     const viewport = estimateViewport();
     const insets = readSafeAreaInsets();
     const area =
       config.mode === 'popup'
         ? popupContentArea(viewport, insets)
-        : sheetContentArea(config.detents, viewport, insets);
+        : sheetContentArea(config.detents, viewport, insets, false);
     this.onContentAreaChange(area.width, area.height);
   }
 

package/src/web/ModalPresenter.ts

@@ -3,6 +3,7 @@
 import {
   canScrollWithin,
   clipOverflow,
+  inlineInsets,
   readKeyboardHeight,
   readSafeAreaInsets,
   toCSSColor,
@@ -34,6 +35,8 @@ export interface PresenterListener {
   onSwipeDismiss(): void;
   onDetentChange(index: number): void;
   onContentAreaChange(width: number, height: number): void;
+  /** The user pulled the sheet past its lowest detent and let go. */
+  onPullToRefresh(): void;
 }
 
 /**
@@ -45,6 +48,9 @@ export interface PresenterListener {
  * Transitions are interruptible: dismissing mid-enter turns the enter around,
  * and `cancelDismiss` turns an exit back around. Once an exit starts the modal
  * stops taking input.
+ *
+ * Inline, the elements fill the host view in place of a full-window layer:
+ * only the surface takes input, and the keyboard is left to the page.
  */
 export abstract class ModalPresenter {
   protected elements: ModalElements | null = null;
@@ -59,6 +65,8 @@ export abstract class ModalPresenter {
   private finished = false;
   private observedContent: HTMLElement | null = null;
   private resizeObserver: ResizeObserver | null = null;
+  /** Inline: follows the host's size, which can change without a window resize. */
+  private hostObserver: ResizeObserver | null = null;
 
   constructor(
     protected config: ModalConfig,
@@ -74,18 +82,26 @@ export abstract class ModalPresenter {
     if (this.elements || this.finished) return;
     this.elements = elements;
     // The elements can outlive a previous presentation (an immediate re-present).
-    elements.overlay.style.pointerEvents = '';
+    this.setInteractive(true);
     elements.surface.style.overflow = clipOverflow();
     elements.surface.style.opacity = '';
     elements.surface.style.transform = '';
+    elements.backdrop.style.display = this.config.isInline ? 'none' : '';
 
     window.addEventListener('resize', this.handleResize);
-    window.visualViewport?.addEventListener('resize', this.handleKeyboard);
-    window.visualViewport?.addEventListener('scroll', this.handleKeyboard);
-    elements.backdrop.addEventListener('click', this.handleBackdropClick);
-    elements.overlay.addEventListener('wheel', this.handleWheel, {
-      passive: false,
-    });
+    if (this.config.isInline) {
+      if (typeof ResizeObserver !== 'undefined') {
+        this.hostObserver = new ResizeObserver(this.handleResize);
+        this.hostObserver.observe(elements.overlay);
+      }
+    } else {
+      window.visualViewport?.addEventListener('resize', this.handleKeyboard);
+      window.visualViewport?.addEventListener('scroll', this.handleKeyboard);
+      elements.backdrop.addEventListener('click', this.handleBackdropClick);
+      elements.overlay.addEventListener('wheel', this.handleWheel, {
+        passive: false,
+      });
+    }
     if (typeof ResizeObserver !== 'undefined') {
       this.resizeObserver = new ResizeObserver(this.handleContentResize);
     }
@@ -122,7 +138,7 @@ export abstract class ModalPresenter {
     if (!elements || this.isDismissing || this.finished) return;
     this.isDismissing = true;
     this.entering = false;
-    elements.overlay.style.pointerEvents = 'none';
+    this.setInteractive(false);
     // Also hides the on-screen keyboard.
     const focused = document.activeElement;
     if (focused instanceof HTMLElement && elements.overlay.contains(focused)) {
@@ -138,7 +154,7 @@ export abstract class ModalPresenter {
   cancelDismiss(): boolean {
     if (!this.elements || !this.isDismissing || this.finished) return false;
     this.isDismissing = false;
-    this.elements.overlay.style.pointerEvents = '';
+    this.setInteractive(true);
     this.entering = true;
     this.animateIn();
     return true;
@@ -196,6 +212,8 @@ export abstract class ModalPresenter {
     this.elements?.overlay.removeEventListener('wheel', this.handleWheel);
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
+    this.hostObserver?.disconnect();
+    this.hostObserver = null;
     this.observedContent = null;
   }
 
@@ -226,14 +244,30 @@ export abstract class ModalPresenter {
         : 'Canvas';
   }
 
+  /** Inline, only the surface takes input; the rest reaches the page. */
+  private setInteractive(interactive: boolean) {
+    const { overlay, surface } = this.elements!;
+    if (this.config.isInline) {
+      overlay.style.pointerEvents = 'none';
+      surface.style.pointerEvents = interactive ? 'auto' : 'none';
+    } else {
+      overlay.style.pointerEvents = interactive ? '' : 'none';
+    }
+  }
+
   private measureViewport() {
     const { overlay } = this.elements!;
     this.viewport = {
       width: overlay.clientWidth,
       height: overlay.clientHeight,
     };
-    this.insets = readSafeAreaInsets();
-    this.keyboardHeight = readKeyboardHeight(this.viewport.height);
+    if (this.config.isInline) {
+      this.insets = inlineInsets(overlay);
+      this.keyboardHeight = 0;
+    } else {
+      this.insets = readSafeAreaInsets();
+      this.keyboardHeight = readKeyboardHeight(this.viewport.height);
+    }
   }
 
   /** Re-targets the observer at the content's root element. Returns whether its size changed. */
@@ -275,6 +309,7 @@ export abstract class ModalPresenter {
   };
 
   private handleKeyboard = () => {
+    if (this.config.isInline) return;
     const height = readKeyboardHeight(this.viewport.height);
     if (height === this.keyboardHeight) return;
     this.keyboardHeight = height;

package/src/web/SheetPresenter.ts

@@ -13,8 +13,10 @@ import {
 import type { ModalConfig } from './ModalConfig';
 import { ModalPresenter, type PresenterListener } from './ModalPresenter';
 
-/** Gap kept above the sheet at its tallest. */
+/** Gap kept above a modal sheet at its tallest. */
 const TOP_GAP = 10;
+/** How far below its lowest detent the sheet must be pulled to refresh. */
+const REFRESH_THRESHOLD = 56;
 /**
  * Extra sheet height below the viewport so it stays attached to the bottom
  * edge while rubber-banding upward.
@@ -47,39 +49,77 @@ interface Drag {
   rawTop: number;
   /** Whether the last movement moved the sheet rather than the scroller. */
   sheetDrove: boolean;
+  /**
+   * The scroller moved during this gesture. It then keeps the downward part
+   * too: scrolled content goes back to its top, and only a new gesture moves
+   * the sheet.
+   */
+  contentScrolled: boolean;
+  /** Started with the sheet resting on its lowest detent, so pulling it further down refreshes. */
+  canRefresh: boolean;
+  /** Pulled far enough that letting go refreshes. */
+  refreshArmed: boolean;
   samples: { time: number; y: number }[];
 }
 
-function sheetWidth(available: number): number {
-  return Math.min(available, MAX_WIDTH);
+function sheetWidth(available: number, isInline: boolean): number {
+  return isInline ? available : Math.min(available, MAX_WIDTH);
 }
 
 /** Tallest height the content may occupy (excludes the bottom safe area). */
-function maximumDetentValue(viewportHeight: number, insets: Insets): number {
-  return Math.max(0, viewportHeight - insets.top - insets.bottom - TOP_GAP);
+function maximumDetentValue(
+  viewportHeight: number,
+  insets: Insets,
+  isInline: boolean
+): number {
+  const gap = isInline ? 0 : TOP_GAP;
+  return Math.max(0, viewportHeight - insets.top - insets.bottom - gap);
+}
+
+/** Content height at `detent`; `fitContent` uses the measured `fitting` height. */
+function detentHeight(
+  detent: SheetDetent,
+  maximum: number,
+  fitting: number
+): number {
+  switch (detent) {
+    case 'small':
+      return maximum * 0.25;
+    case 'medium':
+      return maximum * 0.5;
+    case 'large':
+      return maximum;
+    case 'fitContent':
+      return Math.min(Math.max(fitting, 1), maximum);
+    default:
+      return Number.isFinite(detent)
+        ? Math.min(Math.max(detent, 1), maximum)
+        : maximum;
+  }
 }
 
 /** Height the content may occupy at the largest of `detents`. */
 function contentHeight(detents: SheetDetent[], maximum: number): number {
-  if (
-    detents.length === 0 ||
-    detents.includes('large') ||
-    detents.includes('fitContent')
-  ) {
-    return maximum;
-  }
-  return detents.includes('medium') ? maximum * 0.5 : maximum * 0.25;
+  if (detents.length === 0) return maximum;
+  // `fitContent` content can grow up to the maximum.
+  return Math.max(
+    ...detents.map((detent) => detentHeight(detent, maximum, maximum))
+  );
 }
 
 /** Best guess of the content area before the sheet is on screen. */
 export function sheetContentArea(
   detents: SheetDetent[],
   viewport: Size,
-  insets: Insets
+  insets: Insets,
+  isInline: boolean
 ): Size {
   return {
-    width: sheetWidth(viewport.width),
-    height: contentHeight(detents, maximumDetentValue(viewport.height, insets)),
+    width: sheetWidth(viewport.width, isInline),
+    height: contentHeight(
+      detents,
+      maximumDetentValue(viewport.height, insets, isInline)
+    ),
   };
 }
 
@@ -200,7 +240,11 @@ export class SheetPresenter extends ModalPresenter {
   }
 
   private get maximumDetentValue(): number {
-    return maximumDetentValue(this.viewport.height, this.insets);
+    return maximumDetentValue(
+      this.viewport.height,
+      this.insets,
+      this.config.isInline
+    );
   }
 
   private get keyboardLift(): number {
@@ -210,17 +254,11 @@ export class SheetPresenter extends ModalPresenter {
   }
 
   private height(detent: SheetDetent): number {
-    const maximum = this.maximumDetentValue;
-    switch (detent) {
-      case 'small':
-        return maximum * 0.25;
-      case 'medium':
-        return maximum * 0.5;
-      case 'large':
-        return maximum;
-      case 'fitContent':
-        return Math.min(Math.max(this.contentSize.height, 1), maximum);
-    }
+    return detentHeight(
+      detent,
+      this.maximumDetentValue,
+      this.contentSize.height
+    );
   }
 
   /** Sheet top when resting on `detents[index]`. The bottom safe area is added below the content. */
@@ -233,7 +271,10 @@ export class SheetPresenter extends ModalPresenter {
       this.insets.bottom -
       this.keyboardLift -
       this.height(detent);
-    return Math.max(top, this.insets.top + TOP_GAP);
+    return Math.max(
+      top,
+      this.insets.top + (this.config.isInline ? 0 : TOP_GAP)
+    );
   }
 
   private get detentTops(): number[] {
@@ -242,7 +283,7 @@ export class SheetPresenter extends ModalPresenter {
 
   private layout() {
     const { surface, content, grabber } = this.elements!;
-    const width = sheetWidth(this.viewport.width);
+    const width = sheetWidth(this.viewport.width, this.config.isInline);
     const radius = `${this.config.cornerRadius ?? DEFAULT_CORNER_RADIUS}px`;
     Object.assign(surface.style, {
       left: `${(this.viewport.width - width) / 2}px`,
@@ -324,6 +365,9 @@ export class SheetPresenter extends ModalPresenter {
       active: false,
       rawTop: 0,
       sheetDrove: false,
+      contentScrolled: false,
+      canRefresh: false,
+      refreshArmed: false,
       samples: [],
     };
   }
@@ -351,8 +395,14 @@ export class SheetPresenter extends ModalPresenter {
 
   private activate(drag: Drag) {
     drag.active = true;
+    const isSettled = !this.top.isAnimating;
     this.top.stop();
     drag.rawTop = this.top.value;
+    drag.canRefresh =
+      this.config.pullToRefreshEnabled &&
+      !this.config.dismissOnSwipe &&
+      isSettled &&
+      Math.abs(drag.rawTop - Math.max(...this.detentTops)) < 1;
     const { surface } = this.elements!;
     // A native scroll on an ancestor makes React Native Web cancel the press
     // under the pointer, so dragging from a button doesn't leave it pressed.
@@ -379,21 +429,33 @@ export class SheetPresenter extends ModalPresenter {
     const { scroller } = drag;
     if (scroller) {
       // The browser's own scrolling is prevented for this gesture, so the
-      // content is scrolled here whenever the sheet can't move.
+      // content is scrolled here whenever the sheet can't move. Up: expand
+      // the sheet before scrolling. Down: scroll back to the top before
+      // collapsing the sheet, in a separate gesture.
       const minTop = Math.min(...this.detentTops);
       const drive =
-        delta < 0 ? drag.rawTop > minTop + 0.5 : scroller.scrollTop <= 0;
+        delta < 0
+          ? drag.rawTop > minTop + 0.5
+          : !drag.contentScrolled && scroller.scrollTop <= 0;
       if (drive) {
         drag.rawTop = Math.max(drag.rawTop + delta, minTop);
       } else {
         scroller.scrollTop -= delta;
+        if (delta !== 0) {
+          drag.contentScrolled = true;
+        }
       }
       drag.sheetDrove = drive;
     } else {
       drag.rawTop += delta;
       drag.sheetDrove = true;
     }
-    this.top.set(this.constrained(drag.rawTop));
+    const top = this.constrained(drag.rawTop);
+    if (drag.canRefresh) {
+      drag.refreshArmed =
+        top - Math.max(...this.detentTops) >= REFRESH_THRESHOLD;
+    }
+    this.top.set(top);
   }
 
   private release(drag: Drag) {
@@ -434,6 +496,9 @@ export class SheetPresenter extends ModalPresenter {
       this.listener.onDetentChange(index);
     }
     this.settle(SETTLE, velocity);
+    if (drag.refreshArmed) {
+      this.listener.onPullToRefresh();
+    }
   }
 
   /** Abandons the gesture without settling (the exit or the content takes over). */

package/src/web/dom.ts

@@ -53,6 +53,23 @@ export function readSafeAreaInsets(): Insets {
   };
 }
 
+/** The part of the safe area insets that `element` overlaps. */
+export function inlineInsets(element: Element): Insets {
+  const safeArea = readSafeAreaInsets();
+  const rect = element.getBoundingClientRect();
+  const clamp = (value: number, max: number) =>
+    Math.min(Math.max(value, 0), max);
+  return {
+    top: clamp(safeArea.top - rect.top, rect.height),
+    right: clamp(rect.right - (window.innerWidth - safeArea.right), rect.width),
+    bottom: clamp(
+      rect.bottom - (window.innerHeight - safeArea.bottom),
+      rect.height
+    ),
+    left: clamp(safeArea.left - rect.left, rect.width),
+  };
+}
+
 /**
  * Height of the on-screen keyboard over a layout viewport `layoutHeight` tall.
  * Mobile browsers keep the layout viewport and shrink the visual one.