mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 08:46:07 +08:00
cba0fc50a5
Summary: - You cannot drag an attachmentComponent unless it represents a fully downloaded file on disk. - You cannot drag and drop an item from a composer onto the same composer. - Attachments on expanded messages start downloading as soon as it's viewed (necessary for drag and dropping attachments, also probably best. Previously was just images.) - You can now cancel an attachment download. Was really broken. Test Plan: Run many new specs! Reviewers: evan Reviewed By: evan Maniphest Tasks: T1196 Differential Revision: https://phab.nylas.com/D1764
96 lines
3 KiB
CoffeeScript
96 lines
3 KiB
CoffeeScript
_ = require 'underscore'
|
|
path = require 'path'
|
|
fs = require 'fs'
|
|
React = require 'react'
|
|
{RetinaImg, Flexbox} = require 'nylas-component-kit'
|
|
{Actions, Utils, FileDownloadStore} = require 'nylas-exports'
|
|
|
|
class AttachmentComponent extends React.Component
|
|
@displayName: 'AttachmentComponent'
|
|
|
|
@propTypes:
|
|
file: React.PropTypes.object.isRequired
|
|
download: React.PropTypes.object
|
|
removable: React.PropTypes.bool
|
|
targetPath: React.PropTypes.string
|
|
messageLocalId: React.PropTypes.string
|
|
|
|
constructor: (@props) ->
|
|
@state = progressPercent: 0
|
|
|
|
render: =>
|
|
<div className="inner" onDoubleClick={@_onClickView} onDragStart={@_onDragStart} draggable="true">
|
|
<span className={"progress-bar-wrap state-#{@props.download?.state ? ""}"}>
|
|
<span className="progress-background"></span>
|
|
<span className="progress-foreground" style={@_downloadProgressStyle()}></span>
|
|
</span>
|
|
|
|
<Flexbox direction="row" style={alignItems: 'center'}>
|
|
<RetinaImg className="file-icon"
|
|
fallback="file-fallback.png"
|
|
name="file-#{@_extension()}.png"/>
|
|
<span className="file-name">{@props.file.displayName()}</span>
|
|
{@_renderFileActions()}
|
|
</Flexbox>
|
|
</div>
|
|
|
|
_renderFileActions: =>
|
|
if @props.removable
|
|
<div className="file-action-icon" onClick={@_onClickRemove}>
|
|
{@_renderRemoveIcon()}
|
|
</div>
|
|
else if @_isDownloading() and @_canAbortDownload()
|
|
<div className="file-action-icon" onClick={@_onClickAbort}>
|
|
{@_renderRemoveIcon()}
|
|
</div>
|
|
else
|
|
<div className="file-action-icon" onClick={@_onClickDownload}>
|
|
{@_renderDownloadButton()}
|
|
</div>
|
|
|
|
_downloadProgressStyle: =>
|
|
width: "#{@props.download?.percent ? 0}%"
|
|
|
|
_canAbortDownload: -> true
|
|
|
|
_canClickToView: => not @props.removable and not @_isDownloading()
|
|
|
|
_isDownloading: => @props.download?.state is "downloading"
|
|
|
|
_renderRemoveIcon: ->
|
|
<RetinaImg name="remove-attachment.png"/>
|
|
|
|
_renderDownloadButton: ->
|
|
<RetinaImg name="icon-attachment-download.png"/>
|
|
|
|
_onDragStart: (event) =>
|
|
path = FileDownloadStore.pathForFile(@props.file)
|
|
if fs.existsSync(path)
|
|
DownloadURL = "#{@props.file.contentType}:#{@props.file.displayName()}:file://#{path}"
|
|
event.dataTransfer.setData("DownloadURL", DownloadURL)
|
|
event.dataTransfer.setData("text/nylas-file-url", DownloadURL)
|
|
else
|
|
event.preventDefault()
|
|
return
|
|
|
|
_onClickView: => Actions.fetchAndOpenFile(@props.file) if @_canClickToView()
|
|
|
|
_onClickRemove: (event) =>
|
|
Actions.removeFile
|
|
file: @props.file
|
|
messageLocalId: @props.messageLocalId
|
|
event.stopPropagation() # Prevent 'onClickView'
|
|
|
|
_onClickDownload: (event) =>
|
|
Actions.fetchAndSaveFile(@props.file)
|
|
event.stopPropagation() # Prevent 'onClickView'
|
|
|
|
_onClickAbort: (event) =>
|
|
Actions.abortFetchFile(@props.file)
|
|
event.stopPropagation() # Prevent 'onClickView'
|
|
|
|
_extension: -> @props.file.filename.split('.').pop()
|
|
|
|
|
|
module.exports = AttachmentComponent
|