2015-06-25 13:28:49 +02:00
|
|
|
'use strict';
|
|
|
|
|
2015-06-23 10:16:53 +02:00
|
|
|
import React from 'react';
|
2015-09-09 14:11:52 +02:00
|
|
|
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
2015-06-23 10:16:53 +02:00
|
|
|
|
2015-11-20 14:30:24 +01:00
|
|
|
import AclProxy from '../../acl_proxy';
|
2015-10-14 16:17:10 +02:00
|
|
|
import AscribeSpinner from '../../ascribe_spinner';
|
2015-09-15 11:13:17 +02:00
|
|
|
import { getLangText } from '../../../utils/lang_utils';
|
2015-06-29 16:00:26 +02:00
|
|
|
|
2015-11-19 10:43:40 +01:00
|
|
|
|
|
|
|
const { string, number, bool, func } = React.PropTypes;
|
|
|
|
|
|
|
|
const FileDragAndDropPreviewOther = React.createClass({
|
2015-06-23 10:16:53 +02:00
|
|
|
propTypes: {
|
2015-11-19 10:43:40 +01:00
|
|
|
type: string,
|
|
|
|
progress: number,
|
|
|
|
areAssetsDownloadable: bool,
|
|
|
|
toggleUploadProcess: func,
|
2015-11-20 14:30:24 +01:00
|
|
|
downloadUrl: string,
|
|
|
|
showProgress: bool
|
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-11-20 14:30:24 +01:00
|
|
|
const { progress,
|
|
|
|
areAssetsDownloadable,
|
|
|
|
downloadUrl,
|
|
|
|
type,
|
|
|
|
showProgress } = this.props;
|
2015-11-20 15:02:39 +01:00
|
|
|
const style = !showProgress ? { visibility: 'hidden' } : null;
|
2015-06-30 13:53:02 +02:00
|
|
|
let actionSymbol;
|
|
|
|
|
2015-11-20 14:30:24 +01:00
|
|
|
// 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 (progress === 100 && areAssetsDownloadable) {
|
|
|
|
actionSymbol = (
|
|
|
|
<a
|
|
|
|
href={downloadUrl}
|
|
|
|
target="_blank"
|
|
|
|
className="glyphicon glyphicon-download action-file"
|
|
|
|
aria-hidden="true"
|
2016-01-26 13:41:15 +01:00
|
|
|
title={getLangText('Download file')} />
|
2015-11-20 14:30:24 +01:00
|
|
|
);
|
2016-01-26 13:41:15 +01:00
|
|
|
} else if (progress >= 0 && progress < 100) {
|
2015-10-14 16:17:10 +02:00
|
|
|
actionSymbol = (
|
|
|
|
<div className="spinner-file">
|
|
|
|
<AscribeSpinner color='dark-blue' size='md' />
|
|
|
|
</div>
|
|
|
|
);
|
2015-11-20 14:30:24 +01:00
|
|
|
} else {
|
|
|
|
actionSymbol = (
|
2016-01-26 13:41:15 +01:00
|
|
|
<span className='ascribe-icon icon-ascribe-ok action-file' />
|
2015-11-20 14:30:24 +01:00
|
|
|
);
|
2015-06-30 13:53:02 +02:00
|
|
|
}
|
|
|
|
|
2015-06-25 13:28:49 +02:00
|
|
|
return (
|
2016-01-26 13:41:15 +01:00
|
|
|
<div className="file-drag-and-drop-preview">
|
2015-09-09 14:11:52 +02:00
|
|
|
<ProgressBar
|
2015-11-20 14:30:24 +01:00
|
|
|
now={Math.ceil(progress)}
|
|
|
|
style={style}
|
2016-01-26 13:41:15 +01:00
|
|
|
className="ascribe-progress-bar ascribe-progress-bar-xs" />
|
|
|
|
<div className="file-drag-and-drop-preview-other">
|
|
|
|
{actionSymbol}
|
|
|
|
<p style={style}>{'.' + (type ? type : 'file')}</p>
|
2015-06-23 10:16:53 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-07-03 19:08:56 +02:00
|
|
|
export default FileDragAndDropPreviewOther;
|