Update: Tree picker node component to support child nodes

Adslot · Nov 21, 2016 · 7fa3a61 · 7fa3a61
1 parent 09d9e7e
commit 7fa3a61
Show file tree

Hide file tree

Showing 8 changed files with 8,298 additions and 9,165 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
@@ -57,8 +57,8 @@ const TreePickerNodeComponent = ({
   const labelCellProps = expanderElement ? { onClick: expandNodeBound } : {};
 
   return (
-    <div className={`${baseClass}`}>
-      <GridRow dts={`${_.kebabCase(itemType)}-${node.id}`}>
+    <div className={node.isChildNode ? `${baseClass} child-node` : `${baseClass}`}>
+      <GridRow dts={`${_.kebabCase(itemType)}-${node.id}`} >
         {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,11 @@
       width: $button-size;
     }
   }
+
+}
+
+.child-node {
+  .grid-component-row {
+    padding-left: 30px;
+  }
 }
diff --git a/test/components/adslotUi/TreePickerNodeComponentTest.jsx b/test/components/adslotUi/TreePickerNodeComponentTest.jsx
@@ -143,6 +143,15 @@ describe('TreePickerNodeComponent', () => {
     expect(valueCellElement).to.be.a('null');
   });
 
+  it('should have the child node class for child nodes', () => {
+    const node = _.clone(cbrNode);
+    node.isChildNode = true;
+    const props = { itemType, node };
+    const component = shallow(<TreePickerNodeComponent {...props} />);
+
+    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);