2015-06-25 13:28:49 +02:00
|
|
|
'use strict';
|
|
|
|
|
2015-06-23 10:16:53 +02:00
|
|
|
import React from 'react';
|
|
|
|
import ProgressBar from 'react-progressbar';
|
|
|
|
|
2015-06-30 13:53:02 +02:00
|
|
|
import AppConstants from '../../constants/application_constants';
|
2015-07-23 17:17:48 +02:00
|
|
|
import { getLangText } from '../../utils/lang_utils.js';
|
2015-06-29 16:00:26 +02:00
|
|
|
|
2015-06-23 10:16:53 +02:00
|
|
|
let FileDragAndDropPreviewOther = React.createClass({
|
|
|
|
propTypes: {
|
|
|
|
type: React.PropTypes.string,
|
2015-06-25 13:46:10 +02:00
|
|
|
progress: React.PropTypes.number,
|
2015-06-30 13:53:02 +02:00
|
|
|
areAssetsDownloadable: React.PropTypes.bool,
|
|
|
|
toggleUploadProcess: React.PropTypes.func,
|
2015-07-01 10:00:53 +02:00
|
|
|
downloadUrl: React.PropTypes.string
|
2015-06-23 10:16:53 +02:00
|
|
|
},
|
|
|
|
|
2015-06-29 16:00:26 +02:00
|
|
|
getInitialState() {
|
|
|
|
return {
|
2015-06-30 13:53:02 +02:00
|
|
|
paused: true
|
2015-06-29 16:00:26 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2015-06-30 13:53:02 +02:00
|
|
|
toggleUploadProcess(e) {
|
2015-06-29 16:00:26 +02:00
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
2015-06-30 13:53:02 +02:00
|
|
|
|
2015-06-29 16:00:26 +02:00
|
|
|
this.setState({
|
2015-06-30 13:53:02 +02:00
|
|
|
paused: !this.state.paused
|
2015-06-29 16:00:26 +02:00
|
|
|
});
|
|
|
|
|
2015-06-30 13:53:02 +02:00
|
|
|
this.props.toggleUploadProcess();
|
|
|
|
},
|
|
|
|
|
2015-06-23 10:16:53 +02:00
|
|
|
render() {
|
2015-06-30 13:53:02 +02:00
|
|
|
|
|
|
|
let actionSymbol;
|
|
|
|
|
|
|
|
if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
|
2015-07-03 19:08:56 +02:00
|
|
|
actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
|
2015-06-30 13:53:02 +02:00
|
|
|
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
|
2015-07-03 19:08:56 +02:00
|
|
|
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
|
2015-06-30 13:53:02 +02:00
|
|
|
} else if(this.props.progress === 100) {
|
|
|
|
|
|
|
|
// only if assets are actually downloadable, there should be a download icon if the process is already at
|
|
|
|
// 100%. If not, no actionSymbol should be displayed
|
|
|
|
if(this.props.areAssetsDownloadable) {
|
2015-07-03 19:08:56 +02:00
|
|
|
actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
|
2015-06-30 13:53:02 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
actionSymbol = <img height={35} src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
|
|
|
|
}
|
|
|
|
|
2015-06-25 13:28:49 +02:00
|
|
|
return (
|
|
|
|
<div
|
2015-06-23 10:16:53 +02:00
|
|
|
className="file-drag-and-drop-preview">
|
|
|
|
<ProgressBar completed={this.props.progress} color="black"/>
|
|
|
|
<div className="file-drag-and-drop-preview-table-wrapper">
|
|
|
|
<div className="file-drag-and-drop-preview-other">
|
2015-06-30 13:53:02 +02:00
|
|
|
{actionSymbol}
|
2015-09-14 17:38:26 +02:00
|
|
|
<p>{'.' + this.props.type}</p>
|
2015-06-23 10:16:53 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-07-03 19:08:56 +02:00
|
|
|
export default FileDragAndDropPreviewOther;
|