skyquake/plugins/composer/src/src/components/ExportSelectorDialog.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
  20 /**
  21  * Export Selector Dialog component.
  22  * @module ExportSelectorDialog
  23  * @author Kiran Kashalkar <kiran.kashalkar@riftio.com>
  24  */
  25
  26 import React from 'react'
  27
  28 const defaults = {
  29         catalogItemExportFormats: ['mano', 'rift'],
  30         catalogItemExportGrammars: ['osm', 'tosca']
  31 };
  32
  33 export default class ExportSelectorDialog extends React.Component {
  34         constructor(props) {
  35                 super(props);
  36                 this.state = {};
  37                 this.state.onCancel = props.onCancel;
  38                 this.state.onDownload = props.onDownload;
  39                 this.state.onSelectGrammar = props.onSelectGrammar;
  40                 this.state.onSelectFormat = props.onSelectFormat;
  41                 this.state.currentlySelectedFormat = props.currentlySelectedFormat;
  42                 this.state.currentlySelectedGrammar = props.currentlySelectedGrammar;
  43         }
  44
  45         selectFormat = (format, event) => {
  46                 this.setState({
  47                         currentlySelectedFormat: format
  48                 });
  49
  50                 this.state.onSelectFormat.call(this, format);
  51         }
  52
  53         selectGrammar = (grammar, event) => {
  54                 this.setState({
  55                         currentlySelectedGrammar: grammar
  56                 });
  57
  58                 this.state.onSelectGrammar.call(this, grammar);
  59         }
  60
  61         render () {
  62                 let dialogListElements = [];
  63
  64                 let schemaList = defaults.catalogItemExportFormats.map((format) => {
  65                         let classNames = 'action Button';
  66                         if (format == this.state.currentlySelectedFormat) {
  67                                 classNames += ' primary-action';
  68                         } else {
  69                                 classNames += ' secondary-action';
  70                         }
  71
  72                         return (
  73                                 <li>
  74                                         <a className={classNames} onClick={this.selectFormat.bind(this, format)} style={{textTransform: 'uppercase'}}>{format}</a>
  75                                 </li>
  76                         );
  77                 });
  78
  79                 let grammarList = defaults.catalogItemExportGrammars.map((grammar) => {
  80                         let classNames = 'action Button';
  81                         if (grammar == this.state.currentlySelectedGrammar) {
  82                                 classNames += ' primary-action';
  83                         } else {
  84                                 classNames += ' secondary-action';
  85                         }
  86
  87                         return (
  88                                 <li>
  89                                         <a className={classNames} onClick={this.selectGrammar.bind(this, grammar)} style={{textTransform: 'uppercase'}}>{grammar}</a>
  90                                 </li>
  91                         );
  92                 });
  93
  94                 dialogListElements.push(
  95                         <li>
  96                                 <ul>
  97                                         <li>Select a descriptor schema:</li>
  98                                         {schemaList}
  99                                 </ul>
 100                                 <ul>
 101                                         <li>Select a descriptor grammar:</li>
 102                                         {grammarList}
 103                                 </ul>
 104                         </li>
 105                 );
 106
 107                 dialogListElements.push(
 108                         <li>
 109                                 <a className="action Button" onClick={this.state.onCancel} style={{textTransform: 'capitalize', marginTop: '4rem', float: 'right'}}>Cancel</a>
 110                                 <a className="action Button" onClick={this.state.onDownload} style={{textTransform: 'capitalize', marginTop: '4rem', float: 'right'}}>Download</a>
 111                         </li>
 112                 );
 113
 114                 return (
 115                         <div className="actions panel">
 116                                 <div className="panel-header" style={{minWidth: '30rem'}}>
 117                                         <h1>Export Catalog Item</h1>
 118                                 </div>
 119                                 <div className="panel-body">
 120                                         <ul className="schema-selector">
 121                                                 {dialogListElements}
 122                                         </ul>
 123                                 </div>
 124                         </div>
 125                 );
 126         }
 127 }