weseek__growi/resource/js/components/PageAttachment/Attachment.js

import React from 'react';
import PropTypes from 'prop-types';

import User from '../User/User';

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

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

  iconNameByFormat(format) {
    if (format.match(/image\/.+/i)) {
      return 'icon-picture';
    }

    return 'icon-doc';
  }

  _onAttachmentDeleteClicked(event) {
    this.props.onAttachmentDeleteClicked(this.props.attachment);
  }

  render() {
    const attachment = this.props.attachment;
    const formatIcon = this.iconNameByFormat(attachment.fileFormat);

    let fileInUse = '';
    if (this.props.inUse) {
      fileInUse = <span className="attachment-in-use label label-info">In Use</span>;
    }

    const fileType = <span className="attachment-filetype label label-default">{attachment.fileFormat}</span>;

    const btnDownload = (this.props.isUserLoggedIn)
      ? (
        <a className="attachment-download" href={`/download/${attachment._id}`}>
          <i className="icon-cloud-download"></i>
        </a>)
      : '';

    const btnTrash = (this.props.isUserLoggedIn)
      ? (
        <a className="text-danger attachment-delete" onClick={this._onAttachmentDeleteClicked}>
          <i className="icon-trash"></i>
        </a>)
      : '';

    return (
      <li>
        <User user={attachment.creator} />
        <i className={formatIcon}></i>

        <a href={attachment.url}> {attachment.originalName}</a>

        {fileType}

        {fileInUse}

        {btnDownload}
        {btnTrash}
      </li>
    );
  }
}

Attachment.propTypes = {
  attachment: PropTypes.object.isRequired,
  inUse: PropTypes.bool.isRequired,
  onAttachmentDeleteClicked: PropTypes.func.isRequired,
  isUserLoggedIn: PropTypes.bool.isRequired,
};

Attachment.defaultProps = {
};