React = require 'react' classNames = require 'classnames' _ = require 'underscore-plus' EmailFrame = require './email-frame' MessageParticipants = require "./message-participants" MessageTimestamp = require "./message-timestamp" {Utils, Actions, MessageUtils, ComponentRegistry, FileDownloadStore} = require 'inbox-exports' {RetinaImg, InjectedComponentSet, InjectedComponent} = require 'ui-components' Autolinker = require 'autolinker' remote = require 'remote' TransparentPixel = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNikAQAACIAHF/uBd8AAAAASUVORK5CYII=" MessageBodyWidth = 740 class MessageItem extends React.Component @displayName = 'MessageItem' @propTypes = thread: React.PropTypes.object.isRequired message: React.PropTypes.object.isRequired thread_participants: React.PropTypes.arrayOf(React.PropTypes.object) collapsed: React.PropTypes.bool constructor: (@props) -> @state = # Holds the downloadData (if any) for all of our files. It's a hash # keyed by a fileId. The value is the downloadData. downloads: FileDownloadStore.downloadsForFileIds(@props.message.fileIds()) showQuotedText: @_isForwardedMessage() detailedHeaders: false componentDidMount: => @_storeUnlisten = FileDownloadStore.listen(@_onDownloadStoreChange) componentWillUnmount: => @_storeUnlisten() if @_storeUnlisten shouldComponentUpdate: (nextProps, nextState) => not Utils.isEqualReact(nextProps, @props) or not Utils.isEqualReact(nextState, @state) render: => if @props.collapsed @_renderCollapsed() else @_renderFull() _renderCollapsed: =>
{@props.message.from?[0]?.displayFirstName()}
{@props.message.snippet}
_renderFull: =>
{@_renderHeader()} {@_renderAttachments()} {@_formatBody()}
_renderHeader: =>
{if @state.detailedHeaders then @_renderMessageActionsInline() else @_renderMessageActionsTooltip()}
@setState detailedHeaders: true} thread_participants={@props.thread_participants} isDetailed={@state.detailedHeaders} message_participants={@props.message.participants()} /> {@_renderCollapseControl()}
_renderAttachments: => attachments = @_attachmentComponents() if attachments.length > 0
{attachments}
else
_quotedTextClasses: => classNames "quoted-text-control": true 'no-quoted-text': (Utils.quotedTextIndex(@props.message.body) is -1) 'show-quoted-text': @state.showQuotedText _renderMessageActionsInline: => @_renderMessageActions() _renderMessageActionsTooltip: => return ## TODO: For now leave blank. There may be an alternative UI in the #future. # @setState detailedHeaders: true}> # _renderMessageActions: =>
_onReply: => tId = @props.thread.id; mId = @props.message.id Actions.composeReply(threadId: tId, messageId: mId) if (tId and mId) _onReplyAll: => tId = @props.thread.id; mId = @props.message.id Actions.composeReplyAll(threadId: tId, messageId: mId) if (tId and mId) _onForward: => tId = @props.thread.id; mId = @props.message.id Actions.composeForward(threadId: tId, messageId: mId) if (tId and mId) _onReport: (issueType) => {Contact, Message, DatabaseStore, NamespaceStore} = require 'inbox-exports' draft = new Message from: [NamespaceStore.current().me()] to: [new Contact(name: "Nilas Team", email: "feedback@nilas.com")] date: (new Date) draft: true subject: "Feedback - Message Display Issue (#{issueType})" namespaceId: NamespaceStore.current().id body: @props.message.body DatabaseStore.persistModel(draft).then => DatabaseStore.localIdForModel(draft).then (localId) => Actions.sendDraft(localId) dialog = remote.require('dialog') dialog.showMessageBox remote.getCurrentWindow(), { type: 'warning' buttons: ['OK'], message: "Thank you." detail: "The contents of this message have been sent to the Edgehill team and we added to a test suite." } _onShowOriginal: => fs = require 'fs' path = require 'path' BrowserWindow = remote.require('browser-window') app = remote.require('app') tmpfile = path.join(app.getPath('temp'), @props.message.id) atom.inbox.makeRequest headers: Accept: 'message/rfc822' path: "/n/#{@props.message.namespaceId}/messages/#{@props.message.id}" json:null success: (body) => fs.writeFile tmpfile, body, => window = new BrowserWindow(width: 800, height: 600, title: "#{@props.message.subject} - RFC822") window.loadUrl('file://'+tmpfile) _onShowActionsMenu: => remote = require('remote') Menu = remote.require('menu') MenuItem = remote.require('menu-item') # Todo: refactor this so that message actions are provided # dynamically. Waiting to see if this will be used often. menu = new Menu() menu.append(new MenuItem({ label: 'Report Issue: Quoted Text', click: => @_onReport('Quoted Text')})) menu.append(new MenuItem({ label: 'Report Issue: Rendering', click: => @_onReport('Rendering')})) menu.append(new MenuItem({ type: 'separator'})) menu.append(new MenuItem({ label: 'Show Original', click: => @_onShowOriginal()})) menu.popup(remote.getCurrentWindow()) _renderCollapseControl: => if @state.detailedHeaders
@setState detailedHeaders: false}>
else
@setState detailedHeaders: true}>
# Eventually, _formatBody will run a series of registered body transformers. # For now, it just runs a few we've hardcoded here, which are all synchronous. _formatBody: => return "" unless @props.message and @props.message.body body = @props.message.body # Apply the autolinker pass to make emails and links clickable body = Autolinker.link(body, {twitter: false}) # Find inline images and give them a calculated CSS height based on # html width and height, when available. This means nothing changes size # as the image is loaded, and we can estimate final height correctly. # Note that MessageBodyWidth must be updated if the UI is changed! while (result = MessageUtils.cidRegex.exec(body)) isnt null imgstart = body.lastIndexOf('<', result.index) imgend = body.indexOf('/>', result.index) if imgstart != -1 and imgend > imgstart imgtag = body.substr(imgstart, imgend - imgstart) width = imgtag.match(/width[ ]?=[ ]?['"]?(\d*)['"]?/)?[1] height = imgtag.match(/height[ ]?=[ ]?['"]?(\d*)['"]?/)?[1] if width and height scale = Math.min(1, MessageBodyWidth / width) style = " style=\"height:#{height * scale}px;\" " body = body.substr(0, imgend) + style + body.substr(imgend) # Replace cid:// references with the paths to downloaded files for file in @props.message.files continue if _.find @state.downloads, (d) -> d.fileId is file.id cidLink = "cid:#{file.contentId}" fileLink = "#{FileDownloadStore.pathForFile(file)}" body = body.replace(cidLink, fileLink) # 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}\"") body _toggleQuotedText: => @setState showQuotedText: !@state.showQuotedText _toggleCollapsed: => Actions.toggleMessageIdExpanded(@props.message.id) _formatContacts: (contacts=[]) => _attachmentComponents: => return [] unless @props.message.body attachments = _.filter @props.message.files, (f) => inBody = f.contentId? and @props.message.body.indexOf(f.contentId) > 0 not inBody and f.filename.length > 0 attachments.map (file) => _isForwardedMessage: => Utils.isForwardedMessage(@props.message) _onDownloadStoreChange: => @setState downloads: FileDownloadStore.downloadsForFileIds(@props.message.fileIds()) module.exports = MessageItem