Merge pull request #2336 from storybooks/always-render-panels

Render navigation and addons panels even when they are hidden
storybookjs · Nov 24, 2017 · d9308d6 · d9308d6
2 parents 5b86063 + 4159954
commit d9308d6
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 56 deletions.
diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js
@@ -11,16 +11,16 @@ const rootStyle = {
   backgroundColor: '#F7F7F7',
 };
 
-const leftPanelStyle = leftPanelOnTop => ({
+const leftPanelStyle = (showLeftPanel, leftPanelOnTop) => ({
   width: '100%',
-  display: 'flex',
+  display: showLeftPanel ? 'flex' : 'none',
   flexDirection: leftPanelOnTop ? 'column' : 'row',
   alignItems: 'stretch',
   paddingRight: leftPanelOnTop ? 10 : 0,
 });
 
-const downPanelStyle = downPanelInRight => ({
-  display: 'flex',
+const downPanelStyle = (showDownPanel, downPanelInRight) => ({
+  display: showDownPanel ? 'flex' : 'none',
   flexDirection: downPanelInRight ? 'row' : 'column',
   alignItems: 'stretch',
   position: 'absolute',
@@ -117,8 +117,6 @@ const getSavedSizes = sizes => {
   }
 };
 
-const conditionalRender = (condition, positive, negative) => (condition ? positive() : negative());
-
 class Layout extends React.Component {
   constructor(props) {
     super(props);
@@ -201,17 +199,10 @@ class Layout extends React.Component {
           onDragFinished={onDragEnd}
           onChange={this.onResize('storiesPanel', leftPanelOnTop ? 'top' : 'left')}
         >
-          {conditionalRender(
-            showLeftPanel,
-            () => (
-              <div style={leftPanelStyle(leftPanelOnTop)}>
-                <div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{leftPanel()}</div>
-                <USplit shift={5} split={storiesSplit} />
-              </div>
-            ),
-            () => <span />
-          )}
-
+          <div style={leftPanelStyle(showLeftPanel, leftPanelOnTop)}>
+            <div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{leftPanel()}</div>
+            <USplit shift={5} split={storiesSplit} />
+          </div>
           <SplitPane
             split={addonSplit}
             allowResize={showDownPanel}
@@ -236,16 +227,10 @@ class Layout extends React.Component {
               </div>
               <Dimensions {...previewPanelDimensions} />
             </div>
-            {conditionalRender(
-              showDownPanel,
-              () => (
-                <div style={downPanelStyle(downPanelInRight)}>
-                  <USplit shift={-5} split={addonSplit} />
-                  {downPanel()}
-                </div>
-              ),
-              () => <span />
-            )}
+            <div style={downPanelStyle(showDownPanel, downPanelInRight)}>
+              <USplit shift={-5} split={addonSplit} />
+              {downPanel()}
+            </div>
           </SplitPane>
         </SplitPane>
       </div>

diff --git a/lib/ui/src/modules/ui/components/layout/index.test.js b/lib/ui/src/modules/ui/components/layout/index.test.js
@@ -2,6 +2,16 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Layout from './index';
 
+const LeftPanel = () => null;
+const DownPanel = () => null;
+const Preview = () => null;
+
+const hides = (wrap, Component) =>
+  wrap
+    .find(Component)
+    .parents('[style]')
+    .someWhere(parent => parent.prop('style').display === 'none');
+
 describe('manager.ui.components.layout.index', () => {
   describe('with default options', () => {
     test('should render provided components', () => {
@@ -11,37 +21,45 @@ describe('manager.ui.components.layout.index', () => {
           showDownPanel
           goFullScreen={false}
           downPanelInRight={false}
-          leftPanel={() => 'LeftPanel'}
-          downPanel={() => 'DownPanel'}
-          preview={() => 'Preview'}
+          leftPanel={() => <LeftPanel />}
+          downPanel={() => <DownPanel />}
+          preview={() => <Preview />}
         />
       );
 
-      const markup = wrap.html();
-      expect(markup).toMatch(/LeftPanel/);
-      expect(markup).toMatch(/DownPanel/);
-      expect(markup).toMatch(/Preview/);
+      expect(hides(wrap, LeftPanel)).toBe(false);
+      expect(hides(wrap, DownPanel)).toBe(false);
+      expect(hides(wrap, Preview)).toBe(false);
     });
   });
 
   describe('with goFullScreen=true', () => {
-    test('should only render preview', () => {
+    test('should render preview in fullscreen mode', () => {
       const wrap = shallow(
         <Layout
           goFullScreen
           showDownPanel={false}
           showLeftPanel={false}
           downPanelInRight={false}
-          leftPanel={() => 'LeftPanel'}
-          downPanel={() => 'DownPanel'}
-          preview={() => 'Preview'}
+          leftPanel={() => <LeftPanel />}
+          downPanel={() => <DownPanel />}
+          preview={() => <Preview />}
         />
       );
 
-      const markup = wrap.html();
-      expect(markup).not.toMatch(/LeftPanel/);
-      expect(markup).not.toMatch(/DownPanel/);
-      expect(markup).toMatch(/Preview/);
+      expect(hides(wrap, Preview)).toBe(false);
+
+      const previewParentStyle = wrap
+        .find(Preview)
+        .parent()
+        .prop('style');
+      expect(previewParentStyle).toMatchObject({
+        position: 'fixed',
+        left: '0px',
+        right: '0px',
+        top: '0px',
+        zIndex: 1,
+      });
     });
   });
 
@@ -53,16 +71,15 @@ describe('manager.ui.components.layout.index', () => {
           showDownPanel
           downPanelInRight={false}
           goFullScreen={false}
-          leftPanel={() => 'LeftPanel'}
-          downPanel={() => 'DownPanel'}
-          preview={() => 'Preview'}
+          leftPanel={() => <LeftPanel />}
+          downPanel={() => <DownPanel />}
+          preview={() => <Preview />}
         />
       );
 
-      const markup = wrap.html();
-      expect(markup).not.toMatch(/LeftPanel/);
-      expect(markup).toMatch(/DownPanel/);
-      expect(markup).toMatch(/Preview/);
+      expect(hides(wrap, LeftPanel)).toBe(true);
+      expect(hides(wrap, DownPanel)).toBe(false);
+      expect(hides(wrap, Preview)).toBe(false);
     });
   });
 
@@ -74,16 +91,15 @@ describe('manager.ui.components.layout.index', () => {
           showDownPanel={false}
           goFullScreen={false}
           downPanelInRight={false}
-          leftPanel={() => 'LeftPanel'}
-          downPanel={() => 'DownPanel'}
-          preview={() => 'Preview'}
+          leftPanel={() => <LeftPanel />}
+          downPanel={() => <DownPanel />}
+          preview={() => <Preview />}
         />
       );
 
-      const markup = wrap.html();
-      expect(markup).toMatch(/LeftPanel/);
-      expect(markup).not.toMatch(/DownPanel/);
-      expect(markup).toMatch(/Preview/);
+      expect(hides(wrap, LeftPanel)).toBe(false);
+      expect(hides(wrap, DownPanel)).toBe(true);
+      expect(hides(wrap, Preview)).toBe(false);
     });
   });
 });