reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-22 01:26:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Implement toggle
This commit is contained in:
Dan Abramov 2015-07-19 19:36:09 +03:00
commit 1d5791ea88
3 changed files with 95 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/devTools.js
View File

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

1
src/react/DebugPanel.js
View File

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

105
src/react/LogMonitor.js
View File

@ -2,12 +2,19 @@ import React, { PropTypes, findDOMNode } from 'react';
import LogMonitorEntry from './LogMonitorEntry'; import LogMonitorEntry from './LogMonitorEntry';
export default class LogMonitor { export default class LogMonitor {
constructor() {
window.addEventListener('keypress', ::this.handleKeyPress);
}
static propTypes = { static propTypes = {
computedStates: PropTypes.array.isRequired, computedStates: PropTypes.array.isRequired,
currentStateIndex: PropTypes.number.isRequired, currentStateIndex: PropTypes.number.isRequired,
monitorState: PropTypes.object.isRequired,
stagedActions: PropTypes.array.isRequired, stagedActions: PropTypes.array.isRequired,
skippedActions: PropTypes.object.isRequired, skippedActions: PropTypes.object.isRequired,
reset: PropTypes.func.isRequired, reset: PropTypes.func.isRequired,
hide: PropTypes.func.isRequired,
show: PropTypes.func.isRequired,
commit: PropTypes.func.isRequired, commit: PropTypes.func.isRequired,
rollback: PropTypes.func.isRequired, rollback: PropTypes.func.isRequired,
sweep: PropTypes.func.isRequired, sweep: PropTypes.func.isRequired,
@ -66,6 +73,18 @@ export default class LogMonitor {
this.props.reset(); 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() { render() {
const elements = []; const elements = [];
const { skippedActions, stagedActions, computedStates, select } = this.props; const { skippedActions, stagedActions, computedStates, select } = this.props;
@ -86,47 +105,59 @@ export default class LogMonitor {
); );
} }
return ( if (this.props.monitorState.isVisible === true) {
<div style={{ return (
fontFamily: 'monospace', <div style={{
position: 'relative' fontFamily: 'monospace',
}}> position: 'relative',
<div> padding: '1rem'
<a onClick={::this.handleReset} }}>
style={{ textDecoration: 'underline', cursor: 'hand' }}> <div>
Reset <div style={{
</a> paddingBottom: '.5rem'
</div> }}>
{elements} <small>Press `ctl+h` to hide.</small>
<div> </div>
{computedStates.length > 1 && <div>
<a onClick={::this.handleRollback} <a onClick={::this.handleReset}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Rollback
</a>
}
{Object.keys(skippedActions).some(key => skippedActions[key]) &&
<span>
{' • '}
<a onClick={::this.handleSweep}
style={{ textDecoration: 'underline', cursor: 'hand' }}> style={{ textDecoration: 'underline', cursor: 'hand' }}>
Sweep <small>Reset</small>
</a> </a>
</span> </div>
} </div>
{computedStates.length > 1 && {elements}
<span> <div>
{computedStates.length > 1 &&
<a onClick={::this.handleRollback}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Rollback
</a>
}
{Object.keys(skippedActions).some(key => skippedActions[key]) &&
<span> <span>
{' • '} {' • '}
<a onClick={::this.handleSweep}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Sweep
</a>
</span> </span>
<a onClick={::this.handleCommit} }
style={{ textDecoration: 'underline', cursor: 'hand' }}> {computedStates.length > 1 &&
Commit <span>
</a> <span>
</span> {' • '}
} </span>
<a onClick={::this.handleCommit}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Commit
</a>
</span>
}
</div>
</div> </div>
</div> );
); }
return false;
} }
} }