tracim_v2/src/component/Workspace/ContentItem.jsx

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import BtnExtandedAction from './BtnExtandedAction.jsx'

const FileItem = props => {
  const iconStatus = (() => {
    switch (props.status) {
      case 'current':
        return 'fa fa-fw fa-cogs'
      case 'validated':
        return 'fa fa-fw fa-check'
      case 'canceled':
        return 'fa fa-fw fa-times'
      case 'outdated':
        return 'fa fa-fw fa-ban'
    }
  })()

  const textStatus = (() => {
    switch (props.status) {
      case 'current':
        return 'En cours'
      case 'validated':
        return 'Validé'
      case 'canceled':
        return 'Annulé'
      case 'outdated':
        return 'Obsolète'
    }
  })()

  const colorStatus = (() => {
    switch (props.status) {
      case 'current':
        return ' currentColor'
      case 'validated':
        return ' validateColor'
      case 'canceled':
        return ' cancelColor'
      case 'outdated':
        return ' outdateColor'
    }
  })()

  return (
    <div className={classnames('file', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>
      <div className='file__type'>
        <i className={props.icon} />
      </div>

      <div className='file__name'>
        <div className='file__name__text'>
          { props.name }
        </div>
      </div>

      <div className='d-none d-md-flex'>
        <BtnExtandedAction onClickExtendedAction={props.onClickExtendedAction} />
      </div>

      <div className={classnames('file__status d-flex align-items-center justify-content-start') + colorStatus}>
        <div className='file__status__icon d-block '>
          <i className={iconStatus} />
        </div>
        <div className='file__status__text d-none d-xl-block'>
          {textStatus}
        </div>
      </div>
    </div>
  )
}

export default FileItem

FileItem.propTypes = {
  type: PropTypes.string.isRequired,
  status: PropTypes.string.isRequired,
  customClass: PropTypes.string,
  name: PropTypes.string,
  onClickItem: PropTypes.func
}

FileItem.defaultProps = {
  name: '',
  customClass: '',
  onClickItem: () => {}
}