4 * Copyright 2016 RIFT.IO Inc
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
21 import React
from 'react'
22 import moment
from 'moment'
23 import ClassNames
from 'classnames'
24 import PureRenderMixin
from 'react-addons-pure-render-mixin'
25 import CatalogPackageManagerStore
from '../stores/CatalogPackageManagerStore'
26 import CatalogPackageManagerActions
from '../actions/CatalogPackageManagerActions'
27 import Button
from './Button'
29 import '../styles/CatalogPackageManager.scss'
30 // import imgVideoFileType from '../images/video167.svg'
31 // import imgZipFileType from '../images/zipped2.svg'
32 // import imgUnknownFileType from '../images/file87.svg'
33 import imgCancel
from '../../../node_modules/open-iconic/svg/circle-x.svg'
35 const CatalogPackageManager
= React
.createClass({
36 mixins
: [PureRenderMixin
],
38 return CatalogPackageManagerStore
.getState();
43 componentWillMount() {
44 CatalogPackageManagerStore
.listen(this.onChange
);
51 componentDidUpdate() {
53 componentWillUnmount() {
54 CatalogPackageManagerStore
.unlisten(this.onChange
);
57 function getIndicator(download
) {
58 if (download
.pending
) {
60 <div className
="file-progress-indicator">
61 <div className
="file-progress-indicator-value" style
={{width
: (download
.progress
|| 0) + '%'}}></div
>
66 function getDownloadLink(download
) {
67 if (download
.success
) {
69 const duration
= moment
.duration(moment(download
.urlValidUntil
).diff(now
));
71 <div className
="file-download">
72 <a className
="file-download-link" href
={download
.url
}>Download Package
</a
>
73 {/*<span>expires </span> {duration.humanize(true)}*/}
80 function getMessage(catalogPackage) {
81 if (catalogPackage.success && catalogPackage.url) {
82 return getDownloadLink(catalogPackage);
85 <div className="message">{catalogPackage.message}</div>
89 var createItem = function (catalogPackage) {
90 const onClickRemove = function () {
91 CatalogPackageManagerActions.removeCatalogOperation(catalogPackage);
93 const classNames = ClassNames('item', {'-error': catalogPackage.error, '-success': catalogPackage.success});
95 <div ref="catalogPackage" className={classNames} key={catalogPackage.id}>
96 <div className="item-body">
97 <h2 title={catalogPackage.name}>{catalogPackage.name}</h2>
98 <img src={catalogPackage.icon} />
99 {getIndicator(catalogPackage)}
100 {getMessage(catalogPackage)}
102 <div className="item-actions">
103 <Button className="action-remove-catalog-package" onClick={onClickRemove} src={imgCancel} />
109 const operations = this.state.operations || [];
111 <div className="CatalogPackageManager">
112 <div className="items">
113 {operations.map(createItem)}
122 export default CatalogPackageManager;