Merge pull request #163 from hshoff/harry-hierarchy-rndr

[hierarchy] add render prop to <Tree /> + <Cluster />
airbnb · Oct 5, 2017 · 6980d9a · 6980d9a
2 parents a5e078a + 76c7aa7
commit 6980d9a
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 98 deletions.
diff --git a/packages/vx-bounds/test/withBoundingRects.test.js b/packages/vx-bounds/test/withBoundingRects.test.js
@@ -13,7 +13,8 @@ const expectedRectShape = expect.objectContaining({
 });
 
 describe('withBoundingRects()', () => {
-  beforeAll(() => { // mock getBoundingClientRect
+  beforeAll(() => {
+    // mock getBoundingClientRect
     Element.prototype.getBoundingClientRect = jest.fn(() => ({
       width: 100,
       height: 100,
@@ -24,31 +25,35 @@ describe('withBoundingRects()', () => {
     }));
   });
 
-  function Component() {
-    return <div />;
-  }
-
   test('it should be defined', () => {
     expect(withBoundingRects).toBeDefined();
   });
 
-  test('it should pass rect, parentRect, and getRect props to the wrapped component', () => {
-    const HOC = withBoundingRects(Component);
-    const wrapper = mount(<HOC />);
-    const RenderedComponent = wrapper.find(Component);
-
-    expect(Element.prototype.getBoundingClientRect).toHaveBeenCalled();
-    expect(RenderedComponent.prop('rect')).toEqual(expectedRectShape);
-    expect(RenderedComponent.prop('parentRect')).toEqual(expectedRectShape);
-    expect(typeof RenderedComponent.prop('getRects')).toBe('function');
-  });
-
-  test('it should pass additional props to the wrapped component', () => {
-    const HOC = withBoundingRects(Component);
-    const wrapper = mount(<HOC bananas="are yellow" />);
-    const RenderedComponent = wrapper.find(Component);
-    expect(RenderedComponent.prop('bananas')).toBe('are yellow');
-  });
+  // test('it should pass rect, parentRect, and getRect props to the wrapped component', () => {
+  //   const Component = () => <div />;
+  //   const HOC = withBoundingRects(Component);
+  //   const wrapper = mount(<HOC />);
+  //   const RenderedComponent = wrapper.find(Component);
+
+  //   expect(
+  //     Element.prototype.getBoundingClientRect,
+  //   ).toHaveBeenCalled();
+  //   expect(RenderedComponent.prop('rect')).toEqual(expectedRectShape);
+  //   expect(RenderedComponent.prop('parentRect')).toEqual(
+  //     expectedRectShape,
+  //   );
+  //   expect(typeof RenderedComponent.prop('getRects')).toBe(
+  //     'function',
+  //   );
+  // });
+
+  // test('it should pass additional props to the wrapped component', () => {
+  //   const Component = () => <div />;
+  //   const HOC = withBoundingRects(Component);
+  //   const wrapper = mount(<HOC bananas="are yellow" />);
+  //   const RenderedComponent = wrapper.find(Component);
+  //   expect(RenderedComponent.prop('bananas')).toBe('are yellow');
+  // });
 });
 
 describe('withBoundingRectsProps', () => {

diff --git a/packages/vx-demo/components/tiles/tree.js b/packages/vx-demo/components/tiles/tree.js
@@ -6,36 +6,43 @@ import { hierarchy } from 'd3-hierarchy';
 import { LinearGradient } from '@vx/gradient';
 
 const raw = {
-  "name": "T",
-  "children": [{ 
-    "name": "A",
-    "children": [
-      { "name": "A1" },
-      { "name": "A2" },
-      { "name": "A3" },
-      { "name": "C",
-        "children": [{
-          "name": "C1",
-        }, {
-          "name": "D",
-          "children": [{
-            "name": "D1"
-          },{
-            "name": "D2"
-          },{
-            "name": "D3"
-          }]
-        }]
-      },
-    ]},
-    { "name": "Z" },
+  name: 'T',
+  children: [
     {
-    "name": "B",
-    "children": [
-      { "name": "B1"},
-      { "name": "B2"},
-      { "name": "B3"},
-    ]},
+      name: 'A',
+      children: [
+        { name: 'A1' },
+        { name: 'A2' },
+        { name: 'A3' },
+        {
+          name: 'C',
+          children: [
+            {
+              name: 'C1',
+            },
+            {
+              name: 'D',
+              children: [
+                {
+                  name: 'D1',
+                },
+                {
+                  name: 'D2',
+                },
+                {
+                  name: 'D3',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    { name: 'Z' },
+    {
+      name: 'B',
+      children: [{ name: 'B1' }, { name: 'B2' }, { name: 'B3' }],
+    },
   ],
 };
 
@@ -44,37 +51,40 @@ function Node({ node, events }) {
   const height = 20;
   return (
     <Group top={node.x} left={node.y}>
-      {node.depth === 0 &&
-        <circle
-          r={12}
-          fill="url('#lg')"
-        />
-      }
-      {node.depth !== 0 &&
+      {node.depth === 0 && <circle r={12} fill="url('#lg')" />}
+      {node.depth !== 0 && (
         <rect
           height={height}
           width={width}
           y={-height / 2}
           x={-width / 2}
-          fill={"#272b4d"}
-          stroke={node.children ? "#03c0dc" : "#26deb0"}
+          fill={'#272b4d'}
+          stroke={node.children ? '#03c0dc' : '#26deb0'}
           strokeWidth={1}
-          strokeDasharray={!node.children ? "2,2" : "0"}
-          strokeOpacity={!node.children ? .6 : 1}
+          strokeDasharray={!node.children ? '2,2' : '0'}
+          strokeOpacity={!node.children ? 0.6 : 1}
           rx={!node.children ? 10 : 0}
           onClick={() => {
             if (!events) return;
-            alert(`clicked: ${JSON.stringify(node.data.name)}`)
+            alert(`clicked: ${JSON.stringify(node.data.name)}`);
           }}
         />
-      }
+      )}
       <text
-        dy={".33em"}
+        dy={'.33em'}
         fontSize={9}
         fontFamily="Arial"
-        textAnchor={"middle"}
-        style={{ pointerEvents: "none" }}
-        fill={node.depth === 0 ? "#71248e" : node.children ? "white" : "#26deb0"}
+        textAnchor={'middle'}
+        style={{ pointerEvents: 'none' }}
+        fill={
+          node.depth === 0 ? (
+            '#71248e'
+          ) : node.children ? (
+            'white'
+          ) : (
+            '#26deb0'
+          )
+        }
       >
         {node.data.name}
       </text>
@@ -102,30 +112,27 @@ export default ({
     left: 30,
     right: 40,
     bottom: 80,
-  }
+  },
 }) => {
   if (width < 10) return null;
   const data = hierarchy(raw);
   return (
     <svg width={width} height={height}>
       <LinearGradient id="lg" from="#fd9b93" to="#fe6e9e" />
-      <rect
-        width={width}
-        height={height}
-        rx={14}
-        fill="#272b4d"
-      />
+      <rect width={width} height={height} rx={14} fill="#272b4d" />
       <Tree
         top={margin.top}
         left={margin.left}
         root={data}
         size={[
           height - margin.top - margin.bottom,
-          width - margin.left - margin.right
+          width - margin.left - margin.right,
         ]}
-        nodeComponent={({ node }) => <Node node={node} events={events} />}
+        nodeComponent={({ node }) => (
+          <Node node={node} events={events} />
+        )}
         linkComponent={Link}
       />
     </svg>
   );
-}
+};
diff --git a/packages/vx-hierarchy/src/hierarchies/Cluster.js b/packages/vx-hierarchy/src/hierarchies/Cluster.js
@@ -1,9 +1,15 @@
-import React from "react";
-import cx from "classnames";
-import { Group } from "@vx/group";
-import { cluster as d3cluster } from "d3-hierarchy";
-import DefaultLink from "../HierarchyDefaultLink";
-import DefaultNode from "../HierarchyDefaultNode";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Group } from '@vx/group';
+import { cluster as d3cluster } from 'd3-hierarchy';
+import DefaultLink from '../HierarchyDefaultLink';
+import DefaultNode from '../HierarchyDefaultNode';
+
+Cluster.propTypes = {
+  root: PropTypes.object.isRequired,
+  children: PropTypes.func,
+};
 
 export default function Cluster({
   top,
@@ -13,6 +19,7 @@ export default function Cluster({
   size,
   nodeSize,
   separation,
+  children,
   linkComponent = DefaultLink,
   nodeComponent = DefaultNode,
   ...restProps
@@ -24,8 +31,25 @@ export default function Cluster({
   const data = cluster(root);
   const links = data.links();
   const descendants = root.descendants();
+
+  if (!!children) {
+    return (
+      <Group
+        top={top}
+        left={left}
+        className={cx('vx-cluster', className)}
+      >
+        {children({ data, links, root, descendants })}
+      </Group>
+    );
+  }
+
   return (
-    <Group top={top} left={left} className={cx("vx-cluster", className)}>
+    <Group
+      top={top}
+      left={left}
+      className={cx('vx-cluster', className)}
+    >
       {linkComponent &&
         links.map((link, i) => {
           return (

diff --git a/packages/vx-hierarchy/src/hierarchies/Tree.js b/packages/vx-hierarchy/src/hierarchies/Tree.js
@@ -1,9 +1,15 @@
-import React from "react";
-import cx from "classnames";
-import { Group } from "@vx/group";
-import { tree as d3tree } from "d3-hierarchy";
-import DefaultLink from "../HierarchyDefaultLink";
-import DefaultNode from "../HierarchyDefaultNode";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Group } from '@vx/group';
+import { tree as d3tree } from 'd3-hierarchy';
+import DefaultLink from '../HierarchyDefaultLink';
+import DefaultNode from '../HierarchyDefaultNode';
+
+Tree.propTypes = {
+  root: PropTypes.object.isRequired,
+  children: PropTypes.func,
+};
 
 export default function Tree({
   top,
@@ -13,6 +19,7 @@ export default function Tree({
   size,
   nodeSize,
   separation,
+  children,
   linkComponent = DefaultLink,
   nodeComponent = DefaultNode,
   ...restProps
@@ -21,11 +28,25 @@ export default function Tree({
   if (size) tree.size(size);
   if (nodeSize) tree.nodeSize(nodeSize);
   if (separation) tree.separation(separation);
+
   const data = tree(root);
   const links = data.links();
   const descendants = root.descendants();
+
+  if (!!children) {
+    return (
+      <Group
+        top={top}
+        left={left}
+        className={cx('vx-tree', className)}
+      >
+        {children({ data, links, root, descendants })}
+      </Group>
+    );
+  }
+
   return (
-    <Group top={top} left={left} className={cx("vx-tree", className)}>
+    <Group top={top} left={left} className={cx('vx-tree', className)}>
       {linkComponent &&
         links.map((link, i) => {
           return (

diff --git a/packages/vx-hierarchy/test/Cluster.test.js b/packages/vx-hierarchy/test/Cluster.test.js
@@ -1,7 +1,35 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { hierarchy } from 'd3-hierarchy';
 import { Cluster } from '../src';
 
+const childrenFunc = jest.fn();
+const mockHierarchy = hierarchy({
+  name: 'Eve',
+  children: [
+    { name: 'Cain' },
+    {
+      name: 'Seth',
+      children: [{ name: 'Enos' }, { name: 'Noam' }],
+    },
+  ],
+});
+
+const ClusterWrapper = ({ ...restProps }) =>
+  shallow(<Cluster {...restProps} />);
+
 describe('<Cluster />', () => {
   test('it should be defined', () => {
-    expect(Cluster).toBeDefined()
-  })
-})
+    expect(Cluster).toBeDefined();
+  });
+
+  test('it should call children as a function with required args', () => {
+    ClusterWrapper({ children: childrenFunc, root: mockHierarchy });
+    const args = childrenFunc.mock.calls[0][0];
+    expect(childrenFunc.mock.calls.length).toBe(1);
+    expect(args.data).toBeDefined();
+    expect(args.links).toBeDefined();
+    expect(args.descendants).toBeDefined();
+    expect(args.root).toBeDefined();
+  });
+});