Merge pull request #123 from JulianAdams4/attachments

Attachments

Author: Erika Perugachi

electron_app/src/windows/mailbox.js

@@ -1,4 +1,4 @@
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, shell } = require('electron');
 const { mailboxUrl } = require('./../window_routing');
 
 let mailboxWindow;
@@ -23,6 +23,10 @@ const create = () => {
   mailboxWindow.on('closed', () => {
     mailboxWindow = undefined;
   });
+  mailboxWindow.webContents.on('new-window', function(e, url) {
+    e.preventDefault();
+    shell.openExternal(url);
+  });
 };
 
 const show = async () => {

email_composer/src/components/Attachment.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { convertToHumanSize } from './../utils/StringUtils';
+import { identifyFileType } from './../utils/FileUtils';
+import './attachment.css';
+
+const Attachment = props => {
+  return (
+    <div
+      className={`file-container ${props.isLoading ? 'container-loading' : ''}`}
+    >
+      <div className="file-icon">{renderFileIcon(props.file.type)}</div>
+      <div className="file-info">
+        <span>{props.file.name}</span>
+        <span>{convertToHumanSize(props.file.size, true)}</span>
+      </div>
+      <div
+        className="file-delete"
+        onClick={() => props.onClearFile(props.file.name)}
+      >
+        <i className="icon-exit" />
+      </div>
+      {props.isLoading ? <div className="loading-file-bar" /> : null}
+    </div>
+  );
+};
+
+const renderFileIcon = type => {
+  const filetype = identifyFileType(type);
+  return (
+    <span className={`icon-container-${filetype}`}>
+      <i className={`icon-${filetype}`} />
+    </span>
+  );
+};
+
+Attachment.propTypes = {
+  isLoading: PropTypes.bool,
+  file: PropTypes.object,
+  onClearFile: PropTypes.func
+};
+
+export default Attachment;

email_composer/src/components/AttachmentWrapper.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import Attachment from './Attachment';
+
+class AttachmentWrapper extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true
+    };
+  }
+
+  render() {
+    return <Attachment {...this.props} isLoading={this.state.isLoading} />;
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        isLoading: false
+      });
+    }, 3000);
+  }
+}
+
+export default AttachmentWrapper;

email_composer/src/components/Body.js

@@ -1,21 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DropfileField from './DropfileFieldWrapper';
+import DropfileField from './DropfileField';
 import Control from './Control';
 import './body.css';
 
 const Body = props => (
   <div className="body-container">
     <DropfileField
       isToolbarHidden={props.isToolbarHidden}
-      htmlBody={props.htmlBody}
-      getHtmlBody={props.getHtmlBody}
       blockRenderMap={props.blockRenderMap}
+      getHtmlBody={props.getHtmlBody}
+      htmlBody={props.htmlBody}
+      files={props.files}
+      isDragActive={props.isDragActive}
+      onDragLeave={props.handleDragLeave}
+      onDragOver={props.handleDragOver}
+      onClearFile={props.onClearFile}
+      onDrop={props.onDrop}
     />
     <Control
       onClickTextEditor={props.onClickTextEditor}
       onClickSendMessage={props.onClickSendMessage}
       status={props.status}
+      onDrop={props.onDrop}
     />
   </div>
 );
@@ -27,7 +34,13 @@ Body.propTypes = {
   isToolbarHidden: PropTypes.bool,
   onClickSendMessage: PropTypes.func,
   onClickTextEditor: PropTypes.func,
-  status: PropTypes.number
+  status: PropTypes.number,
+  files: PropTypes.array,
+  onDrop: PropTypes.func,
+  onClearFile: PropTypes.func,
+  handleDragLeave: PropTypes.func,
+  handleDragOver: PropTypes.func,
+  isDragActive: PropTypes.bool
 };
 
 export default Body;

email_composer/src/components/BodyWrapper.js

@@ -18,6 +18,7 @@ class BodyWrapper extends Component {
         htmlBody={this.props.htmlBody}
         isToolbarHidden={this.state.isToolbarHidden}
         onClickTextEditor={this.handleTextEditor}
+        onDrop={this.props.onDrop}
       />
     );
   }
@@ -29,7 +30,8 @@ class BodyWrapper extends Component {
 
 BodyWrapper.propTypes = {
   getHtmlBody: PropTypes.func,
-  htmlBody: PropTypes.object
+  htmlBody: PropTypes.object,
+  onDrop: PropTypes.func
 };
 
 export default BodyWrapper;

email_composer/src/components/Composer.js

@@ -22,6 +22,12 @@ const Composer = props => (
       getHtmlBody={props.getHtmlBody}
       status={props.status}
       blockRenderMap={props.blockRenderMap}
+      files={props.files}
+      isDragActive={props.isDragActive}
+      onClearFile={props.onClearFile}
+      onDrop={props.onDrop}
+      handleDragLeave={props.handleDragLeave}
+      handleDragOver={props.handleDragOver}
     />
   </div>
 );
@@ -39,7 +45,13 @@ Composer.propTypes = {
   onClickSendMessage: PropTypes.func,
   status: PropTypes.number,
   textSubject: PropTypes.string,
-  toEmails: PropTypes.array
+  toEmails: PropTypes.array,
+  files: PropTypes.array,
+  onDrop: PropTypes.func,
+  onClearFile: PropTypes.func,
+  handleDragLeave: PropTypes.func,
+  handleDragOver: PropTypes.func,
+  isDragActive: PropTypes.bool
 };
 
 export default Composer;

email_composer/src/components/Control.js

@@ -19,7 +19,16 @@ const Control = props => (
     <div disabled={props.status === Status.WAITING}>
       <div className="buttons-container">
         <div className="button-editor">
-          <i className="icon-attach" />
+          <input
+            id="input-attachments"
+            type="file"
+            className="hide-file-input"
+            onChange={props.onDrop}
+            multiple={true}
+          />
+          <label htmlFor="input-attachments">
+            <i className="icon-attach" />
+          </label>
         </div>
         <div
           className="button-editor button-editor-border-left button-editor-border-right"
@@ -65,7 +74,8 @@ export const Status = {
 Control.propTypes = {
   onClickSendMessage: PropTypes.func,
   onClickTextEditor: PropTypes.func,
-  status: PropTypes.number
+  status: PropTypes.number,
+  onDrop: PropTypes.func
 };
 
 export default Control;

email_composer/src/components/DropfileField.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Editor from './EditorWrapper';
+import AttachmentWrapper from './AttachmentWrapper';
 import './dropfilefield.css';
 
 const DropfileField = props => (
@@ -39,16 +40,7 @@ const DropfileField = props => (
 const renderPreview = (files, onClearFile) =>
   files.map((file, index) => {
     return (
-      <div key={index} className="file-container">
-        <div className="file-icon" />
-        <div className="file-info">
-          <span>{file.name}</span>
-          <span>{file.size}</span>
-        </div>
-        <div className="file-delete" onClick={() => onClearFile(file.name)}>
-          <i className="icon-exit" />
-        </div>
-      </div>
+      <AttachmentWrapper key={index} file={file} onClearFile={onClearFile} />
     );
   });