@onekeyfe/react-native-native-overlay 3.0.162-alpha.270 → 6.7.0-8

package/src/useOverlayController.ts

@@ -69,9 +69,7 @@ export function useOverlayController(
   const pageScope = useOverlayPageScope();
   const hostKey = props.hostKey ?? pageScope.hostKey;
   const ownerKey = props.ownerKey ?? pageScope.ownerKey;
-  // Without a host or owner there is nowhere to anchor a page overlay.
-  const scope =
-    props.scope === 'page' && hostKey && ownerKey ? 'page' : 'global';
+  const scope = props.scope ?? 'global';
   const baseId = useId();
   const cycleRef = useRef(0);
   const [entryId, setEntryId] = useState<string | undefined>();
@@ -79,6 +77,7 @@ export function useOverlayController(
   // still true, so the effect below does not immediately reopen it.
   const closedByStoreRef = useRef(false);
   const propsRef = useLatest(props);
+  const previousVisibleRef = useRef(visible);
 
   const snapshot = useSyncExternalStore(
     overlayStore.subscribe,
@@ -95,6 +94,9 @@ export function useOverlayController(
   );
 
   useEffect(() => {
+    const reopening = visible && !previousVisibleRef.current;
+    previousVisibleRef.current = visible;
+    if (reopening && entryId) overlayStore.reopen(entryId);
     if (!visible) {
       closedByStoreRef.current = false;
       if (entryId) {
@@ -105,6 +107,11 @@ export function useOverlayController(
     if (entryId || closedByStoreRef.current) {
       return;
     }
+    // Page context can become ready after the caller first opens the overlay.
+    // Keep the request in its page boundary instead of presenting globally.
+    if (scope === 'page' && (!hostKey || !ownerKey)) {
+      return;
+    }
     cycleRef.current += 1;
     const id = `overlay-view${baseId}${cycleRef.current}`;
     overlayStore.request(
@@ -134,7 +141,7 @@ export function useOverlayController(
     setEntryId(id);
     // Level / strategy changes apply to the next open cycle only.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, entryId]);
+  }, [visible, entryId, scope, hostKey, ownerKey]);
 
   useEffect(
     () => () => {

package/src/web/animateTransition.ts

@@ -100,7 +100,8 @@ export function animateTransition(
   element: HTMLElement,
   contentRoot: HTMLElement,
   transition: IResolvedOverlayTransition,
-  direction: 'in' | 'out'
+  direction: 'in' | 'out',
+  interruptedFrames?: ReadonlyMap<HTMLElement, Keyframe>
 ): Animation | undefined {
   if (transition.type === 'none') {
     return undefined;
@@ -109,16 +110,32 @@ export function animateTransition(
     ? { ...transition, type: 'fade', fade: true }
     : transition;
   const extent = measureContentExtent(contentRoot);
-  element.style.transformOrigin = `${(extent.left + extent.right) / 2}px ${
-    (extent.top + extent.bottom) / 2
-  }px`;
+  // The React Native root wraps the positioned panel. Animate that panel so its
+  // offset parent stays unscaled; multi-child roots retain their shared motion.
+  const anchoredContent =
+    effective.origin === 'anchor' && contentRoot.childElementCount === 1
+      ? contentRoot.firstElementChild
+      : undefined;
+  const target =
+    anchoredContent instanceof HTMLElement ? anchoredContent : element;
+  const targetRect =
+    target === element ? undefined : target.getBoundingClientRect();
+  target.style.transformOrigin = `${
+    (extent.left + extent.right) / 2 - (targetRect?.left ?? 0)
+  }px ${(extent.top + extent.bottom) / 2 - (targetRect?.top ?? 0)}px`;
   const hidden = hiddenKeyframe(effective, extent);
   const visible: Keyframe = {};
   Object.keys(hidden).forEach((key) => {
     visible[key] = VISIBLE_KEYFRAME[key];
   });
-  const keyframes = direction === 'in' ? [hidden, visible] : [visible, hidden];
-  return element.animate(keyframes, {
+  const sampled = interruptedFrames?.get(target);
+  const initial = direction === 'in' ? hidden : visible;
+  const start: Keyframe = {};
+  Object.keys(initial).forEach((key) => {
+    start[key] = sampled?.[key] ?? initial[key];
+  });
+  const keyframes = [start, direction === 'in' ? visible : hidden];
+  return target.animate(keyframes, {
     ...toTiming(effective.motion),
     fill: 'forwards',
   });
@@ -127,11 +144,13 @@ export function animateTransition(
 export function animateBackdrop(
   element: HTMLElement,
   motion: IOverlayMotion,
-  direction: 'in' | 'out'
+  direction: 'in' | 'out',
+  interruptedFrames?: ReadonlyMap<HTMLElement, Keyframe>
 ): Animation {
-  const keyframes =
-    direction === 'in'
-      ? [{ opacity: 0 }, { opacity: 1 }]
-      : [{ opacity: 1 }, { opacity: 0 }];
+  const sampled = interruptedFrames?.get(element)?.opacity;
+  const keyframes = [
+    { opacity: sampled ?? (direction === 'in' ? 0 : 1) },
+    { opacity: direction === 'in' ? 1 : 0 },
+  ];
   return element.animate(keyframes, { ...toTiming(motion), fill: 'forwards' });
 }

package/src/web/overlayLayers.ts

@@ -6,7 +6,7 @@ import {
 import { overlayStore } from '../OverlayStore';
 
 import type { IOverlayRequestDismissReason } from '../OverlayViewTypes';
-import type { IOverlayLevel } from '../types';
+import type { IOverlayEntry, IOverlayLevel } from '../types';
 
 const LAYER_ATTRIBUTE = 'data-onekey-overlay-layer';
 export const ENTRY_ATTRIBUTE = 'data-onekey-overlay-entry';
@@ -15,6 +15,7 @@ const APP_ROOT_ID = 'root';
 
 const layerRoots = new Map<IOverlayLevel, HTMLDivElement>();
 const pageHosts = new Map<string, HTMLDivElement>();
+const pageHostListeners = new Map<string, Set<() => void>>();
 const dismissRequesters = new Map<
   string,
   (reason: IOverlayRequestDismissReason) => void
@@ -68,16 +69,27 @@ function siblingsOutside(host: HTMLElement, root: HTMLElement) {
   return siblings;
 }
 
-function inertEntriesBelow(container: ParentNode, seq: number) {
+function inertEntriesBelow(container: ParentNode, top?: IOverlayEntry) {
   container
     .querySelectorAll<HTMLElement>(`[${ENTRY_ATTRIBUTE}]`)
     .forEach((node) => {
-      setInert(node, Number(node.dataset.stackOrder) < seq);
+      const level = Number(node.dataset.overlayLevelOrder);
+      const below =
+        !!top &&
+        (level < OVERLAY_LEVEL_ORDER[top.level] ||
+          (level === OVERLAY_LEVEL_ORDER[top.level] &&
+            Number(node.dataset.stackOrder) < top.seq));
+      setInert(
+        node,
+        below ||
+          node.style.visibility === 'hidden' ||
+          node.getAttribute('aria-hidden') === 'true'
+      );
     });
 }
 
 /** Everything rendered below the topmost blocking entry becomes inert. */
-function syncInert() {
+export function syncOverlayInert() {
   const top = overlayStore.getBlockingTop();
   const appRoot = document.getElementById(APP_ROOT_ID);
   let nextPageInert = new Set<HTMLElement>();
@@ -86,7 +98,6 @@ function syncInert() {
   if (top && pageHost && appRoot?.contains(pageHost)) {
     setInert(appRoot, false);
     nextPageInert = siblingsOutside(pageHost, appRoot);
-    inertEntriesBelow(pageHost, top.seq);
   } else {
     setInert(appRoot, !!top);
   }
@@ -98,15 +109,23 @@ function syncInert() {
   nextPageInert.forEach((element) => setInert(element, true));
   pageInertElements = nextPageInert;
 
+  for (const [hostKey, host] of pageHosts) {
+    inertEntriesBelow(
+      host,
+      top?.scope === 'page' && top.hostKey === hostKey ? top : undefined
+    );
+  }
+
   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);
-    }
+    inertEntriesBelow(
+      root,
+      top?.scope === 'global' && level === top.level ? top : undefined
+    );
   }
 }
 
@@ -131,7 +150,7 @@ function installOverlayWebManager() {
     return;
   }
   installed = true;
-  overlayStore.subscribe(syncInert);
+  overlayStore.subscribe(syncOverlayInert);
   document.addEventListener('keydown', onKeyDown, true);
 }
 
@@ -159,7 +178,7 @@ export function registerOverlayDismissRequester(
 
 /** Re-run after entry DOM nodes mount, since the store emits before commit. */
 export function scheduleOverlayInertSync() {
-  requestAnimationFrame(syncInert);
+  requestAnimationFrame(syncOverlayInert);
 }
 
 export function registerOverlayPageHost(
@@ -168,13 +187,32 @@ export function registerOverlayPageHost(
 ): () => void {
   installOverlayWebManager();
   pageHosts.set(hostKey, element);
+  pageHostListeners.get(hostKey)?.forEach((listener) => listener());
   return () => {
     if (pageHosts.get(hostKey) === element) {
       pageHosts.delete(hostKey);
+      pageHostListeners.get(hostKey)?.forEach((listener) => listener());
     }
   };
 }
 
+export function subscribeOverlayPageHost(
+  hostKey: string | undefined,
+  listener: () => void
+): () => void {
+  if (!hostKey) return () => {};
+  let listeners = pageHostListeners.get(hostKey);
+  if (!listeners) {
+    listeners = new Set();
+    pageHostListeners.set(hostKey, listeners);
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) pageHostListeners.delete(hostKey);
+  };
+}
+
 export function getOverlayPageHost(
   hostKey: string | undefined
 ): HTMLDivElement | undefined {

package/src/web/useKeyboardShift.ts

@@ -99,7 +99,7 @@ export function useKeyboardShift({
         top = origin + sheet.offsetTop;
         bottom = top + sheet.offsetHeight;
       } else {
-        const extent = layoutExtent(contentRef.current);
+        const extent = layoutExtent(sheet ?? contentRef.current);
         if (extent) {
           top = origin + extent.top;
           bottom = origin + extent.bottom;

package/src/web/useSheetDrag.ts

@@ -129,15 +129,36 @@ export function useSheetDrag({
       );
     };
 
+    const onPointerCancel = (event: PointerEvent) => {
+      if (!tracking || event.pointerId !== pointerId) {
+        return;
+      }
+      tracking = false;
+      dragging = false;
+      velocity = 0;
+      if (sheet.hasPointerCapture?.(pointerId)) {
+        sheet.releasePointerCapture(pointerId);
+      }
+      pointerId = -1;
+      sheet.style.transform = '';
+      sheet.style.transition = '';
+      if (backdropRef.current) {
+        backdropRef.current.style.opacity = '1';
+      }
+    };
+
     sheet.addEventListener('pointerdown', onPointerDown);
     sheet.addEventListener('pointermove', onPointerMove);
     sheet.addEventListener('pointerup', onPointerUp);
-    sheet.addEventListener('pointercancel', onPointerUp);
+    sheet.addEventListener('pointercancel', onPointerCancel);
     return () => {
+      if (sheet.hasPointerCapture?.(pointerId)) {
+        sheet.releasePointerCapture(pointerId);
+      }
       sheet.removeEventListener('pointerdown', onPointerDown);
       sheet.removeEventListener('pointermove', onPointerMove);
       sheet.removeEventListener('pointerup', onPointerUp);
-      sheet.removeEventListener('pointercancel', onPointerUp);
+      sheet.removeEventListener('pointercancel', onPointerCancel);
     };
   }, [sheetRef, backdropRef, enabled]);
 }