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(