feat(react-ui-core): add swipe back ratio css var in other activity roots and add transitionend state in useStyleEffectSwipeBack() (#549)

Author: tonyfromundefined

extensions/react-ui-core/src/useStyleEffectOffset.ts

@@ -32,7 +32,7 @@ export function useStyleEffectOffset({
                 $el.style.transform = "";
                 $el.style.opacity = "";
 
-                listenOnce($el, "transitionend", () => {
+                listenOnce($el, ["transitionend", "transitioncancel"], () => {
                   $el.style.transition = "";
                 });
               });

extensions/react-ui-core/src/useStyleEffectSwipeBack.ts

@@ -16,6 +16,7 @@ export function useStyleEffectSwipeBack({
   onSwipeStart,
   onSwipeMove,
   onSwipeEnd,
+  onTransitionEnd,
 }: {
   dimRef: React.RefObject<HTMLDivElement>;
   edgeRef: React.RefObject<HTMLDivElement>;
@@ -28,6 +29,7 @@ export function useStyleEffectSwipeBack({
   onSwipeStart?: () => void;
   onSwipeMove?: (args: { dx: number; ratio: number }) => void;
   onSwipeEnd?: (args: { swiped: boolean }) => void;
+  onTransitionEnd?: (args: { swiped: boolean }) => void;
 }) {
   useStyleEffect({
     styleName: "swipe-back",
@@ -101,6 +103,11 @@ export function useStyleEffectSwipeBack({
               if (ref.current.parentElement?.style.display === "none") {
                 ref.current.parentElement.style.display = "block";
               }
+
+              ref.current.parentElement?.style.setProperty(
+                SWIPE_BACK_RATIO_CSS_VAR_NAME,
+                String(ratio),
+              );
             });
 
             _rAFLock = false;
@@ -118,8 +125,6 @@ export function useStyleEffectSwipeBack({
             $paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
             $paper.style.transition = transitionDuration;
 
-            $appBarRef?.style.removeProperty(SWIPE_BACK_RATIO_CSS_VAR_NAME);
-
             refs.forEach((ref) => {
               if (!ref.current) {
                 return;
@@ -135,7 +140,7 @@ export function useStyleEffectSwipeBack({
 
             resolve();
 
-            listenOnce($paper, "transitionend", () => {
+            listenOnce($paper, ["transitionend", "transitioncancel"], () => {
               const _swiped =
                 swiped ||
                 getActivityTransitionState() === "exit-active" ||
@@ -145,6 +150,8 @@ export function useStyleEffectSwipeBack({
               $paper.style.overflowY = "";
               $paper.style.transform = "";
 
+              $appBarRef?.style.removeProperty(SWIPE_BACK_RATIO_CSS_VAR_NAME);
+
               refs.forEach((ref, i) => {
                 if (!ref.current) {
                   return;
@@ -168,7 +175,13 @@ export function useStyleEffectSwipeBack({
                       _cachedRef.parentElement.style.display;
                   }
                 }
+
+                ref.current.parentElement?.style.removeProperty(
+                  SWIPE_BACK_RATIO_CSS_VAR_NAME,
+                );
               });
+
+              onTransitionEnd?.({ swiped });
             });
           });
         });

extensions/react-ui-core/src/utils/listenOnce.ts

@@ -1,12 +1,16 @@
 export function listenOnce<T extends HTMLElement>(
   el: T,
-  type: keyof HTMLElementEventMap,
+  types: Array<keyof HTMLElementEventMap>,
   cb: () => void,
 ) {
   const listener = () => {
-    el.removeEventListener(type, listener);
+    types.forEach((type) => {
+      el.removeEventListener(type, listener);
+    });
     cb();
   };
 
-  el.addEventListener(type, listener);
+  types.forEach((type) => {
+    el.addEventListener(type, listener);
+  });
 }