diff --git a/internal_packages/attachments/lib/attachment-component.cjsx b/internal_packages/attachments/lib/attachment-component.cjsx
deleted file mode 100644
index 76781dc4d..000000000
--- a/internal_packages/attachments/lib/attachment-component.cjsx
+++ /dev/null
@@ -1,97 +0,0 @@
-_ = 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
- messageClientId: React.PropTypes.string
-
- constructor: (@props) ->
- @state = progressPercent: 0
-
- render: =>
-
-
-
-
-
-
-
-
- {@props.file.displayName()}
- {@_renderFileActions()}
-
-
-
- _renderFileActions: =>
- if @props.removable
-
- {@_renderRemoveIcon()}
-
- else if @_isDownloading() and @_canAbortDownload()
-
- {@_renderRemoveIcon()}
-
- else
-
- {@_renderDownloadButton()}
-
-
- _downloadProgressStyle: =>
- width: "#{@props.download?.percent ? 0}%"
-
- _canAbortDownload: -> true
-
- _canClickToView: => not @props.removable
-
- _isDownloading: => @props.download?.state is "downloading"
-
- _renderRemoveIcon: ->
-
-
- _renderDownloadButton: ->
-
-
- _onDragStart: (event) =>
- filePath = FileDownloadStore.pathForFile(@props.file)
- if fs.existsSync(filePath)
- # Note: From trial and error, it appears that the second param /MUST/ be the
- # same as the last component of the filePath URL, or the download fails.
- DownloadURL = "#{@props.file.contentType}:#{path.basename(filePath)}:file://#{filePath}"
- 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
- messageClientId: @props.messageClientId
- event.stopPropagation() # Prevent 'onClickView'
-
- _onClickDownload: (event) =>
- Actions.fetchAndSaveFile(@props.file)
- event.stopPropagation() # Prevent 'onClickView'
-
- _onClickAbort: (event) =>
- Actions.abortFetchFile(@props.file)
- event.stopPropagation() # Prevent 'onClickView'
-
-
-module.exports = AttachmentComponent
diff --git a/internal_packages/attachments/lib/attachment-component.jsx b/internal_packages/attachments/lib/attachment-component.jsx
new file mode 100644
index 000000000..164069ea8
--- /dev/null
+++ b/internal_packages/attachments/lib/attachment-component.jsx
@@ -0,0 +1,154 @@
+import fs from 'fs'
+import path from 'path'
+import React, {Component, PropTypes} from 'react'
+import {RetinaImg, Flexbox} from 'nylas-component-kit'
+import {Actions, FileDownloadStore} from 'nylas-exports'
+
+
+class AttachmentComponent extends Component {
+ static displayName = 'AttachmentComponent';
+
+ static propTypes = {
+ file: PropTypes.object.isRequired,
+ download: PropTypes.object,
+ removable: PropTypes.bool,
+ targetPath: PropTypes.string,
+ messageClientId: PropTypes.string,
+ };
+
+ constructor() {
+ super()
+ this.state = {progressPercent: 0}
+ }
+
+ static containerRequired = false;
+
+ _isDownloading() {
+ const {download} = this.props
+ const state = download ? download.state : null
+ return state === 'downloading'
+ }
+
+ _canClickToView() {
+ return !this.props.removable
+ }
+
+ _canAbortDownload() {
+ return true
+ }
+
+ _downloadProgressStyle() {
+ const {download} = this.props
+ const percent = download ? download.percent || 0 : 0;
+ return {
+ width: `${percent}%`,
+ }
+ }
+
+ _onDragStart = (event) => {
+ const {file} = this.props
+ const filePath = FileDownloadStore.pathForFile(file)
+ if (fs.existsSync(filePath)) {
+ // Note: From trial and error, it appears that the second param /MUST/ be the
+ // same as the last component of the filePath URL, or the download fails.
+ const DownloadURL = `${file.contentType}:${path.basename(filePath)}:file://${filePath}`
+ event.dataTransfer.setData("DownloadURL", DownloadURL)
+ event.dataTransfer.setData("text/nylas-file-url", DownloadURL)
+ } else {
+ event.preventDefault()
+ }
+ };
+
+ _onClickView = () => {
+ if (this._canClickToView()) {
+ Actions.fetchAndOpenFile(this.props.file)
+ }
+ };
+
+ _onClickRemove = (event) => {
+ Actions.removeFile({
+ file: this.props.file,
+ messageClientId: this.props.messageClientId,
+ })
+ event.stopPropagation() // Prevent 'onClickView'
+ };
+
+ _onClickDownload = (event) => {
+ Actions.fetchAndSaveFile(this.props.file)
+ event.stopPropagation() // Prevent 'onClickView'
+ };
+
+ _onClickAbort = (event) => {
+ Actions.abortFetchFile(this.props.file)
+ event.stopPropagation() // Prevent 'onClickView'
+ };
+
+ _renderRemoveIcon() {
+ return (
+
+ )
+ }
+
+ _renderDownloadButton() {
+ return (
+
+ )
+ }
+
+ _renderFileActionIcon() {
+ if (this.props.removable) {
+ return (
+
+ {this._renderRemoveIcon()}
+
+ )
+ } else if (this._isDownloading() && this._canAbortDownload()) {
+ return (
+
+ {this._renderRemoveIcon()}
+
+ )
+ }
+ return (
+
+ {this._renderDownloadButton()}
+
+ )
+ }
+
+ render() {
+ const {file, download} = this.props;
+ const downloadState = download ? download.state || "" : "";
+
+ return (
+
+
+
+
+
+
+
+
+
+ {file.displayName()}
+ {file.displayFileSize()}
+
+ {this._renderFileActionIcon()}
+
+
-
-
-
-
-
- {@_renderFileActions()}
-
-
-
-
{@props.file.displayName()}
-
- {@_imgOrLoader()}
-
-
-
-
- else if @props.download and @props.download.percent < 100
-
- else
-
-
-module.exports = ImageAttachmentComponent
diff --git a/internal_packages/attachments/lib/image-attachment-component.jsx b/internal_packages/attachments/lib/image-attachment-component.jsx
new file mode 100644
index 000000000..6b10dc14b
--- /dev/null
+++ b/internal_packages/attachments/lib/image-attachment-component.jsx
@@ -0,0 +1,77 @@
+import React, {PropTypes} from 'react'
+import {RetinaImg, Spinner, DraggableImg} from 'nylas-component-kit'
+import AttachmentComponent from './attachment-component'
+
+
+class ImageAttachmentComponent extends AttachmentComponent {
+ static displayName = 'ImageAttachmentComponent';
+
+ static propTypes = {
+ file: PropTypes.object.isRequired,
+ download: PropTypes.object,
+ targetPath: PropTypes.string,
+ };
+
+ static containerRequired = false;
+
+ _canAbortDownload() {
+ return false
+ }
+
+ _imgOrLoader() {
+ const {download, targetPath} = this.props
+ if (download && download.percent <= 5) {
+ return (
+
+
+
+ )
+ } else if (download && download.percent < 100) {
+ return (
+
+ )
+ }
+ return
+ }
+
+ _renderRemoveIcon() {
+ return (
+
+ )
+ }
+
+ _renderDownloadButton() {
+ return (
+
+ )
+ }
+
+ render() {
+ const {download, file} = this.props
+ const state = download ? download.state || "" : ""
+ const displayName = file.displayName()
+ return (
+
+
+
+
+
+ {this._renderFileActions()}
+
+
+ {this._imgOrLoader()}
+
+
+
+
+ {@props.message.files.length} attachments
+
+
-
+
+
+ Download all
+
+
{attachments}
+
+ {if attachments.length > 1 then @_renderDownloadAllButton()}
+
{attachments}
+