@stackflow/plugin-basic-ui 1.3.3-alpha.0 → 1.3.4-alpha.0

package/src/components/AppScreen.css.ts

@@ -125,17 +125,17 @@ export const paper = recipe({
           paddingTop: globalVars.appBar.height,
           "@supports": {
             "(padding-top: constant(safe-area-inset-top))": {
-              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.forceSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
+              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
             },
             "(padding-top: env(safe-area-inset-top))": {
-              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.forceSafeAreaInsetTop}, env(safe-area-inset-top)))`,
+              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,
             },
           },
         },
       ],
     },
-    presentModalFullScreen: {
-      true: {
+    modalPresentationStyle: {
+      fullScreen: {
         selectors: {
           [`${cupertino} &`]: {
             transform: "translate3d(0, 100%, 0)",
@@ -143,6 +143,15 @@ export const paper = recipe({
         },
       },
     },
+    activityEnterStyle: {
+      slideInLeft: {
+        selectors: {
+          [`${android} &`]: {
+            transform: "translate3d(50%, 0, 0)",
+          },
+        },
+      },
+    },
   },
 });
 

package/src/components/AppScreen.tsx

@@ -36,7 +36,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 +45,8 @@ const AppScreen: React.FC<AppScreenProps> = ({
   dimBackgroundColor,
   appBar,
   preventSwipeBack,
-  modalPresentationStyle,
+  CUPERTINO_ONLY_modalPresentationStyle,
+  ANDROID_ONLY_activityEnterStyle,
   children,
 }) => {
   const globalOptions = useGlobalOptions();
@@ -58,44 +60,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);
 
@@ -148,12 +184,15 @@ const AppScreen: React.FC<AppScreenProps> = ({
           }),
         )}
       >
-        <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 +200,8 @@ const AppScreen: React.FC<AppScreenProps> = ({
           key={activity?.id}
           className={css.paper({
             hasAppBar,
-            presentModalFullScreen,
+            modalPresentationStyle,
+            activityEnterStyle,
           })}
           ref={paperRef}
         >

package/src/hooks/useStyleEffectOffset.ts

@@ -10,10 +10,12 @@ export const OFFSET_PX_CUPERTINO = 80;
 export function useStyleEffectOffset({
   refs,
   theme,
+  activityEnterStyle,
   hasEffect,
 }: {
   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) {