mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 08:16:09 +08:00
122 lines
4.1 KiB
CoffeeScript
122 lines
4.1 KiB
CoffeeScript
React = require 'react'
|
|
_ = require 'underscore'
|
|
EmailFrame = require './email-frame'
|
|
{Utils,
|
|
CanvasUtils,
|
|
NylasAPI,
|
|
MessageUtils,
|
|
MessageBodyProcessor,
|
|
QuotedHTMLTransformer,
|
|
FileDownloadStore} = require 'nylas-exports'
|
|
{InjectedComponentSet, RetinaImg} = require 'nylas-component-kit'
|
|
|
|
TransparentPixel = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNikAQAACIAHF/uBd8AAAAASUVORK5CYII="
|
|
|
|
class MessageItemBody extends React.Component
|
|
@displayName: 'MessageItemBody'
|
|
@propTypes:
|
|
message: React.PropTypes.object.isRequired
|
|
downloads: React.PropTypes.object.isRequired
|
|
|
|
constructor: (@props) ->
|
|
@_unmounted = false
|
|
@state =
|
|
showQuotedText: Utils.isForwardedMessage(@props.message)
|
|
processedBody: null
|
|
error: null
|
|
|
|
componentWillMount: =>
|
|
@_unsub = MessageBodyProcessor.subscribe @props.message, (processedBody) =>
|
|
@setState({processedBody})
|
|
|
|
componentDidMount: =>
|
|
@_onFetchBody() if not _.isString(@props.message.body)
|
|
|
|
componentWillReceiveProps: (nextProps) ->
|
|
if nextProps.message.id isnt @props.message.id
|
|
@_unsub?()
|
|
@_unsub = MessageBodyProcessor.subscribe nextProps.message, (processedBody) =>
|
|
@setState({processedBody})
|
|
|
|
componentWillUnmount: =>
|
|
@_unmounted = true
|
|
@_unsub?()
|
|
|
|
render: =>
|
|
<span>
|
|
<InjectedComponentSet
|
|
matching={role: "message:BodyHeader"}
|
|
exposedProps={message: @props.message}
|
|
direction="column"
|
|
style={width:'100%'}/>
|
|
{@_renderBody()}
|
|
{@_renderQuotedTextControl()}
|
|
</span>
|
|
|
|
_renderBody: =>
|
|
if _.isString(@props.message.body) and _.isString(@state.processedBody)
|
|
finalBody = @_mergeBodyWithFiles(@state.processedBody)
|
|
|
|
<EmailFrame showQuotedText={@state.showQuotedText} content={finalBody}/>
|
|
else if @state.error
|
|
<div className="message-body-error">
|
|
Sorry, this message could not be loaded. (Status code {@state.error.statusCode})
|
|
<a onClick={@_onFetchBody}>Try Again</a>
|
|
</div>
|
|
else
|
|
<div className="message-body-loading">
|
|
<RetinaImg
|
|
name="inline-loading-spinner.gif"
|
|
mode={RetinaImg.Mode.ContentDark}
|
|
style={{width: 14, height: 14}}/>
|
|
</div>
|
|
|
|
_renderQuotedTextControl: =>
|
|
return null unless QuotedHTMLTransformer.hasQuotedHTML(@props.message.body)
|
|
<a className="quoted-text-control" onClick={@_toggleQuotedText}>
|
|
<span className="dots">•••</span>
|
|
</a>
|
|
|
|
_toggleQuotedText: =>
|
|
@setState
|
|
showQuotedText: !@state.showQuotedText
|
|
|
|
_onFetchBody: =>
|
|
NylasAPI.makeRequest
|
|
path: "/messages/#{@props.message.id}"
|
|
accountId: @props.message.accountId
|
|
returnsModel: true
|
|
.then =>
|
|
return if @_unmounted
|
|
@setState({error: null})
|
|
# message will be put into the database and the MessageBodyProcessor
|
|
# will provide us with the new body once it's been processed.
|
|
.catch (error) =>
|
|
return if @_unmounted
|
|
@setState({error})
|
|
|
|
_mergeBodyWithFiles: (body) =>
|
|
# Replace cid:// references with the paths to downloaded files
|
|
for file in @props.message.files
|
|
download = @props.downloads[file.id]
|
|
cidRegexp = new RegExp("cid:#{file.contentId}(['\"]+)", 'gi')
|
|
|
|
if download and download.state isnt 'finished'
|
|
# Render a spinner and inject a `style` tag that injects object-position / object-fit
|
|
body = body.replace cidRegexp, (text, quoteCharacter) ->
|
|
dataUri = CanvasUtils.dataURIForLoadedPercent(download.percent)
|
|
"#{dataUri}#{quoteCharacter} style=#{quoteCharacter} object-position: 50% 50%; object-fit: none; "
|
|
else
|
|
# Render the completed download
|
|
body = body.replace cidRegexp, (text, quoteCharacter) ->
|
|
"#{FileDownloadStore.pathForFile(file)}#{quoteCharacter}"
|
|
|
|
# Replace remaining cid:// references - we will not display them since they'll
|
|
# throw "unknown ERR_UNKNOWN_URL_SCHEME". Show a transparent pixel so that there's
|
|
# no "missing image" region shown, just a space.
|
|
body = body.replace(MessageUtils.cidRegex, "src=\"#{TransparentPixel}\"")
|
|
|
|
return body
|
|
|
|
module.exports = MessageItemBody
|