fix(network): string type in node/linkComponent (#1078)

* fix(network): string type in node/linkComponent * fix lint error * make example look nicer
airbnb · Feb 24, 2021 · f15ff55 · f15ff55
1 parent ab42223
commit f15ff55
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 11 deletions.
diff --git a/packages/visx-demo/src/sandboxes/visx-network/Example.tsx b/packages/visx-demo/src/sandboxes/visx-network/Example.tsx
@@ -1,21 +1,33 @@
 import React from 'react';
-import { Graph } from '@visx/network';
+import { DefaultNode, Graph } from '@visx/network';
 
 export type NetworkProps = {
   width: number;
   height: number;
 };
 
-const nodes = [
+interface CustomNode {
+  x: number;
+  y: number;
+  color?: string;
+}
+
+interface CustomLink {
+  source: CustomNode;
+  target: CustomNode;
+  dashed?: boolean;
+}
+
+const nodes: CustomNode[] = [
   { x: 50, y: 20 },
-  { x: 200, y: 300 },
-  { x: 300, y: 40 },
+  { x: 200, y: 250 },
+  { x: 300, y: 40, color: '#26deb0' },
 ];
 
-const links = [
+const links: CustomLink[] = [
   { source: nodes[0], target: nodes[1] },
   { source: nodes[1], target: nodes[2] },
-  { source: nodes[2], target: nodes[0] },
+  { source: nodes[2], target: nodes[0], dashed: true },
 ];
 
 const graph = {
@@ -29,7 +41,26 @@ export default function Example({ width, height }: NetworkProps) {
   return width < 10 ? null : (
     <svg width={width} height={height}>
       <rect width={width} height={height} rx={14} fill={background} />
-      <Graph graph={graph} />
+      <Graph<CustomLink, CustomNode>
+        graph={graph}
+        top={20}
+        left={100}
+        nodeComponent={({ node: { color } }) =>
+          color ? <DefaultNode fill={color} /> : <DefaultNode />
+        }
+        linkComponent={({ link: { source, target, dashed } }) => (
+          <line
+            x1={source.x}
+            y1={source.y}
+            x2={target.x}
+            y2={target.y}
+            strokeWidth={2}
+            stroke="#999"
+            strokeOpacity={0.6}
+            strokeDasharray={dashed ? '8,4' : undefined}
+          />
+        )}
+      />
     </svg>
   );
 }
diff --git a/packages/visx-network/src/Graph.tsx b/packages/visx-network/src/Graph.tsx
@@ -17,12 +17,10 @@ type Props<Link, Node> = {
   graph?: GraphType<Link, Node>;
   /** Component for rendering a single Link. */
   linkComponent?:
-    | string
     | React.FunctionComponent<LinkProvidedProps<Link>>
     | React.ComponentClass<LinkProvidedProps<Link>>;
   /** Component for rendering a single Node. */
   nodeComponent?:
-    | string
     | React.FunctionComponent<NodeProvidedProps<Node>>
     | React.ComponentClass<NodeProvidedProps<Node>>;
   /** Top transform offset to apply to links and nodes. */

diff --git a/packages/visx-network/src/Links.tsx b/packages/visx-network/src/Links.tsx
@@ -8,7 +8,6 @@ export type LinkProps<Link> = {
   links?: Link[];
   /** Component for rendering a single link. */
   linkComponent:
-    | string
     | React.FunctionComponent<LinkProvidedProps<Link>>
     | React.ComponentClass<LinkProvidedProps<Link>>;
   /** Classname to add to each link parent g element. */

diff --git a/packages/visx-network/src/Nodes.tsx b/packages/visx-network/src/Nodes.tsx
@@ -10,7 +10,6 @@ export type NodeProps<Node> = {
   nodes?: Node[];
   /** Component for rendering a single link. */
   nodeComponent:
-    | string
     | React.FunctionComponent<NodeProvidedProps<Node>>
     | React.ComponentClass<NodeProvidedProps<Node>>;
   /** Classname to add to each node parent g element. */