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

Scroll to bottom while hidden

Browse Source
This commit is contained in:
Dan Abramov 2015-07-20 23:11:14 +03:00
parent e03e66c680
commit 31baa586b8
1 changed files with 66 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/react/LogMonitor.js
View File

@ -28,8 +28,13 @@ export default class LogMonitor {
}; };
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.stagedActions.length < nextProps.stagedActions.length) { const node = findDOMNode(this);
const scrollableNode = findDOMNode(this).parentElement; if (!node) {
this.scrollDown = true;
} else if (
this.props.stagedActions.length < nextProps.stagedActions.length
) {
const scrollableNode = node.parentElement;
const { scrollTop, offsetHeight, scrollHeight } = scrollableNode; const { scrollTop, offsetHeight, scrollHeight } = scrollableNode;
this.scrollDown = Math.abs( this.scrollDown = Math.abs(
@ -40,12 +45,14 @@ export default class LogMonitor {
} }
} }
componentDidUpdate(prevProps) { componentDidUpdate() {
if ( const node = findDOMNode(this);
prevProps.stagedActions.length < this.props.stagedActions.length && if (!node) {
this.scrollDown return;
) { }
const scrollableNode = findDOMNode(this).parentElement;
if (this.scrollDown) {
const scrollableNode = node.parentElement;
const { offsetHeight, scrollHeight } = scrollableNode; const { offsetHeight, scrollHeight } = scrollableNode;
scrollableNode.scrollTop = scrollHeight - offsetHeight; scrollableNode.scrollTop = scrollHeight - offsetHeight;
@ -88,7 +95,11 @@ export default class LogMonitor {
render() { render() {
const elements = []; const elements = [];
const { skippedActions, stagedActions, computedStates, select } = this.props; const { monitorState, skippedActions, stagedActions, computedStates, select } = this.props;
if (!monitorState.isVisible) {
return null;
}
for (let i = 0; i < stagedActions.length; i++) { for (let i = 0; i < stagedActions.length; i++) {
const action = stagedActions[i]; const action = stagedActions[i];
@ -106,59 +117,55 @@ export default class LogMonitor {
); );
} }
if (this.props.monitorState.isVisible === true) { return (
return ( <div style={{
<div style={{ fontFamily: 'monospace',
fontFamily: 'monospace', position: 'relative',
position: 'relative', padding: '1rem'
padding: '1rem' }}>
}}> <div>
<div> <div style={{
<div style={{ paddingBottom: '.5rem'
paddingBottom: '.5rem' }}>
}}> <small>Press `ctl+h` to hide.</small>
<small>Press `ctl+h` to hide.</small>
</div>
<div>
<a onClick={::this.handleReset}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
<small>Reset</small>
</a>
</div>
</div> </div>
{elements}
<div> <div>
{computedStates.length > 1 && <a onClick={::this.handleReset}
<a onClick={::this.handleRollback} style={{ textDecoration: 'underline', cursor: 'hand' }}>
style={{ textDecoration: 'underline', cursor: 'hand' }}> <small>Reset</small>
Rollback </a>
</a>
}
{Object.keys(skippedActions).some(key => skippedActions[key]) &&
<span>
{' • '}
<a onClick={::this.handleSweep}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Sweep
</a>
</span>
}
{computedStates.length > 1 &&
<span>
<span>
{' • '}
</span>
<a onClick={::this.handleCommit}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Commit
</a>
</span>
}
</div> </div>
</div> </div>
); {elements}
} <div>
{computedStates.length > 1 &&
return false; <a onClick={::this.handleRollback}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Rollback
</a>
}
{Object.keys(skippedActions).some(key => skippedActions[key]) &&
<span>
{' • '}
<a onClick={::this.handleSweep}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Sweep
</a>
</span>
}
{computedStates.length > 1 &&
<span>
<span>
{' • '}
</span>
<a onClick={::this.handleCommit}
style={{ textDecoration: 'underline', cursor: 'hand' }}>
Commit
</a>
</span>
}
</div>
</div>
);
} }
} }