sort components into widgets and views

src/widgets/attachment.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import FileProgress from './file-progress.jsx';
+
+export default class Attachment extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      downloader: null,
+      progress: 0
+    };
+
+    this.downloadFile = this.downloadFile.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  downloadFile(url, filename, mimetype) {
+    var downloader = this.props.tinode.getLargeFileHelper();
+    this.setState({downloader: downloader});
+    downloader.download(url, filename, mimetype, (loaded) => {
+      this.setState({progress: loaded / this.props.size});
+    }).then(() => {
+      this.setState({downloader: null, progress: 0});
+    }).catch((err) => {
+      if (err) {
+        this.props.onError("Error downloading file: " + err.message, 'err');
+      }
+      this.setState({downloader: null, progress: 0});
+    });
+  }
+
+  handleCancel() {
+    if (this.props.uploader) {
+      this.props.onCancelUpload();
+    } else if (this.state.downloader) {
+      this.state.downloader.cancel();
+    }
+  }
+
+  render() {
+    let filename = this.props.filename || 'file_attachment';
+    if (filename.length > 36) {
+      filename = filename.substr(0, 16) + '...' + filename.substr(-16);
+    }
+    let size = this.props.size > 0 ?
+      <span className="small gray">({bytesToHumanSize(this.props.size)})</span> :
+      null;
+
+    // Detect if the download URL is relative or absolute.
+    // If the URL is relative use LargeFileHelper to attach authentication
+    // credentials to the request.
+    let url, helperFunc;
+    if (!this.props.uploader && !this.state.downloader &&
+        !(/^(?:(?:[a-z]+:)?\/\/)/i.test(this.props.downloadUrl))) {
+      // Relative URL. Use download helper.
+      url = "javascript:;";
+      helperFunc = (e) => {
+        this.downloadFile(this.props.downloadUrl, this.props.filename, this.props.mimetype);
+      };
+    } else {
+      url = this.props.downloadUrl;
+      helperFunc = null;
+    }
+    return (
+      <div className="attachment">
+        <div><i className="material-icons big gray">insert_drive_file</i></div>
+        <div className="flex-column">
+          <div>{filename} {size}</div>
+          {this.props.uploader || this.state.downloader ?
+            <FileProgress progress={this.props.uploader ? this.props.progress : this.state.progress}
+              onCancel={this.handleCancel} />
+            :
+            <div><a href={url} download={this.props.filename} onClick={helperFunc} >
+              <i className="material-icons">file_download</i> save
+            </a></div>
+          }
+        </div>
+      </div>
+    );
+  }
+};