@stackflow/plugin-basic-ui 0.21.1 → 0.21.3-alpha.0

package/src/components/AppBar.tsx

@@ -7,7 +7,7 @@ import { useGlobalOptions } from "../basicUIPlugin";
 import { useMaxWidth, useNullableActivity } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
-import { compactMap, noop } from "../utils";
+import { compactMap } from "../utils";
 import * as css from "./AppBar.css";
 import * as appScreenCss from "./AppScreen.css";
 
@@ -46,6 +46,7 @@ type AppBarProps = Partial<
       };
   closeButtonLocation?: "left" | "right";
   border?: boolean;
+  modalPresentationStyle?: "fullScreen";
   onTopClick?: (e: React.MouseEvent) => void;
 };
 const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
@@ -58,6 +59,7 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
       closeButton,
       closeButtonLocation = "left",
       border = true,
+      modalPresentationStyle,
       iconColor,
       textColor,
       borderColor,
@@ -83,6 +85,8 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
       enable: globalOptions.theme === "cupertino",
     });
 
+    const presentModalFullScreen = modalPresentationStyle === "fullScreen";
+
     const onBackClick = (e: React.MouseEvent<HTMLButtonElement>) => {
       if (backButton && "onClick" in backButton && backButton.onClick) {
         backButton.onClick(e);
@@ -153,6 +157,10 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
               return globalBackButton.renderIcon();
             }
 
+            if (presentModalFullScreen) {
+              return <IconClose />;
+            }
+
             return <IconBack />;
           })()}
         </button>
@@ -176,7 +184,20 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
     const renderCloseButton = () => {
       const isRoot = !activity || activity.isRoot;
 
-      if ((!closeButton && !globalOptions.appBar?.closeButton) || !isRoot) {
+      const showCloseButton = (closeButton: AppBarProps["closeButton"]) =>
+        (closeButton && "render" in closeButton && closeButton.render) ||
+        (closeButton &&
+          "renderIcon" in closeButton &&
+          closeButton.renderIcon) ||
+        (closeButton && "onClick" in closeButton && closeButton.onClick);
+
+      if (
+        !(
+          showCloseButton(closeButton) ||
+          showCloseButton(globalOptions.appBar?.closeButton)
+        ) ||
+        !isRoot
+      ) {
         return null;
       }
       if (closeButton && "render" in closeButton && closeButton.render) {
@@ -236,6 +257,7 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
         ref={ref}
         className={css.appBar({
           border,
+          presentModalFullScreen,
         })}
         style={assignInlineVars(
           compactMap({

package/src/components/AppScreen.css.ts

@@ -65,20 +65,23 @@ export const dim = style([
     zIndex: vars.zIndexes.dim,
     willChange: "opacity",
     selectors: {
-      [`${android} &, ${rootAndroid} &`]: {
+      [`
+        ${android} &,
+        ${rootAndroid} &
+      `]: {
         height: "10rem",
         background: `linear-gradient(${globalVars.dimBackgroundColor}, rgba(0, 0, 0, 0))`,
       },
-      [`${enterActive} &`]: {
+      [`
+        ${enterActive} &,
+        ${enterDone} &
+      `]: {
         opacity: 1,
       },
-      [`${enterDone} &`]: {
-        opacity: 1,
-      },
-      [`${exitActive} &`]: {
-        opacity: 0,
-      },
-      [`${exitDone} &`]: {
+      [`
+        ${exitActive} &,
+        ${exitDone} &
+      `]: {
         opacity: 0,
       },
     },
@@ -99,24 +102,33 @@ export const paper = recipe({
       zIndex: vars.zIndexes.paper,
       willChange: "transform",
       selectors: {
-        [`${cupertino} &, ${rootCupertino} &`]: {
+        [`
+          ${cupertino} &,
+          ${rootCupertino} &
+        `]: {
           transform: "translate3d(100%, 0, 0)",
         },
-        [`${cupertino} ${enterActive} &, ${rootCupertino} ${enterActive} &`]: {
+        [`
+          ${cupertino} ${enterActive} &,
+          ${rootCupertino} ${enterActive} &,
+          ${cupertino} ${enterDone} &,
+          ${rootCupertino} ${enterDone} &
+        `]: {
           transform: "translate3d(0, 0, 0)",
         },
-        [`${cupertino} ${enterDone} &, ${rootCupertino} ${enterDone} &`]: {
-          transform: "translate3d(0, 0, 0)",
-        },
-        [`${android} &, ${rootAndroid} &`]: {
+        [`
+          ${android} &,
+          ${rootAndroid} &
+        `]: {
           opacity: 0,
           transform: "translate3d(0, 10rem, 0)",
         },
-        [`${android} ${enterActive} &, ${rootAndroid} ${enterActive} &`]: {
-          opacity: 1,
-          transform: "translate3d(0, 0, 0)",
-        },
-        [`${android} ${enterDone} &, ${rootAndroid} ${enterDone} &`]: {
+        [`
+          ${android} ${enterActive} &,
+          ${rootAndroid} ${enterActive} &,
+          ${android} ${enterDone} &,
+          ${rootAndroid} ${enterDone} &
+        `]: {
           opacity: 1,
           transform: "translate3d(0, 0, 0)",
         },
@@ -136,6 +148,18 @@ export const paper = recipe({
         },
       ],
     },
+    presentModalFullScreen: {
+      true: {
+        selectors: {
+          [`
+            ${cupertino} &,
+            ${rootCupertino} &
+          `]: {
+            transform: "translate3d(0, 100%, 0)",
+          },
+        },
+      },
+    },
   },
 });
 

package/src/components/AppScreen.tsx

@@ -33,6 +33,7 @@ export type AppScreenProps = Partial<
 > & {
   appBar?: Omit<PropOf<typeof AppBar>, "theme" | "ref" | "key">;
   preventSwipeBack?: boolean;
+  modalPresentationStyle?: "fullScreen";
   children: React.ReactNode;
 };
 const AppScreen: React.FC<AppScreenProps> = ({
@@ -40,10 +41,12 @@ const AppScreen: React.FC<AppScreenProps> = ({
   dimBackgroundColor,
   appBar,
   preventSwipeBack,
+  modalPresentationStyle,
   children,
 }) => {
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity();
+
   const { pop } = useActions();
 
   const appScreenRef = useRef<HTMLDivElement>(null);
@@ -52,6 +55,9 @@ const AppScreen: React.FC<AppScreenProps> = ({
   const edgeRef = useRef<HTMLDivElement>(null);
   const appBarRef = useRef<HTMLDivElement>(null);
 
+  const presentModalFullScreen = modalPresentationStyle === "fullScreen";
+  const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;
+
   useStyleEffectHide({
     refs: [appScreenRef],
     hasEffect: true,
@@ -60,7 +66,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
     theme: globalOptions.theme,
     refs:
       globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
-    hasEffect: true,
+    hasEffect: !presentModalFullScreen,
   });
   useStyleEffectSwipeBack({
     theme: globalOptions.theme,
@@ -68,7 +74,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
     edgeRef,
     paperRef,
     hasEffect: true,
-    preventSwipeBack,
+    prevented: swipeBackPrevented,
     onSwiped() {
       pop();
     },
@@ -81,7 +87,8 @@ const AppScreen: React.FC<AppScreenProps> = ({
   const zIndexPaper =
     zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
   const zIndexEdge = zIndexBase + 4;
-  const zIndexAppBar = zIndexBase + 7;
+  const zIndexAppBar =
+    globalOptions.theme === "cupertino" ? zIndexBase + 7 : zIndexBase + 4;
 
   const transitionState = activity?.transitionState ?? "enter-done";
   const lazyTransitionState = useLazy(transitionState);
@@ -140,12 +147,18 @@ const AppScreen: React.FC<AppScreenProps> = ({
       >
         <div className={css.dim} ref={dimRef} />
         {appBar && (
-          <AppBar {...appBar} ref={appBarRef} onTopClick={onAppBarTopClick} />
+          <AppBar
+            {...appBar}
+            ref={appBarRef}
+            modalPresentationStyle={modalPresentationStyle}
+            onTopClick={onAppBarTopClick}
+          />
         )}
         <div
           key={activity?.id}
           className={css.paper({
             hasAppBar,
+            presentModalFullScreen,
           })}
           ref={paperRef}
         >
@@ -153,7 +166,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
         </div>
         {!activity?.isRoot &&
           globalOptions.theme === "cupertino" &&
-          !preventSwipeBack && (
+          !swipeBackPrevented && (
             <div className={css.edge({ hasAppBar })} ref={edgeRef} />
           )}
       </div>

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -10,7 +10,7 @@ export function useStyleEffectSwipeBack({
   edgeRef,
   paperRef,
   hasEffect,
-  preventSwipeBack,
+  prevented,
   onSwiped,
 }: {
   theme: "android" | "cupertino";
@@ -18,7 +18,7 @@ export function useStyleEffectSwipeBack({
   edgeRef: React.RefObject<HTMLDivElement>;
   paperRef: React.RefObject<HTMLDivElement>;
   hasEffect?: boolean;
-  preventSwipeBack?: boolean;
+  prevented?: boolean;
   onSwiped?: () => void;
 }) {
   useStyleEffect({
@@ -238,6 +238,6 @@ export function useStyleEffectSwipeBack({
           };
         }
       : undefined,
-    effectDeps: [preventSwipeBack],
+    effectDeps: [prevented],
   });
 }