@onekeyfe/react-native-native-overlay 3.0.162-alpha.268

package/src/OverlayPageHost.web.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from 'react';
+
+import { useSuspendedPageOwners } from './useSuspendedPageOwners';
+import { registerOverlayPageHost } from './web/overlayLayers';
+
+const OWNER_ATTRIBUTE = 'data-overlay-owner';
+
+/**
+ * Web page host: an absolutely positioned layer inside the root-route card.
+ * Page overlays portal into it; entries of covered owners are hidden here
+ * because their own (possibly inactive) page does not re-render.
+ */
+export function OverlayPageHost({ hostKey }: { hostKey: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const suspendedOwners = useSuspendedPageOwners(hostKey);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    return registerOverlayPageHost(hostKey, element);
+  }, [hostKey]);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const suspended = new Set(suspendedOwners);
+    element
+      .querySelectorAll<HTMLElement>(`[${OWNER_ATTRIBUTE}]`)
+      .forEach((node) => {
+        const hidden = suspended.has(node.getAttribute(OWNER_ATTRIBUTE) ?? '');
+        node.style.visibility = hidden ? 'hidden' : '';
+        node.inert = hidden;
+      });
+  }, [suspendedOwners]);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        zIndex: 1,
+      }}
+    />
+  );
+}
+
+export { OWNER_ATTRIBUTE as OVERLAY_OWNER_ATTRIBUTE };

package/src/OverlayPageScope.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useMemo } from 'react';
+import type { PropsWithChildren } from 'react';
+
+export interface IOverlayPageScope {
+  /** Root-route host that renders page overlays (see `OverlayPageHost`). */
+  hostKey?: string;
+  /** The nearest page; page overlays hide while it is covered. */
+  ownerKey?: string;
+}
+
+const OverlayPageScopeContext = createContext<IOverlayPageScope>({});
+
+export function useOverlayPageScope(): IOverlayPageScope {
+  return useContext(OverlayPageScopeContext);
+}
+
+/** Provided once per root route, around its navigator and `OverlayPageHost`. */
+export function OverlayPageHostScope({
+  hostKey,
+  children,
+}: PropsWithChildren<{ hostKey: string }>) {
+  const value = useMemo(() => ({ hostKey }), [hostKey]);
+  return (
+    <OverlayPageScopeContext.Provider value={value}>
+      {children}
+    </OverlayPageScopeContext.Provider>
+  );
+}
+
+/** Provided by each page; page overlays below it belong to `ownerKey`. */
+export function OverlayPageOwnerScope({
+  ownerKey,
+  children,
+}: PropsWithChildren<{ ownerKey: string }>) {
+  const { hostKey } = useOverlayPageScope();
+  const value = useMemo(() => ({ hostKey, ownerKey }), [hostKey, ownerKey]);
+  return (
+    <OverlayPageScopeContext.Provider value={value}>
+      {children}
+    </OverlayPageScopeContext.Provider>
+  );
+}

package/src/OverlayStore.ts

@@ -0,0 +1,401 @@
+import { OverlayRequestError } from './OverlayErrors';
+import { OVERLAY_LEVEL_ORDER, isBlockingLevel } from './OverlayLevels';
+
+import type {
+  IOverlayDismissReason,
+  IOverlayEntry,
+  IOverlayRequest,
+  IOverlaySnapshot,
+} from './types';
+
+export interface IOverlayEntryHandlers {
+  /** Called once when the entry leaves the store (finalized or dropped from the queue). */
+  onRemoved?: (reason: IOverlayDismissReason) => void;
+}
+
+export type IOverlayBackResolution =
+  | { kind: 'dismiss'; id: string }
+  | { kind: 'block' }
+  | { kind: 'pass' };
+
+export interface IOverlayStoreOptions {
+  /** Upper bound for a closing entry to wait for its native exit animation. */
+  closingTimeoutMs?: number;
+}
+
+const DEFAULT_CLOSING_TIMEOUT_MS = 5000;
+
+function laneKeyOf(entry: IOverlayEntry): string {
+  return entry.scope === 'global'
+    ? `global|${entry.level}`
+    : `page|${entry.hostKey ?? ''}|${entry.level}`;
+}
+
+function compareRenderOrder(a: IOverlayEntry, b: IOverlayEntry): number {
+  if (a.scope !== b.scope) {
+    return a.scope === 'page' ? -1 : 1;
+  }
+  if (a.scope === 'page' && a.hostKey !== b.hostKey) {
+    return (a.hostKey ?? '') < (b.hostKey ?? '') ? -1 : 1;
+  }
+  const levelDiff = OVERLAY_LEVEL_ORDER[a.level] - OVERLAY_LEVEL_ORDER[b.level];
+  return levelDiff !== 0 ? levelDiff : a.seq - b.seq;
+}
+
+function compareQueueOrder(a: IOverlayEntry, b: IOverlayEntry): number {
+  return b.priority !== a.priority ? b.priority - a.priority : a.seq - b.seq;
+}
+
+export class OverlayStore {
+  private readonly closingTimeoutMs: number;
+
+  private seq = 0;
+
+  private readonly shown = new Map<string, IOverlayEntry>();
+
+  private queued: IOverlayEntry[] = [];
+
+  private readonly handlers = new Map<string, IOverlayEntryHandlers>();
+
+  private readonly closingTimers = new Map<
+    string,
+    ReturnType<typeof setTimeout>
+  >();
+
+  private readonly pageVisibility = new Map<string, boolean>();
+
+  private readonly listeners = new Set<() => void>();
+
+  private snapshot: IOverlaySnapshot = {
+    entries: [],
+    queued: [],
+  };
+
+  constructor(options: IOverlayStoreOptions = {}) {
+    this.closingTimeoutMs =
+      options.closingTimeoutMs ?? DEFAULT_CLOSING_TIMEOUT_MS;
+  }
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  getSnapshot = (): IOverlaySnapshot => this.snapshot;
+
+  getEntry(id: string): IOverlayEntry | undefined {
+    return this.shown.get(id) ?? this.queued.find((e) => e.id === id);
+  }
+
+  request(
+    request: IOverlayRequest,
+    handlers: IOverlayEntryHandlers = {}
+  ): IOverlayEntry {
+    if (request.id) {
+      const existing = this.getEntry(request.id);
+      if (existing) {
+        return existing;
+      }
+    }
+    const scope = request.scope ?? 'global';
+    if (scope === 'page' && (!request.hostKey || !request.ownerKey)) {
+      throw new OverlayRequestError(
+        'OverlayStore: page scope requires hostKey and ownerKey'
+      );
+    }
+    const level = request.level ?? 'modal';
+    const blocking = request.blocking ?? isBlockingLevel(level);
+    this.seq += 1;
+    const entry: IOverlayEntry = {
+      id: request.id ?? `overlay-${this.seq}`,
+      scope,
+      level,
+      strategy: request.strategy ?? 'stack',
+      priority: request.priority ?? 0,
+      replaceKey: request.replaceKey,
+      hostKey: scope === 'page' ? request.hostKey : undefined,
+      ownerKey: scope === 'page' ? request.ownerKey : undefined,
+      dismissible: request.dismissible ?? blocking,
+      statusBarStyle: request.statusBarStyle,
+      blocking,
+      phase: 'active',
+      suspended: false,
+      dismissReason: undefined,
+      seq: this.seq,
+    };
+    entry.suspended = this.isOwnerHidden(entry);
+    this.handlers.set(entry.id, handlers);
+
+    if (entry.strategy === 'replace') {
+      this.replaceIn(entry);
+      this.shown.set(entry.id, entry);
+    } else if (entry.strategy === 'queue' && !this.canPromote(entry)) {
+      entry.phase = 'queued';
+      this.queued = [...this.queued, entry].toSorted(compareQueueOrder);
+    } else {
+      this.shown.set(entry.id, entry);
+    }
+    this.emit();
+    return this.getEntry(entry.id) ?? entry;
+  }
+
+  /** Starts closing an entry; the native side calls `finalize` after its exit animation. */
+  dismiss(id: string, reason: IOverlayDismissReason = 'programmatic'): void {
+    if (this.dismissWithoutEmit(id, reason)) {
+      this.emit();
+    }
+  }
+
+  /** Removes a closing (or active) entry once its exit animation finished. */
+  finalize(id: string): void {
+    const entry = this.shown.get(id);
+    if (!entry) {
+      return;
+    }
+    this.clearClosingTimer(id);
+    this.shown.delete(id);
+    this.promoteQueued();
+    this.emit();
+    this.notifyRemoved(id, entry.dismissReason ?? 'programmatic');
+  }
+
+  dismissAll(
+    filter: {
+      scope?: IOverlayEntry['scope'];
+      belowLevel?: IOverlayEntry['level'];
+      reason?: IOverlayDismissReason;
+    } = {}
+  ): void {
+    const reason = filter.reason ?? 'programmatic';
+    const matches = (entry: IOverlayEntry) =>
+      (!filter.scope || entry.scope === filter.scope) &&
+      (!filter.belowLevel ||
+        OVERLAY_LEVEL_ORDER[entry.level] <
+          OVERLAY_LEVEL_ORDER[filter.belowLevel]);
+    const dropped = this.queued.filter(matches);
+    this.queued = this.queued.filter((e) => !matches(e));
+    let changed = dropped.length > 0;
+    for (const entry of this.shown.values()) {
+      if (matches(entry)) {
+        changed = this.dismissWithoutEmit(entry.id, reason) || changed;
+      }
+    }
+    if (changed) {
+      this.emit();
+    }
+    dropped.forEach((e) => this.notifyRemoved(e.id, reason));
+  }
+
+  /** Native / navigation signal: the owning page was covered, detached or restored. */
+  setPageVisible(ownerKey: string, visible: boolean): void {
+    if ((this.pageVisibility.get(ownerKey) ?? true) === visible) {
+      return;
+    }
+    this.pageVisibility.set(ownerKey, visible);
+    for (const entry of this.shown.values()) {
+      if (entry.ownerKey === ownerKey) {
+        entry.suspended = !visible;
+      }
+    }
+    for (const entry of this.queued) {
+      if (entry.ownerKey === ownerKey) {
+        entry.suspended = !visible;
+      }
+    }
+    if (visible) {
+      this.promoteQueued();
+    }
+    this.emit();
+  }
+
+  /** The owning page left the navigation state for good. */
+  removePage(ownerKey: string): void {
+    const dropped = this.queued.filter((e) => e.ownerKey === ownerKey);
+    this.queued = this.queued.filter((e) => e.ownerKey !== ownerKey);
+    for (const entry of this.shown.values()) {
+      if (entry.ownerKey === ownerKey) {
+        this.dismissWithoutEmit(entry.id, 'page-removed');
+      }
+    }
+    this.pageVisibility.delete(ownerKey);
+    this.emit();
+    dropped.forEach((e) => this.notifyRemoved(e.id, 'page-removed'));
+  }
+
+  /**
+   * Decides what a back press / Escape does. Global entries win over page
+   * entries; `focusedHostKey` limits page entries to the focused root route
+   * (split view has one host per pane).
+   */
+  resolveBack(focusedHostKey?: string): IOverlayBackResolution {
+    // Non-blocking entries take back / Escape only when they ask to be
+    // dismissible (an anchored popover); toasts do not.
+    const candidates = this.snapshot.entries.filter(
+      (e) =>
+        e.phase === 'active' &&
+        !e.suspended &&
+        (e.blocking || e.dismissible) &&
+        (e.scope === 'global' ||
+          focusedHostKey === undefined ||
+          e.hostKey === focusedHostKey)
+    );
+    const top = candidates[candidates.length - 1];
+    if (!top) {
+      return { kind: 'pass' };
+    }
+    return top.dismissible
+      ? { kind: 'dismiss', id: top.id }
+      : { kind: 'block' };
+  }
+
+  /** Topmost visible blocking entry; everything rendered below it is inert. */
+  /** The entry whose `statusBarStyle` applies (see `findStatusBarOwner`). */
+  getStatusBarOwner(): IOverlayEntry | undefined {
+    return findStatusBarOwner(this.snapshot);
+  }
+
+  getBlockingTop(): IOverlayEntry | undefined {
+    const { entries } = this.snapshot;
+    for (let i = entries.length - 1; i >= 0; i -= 1) {
+      const entry = entries[i];
+      if (
+        entry &&
+        entry.phase !== 'closing' &&
+        !entry.suspended &&
+        entry.blocking
+      ) {
+        return entry;
+      }
+    }
+    return undefined;
+  }
+
+  private dismissWithoutEmit(
+    id: string,
+    reason: IOverlayDismissReason
+  ): boolean {
+    const queuedIndex = this.queued.findIndex((e) => e.id === id);
+    if (queuedIndex !== -1) {
+      this.queued = this.queued.filter((e) => e.id !== id);
+      // Queued entries never rendered, so they leave without an exit animation.
+      queueMicrotask(() => this.notifyRemoved(id, reason));
+      return true;
+    }
+    const entry = this.shown.get(id);
+    if (!entry || entry.phase === 'closing') {
+      return false;
+    }
+    entry.phase = 'closing';
+    entry.dismissReason = reason;
+    this.closingTimers.set(
+      id,
+      setTimeout(() => this.finalize(id), this.closingTimeoutMs)
+    );
+    return true;
+  }
+
+  private replaceIn(entry: IOverlayEntry): void {
+    const laneKey = laneKeyOf(entry);
+    const sameLane = [...this.shown.values()].filter(
+      (e) => e.phase === 'active' && laneKeyOf(e) === laneKey
+    );
+    const targets = entry.replaceKey
+      ? sameLane.filter((e) => e.replaceKey === entry.replaceKey)
+      : sameLane.slice(-1);
+    targets.forEach((e) => this.dismissWithoutEmit(e.id, 'replaced'));
+    if (entry.replaceKey) {
+      const dropped = this.queued.filter(
+        (e) => laneKeyOf(e) === laneKey && e.replaceKey === entry.replaceKey
+      );
+      dropped.forEach((e) => this.dismissWithoutEmit(e.id, 'replaced'));
+    }
+  }
+
+  private isOwnerHidden(entry: IOverlayEntry): boolean {
+    return (
+      entry.scope === 'page' &&
+      entry.ownerKey !== undefined &&
+      this.pageVisibility.get(entry.ownerKey) === false
+    );
+  }
+
+  private canPromote(entry: IOverlayEntry): boolean {
+    if (this.isOwnerHidden(entry)) {
+      return false;
+    }
+    const laneKey = laneKeyOf(entry);
+    for (const shown of this.shown.values()) {
+      if (laneKeyOf(shown) === laneKey) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private promoteQueued(): void {
+    const promotedLanes = new Set<string>();
+    const remaining: IOverlayEntry[] = [];
+    for (const entry of this.queued) {
+      const laneKey = laneKeyOf(entry);
+      if (!promotedLanes.has(laneKey) && this.canPromote(entry)) {
+        entry.phase = 'active';
+        this.shown.set(entry.id, entry);
+        promotedLanes.add(laneKey);
+      } else {
+        remaining.push(entry);
+      }
+    }
+    this.queued = remaining;
+  }
+
+  private clearClosingTimer(id: string): void {
+    const timer = this.closingTimers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      this.closingTimers.delete(id);
+    }
+  }
+
+  private notifyRemoved(id: string, reason: IOverlayDismissReason): void {
+    const handlers = this.handlers.get(id);
+    this.handlers.delete(id);
+    handlers?.onRemoved?.(reason);
+  }
+
+  private emit(): void {
+    this.snapshot = {
+      entries: [...this.shown.values()]
+        .map((e) => ({ ...e }))
+        .toSorted(compareRenderOrder),
+      queued: this.queued.map((e) => ({ ...e })),
+    };
+    this.listeners.forEach((listener) => listener());
+  }
+}
+
+/**
+ * The topmost shown, visible entry that styles the status bar. Entries are
+ * in render order, so a higher level (or a later request in the same level)
+ * wins; page entries render below global ones and suspended ones never own it.
+ */
+export function findStatusBarOwner(
+  snapshot: IOverlaySnapshot
+): IOverlayEntry | undefined {
+  const { entries } = snapshot;
+  for (let i = entries.length - 1; i >= 0; i -= 1) {
+    const entry = entries[i];
+    if (
+      entry &&
+      entry.statusBarStyle &&
+      entry.phase === 'active' &&
+      !entry.suspended
+    ) {
+      return entry;
+    }
+  }
+  return undefined;
+}
+
+export const overlayStore = new OverlayStore();

package/src/OverlayView.tsx

@@ -0,0 +1,165 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { StatusBar, StyleSheet, View, useWindowDimensions } from 'react-native';
+
+import NativeOverlay from './NativeOverlayNativeComponent';
+import { OverlayLevelProvider } from './OverlayLevelContext';
+import { isBlockingLevel } from './OverlayLevels';
+import { useOverlayController } from './useOverlayController';
+
+import type {
+  IOverlayRequestDismissReason,
+  IOverlayViewProps,
+} from './OverlayViewTypes';
+import type { LayoutChangeEvent, NativeSyntheticEvent } from 'react-native';
+
+const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.4)';
+const DEFAULT_SHEET_MAX_RATIO = 0.92;
+
+const REQUEST_REASONS: Record<string, IOverlayRequestDismissReason> = {
+  back: 'back',
+  backdrop: 'backdrop',
+  pan: 'pan',
+};
+
+const styles = StyleSheet.create({
+  // The host view never draws: native moves its child into the level host
+  // and clips it (zero width) while hidden. The height stays auto on
+  // purpose; a fixed 0 makes Yoga measure a fitted sheet's content at most
+  // 0 tall, so the sheet would never learn its height.
+  host: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: 0,
+  },
+});
+
+export function OverlayView(props: IOverlayViewProps) {
+  const {
+    level = 'modal',
+    presentation = 'center',
+    backdrop,
+    blocking,
+    dismissOnBackPress,
+    sheet,
+    keepContentMounted = false,
+    statusBarStyle,
+    children,
+    testID,
+  } = props;
+  const isSheet = presentation === 'sheet';
+  const controller = useOverlayController(props);
+  const { width, height } = useWindowDimensions();
+  const {
+    entry,
+    mounted,
+    presented,
+    ownsStatusBar,
+    scope,
+    hostKey,
+    ownerKey,
+    animation,
+    onHostPresented,
+    onHostDismissed,
+    onHostRequestDismiss,
+  } = controller;
+
+  const [measuredSheetHeight, setMeasuredSheetHeight] = useState(0);
+  const maxSheetHeight = sheet?.maxHeight ?? height * DEFAULT_SHEET_MAX_RATIO;
+  const sheetHeight = Math.min(
+    sheet?.height ?? measuredSheetHeight,
+    maxSheetHeight
+  );
+  const onSheetLayout = useCallback((event: LayoutChangeEvent) => {
+    setMeasuredSheetHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const animationConfig = useMemo(() => JSON.stringify(animation), [animation]);
+  const isBlocking = blocking ?? isBlockingLevel(level);
+
+  const onDismissed = useCallback(() => onHostDismissed(), [onHostDismissed]);
+  const onRequestDismiss = useCallback(
+    (event: NativeSyntheticEvent<{ reason: string }>) => {
+      onHostRequestDismiss(REQUEST_REASONS[event.nativeEvent.reason] ?? 'back');
+    },
+    [onHostRequestDismiss]
+  );
+
+  if (!keepContentMounted && (!mounted || !entry)) {
+    return null;
+  }
+
+  // The app drives the status bar through React Native's StatusBar stack
+  // (iOS runs without view-controller-based appearance), so the owning
+  // overlay pushes onto the same stack.
+  const statusBar =
+    ownsStatusBar && statusBarStyle ? (
+      <StatusBar
+        animated
+        barStyle={statusBarStyle === 'light' ? 'light-content' : 'dark-content'}
+      />
+    ) : null;
+
+  return (
+    <>
+      {statusBar}
+      <NativeOverlay
+        style={styles.host}
+        // A fitted sheet presents once its content height is known.
+        visible={presented && (!isSheet || sheetHeight > 0)}
+        level={level}
+        scope={scope}
+        hostKey={hostKey ?? ''}
+        ownerKey={ownerKey ?? ''}
+        presentation={presentation}
+        stackOrder={entry?.seq ?? 0}
+        blocking={isBlocking}
+        dismissOnBackPress={dismissOnBackPress ?? isBlocking}
+        dismissOnBackdropPress={backdrop ? !!backdrop.dismissOnPress : false}
+        backdropColor={
+          backdrop ? backdrop.color ?? DEFAULT_BACKDROP_COLOR : undefined
+        }
+        sheetHeight={isSheet ? sheetHeight : 0}
+        sheetCornerRadius={sheet?.cornerRadius}
+        showHandle={sheet?.showHandle}
+        sheetBackgroundColor={sheet?.backgroundColor}
+        dismissOnPanDown={sheet?.dismissOnPanDown ?? true}
+        animationConfig={animationConfig}
+        onPresented={onHostPresented}
+        onDismissed={onDismissed}
+        onRequestDismiss={onRequestDismiss}
+        testID={testID}
+      >
+        {isSheet ? (
+          <View
+            collapsable={false}
+            onLayout={onSheetLayout}
+            style={{
+              width,
+              height: sheet?.height,
+              maxHeight: maxSheetHeight,
+              // The host is 0x0; without this Yoga shrinks the content to 0 and
+              // a fitted sheet never learns its height.
+              flexShrink: 0,
+            }}
+          >
+            <OverlayLevelProvider value={level}>
+              {children}
+            </OverlayLevelProvider>
+          </View>
+        ) : (
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={{ width, height, flexShrink: 0 }}
+          >
+            <OverlayLevelProvider value={level}>
+              {children}
+            </OverlayLevelProvider>
+          </View>
+        )}
+      </NativeOverlay>
+    </>
+  );
+}