highlight

Author: Fabian Nickel

src/components/MuiTreeView/README.md

@@ -13,7 +13,7 @@ const tree = [
       {
         value: 'Parent C',
         nodes: [
-          { value: 'Child D' },
+          { value: 'Child D', id: 'test' },
           { value: 'Child E' },
           { value: 'Child F' },
         ],
@@ -24,8 +24,8 @@ const tree = [
 
 <MuiTreeView
   defaultExpanded
-  onLeafClick={(node, parent, fullPath) => alert(`${node} clicked, full path: ${JSON.stringify(fullPath)}`)}
-  highlightItem={['Parent B', 'Parent C', 'Child D']}
+  onLeafClick={(node) => alert(`${JSON.stringify(node)}`)}
+  highlightId="test"
   tree={tree}
 />
 ```

src/components/MuiTreeView/index.jsx

@@ -1,5 +1,13 @@
 import { Component } from 'react';
-import { arrayOf, shape, number, string, func, oneOfType, object } from 'prop-types';
+import {
+  arrayOf,
+  shape,
+  number,
+  string,
+  func,
+  oneOfType,
+  object,
+} from 'prop-types';
 import classNames from 'classnames';
 import { prop } from 'ramda';
 import memoize from 'fast-memoize';
@@ -14,7 +22,7 @@ const pickClassName = prop('className');
 /** Prop-type for a recursive data structure */
 const tree = {
   value: string.isRequired,
-  id: oneOfType[string, number],
+  id: oneOfType[(string, number)],
 };
 
 Object.assign(tree, {
@@ -54,7 +62,7 @@ const styles = theme => ({
   },
   expandIcon: {},
   highlightItem: {
-    backgroundColor: 'rgb(220, 227, 239)',
+    backgroundColor: 'rgb(138, 138, 138)',
   },
 });
 
@@ -76,7 +84,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 = {
@@ -96,7 +104,7 @@ class MuiTreeView extends Component {
     }
   );
 
-  handleLeafClick = (leaf) => {
+  handleLeafClick = leaf => {
     if (this.props.onLeafClick) {
       this.props.onLeafClick(leaf);
     }
@@ -171,9 +179,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>
     );

src/index.jsx

@@ -30,9 +30,9 @@ const tree = [
 
 class App extends Component {
   /* eslint-disable-next-line no-alert */
-  handleLeafClick = (node, parent, fullPath) =>
+  handleLeafClick = node =>
     /* eslint-disable-next-line no-alert */
-    alert(`${node} clicked, full path: ${JSON.stringify(fullPath)}`);
+    alert(`${JSON.stringify(node)} clicked`);
 
   render() {
     return (