ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +01:00
Code Issues Releases Wiki Activity

Don't render fileDragAndDropDialog if it's not needed

Browse Source
This commit is contained in:
Brett Sun 2015-12-08 18:16:11 +01:00
parent a0db6d3037
commit 04d7e6951a
2 changed files with 109 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
View File

@ -1,9 +1,11 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import FileDragAndDropDialog from './file_drag_and_drop_dialog'; 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 FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
import { FileStatus } from '../react_s3_fine_uploader_utils'; import { FileStatus } from '../react_s3_fine_uploader_utils';
@ -22,11 +24,11 @@ let FileDragAndDrop = React.createClass({
onDrop: React.PropTypes.func.isRequired, onDrop: React.PropTypes.func.isRequired,
onDragOver: React.PropTypes.func, onDragOver: React.PropTypes.func,
onInactive: React.PropTypes.func, onInactive: React.PropTypes.func,
filesToUpload: React.PropTypes.array,
handleDeleteFile: React.PropTypes.func, handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func, handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func, handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func, handleResumeFile: React.PropTypes.func,
handleRetryFiles: React.PropTypes.func,
enableLocalHashing: React.PropTypes.bool, enableLocalHashing: React.PropTypes.bool,
uploadMethod: React.PropTypes.string, uploadMethod: React.PropTypes.string,
@ -142,73 +144,79 @@ let FileDragAndDrop = React.createClass({
this.refs.fileSelector.getDOMNode().dispatchEvent(evt); this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
}, },
getPreviewIterator() {
const { areAssetsDownloadable, areAssetsEditable, filesToUpload } = this.props;
return (
<FileDragAndDropPreviewIterator
files={filesToUpload}
handleDeleteFile={this.handleDeleteFile}
handleCancelFile={this.handleCancelFile}
handlePauseFile={this.handlePauseFile}
handleResumeFile={this.handleResumeFile}
areAssetsDownloadable={areAssetsDownloadable}
areAssetsEditable={areAssetsEditable}/>
);
},
getUploadDialog() {
const { enableLocalHashing, fileClassToUpload, multiple, uploadMethod } = this.props;
return (
<FileDragAndDropDialog
multipleFiles={multiple}
onClick={this.handleOnClick}
enableLocalHashing={enableLocalHashing}
uploadMethod={uploadMethod}
fileClassToUpload={fileClassToUpload} />
);
},
render: function () { render: function () {
const { const {
filesToUpload, filesToUpload,
dropzoneInactive, dropzoneInactive,
className,
hashingProgress, hashingProgress,
handleCancelHashing, handleCancelHashing,
multiple, multiple,
enableLocalHashing,
uploadMethod,
fileClassToUpload, fileClassToUpload,
areAssetsDownloadable,
areAssetsEditable,
allowedExtensions } = this.props; allowedExtensions } = this.props;
// has files only is true if there are files that do not have the status deleted, canceled, or failed // has files only is true if there are files that do not have the status deleted, canceled, or failed
let hasFiles = filesToUpload const hasFiles = filesToUpload
.filter((file) => { .filter((file) => {
return file.status !== FileStatus.DELETED && return file.status !== FileStatus.DELETED &&
file.status !== FileStatus.CANCELED && file.status !== FileStatus.CANCELED &&
file.status !== FileStatus.UPLOAD_FAILED && file.status !== FileStatus.UPLOAD_FAILED &&
file.size !== -1; file.size !== -1;
}) })
.length > 0; .length > 0;
let updatedClassName = hasFiles ? 'has-files ' : ''; const failedFiles = filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_FAILED);
updatedClassName += dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone'; let hasError = showError && errorClass && failedFiles.length > 0;
updatedClassName += ' file-drag-and-drop';
// if !== -2: triggers a FileDragAndDrop-global spinner // if !== -2: triggers a FileDragAndDrop-global spinner
if(hashingProgress !== -2) { if(hashingProgress !== -2) {
return ( return (
<div className={className}> <div className="file-drag-and-drop-hashing-dialog">
<div className="file-drag-and-drop-hashing-dialog"> <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
<p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p> <p>
<p> <a onClick={handleCancelHashing}> {getLangText('Cancel hashing')}</a>
<a onClick={handleCancelHashing}> {getLangText('Cancel hashing')}</a> </p>
</p> <ProgressBar
<ProgressBar now={Math.ceil(hashingProgress)}
now={Math.ceil(hashingProgress)} label="%(percent)s%"
label="%(percent)s%" className="ascribe-progress-bar"/>
className="ascribe-progress-bar"/>
</div>
</div> </div>
); );
} else { } else {
return ( return (
<div <div
className={updatedClassName} className={classNames('file-drag-and-drop', dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone', { 'has-files': hasFiles })}
onDrag={this.handleDrop} onDrag={this.handleDrop}
onDragOver={this.handleDragOver} onDragOver={this.handleDragOver}
onDrop={this.handleDrop}> onDrop={this.handleDrop}>
<FileDragAndDropDialog {!hasFiles && !hasError ? this.getUploadDialog() : null}
multipleFiles={multiple}
hasFiles={hasFiles}
onClick={this.handleOnClick}
enableLocalHashing={enableLocalHashing}
uploadMethod={uploadMethod}
fileClassToUpload={fileClassToUpload} />
<FileDragAndDropPreviewIterator
files={filesToUpload}
handleDeleteFile={this.handleDeleteFile}
handleCancelFile={this.handleCancelFile}
handlePauseFile={this.handlePauseFile}
handleResumeFile={this.handleResumeFile}
areAssetsDownloadable={areAssetsDownloadable}
areAssetsEditable={areAssetsEditable}/>
{/* {/*
Opera doesn't trigger simulated click events Opera doesn't trigger simulated click events
if the targeted input has `display:none` set. if the targeted input has `display:none` set.

120
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
View File

@ -9,7 +9,6 @@ import { getCurrentQueryParams } from '../../../utils/url_utils';
let FileDragAndDropDialog = React.createClass({ let FileDragAndDropDialog = React.createClass({
propTypes: { propTypes: {
hasFiles: React.PropTypes.bool,
multipleFiles: React.PropTypes.bool, multipleFiles: React.PropTypes.bool,
enableLocalHashing: React.PropTypes.bool, enableLocalHashing: React.PropTypes.bool,
uploadMethod: React.PropTypes.string, uploadMethod: React.PropTypes.string,
@ -36,80 +35,75 @@ let FileDragAndDropDialog = React.createClass({
render() { render() {
const { const {
hasFiles,
multipleFiles, multipleFiles,
enableLocalHashing, enableLocalHashing,
uploadMethod, uploadMethod,
fileClassToUpload, fileClassToUpload,
onClick } = this.props; onClick } = this.props;
if (hasFiles) { if (enableLocalHashing && !uploadMethod) {
return null; const currentQueryParams = getCurrentQueryParams();
const queryParamsHash = Object.assign({}, currentQueryParams);
queryParamsHash.method = 'hash';
const queryParamsUpload = Object.assign({}, currentQueryParams);
queryParamsUpload.method = 'upload';
return (
<div className="file-drag-and-drop-dialog present-options">
<p>{getLangText('Would you rather')}</p>
{/*
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.
*/}
<Link
to={`/${window.location.pathname.split('/').pop()}`}
query={queryParamsHash}>
<span className="btn btn-default btn-sm">
{getLangText('Hash your work')}
</span>
</Link>
<span> or </span>
<Link
to={`/${window.location.pathname.split('/').pop()}`}
query={queryParamsUpload}>
<span className="btn btn-default btn-sm">
{getLangText('Upload and hash your work')}
</span>
</Link>
</div>
);
} else { } else {
if (enableLocalHashing && !uploadMethod) { if (multipleFiles) {
const currentQueryParams = getCurrentQueryParams();
const queryParamsHash = Object.assign({}, currentQueryParams);
queryParamsHash.method = 'hash';
const queryParamsUpload = Object.assign({}, currentQueryParams);
queryParamsUpload.method = 'upload';
return ( return (
<div className="file-drag-and-drop-dialog present-options"> <span className="file-drag-and-drop-dialog">
<p>{getLangText('Would you rather')}</p> {this.getDragDialog(fileClassToUpload.plural)}
{/* <span
The frontend in live is hosted under /app, className="btn btn-default"
Since `Link` is appending that base url, if its defined onClick={onClick}>
by itself, we need to make sure to not set it at this point. {getLangText('choose %s to upload', fileClassToUpload.plural)}
Otherwise it will be appended twice. </span>
*/} </span>
<Link
to={`/${window.location.pathname.split('/').pop()}`}
query={queryParamsHash}>
<span className="btn btn-default btn-sm">
{getLangText('Hash your work')}
</span>
</Link>
<span> or </span>
<Link
to={`/${window.location.pathname.split('/').pop()}`}
query={queryParamsUpload}>
<span className="btn btn-default btn-sm">
{getLangText('Upload and hash your work')}
</span>
</Link>
</div>
); );
} else { } else {
if (multipleFiles) { const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
return ( : getLangText('choose a %s to upload', fileClassToUpload.singular);
<span className="file-drag-and-drop-dialog">
{this.getDragDialog(fileClassToUpload.plural)}
<span
className="btn btn-default"
onClick={onClick}>
{getLangText('choose %s to upload', fileClassToUpload.plural)}
</span>
</span>
);
} else {
const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
: getLangText('choose a %s to upload', fileClassToUpload.singular);
return ( return (
<span className="file-drag-and-drop-dialog"> <span className="file-drag-and-drop-dialog">
{this.getDragDialog(fileClassToUpload.singular)} {this.getDragDialog(fileClassToUpload.singular)}
<span <span
className="btn btn-default" className="btn btn-default"
onClick={onClick}> onClick={onClick}>
{dialog} {dialog}
</span>
</span> </span>
); </span>
} );
} }
} }
} }