Merge pull request #59 from storybooks/avoid-going-full-screen-re-mou…

…nt-preview Avoid going full-screen, re-mounting preview
storybookjs · Nov 12, 2016 · d13af90 · d13af90
2 parents 09c09f5 + 7f57d8d
commit d13af90
Showing 1 changed file with 38 additions and 36 deletions.
diff --git a/src/modules/ui/components/layout/index.js b/src/modules/ui/components/layout/index.js
@@ -9,14 +9,6 @@ const rootStyle = {
   backgroundColor: '#F7F7F7',
 };
 
-const fullScreenStyle = {
-  height: '100vh',
-  border: 0,
-  margin: 0,
-  padding: 0,
-  overflow: 'hidden',
-};
-
 const leftPanelStyle = {
   position: 'absolute',
   width: '100%',
@@ -40,14 +32,30 @@ const contentPanelStyle = {
   padding: '10px 10px 10px 0',
 };
 
-const previewStyle = {
+const normalPreviewStyle = {
   width: '100%',
   height: '100%',
   backgroundColor: '#FFF',
   border: '1px solid #ECECEC',
   borderRadius: 4,
 };
 
+const fullScreenPreviewStyle = {
+  position: 'fixed',
+  left: '0px',
+  right: '0px',
+  top: '0px',
+  zIndex: 1,
+  backgroundColor: '#FFF',
+  height: '100%',
+  width: '100%',
+  border: 0,
+  margin: 0,
+  padding: 0,
+  overflow: 'hidden',
+};
+
+
 const vsplit = <VSplit />;
 const hsplit = <HSplit />;
 
@@ -60,21 +68,24 @@ const onDragEnd = function () {
 };
 
 class Layout extends React.Component {
-  renderWithFullscreen() {
-    return (
-      <div style={fullScreenStyle}>
-        {this.props.preview()}
-      </div>
-    );
-  }
+  render() {
+    const {
+      goFullScreen, showLeftPanel, showDownPanel, downPanelInRight,
+      downPanel, leftPanel, preview,
+    } = this.props;
+
+    let previewStyle = normalPreviewStyle;
+
+    if (goFullScreen) {
+      previewStyle = fullScreenPreviewStyle;
+    }
 
-  renderNormally() {
-    const props = this.props;
-    const leftPanelDefaultSize = props.showLeftPanel ? 250 : 1;
+    const leftPanelDefaultSize = showLeftPanel ? 250 : 1;
     let downPanelDefaultSize = 1;
-    if (props.showDownPanel) {
-      downPanelDefaultSize = props.downPanelInRight ? 400 : 200;
+    if (showDownPanel) {
+      downPanelDefaultSize = downPanelInRight ? 400 : 200;
     }
+
     return (
       <div style={rootStyle}>
         <SplitPane
@@ -86,40 +97,31 @@ class Layout extends React.Component {
           onDragFinished={onDragEnd}
         >
           <div style={leftPanelStyle}>
-            {props.showLeftPanel ? props.leftPanel() : null}
+            {showLeftPanel ? leftPanel() : null}
           </div>
 
           <SplitPane
-            split={props.downPanelInRight ? 'vertical' : 'horizontal'}
+            split={downPanelInRight ? 'vertical' : 'horizontal'}
             primary="second"
-            minSize={props.downPanelInRight ? 200 : 100}
+            minSize={downPanelInRight ? 200 : 100}
             defaultSize={downPanelDefaultSize}
-            resizerChildren={props.downPanelInRight ? vsplit : hsplit}
+            resizerChildren={downPanelInRight ? vsplit : hsplit}
             onDragStarted={onDragStart}
             onDragFinished={onDragEnd}
           >
             <div style={contentPanelStyle}>
               <div style={previewStyle}>
-                {props.preview()}
+                {preview()}
               </div>
             </div>
             <div style={downPanelStyle}>
-              {props.showDownPanel ? props.downPanel() : null}
+              {showDownPanel ? downPanel() : null}
             </div>
           </SplitPane>
         </SplitPane>
       </div>
     );
   }
-
-  render() {
-    const { goFullScreen } = this.props;
-    if (goFullScreen) {
-      return this.renderWithFullscreen();
-    }
-
-    return this.renderNormally();
-  }
 }
 
 Layout.propTypes = {