[shape] add innerRef prop to shapes. fixes #140

packages/vx-shape/package.json

@@ -32,9 +32,11 @@
   "devDependencies": {
     "babel-jest": "^20.0.3",
     "d3-array": "^1.2.0",
+    "d3-hierarchy": "^1.1.5",
     "enzyme": "^2.8.2",
     "jest": "^20.0.3",
     "react": "^15.0.0-0 || ^16.0.0-0",
+    "react-dom": "^15.0.0-0 || ^16.0.0-0",
     "react-fatigue-dev": "github:tj/react-fatigue-dev",
     "react-test-renderer": "^15.6.1",
     "react-tools": "^0.10.0",

packages/vx-shape/src/shapes/AreaClosed.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { area } from 'd3-shape';
 import additionalProps from '../util/additionalProps';
 
+AreaClosed.propTypes = {
+  innerRef: PropTypes.func,
+};
+
 export default function AreaClosed({
   x,
   y,
@@ -16,6 +21,7 @@ export default function AreaClosed({
   stroke = 'black',
   fill = 'rgba(0,0,0,0.3)',
   curve,
+  innerRef,
   ...restProps
 }) {
   const path = area()
@@ -27,6 +33,7 @@ export default function AreaClosed({
   return (
     <g>
       <path
+        ref={innerRef}
         className={cx('vx-area-closed', className)}
         d={path(data)}
         stroke={stroke}

packages/vx-shape/src/shapes/Bar.js

@@ -1,9 +1,15 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import additionalProps from '../util/additionalProps';
 
-export default ({
+Bar.propTypes = {
+  innerRef: PropTypes.func,
+};
+
+export default function Bar({
   className,
+  innerRef,
   data,
   x = 0,
   y = 0,
@@ -21,9 +27,10 @@ export default ({
   strokeMiterlimit,
   strokeOpacity,
   ...restProps,
-}) => {
+}) {
   return (
     <rect
+      ref={innerRef}
       className={cx('vx-bar', className)}
       x={x}
       y={y}

packages/vx-shape/src/shapes/Line.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { Point } from '@vx/point';
 import additionalProps from '../util/additionalProps';
 
+Line.propTypes = {
+  innerRef: PropTypes.func,
+};
+
 export default function Line({
   from = new Point({ x: 0, y: 0 }),
   to = new Point({ x: 1, y: 1 }),
@@ -12,10 +17,12 @@ export default function Line({
   transform = '',
   className = '',
   data,
+  innerRef,
   ...restProps
 }) {
   return (
     <line
+      ref={innerRef}
       className={cx('vx-line', className)}
       x1={from.x}
       y1={from.y}

packages/vx-shape/src/shapes/LinePath.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { line } from 'd3-shape';
 import { curveLinear } from '@vx/curve';
 import additionalProps from '../util/additionalProps';
 
+LinePath.propTypes = {
+  innerRef: PropTypes.func,
+};
+
 export default function LinePath({
   data,
   xScale,
@@ -19,6 +24,7 @@ export default function LinePath({
   fill = 'none',
   curve = curveLinear,
   glyph,
+  innerRef,
   ...restProps
 }) {
   const path = line()
@@ -29,6 +35,7 @@ export default function LinePath({
   return (
     <g>
       <path
+        ref={innerRef}
         className={cx('vx-linepath', className)}
         d={path(data)}
         stroke={stroke}
@@ -38,10 +45,9 @@ export default function LinePath({
         fill={fill}
         {...additionalProps(restProps, data)}
       />
-      {glyph &&
-        <g className="vx-linepath-glyphs">
-          {data.map(glyph)}
-        </g>}
+      {glyph && (
+        <g className="vx-linepath-glyphs">{data.map(glyph)}</g>
+      )}
     </g>
   );
 }

packages/vx-shape/src/shapes/LineRadial.js

@@ -1,15 +1,21 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { radialLine } from 'd3-shape';
 import additionalProps from '../util/additionalProps';
 
+LineRadial.propTypes = {
+  innerRef: PropTypes.func,
+};
+
 export default function LineRadial({
   className = '',
   angle,
   radius,
   defined,
   curve,
   data,
+  innerRef,
   ...restProps
 }) {
   const path = radialLine();
@@ -20,10 +26,11 @@ export default function LineRadial({
   return (
     <g>
       <path
+        ref={innerRef}
         className={cx('vx-line-radial', className)}
         d={path(data)}
         {...additionalProps(restProps, data)}
       />
     </g>
   );
-}
+}

packages/vx-shape/src/shapes/LinkHorizontal.js

@@ -1,23 +1,30 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { linkHorizontal } from 'd3-shape';
 import additionalProps from '../util/additionalProps';
 
+LinkHorizontal.propTypes = {
+  innerRef: PropTypes.func,
+};
+
 export default function LinkHorizontal({
   className,
+  innerRef,
   data,
   x = d => d.y,
   y = d => d.x,
   ...restProps
 }) {
-  const link = linkHorizontal()
+  const link = linkHorizontal();
   link.x(x);
   link.y(y);
   return (
     <path
+      ref={innerRef}
       className={cx('vx-link-horizontal', className)}
       d={link(data)}
       {...additionalProps(restProps, data)}
     />
   );
-}
+}

packages/vx-shape/src/shapes/LinkVertical.js

@@ -1,23 +1,30 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { linkVertical } from 'd3-shape';
 import additionalProps from '../util/additionalProps';
 
+LinkVertical.propTypes = {
+  innerRef: PropTypes.func,
+};
+
 export default function LinkVertical({
   className,
+  innerRef,
   data,
   x = d => d.x,
   y = d => d.y,
   ...restProps
 }) {
-  const link = linkVertical()
+  const link = linkVertical();
   link.x(x);
   link.y(y);
   return (
     <path
+      ref={innerRef}
       className={cx('vx-link-vertical', className)}
       d={link(data)}
       {...additionalProps(restProps, data)}
     />
   );
-}
+}

packages/vx-shape/test/AreaClosed.test.js

@@ -1,22 +1,23 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { extent, max } from "d3-array";
-import { AreaClosed } from "../src";
-import { appleStock } from "../../vx-mock-data";
-import { scaleTime, scaleLinear } from "../../vx-scale";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+import { extent, max } from 'd3-array';
+import { AreaClosed } from '../src';
+import { appleStock } from '../../vx-mock-data';
+import { scaleTime, scaleLinear } from '../../vx-scale';
 
 const xStock = d => new Date(d.date);
 const yStock = d => d.close;
 
 const fakeXScale = scaleTime({
   range: [0, 100],
-  domain: extent(appleStock, xStock)
+  domain: extent(appleStock, xStock),
 });
 
 const fakeYScale = scaleLinear({
   range: [100, 0],
   domain: [0, max(appleStock, yStock)],
-  nice: true
+  nice: true,
 });
 
 const AreaClosedWrapper = ({ ...restProps }) =>
@@ -28,15 +29,38 @@ const AreaClosedWrapper = ({ ...restProps }) =>
       x={xStock}
       y={yStock}
       {...restProps}
-    />
+    />,
   );
 
-describe("<AreaClosed />", () => {
-  test("it should be defined", () => {
+describe('<AreaClosed />', () => {
+  test('it should be defined', () => {
     expect(AreaClosed).toBeDefined();
   });
 
-  test("it should have the .vx-area-closed class", () => {
-    expect(AreaClosedWrapper().find('path').prop("className")).toBe("vx-area-closed");
+  test('it should have the .vx-area-closed class', () => {
+    expect(
+      AreaClosedWrapper()
+        .find('path')
+        .prop('className'),
+    ).toBe('vx-area-closed');
+  });
+
+  test('it should expose its ref via an innerRef prop', done => {
+    const node = document.createElement('div');
+    const refCallback = n => {
+      expect(n.tagName).toEqual('PATH');
+      done();
+    };
+    ReactDOM.render(
+      <AreaClosed
+        data={appleStock}
+        xScale={fakeXScale}
+        yScale={fakeYScale}
+        x={xStock}
+        y={yStock}
+        innerRef={refCallback}
+      />,
+      node,
+    );
   });
 });

packages/vx-shape/test/Bar.test.js

@@ -1,7 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import { Bar } from '../src';
 
 describe('<Bar />', () => {
   test('it should be defined', () => {
-    expect(Bar).toBeDefined()
-  })
-})
+    expect(Bar).toBeDefined();
+  });
+
+  test('it should expose its ref via an innerRef prop', done => {
+    const node = document.createElement('div');
+    const refCallback = n => {
+      expect(n.tagName).toEqual('RECT');
+      done();
+    };
+    ReactDOM.render(<Bar innerRef={refCallback} />, node);
+  });
+});

packages/vx-shape/test/Line.test.js

@@ -1,19 +1,30 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Line } from "../src";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+import { Line } from '../src';
 
-const LineWrapper = ({ ...restProps }) => shallow(<Line {...restProps} />);
+const LineWrapper = ({ ...restProps }) =>
+  shallow(<Line {...restProps} />);
 
-describe("<Line />", () => {
-  test("it should be defined", () => {
+describe('<Line />', () => {
+  test('it should be defined', () => {
     expect(Line).toBeDefined();
   });
 
-  test("it should contain a <line/>", () => {
-    expect(LineWrapper().find("line").length).toBe(1);
+  test('it should contain a <line/>', () => {
+    expect(LineWrapper().find('line').length).toBe(1);
   });
 
-  test("it should have the .vx-line class", () => {
-    expect(LineWrapper().prop("className")).toBe("vx-line");
+  test('it should have the .vx-line class', () => {
+    expect(LineWrapper().prop('className')).toBe('vx-line');
+  });
+
+  test('it should expose its ref via an innerRef prop', done => {
+    const node = document.createElement('div');
+    const refCallback = n => {
+      expect(n.tagName).toEqual('LINE');
+      done();
+    };
+    ReactDOM.render(<Line innerRef={refCallback} />, node);
   });
 });