ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-28 00:28:00 +02:00
Code Issues Releases Wiki Activity

Generalize UploadButton styling

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-11-17 11:22:24 +01:00
parent 4f0c0fe65a
commit 14621b5b38
4 changed files with 116 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_forms/form_register_piece.js
View File

@ -145,7 +145,7 @@ let RegisterPieceForm = React.createClass({
<Property
name="thumbnail_file">
<InputFineUploader
fileInputElement={UploadButton}
fileInputElement={UploadButton({ className: 'btn btn-secondary btn-sm' })}
createBlobRoutine={{
url: ApiUrls.blob_thumbnails
}}

2
js/components/ascribe_settings/contract_settings_update_button.js
View File

@ -55,7 +55,7 @@ let ContractSettingsUpdateButton = React.createClass({
render() {
return (
<ReactS3FineUploader
fileInputElement={UploadButton}
fileInputElement={UploadButton()}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract'

217
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -10,130 +10,133 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
const { func, array, bool, shape, string } = React.PropTypes;
let UploadButton = React.createClass({
propTypes: {
onDrop: func.isRequired,
filesToUpload: array,
multiple: bool,
// For simplification purposes we're just going to use this prop as a
// label for the upload button
fileClassToUpload: shape({
singular: string,
plural: string
}),
export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
return React.createClass({
displayName: 'UploadButton',
allowedExtensions: string,
propTypes: {
onDrop: func.isRequired,
filesToUpload: array,
multiple: bool,
handleCancelFile: func // provided by ReactS3FineUploader
},
// For simplification purposes we're just going to use this prop as a
// label for the upload button
fileClassToUpload: shape({
singular: string,
plural: string
}),
handleDrop(event) {
event.preventDefault();
event.stopPropagation();
let files = event.target.files;
allowedExtensions: string,
if(typeof this.props.onDrop === 'function' && files) {
this.props.onDrop(files);
}
handleCancelFile: func // provided by ReactS3FineUploader
},
},
handleDrop(event) {
event.preventDefault();
event.stopPropagation();
let files = event.target.files;
getUploadingFiles() {
return this.props.filesToUpload.filter((file) => file.status === 'uploading');
},
if(typeof this.props.onDrop === 'function' && files) {
this.props.onDrop(files);
}
getUploadedFile() {
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
},
},
handleOnClick() {
const uploadingFiles = this.getUploadingFiles();
const uploadedFile = this.getUploadedFile();
getUploadingFiles() {
return this.props.filesToUpload.filter((file) => file.status === 'uploading');
},
if(uploadedFile) {
this.props.handleCancelFile(uploadedFile.id);
}
if(uploadingFiles.length === 0) {
// We only want the button to be clickable if there are no files currently uploading
getUploadedFile() {
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
},
// Firefox only recognizes the simulated mouse click if bubbles is set to true,
// but since Google Chrome propagates the event much further than needed, we
// need to stop propagation as soon as the event is created
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
handleOnClick() {
const uploadingFiles = this.getUploadingFiles();
const uploadedFile = this.getUploadedFile();
evt.stopPropagation();
this.refs.fileinput.getDOMNode().dispatchEvent(evt);
}
},
if(uploadedFile) {
this.props.handleCancelFile(uploadedFile.id);
}
if(uploadingFiles.length === 0) {
// We only want the button to be clickable if there are no files currently uploading
getButtonLabel() {
let { filesToUpload, fileClassToUpload } = this.props;
// Firefox only recognizes the simulated mouse click if bubbles is set to true,
// but since Google Chrome propagates the event much further than needed, we
// need to stop propagation as soon as the event is created
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
// filter invalid files that might have been deleted or canceled...
filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
evt.stopPropagation();
this.refs.fileinput.getDOMNode().dispatchEvent(evt);
}
},
if(this.getUploadingFiles().length !== 0) {
return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
} else {
return fileClassToUpload.singular;
}
},
getButtonLabel() {
let { filesToUpload, fileClassToUpload } = this.props;
getUploadedFileLabel() {
const uploadedFile = this.getUploadedFile();
// filter invalid files that might have been deleted or canceled...
filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
if(uploadedFile) {
if(this.getUploadingFiles().length !== 0) {
return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
} else {
return fileClassToUpload.singular;
}
},
getUploadedFileLabel() {
const uploadedFile = this.getUploadedFile();
if(uploadedFile) {
return (
<span>
<Glyphicon glyph="ok" />
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
</span>
);
} else {
return (
<span>{getLangText('No file chosen')}</span>
);
}
},
render() {
let { multiple,
allowedExtensions } = this.props;
/*
* We do not want a button that submits here.
* As UploadButton could be used in forms that want to be submitted independent
* of clicking the selector.
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
*/
return (
<span>
<Glyphicon glyph="ok" />
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
</span>
);
} else {
return (
<span>{getLangText('No file chosen')}</span>
<div className="upload-button-wrapper">
<a
onClick={this.handleOnClick}
className={className}
disabled={this.getUploadingFiles().length !== 0}>
{this.getButtonLabel()}
<input
multiple={multiple}
ref="fileinput"
type="file"
style={{
display: 'none',
height: 0,
width: 0
}}
onChange={this.handleDrop}
accept={allowedExtensions}/>
</a>
{this.getUploadedFileLabel()}
</div>
);
}
},
render() {
let { multiple,
allowedExtensions } = this.props;
/*
* We do not want a button that submits here.
* As UploadButton could be used in forms that want to be submitted independent
* of clicking the selector.
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
*/
return (
<div className="upload-button-wrapper">
<a
onClick={this.handleOnClick}
className="btn btn-default btn-sm margin-left-2px"
disabled={this.getUploadingFiles().length !== 0}>
{this.getButtonLabel()}
<input
multiple={multiple}
ref="fileinput"
type="file"
style={{
display: 'none',
height: 0,
width: 0
}}
onChange={this.handleDrop}
accept={allowedExtensions}/>
</a>
{this.getUploadedFileLabel()}
</div>
);
}
});
export default UploadButton;
});
}

8
js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
View File

@ -253,7 +253,7 @@ const PRRegisterPieceForm = React.createClass({
name="digitalWorkKey"
label={getLangText('Select the PDF with your work')}>
<InputFineuploader
fileInputElement={UploadButton}
fileInputElement={UploadButton()}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
createBlobRoutine={{
@ -279,7 +279,7 @@ const PRRegisterPieceForm = React.createClass({
name="thumbnailKey"
label={getLangText('Featured Cover photo')}>
<InputFineuploader
fileInputElement={UploadButton}
fileInputElement={UploadButton()}
createBlobRoutine={{
url: ApiUrls.blob_thumbnails
}}
@ -305,7 +305,7 @@ const PRRegisterPieceForm = React.createClass({
name="supportingMaterials"
label={getLangText('Supporting Materials (Optional)')}>
<InputFineuploader
fileInputElement={UploadButton}
fileInputElement={UploadButton()}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
createBlobRoutine={this.getCreateBlobRoutine()}
@ -327,7 +327,7 @@ const PRRegisterPieceForm = React.createClass({
name="proofOfPayment"
label={getLangText('Proof of payment')}>
<InputFineuploader
fileInputElement={UploadButton}
fileInputElement={UploadButton()}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
createBlobRoutine={this.getCreateBlobRoutine()}