From 899ce73effba0404662db6ed2b93789cc36ec7f7 Mon Sep 17 00:00:00 2001
From: Fabian Nickel <fabian.nickel@fu-berlin.de>
Date: Wed, 7 Nov 2018 18:54:23 +0100
Subject: [PATCH 1/8] add a path of values

---
 src/components/MuiTreeView/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MuiTreeView/index.jsx b/src/components/MuiTreeView/index.jsx
index bc780bf..e91030c 100644
--- a/src/components/MuiTreeView/index.jsx
+++ b/src/components/MuiTreeView/index.jsx
@@ -106,7 +106,7 @@ class MuiTreeView extends Component {
     }
   };
 
-  renderNode = (node, parent, depth = 0) => {
+  renderNode = (node, parent, depth = 0, fullPath = []) => {
     const {
       theme: {
         spacing: { unit },
@@ -173,7 +173,7 @@ class MuiTreeView extends Component {
           {...expansionPanelDetailsProps}
           classes={{ root: classes.panelDetails }}
           className={classNames(pickClassName(expansionPanelDetailsProps))}>
-          {node.nodes.map(l => this.renderNode(l, node, depth + 1))}
+          {node.nodes.map(l => this.renderNode(l, node, depth + 1, currentPath))}
         </ExpansionPanelDetails>
       </ExpansionPanel>
     );

From 707a36c8346889037fc3e77d822320c7f0ce6484 Mon Sep 17 00:00:00 2001
From: Fabian Nickel <fabian.nickel@fu-berlin.de>
Date: Wed, 7 Nov 2018 18:58:06 +0100
Subject: [PATCH 2/8] fix linter error

---
 src/components/MuiTreeView/index.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/MuiTreeView/index.jsx b/src/components/MuiTreeView/index.jsx
index e91030c..ce7d32d 100644
--- a/src/components/MuiTreeView/index.jsx
+++ b/src/components/MuiTreeView/index.jsx
@@ -173,7 +173,9 @@ class MuiTreeView extends Component {
           {...expansionPanelDetailsProps}
           classes={{ root: classes.panelDetails }}
           className={classNames(pickClassName(expansionPanelDetailsProps))}>
-          {node.nodes.map(l => this.renderNode(l, node, depth + 1, currentPath))}
+          {node.nodes.map(l =>
+            this.renderNode(l, node, depth + 1, currentPath)
+          )}
         </ExpansionPanelDetails>
       </ExpansionPanel>
     );

From 1d6ac39c2109b8271f6e20f4ad9e6d87ade3a5ef Mon Sep 17 00:00:00 2001
From: Fabian Nickel <fabian.nickel@fu-berlin.de>
Date: Wed, 7 Nov 2018 19:29:09 +0100
Subject: [PATCH 3/8] add a highlight for a given path

---
 src/components/MuiTreeView/index.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/MuiTreeView/index.jsx b/src/components/MuiTreeView/index.jsx
index ce7d32d..6e3da5a 100644
--- a/src/components/MuiTreeView/index.jsx
+++ b/src/components/MuiTreeView/index.jsx
@@ -63,6 +63,9 @@ const styles = theme => ({
     maxWidth: '75vw',
   },
   expandIcon: {},
+  highlightItem: {
+    backgroundColor: 'rgb(220, 227, 239)',
+  },
 });
 
 /**
@@ -82,6 +85,8 @@ class MuiTreeView extends Component {
     expansionPanelDetailsProps: object,
     /** Properties applied to the ListItem element. */
     listItemProps: object,
+    /** Value path for some leaf to highlight */
+    highlightItem: arrayOf(string),
   };
 
   static defaultProps = {
@@ -90,6 +95,7 @@ class MuiTreeView extends Component {
     expansionPanelSummaryProps: null,
     expansionPanelDetailsProps: null,
     listItemProps: null,
+    highlightItem: null,
   };
 
   createFilteredTree = memoize(
@@ -117,6 +123,7 @@ class MuiTreeView extends Component {
       expansionPanelSummaryProps,
       expansionPanelDetailsProps,
       listItemProps,
+      highlightItem,
       ...props
     } = this.props;
     const value = this.getNodeValue(node);
@@ -131,6 +138,14 @@ class MuiTreeView extends Component {
     }
 
     if (isLeaf) {
+      let isHighlighted = false;
+
+      if (highlightItem) {
+        if (JSON.stringify(currentPath) === JSON.stringify(highlightItem)) {
+          isHighlighted = true;
+        }
+      }
+
       return (
         <ListItem
           disableGutters
@@ -140,6 +155,7 @@ class MuiTreeView extends Component {
           value={value}
           onClick={() => this.handleLeafClick({ value, parent, id })}
           button
+          classes={isHighlighted ? { root: classes.highlightItem } : {}}
           {...listItemProps}>
           <div className={classes.text}>{value}</div>
         </ListItem>

From 38b10b1adb4f781cd5e42ff44669bec17f97d819 Mon Sep 17 00:00:00 2001
From: Fabian Nickel <fabian.nickel@fu-berlin.de>
Date: Fri, 9 Nov 2018 09:51:39 +0100
Subject: [PATCH 4/8] add node jd

---
 src/components/MuiTreeView/index.jsx | 34 ++++++++++++++++------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/MuiTreeView/index.jsx b/src/components/MuiTreeView/index.jsx
index 6e3da5a..7bfb997 100644
--- a/src/components/MuiTreeView/index.jsx
+++ b/src/components/MuiTreeView/index.jsx
@@ -1,4 +1,5 @@
 import { Component } from 'react';
+<<<<<<< 1d6ac39c2109b8271f6e20f4ad9e6d87ade3a5ef
 import {
   arrayOf,
   shape,
@@ -8,6 +9,9 @@ import {
   oneOfType,
   object,
 } from 'prop-types';
+=======
+import { arrayOf, shape, number, string, func, oneOfType, object } from 'prop-types';
+>>>>>>> add node jd
 import classNames from 'classnames';
 import { prop } from 'ramda';
 import memoize from 'fast-memoize';
@@ -23,8 +27,12 @@ const pickClassName = prop('className');
 const tree = {
   // The node value.
   value: string.isRequired,
+<<<<<<< 1d6ac39c2109b8271f6e20f4ad9e6d87ade3a5ef
   // Optional node ID. Useful for when the node value is not unique.
   id: oneOfType([string, number]),
+=======
+  id: oneOfType[string, number],
+>>>>>>> add node jd
 };
 
 Object.assign(tree, {
@@ -85,8 +93,8 @@ class MuiTreeView extends Component {
     expansionPanelDetailsProps: object,
     /** Properties applied to the ListItem element. */
     listItemProps: object,
-    /** Value path for some leaf to highlight */
-    highlightItem: arrayOf(string),
+    /** Id of a leaf which will be highlighted by adding the class  */
+    highlightId: oneOfType[string, number],
   };
 
   static defaultProps = {
@@ -95,7 +103,7 @@ class MuiTreeView extends Component {
     expansionPanelSummaryProps: null,
     expansionPanelDetailsProps: null,
     listItemProps: null,
-    highlightItem: null,
+    highlightId: null,
   };
 
   createFilteredTree = memoize(
@@ -106,13 +114,17 @@ class MuiTreeView extends Component {
     }
   );
 
+<<<<<<< 1d6ac39c2109b8271f6e20f4ad9e6d87ade3a5ef
   handleLeafClick = leaf => {
+=======
+  handleLeafClick = (leaf) => {
+>>>>>>> add node jd
     if (this.props.onLeafClick) {
       this.props.onLeafClick(leaf);
     }
   };
 
-  renderNode = (node, parent, depth = 0, fullPath = []) => {
+  renderNode = (node, parent, depth = 0) => {
     const {
       theme: {
         spacing: { unit },
@@ -123,7 +135,7 @@ class MuiTreeView extends Component {
       expansionPanelSummaryProps,
       expansionPanelDetailsProps,
       listItemProps,
-      highlightItem,
+      highlightId,
       ...props
     } = this.props;
     const value = this.getNodeValue(node);
@@ -138,14 +150,6 @@ class MuiTreeView extends Component {
     }
 
     if (isLeaf) {
-      let isHighlighted = false;
-
-      if (highlightItem) {
-        if (JSON.stringify(currentPath) === JSON.stringify(highlightItem)) {
-          isHighlighted = true;
-        }
-      }
-
       return (
         <ListItem
           disableGutters
@@ -155,7 +159,7 @@ class MuiTreeView extends Component {
           value={value}
           onClick={() => this.handleLeafClick({ value, parent, id })}
           button
-          classes={isHighlighted ? { root: classes.highlightItem } : {}}
+          classes={highlightId === id ? { root: classes.highlightItem } : {}}
           {...listItemProps}>
           <div className={classes.text}>{value}</div>
         </ListItem>
@@ -190,7 +194,7 @@ class MuiTreeView extends Component {
           classes={{ root: classes.panelDetails }}
           className={classNames(pickClassName(expansionPanelDetailsProps))}>
           {node.nodes.map(l =>
-            this.renderNode(l, node, depth + 1, currentPath)
+            this.renderNode(l, node, depth + 1)
           )}
         </ExpansionPanelDetails>
       </ExpansionPanel>

From 153b6f341c92149cb0559a31b8a6a0623d4895f6 Mon Sep 17 00:00:00 2001
From: Fabian Nickel <fabian.nickel@fu-berlin.de>
Date: Fri, 9 Nov 2018 11:18:07 +0100
Subject: [PATCH 5/8] highlight

---
 src/components/MuiTreeView/README.md |  4 ++++
 src/components/MuiTreeView/index.jsx | 20 +++-----------------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/components/MuiTreeView/README.md b/src/components/MuiTreeView/README.md
index 6274b96..b15a2d6 100644
--- a/src/components/MuiTreeView/README.md
+++ b/src/components/MuiTreeView/README.md
@@ -13,7 +13,11 @@ const tree = [
       {
         value: 'Parent C',
         nodes: [
+<<<<<<< 38b10b1adb4f781cd5e42ff44669bec17f97d819
           { value: 'Child D', id: 'example-id' },
+=======
+          { value: 'Child D', id: 'test' },
+>>>>>>> highlight
           { value: 'Child E' },
           { value: 'Child F' },
         ],
diff --git a/src/components/MuiTreeView/index.jsx b/src/components/MuiTreeView/index.jsx
index 7bfb997..37fd44c 100644
--- a/src/components/MuiTreeView/index.jsx
+++ b/src/components/MuiTreeView/index.jsx
@@ -1,5 +1,4 @@
 import { Component } from 'react';
-<<<<<<< 1d6ac39c2109b8271f6e20f4ad9e6d87ade3a5ef
 import {
   arrayOf,
   shape,
@@ -9,9 +8,6 @@ import {
   oneOfType,
   object,
 } from 'prop-types';
-=======
-import { arrayOf, shape, number, string, func, oneOfType, object } from 'prop-types';
->>>>>>> add node jd
 import classNames from 'classnames';
 import { prop } from 'ramda';
 import memoize from 'fast-memoize';
@@ -27,12 +23,8 @@ const pickClassName = prop('className');
 const tree = {
   // The node value.
   value: string.isRequired,
-<<<<<<< 1d6ac39c2109b8271f6e20f4ad9e6d87ade3a5ef
   // Optional node ID. Useful for when the node value is not unique.
   id: oneOfType([string, number]),
-=======
-  id: oneOfType[string, number],
->>>>>>> add node jd
 };
 
 Object.assign(tree, {
@@ -72,7 +64,7 @@ const styles = theme => ({
   },
   expandIcon: {},
   highlightItem: {
-    backgroundColor: 'rgb(220, 227, 239)',
+    backgroundColor: 'rgb(138, 138, 138)',
   },
 });
 
@@ -94,7 +86,7 @@ class MuiTreeView extends Component {
     /** Properties applied to the ListItem element. */
     listItemProps: object,
     /** Id of a leaf which will be highlighted by adding the class  */
-    highlightId: oneOfType[string, number],
+    highlightId: oneOfType[(string, number)],
   };
 
   static defaultProps = {
@@ -114,11 +106,7 @@ class MuiTreeView extends Component {
     }
   );
 
-<<<<<<< 1d6ac39c2109b8271f6e20f4ad9e6d87ade3a5ef
   handleLeafClick = leaf => {
-=======
-  handleLeafClick = (leaf) => {
->>>>>>> add node jd
     if (this.props.onLeafClick) {
       this.props.onLeafClick(leaf);
     }
@@ -193,9 +181,7 @@ class MuiTreeView extends Component {
           {...expansionPanelDetailsProps}
           classes={{ root: classes.panelDetails }}
           className={classNames(pickClassName(expansionPanelDetailsProps))}>
-          {node.nodes.map(l =>
-            this.renderNode(l, node, depth + 1)
-          )}
+          {node.nodes.map(l => this.renderNode(l, node, depth + 1))}
         </ExpansionPanelDetails>
       </ExpansionPanel>
     );

From 4c5ad3cc8601cc23f9af44e54af70b4163e52670 Mon Sep 17 00:00:00 2001
From: Fabian Nickel <fabian.nickel@fu-berlin.de>
Date: Fri, 9 Nov 2018 11:21:41 +0100
Subject: [PATCH 6/8] implement node id

---
 src/components/MuiTreeView/README.md | 4 ----
 src/components/MuiTreeView/index.jsx | 8 --------
 2 files changed, 12 deletions(-)

diff --git a/src/components/MuiTreeView/README.md b/src/components/MuiTreeView/README.md
index b15a2d6..6274b96 100644
--- a/src/components/MuiTreeView/README.md
+++ b/src/components/MuiTreeView/README.md
@@ -13,11 +13,7 @@ const tree = [
       {
         value: 'Parent C',
         nodes: [
-<<<<<<< 38b10b1adb4f781cd5e42ff44669bec17f97d819
           { value: 'Child D', id: 'example-id' },
-=======
-          { value: 'Child D', id: 'test' },
->>>>>>> highlight
           { value: 'Child E' },
           { value: 'Child F' },
         ],
diff --git a/src/components/MuiTreeView/index.jsx b/src/components/MuiTreeView/index.jsx
index 37fd44c..bc780bf 100644
--- a/src/components/MuiTreeView/index.jsx
+++ b/src/components/MuiTreeView/index.jsx
@@ -63,9 +63,6 @@ const styles = theme => ({
     maxWidth: '75vw',
   },
   expandIcon: {},
-  highlightItem: {
-    backgroundColor: 'rgb(138, 138, 138)',
-  },
 });
 
 /**
@@ -85,8 +82,6 @@ class MuiTreeView extends Component {
     expansionPanelDetailsProps: object,
     /** Properties applied to the ListItem element. */
     listItemProps: object,
-    /** Id of a leaf which will be highlighted by adding the class  */
-    highlightId: oneOfType[(string, number)],
   };
 
   static defaultProps = {
@@ -95,7 +90,6 @@ class MuiTreeView extends Component {
     expansionPanelSummaryProps: null,
     expansionPanelDetailsProps: null,
     listItemProps: null,
-    highlightId: null,
   };
 
   createFilteredTree = memoize(
@@ -123,7 +117,6 @@ class MuiTreeView extends Component {
       expansionPanelSummaryProps,
       expansionPanelDetailsProps,
       listItemProps,
-      highlightId,
       ...props
     } = this.props;
     const value = this.getNodeValue(node);
@@ -147,7 +140,6 @@ class MuiTreeView extends Component {
           value={value}
           onClick={() => this.handleLeafClick({ value, parent, id })}
           button
-          classes={highlightId === id ? { root: classes.highlightItem } : {}}
           {...listItemProps}>
           <div className={classes.text}>{value}</div>
         </ListItem>

From e67a16a332601eb1131f3e11ffb0eacc07ed2020 Mon Sep 17 00:00:00 2001
From: Fabian Nickel <fabian.nickel@fu-berlin.de>
Date: Fri, 9 Nov 2018 18:45:16 +0100
Subject: [PATCH 7/8] highlight an item

---
 src/components/MuiTreeView/README.md | 1 +
 src/components/MuiTreeView/index.jsx | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/MuiTreeView/README.md b/src/components/MuiTreeView/README.md
index 6274b96..e257028 100644
--- a/src/components/MuiTreeView/README.md
+++ b/src/components/MuiTreeView/README.md
@@ -25,6 +25,7 @@ const tree = [
 <MuiTreeView
   defaultExpanded
   onLeafClick={node => alert(JSON.stringify(node))}
+  highlightId="example-id"
   tree={tree}
 />
 ```
diff --git a/src/components/MuiTreeView/index.jsx b/src/components/MuiTreeView/index.jsx
index bc780bf..00a704c 100644
--- a/src/components/MuiTreeView/index.jsx
+++ b/src/components/MuiTreeView/index.jsx
@@ -63,6 +63,9 @@ const styles = theme => ({
     maxWidth: '75vw',
   },
   expandIcon: {},
+  highlightItem: {
+    backgroundColor: 'rgb(138, 138, 138)',
+  },
 });
 
 /**
@@ -82,6 +85,8 @@ class MuiTreeView extends Component {
     expansionPanelDetailsProps: object,
     /** Properties applied to the ListItem element. */
     listItemProps: object,
+    /** Id of a leaf which will be highlighted by adding the class  */
+    highlightId: oneOfType[(string, number)],
   };
 
   static defaultProps = {
@@ -117,6 +122,7 @@ class MuiTreeView extends Component {
       expansionPanelSummaryProps,
       expansionPanelDetailsProps,
       listItemProps,
+      highlightId,
       ...props
     } = this.props;
     const value = this.getNodeValue(node);
@@ -140,6 +146,7 @@ class MuiTreeView extends Component {
           value={value}
           onClick={() => this.handleLeafClick({ value, parent, id })}
           button
+          classes={highlightId === id ? { root: classes.highlightItem } : {}}
           {...listItemProps}>
           <div className={classes.text}>{value}</div>
         </ListItem>

From 7ff8bbfe08b99334b7ce8f94012e16f8bb910df3 Mon Sep 17 00:00:00 2001
From: Fabian Nickel <fabian.nickel@fu-berlin.de>
Date: Tue, 13 Nov 2018 11:10:27 +0100
Subject: [PATCH 8/8] add highlight class

---
 src/components/MuiTreeView/README.md |  1 +
 src/components/MuiTreeView/index.jsx | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/MuiTreeView/README.md b/src/components/MuiTreeView/README.md
index e257028..72148ee 100644
--- a/src/components/MuiTreeView/README.md
+++ b/src/components/MuiTreeView/README.md
@@ -26,6 +26,7 @@ const tree = [
   defaultExpanded
   onLeafClick={node => alert(JSON.stringify(node))}
   highlightId="example-id"
+  // highlightClass="highlightedClass"
   tree={tree}
 />
 ```
diff --git a/src/components/MuiTreeView/index.jsx b/src/components/MuiTreeView/index.jsx
index 00a704c..4e39b53 100644
--- a/src/components/MuiTreeView/index.jsx
+++ b/src/components/MuiTreeView/index.jsx
@@ -85,8 +85,12 @@ class MuiTreeView extends Component {
     expansionPanelDetailsProps: object,
     /** Properties applied to the ListItem element. */
     listItemProps: object,
-    /** Id of a leaf which will be highlighted by adding the class  */
-    highlightId: oneOfType[(string, number)],
+    /** Id of a leaf which will be highlighted by adding the class highlightItem
+     *  or a style given by the hightlightStyle prop.
+     */
+    highlightId: oneOfType([string, number]),
+    /* styling of the highlighted item */
+    highlightClass: string,
   };
 
   static defaultProps = {
@@ -95,6 +99,7 @@ class MuiTreeView extends Component {
     expansionPanelSummaryProps: null,
     expansionPanelDetailsProps: null,
     listItemProps: null,
+    highlightClass: null,
   };
 
   createFilteredTree = memoize(
@@ -123,11 +128,22 @@ class MuiTreeView extends Component {
       expansionPanelDetailsProps,
       listItemProps,
       highlightId,
+      highlightClass,
       ...props
     } = this.props;
     const value = this.getNodeValue(node);
     const id = this.getNodeId(node);
     const isLeaf = this.isLeaf(node);
+    let additionalClasses = {};
+
+    if (highlightId === node.id) {
+      if (highlightClass) {
+        additionalClasses = { root: highlightClass };
+      } else {
+        additionalClasses = { root: classes.highlightItem };
+      }
+    }
+
     const textIndent = isLeaf
       ? depth * unit + unit + (parent ? unit : 0)
       : unit * depth + unit;
@@ -146,7 +162,7 @@ class MuiTreeView extends Component {
           value={value}
           onClick={() => this.handleLeafClick({ value, parent, id })}
           button
-          classes={highlightId === id ? { root: classes.highlightItem } : {}}
+          classes={additionalClasses}
           {...listItemProps}>
           <div className={classes.text}>{value}</div>
         </ListItem>