From fa5f9077383215b8f8cb28f3979fb116ac782c55 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.li@fuseim.com>
Date: Sat, 29 Aug 2015 00:13:14 +0100
Subject: [PATCH] add `visibleOnLoad` prop to LogMonitor

---
 README.md                          |  3 ++-
 examples/counter/containers/App.js |  2 +-
 src/react/LogMonitor.js            | 15 +++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index a8b9436a..ea5df802 100644
--- a/README.md
+++ b/README.md
@@ -13,8 +13,9 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu
 * If you change the reducer code, each “staged” action will be re-evaluted
 * If the reducers throw, you will see during which action this happened, and what the error was
 * With `persistState()` store enhancer, you can persist debug sessions across page reloads
-* To monitor a part of  the state, you can set a `select` prop on the DevTools component: `<DevTools select={state => state.todos} store={store} monitor={LogMonitor} />`
+* To monitor a part of the state, you can set a `select` prop on the DevTools component: `<DevTools select={state => state.todos} store={store} monitor={LogMonitor} />`
 * Toggle visibility with Ctrl+H
+* To hide the devtools on load, set `visibleOnLoad` to false, e.g.: `<DevTools store={store} monitor={LogMonitor} visibleOnLoad={false} />`
 
 ### Installation
 
diff --git a/examples/counter/containers/App.js b/examples/counter/containers/App.js
index 4da345c9..62c7d066 100644
--- a/examples/counter/containers/App.js
+++ b/examples/counter/containers/App.js
@@ -26,7 +26,7 @@ export default class App extends Component {
         </Provider>
         <DebugPanel top right bottom>
           <DevTools store={store}
-                    monitor={LogMonitor} />
+                    monitor={LogMonitor} visibleOnLoad={true} />
         </DebugPanel>
       </div>
     );
diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index fffc81fb..a3fc84c2 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -52,13 +52,15 @@ export default class LogMonitor {
     toggleAction: PropTypes.func.isRequired,
     jumpToState: PropTypes.func.isRequired,
     setMonitorState: PropTypes.func.isRequired,
-    select: PropTypes.func.isRequired
+    select: PropTypes.func.isRequired,
+    visibleOnLoad: PropTypes.bool
   };
 
   static defaultProps = {
     select: (state) => state,
     monitorState: { isVisible: true },
-    theme: 'nicinabox'
+    theme: 'nicinabox',
+    visibleOnLoad: true
   };
 
   componentWillReceiveProps(nextProps) {
@@ -90,6 +92,15 @@ export default class LogMonitor {
     }
   }
 
+  componentWillMount() {
+    let visibleOnLoad = this.props.visibleOnLoad;
+    const { monitorState } = this.props;
+    this.props.setMonitorState({
+      ...monitorState,
+      isVisible: visibleOnLoad
+    });
+  }
+
   handleRollback() {
     this.props.rollback();
   }