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

package/src/components/AppScreen.tsx

@@ -36,8 +36,7 @@ export type AppScreenProps = Partial<
     "theme" | "modalPresentationStyle" | "ref" | "key"
   >;
   preventSwipeBack?: boolean;
-  CUPERTINO_ONLY_modalPresentationStyle?: "fullScreen";
-  ANDROID_ONLY_activityEnterStyle?: "slideInLeft";
+  modalPresentationStyle?: "fullScreen";
   children: React.ReactNode;
 };
 const AppScreen: React.FC<AppScreenProps> = ({
@@ -45,8 +44,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
   dimBackgroundColor,
   appBar,
   preventSwipeBack,
-  CUPERTINO_ONLY_modalPresentationStyle,
-  ANDROID_ONLY_activityEnterStyle,
+  modalPresentationStyle,
   children,
 }) => {
   const globalOptions = useGlobalOptions();
@@ -60,78 +58,44 @@ const AppScreen: React.FC<AppScreenProps> = ({
   const edgeRef = useRef<HTMLDivElement>(null);
   const appBarRef = useRef<HTMLDivElement>(null);
 
-  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);
+  const presentModalFullScreen = modalPresentationStyle === "fullScreen";
+  const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;
 
   useStyleEffectHide({
     refs: [appScreenRef],
     hasEffect: true,
   });
   useStyleEffectOffset({
-    refs:
-      globalOptions.theme === "cupertino" ||
-      activityEnterStyle === "slideInLeft"
-        ? [paperRef]
-        : [paperRef, appBarRef],
     theme: globalOptions.theme,
-    activityEnterStyle,
-    hasEffect: modalPresentationStyle !== "fullScreen",
+    refs:
+      globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
+    hasEffect: !presentModalFullScreen,
   });
   useStyleEffectSwipeBack({
+    theme: globalOptions.theme,
     dimRef,
     edgeRef,
     paperRef,
-    theme: globalOptions.theme,
+    hasEffect: true,
     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);
 
@@ -184,15 +148,12 @@ const AppScreen: React.FC<AppScreenProps> = ({
           }),
         )}
       >
-        {activityEnterStyle !== "slideInLeft" && (
-          <div className={css.dim} ref={dimRef} />
-        )}
+        <div className={css.dim} ref={dimRef} />
         {appBar && (
           <AppBar
             {...appBar}
             ref={appBarRef}
             modalPresentationStyle={modalPresentationStyle}
-            activityEnterStyle={activityEnterStyle}
             onTopClick={onAppBarTopClick}
           />
         )}
@@ -200,8 +161,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
           key={activity?.id}
           className={css.paper({
             hasAppBar,
-            modalPresentationStyle,
-            activityEnterStyle,
+            presentModalFullScreen,
           })}
           ref={paperRef}
         >

package/src/hooks/useStyleEffectOffset.ts

@@ -10,12 +10,10 @@ 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({
@@ -23,25 +21,10 @@ export function useStyleEffectOffset({
     refs,
     effect: hasEffect
       ? ({ activityTransitionState, refs }) => {
-          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 transform =
+            theme === "cupertino"
+              ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`
+              : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
 
           const cleanup = () => {
             requestNextFrame(() => {
@@ -53,7 +36,6 @@ export function useStyleEffectOffset({
                 const $el = ref.current;
 
                 $el.style.transform = "";
-                $el.style.opacity = "";
 
                 listenOnce($el, "transitionend", () => {
                   $el.style.transition = "";
@@ -73,7 +55,6 @@ export function useStyleEffectOffset({
                 ref.current.style.transition =
                   globalVars.computedTransitionDuration;
                 ref.current.style.transform = transform;
-                ref.current.style.opacity = opacity;
               });
 
               switch (activityTransitionState) {