Chore(ReactVis): Remove Refs (#848)

* Chore(ReactVis): Remove String Refs
uber · Jun 30, 2018 · 00ffe61 · 00ffe61
1 parent 1f04561
commit 00ffe61
Show file tree

Hide file tree

Showing 15 changed files with 10 additions and 20 deletions.
diff --git a/showcase/examples/candlestick/candlestick.js b/showcase/examples/candlestick/candlestick.js
@@ -43,7 +43,6 @@ class CandlestickSeries extends AbstractSeries {
 
     return (
       <g className={`${predefinedClassName} ${className}`}
-         ref={ref => (this.container = ref)}
          transform={`translate(${marginLeft},${marginTop})`}>
         {data.map((d, i) => {
           const xTrans = xFunctor(d);

diff --git a/src/plot/axis/decorative-axis.js b/src/plot/axis/decorative-axis.js
@@ -63,7 +63,6 @@ class DecorativeAxis extends AbstractSeries {
 
     return (
       <g className={`${predefinedClassName} ${className}`}
-         ref={ref => (this.container = ref)}
          transform={`translate(${marginLeft},${marginTop})`}>
         <line {...{
           x1: x({x: axisStart.x}),

diff --git a/src/plot/series/arc-series.js b/src/plot/series/arc-series.js
@@ -168,7 +168,6 @@ class ArcSeries extends AbstractSeries {
         onMouseOut={this._seriesMouseOutHandler}
         onClick={this._seriesClickHandler}
         onContextMenu={this._seriesRightClickHandler}
-        ref={ref => (this.container = ref)}
         opacity={hideSeries ? 0 : 1}
         pointerEvents={disableSeries ? 'none' : 'all'}
         transform={`translate(${marginLeft + x(center)},${marginTop + y(center)})`}>

diff --git a/src/plot/series/bar-series.js b/src/plot/series/bar-series.js
@@ -84,7 +84,6 @@ class BarSeries extends AbstractSeries {
 
     return (
       <g className={`${predefinedClassName} ${className}`}
-        ref={ref => (this.container = ref)}
         transform={`translate(${marginLeft},${marginTop})`}>
         {data.map((d, i) => {
           const attrs = {

diff --git a/src/plot/series/contour-series.js b/src/plot/series/contour-series.js
@@ -82,7 +82,6 @@ class ContourSeries extends AbstractSeries {
       .domain([min, max]).range(colorRange || CONTINUOUS_COLOR_RANGE);
     return (
       <g className={`${predefinedClassName} ${className}`}
-         ref={ref => (this.container = ref)}
          transform={`translate(${marginLeft},${marginTop})`} >
         {contouredData.map((polygon, index) => {
           return (

diff --git a/src/plot/series/custom-svg-series.js b/src/plot/series/custom-svg-series.js
@@ -137,7 +137,6 @@ class CustomSVGSeries extends AbstractSeries {
     });
     return (
       <g className={`${predefinedClassName} ${className}`}
-         ref={ref => (this.container = ref)}
          transform={`translate(${marginLeft},${marginTop})`}>
         {contents}
       </g>

diff --git a/src/plot/series/heatmap-series.js b/src/plot/series/heatmap-series.js
@@ -60,7 +60,6 @@ class HeatmapSeries extends AbstractSeries {
     return (
       <g
         className={`${predefinedClassName} ${className}`}
-        ref={ref => (this.container = ref)}
         transform={`translate(${marginLeft},${marginTop})`}>
         {data.map((d, i) => {
           const attrs = {

diff --git a/src/plot/series/label-series.js b/src/plot/series/label-series.js
@@ -68,7 +68,6 @@ class LabelSeries extends AbstractSeries {
     return (
       <g
         className={`${predefinedClassName} ${className}`}
-        ref={ref => (this.container = ref)}
         transform={`translate(${marginLeft},${marginTop})`}
         style={style}
       >

diff --git a/src/plot/series/mark-series.js b/src/plot/series/mark-series.js
@@ -104,7 +104,6 @@ class MarkSeries extends AbstractSeries {
     return (
       <g
         className={`${predefinedClassName} ${className}`}
-        ref={ref => (this.container = ref)}
         transform={`translate(${marginLeft},${marginTop})`}
       >
         {data.map((d, i) => {

diff --git a/src/plot/series/polygon-series.js b/src/plot/series/polygon-series.js
@@ -74,8 +74,7 @@ class PolygonSeries extends AbstractSeries {
         fill: color || DEFAULT_COLOR,
         style,
         d: generatePath(data, xFunctor, yFunctor),
-        transform: `translate(${marginLeft},${marginTop})`,
-        ref: 'container'
+        transform: `translate(${marginLeft},${marginTop})`
       }}/>
     );
   }

diff --git a/src/plot/series/rect-series.js b/src/plot/series/rect-series.js
@@ -79,7 +79,6 @@ class RectSeries extends AbstractSeries {
 
     return (
       <g className={`${predefinedClassName} ${className}`}
-        ref={ref => (this.container = ref)}
         transform={`translate(${marginLeft},${marginTop})`}>
         {data.map((d, i) => {
           const attrs = {

diff --git a/src/plot/series/whisker-series.js b/src/plot/series/whisker-series.js
@@ -192,7 +192,6 @@ class WhiskerSeries extends AbstractSeries {
 
     return (
       <g className={`${predefinedClassName} ${className}`}
-         ref={ref => (this.container = ref)}
          transform={`translate(${marginLeft},${marginTop})`}>
         {data.map(renderWhiskerMark(whiskerMarkProps))}
       </g>

diff --git a/src/plot/xy-plot.js b/src/plot/xy-plot.js
@@ -197,7 +197,7 @@ class XYPlot extends React.Component {
     }
     const seriesChildren = getSeriesChildren(children);
     seriesChildren.forEach((child, index) => {
-      const component = this.refs[`series${index}`];
+      const component = this[`series${index}`];
       if (component && component.onParentMouseDown) {
         component.onParentMouseDown(event);
       }
@@ -216,7 +216,7 @@ class XYPlot extends React.Component {
     }
     const seriesChildren = getSeriesChildren(children);
     seriesChildren.forEach((child, index) => {
-      const component = this.refs[`series${index}`];
+      const component = this[`series${index}`];
       if (component && component.onParentMouseMove) {
         component.onParentMouseMove(event);
       }
@@ -259,7 +259,7 @@ class XYPlot extends React.Component {
     }
     const seriesChildren = getSeriesChildren(children);
     seriesChildren.forEach((child, index) => {
-      const component = this.refs[`series${index}`];
+      const component = this[`series${index}`];
       if (component && component.onParentTouchStart) {
         component.onParentTouchStart(event);
       }
@@ -278,7 +278,7 @@ class XYPlot extends React.Component {
     }
     const seriesChildren = getSeriesChildren(children);
     seriesChildren.forEach((child, index) => {
-      const component = this.refs[`series${index}`];
+      const component = this[`series${index}`];
       if (component && component.onParentTouchMove) {
         component.onParentTouchMove(event);
       }
@@ -442,6 +442,11 @@ class XYPlot extends React.Component {
       return React.cloneElement(child, {
         ...dimensions,
         animation,
+        ref: (ref) => {
+          if (dataProps) {
+            this[`series${seriesProps[index].seriesIndex}`] = ref;
+          }
+        },
         ...seriesProps[index],
         ...scaleMixins,
         ...child.props,
@@ -498,7 +503,6 @@ class XYPlot extends React.Component {
       );
     }
     const components = this._getClonedChildComponents();
-
     return (
       <div
         style={{

diff --git a/src/utils/series-utils.js b/src/utils/series-utils.js
@@ -185,7 +185,6 @@ export function getSeriesPropsFromChildren(children) {
       props = {
         ...seriesTypeInfo,
         seriesIndex,
-        ref: `series${seriesIndex}`,
         _colorValue,
         _opacityValue
       };

diff --git a/tests/utils/series-utils-tests.js b/tests/utils/series-utils-tests.js
@@ -68,7 +68,6 @@ test('series-utils #getSeriesChildren', t => {
 const arePropsValid = seriesProps => {
   return typeof seriesProps._colorValue !== 'undefined' &&
     typeof seriesProps._opacityValue !== 'undefined' &&
-    typeof seriesProps.ref === 'string' &&
     typeof seriesProps.sameTypeIndex === 'number' &&
     typeof seriesProps.sameTypeTotal === 'number' &&
     typeof seriesProps.seriesIndex === 'number';