Merge pull request #75 from jackielii/visible-on-load

add visibleOnLoad props to LogMonitor
This commit is contained in:
Dan Abramov 2015-09-03 16:12:02 +03:00
commit d3b850f750
3 changed files with 16 additions and 4 deletions

View File

@ -15,6 +15,7 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu
* 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} />`
* 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

View File

@ -31,7 +31,7 @@ export default class App extends Component {
</Provider>
<DebugPanel top right bottom>
<DevTools store={store}
monitor={LogMonitor} />
monitor={LogMonitor} visibleOnLoad={true} />
</DebugPanel>
</div>
);

View File

@ -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();
}