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

package/src/web/ModalPresenter.ts

@@ -3,6 +3,7 @@
 import {
   canScrollWithin,
   clipOverflow,
+  inlineInsets,
   readKeyboardHeight,
   readSafeAreaInsets,
   toCSSColor,
@@ -22,6 +23,10 @@ export interface ModalElements {
   /** Hosts the React content. */
   content: HTMLElement;
   grabber: HTMLElement;
+  /** Behind the sheet, uncovered as it's pulled down to refresh. */
+  refreshIndicator: HTMLElement;
+  /** The spinning ring inside `refreshIndicator`. */
+  refreshSpinner: HTMLElement;
 }
 
 export interface PresenterListener {
@@ -34,6 +39,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 +52,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 +69,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 +86,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 +142,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 +158,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 +216,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 +248,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 +313,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

@@ -6,15 +6,22 @@ import {
   findVerticalScroller,
   isTextInput,
   prefersReducedMotion,
+  REFRESH_INDICATOR_SIZE,
   suppressNextClick,
+  toCSSColor,
   type Insets,
   type Size,
 } from './dom';
 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, and
+ * where it rests while refreshing.
+ */
+const REFRESH_THRESHOLD = 56;
 /**
  * Extra sheet height below the viewport so it stays attached to the bottom
  * edge while rubber-banding upward.
@@ -47,39 +54,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)
+    ),
   };
 }
 
@@ -107,6 +152,9 @@ export class SheetPresenter extends ModalPresenter {
   private drag: Drag | null = null;
   /** Vertical velocity of the swipe that requested the dismissal. */
   private releaseVelocity = 0;
+  /** The sheet rests below its lowest detent, the indicator spinning above it. */
+  private refreshing = false;
+  private refreshSpin: Animation | null = null;
   /** The sheet's top edge in the viewport. */
   private readonly top = new AnimatedValue(0, 0.5, (value) =>
     this.render(value)
@@ -118,6 +166,7 @@ export class SheetPresenter extends ModalPresenter {
       Math.max(config.initialDetentIndex, 0),
       this.detents.length - 1
     );
+    this.refreshing = config.refreshing ?? false;
   }
 
   snapToDetent(index: number) {
@@ -159,7 +208,10 @@ export class SheetPresenter extends ModalPresenter {
     });
   }
 
-  protected configDidChange() {
+  protected configDidChange(previous: ModalConfig) {
+    if (previous.refreshing !== this.config.refreshing) {
+      this.refreshing = this.config.refreshing ?? false;
+    }
     this.selectedIndex = Math.min(this.selectedIndex, this.detents.length - 1);
     this.layout();
     this.animateToRest();
@@ -183,6 +235,8 @@ export class SheetPresenter extends ModalPresenter {
   protected teardown() {
     super.teardown();
     this.cancelDrag();
+    this.refreshSpin?.cancel();
+    this.refreshSpin = null;
     const surface = this.elements?.surface;
     surface?.removeEventListener('touchstart', this.handleTouchStart);
     surface?.removeEventListener('touchmove', this.handleTouchMove);
@@ -200,7 +254,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 +268,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,16 +285,31 @@ 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[] {
     return this.detents.map((_, index) => this.restingTop(index));
   }
 
+  /** Where the sheet settles on `detents[index]`: held below the lowest detent while refreshing. */
+  private settledTop(index: number): number {
+    const top = this.restingTop(index);
+    if (!this.refreshing || Math.abs(top - Math.max(...this.detentTops)) >= 1)
+      return top;
+    return top + REFRESH_THRESHOLD;
+  }
+
+  private get settledTops(): number[] {
+    return this.detents.map((_, index) => this.settledTop(index));
+  }
+
   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`,
@@ -257,6 +324,10 @@ export class SheetPresenter extends ModalPresenter {
     content.style.width = `${width}px`;
     content.style.height = `${this.maximumDetentValue}px`;
     grabber.style.display = this.config.grabberVisible ? '' : 'none';
+    this.elements!.refreshSpinner.style.color =
+      this.config.refreshIndicatorColor != null
+        ? toCSSColor(this.config.refreshIndicatorColor)
+        : 'GrayText';
 
     let height = contentHeight(this.config.detents, this.maximumDetentValue);
     if (this.config.keyboardBehavior === 'resize') {
@@ -270,6 +341,38 @@ export class SheetPresenter extends ModalPresenter {
     if (!this.elements) return;
     this.elements.surface.style.transform = `translate3d(0, ${top}px, 0)`;
     this.elements.backdrop.style.opacity = String(this.backdropAlpha(top));
+    this.renderRefreshIndicator(top);
+  }
+
+  /**
+   * Centered in the gap a pull uncovers below the lowest detent, fading in
+   * as the pull nears the threshold.
+   */
+  private renderRefreshIndicator(top: number) {
+    const { refreshIndicator, refreshSpinner } = this.elements!;
+    const visible =
+      this.config.refreshing != null &&
+      !this.entering &&
+      !this.isDismissing &&
+      !this.isOffscreen;
+    const lowest = Math.max(...this.detentTops);
+    const progress = visible
+      ? Math.min(Math.max((top - lowest) / REFRESH_THRESHOLD, 0), 1)
+      : 0;
+    const x = (this.viewport.width - REFRESH_INDICATOR_SIZE) / 2;
+    const y = top - (REFRESH_THRESHOLD + REFRESH_INDICATOR_SIZE) / 2;
+    refreshIndicator.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    refreshIndicator.style.opacity = String(progress);
+    if (progress > 0 && !this.refreshSpin) {
+      this.refreshSpin =
+        refreshSpinner.animate?.(
+          [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
+          { duration: 800, iterations: Infinity }
+        ) ?? null;
+    } else if (progress === 0 && this.refreshSpin) {
+      this.refreshSpin.cancel();
+      this.refreshSpin = null;
+    }
   }
 
   /** Fully dimmed at every detent; fades out below the lowest one. */
@@ -286,7 +389,7 @@ export class SheetPresenter extends ModalPresenter {
 
   private settle(motion: Motion, velocity?: number) {
     this.top.animateTo(
-      this.restingTop(this.selectedIndex),
+      this.settledTop(this.selectedIndex),
       this.motion(motion),
       {
         velocity,
@@ -324,6 +427,9 @@ export class SheetPresenter extends ModalPresenter {
       active: false,
       rawTop: 0,
       sheetDrove: false,
+      contentScrolled: false,
+      canRefresh: false,
+      refreshArmed: false,
       samples: [],
     };
   }
@@ -351,8 +457,15 @@ 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 &&
+      !this.refreshing &&
+      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 +492,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) {
@@ -406,7 +531,11 @@ export class SheetPresenter extends ModalPresenter {
 
     const velocity = drag.sheetDrove ? this.velocity(drag) : 0;
     const top = this.top.value;
-    const tops = this.detentTops;
+    if (drag.refreshArmed && this.config.refreshing != null) {
+      // Settles on the refreshing position; React confirms or ends it.
+      this.refreshing = true;
+    }
+    const tops = this.settledTops;
     const lowest = Math.max(...tops);
     // Where a fling of this velocity would come to rest.
     const projected = top + velocity * 0.2;
@@ -434,6 +563,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). */
@@ -464,7 +596,7 @@ export class SheetPresenter extends ModalPresenter {
 
   /** Rubber-bands above the tallest detent, and below the lowest one when swiping can't dismiss. */
   private constrained(top: number): number {
-    const tops = this.detentTops;
+    const tops = this.settledTops;
     const minTop = Math.min(...tops);
     const maxTop = Math.max(...tops);
     const dimension = Math.max(this.viewport.height, 1);

package/src/web/dom.ts

@@ -17,6 +17,9 @@ export const ZERO_INSETS: Insets = { top: 0, right: 0, bottom: 0, left: 0 };
 export const canUseDOM =
   typeof window !== 'undefined' && typeof document !== 'undefined';
 
+/** Width and height of the pull-to-refresh indicator. */
+export const REFRESH_INDICATOR_SIZE = 24;
+
 /** Converts a color from `processColor` (0xAARRGGBB) to CSS, scaling its alpha by `opacity`. */
 export function toCSSColor(argb: number, opacity = 1): string {
   // As an unsigned 32-bit value, whatever the sign it was passed with.
@@ -53,6 +56,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.