Merge pull request #12 from pburtchaell/pburtchaell-create-toggle

Implement toggle

src/devTools.js

@@ -5,7 +5,9 @@ const ActionTypes = {
   COMMIT: 'COMMIT',
   SWEEP: 'SWEEP',
   TOGGLE_ACTION: 'TOGGLE_ACTION',
-  JUMP_TO_STATE: 'JUMP_TO_STATE'
+  JUMP_TO_STATE: 'JUMP_TO_STATE',
+  HIDE: 'HIDE',
+  SHOW: 'SHOW'
 };
 
 const INIT_ACTION = {
@@ -82,7 +84,10 @@ function liftReducer(reducer, initialState) {
     committedState: initialState,
     stagedActions: [INIT_ACTION],
     skippedActions: {},
-    currentStateIndex: 0
+    currentStateIndex: 0,
+    monitorState: {
+      isVisible: true
+    }
   };
 
   /**
@@ -94,7 +99,8 @@ function liftReducer(reducer, initialState) {
       stagedActions,
       skippedActions,
       computedStates,
-      currentStateIndex
+      currentStateIndex,
+      monitorState
     } = liftedState;
 
     switch (liftedAction.type) {
@@ -133,6 +139,16 @@ function liftReducer(reducer, initialState) {
       }
       stagedActions = [...stagedActions, action];
       break;
+    case ActionTypes.HIDE:
+      monitorState = {
+        isVisible: false
+      };
+      break;
+    case ActionTypes.SHOW:
+      monitorState = {
+        isVisible: true
+      };
+      break;
     default:
       break;
     }
@@ -149,7 +165,8 @@ function liftReducer(reducer, initialState) {
       stagedActions,
       skippedActions,
       computedStates,
-      currentStateIndex
+      currentStateIndex,
+      monitorState
     };
   };
 }
@@ -204,6 +221,12 @@ export const ActionCreators = {
   sweep() {
     return { type: ActionTypes.SWEEP };
   },
+  show() {
+    return { type: ActionTypes.SHOW };
+  },
+  hide() {
+    return { type: ActionTypes.HIDE };
+  },
   toggleAction(index) {
     return { type: ActionTypes.TOGGLE_ACTION, index };
   },

src/react/DebugPanel.js

@@ -17,7 +17,6 @@ export function getDefaultStyle(props) {
     opacity: 0.92,
     background: 'black',
     color: 'white',
-    padding: '1em',
     left: left ? 0 : undefined,
     right: right ? 0 : undefined,
     top: top ? 0 : undefined,

src/react/LogMonitor.js

@@ -2,12 +2,19 @@ import React, { PropTypes, findDOMNode } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 
 export default class LogMonitor {
+  constructor() {
+    window.addEventListener('keypress', ::this.handleKeyPress);
+  }
+
   static propTypes = {
     computedStates: PropTypes.array.isRequired,
     currentStateIndex: PropTypes.number.isRequired,
+    monitorState: PropTypes.object.isRequired,
     stagedActions: PropTypes.array.isRequired,
     skippedActions: PropTypes.object.isRequired,
     reset: PropTypes.func.isRequired,
+    hide: PropTypes.func.isRequired,
+    show: PropTypes.func.isRequired,
     commit: PropTypes.func.isRequired,
     rollback: PropTypes.func.isRequired,
     sweep: PropTypes.func.isRequired,
@@ -66,6 +73,18 @@ export default class LogMonitor {
     this.props.reset();
   }
 
+  handleKeyPress(event) {
+    let { isVisible } = this.props.monitorState;
+
+    if (event.ctrlKey && event.keyCode === 8) {
+      if (isVisible) {
+        this.props.hide();
+      } else {
+        this.props.show();
+      }
+    }
+  }
+
   render() {
     const elements = [];
     const { skippedActions, stagedActions, computedStates, select } = this.props;
@@ -86,17 +105,26 @@ export default class LogMonitor {
       );
     }
 
+    if (this.props.monitorState.isVisible === true) {
       return (
         <div style={{
           fontFamily: 'monospace',
-        position: 'relative'
+          position: 'relative',
+          padding: '1rem'
         }}>
+          <div>
+            <div style={{
+              paddingBottom: '.5rem'
+            }}>
+              <small>Press `ctl+h` to hide.</small>
+            </div>
             <div>
               <a onClick={::this.handleReset}
                  style={{ textDecoration: 'underline', cursor: 'hand' }}>
-            Reset
+                <small>Reset</small>
               </a>
             </div>
+          </div>
           {elements}
           <div>
             {computedStates.length > 1 &&
@@ -129,4 +157,7 @@ export default class LogMonitor {
         </div>
       );
     }
+
+    return false;
+  }
 }