Allow to change the initial mobile view of swirl-app-layout (#892)

getflip · Dec 16, 2024 · 4c86457 · 4c86457
1 parent 8ef3f0e
commit 4c86457
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/.changeset/fluffy-donuts-switch.md b/.changeset/fluffy-donuts-switch.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Add "initial-mobile-view" prop to swirl-app-layout
diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts
@@ -226,6 +226,7 @@ export namespace Components {
           * Hide the sidebar
          */
         "hideSidebar": () => Promise<void>;
+        "initialMobileView"?: SwirlAppLayoutMobileView;
         "navigationBackButtonLabel"?: string;
         "navigationExpansionStateStorageKey"?: string;
         "navigationLabel"?: string;
@@ -5875,6 +5876,7 @@ declare namespace LocalJSX {
         "ctaLabel"?: string;
         "hasNavigation"?: boolean;
         "hideAppBar"?: boolean;
+        "initialMobileView"?: SwirlAppLayoutMobileView;
         "navigationBackButtonLabel"?: string;
         "navigationExpansionStateStorageKey"?: string;
         "navigationLabel"?: string;

diff --git a/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx b/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx
@@ -60,6 +60,7 @@ export class SwirlAppLayout {
   @Prop() ctaLabel?: string;
   @Prop({ mutable: true }) hasNavigation: boolean;
   @Prop() hideAppBar?: boolean;
+  @Prop() initialMobileView?: SwirlAppLayoutMobileView;
   @Prop() navigationBackButtonLabel?: string = "Go back";
   @Prop() navigationExpansionStateStorageKey?: string =
     SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
@@ -114,6 +115,10 @@ export class SwirlAppLayout {
   private transitionTimeout: NodeJS.Timeout;
 
   componentWillLoad() {
+    if (this.initialMobileView) {
+      this.mobileView = this.initialMobileView;
+    }
+
     this.mutationObserver = new MutationObserver(() => {
       this.updateCustomAppBarBackButtonStatus();
       this.updateNavigationStatus();

diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json
@@ -295,6 +295,21 @@
           "name": "hide-app-bar",
           "description": ""
         },
+        {
+          "name": "initial-mobile-view",
+          "description": "",
+          "values": [
+            {
+              "name": "body"
+            },
+            {
+              "name": "navigation"
+            },
+            {
+              "name": "sidebar"
+            }
+          ]
+        },
         {
           "name": "navigation-back-button-label",
           "description": ""