[APM] fixes selecting edges of charts (#29492) (#29562)

* [APM] fixes #26529 by making the mouseup event handler global

* [APM] fix tests for CustomPlot
This commit is contained in:
Oliver Gupte 2019-01-30 07:12:18 -08:00 committed by GitHub
parent b89cca8e57
commit ba1a6ae116
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 10 deletions

View file

@ -52,7 +52,7 @@ VoronoiPlot.propTypes = {
onHover: PropTypes.func.isRequired,
onMouseDown: PropTypes.func.isRequired,
onMouseLeave: PropTypes.func.isRequired,
onMouseUp: PropTypes.func.isRequired,
onMouseUp: PropTypes.func,
series: PropTypes.array.isRequired,
plotValues: PropTypes.object.isRequired
};

View file

@ -75,9 +75,6 @@ export class InnerCustomPlot extends PureComponent {
};
onMouseLeave = (...args) => {
if (this.state.isDrawing) {
this.setState({ isDrawing: false });
}
this.props.onMouseLeave(...args);
};
@ -89,7 +86,7 @@ export class InnerCustomPlot extends PureComponent {
});
onMouseUp = () => {
if (this.state.selectionEnd !== null) {
if (this.state.isDrawing && this.state.selectionEnd !== null) {
const [start, end] = [
this.state.selectionStart,
this.state.selectionEnd
@ -107,6 +104,14 @@ export class InnerCustomPlot extends PureComponent {
}
};
componentDidMount() {
document.body.addEventListener('mouseup', this.onMouseUp);
}
componentWillUnmount() {
document.body.removeEventListener('mouseup', this.onMouseUp);
}
render() {
const { series, truncateLegends, noHits, width } = this.props;
@ -163,7 +168,6 @@ export class InnerCustomPlot extends PureComponent {
onHover={this.onHover}
onMouseLeave={this.onMouseLeave}
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
/>
</div>
<Legends

View file

@ -243,8 +243,8 @@ describe('when response has data', () => {
wrapper
.find('.rv-voronoi__cell')
.at(20)
.simulate('mouseOver')
.simulate('mouseUp');
.simulate('mouseOver');
document.body.dispatchEvent(new Event('mouseup'));
});
it('should call onSelectionEnd', () => {
@ -265,8 +265,8 @@ describe('when response has data', () => {
wrapper
.find('.rv-voronoi__cell')
.at(10)
.simulate('mouseOver')
.simulate('mouseUp');
.simulate('mouseOver');
document.body.dispatchEvent(new Event('mouseup'));
});
it('should call onSelectionEnd', () => {