@stackflow/plugin-basic-ui 1.3.5-alpha.3 → 1.4.0

package/src/components/AppScreen.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { createContext, useContext, useMemo, useRef } from "react";
@@ -36,7 +34,8 @@ export type AppScreenProps = Partial<
     "theme" | "modalPresentationStyle" | "ref" | "key"
   >;
   preventSwipeBack?: boolean;
-  modalPresentationStyle?: "fullScreen";
+  CUPERTINO_ONLY_modalPresentationStyle?: "fullScreen";
+  ANDROID_ONLY_activityEnterStyle?: "slideInLeft";
   children: React.ReactNode;
 };
 const AppScreen: React.FC<AppScreenProps> = ({
@@ -44,7 +43,8 @@ const AppScreen: React.FC<AppScreenProps> = ({
   dimBackgroundColor,
   appBar,
   preventSwipeBack,
-  modalPresentationStyle,
+  CUPERTINO_ONLY_modalPresentationStyle,
+  ANDROID_ONLY_activityEnterStyle,
   children,
 }) => {
   const globalOptions = useGlobalOptions();
@@ -58,44 +58,78 @@ const AppScreen: React.FC<AppScreenProps> = ({
   const edgeRef = useRef<HTMLDivElement>(null);
   const appBarRef = useRef<HTMLDivElement>(null);
 
-  const presentModalFullScreen = modalPresentationStyle === "fullScreen";
-  const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;
+  const modalPresentationStyle =
+    globalOptions.theme === "cupertino"
+      ? CUPERTINO_ONLY_modalPresentationStyle
+      : undefined;
+  const activityEnterStyle =
+    globalOptions.theme === "android"
+      ? ANDROID_ONLY_activityEnterStyle
+      : undefined;
+
+  const swipeBackPrevented =
+    preventSwipeBack || modalPresentationStyle === "fullScreen";
+
+  const hasAppBar = !!appBar;
+
+  const zIndexBase = (activity?.zIndex ?? 0) * 5;
+
+  let zIndexDim: number;
+  let zIndexPaper: number;
+  let zIndexEdge: number;
+  let zIndexAppBar: number;
+
+  switch (globalOptions.theme) {
+    case "cupertino": {
+      zIndexDim =
+        zIndexBase + (modalPresentationStyle === "fullScreen" ? 2 : 0);
+      zIndexPaper =
+        zIndexBase +
+        (hasAppBar && modalPresentationStyle !== "fullScreen" ? 1 : 3);
+      zIndexEdge = zIndexBase + 4;
+      zIndexAppBar = zIndexBase + 7;
+      break;
+    }
+    case "android":
+    default: {
+      zIndexDim = zIndexBase;
+      zIndexPaper = zIndexBase + (activityEnterStyle === "slideInLeft" ? 1 : 3);
+      zIndexEdge = zIndexBase + 4;
+      zIndexAppBar =
+        zIndexBase + (activityEnterStyle === "slideInLeft" ? 7 : 4);
+      break;
+    }
+  }
+
+  const transitionState = activity?.transitionState ?? "enter-done";
+  const lazyTransitionState = useLazy(transitionState);
 
   useStyleEffectHide({
     refs: [appScreenRef],
     hasEffect: true,
   });
   useStyleEffectOffset({
-    theme: globalOptions.theme,
     refs:
-      globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
-    hasEffect: !presentModalFullScreen,
+      globalOptions.theme === "cupertino" ||
+      activityEnterStyle === "slideInLeft"
+        ? [paperRef]
+        : [paperRef, appBarRef],
+    theme: globalOptions.theme,
+    activityEnterStyle,
+    hasEffect: modalPresentationStyle !== "fullScreen",
   });
   useStyleEffectSwipeBack({
-    theme: globalOptions.theme,
     dimRef,
     edgeRef,
     paperRef,
-    hasEffect: true,
+    theme: globalOptions.theme,
     prevented: swipeBackPrevented,
     onSwiped() {
       pop();
     },
+    hasEffect: true,
   });
 
-  const hasAppBar = !!appBar;
-
-  const zIndexBase = (activity?.zIndex ?? 0) * 5;
-  const zIndexDim = zIndexBase;
-  const zIndexPaper =
-    zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
-  const zIndexEdge = zIndexBase + 4;
-  const zIndexAppBar =
-    globalOptions.theme === "cupertino" ? zIndexBase + 7 : zIndexBase + 4;
-
-  const transitionState = activity?.transitionState ?? "enter-done";
-  const lazyTransitionState = useLazy(transitionState);
-
   const onAppBarTopClick: React.MouseEventHandler = (e) => {
     appBar?.onTopClick?.(e);
 
@@ -147,13 +181,19 @@ const AppScreen: React.FC<AppScreenProps> = ({
                 : "0ms",
           }),
         )}
+        data-stackflow-component-name="AppScreen"
+        data-stackflow-activity-id={activity?.id}
+        data-stackflow-activity-is-active={activity?.isActive}
       >
-        <div className={css.dim} ref={dimRef} />
+        {activityEnterStyle !== "slideInLeft" && (
+          <div className={css.dim} ref={dimRef} />
+        )}
         {appBar && (
           <AppBar
             {...appBar}
             ref={appBarRef}
             modalPresentationStyle={modalPresentationStyle}
+            activityEnterStyle={activityEnterStyle}
             onTopClick={onAppBarTopClick}
           />
         )}
@@ -161,7 +201,8 @@ const AppScreen: React.FC<AppScreenProps> = ({
           key={activity?.id}
           className={css.paper({
             hasAppBar,
-            presentModalFullScreen,
+            modalPresentationStyle,
+            activityEnterStyle,
           })}
           ref={paperRef}
         >

package/src/components/BottomSheet.tsx

@@ -87,6 +87,9 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
               : "0ms",
         }),
       )}
+      data-stackflow-component-name="BottomSheet"
+      data-stackflow-activity-id={activity?.id}
+      data-stackflow-activity-is-active={activity?.isActive}
     >
       <div className={css.dim} ref={paperRef} onClick={onDimClick}>
         <div className={css.paper} onClick={onPaperClick}>

package/src/components/Modal.tsx

@@ -87,6 +87,9 @@ const Modal: React.FC<ModalProps> = ({
               : "0ms",
         }),
       )}
+      data-stackflow-component-name="Modal"
+      data-stackflow-activity-id={activity?.id}
+      data-stackflow-activity-is-active={activity?.isActive}
     >
       <div className={css.dim} ref={paperRef} onClick={onDimClick}>
         <div className={css.paper} onClick={onPaperClick}>

package/src/hooks/useStyleEffectOffset.ts

@@ -10,10 +10,12 @@ export const OFFSET_PX_CUPERTINO = 80;
 export function useStyleEffectOffset({
   refs,
   theme,
-  hasEffect,
+  activityEnterStyle,
+  hasEffect = false,
 }: {
   refs: Array<React.RefObject<any>>;
   theme: "android" | "cupertino";
+  activityEnterStyle?: "slideInLeft";
   hasEffect?: boolean;
 }) {
   useStyleEffect({
@@ -21,10 +23,25 @@ export function useStyleEffectOffset({
     refs,
     effect: hasEffect
       ? ({ activityTransitionState, refs }) => {
-          const transform =
-            theme === "cupertino"
-              ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`
-              : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
+          let transform: string;
+          let opacity: string;
+
+          switch (theme) {
+            case "cupertino": {
+              transform = `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`;
+              opacity = "1";
+              break;
+            }
+            case "android":
+            default: {
+              transform =
+                activityEnterStyle === "slideInLeft"
+                  ? `translate3d(-50%, 0, 0)`
+                  : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
+              opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
+              break;
+            }
+          }
 
           const cleanup = () => {
             requestNextFrame(() => {
@@ -36,6 +53,7 @@ export function useStyleEffectOffset({
                 const $el = ref.current;
 
                 $el.style.transform = "";
+                $el.style.opacity = "";
 
                 listenOnce($el, "transitionend", () => {
                   $el.style.transition = "";
@@ -55,6 +73,7 @@ export function useStyleEffectOffset({
                 ref.current.style.transition =
                   globalVars.computedTransitionDuration;
                 ref.current.style.transform = transform;
+                ref.current.style.opacity = opacity;
               });
 
               switch (activityTransitionState) {