All files / client/components/PageAttachment DeleteAttachmentModal.tsx

0% Statements 0/17
0% Branches 0/8
0% Functions 0/4
0% Lines 0/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85                                                                                                                                                                         
import React from 'react'
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 
import Icon from 'components/Common/Icon'
import User from 'components/User/User'
 
import { Attachment } from 'client/types/crowi'
 
interface Props {
  inUse: boolean
  isOpen: boolean
  toggle: () => void
  deleting: boolean
  deleteError: string
  attachmentToDelete: Attachment | null
  onAttachmentDeleteClickedConfirm: Function
}
 
export default class DeleteAttachmentModal extends React.Component<Props> {
  constructor(props: Props) {
    super(props)
 
    this._onDeleteConfirm = this._onDeleteConfirm.bind(this)
  }
 
  _onDeleteConfirm() {
    this.props.onAttachmentDeleteClickedConfirm(this.props.attachmentToDelete)
  }
 
  renderByFileFormat(attachment: Attachment) {
    if (attachment.fileFormat.match(/image\/.+/i)) {
      return (
        <p className="attachment-delete-image">
          <span>
            {attachment.originalName} uploaded by <User user={attachment.creator} username />
          </span>
          <br />
          <img src={attachment.url} />
        </p>
      )
    }
 
    return (
      <p className="attachment-delete-file">
        <Icon name="fileOutline" />
        <span>
          {attachment.originalName} uploaded by <User user={attachment.creator} username />
        </span>
      </p>
    )
  }
 
  render() {
    const attachment = this.props.attachmentToDelete
    if (attachment === null) {
      return null
    }
 
    const { onAttachmentDeleteClickedConfirm, attachmentToDelete, inUse, deleting, deleteError, ...props } = this.props
 
    let deletingIndicator: JSX.Element | string = ''
    if (deleting) {
      deletingIndicator = <Icon name="loading" spin />
    }
    if (deleteError) {
      deletingIndicator = <p>{this.props.deleteError}</p>
    }
 
    const renderAttachment = this.renderByFileFormat(attachment)
 
    return (
      <Modal {...props} className="attachment-delete-modal modal-large">
        <ModalHeader>Delete attachment?</ModalHeader>
        <ModalBody>{renderAttachment}</ModalBody>
        <ModalFooter>
          {deletingIndicator}
          <Button onClick={this._onDeleteConfirm} color="danger" disabled={this.props.deleting}>
            Delete!
          </Button>
        </ModalFooter>
      </Modal>
    )
  }
}