From 0d7142e2d2966881d6249d1ba47b60202cf61e85 Mon Sep 17 00:00:00 2001 From: Patrick Burtchaell Date: Sun, 19 Jul 2015 10:21:04 -0500 Subject: [PATCH 1/6] Add show and hide action creators and action types --- src/devTools.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/devTools.js b/src/devTools.js index 03db74b7..07b27ba3 100644 --- a/src/devTools.js +++ b/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 = { @@ -204,6 +206,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 }; }, From 64dcb3cc172d19a46dbdedee64f2aeac4328414c Mon Sep 17 00:00:00 2001 From: Patrick Burtchaell Date: Sun, 19 Jul 2015 10:21:10 -0500 Subject: [PATCH 2/6] Add monitorState --- src/devTools.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/devTools.js b/src/devTools.js index 07b27ba3..045a35dd 100644 --- a/src/devTools.js +++ b/src/devTools.js @@ -84,7 +84,10 @@ function liftReducer(reducer, initialState) { committedState: initialState, stagedActions: [INIT_ACTION], skippedActions: {}, - currentStateIndex: 0 + currentStateIndex: 0, + monitorState: { + isVisible: true, + } }; /** @@ -96,7 +99,8 @@ function liftReducer(reducer, initialState) { stagedActions, skippedActions, computedStates, - currentStateIndex + currentStateIndex, + monitorState } = liftedState; switch (liftedAction.type) { @@ -135,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; } @@ -151,7 +165,8 @@ function liftReducer(reducer, initialState) { stagedActions, skippedActions, computedStates, - currentStateIndex + currentStateIndex, + monitorState }; }; } From 4a2a59d6766d31e9fdc844575956c8c90858cd2a Mon Sep 17 00:00:00 2001 From: Patrick Burtchaell Date: Sun, 19 Jul 2015 10:21:29 -0500 Subject: [PATCH 3/6] Add handleKeyPress event --- src/react/LogMonitor.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index 8f45829a..bb27389f 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -2,6 +2,10 @@ 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, @@ -66,6 +70,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; From 2a103c005a7335465e7f6966c9fb61ce96930754 Mon Sep 17 00:00:00 2001 From: Patrick Burtchaell Date: Sun, 19 Jul 2015 10:21:35 -0500 Subject: [PATCH 4/6] Add PropTypes --- src/react/LogMonitor.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index bb27389f..d265e09a 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -9,9 +9,12 @@ export default class LogMonitor { 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, From daf029fca2557fd1e6d756b5322acf2b9e7cc9cd Mon Sep 17 00:00:00 2001 From: Patrick Burtchaell Date: Sun, 19 Jul 2015 10:21:53 -0500 Subject: [PATCH 5/6] Show monitor when isVisible is true --- src/react/DebugPanel.js | 1 - src/react/LogMonitor.js | 86 +++++++++++++++++++++++------------------ 2 files changed, 49 insertions(+), 38 deletions(-) diff --git a/src/react/DebugPanel.js b/src/react/DebugPanel.js index 6dac89f4..a7306e95 100644 --- a/src/react/DebugPanel.js +++ b/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, diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index d265e09a..57ac1054 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -105,47 +105,59 @@ export default class LogMonitor { ); } - return ( -
- - {elements} -
- {computedStates.length > 1 && - - Rollback - - } - {Object.keys(skippedActions).some(key => skippedActions[key]) && - - {' • '} - +
+
+ Press `ctl+h` to hide. +
+
+ - Sweep + Reset - - } - {computedStates.length > 1 && - +
+
+ {elements} +
+ {computedStates.length > 1 && + + Rollback + + } + {Object.keys(skippedActions).some(key => skippedActions[key]) && - {' • '} + {' • '} + + Sweep + - - Commit - - - } + } + {computedStates.length > 1 && + + + {' • '} + + + Commit + + + } +
-
- ); + ); + } + + return false; } } From 9466e68cc7683b12b58881cbbcd148374d594b6c Mon Sep 17 00:00:00 2001 From: Patrick Burtchaell Date: Sun, 19 Jul 2015 10:43:49 -0500 Subject: [PATCH 6/6] Fix style --- src/devTools.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/devTools.js b/src/devTools.js index 045a35dd..4d1f2d71 100644 --- a/src/devTools.js +++ b/src/devTools.js @@ -86,7 +86,7 @@ function liftReducer(reducer, initialState) { skippedActions: {}, currentStateIndex: 0, monitorState: { - isVisible: true, + isVisible: true } }; @@ -141,12 +141,12 @@ function liftReducer(reducer, initialState) { break; case ActionTypes.HIDE: monitorState = { - isVisible: false, + isVisible: false }; break; case ActionTypes.SHOW: monitorState = { - isVisible: true, + isVisible: true }; break; default: @@ -222,10 +222,10 @@ export const ActionCreators = { return { type: ActionTypes.SWEEP }; }, show() { - return { type: ActionTypes.SHOW } + return { type: ActionTypes.SHOW }; }, hide() { - return { type: ActionTypes.HIDE } + return { type: ActionTypes.HIDE }; }, toggleAction(index) { return { type: ActionTypes.TOGGLE_ACTION, index };