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

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

@@ -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
@@ -186,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]);
 }