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

package/src/NitroModalView.web.tsx

@@ -0,0 +1,180 @@
+/// <reference lib="dom" />
+
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { Modal, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { ReactNativeView } from 'react-native-nitro-modules';
+import type { NitroModalMethods, NitroModalProps } from './NitroModal.nitro';
+import { clipOverflow } from './web/dom';
+import { ModalController } from './web/ModalController';
+
+interface WebNitroModalViewProps extends NitroModalProps {
+  hybridRef?: (instance: NitroModalMethods) => void;
+  /** Inline: the frame the sheet fills. */
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+/** The web view takes plain functions; only native host components need them wrapped. */
+export function callback<T>(func: T): T {
+  return func;
+}
+
+/**
+ * Web implementation of the hybrid view. The modal renders through React
+ * Native Web's `Modal` (a portal with focus trapping, Escape handling and
+ * stacking with other modals) and is laid out and animated by the presenters
+ * in `./web`. In place, it renders nothing.
+ *
+ * An inline sheet renders in place instead: a view laid out with `style`,
+ * holding the sheet's elements.
+ */
+function WebNitroModalView(props: WebNitroModalViewProps) {
+  const { hybridRef, children } = props;
+  const isInline = props.isInline && props.mode === 'bottomSheet';
+  const [mounted, setMounted] = useState(false);
+  const [controller] = useState(() => new ModalController(setMounted));
+  const overlay = useRef<HTMLDivElement>(null);
+  const backdrop = useRef<HTMLDivElement>(null);
+  const surface = useRef<HTMLDivElement>(null);
+  const content = useRef<HTMLDivElement>(null);
+  const grabber = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    controller.attach();
+    return () => controller.detach();
+  }, [controller]);
+
+  useLayoutEffect(() => {
+    hybridRef?.(controller.methods as NitroModalMethods);
+  }, [controller, hybridRef]);
+
+  useLayoutEffect(() => {
+    controller.update(props);
+  });
+
+  useLayoutEffect(() => {
+    if (!mounted) return undefined;
+    controller.elementsDidMount({
+      overlay: overlay.current!,
+      backdrop: backdrop.current!,
+      surface: surface.current!,
+      content: content.current!,
+      grabber: grabber.current!,
+    });
+    return () => controller.elementsWillUnmount();
+  }, [controller, mounted]);
+
+  useLayoutEffect(() => {
+    if (mounted) {
+      controller.contentDidRender();
+    }
+  });
+
+  const hostRef = useCallback(
+    (node: unknown) => {
+      controller.hostDidChange(node instanceof HTMLElement ? node : null);
+    },
+    [controller]
+  );
+
+  // Styles set here never change; the presenters write sizes, positions,
+  // colors and animated values straight to the elements.
+  const layer = mounted ? (
+    // Focusable so the modal's focus trap lands here first rather than on the first input.
+    <div
+      ref={overlay}
+      tabIndex={-1}
+      style={
+        isInline
+          ? { ...styles.inlineOverlay, overflow: clipOverflow() }
+          : styles.overlay
+      }
+    >
+      <div ref={backdrop} aria-hidden style={styles.backdrop} />
+      <div ref={surface} style={styles.surface}>
+        <div ref={content} style={styles.content}>
+          {children}
+        </div>
+        <div ref={grabber} aria-hidden style={styles.grabber} />
+      </div>
+    </div>
+  ) : null;
+
+  if (isInline) {
+    return (
+      <View ref={hostRef} style={props.style} pointerEvents="box-none">
+        {layer}
+      </View>
+    );
+  }
+
+  if (!layer) return null;
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="none"
+      onRequestClose={controller.handleBackPress}
+    >
+      {layer}
+    </Modal>
+  );
+}
+
+const styles = {
+  overlay: {
+    position: 'fixed',
+    inset: 0,
+    outline: 'none',
+  },
+  // Fills the host view; the sheet hides below its bottom edge.
+  inlineOverlay: {
+    position: 'absolute',
+    inset: 0,
+    outline: 'none',
+    pointerEvents: 'none',
+  },
+  backdrop: {
+    position: 'absolute',
+    inset: 0,
+    touchAction: 'none',
+  },
+  surface: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    boxSizing: 'border-box',
+    willChange: 'transform',
+  },
+  // Pinned at the origin like the native content view; the React content is
+  // positioned and sized inside it by `NitroModal`.
+  content: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+  grabber: {
+    position: 'absolute',
+    top: 5,
+    left: '50%',
+    width: 36,
+    height: 5,
+    marginLeft: -18,
+    borderRadius: 2.5,
+    backgroundColor: 'rgba(127, 127, 127, 0.4)',
+    pointerEvents: 'none',
+  },
+} satisfies Record<string, CSSProperties>;
+
+export const NitroModalView = WebNitroModalView as unknown as ReactNativeView<
+  NitroModalProps,
+  NitroModalMethods
+>;

package/src/index.tsx

@@ -1,5 +1,6 @@
 export {
   NitroModal,
+  type ModalPresentation,
   type NitroModalProps,
   type NitroModalRef,
 } from './NitroModal';
@@ -7,6 +8,7 @@ export type {
   DismissReason,
   KeyboardBehavior,
   ModalMode,
+  NamedSheetDetent,
   PopupAnimation,
   SheetDetent,
 } from './NitroModal.nitro';

package/src/web/AnimatedValue.ts

@@ -0,0 +1,193 @@
+/// <reference lib="dom" />
+
+/** How an `AnimatedValue` moves to its target. */
+export type Motion =
+  | {
+      type: 'spring';
+      /** Period of the undamped spring, in seconds. Lower is snappier. */
+      response: number;
+      /** 1 settles without overshoot; lower values bounce. */
+      dampingRatio: number;
+    }
+  | {
+      type: 'timing';
+      /** In milliseconds. */
+      duration: number;
+      easing: (progress: number) => number;
+    };
+
+/** Jumps to the target at once. The completion still arrives on the next frame. */
+export const INSTANT: Motion = {
+  type: 'timing',
+  duration: 0,
+  easing: (t) => t,
+};
+
+export interface AnimateOptions {
+  /** Starting velocity in units per second. Defaults to the current velocity. */
+  velocity?: number;
+  /** Finish as soon as a spring reaches the target instead of when it settles. */
+  stopAtTarget?: boolean;
+  /** Runs once the target is reached, unless another animation or `set` takes over first. */
+  onEnd?: () => void;
+}
+
+interface Run {
+  target: number;
+  motion: Motion;
+  options: AnimateOptions;
+  from: number;
+  startTime: number;
+  /** Side of the target the value started on, for `stopAtTarget`. */
+  side: number;
+}
+
+/** Longest frame integrated at once, so a dropped frame can't throw the spring off. */
+const MAX_FRAME_SECONDS = 0.064;
+const SPRING_STEP_SECONDS = 0.004;
+
+/**
+ * A number animated on `requestAnimationFrame` that reports every frame
+ * through `onChange`. A new animation starts from the current value and
+ * velocity, so transitions can be turned around mid-flight.
+ */
+export class AnimatedValue {
+  private current: number;
+  private speed = 0;
+  private run: Run | null = null;
+  private frame: number | null = null;
+  private lastTime = 0;
+
+  /** `precision`: distance from the target at which a spring counts as settled. */
+  constructor(
+    value: number,
+    private readonly precision: number,
+    private readonly onChange: (value: number) => void
+  ) {
+    this.current = value;
+  }
+
+  get value(): number {
+    return this.current;
+  }
+
+  get isAnimating(): boolean {
+    return this.run != null;
+  }
+
+  /** Jumps to `value`, cancelling any animation. */
+  set(value: number) {
+    this.stop();
+    this.current = value;
+    this.speed = 0;
+    this.onChange(value);
+  }
+
+  stop() {
+    this.run = null;
+    if (this.frame != null) {
+      cancelAnimationFrame(this.frame);
+      this.frame = null;
+    }
+  }
+
+  animateTo(target: number, motion: Motion, options: AnimateOptions = {}) {
+    if (options.velocity !== undefined) {
+      this.speed = options.velocity;
+    }
+    const now = performance.now();
+    this.run = {
+      target,
+      motion,
+      options,
+      from: this.current,
+      startTime: now,
+      side: Math.sign(this.current - target),
+    };
+    if (motion.type === 'timing' && motion.duration <= 0) {
+      this.current = target;
+      this.speed = 0;
+      this.onChange(target);
+    }
+    if (this.frame == null) {
+      this.lastTime = now;
+      this.frame = requestAnimationFrame(this.step);
+    }
+  }
+
+  private step = (time: number) => {
+    this.frame = null;
+    const run = this.run;
+    if (!run) return;
+    const dt = Math.min(
+      Math.max((time - this.lastTime) / 1000, 0),
+      MAX_FRAME_SECONDS
+    );
+    this.lastTime = time;
+
+    const done =
+      run.motion.type === 'timing'
+        ? this.stepTiming(run, run.motion, time, dt)
+        : this.stepSpring(run, run.motion, dt);
+    if (done) {
+      this.current = run.target;
+      this.speed = 0;
+      this.run = null;
+    }
+    this.onChange(this.current);
+    if (done) {
+      run.options.onEnd?.();
+    } else {
+      this.frame = requestAnimationFrame(this.step);
+    }
+  };
+
+  private stepTiming(
+    run: Run,
+    motion: Extract<Motion, { type: 'timing' }>,
+    time: number,
+    dt: number
+  ): boolean {
+    const progress =
+      motion.duration > 0
+        ? Math.min(Math.max((time - run.startTime) / motion.duration, 0), 1)
+        : 1;
+    const next = run.from + (run.target - run.from) * motion.easing(progress);
+    if (dt > 0) {
+      this.speed = (next - this.current) / dt;
+    }
+    this.current = next;
+    return progress >= 1;
+  }
+
+  private stepSpring(
+    run: Run,
+    motion: Extract<Motion, { type: 'spring' }>,
+    dt: number
+  ): boolean {
+    const omega = (2 * Math.PI) / motion.response;
+    const stiffness = omega * omega;
+    const damping = 2 * motion.dampingRatio * omega;
+    let offset = this.current - run.target;
+    let velocity = this.speed;
+    const steps = Math.ceil(dt / SPRING_STEP_SECONDS);
+    for (let i = 0; i < steps; i++) {
+      const h = dt / steps;
+      velocity += (-stiffness * offset - damping * velocity) * h;
+      offset += velocity * h;
+    }
+    this.current = run.target + offset;
+    this.speed = velocity;
+
+    if (
+      run.options.stopAtTarget &&
+      (run.side === 0 || Math.sign(offset) !== run.side)
+    ) {
+      return true;
+    }
+    return (
+      Math.abs(offset) < this.precision &&
+      Math.abs(velocity) < this.precision * 20
+    );
+  }
+}

package/src/web/ModalConfig.ts

@@ -0,0 +1,67 @@
+import type {
+  KeyboardBehavior,
+  ModalMode,
+  NitroModalProps,
+  PopupAnimation,
+  SheetDetent,
+} from '../NitroModal.nitro';
+
+/** Snapshot of the props that shape a presentation. */
+export interface ModalConfig {
+  mode: ModalMode;
+  /**
+   * A `bottomSheet` rendered in place, filling the host view: no backdrop,
+   * the page behind stays interactive, and the user can't dismiss it.
+   */
+  isInline: boolean;
+  detents: SheetDetent[];
+  initialDetentIndex: number;
+  /** 0xAARRGGBB, from `processColor`. */
+  backdropColor: number;
+  backdropOpacity: number;
+  backdropBlurRadius: number;
+  dismissOnBackdropPress: boolean;
+  dismissOnSwipe: boolean;
+  dismissOnBackButton: boolean;
+  grabberVisible: boolean;
+  /** `null` uses the default. */
+  cornerRadius: number | null;
+  /** 0xAARRGGBB; `null` uses the system background. */
+  contentBackgroundColor: number | null;
+  keyboardBehavior: KeyboardBehavior;
+  popupAnimation: PopupAnimation;
+  pullToRefreshEnabled: boolean;
+}
+
+export function makeConfig(props: NitroModalProps): ModalConfig {
+  // An inline sheet is part of the page; the user can't dismiss it.
+  const isInline = props.isInline && props.mode === 'bottomSheet';
+  return {
+    mode: props.mode,
+    isInline,
+    detents: props.detents,
+    initialDetentIndex: Number.isFinite(props.initialDetentIndex)
+      ? Math.trunc(props.initialDetentIndex)
+      : 0,
+    backdropColor: props.backdropColor,
+    backdropOpacity: props.backdropOpacity,
+    backdropBlurRadius: props.backdropBlurRadius,
+    dismissOnBackdropPress: props.dismissOnBackdropPress && !isInline,
+    dismissOnSwipe: props.dismissOnSwipe && !isInline,
+    dismissOnBackButton: props.dismissOnBackButton && !isInline,
+    grabberVisible: props.grabberVisible,
+    cornerRadius: props.cornerRadius >= 0 ? props.cornerRadius : null,
+    contentBackgroundColor: props.contentBackgroundColor ?? null,
+    keyboardBehavior: props.keyboardBehavior,
+    popupAnimation: props.popupAnimation,
+    pullToRefreshEnabled: props.pullToRefreshEnabled,
+  };
+}
+
+export function isSameConfig(a: ModalConfig, b: ModalConfig): boolean {
+  return (Object.keys(a) as (keyof ModalConfig)[]).every((key) =>
+    key === 'detents'
+      ? a.detents.join() === b.detents.join()
+      : a[key] === b[key]
+  );
+}