content: import React, { Component } from 'react';
  import provide from 'react-redux-provide';
  import onClickToggle from '../common/onClickToggle.js';
  import {
    getRepoTree, getDirtyMap, tree, dirty, toggle, open, theme,
    repoApi, repoKey, repoName, branchName, fullPath, children
  } from '../common/propTypes.js';
  import Limbs from './Limbs.js';
  import CommitIcon from './CommitIcon.js';
  
  @provide({ getRepoTree, getDirtyMap, tree, dirty, toggle, open, theme })
  export default class PackageRepoBranchName extends Component {
    static propTypes = {
      repoApi, repoKey, repoName, branchName, fullPath, children
    };
  
    componentDidMount() {
      const {
        repoApi, repoKey, getRepoTree, getDirtyMap, branchName
      } = this.props;
      
      getRepoTree(repoApi, repoKey, branchName);
      getDirtyMap(repoKey, branchName);
    }
  
    onClick = onClickToggle;
  
    render() {
      const props = this.props;
      const {
        tree, repoApi, repoKey, dirty,
        repoName, branchName, fullPath, open, theme, children
      } = props;
      const classes = props.theme.sheet.classes || {};
      const { repoBranch, repoBranchName, repoBranchIcon } = classes;
      const imgSrc = open ? 'folder-open.png' : 'folder-closed.png';
      const nameClasses = [repoBranchName];
      let commitIcon;
  
      if (dirty) {
        nameClasses.push(classes.dirtyRepoBranch);
        commitIcon = (
          <CommitIcon fullPath={fullPath} theme={theme} />
        );
      }
  
      return (
        <div className={repoBranch} onClick={::this.onClick}>
          <div className={nameClasses.join(' ')}>
            <img className={repoBranchIcon} src={theme.imagesDir+imgSrc} />
            <span>{repoName+'@'+branchName}</span>
            {commitIcon}
          </div>
  
          <Limbs
            fullPath={fullPath}
            branchName={branchName}
            repoApi={repoApi}
            repoKey={repoKey}
            tree={tree}
          />
        </div>
      );
    }
  }
  