react-native-nitro-modal 0.1.4 → 0.2.0

package/lib/module/web/ModalController.js

@@ -0,0 +1,279 @@
+"use strict";
+
+/// <reference lib="dom" />
+
+import { canUseDOM, estimateViewport, readSafeAreaInsets } from "./dom.js";
+import { isSameConfig, makeConfig } from "./ModalConfig.js";
+import { popupContentArea, PopupPresenter } from "./PopupPresenter.js";
+import { sheetContentArea, SheetPresenter } from "./SheetPresenter.js";
+/**
+ * The web counterpart of the native `HybridNitroModal`: receives the host
+ * view's props and drives one presenter per presentation.
+ *
+ * Presentation is a small state machine so that rapid `isOpen` toggles, user
+ * dismissals and unmounts always settle on a consistent state, and every
+ * accepted present request ends with exactly one `onDismiss`. Transitions are
+ * interrupted rather than queued: closing mid-enter turns the enter around,
+ * and opening mid-exit turns the exit around (that session carries on, so it
+ * gets no `onDismiss` and at most one `onPresent`).
+ */
+export class ModalController {
+  methods = {
+    present: () => this.requestPresent(),
+    dismiss: () => this.requestDismiss('programmatic'),
+    snapToDetent: index => {
+      if (Number.isFinite(index)) {
+        this.presenter?.snapToDetent(Math.trunc(index));
+      }
+    }
+  };
+  props = null;
+  config = null;
+  isOpen = false;
+  phase = 'idle';
+  /** What React (or an imperative call) asked for. */
+  wantsOpen = false;
+  /** A present request was accepted and its `onDismiss` is still owed. */
+  sessionActive = false;
+  /** `onPresent` was sent for the current session. */
+  presentSent = false;
+  dismissReason = 'programmatic';
+  reconcileScheduled = false;
+  isAttached = false;
+  presenter = null;
+  elements = null;
+  lastContentArea = null;
+
+  /** `setMounted` renders (or removes) the modal's elements. */
+  constructor(setMounted) {
+    this.setMounted = setMounted;
+  }
+
+  // Host view lifecycle
+
+  attach() {
+    this.isAttached = true;
+    window.addEventListener('resize', this.handleWindowResize);
+  }
+
+  /** The host view unmounted. Also runs for React's strict-mode remount, so `attach` must work again. */
+  detach() {
+    this.isAttached = false;
+    window.removeEventListener('resize', this.handleWindowResize);
+    this.presenter?.destroy();
+    this.presenter = null;
+    this.phase = 'idle';
+    this.wantsOpen = false;
+    this.sessionActive = false;
+    this.presentSent = false;
+    this.dismissReason = 'programmatic';
+    // Applied again from the props on the next `update`.
+    this.isOpen = false;
+    this.config = null;
+    this.lastContentArea = null;
+    this.setMounted(false);
+  }
+
+  /** The host view rendered with new props. */
+  update(props) {
+    this.props = props;
+    const next = makeConfig(props);
+    if (!this.config || !isSameConfig(next, this.config)) {
+      this.config = next;
+      if (this.presenter) {
+        this.presenter.update(next);
+      } else {
+        this.reportEstimatedContentArea();
+      }
+    }
+    if (props.isOpen !== this.isOpen) {
+      this.isOpen = props.isOpen;
+      if (props.isOpen) {
+        this.requestPresent();
+      } else {
+        this.requestDismiss('programmatic');
+      }
+    }
+  }
+  elementsDidMount(elements) {
+    this.elements = elements;
+    if (this.presenter && !this.presenter.isShown) {
+      this.presenter.show(elements);
+    }
+  }
+  elementsWillUnmount() {
+    this.elements = null;
+  }
+  contentDidRender() {
+    this.presenter?.contentDidRender();
+  }
+
+  /** Escape key, routed by React Native Web's `Modal` to the topmost modal. */
+  handleBackPress = () => {
+    // Already on its way out: the press is spent.
+    if (!this.isVisible) return;
+    this.props?.onBackButtonPress?.();
+    if (!this.config?.dismissOnBackButton) return;
+    this.requestDismiss('backButton');
+    this.reconcile();
+  };
+
+  // State machine
+
+  get isVisible() {
+    return this.phase === 'presenting' || this.phase === 'presented';
+  }
+  requestPresent() {
+    if (!this.isAttached) return;
+    this.wantsOpen = true;
+    this.sessionActive = true;
+    this.scheduleReconcile();
+  }
+  requestDismiss(reason) {
+    if (this.wantsOpen) {
+      this.dismissReason = reason;
+    }
+    this.wantsOpen = false;
+    this.scheduleReconcile();
+  }
+
+  /** Coalesces the requests made in one task, e.g. an open and a close in the same handler. */
+  scheduleReconcile() {
+    if (this.reconcileScheduled) return;
+    this.reconcileScheduled = true;
+    queueMicrotask(() => {
+      this.reconcileScheduled = false;
+      if (this.isAttached) {
+        this.reconcile();
+      }
+    });
+  }
+  reconcile() {
+    switch (this.phase) {
+      case 'presenting':
+      case 'presented':
+        if (!this.wantsOpen) {
+          this.startDismiss();
+        }
+        break;
+      case 'dismissing':
+        if (this.wantsOpen && this.presenter?.cancelDismiss()) {
+          this.phase = 'presenting';
+          this.dismissReason = 'programmatic';
+        }
+        break;
+      case 'idle':
+        if (this.wantsOpen) {
+          this.startPresent();
+        } else if (this.sessionActive) {
+          this.endSession(); // Cancelled before anything appeared.
+        }
+        break;
+    }
+  }
+  startPresent() {
+    const {
+      config
+    } = this;
+    if (!canUseDOM || !config) return;
+    const presenter = config.mode === 'popup' ? new PopupPresenter(config, this) : new SheetPresenter(config, this);
+    this.presenter = presenter;
+    this.phase = 'presenting';
+    this.setMounted(true);
+    // Still mounted from a presentation that just ended.
+    if (this.elements) {
+      presenter.show(this.elements);
+    }
+  }
+  startDismiss() {
+    const {
+      presenter
+    } = this;
+    if (!presenter?.isShown) {
+      // Its elements never mounted.
+      presenter?.destroy();
+      this.finishDismiss();
+      return;
+    }
+    this.phase = 'dismissing';
+    presenter.dismiss();
+  }
+  finishDismiss() {
+    this.phase = 'idle';
+    this.presenter = null;
+    this.setMounted(false);
+    this.endSession();
+    this.reconcile();
+  }
+  endSession() {
+    if (!this.sessionActive) return;
+    const reason = this.dismissReason;
+    this.dismissReason = 'programmatic';
+    this.presentSent = false;
+    // A present requested while we were dismissing starts a new session.
+    this.sessionActive = this.wantsOpen;
+    if (this.isAttached) {
+      this.props?.onDismiss?.(reason);
+    }
+  }
+
+  // PresenterListener
+
+  onPresented() {
+    if (this.phase !== 'presenting') return;
+    this.phase = 'presented';
+    if (!this.presentSent) {
+      this.presentSent = true;
+      this.props?.onPresent?.();
+    }
+    this.reconcile();
+  }
+  onDismissed() {
+    this.finishDismiss();
+  }
+  onBackdropPress() {
+    this.props?.onBackdropPress?.();
+    if (!this.config?.dismissOnBackdropPress || !this.isVisible) return;
+    this.requestDismiss('backdrop');
+    this.reconcile();
+  }
+  onSwipeDismiss() {
+    if (!this.config?.dismissOnSwipe || !this.isVisible) return;
+    this.requestDismiss('swipe');
+    this.reconcile();
+  }
+  onDetentChange(index) {
+    this.props?.onDetentChange?.(index);
+  }
+  onContentAreaChange(width, height) {
+    const area = {
+      width: Math.floor(width),
+      height: Math.floor(height)
+    };
+    const last = this.lastContentArea;
+    if (area.width <= 0 || area.height <= 0) return;
+    if (last?.width === area.width && last.height === area.height) return;
+    this.lastContentArea = area;
+    this.props?.onContentAreaChange?.(area);
+  }
+
+  // Helpers
+
+  /** Lets React size the content before the first presentation. */
+  reportEstimatedContentArea() {
+    const {
+      config
+    } = this;
+    if (!canUseDOM || !this.isAttached || !config) return;
+    const viewport = estimateViewport();
+    const insets = readSafeAreaInsets();
+    const area = config.mode === 'popup' ? popupContentArea(viewport, insets) : sheetContentArea(config.detents, viewport, insets);
+    this.onContentAreaChange(area.width, area.height);
+  }
+  handleWindowResize = () => {
+    if (!this.presenter) {
+      this.reportEstimatedContentArea();
+    }
+  };
+}
+//# sourceMappingURL=ModalController.js.map

package/lib/module/web/ModalController.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["canUseDOM","estimateViewport","readSafeAreaInsets","isSameConfig","makeConfig","popupContentArea","PopupPresenter","sheetContentArea","SheetPresenter","ModalController","methods","present","requestPresent","dismiss","requestDismiss","snapToDetent","index","Number","isFinite","presenter","Math","trunc","props","config","isOpen","phase","wantsOpen","sessionActive","presentSent","dismissReason","reconcileScheduled","isAttached","elements","lastContentArea","constructor","setMounted","attach","window","addEventListener","handleWindowResize","detach","removeEventListener","destroy","update","next","reportEstimatedContentArea","elementsDidMount","isShown","show","elementsWillUnmount","contentDidRender","handleBackPress","isVisible","onBackButtonPress","dismissOnBackButton","reconcile","scheduleReconcile","reason","queueMicrotask","startDismiss","cancelDismiss","startPresent","endSession","mode","finishDismiss","onDismiss","onPresented","onPresent","onDismissed","onBackdropPress","dismissOnBackdropPress","onSwipeDismiss","dismissOnSwipe","onDetentChange","onContentAreaChange","width","height","area","floor","last","viewport","insets","detents"],"sourceRoot":"../../../src","sources":["web/ModalController.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/web/ModalPresenter.js

@@ -0,0 +1,245 @@
+"use strict";
+
+/// <reference lib="dom" />
+
+import { canScrollWithin, clipOverflow, readKeyboardHeight, readSafeAreaInsets, toCSSColor, ZERO_INSETS } from "./dom.js";
+
+/** DOM rendered by the web host view for one presentation. */
+
+/**
+ * Owns one presentation from show to dismiss. Subclasses lay out the surface
+ * and drive the enter/exit animations; this class tracks the viewport, the
+ * on-screen keyboard and the content size, and handles the backdrop and
+ * teardown.
+ *
+ * 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.
+ */
+export class ModalPresenter {
+  elements = null;
+  viewport = {
+    width: 0,
+    height: 0
+  };
+  insets = ZERO_INSETS;
+  /** Part of the viewport covered by the on-screen keyboard, from the bottom. */
+  keyboardHeight = 0;
+  /** Measured size of the React content. */
+  contentSize = {
+    width: 0,
+    height: 0
+  };
+  entering = false;
+  isDismissing = false;
+  finished = false;
+  observedContent = null;
+  resizeObserver = null;
+  constructor(config, listener) {
+    this.config = config;
+    this.listener = listener;
+  }
+  get isShown() {
+    return this.elements != null;
+  }
+
+  /** Takes over the rendered elements and starts the enter transition. */
+  show(elements) {
+    if (this.elements || this.finished) return;
+    this.elements = elements;
+    // The elements can outlive a previous presentation (an immediate re-present).
+    elements.overlay.style.pointerEvents = '';
+    elements.surface.style.overflow = clipOverflow();
+    elements.surface.style.opacity = '';
+    elements.surface.style.transform = '';
+    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 (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(this.handleContentResize);
+    }
+    this.measureViewport();
+    this.observeContent();
+    this.applyBackdrop();
+    this.didShow();
+    this.entering = true;
+    this.animateIn();
+  }
+  update(config) {
+    const previous = this.config;
+    this.config = config;
+    if (!this.elements) return;
+    this.applyBackdrop();
+    this.configDidChange(previous);
+  }
+
+  /** The React content re-rendered; its root element may have changed. */
+  contentDidRender() {
+    if (this.elements && this.observeContent()) {
+      this.contentSizeDidChange();
+    }
+  }
+
+  /**
+   * Animated dismissal, also from mid-enter. `onDismissed` follows when it
+   * completes, unless `cancelDismiss` turns it around first.
+   */
+  dismiss() {
+    const elements = this.elements;
+    if (!elements || this.isDismissing || this.finished) return;
+    this.isDismissing = true;
+    this.entering = false;
+    elements.overlay.style.pointerEvents = 'none';
+    // Also hides the on-screen keyboard.
+    const focused = document.activeElement;
+    if (focused instanceof HTMLElement && elements.overlay.contains(focused)) {
+      focused.blur();
+    }
+    this.animateOut(() => this.finish());
+  }
+
+  /**
+   * Reverses a running exit from wherever it is. `onPresented` follows once
+   * it settles. Returns false when there is no exit to reverse.
+   */
+  cancelDismiss() {
+    if (!this.elements || !this.isDismissing || this.finished) return false;
+    this.isDismissing = false;
+    this.elements.overlay.style.pointerEvents = '';
+    this.entering = true;
+    this.animateIn();
+    return true;
+  }
+
+  /** Tears down without animating or notifying the listener. */
+  destroy() {
+    if (this.finished) return;
+    this.finished = true;
+    this.teardown();
+  }
+  snapToDetent(_index) {}
+
+  /** The elements are in place; lay out the hidden state. */
+
+  /** Animates from the current state to presented, then calls `notifyPresented`. */
+
+  /** Animates from the current state (possibly mid-enter) to gone, then calls `onEnd`. */
+
+  /** The viewport size, safe area or keyboard height changed. */
+
+  /** For subclasses: the running enter animation settled. */
+  notifyPresented() {
+    if (!this.entering || this.isDismissing || this.finished) return;
+    this.entering = false;
+    this.listener.onPresented();
+  }
+  reportContentArea(width, height) {
+    if (width > 0 && height > 0) {
+      this.listener.onContentAreaChange(width, height);
+    }
+  }
+  teardown() {
+    this.stopAnimations();
+    window.removeEventListener('resize', this.handleResize);
+    window.visualViewport?.removeEventListener('resize', this.handleKeyboard);
+    window.visualViewport?.removeEventListener('scroll', this.handleKeyboard);
+    this.elements?.backdrop.removeEventListener('click', this.handleBackdropClick);
+    this.elements?.overlay.removeEventListener('wheel', this.handleWheel);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.observedContent = null;
+  }
+  finish() {
+    if (this.finished) return;
+    this.finished = true;
+    this.teardown();
+    this.listener.onDismissed();
+  }
+  applyBackdrop() {
+    const {
+      backdrop,
+      surface
+    } = this.elements;
+    const {
+      config
+    } = this;
+    backdrop.style.backgroundColor = toCSSColor(config.backdropColor, config.backdropOpacity);
+    const blur = config.backdropBlurRadius > 0 ? `blur(${config.backdropBlurRadius}px)` : '';
+    backdrop.style.setProperty('backdrop-filter', blur);
+    backdrop.style.setProperty('-webkit-backdrop-filter', blur);
+    // `Canvas` follows the page's `color-scheme`, like a system background.
+    surface.style.backgroundColor = config.contentBackgroundColor != null ? toCSSColor(config.contentBackgroundColor) : 'Canvas';
+  }
+  measureViewport() {
+    const {
+      overlay
+    } = this.elements;
+    this.viewport = {
+      width: overlay.clientWidth,
+      height: overlay.clientHeight
+    };
+    this.insets = readSafeAreaInsets();
+    this.keyboardHeight = readKeyboardHeight(this.viewport.height);
+  }
+
+  /** Re-targets the observer at the content's root element. Returns whether its size changed. */
+  observeContent() {
+    const root = this.elements?.content.firstElementChild;
+    const element = root instanceof HTMLElement ? root : null;
+    if (element !== this.observedContent) {
+      if (this.observedContent) {
+        this.resizeObserver?.unobserve(this.observedContent);
+      }
+      this.observedContent = element;
+      if (element) {
+        this.resizeObserver?.observe(element);
+      }
+    }
+    return this.measureContent();
+  }
+  measureContent() {
+    // Layout sizes, unaffected by the transition's transforms.
+    const width = this.observedContent?.offsetWidth ?? 0;
+    const height = this.observedContent?.offsetHeight ?? 0;
+    if (width === this.contentSize.width && height === this.contentSize.height) return false;
+    this.contentSize = {
+      width,
+      height
+    };
+    return true;
+  }
+  handleContentResize = () => {
+    if (this.measureContent()) {
+      this.contentSizeDidChange();
+    }
+  };
+  handleResize = () => {
+    if (!this.elements) return;
+    this.measureViewport();
+    this.viewportDidChange();
+  };
+  handleKeyboard = () => {
+    const height = readKeyboardHeight(this.viewport.height);
+    if (height === this.keyboardHeight) return;
+    this.keyboardHeight = height;
+    this.viewportDidChange();
+  };
+  handleBackdropClick = () => {
+    if (!this.isDismissing && !this.finished) {
+      this.listener.onBackdropPress();
+    }
+  };
+
+  /** Keeps the page behind the modal from scrolling; scrollable content still scrolls. */
+  handleWheel = event => {
+    if (event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return;
+    if (!canScrollWithin(event.target, this.elements.overlay, event.deltaY)) {
+      event.preventDefault();
+    }
+  };
+}
+//# sourceMappingURL=ModalPresenter.js.map

package/lib/module/web/ModalPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["canScrollWithin","clipOverflow","readKeyboardHeight","readSafeAreaInsets","toCSSColor","ZERO_INSETS","ModalPresenter","elements","viewport","width","height","insets","keyboardHeight","contentSize","entering","isDismissing","finished","observedContent","resizeObserver","constructor","config","listener","isShown","show","overlay","style","pointerEvents","surface","overflow","opacity","transform","window","addEventListener","handleResize","visualViewport","handleKeyboard","backdrop","handleBackdropClick","handleWheel","passive","ResizeObserver","handleContentResize","measureViewport","observeContent","applyBackdrop","didShow","animateIn","update","previous","configDidChange","contentDidRender","contentSizeDidChange","dismiss","focused","document","activeElement","HTMLElement","contains","blur","animateOut","finish","cancelDismiss","destroy","teardown","snapToDetent","_index","notifyPresented","onPresented","reportContentArea","onContentAreaChange","stopAnimations","removeEventListener","disconnect","onDismissed","backgroundColor","backdropColor","backdropOpacity","backdropBlurRadius","setProperty","contentBackgroundColor","clientWidth","clientHeight","root","content","firstElementChild","element","unobserve","observe","measureContent","offsetWidth","offsetHeight","viewportDidChange","onBackdropPress","event","ctrlKey","Math","abs","deltaX","deltaY","target","preventDefault"],"sourceRoot":"../../../src","sources":["web/ModalPresenter.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/web/PopupPresenter.js

@@ -0,0 +1,117 @@
+"use strict";
+
+/// <reference lib="dom" />
+
+import { AnimatedValue, INSTANT } from "./AnimatedValue.js";
+import { prefersReducedMotion } from "./dom.js";
+import { ModalPresenter } from "./ModalPresenter.js";
+const MARGIN = 16;
+const DEFAULT_CORNER_RADIUS = 16;
+const ENTER_SCALE = 0.9;
+const ENTER = {
+  type: 'spring',
+  response: 0.3,
+  dampingRatio: 0.82
+};
+const EXIT = {
+  type: 'timing',
+  duration: 200,
+  easing: t => t * t
+};
+/** Area a card may occupy, clear of the safe area and the part of the keyboard above it. */
+function availableRect(viewport, insets, keyboardHeight) {
+  const covered = Math.max(0, keyboardHeight - insets.bottom);
+  return {
+    x: insets.left + MARGIN,
+    y: insets.top + MARGIN,
+    width: Math.max(0, viewport.width - insets.left - insets.right - 2 * MARGIN),
+    height: Math.max(0, viewport.height - insets.top - insets.bottom - 2 * MARGIN - covered)
+  };
+}
+
+/** Best guess of the content area before the popup is on screen. */
+export function popupContentArea(viewport, insets) {
+  const {
+    width,
+    height
+  } = availableRect(viewport, insets, 0);
+  return {
+    width,
+    height
+  };
+}
+
+/** `popup` mode: a centered card over the backdrop with a fade/scale transition. */
+export class PopupPresenter extends ModalPresenter {
+  /** 0 hidden, 1 presented. */
+  progress = new AnimatedValue(0, 0.001, value => this.render(value));
+  didShow() {
+    this.layout();
+    this.progress.set(0);
+  }
+  animateIn() {
+    this.progress.animateTo(1, this.isAnimated ? ENTER : INSTANT, {
+      onEnd: () => this.notifyPresented()
+    });
+  }
+  animateOut(onEnd) {
+    this.progress.animateTo(0, this.isAnimated ? EXIT : INSTANT, {
+      onEnd
+    });
+  }
+  configDidChange() {
+    this.layout();
+    this.render(this.progress.value);
+  }
+  viewportDidChange() {
+    this.layout();
+  }
+  contentSizeDidChange() {
+    this.layout();
+  }
+  stopAnimations() {
+    this.progress.stop();
+  }
+  get isAnimated() {
+    return this.config.popupAnimation !== 'none' && !prefersReducedMotion();
+  }
+  layout() {
+    const {
+      surface,
+      content,
+      grabber
+    } = this.elements;
+    const behavior = this.config.keyboardBehavior;
+    const available = availableRect(this.viewport, this.insets, behavior === 'none' ? 0 : this.keyboardHeight);
+    const width = Math.min(this.contentSize.width, available.width);
+    const height = Math.min(this.contentSize.height, available.height);
+    Object.assign(surface.style, {
+      left: `${available.x + (available.width - width) / 2}px`,
+      top: `${available.y + (available.height - height) / 2}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+      borderRadius: `${this.config.cornerRadius ?? DEFAULT_CORNER_RADIUS}px`
+    });
+    grabber.style.display = 'none';
+
+    // The content host also bounds the content's own (shrink-to-fit) width.
+    const area = behavior === 'resize' ? available : availableRect(this.viewport, this.insets, 0);
+    content.style.width = `${area.width}px`;
+    content.style.height = `${area.height}px`;
+    this.reportContentArea(area.width, area.height);
+  }
+  render(progress) {
+    if (!this.elements) return;
+    const {
+      surface,
+      backdrop
+    } = this.elements;
+    const visible = Math.min(Math.max(progress, 0), 1);
+    const animation = this.config.popupAnimation;
+    backdrop.style.opacity = String(visible);
+    surface.style.opacity = animation === 'none' ? '1' : String(visible);
+    const scale = animation === 'scale' ? ENTER_SCALE + (1 - ENTER_SCALE) * progress : 1;
+    surface.style.transform = `scale(${scale})`;
+  }
+}
+//# sourceMappingURL=PopupPresenter.js.map