From a3619e58e84ecf1bdf78a600f491e0659707359c Mon Sep 17 00:00:00 2001 From: Ben Shope Date: Wed, 19 Sep 2018 15:29:45 -0700 Subject: [PATCH 1/3] Run Codemod --- showcase/axes/dynamic-complex-edge-hints.js | 5 +- showcase/axes/dynamic-crosshair.js | 11 ++-- showcase/axes/dynamic-hints.js | 10 ++- .../dynamic-programmatic-rightedge-hints.js | 5 +- showcase/axes/dynamic-simple-edge-hints.js | 5 +- showcase/axes/dynamic-simple-topedge-hints.js | 5 +- showcase/interaction/interaction-examples.js | 7 ++- showcase/legends/searchable-discrete-color.js | 10 ++- showcase/misc/synced-charts.js | 5 +- showcase/plot/complex-chart.js | 30 ++++----- .../showcase-components/showcase-dropdown.js | 5 +- src/animation.js | 10 ++- src/make-vis-flexible.js | 5 +- src/plot/series/abstract-series.js | 44 +++++-------- src/plot/xy-plot.js | 61 ++++++++----------- 15 files changed, 87 insertions(+), 131 deletions(-) diff --git a/showcase/axes/dynamic-complex-edge-hints.js b/showcase/axes/dynamic-complex-edge-hints.js index 7c361bafb..912a3fe49 100644 --- a/showcase/axes/dynamic-complex-edge-hints.js +++ b/showcase/axes/dynamic-complex-edge-hints.js @@ -70,12 +70,11 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-crosshair.js b/showcase/axes/dynamic-crosshair.js index 62a1c7261..9d482f7d8 100644 --- a/showcase/axes/dynamic-crosshair.js +++ b/showcase/axes/dynamic-crosshair.js @@ -41,9 +41,6 @@ export default class DynamicCrosshair extends React.Component { this.state = { crosshairValues: [] }; - - this._onMouseLeave = this._onMouseLeave.bind(this); - this._onNearestX = this._onNearestX.bind(this); } /** @@ -52,17 +49,17 @@ export default class DynamicCrosshair extends React.Component { * @param {index} index Index of the value in the data array. * @private */ - _onNearestX(value, {index}) { + _onNearestX = (value, {index}) => { this.setState({crosshairValues: DATA.map(d => d[index])}); - } + }; /** * Event handler for onMouseLeave. * @private */ - _onMouseLeave() { + _onMouseLeave = () => { this.setState({crosshairValues: []}); - } + }; render() { return ( diff --git a/showcase/axes/dynamic-hints.js b/showcase/axes/dynamic-hints.js index e111ac842..7a7eacba8 100644 --- a/showcase/axes/dynamic-hints.js +++ b/showcase/axes/dynamic-hints.js @@ -36,19 +36,17 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); - this._forgetValue = this._forgetValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; - _forgetValue() { + _forgetValue = () => { this.setState({ value: null }); - } + }; render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-programmatic-rightedge-hints.js b/showcase/axes/dynamic-programmatic-rightedge-hints.js index 58ab5a18f..3e593d85b 100644 --- a/showcase/axes/dynamic-programmatic-rightedge-hints.js +++ b/showcase/axes/dynamic-programmatic-rightedge-hints.js @@ -48,12 +48,11 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-simple-edge-hints.js b/showcase/axes/dynamic-simple-edge-hints.js index ea786f091..1d7045b6c 100644 --- a/showcase/axes/dynamic-simple-edge-hints.js +++ b/showcase/axes/dynamic-simple-edge-hints.js @@ -58,12 +58,11 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-simple-topedge-hints.js b/showcase/axes/dynamic-simple-topedge-hints.js index a2f17c8b8..ddccc1065 100644 --- a/showcase/axes/dynamic-simple-topedge-hints.js +++ b/showcase/axes/dynamic-simple-topedge-hints.js @@ -41,12 +41,11 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/interaction/interaction-examples.js b/showcase/interaction/interaction-examples.js index 3d23d37aa..b48cd8377 100644 --- a/showcase/interaction/interaction-examples.js +++ b/showcase/interaction/interaction-examples.js @@ -154,11 +154,12 @@ export class LinkedCharts extends Component { constructor() { super(); this.state = {index: null}; - this.handleMouseOver = this.handleMouseOver.bind(this); } - handleMouseOver(index) { + + handleMouseOver = index => { this.setState({index}); - } + }; + render() { const {index} = this.state; return ( diff --git a/showcase/legends/searchable-discrete-color.js b/showcase/legends/searchable-discrete-color.js index bf91e262e..9bc14a6b6 100644 --- a/showcase/legends/searchable-discrete-color.js +++ b/showcase/legends/searchable-discrete-color.js @@ -37,19 +37,17 @@ export default class Example extends React.Component { ], searchText: '' }; - this._clickHandler = this._clickHandler.bind(this); - this._searchChangeHandler = this._searchChangeHandler.bind(this); } - _clickHandler(item) { + _clickHandler = item => { const {items} = this.state; item.disabled = !item.disabled; this.setState({items}); - } + }; - _searchChangeHandler(searchText) { + _searchChangeHandler = searchText => { this.setState({searchText}); - } + }; render() { const {items, searchText} = this.state; diff --git a/showcase/misc/synced-charts.js b/showcase/misc/synced-charts.js index 20af5d1ef..a54254f54 100644 --- a/showcase/misc/synced-charts.js +++ b/showcase/misc/synced-charts.js @@ -35,7 +35,6 @@ export default class Example extends React.Component { this.state = { selectedIndex: null }; - this._onChartMouseLeave = this._onChartMouseLeave.bind(this); this._onSeriesMouseOvers = [ this._onSeriesMouseOver.bind(this, 0), this._onSeriesMouseOver.bind(this, 1) @@ -46,9 +45,9 @@ export default class Example extends React.Component { this.setState({selectedIndex}); } - _onChartMouseLeave() { + _onChartMouseLeave = () => { this.setState({selectedIndex: null}); - } + }; _getSeriesColor(index) { const {selectedIndex} = this.state; diff --git a/showcase/plot/complex-chart.js b/showcase/plot/complex-chart.js index 7c7793300..3751d6053 100644 --- a/showcase/plot/complex-chart.js +++ b/showcase/plot/complex-chart.js @@ -73,22 +73,16 @@ export default class Example extends React.Component { } ] }; - this._nearestXHandler = this._nearestXHandler.bind(this); - this._mouseLeaveHandler = this._mouseLeaveHandler.bind(this); - this._updateButtonClicked = this._updateButtonClicked.bind(this); - this._legendClickHandler = this._legendClickHandler.bind(this); - this._formatCrosshairItems = this._formatCrosshairItems.bind(this); - this._formatCrosshairTitle = this._formatCrosshairTitle.bind(this); } - _updateButtonClicked() { + _updateButtonClicked = () => { const {series} = this.state; const totalValues = Math.random() * 50; series.forEach(s => { s.data = getRandomSeriesData(totalValues); }); this.setState({series}); - } + }; /** * Event handler for onNearestX. @@ -96,20 +90,20 @@ export default class Example extends React.Component { * @param {number} index Index of the series. * @private */ - _nearestXHandler(value, {index}) { + _nearestXHandler = (value, {index}) => { const {series} = this.state; this.setState({ crosshairValues: series.map(s => s.data[index]) }); - } + }; /** * Event handler for onMouseLeave. * @private */ - _mouseLeaveHandler() { + _mouseLeaveHandler = () => { this.setState({crosshairValues: []}); - } + }; /** * Format the title line of the crosshair. @@ -117,12 +111,12 @@ export default class Example extends React.Component { * @returns {Object} The caption and the value of the title. * @private */ - _formatCrosshairTitle(values) { + _formatCrosshairTitle = values => { return { title: 'X', value: values[0].left }; - } + }; /** * A callback to format the crosshair items. @@ -130,7 +124,7 @@ export default class Example extends React.Component { * @returns {Array} Array of objects with titles and values. * @private */ - _formatCrosshairItems(values) { + _formatCrosshairItems = values => { const {series} = this.state; return values.map((v, i) => { return { @@ -138,7 +132,7 @@ export default class Example extends React.Component { value: v.top }; }); - } + }; /** * Click handler for the legend. @@ -146,11 +140,11 @@ export default class Example extends React.Component { * @param {number} i Index of the legend. * @private */ - _legendClickHandler(item, i) { + _legendClickHandler = (item, i) => { const {series} = this.state; series[i].disabled = !series[i].disabled; this.setState({series}); - } + }; render() { const {series, crosshairValues} = this.state; diff --git a/showcase/showcase-components/showcase-dropdown.js b/showcase/showcase-components/showcase-dropdown.js index f673501eb..4af144e0d 100644 --- a/showcase/showcase-components/showcase-dropdown.js +++ b/showcase/showcase-components/showcase-dropdown.js @@ -27,12 +27,11 @@ class ShowcaseDropdown extends React.Component { this.state = { open: false }; - this.toggleState = this.toggleState.bind(this); } - toggleState() { + toggleState = () => { this.setState({open: !this.state.open}); - } + }; render() { const {items} = this.props; diff --git a/src/animation.js b/src/animation.js index 94a2a624d..28677b049 100644 --- a/src/animation.js +++ b/src/animation.js @@ -57,8 +57,6 @@ class Animation extends PureComponent { constructor(props) { super(props); this._updateInterpolator(props); - this._renderChildren = this._renderChildren.bind(this); - this._motionEndHandler = this._motionEndHandler.bind(this); } componentWillUpdate(props) { @@ -87,7 +85,7 @@ class Animation extends PureComponent { * @returns {React.Component} Rendered react element. * @private */ - _renderChildren({i}) { + _renderChildren = ({i}) => { const {children} = this.props; const interpolator = this._interpolator; const child = React.Children.only(children); @@ -116,13 +114,13 @@ class Animation extends PureComponent { // enforce re-rendering _animation: Math.random() }); - } + }; - _motionEndHandler() { + _motionEndHandler = () => { if (this.props.onEnd) { this.props.onEnd(); } - } + }; render() { const animationStyle = getAnimationStyle(this.props.animation); diff --git a/src/make-vis-flexible.js b/src/make-vis-flexible.js index 159c79c3c..706ca7305 100644 --- a/src/make-vis-flexible.js +++ b/src/make-vis-flexible.js @@ -113,14 +113,13 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) { height: 0, width: 0 }; - this._onResize = this._onResize.bind(this); } /** * Get the width of the container and assign the width. * @private */ - _onResize() { + _onResize = () => { const containerElement = getDOMNode(this[CONTAINER_REF]); const {offsetHeight, offsetWidth} = containerElement; @@ -134,7 +133,7 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) { ...newHeight, ...newWidth }); - } + }; componentDidMount() { this._onResize(); diff --git a/src/plot/series/abstract-series.js b/src/plot/series/abstract-series.js index c67d494a0..4cd81b220 100644 --- a/src/plot/series/abstract-series.js +++ b/src/plot/series/abstract-series.js @@ -80,25 +80,13 @@ class AbstractSeries extends PureComponent { return {}; } - constructor(props) { - super(props); - this._seriesMouseOverHandler = this._seriesMouseOverHandler.bind(this); - this._valueMouseOverHandler = this._valueMouseOverHandler.bind(this); - this._seriesMouseOutHandler = this._seriesMouseOutHandler.bind(this); - this._valueMouseOutHandler = this._valueMouseOutHandler.bind(this); - this._seriesClickHandler = this._seriesClickHandler.bind(this); - this._valueClickHandler = this._valueClickHandler.bind(this); - this._seriesRightClickHandler = this._seriesRightClickHandler.bind(this); - this._valueRightClickHandler = this._valueRightClickHandler.bind(this); - } - /** * Mouse over handler for the specific series' value. * @param {Object} d Value object * @param {Object} event Event. * @protected */ - _valueMouseOverHandler(d, event) { + _valueMouseOverHandler = (d, event) => { const {onValueMouseOver, onSeriesMouseOver} = this.props; if (onValueMouseOver) { onValueMouseOver(d, {event}); @@ -106,19 +94,19 @@ class AbstractSeries extends PureComponent { if (onSeriesMouseOver) { onSeriesMouseOver({event}); } - } + }; /** * Mouse over handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesMouseOverHandler(event) { + _seriesMouseOverHandler = event => { const {onSeriesMouseOver} = this.props; if (onSeriesMouseOver) { onSeriesMouseOver({event}); } - } + }; /** * Mouse out handler for the specific series' value. @@ -126,7 +114,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueMouseOutHandler(d, event) { + _valueMouseOutHandler = (d, event) => { const {onValueMouseOut, onSeriesMouseOut} = this.props; if (onValueMouseOut) { onValueMouseOut(d, {event}); @@ -134,19 +122,19 @@ class AbstractSeries extends PureComponent { if (onSeriesMouseOut) { onSeriesMouseOut({event}); } - } + }; /** * Mouse out handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesMouseOutHandler(event) { + _seriesMouseOutHandler = event => { const {onSeriesMouseOut} = this.props; if (onSeriesMouseOut) { onSeriesMouseOut({event}); } - } + }; /** * Click handler for the specific series' value. @@ -154,7 +142,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueClickHandler(d, event) { + _valueClickHandler = (d, event) => { const {onValueClick, onSeriesClick} = this.props; if (onValueClick) { onValueClick(d, {event}); @@ -162,7 +150,7 @@ class AbstractSeries extends PureComponent { if (onSeriesClick) { onSeriesClick({event}); } - } + }; /** * Right Click handler for the specific series' value. @@ -170,7 +158,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueRightClickHandler(d, event) { + _valueRightClickHandler = (d, event) => { const {onValueRightClick, onSeriesRightClick} = this.props; if (onValueRightClick) { onValueRightClick(d, {event}); @@ -178,31 +166,31 @@ class AbstractSeries extends PureComponent { if (onSeriesRightClick) { onSeriesRightClick({event}); } - } + }; /** * Click handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesClickHandler(event) { + _seriesClickHandler = event => { const {onSeriesClick} = this.props; if (onSeriesClick) { onSeriesClick({event}); } - } + }; /** * Right Click handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesRightClickHandler(event) { + _seriesRightClickHandler = event => { const {onSeriesRightClick} = this.props; if (onSeriesRightClick) { onSeriesRightClick({event}); } - } + }; /** * Get attribute functor. diff --git a/src/plot/xy-plot.js b/src/plot/xy-plot.js index 274a6c05c..a6a881888 100644 --- a/src/plot/xy-plot.js +++ b/src/plot/xy-plot.js @@ -133,18 +133,6 @@ class XYPlot extends React.Component { constructor(props) { super(props); - this._clickHandler = this._clickHandler.bind(this); - this._doubleClickHandler = this._doubleClickHandler.bind(this); - this._mouseDownHandler = this._mouseDownHandler.bind(this); - this._mouseUpHandler = this._mouseUpHandler.bind(this); - this._mouseLeaveHandler = this._mouseLeaveHandler.bind(this); - this._mouseEnterHandler = this._mouseEnterHandler.bind(this); - this._mouseMoveHandler = this._mouseMoveHandler.bind(this); - this._touchStartHandler = this._touchStartHandler.bind(this); - this._touchMoveHandler = this._touchMoveHandler.bind(this); - this._touchEndHandler = this._touchEndHandler.bind(this); - this._touchCancelHandler = this._touchCancelHandler.bind(this); - this._wheelHandler = this._wheelHandler.bind(this); const {stackBy} = props; const children = getSeriesChildren(props.children); const data = getStackedData(children, stackBy); @@ -178,31 +166,31 @@ class XYPlot extends React.Component { * @param {React.SyntheticEvent} event Click event. * @private */ - _clickHandler(event) { + _clickHandler = event => { const {onClick} = this.props; if (onClick) { onClick(event); } - } + }; /** * Trigger doule-click related callbacks if they are available. * @param {React.SyntheticEvent} event Double-click event. * @private */ - _doubleClickHandler(event) { + _doubleClickHandler = event => { const {onDoubleClick} = this.props; if (onDoubleClick) { onDoubleClick(event); } - } + }; /** * Trigger mouse-down related callbacks if they are available. * @param {React.SyntheticEvent} event Mouse down event. * @private */ - _mouseDownHandler(event) { + _mouseDownHandler = event => { const {onMouseDown, children} = this.props; if (onMouseDown) { onMouseDown(event); @@ -214,13 +202,14 @@ class XYPlot extends React.Component { component.onParentMouseDown(event); } }); - } + }; + /** * Trigger mouse-up related callbacks if they are available. * @param {React.SyntheticEvent} event Mouse up event. * @private */ - _mouseUpHandler(event) { + _mouseUpHandler = event => { const {onMouseUp, children} = this.props; if (onMouseUp) { onMouseUp(event); @@ -232,14 +221,14 @@ class XYPlot extends React.Component { component.onParentMouseUp(event); } }); - } + }; /** * Trigger movement-related callbacks if they are available. * @param {React.SyntheticEvent} event Mouse move event. * @private */ - _mouseMoveHandler(event) { + _mouseMoveHandler = event => { const {onMouseMove, children} = this.props; if (onMouseMove) { onMouseMove(event); @@ -251,14 +240,14 @@ class XYPlot extends React.Component { component.onParentMouseMove(event); } }); - } + }; /** * Trigger onMouseLeave handler if it was passed in props. * @param {React.SyntheticEvent} event Mouse leave event. * @private */ - _mouseLeaveHandler(event) { + _mouseLeaveHandler = event => { const {onMouseLeave, children} = this.props; if (onMouseLeave) { onMouseLeave(event); @@ -270,14 +259,14 @@ class XYPlot extends React.Component { component.onParentMouseLeave(event); } }); - } + }; /** * Trigger onMouseEnter handler if it was passed in props. * @param {React.SyntheticEvent} event Mouse enter event. * @private */ - _mouseEnterHandler(event) { + _mouseEnterHandler = event => { const {onMouseEnter, children} = this.props; if (onMouseEnter) { onMouseEnter(event); @@ -289,14 +278,14 @@ class XYPlot extends React.Component { component.onParentMouseEnter(event); } }); - } + }; /** * Trigger touch-start related callbacks if they are available. * @param {React.SyntheticEvent} event Touch start event. * @private */ - _touchStartHandler(event) { + _touchStartHandler = event => { const {onTouchStart, children} = this.props; if (onTouchStart) { onTouchStart(event); @@ -308,14 +297,14 @@ class XYPlot extends React.Component { component.onParentTouchStart(event); } }); - } + }; /** * Trigger touch movement-related callbacks if they are available. * @param {React.SyntheticEvent} event Touch move event. * @private */ - _touchMoveHandler(event) { + _touchMoveHandler = event => { const {onTouchMove, children} = this.props; if (onTouchMove) { onTouchMove(event); @@ -327,43 +316,43 @@ class XYPlot extends React.Component { component.onParentTouchMove(event); } }); - } + }; /** * Trigger onTouchEnd handler if it was passed in props. * @param {React.SyntheticEvent} event Touch End event. * @private */ - _touchEndHandler(event) { + _touchEndHandler = event => { const {onTouchEnd} = this.props; if (onTouchEnd) { onTouchEnd(event); } - } + }; /** * Trigger onTouchCancel handler if it was passed in props. * @param {React.SyntheticEvent} event Touch Cancel event. * @private */ - _touchCancelHandler(event) { + _touchCancelHandler = event => { const {onTouchCancel} = this.props; if (onTouchCancel) { onTouchCancel(event); } - } + }; /** * Trigger doule-click related callbacks if they are available. * @param {React.SyntheticEvent} event Double-click event. * @private */ - _wheelHandler(event) { + _wheelHandler = event => { const {onWheel} = this.props; if (onWheel) { onWheel(event); } - } + }; /** * Get the list of scale-related settings that should be applied by default. From ddebc1d8c5e4fff1793a9741b9339ad26efdd1e0 Mon Sep 17 00:00:00 2001 From: Ben Shope Date: Mon, 15 Oct 2018 10:10:20 -0700 Subject: [PATCH 2/3] Revert "Run Codemod" This reverts commit a3619e58e84ecf1bdf78a600f491e0659707359c. --- showcase/axes/dynamic-complex-edge-hints.js | 5 +- showcase/axes/dynamic-crosshair.js | 11 ++-- showcase/axes/dynamic-hints.js | 10 +-- .../dynamic-programmatic-rightedge-hints.js | 5 +- showcase/axes/dynamic-simple-edge-hints.js | 5 +- showcase/axes/dynamic-simple-topedge-hints.js | 5 +- showcase/interaction/interaction-examples.js | 7 +-- showcase/legends/searchable-discrete-color.js | 10 +-- showcase/misc/synced-charts.js | 5 +- showcase/plot/complex-chart.js | 30 +++++---- .../showcase-components/showcase-dropdown.js | 5 +- src/animation.js | 10 +-- src/make-vis-flexible.js | 5 +- src/plot/series/abstract-series.js | 44 ++++++++----- src/plot/xy-plot.js | 61 +++++++++++-------- 15 files changed, 131 insertions(+), 87 deletions(-) diff --git a/showcase/axes/dynamic-complex-edge-hints.js b/showcase/axes/dynamic-complex-edge-hints.js index 912a3fe49..7c361bafb 100644 --- a/showcase/axes/dynamic-complex-edge-hints.js +++ b/showcase/axes/dynamic-complex-edge-hints.js @@ -70,11 +70,12 @@ export default class Example extends React.Component { this.state = { value: null }; + this._rememberValue = this._rememberValue.bind(this); } - _rememberValue = value => { + _rememberValue(value) { this.setState({value}); - }; + } render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-crosshair.js b/showcase/axes/dynamic-crosshair.js index 9d482f7d8..62a1c7261 100644 --- a/showcase/axes/dynamic-crosshair.js +++ b/showcase/axes/dynamic-crosshair.js @@ -41,6 +41,9 @@ export default class DynamicCrosshair extends React.Component { this.state = { crosshairValues: [] }; + + this._onMouseLeave = this._onMouseLeave.bind(this); + this._onNearestX = this._onNearestX.bind(this); } /** @@ -49,17 +52,17 @@ export default class DynamicCrosshair extends React.Component { * @param {index} index Index of the value in the data array. * @private */ - _onNearestX = (value, {index}) => { + _onNearestX(value, {index}) { this.setState({crosshairValues: DATA.map(d => d[index])}); - }; + } /** * Event handler for onMouseLeave. * @private */ - _onMouseLeave = () => { + _onMouseLeave() { this.setState({crosshairValues: []}); - }; + } render() { return ( diff --git a/showcase/axes/dynamic-hints.js b/showcase/axes/dynamic-hints.js index 7a7eacba8..e111ac842 100644 --- a/showcase/axes/dynamic-hints.js +++ b/showcase/axes/dynamic-hints.js @@ -36,17 +36,19 @@ export default class Example extends React.Component { this.state = { value: null }; + this._rememberValue = this._rememberValue.bind(this); + this._forgetValue = this._forgetValue.bind(this); } - _rememberValue = value => { + _rememberValue(value) { this.setState({value}); - }; + } - _forgetValue = () => { + _forgetValue() { this.setState({ value: null }); - }; + } render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-programmatic-rightedge-hints.js b/showcase/axes/dynamic-programmatic-rightedge-hints.js index 3e593d85b..58ab5a18f 100644 --- a/showcase/axes/dynamic-programmatic-rightedge-hints.js +++ b/showcase/axes/dynamic-programmatic-rightedge-hints.js @@ -48,11 +48,12 @@ export default class Example extends React.Component { this.state = { value: null }; + this._rememberValue = this._rememberValue.bind(this); } - _rememberValue = value => { + _rememberValue(value) { this.setState({value}); - }; + } render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-simple-edge-hints.js b/showcase/axes/dynamic-simple-edge-hints.js index 1d7045b6c..ea786f091 100644 --- a/showcase/axes/dynamic-simple-edge-hints.js +++ b/showcase/axes/dynamic-simple-edge-hints.js @@ -58,11 +58,12 @@ export default class Example extends React.Component { this.state = { value: null }; + this._rememberValue = this._rememberValue.bind(this); } - _rememberValue = value => { + _rememberValue(value) { this.setState({value}); - }; + } render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-simple-topedge-hints.js b/showcase/axes/dynamic-simple-topedge-hints.js index ddccc1065..a2f17c8b8 100644 --- a/showcase/axes/dynamic-simple-topedge-hints.js +++ b/showcase/axes/dynamic-simple-topedge-hints.js @@ -41,11 +41,12 @@ export default class Example extends React.Component { this.state = { value: null }; + this._rememberValue = this._rememberValue.bind(this); } - _rememberValue = value => { + _rememberValue(value) { this.setState({value}); - }; + } render() { const {value} = this.state; diff --git a/showcase/interaction/interaction-examples.js b/showcase/interaction/interaction-examples.js index b48cd8377..3d23d37aa 100644 --- a/showcase/interaction/interaction-examples.js +++ b/showcase/interaction/interaction-examples.js @@ -154,12 +154,11 @@ export class LinkedCharts extends Component { constructor() { super(); this.state = {index: null}; + this.handleMouseOver = this.handleMouseOver.bind(this); } - - handleMouseOver = index => { + handleMouseOver(index) { this.setState({index}); - }; - + } render() { const {index} = this.state; return ( diff --git a/showcase/legends/searchable-discrete-color.js b/showcase/legends/searchable-discrete-color.js index 9bc14a6b6..bf91e262e 100644 --- a/showcase/legends/searchable-discrete-color.js +++ b/showcase/legends/searchable-discrete-color.js @@ -37,17 +37,19 @@ export default class Example extends React.Component { ], searchText: '' }; + this._clickHandler = this._clickHandler.bind(this); + this._searchChangeHandler = this._searchChangeHandler.bind(this); } - _clickHandler = item => { + _clickHandler(item) { const {items} = this.state; item.disabled = !item.disabled; this.setState({items}); - }; + } - _searchChangeHandler = searchText => { + _searchChangeHandler(searchText) { this.setState({searchText}); - }; + } render() { const {items, searchText} = this.state; diff --git a/showcase/misc/synced-charts.js b/showcase/misc/synced-charts.js index a54254f54..20af5d1ef 100644 --- a/showcase/misc/synced-charts.js +++ b/showcase/misc/synced-charts.js @@ -35,6 +35,7 @@ export default class Example extends React.Component { this.state = { selectedIndex: null }; + this._onChartMouseLeave = this._onChartMouseLeave.bind(this); this._onSeriesMouseOvers = [ this._onSeriesMouseOver.bind(this, 0), this._onSeriesMouseOver.bind(this, 1) @@ -45,9 +46,9 @@ export default class Example extends React.Component { this.setState({selectedIndex}); } - _onChartMouseLeave = () => { + _onChartMouseLeave() { this.setState({selectedIndex: null}); - }; + } _getSeriesColor(index) { const {selectedIndex} = this.state; diff --git a/showcase/plot/complex-chart.js b/showcase/plot/complex-chart.js index 3751d6053..7c7793300 100644 --- a/showcase/plot/complex-chart.js +++ b/showcase/plot/complex-chart.js @@ -73,16 +73,22 @@ export default class Example extends React.Component { } ] }; + this._nearestXHandler = this._nearestXHandler.bind(this); + this._mouseLeaveHandler = this._mouseLeaveHandler.bind(this); + this._updateButtonClicked = this._updateButtonClicked.bind(this); + this._legendClickHandler = this._legendClickHandler.bind(this); + this._formatCrosshairItems = this._formatCrosshairItems.bind(this); + this._formatCrosshairTitle = this._formatCrosshairTitle.bind(this); } - _updateButtonClicked = () => { + _updateButtonClicked() { const {series} = this.state; const totalValues = Math.random() * 50; series.forEach(s => { s.data = getRandomSeriesData(totalValues); }); this.setState({series}); - }; + } /** * Event handler for onNearestX. @@ -90,20 +96,20 @@ export default class Example extends React.Component { * @param {number} index Index of the series. * @private */ - _nearestXHandler = (value, {index}) => { + _nearestXHandler(value, {index}) { const {series} = this.state; this.setState({ crosshairValues: series.map(s => s.data[index]) }); - }; + } /** * Event handler for onMouseLeave. * @private */ - _mouseLeaveHandler = () => { + _mouseLeaveHandler() { this.setState({crosshairValues: []}); - }; + } /** * Format the title line of the crosshair. @@ -111,12 +117,12 @@ export default class Example extends React.Component { * @returns {Object} The caption and the value of the title. * @private */ - _formatCrosshairTitle = values => { + _formatCrosshairTitle(values) { return { title: 'X', value: values[0].left }; - }; + } /** * A callback to format the crosshair items. @@ -124,7 +130,7 @@ export default class Example extends React.Component { * @returns {Array} Array of objects with titles and values. * @private */ - _formatCrosshairItems = values => { + _formatCrosshairItems(values) { const {series} = this.state; return values.map((v, i) => { return { @@ -132,7 +138,7 @@ export default class Example extends React.Component { value: v.top }; }); - }; + } /** * Click handler for the legend. @@ -140,11 +146,11 @@ export default class Example extends React.Component { * @param {number} i Index of the legend. * @private */ - _legendClickHandler = (item, i) => { + _legendClickHandler(item, i) { const {series} = this.state; series[i].disabled = !series[i].disabled; this.setState({series}); - }; + } render() { const {series, crosshairValues} = this.state; diff --git a/showcase/showcase-components/showcase-dropdown.js b/showcase/showcase-components/showcase-dropdown.js index 4af144e0d..f673501eb 100644 --- a/showcase/showcase-components/showcase-dropdown.js +++ b/showcase/showcase-components/showcase-dropdown.js @@ -27,11 +27,12 @@ class ShowcaseDropdown extends React.Component { this.state = { open: false }; + this.toggleState = this.toggleState.bind(this); } - toggleState = () => { + toggleState() { this.setState({open: !this.state.open}); - }; + } render() { const {items} = this.props; diff --git a/src/animation.js b/src/animation.js index 28677b049..94a2a624d 100644 --- a/src/animation.js +++ b/src/animation.js @@ -57,6 +57,8 @@ class Animation extends PureComponent { constructor(props) { super(props); this._updateInterpolator(props); + this._renderChildren = this._renderChildren.bind(this); + this._motionEndHandler = this._motionEndHandler.bind(this); } componentWillUpdate(props) { @@ -85,7 +87,7 @@ class Animation extends PureComponent { * @returns {React.Component} Rendered react element. * @private */ - _renderChildren = ({i}) => { + _renderChildren({i}) { const {children} = this.props; const interpolator = this._interpolator; const child = React.Children.only(children); @@ -114,13 +116,13 @@ class Animation extends PureComponent { // enforce re-rendering _animation: Math.random() }); - }; + } - _motionEndHandler = () => { + _motionEndHandler() { if (this.props.onEnd) { this.props.onEnd(); } - }; + } render() { const animationStyle = getAnimationStyle(this.props.animation); diff --git a/src/make-vis-flexible.js b/src/make-vis-flexible.js index 706ca7305..159c79c3c 100644 --- a/src/make-vis-flexible.js +++ b/src/make-vis-flexible.js @@ -113,13 +113,14 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) { height: 0, width: 0 }; + this._onResize = this._onResize.bind(this); } /** * Get the width of the container and assign the width. * @private */ - _onResize = () => { + _onResize() { const containerElement = getDOMNode(this[CONTAINER_REF]); const {offsetHeight, offsetWidth} = containerElement; @@ -133,7 +134,7 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) { ...newHeight, ...newWidth }); - }; + } componentDidMount() { this._onResize(); diff --git a/src/plot/series/abstract-series.js b/src/plot/series/abstract-series.js index 4cd81b220..c67d494a0 100644 --- a/src/plot/series/abstract-series.js +++ b/src/plot/series/abstract-series.js @@ -80,13 +80,25 @@ class AbstractSeries extends PureComponent { return {}; } + constructor(props) { + super(props); + this._seriesMouseOverHandler = this._seriesMouseOverHandler.bind(this); + this._valueMouseOverHandler = this._valueMouseOverHandler.bind(this); + this._seriesMouseOutHandler = this._seriesMouseOutHandler.bind(this); + this._valueMouseOutHandler = this._valueMouseOutHandler.bind(this); + this._seriesClickHandler = this._seriesClickHandler.bind(this); + this._valueClickHandler = this._valueClickHandler.bind(this); + this._seriesRightClickHandler = this._seriesRightClickHandler.bind(this); + this._valueRightClickHandler = this._valueRightClickHandler.bind(this); + } + /** * Mouse over handler for the specific series' value. * @param {Object} d Value object * @param {Object} event Event. * @protected */ - _valueMouseOverHandler = (d, event) => { + _valueMouseOverHandler(d, event) { const {onValueMouseOver, onSeriesMouseOver} = this.props; if (onValueMouseOver) { onValueMouseOver(d, {event}); @@ -94,19 +106,19 @@ class AbstractSeries extends PureComponent { if (onSeriesMouseOver) { onSeriesMouseOver({event}); } - }; + } /** * Mouse over handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesMouseOverHandler = event => { + _seriesMouseOverHandler(event) { const {onSeriesMouseOver} = this.props; if (onSeriesMouseOver) { onSeriesMouseOver({event}); } - }; + } /** * Mouse out handler for the specific series' value. @@ -114,7 +126,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueMouseOutHandler = (d, event) => { + _valueMouseOutHandler(d, event) { const {onValueMouseOut, onSeriesMouseOut} = this.props; if (onValueMouseOut) { onValueMouseOut(d, {event}); @@ -122,19 +134,19 @@ class AbstractSeries extends PureComponent { if (onSeriesMouseOut) { onSeriesMouseOut({event}); } - }; + } /** * Mouse out handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesMouseOutHandler = event => { + _seriesMouseOutHandler(event) { const {onSeriesMouseOut} = this.props; if (onSeriesMouseOut) { onSeriesMouseOut({event}); } - }; + } /** * Click handler for the specific series' value. @@ -142,7 +154,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueClickHandler = (d, event) => { + _valueClickHandler(d, event) { const {onValueClick, onSeriesClick} = this.props; if (onValueClick) { onValueClick(d, {event}); @@ -150,7 +162,7 @@ class AbstractSeries extends PureComponent { if (onSeriesClick) { onSeriesClick({event}); } - }; + } /** * Right Click handler for the specific series' value. @@ -158,7 +170,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueRightClickHandler = (d, event) => { + _valueRightClickHandler(d, event) { const {onValueRightClick, onSeriesRightClick} = this.props; if (onValueRightClick) { onValueRightClick(d, {event}); @@ -166,31 +178,31 @@ class AbstractSeries extends PureComponent { if (onSeriesRightClick) { onSeriesRightClick({event}); } - }; + } /** * Click handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesClickHandler = event => { + _seriesClickHandler(event) { const {onSeriesClick} = this.props; if (onSeriesClick) { onSeriesClick({event}); } - }; + } /** * Right Click handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesRightClickHandler = event => { + _seriesRightClickHandler(event) { const {onSeriesRightClick} = this.props; if (onSeriesRightClick) { onSeriesRightClick({event}); } - }; + } /** * Get attribute functor. diff --git a/src/plot/xy-plot.js b/src/plot/xy-plot.js index a6a881888..274a6c05c 100644 --- a/src/plot/xy-plot.js +++ b/src/plot/xy-plot.js @@ -133,6 +133,18 @@ class XYPlot extends React.Component { constructor(props) { super(props); + this._clickHandler = this._clickHandler.bind(this); + this._doubleClickHandler = this._doubleClickHandler.bind(this); + this._mouseDownHandler = this._mouseDownHandler.bind(this); + this._mouseUpHandler = this._mouseUpHandler.bind(this); + this._mouseLeaveHandler = this._mouseLeaveHandler.bind(this); + this._mouseEnterHandler = this._mouseEnterHandler.bind(this); + this._mouseMoveHandler = this._mouseMoveHandler.bind(this); + this._touchStartHandler = this._touchStartHandler.bind(this); + this._touchMoveHandler = this._touchMoveHandler.bind(this); + this._touchEndHandler = this._touchEndHandler.bind(this); + this._touchCancelHandler = this._touchCancelHandler.bind(this); + this._wheelHandler = this._wheelHandler.bind(this); const {stackBy} = props; const children = getSeriesChildren(props.children); const data = getStackedData(children, stackBy); @@ -166,31 +178,31 @@ class XYPlot extends React.Component { * @param {React.SyntheticEvent} event Click event. * @private */ - _clickHandler = event => { + _clickHandler(event) { const {onClick} = this.props; if (onClick) { onClick(event); } - }; + } /** * Trigger doule-click related callbacks if they are available. * @param {React.SyntheticEvent} event Double-click event. * @private */ - _doubleClickHandler = event => { + _doubleClickHandler(event) { const {onDoubleClick} = this.props; if (onDoubleClick) { onDoubleClick(event); } - }; + } /** * Trigger mouse-down related callbacks if they are available. * @param {React.SyntheticEvent} event Mouse down event. * @private */ - _mouseDownHandler = event => { + _mouseDownHandler(event) { const {onMouseDown, children} = this.props; if (onMouseDown) { onMouseDown(event); @@ -202,14 +214,13 @@ class XYPlot extends React.Component { component.onParentMouseDown(event); } }); - }; - + } /** * Trigger mouse-up related callbacks if they are available. * @param {React.SyntheticEvent} event Mouse up event. * @private */ - _mouseUpHandler = event => { + _mouseUpHandler(event) { const {onMouseUp, children} = this.props; if (onMouseUp) { onMouseUp(event); @@ -221,14 +232,14 @@ class XYPlot extends React.Component { component.onParentMouseUp(event); } }); - }; + } /** * Trigger movement-related callbacks if they are available. * @param {React.SyntheticEvent} event Mouse move event. * @private */ - _mouseMoveHandler = event => { + _mouseMoveHandler(event) { const {onMouseMove, children} = this.props; if (onMouseMove) { onMouseMove(event); @@ -240,14 +251,14 @@ class XYPlot extends React.Component { component.onParentMouseMove(event); } }); - }; + } /** * Trigger onMouseLeave handler if it was passed in props. * @param {React.SyntheticEvent} event Mouse leave event. * @private */ - _mouseLeaveHandler = event => { + _mouseLeaveHandler(event) { const {onMouseLeave, children} = this.props; if (onMouseLeave) { onMouseLeave(event); @@ -259,14 +270,14 @@ class XYPlot extends React.Component { component.onParentMouseLeave(event); } }); - }; + } /** * Trigger onMouseEnter handler if it was passed in props. * @param {React.SyntheticEvent} event Mouse enter event. * @private */ - _mouseEnterHandler = event => { + _mouseEnterHandler(event) { const {onMouseEnter, children} = this.props; if (onMouseEnter) { onMouseEnter(event); @@ -278,14 +289,14 @@ class XYPlot extends React.Component { component.onParentMouseEnter(event); } }); - }; + } /** * Trigger touch-start related callbacks if they are available. * @param {React.SyntheticEvent} event Touch start event. * @private */ - _touchStartHandler = event => { + _touchStartHandler(event) { const {onTouchStart, children} = this.props; if (onTouchStart) { onTouchStart(event); @@ -297,14 +308,14 @@ class XYPlot extends React.Component { component.onParentTouchStart(event); } }); - }; + } /** * Trigger touch movement-related callbacks if they are available. * @param {React.SyntheticEvent} event Touch move event. * @private */ - _touchMoveHandler = event => { + _touchMoveHandler(event) { const {onTouchMove, children} = this.props; if (onTouchMove) { onTouchMove(event); @@ -316,43 +327,43 @@ class XYPlot extends React.Component { component.onParentTouchMove(event); } }); - }; + } /** * Trigger onTouchEnd handler if it was passed in props. * @param {React.SyntheticEvent} event Touch End event. * @private */ - _touchEndHandler = event => { + _touchEndHandler(event) { const {onTouchEnd} = this.props; if (onTouchEnd) { onTouchEnd(event); } - }; + } /** * Trigger onTouchCancel handler if it was passed in props. * @param {React.SyntheticEvent} event Touch Cancel event. * @private */ - _touchCancelHandler = event => { + _touchCancelHandler(event) { const {onTouchCancel} = this.props; if (onTouchCancel) { onTouchCancel(event); } - }; + } /** * Trigger doule-click related callbacks if they are available. * @param {React.SyntheticEvent} event Double-click event. * @private */ - _wheelHandler = event => { + _wheelHandler(event) { const {onWheel} = this.props; if (onWheel) { onWheel(event); } - }; + } /** * Get the list of scale-related settings that should be applied by default. From 07f0ab03509d71a2d311885ad379098983b1d418 Mon Sep 17 00:00:00 2001 From: Ben Shope Date: Mon, 15 Oct 2018 10:11:57 -0700 Subject: [PATCH 3/3] run it again to fix conflicts --- showcase/axes/dynamic-complex-edge-hints.js | 5 +- showcase/axes/dynamic-crosshair.js | 11 ++-- showcase/axes/dynamic-hints.js | 10 ++-- .../dynamic-programmatic-rightedge-hints.js | 5 +- showcase/axes/dynamic-simple-edge-hints.js | 5 +- showcase/axes/dynamic-simple-topedge-hints.js | 5 +- showcase/interaction/interaction-examples.js | 7 ++- showcase/legends/searchable-discrete-color.js | 10 ++-- showcase/misc/synced-charts.js | 5 +- showcase/plot/complex-chart.js | 30 ++++------ .../showcase-components/showcase-dropdown.js | 5 +- src/animation.js | 10 ++-- src/make-vis-flexible.js | 5 +- src/plot/series/abstract-series.js | 44 +++++--------- src/plot/xy-plot.js | 60 ++++++++----------- 15 files changed, 86 insertions(+), 131 deletions(-) diff --git a/showcase/axes/dynamic-complex-edge-hints.js b/showcase/axes/dynamic-complex-edge-hints.js index 7c361bafb..912a3fe49 100644 --- a/showcase/axes/dynamic-complex-edge-hints.js +++ b/showcase/axes/dynamic-complex-edge-hints.js @@ -70,12 +70,11 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-crosshair.js b/showcase/axes/dynamic-crosshair.js index b3eb674d2..aafc1883a 100644 --- a/showcase/axes/dynamic-crosshair.js +++ b/showcase/axes/dynamic-crosshair.js @@ -41,18 +41,15 @@ export default class DynamicCrosshair extends React.Component { this.state = { crosshairValues: [] }; - - this._onMouseLeave = this._onMouseLeave.bind(this); - this._onNearestX = this._onNearestX.bind(this); } /** * Event handler for onMouseLeave. * @private */ - _onMouseLeave() { + _onMouseLeave = () => { this.setState({crosshairValues: []}); - } + }; /** * Event handler for onNearestX. @@ -60,9 +57,9 @@ export default class DynamicCrosshair extends React.Component { * @param {index} index Index of the value in the data array. * @private */ - _onNearestX(value, {index}) { + _onNearestX = (value, {index}) => { this.setState({crosshairValues: DATA.map(d => d[index])}); - } + }; render() { return ( diff --git a/showcase/axes/dynamic-hints.js b/showcase/axes/dynamic-hints.js index 088cd956e..1b4a2d251 100644 --- a/showcase/axes/dynamic-hints.js +++ b/showcase/axes/dynamic-hints.js @@ -36,19 +36,17 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); - this._forgetValue = this._forgetValue.bind(this); } - _forgetValue() { + _forgetValue = () => { this.setState({ value: null }); - } + }; - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-programmatic-rightedge-hints.js b/showcase/axes/dynamic-programmatic-rightedge-hints.js index 58ab5a18f..3e593d85b 100644 --- a/showcase/axes/dynamic-programmatic-rightedge-hints.js +++ b/showcase/axes/dynamic-programmatic-rightedge-hints.js @@ -48,12 +48,11 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-simple-edge-hints.js b/showcase/axes/dynamic-simple-edge-hints.js index ea786f091..1d7045b6c 100644 --- a/showcase/axes/dynamic-simple-edge-hints.js +++ b/showcase/axes/dynamic-simple-edge-hints.js @@ -58,12 +58,11 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/axes/dynamic-simple-topedge-hints.js b/showcase/axes/dynamic-simple-topedge-hints.js index a2f17c8b8..ddccc1065 100644 --- a/showcase/axes/dynamic-simple-topedge-hints.js +++ b/showcase/axes/dynamic-simple-topedge-hints.js @@ -41,12 +41,11 @@ export default class Example extends React.Component { this.state = { value: null }; - this._rememberValue = this._rememberValue.bind(this); } - _rememberValue(value) { + _rememberValue = value => { this.setState({value}); - } + }; render() { const {value} = this.state; diff --git a/showcase/interaction/interaction-examples.js b/showcase/interaction/interaction-examples.js index 3d23d37aa..b48cd8377 100644 --- a/showcase/interaction/interaction-examples.js +++ b/showcase/interaction/interaction-examples.js @@ -154,11 +154,12 @@ export class LinkedCharts extends Component { constructor() { super(); this.state = {index: null}; - this.handleMouseOver = this.handleMouseOver.bind(this); } - handleMouseOver(index) { + + handleMouseOver = index => { this.setState({index}); - } + }; + render() { const {index} = this.state; return ( diff --git a/showcase/legends/searchable-discrete-color.js b/showcase/legends/searchable-discrete-color.js index bf91e262e..9bc14a6b6 100644 --- a/showcase/legends/searchable-discrete-color.js +++ b/showcase/legends/searchable-discrete-color.js @@ -37,19 +37,17 @@ export default class Example extends React.Component { ], searchText: '' }; - this._clickHandler = this._clickHandler.bind(this); - this._searchChangeHandler = this._searchChangeHandler.bind(this); } - _clickHandler(item) { + _clickHandler = item => { const {items} = this.state; item.disabled = !item.disabled; this.setState({items}); - } + }; - _searchChangeHandler(searchText) { + _searchChangeHandler = searchText => { this.setState({searchText}); - } + }; render() { const {items, searchText} = this.state; diff --git a/showcase/misc/synced-charts.js b/showcase/misc/synced-charts.js index 20507078c..866fda143 100644 --- a/showcase/misc/synced-charts.js +++ b/showcase/misc/synced-charts.js @@ -35,7 +35,6 @@ export default class Example extends React.Component { this.state = { selectedIndex: null }; - this._onChartMouseLeave = this._onChartMouseLeave.bind(this); this._onSeriesMouseOvers = [ this._onSeriesMouseOver.bind(this, 0), this._onSeriesMouseOver.bind(this, 1) @@ -50,9 +49,9 @@ export default class Example extends React.Component { return null; } - _onChartMouseLeave() { + _onChartMouseLeave = () => { this.setState({selectedIndex: null}); - } + }; _onSeriesMouseOver(selectedIndex) { this.setState({selectedIndex}); diff --git a/showcase/plot/complex-chart.js b/showcase/plot/complex-chart.js index b3e6375d3..dd1244025 100644 --- a/showcase/plot/complex-chart.js +++ b/showcase/plot/complex-chart.js @@ -73,12 +73,6 @@ export default class Example extends React.Component { } ] }; - this._nearestXHandler = this._nearestXHandler.bind(this); - this._mouseLeaveHandler = this._mouseLeaveHandler.bind(this); - this._updateButtonClicked = this._updateButtonClicked.bind(this); - this._legendClickHandler = this._legendClickHandler.bind(this); - this._formatCrosshairItems = this._formatCrosshairItems.bind(this); - this._formatCrosshairTitle = this._formatCrosshairTitle.bind(this); } /** @@ -87,7 +81,7 @@ export default class Example extends React.Component { * @returns {Array} Array of objects with titles and values. * @private */ - _formatCrosshairItems(values) { + _formatCrosshairItems = values => { const {series} = this.state; return values.map((v, i) => { return { @@ -95,7 +89,7 @@ export default class Example extends React.Component { value: v.top }; }); - } + }; /** * Format the title line of the crosshair. @@ -103,12 +97,12 @@ export default class Example extends React.Component { * @returns {Object} The caption and the value of the title. * @private */ - _formatCrosshairTitle(values) { + _formatCrosshairTitle = values => { return { title: 'X', value: values[0].left }; - } + }; /** * Click handler for the legend. @@ -116,19 +110,19 @@ export default class Example extends React.Component { * @param {number} i Index of the legend. * @private */ - _legendClickHandler(item, i) { + _legendClickHandler = (item, i) => { const {series} = this.state; series[i].disabled = !series[i].disabled; this.setState({series}); - } + }; /** * Event handler for onMouseLeave. * @private */ - _mouseLeaveHandler() { + _mouseLeaveHandler = () => { this.setState({crosshairValues: []}); - } + }; /** * Event handler for onNearestX. @@ -136,21 +130,21 @@ export default class Example extends React.Component { * @param {number} index Index of the series. * @private */ - _nearestXHandler(value, {index}) { + _nearestXHandler = (value, {index}) => { const {series} = this.state; this.setState({ crosshairValues: series.map(s => s.data[index]) }); - } + }; - _updateButtonClicked() { + _updateButtonClicked = () => { const {series} = this.state; const totalValues = Math.random() * 50; series.forEach(s => { s.data = getRandomSeriesData(totalValues); }); this.setState({series}); - } + }; render() { const {series, crosshairValues} = this.state; diff --git a/showcase/showcase-components/showcase-dropdown.js b/showcase/showcase-components/showcase-dropdown.js index f673501eb..4af144e0d 100644 --- a/showcase/showcase-components/showcase-dropdown.js +++ b/showcase/showcase-components/showcase-dropdown.js @@ -27,12 +27,11 @@ class ShowcaseDropdown extends React.Component { this.state = { open: false }; - this.toggleState = this.toggleState.bind(this); } - toggleState() { + toggleState = () => { this.setState({open: !this.state.open}); - } + }; render() { const {items} = this.props; diff --git a/src/animation.js b/src/animation.js index 8eb160beb..eff5638d8 100644 --- a/src/animation.js +++ b/src/animation.js @@ -57,8 +57,6 @@ class Animation extends PureComponent { constructor(props) { super(props); this._updateInterpolator(props); - this._renderChildren = this._renderChildren.bind(this); - this._motionEndHandler = this._motionEndHandler.bind(this); } componentWillUpdate(props) { @@ -68,11 +66,11 @@ class Animation extends PureComponent { } } - _motionEndHandler() { + _motionEndHandler = () => { if (this.props.onEnd) { this.props.onEnd(); } - } + }; /** * Render the child into the parent. @@ -80,7 +78,7 @@ class Animation extends PureComponent { * @returns {React.Component} Rendered react element. * @private */ - _renderChildren({i}) { + _renderChildren = ({i}) => { const {children} = this.props; const interpolator = this._interpolator; const child = React.Children.only(children); @@ -109,7 +107,7 @@ class Animation extends PureComponent { // enforce re-rendering _animation: Math.random() }); - } + }; /** * Update the interpolator function and assign it to this._interpolator. diff --git a/src/make-vis-flexible.js b/src/make-vis-flexible.js index 159c79c3c..706ca7305 100644 --- a/src/make-vis-flexible.js +++ b/src/make-vis-flexible.js @@ -113,14 +113,13 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) { height: 0, width: 0 }; - this._onResize = this._onResize.bind(this); } /** * Get the width of the container and assign the width. * @private */ - _onResize() { + _onResize = () => { const containerElement = getDOMNode(this[CONTAINER_REF]); const {offsetHeight, offsetWidth} = containerElement; @@ -134,7 +133,7 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) { ...newHeight, ...newWidth }); - } + }; componentDidMount() { this._onResize(); diff --git a/src/plot/series/abstract-series.js b/src/plot/series/abstract-series.js index 7bd3665c3..ebf0308c9 100644 --- a/src/plot/series/abstract-series.js +++ b/src/plot/series/abstract-series.js @@ -80,18 +80,6 @@ class AbstractSeries extends PureComponent { return true; } - constructor(props) { - super(props); - this._seriesMouseOverHandler = this._seriesMouseOverHandler.bind(this); - this._valueMouseOverHandler = this._valueMouseOverHandler.bind(this); - this._seriesMouseOutHandler = this._seriesMouseOutHandler.bind(this); - this._valueMouseOutHandler = this._valueMouseOutHandler.bind(this); - this._seriesClickHandler = this._seriesClickHandler.bind(this); - this._valueClickHandler = this._valueClickHandler.bind(this); - this._seriesRightClickHandler = this._seriesRightClickHandler.bind(this); - this._valueRightClickHandler = this._valueRightClickHandler.bind(this); - } - onParentMouseMove(event) { const {onNearestX, onNearestXY, data} = this.props; if ((!onNearestX && !onNearestXY) || !data) { @@ -231,48 +219,48 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _seriesClickHandler(event) { + _seriesClickHandler = event => { const {onSeriesClick} = this.props; if (onSeriesClick) { onSeriesClick({event}); } - } + }; /** * Mouse out handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesMouseOutHandler(event) { + _seriesMouseOutHandler = event => { const {onSeriesMouseOut} = this.props; if (onSeriesMouseOut) { onSeriesMouseOut({event}); } - } + }; /** * Mouse over handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesMouseOverHandler(event) { + _seriesMouseOverHandler = event => { const {onSeriesMouseOver} = this.props; if (onSeriesMouseOver) { onSeriesMouseOver({event}); } - } + }; /** * Right Click handler for the entire series. * @param {Object} event Event. * @protected */ - _seriesRightClickHandler(event) { + _seriesRightClickHandler = event => { const {onSeriesRightClick} = this.props; if (onSeriesRightClick) { onSeriesRightClick({event}); } - } + }; /** * Click handler for the specific series' value. @@ -280,7 +268,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueClickHandler(d, event) { + _valueClickHandler = (d, event) => { const {onValueClick, onSeriesClick} = this.props; if (onValueClick) { onValueClick(d, {event}); @@ -288,7 +276,7 @@ class AbstractSeries extends PureComponent { if (onSeriesClick) { onSeriesClick({event}); } - } + }; /** * Mouse out handler for the specific series' value. @@ -296,7 +284,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueMouseOutHandler(d, event) { + _valueMouseOutHandler = (d, event) => { const {onValueMouseOut, onSeriesMouseOut} = this.props; if (onValueMouseOut) { onValueMouseOut(d, {event}); @@ -304,7 +292,7 @@ class AbstractSeries extends PureComponent { if (onSeriesMouseOut) { onSeriesMouseOut({event}); } - } + }; /** * Mouse over handler for the specific series' value. @@ -312,7 +300,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueMouseOverHandler(d, event) { + _valueMouseOverHandler = (d, event) => { const {onValueMouseOver, onSeriesMouseOver} = this.props; if (onValueMouseOver) { onValueMouseOver(d, {event}); @@ -320,7 +308,7 @@ class AbstractSeries extends PureComponent { if (onSeriesMouseOver) { onSeriesMouseOver({event}); } - } + }; /** * Right Click handler for the specific series' value. @@ -328,7 +316,7 @@ class AbstractSeries extends PureComponent { * @param {Object} event Event. * @protected */ - _valueRightClickHandler(d, event) { + _valueRightClickHandler = (d, event) => { const {onValueRightClick, onSeriesRightClick} = this.props; if (onValueRightClick) { onValueRightClick(d, {event}); @@ -336,7 +324,7 @@ class AbstractSeries extends PureComponent { if (onSeriesRightClick) { onSeriesRightClick({event}); } - } + }; } AbstractSeries.displayName = 'AbstractSeries'; diff --git a/src/plot/xy-plot.js b/src/plot/xy-plot.js index fc3aad598..75f9d48ed 100644 --- a/src/plot/xy-plot.js +++ b/src/plot/xy-plot.js @@ -133,18 +133,6 @@ class XYPlot extends React.Component { constructor(props) { super(props); - this._clickHandler = this._clickHandler.bind(this); - this._doubleClickHandler = this._doubleClickHandler.bind(this); - this._mouseDownHandler = this._mouseDownHandler.bind(this); - this._mouseUpHandler = this._mouseUpHandler.bind(this); - this._mouseLeaveHandler = this._mouseLeaveHandler.bind(this); - this._mouseEnterHandler = this._mouseEnterHandler.bind(this); - this._mouseMoveHandler = this._mouseMoveHandler.bind(this); - this._touchStartHandler = this._touchStartHandler.bind(this); - this._touchMoveHandler = this._touchMoveHandler.bind(this); - this._touchEndHandler = this._touchEndHandler.bind(this); - this._touchCancelHandler = this._touchCancelHandler.bind(this); - this._wheelHandler = this._wheelHandler.bind(this); const {stackBy} = props; const children = getSeriesChildren(props.children); const data = getStackedData(children, stackBy); @@ -178,24 +166,24 @@ class XYPlot extends React.Component { * @param {React.SyntheticEvent} event Click event. * @private */ - _clickHandler(event) { + _clickHandler = event => { const {onClick} = this.props; if (onClick) { onClick(event); } - } + }; /** * Trigger doule-click related callbacks if they are available. * @param {React.SyntheticEvent} event Double-click event. * @private */ - _doubleClickHandler(event) { + _doubleClickHandler = event => { const {onDoubleClick} = this.props; if (onDoubleClick) { onDoubleClick(event); } - } + }; /** * Prepare the child components (including series) for rendering. @@ -345,7 +333,7 @@ class XYPlot extends React.Component { * @param {React.SyntheticEvent} event Mouse down event. * @private */ - _mouseDownHandler(event) { + _mouseDownHandler = event => { const {onMouseDown, children} = this.props; if (onMouseDown) { onMouseDown(event); @@ -357,14 +345,14 @@ class XYPlot extends React.Component { component.onParentMouseDown(event); } }); - } + }; /** * Trigger onMouseEnter handler if it was passed in props. * @param {React.SyntheticEvent} event Mouse enter event. * @private */ - _mouseEnterHandler(event) { + _mouseEnterHandler = event => { const {onMouseEnter, children} = this.props; if (onMouseEnter) { onMouseEnter(event); @@ -376,14 +364,14 @@ class XYPlot extends React.Component { component.onParentMouseEnter(event); } }); - } + }; /** * Trigger onMouseLeave handler if it was passed in props. * @param {React.SyntheticEvent} event Mouse leave event. * @private */ - _mouseLeaveHandler(event) { + _mouseLeaveHandler = event => { const {onMouseLeave, children} = this.props; if (onMouseLeave) { onMouseLeave(event); @@ -395,14 +383,14 @@ class XYPlot extends React.Component { component.onParentMouseLeave(event); } }); - } + }; /** * Trigger movement-related callbacks if they are available. * @param {React.SyntheticEvent} event Mouse move event. * @private */ - _mouseMoveHandler(event) { + _mouseMoveHandler = event => { const {onMouseMove, children} = this.props; if (onMouseMove) { onMouseMove(event); @@ -414,14 +402,14 @@ class XYPlot extends React.Component { component.onParentMouseMove(event); } }); - } + }; /** * Trigger mouse-up related callbacks if they are available. * @param {React.SyntheticEvent} event Mouse up event. * @private */ - _mouseUpHandler(event) { + _mouseUpHandler = event => { const {onMouseUp, children} = this.props; if (onMouseUp) { onMouseUp(event); @@ -433,38 +421,38 @@ class XYPlot extends React.Component { component.onParentMouseUp(event); } }); - } + }; /** * Trigger onTouchCancel handler if it was passed in props. * @param {React.SyntheticEvent} event Touch Cancel event. * @private */ - _touchCancelHandler(event) { + _touchCancelHandler = event => { const {onTouchCancel} = this.props; if (onTouchCancel) { onTouchCancel(event); } - } + }; /** * Trigger onTouchEnd handler if it was passed in props. * @param {React.SyntheticEvent} event Touch End event. * @private */ - _touchEndHandler(event) { + _touchEndHandler = event => { const {onTouchEnd} = this.props; if (onTouchEnd) { onTouchEnd(event); } - } + }; /** * Trigger touch movement-related callbacks if they are available. * @param {React.SyntheticEvent} event Touch move event. * @private */ - _touchMoveHandler(event) { + _touchMoveHandler = event => { const {onTouchMove, children} = this.props; if (onTouchMove) { onTouchMove(event); @@ -476,14 +464,14 @@ class XYPlot extends React.Component { component.onParentTouchMove(event); } }); - } + }; /** * Trigger touch-start related callbacks if they are available. * @param {React.SyntheticEvent} event Touch start event. * @private */ - _touchStartHandler(event) { + _touchStartHandler = event => { const {onTouchStart, children} = this.props; if (onTouchStart) { onTouchStart(event); @@ -495,19 +483,19 @@ class XYPlot extends React.Component { component.onParentTouchStart(event); } }); - } + }; /** * Trigger doule-click related callbacks if they are available. * @param {React.SyntheticEvent} event Double-click event. * @private */ - _wheelHandler(event) { + _wheelHandler = event => { const {onWheel} = this.props; if (onWheel) { onWheel(event); } - } + }; renderCanvasComponents(components, props) { const componentsToRender = components.filter(