TreeView updated.

canpolatoral · May 6, 2019 · e91722c · e91722c
1 parent 2535c6b
commit e91722c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 9 deletions.
diff --git a/packages/components/src/TreeView/TreeView.js b/packages/components/src/TreeView/TreeView.js
@@ -72,6 +72,11 @@ class TreeView extends ComponentBase {
      * Row height of the treeview nodes.
      */
     rowHeight: PropTypes.oneOfType([PropTypes.number]),
+
+    /**
+     * If `false`, the parent node hasn't icon.
+     */
+    showFolderIcon: PropTypes.bool,
     /**
      * If `true`, footer of the treeview is visible.
      */
@@ -88,6 +93,7 @@ class TreeView extends ComponentBase {
      * Width of the treeview.
      */
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   };
 
   static defaultProps = {
@@ -104,6 +110,7 @@ class TreeView extends ComponentBase {
     showIcons: true,
     showSearch: true,
     canCheckChildsByParent: true,
+    showFolderIcon: true,
   };
 
   state = {
@@ -239,6 +246,8 @@ class TreeView extends ComponentBase {
         {this.props.showIcons && (
           <NodeIcon
             state={toggleState}
+            hasChildren={hasChildren}
+            showFolderIcon={this.props.showFolderIcon}
             context={this.props.context}
             icon={node.icon}
             rowHeight={this.props.rowHeight}
@@ -274,8 +283,8 @@ class TreeView extends ComponentBase {
               </span>
             </span>
           ) : (
-            this.highlightSearchTerm(node)
-          )}
+              this.highlightSearchTerm(node)
+            )}
         </span>
       </TreeNode>
     );
@@ -285,7 +294,7 @@ class TreeView extends ComponentBase {
     // eslint-disable-next-line max-len
     return `<span style="color: ${
       this.props.context.theme.boaPalette.pri500
-    }; background-color: #b618ce29">${match}</span>`;
+      }; background-color: #b618ce29">${match}</span>`;
   }
 
   highlightSearchTerm(node) {

diff --git a/packages/components/src/TreeView/components/NodeIcon.js b/packages/components/src/TreeView/components/NodeIcon.js
@@ -33,17 +33,19 @@ class NodeIcon extends ComponentBase {
       content = this.props.icon;
     } else if (this.props.icon) {
       content = Icon.getIcon(this.props.icon);
-    } else {
+    } else if (this.props.hasChildren && this.props.showFolderIcon) {
       content = (
         <div>
           {{
             opened: <FolderOpen style={{ color: this.props.context.theme.boaPalette.pri500 }} />,
             closed: <FolderSpecial style={{ color: this.props.context.theme.boaPalette.pri500 }} />,
           }[this.props.state] || (
-            <FolderSpecial style={{ color: this.props.context.theme.boaPalette.pri500 }} />
-          )}
+              <FolderSpecial style={{ color: this.props.context.theme.boaPalette.pri500 }} />
+            )}
         </div>
       );
+    } else {
+      content = (<div />);
     }
     return <div style={this.getStyle()}>{content}</div>;
   }

diff --git a/packages/components/src/TreeView/components/NodeIcon.test.js b/packages/components/src/TreeView/components/NodeIcon.test.js
@@ -30,7 +30,13 @@ describe('TreeView:NodeIcon', () => {
   });
 
   it('should render opened', () => {
-    const wrapper = shallow(<NodeIcon state="opened" context={context} rowHeight={10} />);
+    const wrapper = shallow(
+      <NodeIcon
+        state="opened"
+        context={context}
+        rowHeight={10}
+        showFolderIcon
+        hasChildren />);
     assert.strictEqual(
       wrapper
         .childAt(0)
@@ -41,7 +47,13 @@ describe('TreeView:NodeIcon', () => {
   });
 
   it('should render closed', () => {
-    const wrapper = shallow(<NodeIcon state="closed" context={context} rowHeight={10} />);
+    const wrapper = shallow(
+      <NodeIcon
+        state="closed"
+        context={context}
+        rowHeight={10}
+        showFolderIcon
+        hasChildren />);
     assert.strictEqual(
       wrapper
         .childAt(0)
@@ -52,7 +64,12 @@ describe('TreeView:NodeIcon', () => {
   });
 
   it('should render default', () => {
-    const wrapper = shallow(<NodeIcon context={context} rowHeight={10} />);
+    const wrapper = shallow(
+      <NodeIcon
+        context={context}
+        rowHeight={10}
+        showFolderIcon
+        hasChildren />);
     assert.strictEqual(
       wrapper
         .childAt(0)
@@ -62,6 +79,22 @@ describe('TreeView:NodeIcon', () => {
     );
   });
 
+
+  it('should render noFolderIcon', () => {
+    const wrapper = shallow(
+      <NodeIcon
+        context={context}
+        rowHeight={10}
+        showFolderIcon={false}
+        hasChildren={false} />);
+    assert.strictEqual(
+      wrapper
+        .childAt(0)
+        .type(),
+      'div',
+    );
+  });
+
   it('should render dynamicIcon', () => {
     const wrapper = shallow(
       <NodeIcon context={context} icon={{ dynamicIcon: 'Home' }} rowHeight={10} />,

diff --git a/stories/TreeView/doc.json b/stories/TreeView/doc.json
@@ -173,6 +173,17 @@
 				"computed": false
 			}
 		},
+		"showFolderIcon": {
+			"type": {
+				"name": "bool"
+			},
+			"required": false,
+			"description": "If `false`, the parent node hasn't icon.",
+			"defaultValue": {
+				"value": true,
+				"computed": true
+			}
+		},
 		"footerStyle": {
 			"type": {
 				"name": "object"