{"size": 1131, "ext": "js", "max_stars_repo_path": "lib/components/TreeNode.js", "max_stars_repo_name": "brumm/codenav", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "lib/components/TreeNode.js", "max_issues_repo_name": "brumm/codenav", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "lib/components/TreeNode.js", "max_forks_repo_name": "brumm/codenav", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.1764705882, "max_line_length": 69, "alphanum_fraction": 0.5561450044}
'use babel'

import React from 'react'
import cx from 'classnames'
import { inject } from 'mobx-react'

class TreeNode extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      expanded: props.expanded,
    }
  }

  render() {
    const { label, children, onClick, selected } = this.props
    const { expanded } = this.state
    const hasChildren = React.Children.count(children) > 0

    return (
      <li
        className={cx({
          'list-nested-item': !!hasChildren,
          'list-item': !hasChildren,
          collapsed: !expanded,
          selected,
        })}
        onClick={onClick}
      >
        <div
          className="list-item"
          onClick={() => this.setState({ expanded: !expanded })}
        >
          {label}
        </div>

        {hasChildren && (
          <ul className="list-tree has-flat-children">{children}</ul>
        )}
      </li>
    )
  }
}

export default inject(({ store }, { start, end }) => {
  const { cursorPosition } = store.getActiveEditor()
  return {
    selected: cursorPosition >= start && cursorPosition <= end,
  }
})(TreeNode)
