add highlight class

Author: Fabian Nickel

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}
 />
 ```

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>