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
;