fix: treat node with empty children as leaf (#408)

Author: zhouhao

src/Node/index.test.js

@@ -71,16 +71,27 @@ describe('<Node />', () => {
     ).toBe(data.__rd3t.id);
   });
 
-  it('applies correct base className if `data.children` is defined', () => {
+  it('applies correct base className if `data.children` is defined and not empty', () => {
     const leafNodeComponent = shallow(<Node {...mockProps} />);
-    const nodeComponent = shallow(<Node {...mockProps} data={{ ...data, children: [] }} />);
+    const leafNodeComponentWithEmptyChildren = shallow(
+      <Node {...mockProps} data={{ ...data, children: [] }} />
+    );
+    const nodeComponent = shallow(
+      <Node {...mockProps} data={{ ...data, children: [{ name: 'leaf' }] }} />
+    );
 
     expect(
       leafNodeComponent
         .find('g')
         .first()
         .prop('className')
     ).toBe('rd3t-leaf-node');
+    expect(
+      leafNodeComponentWithEmptyChildren
+        .find('g')
+        .first()
+        .prop('className')
+    ).toBe('rd3t-leaf-node');
     expect(
       nodeComponent
         .find('g')

src/Node/index.tsx

@@ -173,7 +173,12 @@ export default class Node extends React.Component<NodeProps, NodeState> {
           this.nodeRef = n;
         }}
         style={this.state.initialStyle}
-        className={[data.children ? 'rd3t-node' : 'rd3t-leaf-node', nodeClassName].join(' ').trim()}
+        className={[
+          data.children && data.children.length > 0 ? 'rd3t-node' : 'rd3t-leaf-node',
+          nodeClassName,
+        ]
+          .join(' ')
+          .trim()}
         transform={this.state.transform}
       >
         {this.renderNodeElement()}