Update: Tree picker node component to support child nodes

Adslot · Dec 7, 2016 · 8e1c153 · 8e1c153
1 parent 8fc657a
commit 8e1c153
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -127,7 +127,7 @@ class AppComponent extends React.Component {
       ],
       treePickerPureSubtree: [],
       selectedNodes: [
-        { id: '2', label: 'Norfolk Island', path: [{ id: '11', label: 'AU' }], type: '', isSelectable: false },
+        { id: '2', label: 'Norfolk Island', path: [], type: '', isSelectable: false },
         { id: '3', label: 'Queensland', path: [{ id: '12', label: 'AU' }], type: '' },
       ],
       searchBarString: '',

diff --git a/src/components/adslotUi/TreePickerNodeComponent.jsx b/src/components/adslotUi/TreePickerNodeComponent.jsx
@@ -57,7 +57,7 @@ const TreePickerNodeComponent = ({
   const labelCellProps = expanderElement ? { onClick: expandNodeBound } : {};
 
   return (
-    <div className={`${baseClass}`}>
+    <div className={!_.isEmpty(node.path) || !_.isEmpty(node.ancestors) ? `${baseClass} child-node` : `${baseClass}`}>
       <GridRow dts={`${_.kebabCase(itemType)}-${node.id}`}>
         {selected ?
           <GridCell classSuffixes={['button']} dts="button-remove">

diff --git a/test/components/adslotUi/TreePickerNodeComponentTest.jsx b/test/components/adslotUi/TreePickerNodeComponentTest.jsx
@@ -11,7 +11,7 @@ describe('TreePickerNodeComponent', () => {
 
   it('should render a node with defaults', () => {
     const component = shallow(<TreePickerNodeComponent itemType={itemType} node={cbrNode} />);
-    expect(component.prop('className')).to.equal('treepickernode-component');
+    expect(component.prop('className')).to.equal('treepickernode-component child-node');
     expect(component.type()).to.equal('div');
 
     const rowElement = component.find(GridRow);
@@ -143,6 +143,16 @@ describe('TreePickerNodeComponent', () => {
     expect(valueCellElement).to.be.a('null');
   });
 
+  it('should not have the child node class for root nodes', () => {
+    const component = shallow(<TreePickerNodeComponent itemType={itemType} node={maleNode} />);
+    expect(component.prop('className')).to.equal('treepickernode-component');
+  });
+
+  it('should have the child node class for child nodes', () => {
+    const component = shallow(<TreePickerNodeComponent itemType={itemType} node={cbrNode} />);
+    expect(component.prop('className')).to.equal('treepickernode-component child-node');
+  });
+
   it('should fire expandNode when clicking on the `expand` cell', () => {
     const nodes = [];
     const expandNode = (node) => nodes.push(node);