UI: Store layout state in sessionStorage (#8786)

UI: Store layout state in sessionStorage
storybookjs · Nov 30, 2019 · 46ad8df · 46ad8df
1 parent e6b8138
commit 46ad8df
Showing 1 changed file with 82 additions and 61 deletions.
diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
@@ -156,86 +156,107 @@ let hasSetOptions = false;
 export default function({ store }: { store: Store }) {
   const api = {
     toggleFullscreen(toggled?: boolean) {
-      return store.setState((state: State) => {
-        const value = typeof toggled === 'boolean' ? toggled : !state.layout.isFullscreen;
-
-        return {
-          layout: {
-            ...state.layout,
-            isFullscreen: value,
-          },
-        };
-      });
+      return store.setState(
+        (state: State) => {
+          const value = typeof toggled === 'boolean' ? toggled : !state.layout.isFullscreen;
+
+          return {
+            layout: {
+              ...state.layout,
+              isFullscreen: value,
+            },
+          };
+        },
+        { persistence: 'session' }
+      );
     },
 
     togglePanel(toggled?: boolean) {
-      return store.setState((state: State) => {
-        const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showPanel;
-
-        return {
-          layout: {
-            ...state.layout,
-            showPanel: value,
-          },
-        };
-      });
+      return store.setState(
+        (state: State) => {
+          const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showPanel;
+
+          return {
+            layout: {
+              ...state.layout,
+              showPanel: value,
+            },
+          };
+        },
+        { persistence: 'session' }
+      );
     },
 
     togglePanelPosition(position?: 'bottom' | 'right') {
       if (typeof position !== 'undefined') {
-        return store.setState((state: State) => ({
+        return store.setState(
+          (state: State) => ({
+            layout: {
+              ...state.layout,
+              panelPosition: position,
+            },
+          }),
+          { persistence: 'session' }
+        );
+      }
+
+      return store.setState(
+        (state: State) => ({
           layout: {
             ...state.layout,
-            panelPosition: position,
+            panelPosition: state.layout.panelPosition === 'right' ? 'bottom' : 'right',
           },
-        }));
-      }
-
-      return store.setState((state: State) => ({
-        layout: {
-          ...state.layout,
-          panelPosition: state.layout.panelPosition === 'right' ? 'bottom' : 'right',
-        },
-      }));
+        }),
+        { persistence: 'session' }
+      );
     },
 
     toggleNav(toggled?: boolean) {
-      return store.setState((state: State) => {
-        const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showNav;
-
-        return {
-          layout: {
-            ...state.layout,
-            showNav: value,
-          },
-        };
-      });
+      return store.setState(
+        (state: State) => {
+          const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showNav;
+
+          return {
+            layout: {
+              ...state.layout,
+              showNav: value,
+            },
+          };
+        },
+        { persistence: 'session' }
+      );
     },
 
     toggleToolbar(toggled?: boolean) {
-      return store.setState((state: State) => {
-        const value = typeof toggled !== 'undefined' ? toggled : !state.layout.isToolshown;
-
-        return {
-          layout: {
-            ...state.layout,
-            isToolshown: value,
-          },
-        };
-      });
+      return store.setState(
+        (state: State) => {
+          const value = typeof toggled !== 'undefined' ? toggled : !state.layout.isToolshown;
+
+          return {
+            layout: {
+              ...state.layout,
+              isToolshown: value,
+            },
+          };
+        },
+        { persistence: 'session' }
+      );
     },
 
     resetLayout() {
-      return store.setState((state: State) => {
-        return {
-          layout: {
-            ...state.layout,
-            showNav: false,
-            showPanel: false,
-            isFullscreen: false,
-          },
-        };
-      });
+      return store.setState(
+        (state: State) => {
+          return {
+            layout: {
+              ...state.layout,
+              showNav: false,
+              showPanel: false,
+              isFullscreen: false,
+            },
+          };
+        },
+        { persistence: 'session' }
+      );
     },
 
     focusOnUIElement(elementId?: string) {