From 04d7e6951a8feea5c294b846852521e265736870 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Tue, 8 Dec 2015 18:16:11 +0100 Subject: [PATCH] Don't render fileDragAndDropDialog if it's not needed --- .../file_drag_and_drop.js | 96 +++++++------- .../file_drag_and_drop_dialog.js | 120 +++++++++--------- 2 files changed, 109 insertions(+), 107 deletions(-) diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js index cf3ac775..983c0655 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js @@ -1,9 +1,11 @@ 'use strict'; import React from 'react'; +import classNames from 'classnames'; import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import FileDragAndDropDialog from './file_drag_and_drop_dialog'; +import FileDragAndDropErrorDialog from './file_drag_and_drop_error_dialog'; import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator'; import { FileStatus } from '../react_s3_fine_uploader_utils'; @@ -22,11 +24,11 @@ let FileDragAndDrop = React.createClass({ onDrop: React.PropTypes.func.isRequired, onDragOver: React.PropTypes.func, onInactive: React.PropTypes.func, - filesToUpload: React.PropTypes.array, handleDeleteFile: React.PropTypes.func, handleCancelFile: React.PropTypes.func, handlePauseFile: React.PropTypes.func, handleResumeFile: React.PropTypes.func, + handleRetryFiles: React.PropTypes.func, enableLocalHashing: React.PropTypes.bool, uploadMethod: React.PropTypes.string, @@ -142,73 +144,79 @@ let FileDragAndDrop = React.createClass({ this.refs.fileSelector.getDOMNode().dispatchEvent(evt); }, + getPreviewIterator() { + const { areAssetsDownloadable, areAssetsEditable, filesToUpload } = this.props; + + return ( + + ); + }, + + getUploadDialog() { + const { enableLocalHashing, fileClassToUpload, multiple, uploadMethod } = this.props; + + return ( + + ); + }, + render: function () { const { filesToUpload, dropzoneInactive, - className, hashingProgress, handleCancelHashing, multiple, - enableLocalHashing, - uploadMethod, fileClassToUpload, - areAssetsDownloadable, - areAssetsEditable, allowedExtensions } = this.props; // has files only is true if there are files that do not have the status deleted, canceled, or failed - let hasFiles = filesToUpload - .filter((file) => { - return file.status !== FileStatus.DELETED && - file.status !== FileStatus.CANCELED && - file.status !== FileStatus.UPLOAD_FAILED && - file.size !== -1; - }) - .length > 0; + const hasFiles = filesToUpload + .filter((file) => { + return file.status !== FileStatus.DELETED && + file.status !== FileStatus.CANCELED && + file.status !== FileStatus.UPLOAD_FAILED && + file.size !== -1; + }) + .length > 0; - let updatedClassName = hasFiles ? 'has-files ' : ''; - updatedClassName += dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone'; - updatedClassName += ' file-drag-and-drop'; + const failedFiles = filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_FAILED); + let hasError = showError && errorClass && failedFiles.length > 0; // if !== -2: triggers a FileDragAndDrop-global spinner if(hashingProgress !== -2) { return ( -
-
-

{getLangText('Computing hash(es)... This may take a few minutes.')}

-

- {getLangText('Cancel hashing')} -

- -
+
+

{getLangText('Computing hash(es)... This may take a few minutes.')}

+

+ {getLangText('Cancel hashing')} +

+
); } else { return (
- - + {!hasFiles && !hasError ? this.getUploadDialog() : null} {/* Opera doesn't trigger simulated click events if the targeted input has `display:none` set. diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js index 25552819..738fabcf 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js @@ -9,7 +9,6 @@ import { getCurrentQueryParams } from '../../../utils/url_utils'; let FileDragAndDropDialog = React.createClass({ propTypes: { - hasFiles: React.PropTypes.bool, multipleFiles: React.PropTypes.bool, enableLocalHashing: React.PropTypes.bool, uploadMethod: React.PropTypes.string, @@ -36,80 +35,75 @@ let FileDragAndDropDialog = React.createClass({ render() { const { - hasFiles, multipleFiles, enableLocalHashing, uploadMethod, fileClassToUpload, onClick } = this.props; - if (hasFiles) { - return null; + if (enableLocalHashing && !uploadMethod) { + const currentQueryParams = getCurrentQueryParams(); + + const queryParamsHash = Object.assign({}, currentQueryParams); + queryParamsHash.method = 'hash'; + + const queryParamsUpload = Object.assign({}, currentQueryParams); + queryParamsUpload.method = 'upload'; + + return ( +
+

{getLangText('Would you rather')}

+ {/* + The frontend in live is hosted under /app, + Since `Link` is appending that base url, if its defined + by itself, we need to make sure to not set it at this point. + Otherwise it will be appended twice. + */} + + + {getLangText('Hash your work')} + + + + or + + + + {getLangText('Upload and hash your work')} + + +
+ ); } else { - if (enableLocalHashing && !uploadMethod) { - const currentQueryParams = getCurrentQueryParams(); - - const queryParamsHash = Object.assign({}, currentQueryParams); - queryParamsHash.method = 'hash'; - - const queryParamsUpload = Object.assign({}, currentQueryParams); - queryParamsUpload.method = 'upload'; - + if (multipleFiles) { return ( -
-

{getLangText('Would you rather')}

- {/* - The frontend in live is hosted under /app, - Since `Link` is appending that base url, if its defined - by itself, we need to make sure to not set it at this point. - Otherwise it will be appended twice. - */} - - - {getLangText('Hash your work')} - - - - or - - - - {getLangText('Upload and hash your work')} - - -
+ + {this.getDragDialog(fileClassToUpload.plural)} + + {getLangText('choose %s to upload', fileClassToUpload.plural)} + + ); } else { - if (multipleFiles) { - return ( - - {this.getDragDialog(fileClassToUpload.plural)} - - {getLangText('choose %s to upload', fileClassToUpload.plural)} - - - ); - } else { - const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular) - : getLangText('choose a %s to upload', fileClassToUpload.singular); + const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular) + : getLangText('choose a %s to upload', fileClassToUpload.singular); - return ( - - {this.getDragDialog(fileClassToUpload.singular)} - - {dialog} - + return ( + + {this.getDragDialog(fileClassToUpload.singular)} + + {dialog} - ); - } + + ); } } }