adding close preview

src/components/EntryEditor/EntryEditor.js

@@ -1,15 +1,19 @@
 import React, { Component, PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import SplitPane from 'react-split-pane';
+import Button from 'react-toolbox/lib/button';
 import { ScrollSync, ScrollSyncPane } from '../ScrollSync';
 import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
 import Toolbar from './EntryEditorToolbar';
 import styles from './EntryEditor.css';
 
+const PREVIEW_STATE = 'cms.preview-state';
+
 class EntryEditor extends Component {
   state = {
     showEventBlocker: false,
+    previewOpen: localStorage.getItem(PREVIEW_STATE) === "open",
   };
 
   handleSplitPaneDragStart = () => {
@@ -25,6 +29,15 @@ class EntryEditor extends Component {
     this.props.onPersist();
   };
 
+  handleTogglePreview = () => {
+    const { previewOpen } = this.state;
+    const newPreviewState = !previewOpen ? "open" : "closed";
+    this.setState(
+      { previewOpen: !previewOpen },
+      localStorage.setItem(PREVIEW_STATE, newPreviewState)
+    );
+  };
+
   render() {
     const {
         collection,
@@ -40,48 +53,56 @@ class EntryEditor extends Component {
         onCancelEdit,
     } = this.props;
 
+    const { previewOpen } = this.state;
     const controlClassName = `${ styles.controlPane } ${ this.state.showEventBlocker && styles.blocker }`;
     const previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`;
+
+    const editor = (
+      <div className={controlClassName}>
+        <Button onClick={this.handleTogglePreview}> TOGGLE PREVIEW </Button>
+        <ControlPane
+          collection={collection}
+          entry={entry}
+          fields={fields}
+          fieldsMetaData={fieldsMetaData}
+          fieldsErrors={fieldsErrors}
+          getAsset={getAsset}
+          onChange={onChange}
+          onValidate={onValidate}
+          onAddAsset={onAddAsset}
+          onRemoveAsset={onRemoveAsset}
+          ref={c => this.controlPaneRef = c} // eslint-disable-line
+        />
+      </div>
+    );
+
+    const editorWithPreivew = (
+      <ScrollSync>
+        <div className={styles.container}>
+          <SplitPane
+            defaultSize="50%"
+            onDragStarted={this.handleSplitPaneDragStart}
+            onDragFinished={this.handleSplitPaneDragFinished}
+          >
+            <ScrollSyncPane>
+              {editor}
+            </ScrollSyncPane>
+            <div className={previewClassName}>
+              <PreviewPane
+                collection={collection}
+                entry={entry}
+                fields={fields}
+                fieldsMetaData={fieldsMetaData}
+                getAsset={getAsset}
+              />
+            </div>
+          </SplitPane>
+        </div>
+      </ScrollSync>
+    );
     return (
       <div className={styles.root}>
-        <ScrollSync>
-          <div className={styles.container}>
-            <SplitPane
-              defaultSize="50%"
-              onDragStarted={this.handleSplitPaneDragStart}
-              onDragFinished={this.handleSplitPaneDragFinished}
-            >
-              <ScrollSyncPane>
-                <div className={controlClassName}>
-
-                  <ControlPane
-                    collection={collection}
-                    entry={entry}
-                    fields={fields}
-                    fieldsMetaData={fieldsMetaData}
-                    fieldsErrors={fieldsErrors}
-                    getAsset={getAsset}
-                    onChange={onChange}
-                    onValidate={onValidate}
-                    onAddAsset={onAddAsset}
-                    onRemoveAsset={onRemoveAsset}
-                    ref={c => this.controlPaneRef = c} // eslint-disable-line
-                  />
-
-                </div>
-              </ScrollSyncPane>
-              <div className={previewClassName}>
-                <PreviewPane
-                  collection={collection}
-                  entry={entry}
-                  fields={fields}
-                  fieldsMetaData={fieldsMetaData}
-                  getAsset={getAsset}
-                />
-              </div>
-            </SplitPane>
-          </div>
-        </ ScrollSync>
+        {previewOpen === true ? editorWithPreivew : editor}
         <div className={styles.footer}>
           <Toolbar
             isPersisting={entry.get('isPersisting')}
@@ -89,7 +110,6 @@ class EntryEditor extends Component {
             onCancelEdit={onCancelEdit}
           />
         </div>
-
       </div>
     );
   }