src/generic-components/componentManager/ComponentManagerContainer.jsx

   1 /*
   2  * ============LICENSE_START===================================================
   3  * SPARKY (AAI UI service)
   4  * ============================================================================
   5  * Copyright © 2017 AT&T Intellectual Property.
   6  * Copyright © 2017 Amdocs
   7  * All rights reserved.
   8  * ============================================================================
   9  * Licensed under the Apache License, Version 2.0 (the "License");
  10  * you may not use this file except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *      http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  * ============LICENSE_END=====================================================
  21  *
  22  * ECOMP and OpenECOMP are trademarks
  23  * and service marks of AT&T Intellectual Property.
  24  */
  25
  26 import React, {Component, PropTypes} from 'react';
  27 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
  28 import Button from 'react-bootstrap/lib/Button';
  29
  30 import i18n from 'utils/i18n/i18n';
  31
  32 const ICON_CLASS_CLOSE = 'fa fa-times';
  33
  34 export default class ComponentManagerContainer extends Component {
  35
  36   static propType = {
  37     id: PropTypes.string,
  38     title: PropTypes.string,
  39     actions: PropTypes.array,
  40     showHeader: PropTypes.bool,
  41     showTitle: PropTypes.bool,
  42     showBorder: PropTypes.bool,
  43   };
  44
  45   static defaultProps = {
  46     id: '',
  47     title: 'Some Title',
  48     actions: [],
  49     showHeader: true,
  50     showTitle: true,
  51     showBorder: true
  52   };
  53
  54   constructor(props) {
  55     super(props);
  56   }
  57
  58   render() {
  59     let {
  60           title,
  61           actions,
  62           children,
  63           showHeader,
  64           showTitle,
  65           showBorder
  66         } = this.props;
  67     let buttons = [];
  68     actions.forEach((action) => {
  69       switch (action.type) {
  70         case 'close':
  71           buttons.push(
  72             <Button
  73               type='submit'
  74               key={action.type}
  75               className='close-button'
  76               onClick={ () => {
  77                 action.callback(action.id);
  78               }}>
  79               <i className={ICON_CLASS_CLOSE} aria-hidden='true'></i>
  80             </Button>
  81           );
  82           break;
  83         case 'custom':
  84           buttons.push(
  85             <Button
  86               type='submit'
  87               key={action.type}
  88               className='custom-button'
  89               onClick={action.callback}>
  90               <i className={'fa ' + action.icon} aria-hidden='true'></i>
  91             </Button>
  92           );
  93           break;
  94       }
  95     });
  96
  97     let containerClass = showBorder
  98       ? 'titled-container titled-container-boarders'
  99       : 'titled-container';
 100     let headerClass = showHeader ? 'titled-container-header' : 'hidden';
 101     let titleClass = showTitle ? '' : 'hidden';
 102
 103     return (
 104       <div className={containerClass}>
 105         <ButtonGroup>{buttons}</ButtonGroup>
 106         <div className={headerClass}>
 107           <span className={titleClass}>{i18n(title)}</span>
 108         </div>
 109         <div className='contents'>
 110           {children}
 111         </div>
 112       </div>
 113     );
 114   }
 115 }