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> ) } } |