import React, { PropTypes } from 'react';

const propTypes = {
  fileName: PropTypes.string.isRequired,
  fileType: PropTypes.string.isRequired,
};

export default class SideMenuItem extends React.Component {
  constructor() {
    super();

    this.fileTypeToClassName = this.fileTypeToClassName.bind(this);
  }

  fileTypeToClassName(fileType) {
    if (fileType === 'dir') {
      return 'icon-folder';
    } else if (fileType === 'file') {
      return 'icon-doc-text';
    } else if (fileType === 'dotfile') {
      return 'aaa';
    }
    return '';
  }

  render() {
    const classes = ['icon', this.fileTypeToClassName(this.props.fileType)];
    return (
      <span className="nav-group-item">
        <span className={classes.join(' ')} />
        {this.props.fileName}
      </span>
    );
  }
}

SideMenuItem.propTypes = propTypes;

import React, { PropTypes } from 'react';

const propTypes = {
  fileName: PropTypes.string.isRequired,
  fileType: PropTypes.string.isRequired,
};

export default class SideMenuItem extends React.Component {
  constructor() {
    super();

    this.fileTypeToClassName = this.fileTypeToClassName.bind(this);
  }

  fileTypeToClassName(fileType) {
    if (fileType === 'dir') {
      return 'icon-folder';
    } else if (fileType === 'file') {
      return 'icon-doc-text';
    } else if (fileType === 'dotfile') {
      return 'aaa';
    }
    return '';
  }

  render() {
    const fileIconClx = ['icon', this.fileTypeToClassName(this.props.fileType)];
    const expandIconClass = (this.props.fileType === 'dir') ? 'icon icon-right-dir' : 'icon';

    return (
      <span className="nav-group-item">
        <span className={expandIconClass} />
        <span className={fileIconClx.join(' ')} />
        {this.props.fileName}
      </span>
    );
  }
}

SideMenuItem.propTypes = propTypes;

Add right-arrow-icon to sidemenu if filetype is folder
Add right-arrow-icon to sidemenu if filetype is folder
