skyquake/plugins/composer/src/src/components/CatalogPackageManager.js

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   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
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  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.
  17  *
  18  */
  19 'use strict';
  20
  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'
  28
  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'
  34
  35 const CatalogPackageManager = React.createClass({
  36         mixins: [PureRenderMixin],
  37         getInitialState() {
  38                 return CatalogPackageManagerStore.getState();
  39         },
  40         getDefaultProps() {
  41                 return {};
  42         },
  43         componentWillMount() {
  44                 CatalogPackageManagerStore.listen(this.onChange);
  45         },
  46         componentDidMount() {
  47         },
  48         onChange(state) {
  49                 this.setState(state);
  50         },
  51         componentDidUpdate() {
  52         },
  53         componentWillUnmount() {
  54                 CatalogPackageManagerStore.unlisten(this.onChange);
  55         },
  56         render() {
  57                 function getIndicator(download) {
  58                         if (download.pending) {
  59                                 return (
  60                                         <div className="file-progress-indicator">
  61                                                 <div className="file-progress-indicator-value" style={{width: (download.progress || 0) + '%'}}></div>
  62                                         </div>
  63                                 );
  64                         }
  65                 }
  66                 function getDownloadLink(download) {
  67                         if (download.success) {
  68                                 const now = moment();
  69                                 const duration = moment.duration(moment(download.urlValidUntil).diff(now));
  70                                 return (
  71                                         <div className="file-download">
  72                                                 <a className="file-download-link" href={download.url}>Download Package</a>
  73                                                 <span>expires&nbsp;</span> {duration.humanize(true)}
  74
  75                                         </div>
  76                                 );
  77                         }
  78                 }
  79
  80                 function getMessage(catalogPackage) {
  81                         if (catalogPackage.success && catalogPackage.url) {
  82                                 return getDownloadLink(catalogPackage);
  83                         }
  84                         return (
  85                                 <div className="message">{catalogPackage.message}</div>
  86                         );
  87                 }
  88
  89                 var createItem = function (catalogPackage) {
  90                         const onClickRemove = function () {
  91                                 CatalogPackageManagerActions.removeCatalogOperation(catalogPackage);
  92                         };
  93                         const classNames = ClassNames('item', {'-error': catalogPackage.error, '-success': catalogPackage.success});
  94                         return (
  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)}
 101                                         </div>
 102                                         <div className="item-actions">
 103                                                 <Button className="action-remove-catalog-package" onClick={onClickRemove} src={imgCancel} />
 104                                         </div>
 105                                 </div>
 106                         );
 107                 };
 108
 109                 const operations = this.state.operations || [];
 110                 return (
 111                         <div className="CatalogPackageManager">
 112                                 <div className="items">
 113                                         {operations.map(createItem)}
 114                                 </div>
 115                         </div>
 116                 );
 117
 118         }
 119
 120 });
 121
 122 export default CatalogPackageManager;