reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-22 09:36:43 +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.buttonBar}>
<LogMonitorButton theme={theme} onClick={::this.handleReset}>Reset</LogMonitorButton>
{computedStates.length > 1 &&
<LogMonitorButton theme={theme} onClick={::this.handleRollback}>Revert</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>
}
<LogMonitorButton theme={theme} onClick={::this.handleRollback} enabled={computedStates.length}>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>
</div>
<div style={styles.elements} ref="elements">
{elements}

22
src/react/LogMonitorButton.js
View File

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