reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-02-16 19:40:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

added disabled state to button, and always show all buttons even if disabled

Browse Source
This commit is contained in:
dzannotti 2015-08-11 23:00:54 +01:00
parent 39512ff8e9
commit e222f98be6
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/react/LogMonitor.js
View File

@ -161,15 +161,9 @@ export default class LogMonitor {
<div style={{...styles.container, backgroundColor: theme.base00}}> <div style={{...styles.container, backgroundColor: theme.base00}}>
<div style={styles.buttonBar}> <div style={styles.buttonBar}>
<LogMonitorButton theme={theme} onClick={::this.handleReset}>Reset</LogMonitorButton> <LogMonitorButton theme={theme} onClick={::this.handleReset}>Reset</LogMonitorButton>
{computedStates.length > 1 && <LogMonitorButton theme={theme} onClick={::this.handleRollback} enabled={computedStates.length}>Revert</LogMonitorButton>
<LogMonitorButton theme={theme} onClick={::this.handleRollback}>Revert</LogMonitorButton> <LogMonitorButton theme={theme} onClick={::this.handleSweep} enabled={Object.keys(skippedActions).some(key => skippedActions[key])}>Sweep</LogMonitorButton>
} <LogMonitorButton theme={theme} onClick={::this.handleCommit} enabled={computedStates.length > 1}>Commit</LogMonitorButton>
{Object.keys(skippedActions).some(key => skippedActions[key]) &&
<LogMonitorButton theme={theme} onClick={::this.handleSweep}>Sweep</LogMonitorButton>
}
{computedStates.length > 1 &&
<LogMonitorButton theme={theme} onClick={::this.handleCommit}>Commit</LogMonitorButton>
}
</div> </div>
<div style={styles.elements} ref="elements"> <div style={styles.elements} ref="elements">
{elements} {elements}

22
src/react/LogMonitorButton.js
View File

@ -37,22 +37,38 @@ export default class LogMonitorButton extends React.Component {
this.setState({ active: false }); this.setState({ active: false });
} }
onClick() {
if (!this.props.enabled) {
return;
}
if (this.props.onClick) {
this.props.onClick();
}
}
render() { render() {
let style = { let style = {
...styles.base ...styles.base,
backgroundColor: this.props.theme.base01
}; };
if (this.state.hovered) { if (this.props.enabled && this.state.hovered) {
style = { style = {
...style, ...style,
backgroundColor: this.props.theme.base00 backgroundColor: this.props.theme.base00
}; };
} }
if (!this.props.enabled) {
style = {
...style,
opacity: 0.5
}
}
return ( return (
<a onMouseEnter={::this.handleMouseEnter} <a onMouseEnter={::this.handleMouseEnter}
onMouseLeave={::this.handleMouseLeave} onMouseLeave={::this.handleMouseLeave}
onMouseDown={::this.handleMouseDown} onMouseDown={::this.handleMouseDown}
onMouseUp={::this.handleMouseUp} onMouseUp={::this.handleMouseUp}
style={style} onClick={this.props.onClick}> style={style} onClick={::this.onClick}>
{this.props.children} {this.props.children}
</a> </a>
); );