Identification tree item with custom id

readme.md

@@ -10,18 +10,21 @@ A simple, configurable tree view control for React.
 
 Demo: https://codesandbox.io/embed/rrw7mrknyp
 
-* `content`, Name of the node (string or React-component)
-* `type`, optional description, good for displaying icons, too (string or React-component)
-* `open`, optional: default open state
-* `canHide`, optional: when set true displays an eye icon
-* `visible`, optional: default visible state
-* `onClick`, optional: click events on the eye
-* `springConfig`, optional: react-spring animation config
+- `content`, Name of the node (string or React-component)
+- `type`, optional description, good for displaying icons, too (string or React-component)
+- `open`, optional: default open state
+- `canHide`, optional: when set true displays an eye icon
+- `visible`, optional: default visible state
+- `onClick`, optional: click events on the eye
+- `springConfig`, optional: react-spring animation config
+- `onItemClick`, optional: click events on the tree span item (pass itemId props as parameter)
+- `onItemToggle`, optional: click events on the toggle icon, parameters: itemId, isOpen.
+- `itemId`, optional: custom identifier of tree item
 
 ```jsx
 import Tree from 'react-animated-tree'
 
-<Tree content="Apple" type="Fruit" open canHide visible onClick={console.log}>
+<Tree content="Apple" type="Fruit" open canHide visible onClick={console.log} itemId={"apple"} onItemClick={itemId => console.log(itemId)}>
   <Tree content="Contents">
     <Tree content="Seeds" />
   <Tree>

src/index.js

@@ -9,7 +9,7 @@ const styles = {
     padding: '4px 0px 0px 0px',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    overflowX: 'hidden',
+    overflow: 'hidden',
     verticalAlign: 'middle',
   },
   toggle: {
@@ -46,17 +46,29 @@ export default class Tree extends React.PureComponent {
     visible: PropTypes.bool,
     canHide: PropTypes.bool,
     content: PropTypes.node,
+    itemId: PropTypes.string,
     springConfig: PropTypes.func,
+    onItemClick: PropTypes.func,
+    onItemToggle: PropTypes.func,
   }
 
   constructor(props) {
     super()
-    this.state = { open: props.open, visible: props.visible, immediate: false }
+    this.state = {
+      open: props.open,
+      visible: props.visible,
+      immediate: false,
+      id: props.itemId,
+    }
   }
 
-  toggle = () =>
-    this.props.children &&
-    this.setState(state => ({ open: !state.open, immediate: false }))
+  toggle = () => {
+    if (typeof this.props.children !== 'undefined') {
+      this.props.onItemToggle &&
+        this.props.onItemToggle(this.state.id, !this.state.open)
+      this.setState(state => ({ open: !state.open, immediate: false }))
+    }
+  }
 
   toggleVisibility = () => {
     this.setState(
@@ -65,6 +77,10 @@ export default class Tree extends React.PureComponent {
     )
   }
 
+  onItemClick = () => {
+    this.props.onItemClick && this.props.onItemClick(this.state.id)
+  }
+
   componentWillReceiveProps(props) {
     this.setState(state => {
       return ['open', 'visible'].reduce(
@@ -97,7 +113,9 @@ export default class Tree extends React.PureComponent {
             onClick={this.toggleVisibility}
           />
         )}
-        <span style={{ verticalAlign: 'middle' }}>{content}</span>
+        <span onClick={this.onItemClick} style={{ verticalAlign: 'middle' }}>
+          {content}
+        </span>
         <Spring
           native
           immediate={immediate}
@@ -112,7 +130,7 @@ export default class Tree extends React.PureComponent {
             opacity: open ? 1 : 0,
             transform: open ? 'translate3d(0px,0,0)' : 'translate3d(20px,0,0)',
           }}
-          {...springConfig && springConfig(open)}
+          {...(springConfig && springConfig(open))}
           render={Contents}>
           {children}
         </Spring>