Update: Tree picker node component to support child nodes

Adslot · Nov 21, 2016 · 049b353 · 049b353
1 parent 09d9e7e
commit 049b353
Show file tree

Hide file tree

Showing 8 changed files with 11,596 additions and 12,452 deletions.
diff --git a/dist/adslot-ui-main-ugly.js b/dist/adslot-ui-main-ugly.js
diff --git a/dist/adslot-ui-main.js b/dist/adslot-ui-main.js
diff --git a/dist/adslot-ui.css b/dist/adslot-ui.css
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -128,7 +128,7 @@ class AppComponent extends React.Component {
       treePickerPureSubtree: [],
       selectedNodes: [
         { id: '2', label: 'Norfolk Island', path: [{ id: '11', label: 'AU' }], type: '', isSelectable: false },
-        { id: '3', label: 'Queensland', path: [{ id: '12', label: 'AU' }], type: '' },
+        { id: '3', label: 'Queensland', path: [{ id: '12', label: 'AU' }], type: '', isChildNode: true },
       ],
       searchBarString: '',
     };

diff --git a/src/components/adslotUi/TreePickerNodeComponent.jsx b/src/components/adslotUi/TreePickerNodeComponent.jsx
@@ -58,7 +58,13 @@ const TreePickerNodeComponent = ({
 
   return (
     <div className={`${baseClass}`}>
-      <GridRow dts={`${_.kebabCase(itemType)}-${node.id}`}>
+      <GridRow dts={`${_.kebabCase(itemType)}-${node.id}`} >
+        {node.isChildNode ?
+          <GridCell>
+            <div className="child-node-indent-spacer" />
+          </GridCell>
+        : null
+        }
         {selected ?
           <GridCell classSuffixes={['button']} dts="button-remove">
             <Button

diff --git a/src/helpers/propTypes/TreePickerPropTypes.js b/src/helpers/propTypes/TreePickerPropTypes.js
@@ -14,6 +14,7 @@ export default {
     ).isRequired,
     type: PropTypes.string.isRequired,
     value: PropTypes.number,
+    isChildNode: PropTypes.bool,
   }),
   breadCrumbNode: PropTypes.shape({
     id: PropTypes.string.isRequired,

diff --git a/src/styles/adslotUi/TreePickerNode.scss b/src/styles/adslotUi/TreePickerNode.scss
@@ -33,4 +33,8 @@
       width: $button-size;
     }
   }
+
+  .child-node-indent-spacer {
+    padding-left: 20px;
+  }
 }
diff --git a/test/components/adslotUi/TreePickerNodeComponentTest.jsx b/test/components/adslotUi/TreePickerNodeComponentTest.jsx
@@ -127,7 +127,7 @@ describe('TreePickerNodeComponent', () => {
     />);
 
     const rowElement = component.find({ dts: `${_.kebabCase(itemType)}-${cbrNode.id}` });
-    const valueCellElement = rowElement.prop('children')[3];
+    const valueCellElement = rowElement.prop('children')[4];
     expect(valueCellElement.props.children).to.equal('€20');
   });
 
@@ -138,11 +138,23 @@ describe('TreePickerNodeComponent', () => {
     const component = shallow(<TreePickerNodeComponent {...props} />);
 
     const rowElement = component.find({ dts: `${_.kebabCase(itemType)}-${cbrNode.id}` });
-    expect(rowElement.prop('children')).to.have.length(5);
-    const valueCellElement = rowElement.prop('children')[3];
+    expect(rowElement.prop('children')).to.have.length(6);
+    const valueCellElement = rowElement.prop('children')[4];
     expect(valueCellElement).to.be.a('null');
   });
 
+  it('should have the child node cell for child nodes', () => {
+    const node = _.clone(cbrNode);
+    node.isChildNode = true;
+    const props = { itemType, node };
+    const component = shallow(<TreePickerNodeComponent {...props} />);
+
+    const rowElement = component.find({ dts: `${_.kebabCase(itemType)}-${cbrNode.id}` });
+    const cellElements = rowElement.find(GridCell);
+    const childCellElement = cellElements.first();
+    expect(childCellElement.children().prop('className')).to.equal('child-node-indent-spacer');
+  });
+
   it('should fire expandNode when clicking on the `expand` cell', () => {
     const nodes = [];
     const expandNode = (node) => nodes.push(node);