refactor(node): rename rd3tProps.data -> rd3tProps.nodeDatum

Author: bkrem

demo/src/App.js

@@ -24,17 +24,17 @@ const customNodeFnMapping = {
     description: 'PureSvgNodeElement - Pure SVG node & label (IE11 compatible)',
     fn: (rd3tProps, appState) => (
       <PureSvgNodeElement
-        nodeDatum={rd3tProps.data}
+        nodeDatum={rd3tProps.nodeDatum}
         toggleNode={rd3tProps.toggleNode}
         orientation={appState.orientation}
       />
     ),
   },
   mixed: {
     description: 'MixedNodeElement - SVG `circle` + `foreignObject` label',
-    fn: ({ data, toggleNode }, appState) => (
+    fn: ({ nodeDatum, toggleNode }, appState) => (
       <MixedNodeElement
-        nodeData={data}
+        nodeData={nodeDatum}
         triggerNodeToggle={toggleNode}
         foreignObjectProps={{
           width: appState.nodeSize.x,

src/Node/DefaultNodeElement.tsx

@@ -19,7 +19,7 @@ export interface DefaultNodeElementProps extends CustomNodeElementProps {
 }
 
 const DefaultNodeElement: React.FunctionComponent<DefaultNodeElementProps> = ({
-  data,
+  nodeDatum,
   toggleNode,
   onNodeClick,
   onNodeMouseOver,
@@ -37,11 +37,11 @@ const DefaultNodeElement: React.FunctionComponent<DefaultNodeElementProps> = ({
     ></circle>
     <g className="rd3t-label">
       <text className="rd3t-label__title" {...textLayout.title}>
-        {data.name}
+        {nodeDatum.name}
       </text>
       <text className="rd3t-label__attributes">
-        {data.attributes &&
-          Object.entries(data.attributes).map(([labelKey, labelValue], i) => (
+        {nodeDatum.attributes &&
+          Object.entries(nodeDatum.attributes).map(([labelKey, labelValue], i) => (
             <tspan key={`${labelKey}-${i}`} {...textLayout.attribute}>
               {labelKey}: {labelValue}
             </tspan>

src/Node/index.tsx

@@ -113,14 +113,15 @@ export default class Node extends React.Component<NodeProps, NodeState> {
     this.applyTransform(transform, transitionDuration);
   }
 
+  // TODO: needs tests
   renderNodeElement = () => {
     const { data, renderCustomNodeElement } = this.props;
     if (typeof renderCustomNodeElement === 'function') {
-      return renderCustomNodeElement({ data, toggleNode: this.handleNodeToggle });
+      return renderCustomNodeElement({ nodeDatum: data, toggleNode: this.handleNodeToggle });
     }
 
     return DefaultNodeElement({
-      data,
+      nodeDatum: data,
       toggleNode: this.handleNodeToggle,
       onNodeClick: this.handleOnClick,
       onNodeMouseOver: this.handleOnMouseOver,

src/types/common.ts

@@ -34,7 +34,7 @@ export type PathClassFunction = PathFunction;
 export type SyntheticEventHandler = (evt: React.SyntheticEvent) => void;
 
 export interface CustomNodeElementProps {
-  data: TreeNodeDatum;
+  nodeDatum: TreeNodeDatum;
   toggleNode: () => void;
 }