src/generic-components/componentManager/ComponentManagerContainer.jsx

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