@ahnseungchan/webviewkit 2.0.0 → 2.1.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/constants.ts
-var STACK_TRANSITION_MS = 300;
+var STACK_TRANSITION_MS = 500;
 var TRANSITION_END_GRACE_MS = 50;
 var BACK_TIMEOUT_MS = 1e3;
 var BRIDGE_TIMEOUT_MS = 5e3;
@@ -815,22 +815,33 @@ import { css, keyframes } from "@emotion/react";
 import styled2 from "@emotion/styled";
 import { useLayoutEffect, useRef as useRef2 } from "react";
 import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
-var slideInRight = keyframes`
+var IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+var FADE_EASING = "ease";
+var PARALLAX_OFFSET = "-30%";
+var coverIn = keyframes`
   from { transform: translate3d(100%, 0, 0); }
   to { transform: translate3d(0, 0, 0); }
 `;
-var slideOutLeft = keyframes`
-  from { transform: translate3d(0, 0, 0); opacity: 1; }
-  to { transform: translate3d(-30%, 0, 0); opacity: 0.6; }
-`;
-var slideInLeft = keyframes`
-  from { transform: translate3d(-30%, 0, 0); opacity: 0.6; }
-  to { transform: translate3d(0, 0, 0); opacity: 1; }
-`;
-var slideOutRight = keyframes`
+var coverOut = keyframes`
   from { transform: translate3d(0, 0, 0); }
   to { transform: translate3d(100%, 0, 0); }
 `;
+var parallaxOut = keyframes`
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
+`;
+var parallaxIn = keyframes`
+  from { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+`;
+var dimIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var dimOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
 var fadeIn = keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
@@ -839,14 +850,27 @@ var fadeOut = keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
 `;
-var SLIDE_KEYFRAMES = {
-  push: { enter: slideInRight, exit: slideOutLeft },
-  pop: { enter: slideInLeft, exit: slideOutRight }
-};
-var FADE_KEYFRAMES = { enter: fadeIn, exit: fadeOut };
-function pickKeyframes(transition, direction, pageState) {
-  if (transition === "fade") return FADE_KEYFRAMES[pageState];
-  return SLIDE_KEYFRAMES[direction][pageState];
+var layerOf = (direction, pageState) => direction === "push" === (pageState === "enter") ? "upper" : "lower";
+function slideStyles(direction, pageState, duration) {
+  const timing = `${duration}ms ${IOS_EASING} forwards`;
+  if (layerOf(direction, pageState) === "upper") {
+    return css`
+      animation: ${direction === "push" ? coverIn : coverOut} ${timing};
+      box-shadow: var(--wvk-edge-shadow, -6px 0 24px rgba(0, 0, 0, 0.12));
+    `;
+  }
+  return css`
+    animation: ${direction === "push" ? parallaxOut : parallaxIn} ${timing};
+    &::after {
+      content: "";
+      /* transform 중인 페이지 기준 fixed = 스크롤과 무관하게 페이지 전체를 덮음 */
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background: var(--wvk-dim-color, rgba(0, 0, 0, 0.12));
+      animation: ${direction === "push" ? dimIn : dimOut} ${timing};
+    }
+  `;
 }
 var PageWrapper = styled2.div`
   position: absolute;
@@ -859,10 +883,16 @@ var PageWrapper = styled2.div`
   ${({ pageState, direction, transitionType, duration }) => {
   if (pageState !== "enter" && pageState !== "exit") return "";
   if (transitionType === "none" || duration === 0) return "";
+  if (transitionType === "fade") {
+    return css`
+        will-change: opacity;
+        animation: ${pageState === "enter" ? fadeIn : fadeOut} ${duration}ms
+          ${FADE_EASING} forwards;
+      `;
+  }
   return css`
-      will-change: transform, opacity;
-      animation: ${pickKeyframes(transitionType, direction, pageState)}
-        ${duration}ms ease-in-out forwards;
+      will-change: transform;
+      ${slideStyles(direction, pageState, duration)}
     `;
 }}
 `;
@@ -885,7 +915,9 @@ function StackPage({
       "data-state": wrapperProps.pageState,
       "aria-hidden": isTop ? void 0 : true,
       onAnimationEnd: (event) => {
-        if (event.target === event.currentTarget) onAnimationEnd == null ? void 0 : onAnimationEnd();
+        if (event.target === event.currentTarget && !event.pseudoElement) {
+          onAnimationEnd == null ? void 0 : onAnimationEnd();
+        }
       },
       children
     }
@@ -1198,12 +1230,8 @@ function useStackNavigation(options) {
     const delta = Math.min(Math.max(1, count), entries.length - 1);
     const targetIndex = entries.length - 1 - delta;
     busyRef.current = true;
-    void history.travel(-delta).then((popped) => {
-      if (!popped) {
-        busyRef.current = false;
-        dispatch({ type: "POP_TO", index: targetIndex, animate: false });
-      }
-    });
+    dispatch({ type: "POP_TO", index: targetIndex, animate: animate() });
+    void history.travel(-delta);
     return true;
   }, []);
   const back = useCallback(() => pop(1), [pop]);