diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx index e4da715b0b4..333e57b9cfa 100644 --- a/src/components/monitor-list/monitor-list.jsx +++ b/src/components/monitor-list/monitor-list.jsx @@ -26,6 +26,7 @@ const MonitorList = props => ( -
{index + 1 /* one indexed */}
+
{index + 1 /* one indexed */}
this.unhighlight(newHighlightItem), 500)); + this.setState({ + highlightItems: Set(Array.from(this.highlightMap.keys())) + }); + } + + componentWillUnmount () { + this.highlightMap.forEach(val => clearTimeout(val)); + } + + unhighlight (item) { + this.highlightMap.delete(item); + this.setState({ + highlightItems: Set(Array.from(this.highlightMap.keys())) + }); } handleActivate (index) { @@ -141,7 +169,7 @@ class ListMonitor extends React.Component { onMouseMove(ev); // Make sure width/height are up-to-date window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); - this.props.vm.runtime.requestUpdateMonitor(Map({ + this.props.vm.runtime.requestUpdateMonitor(ImmutableMap({ id: this.props.id, height: this.state.height, width: this.state.width @@ -168,6 +196,7 @@ class ListMonitor extends React.Component { activeIndex={this.state.activeIndex} activeValue={this.state.activeValue} height={this.state.height} + highlightItems={this.state.highlightItems} width={this.state.width} onActivate={this.handleActivate} onAdd={this.handleAdd} @@ -184,6 +213,7 @@ class ListMonitor extends React.Component { ListMonitor.propTypes = { height: PropTypes.number, + highlightItem: PropTypes.number, id: PropTypes.string, targetId: PropTypes.string, value: PropTypes.oneOfType([ diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx index 18a6bbeab2d..3a62e2b19b8 100644 --- a/src/containers/monitor.jsx +++ b/src/containers/monitor.jsx @@ -201,6 +201,7 @@ class Monitor extends React.Component { {...monitorProps} draggable={this.props.draggable} height={this.props.height} + highlightItem={this.props.highlightItem} isDiscrete={this.props.isDiscrete} max={this.props.max} min={this.props.min} @@ -225,6 +226,7 @@ Monitor.propTypes = { addMonitorRect: PropTypes.func.isRequired, draggable: PropTypes.bool, height: PropTypes.number, + highlightItem: PropTypes.number, id: PropTypes.string.isRequired, intl: intlShape, isDiscrete: PropTypes.bool,