highlight an item

Author: Fabian Nickel

src/components/MuiTreeView/README.md

@@ -25,6 +25,7 @@ const tree = [
 <MuiTreeView
   defaultExpanded
   onLeafClick={node => alert(JSON.stringify(node))}
+  highlightId="example-id"
   tree={tree}
 />
 ```

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>