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

package/src/web/overlayLayers.ts

@@ -0,0 +1,182 @@
+import {
+  OVERLAY_LEVELS,
+  OVERLAY_LEVEL_ORDER,
+  OVERLAY_WEB_Z_INDEX_BASE,
+} from '../OverlayLevels';
+import { overlayStore } from '../OverlayStore';
+
+import type { IOverlayRequestDismissReason } from '../OverlayViewTypes';
+import type { IOverlayLevel } from '../types';
+
+const LAYER_ATTRIBUTE = 'data-onekey-overlay-layer';
+export const ENTRY_ATTRIBUTE = 'data-onekey-overlay-entry';
+
+const APP_ROOT_ID = 'root';
+
+const layerRoots = new Map<IOverlayLevel, HTMLDivElement>();
+const pageHosts = new Map<string, HTMLDivElement>();
+const dismissRequesters = new Map<
+  string,
+  (reason: IOverlayRequestDismissReason) => void
+>();
+let installed = false;
+
+function createLayerRoot(level: IOverlayLevel): HTMLDivElement {
+  const root = document.createElement('div');
+  root.setAttribute(LAYER_ATTRIBUTE, level);
+  Object.assign(root.style, {
+    position: 'fixed',
+    inset: '0',
+    pointerEvents: 'none',
+    zIndex: String(OVERLAY_WEB_Z_INDEX_BASE[level]),
+    isolation: 'isolate',
+  });
+  // Keep DOM order equal to level order so equal z-index ties stay correct.
+  const next = OVERLAY_LEVELS.slice(OVERLAY_LEVELS.indexOf(level) + 1)
+    .map((l) => layerRoots.get(l))
+    .find(Boolean);
+  document.body.insertBefore(root, next ?? null);
+  return root;
+}
+
+function setInert(element: HTMLElement | null | undefined, inert: boolean) {
+  if (element && element.inert !== inert) {
+    element.inert = inert;
+  }
+}
+
+// Elements outside a page host made inert for a blocking page overlay.
+let pageInertElements = new Set<HTMLElement>();
+
+/**
+ * A page host lives inside the app root, so a blocking page overlay cannot
+ * inert the app root; inert every sibling on the path from the host up to it
+ * instead (other routes, the page itself, navigation chrome).
+ */
+function siblingsOutside(host: HTMLElement, root: HTMLElement) {
+  const siblings = new Set<HTMLElement>();
+  let node: HTMLElement = host;
+  while (node !== root && node.parentElement) {
+    const parent: HTMLElement = node.parentElement;
+    for (const sibling of Array.from(parent.children)) {
+      if (sibling !== node && sibling instanceof HTMLElement) {
+        siblings.add(sibling);
+      }
+    }
+    node = parent;
+  }
+  return siblings;
+}
+
+function inertEntriesBelow(container: ParentNode, seq: number) {
+  container
+    .querySelectorAll<HTMLElement>(`[${ENTRY_ATTRIBUTE}]`)
+    .forEach((node) => {
+      setInert(node, Number(node.dataset.stackOrder) < seq);
+    });
+}
+
+/** Everything rendered below the topmost blocking entry becomes inert. */
+function syncInert() {
+  const top = overlayStore.getBlockingTop();
+  const appRoot = document.getElementById(APP_ROOT_ID);
+  let nextPageInert = new Set<HTMLElement>();
+  const pageHost =
+    top?.scope === 'page' ? getOverlayPageHost(top.hostKey) : undefined;
+  if (top && pageHost && appRoot?.contains(pageHost)) {
+    setInert(appRoot, false);
+    nextPageInert = siblingsOutside(pageHost, appRoot);
+    inertEntriesBelow(pageHost, top.seq);
+  } else {
+    setInert(appRoot, !!top);
+  }
+  pageInertElements.forEach((element) => {
+    if (!nextPageInert.has(element)) {
+      setInert(element, false);
+    }
+  });
+  nextPageInert.forEach((element) => setInert(element, true));
+  pageInertElements = nextPageInert;
+
+  for (const [level, root] of layerRoots) {
+    // Global layers render above every page overlay.
+    const below =
+      top?.scope === 'global' &&
+      OVERLAY_LEVEL_ORDER[level] < OVERLAY_LEVEL_ORDER[top.level];
+    setInert(root, below);
+    if (top?.scope === 'global' && level === top.level) {
+      inertEntriesBelow(root, top.seq);
+    }
+  }
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  // Escape while composing belongs to the IME.
+  if (event.key !== 'Escape' || event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  const resolution = overlayStore.resolveBack();
+  if (resolution.kind === 'pass') {
+    return;
+  }
+  event.stopPropagation();
+  event.preventDefault();
+  if (resolution.kind === 'dismiss') {
+    dismissRequesters.get(resolution.id)?.('back');
+  }
+}
+
+function installOverlayWebManager() {
+  if (installed || typeof document === 'undefined') {
+    return;
+  }
+  installed = true;
+  overlayStore.subscribe(syncInert);
+  document.addEventListener('keydown', onKeyDown, true);
+}
+
+export function getOverlayLayerRoot(level: IOverlayLevel): HTMLDivElement {
+  installOverlayWebManager();
+  let root = layerRoots.get(level);
+  if (!root || !root.isConnected) {
+    root = createLayerRoot(level);
+    layerRoots.set(level, root);
+  }
+  return root;
+}
+
+export function registerOverlayDismissRequester(
+  id: string,
+  requester: (reason: IOverlayRequestDismissReason) => void
+): () => void {
+  dismissRequesters.set(id, requester);
+  return () => {
+    if (dismissRequesters.get(id) === requester) {
+      dismissRequesters.delete(id);
+    }
+  };
+}
+
+/** Re-run after entry DOM nodes mount, since the store emits before commit. */
+export function scheduleOverlayInertSync() {
+  requestAnimationFrame(syncInert);
+}
+
+export function registerOverlayPageHost(
+  hostKey: string,
+  element: HTMLDivElement
+): () => void {
+  installOverlayWebManager();
+  pageHosts.set(hostKey, element);
+  return () => {
+    if (pageHosts.get(hostKey) === element) {
+      pageHosts.delete(hostKey);
+    }
+  };
+}
+
+export function getOverlayPageHost(
+  hostKey: string | undefined
+): HTMLDivElement | undefined {
+  return hostKey ? pageHosts.get(hostKey) : undefined;
+}

package/src/web/useKeyboardShift.ts

@@ -0,0 +1,130 @@
+import { useEffect, useRef } from 'react';
+import type { RefObject } from 'react';
+
+/** Gap between centered content and the keyboard; matches native. */
+export const KEYBOARD_MARGIN = 16;
+
+/**
+ * How far to lift overlay content above the software keyboard (>= 0), the
+ * same rule as iOS and Android: a sheet until its bottom clears the
+ * keyboard, other content until its bottom is `KEYBOARD_MARGIN` above it,
+ * never above the top edge. Full-window content never moves.
+ */
+export function computeKeyboardShift({
+  keyboardTop,
+  contentTop,
+  contentBottom,
+  isSheet,
+  safeTop = 0,
+}: {
+  keyboardTop: number | undefined;
+  contentTop: number;
+  contentBottom: number;
+  isSheet: boolean;
+  safeTop?: number;
+}): number {
+  if (keyboardTop === undefined) {
+    return 0;
+  }
+  const needed = isSheet
+    ? contentBottom - keyboardTop
+    : contentBottom + KEYBOARD_MARGIN - keyboardTop;
+  const room = contentTop - safeTop;
+  return Math.max(0, Math.min(needed, room));
+}
+
+/**
+ * Vertical extent of the rendered children of the full-window React root,
+ * relative to the content wrapper, from layout offsets (no transforms).
+ */
+function layoutExtent(
+  content: HTMLElement | null
+): { top: number; bottom: number } | undefined {
+  const root = content?.firstElementChild as HTMLElement | null | undefined;
+  if (!root) {
+    return undefined;
+  }
+  const children = Array.from(root.children).filter(
+    (child): child is HTMLElement => child instanceof HTMLElement
+  );
+  if (children.length === 0) {
+    return undefined;
+  }
+  return {
+    top: Math.min(...children.map((c) => root.offsetTop + c.offsetTop)),
+    bottom: Math.max(
+      ...children.map((c) => root.offsetTop + c.offsetTop + c.offsetHeight)
+    ),
+  };
+}
+
+/**
+ * Mobile browsers shrink the visual viewport for the keyboard while fixed
+ * layers keep the layout viewport; lift the entry's keyboard layer by the
+ * covered part.
+ */
+export function useKeyboardShift({
+  layerRef,
+  sheetRef,
+  contentRef,
+  isSheet,
+  enabled,
+}: {
+  layerRef: RefObject<HTMLDivElement | null>;
+  sheetRef: RefObject<HTMLDivElement | null>;
+  contentRef: RefObject<HTMLDivElement | null>;
+  isSheet: boolean;
+  enabled: boolean;
+}) {
+  const shiftRef = useRef(0);
+
+  useEffect(() => {
+    const viewport = globalThis.visualViewport;
+    const layer = layerRef.current;
+    if (!viewport || !layer || !enabled) {
+      return;
+    }
+    const update = () => {
+      const keyboardBottom = viewport.offsetTop + viewport.height;
+      const covered = globalThis.innerHeight - keyboardBottom;
+      const current = shiftRef.current;
+      // Layout geometry (offsets ignore transforms), placed from the entry,
+      // which never transforms: neither the lift (maybe mid-transition) nor
+      // the enter / exit animation may skew the resting frame.
+      const origin = layer.parentElement?.getBoundingClientRect().top ?? 0;
+      let top = origin;
+      let bottom = origin + layer.offsetHeight;
+      const sheet = sheetRef.current;
+      if (isSheet && sheet) {
+        top = origin + sheet.offsetTop;
+        bottom = top + sheet.offsetHeight;
+      } else {
+        const extent = layoutExtent(contentRef.current);
+        if (extent) {
+          top = origin + extent.top;
+          bottom = origin + extent.bottom;
+        }
+      }
+      const shift = computeKeyboardShift({
+        keyboardTop: covered > 1 ? keyboardBottom : undefined,
+        contentTop: top,
+        contentBottom: bottom,
+        isSheet,
+      });
+      if (Math.abs(shift - current) < 0.5) {
+        return;
+      }
+      shiftRef.current = shift;
+      layer.style.transform = shift ? `translate3d(0, ${-shift}px, 0)` : '';
+    };
+    viewport.addEventListener('resize', update);
+    viewport.addEventListener('scroll', update);
+    update();
+    return () => {
+      viewport.removeEventListener('resize', update);
+      viewport.removeEventListener('scroll', update);
+      shiftRef.current = 0;
+      layer.style.transform = '';
+    };
+  }, [contentRef, enabled, isSheet, layerRef, sheetRef]);
+}

package/src/web/useSheetDrag.ts

@@ -0,0 +1,143 @@
+import { useEffect, useRef } from 'react';
+import type { RefObject } from 'react';
+
+const DRAG_START_THRESHOLD = 6;
+const DISMISS_DISTANCE_RATIO = 0.4;
+const DISMISS_VELOCITY = 0.5; // px per ms
+const UPWARD_RESISTANCE = 0.2;
+const SETTLE_TRANSITION = 'transform 200ms cubic-bezier(0.32, 0.72, 0, 1)';
+
+function scrolledAncestorWithin(
+  target: EventTarget | null,
+  sheet: HTMLElement
+) {
+  let node = target instanceof HTMLElement ? target : null;
+  while (node && node !== sheet) {
+    if (node.scrollTop > 0 && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return undefined;
+}
+
+/**
+ * Pointer-driven drag-to-dismiss for the web bottom sheet: follows the
+ * finger downward, resists upward, and dismisses past 40% of the height or
+ * on a fast flick. A drag never starts from inside scrolled content.
+ */
+export function useSheetDrag({
+  sheetRef,
+  backdropRef,
+  enabled,
+  onDismissByPan,
+}: {
+  sheetRef: RefObject<HTMLDivElement | null>;
+  backdropRef: RefObject<HTMLDivElement | null>;
+  enabled: boolean;
+  onDismissByPan: () => void;
+}) {
+  const onDismissRef = useRef(onDismissByPan);
+  onDismissRef.current = onDismissByPan;
+
+  useEffect(() => {
+    const sheet = sheetRef.current;
+    if (!sheet || !enabled) {
+      return;
+    }
+    let startY = 0;
+    let lastY = 0;
+    let lastTime = 0;
+    let velocity = 0;
+    let tracking = false;
+    let dragging = false;
+    let pointerId = -1;
+
+    const setOffset = (offset: number) => {
+      sheet.style.transform = `translate3d(0, ${offset}px, 0)`;
+      const backdrop = backdropRef.current;
+      if (backdrop && offset > 0) {
+        backdrop.style.opacity = String(
+          Math.max(0, 1 - offset / sheet.offsetHeight)
+        );
+      }
+    };
+
+    const onPointerDown = (event: PointerEvent) => {
+      if (event.button !== 0 || scrolledAncestorWithin(event.target, sheet)) {
+        return;
+      }
+      tracking = true;
+      dragging = false;
+      pointerId = event.pointerId;
+      startY = event.clientY;
+      lastY = event.clientY;
+      lastTime = event.timeStamp;
+      velocity = 0;
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+      if (!tracking || event.pointerId !== pointerId) {
+        return;
+      }
+      const dy = event.clientY - startY;
+      if (!dragging) {
+        if (dy < DRAG_START_THRESHOLD) {
+          return;
+        }
+        dragging = true;
+        sheet.setPointerCapture(pointerId);
+        sheet.style.transition = 'none';
+      }
+      const dt = Math.max(1, event.timeStamp - lastTime);
+      velocity = (event.clientY - lastY) / dt;
+      lastY = event.clientY;
+      lastTime = event.timeStamp;
+      setOffset(dy > 0 ? dy : dy * UPWARD_RESISTANCE);
+    };
+
+    const onPointerUp = (event: PointerEvent) => {
+      if (!tracking || event.pointerId !== pointerId) {
+        return;
+      }
+      tracking = false;
+      if (!dragging) {
+        return;
+      }
+      dragging = false;
+      const dy = event.clientY - startY;
+      const height = sheet.offsetHeight;
+      sheet.style.transition = SETTLE_TRANSITION;
+      if (dy > height * DISMISS_DISTANCE_RATIO || velocity > DISMISS_VELOCITY) {
+        setOffset(height);
+        onDismissRef.current();
+      } else {
+        setOffset(0);
+        if (backdropRef.current) {
+          backdropRef.current.style.opacity = '1';
+        }
+      }
+      // Swallow the click that follows a drag so buttons under the finger
+      // do not fire.
+      sheet.addEventListener(
+        'click',
+        (clickEvent) => {
+          clickEvent.stopPropagation();
+          clickEvent.preventDefault();
+        },
+        { capture: true, once: true }
+      );
+    };
+
+    sheet.addEventListener('pointerdown', onPointerDown);
+    sheet.addEventListener('pointermove', onPointerMove);
+    sheet.addEventListener('pointerup', onPointerUp);
+    sheet.addEventListener('pointercancel', onPointerUp);
+    return () => {
+      sheet.removeEventListener('pointerdown', onPointerDown);
+      sheet.removeEventListener('pointermove', onPointerMove);
+      sheet.removeEventListener('pointerup', onPointerUp);
+      sheet.removeEventListener('pointercancel', onPointerUp);
+    };
+  }, [sheetRef, backdropRef, enabled]);
+}