src/generic-components/OutputToggle.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import React from 'react';
  22 import Col from 'react-bootstrap/lib/Col';
  23 import Row from 'react-bootstrap/lib/Row';
  24 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
  25
  26 let PAGINATION_CONSTANT = GlobalExtConstants.PAGINATION_CONSTANT;
  27
  28 const OutputToggle = (props) => {
  29
  30   return (
  31       <div className="addPaddingSide">
  32           <Row className='show-grid'>
  33              <Col md={8}>
  34                 <button type='button' className={'btn ' + ((props.scope.state.viewName === "CardLayout") ? 'btn-primary' : 'btn-outline-secondary')} value="CardLayout" onClick={(e) => props.scope.setViewName(e)}><i className={'icon-content-gridL ' + ((props.scope.state.viewName === "CardLayout") ? 'tabIconChosen' : 'tabIconNotChosen')} role="img"></i></button>
  35                 {!props.cellDisabled && <button type='button' className={'btn ' + ((props.scope.state.viewName === "CellLayout") ? 'btn-primary' : 'btn-outline-secondary')} value="CellLayout" onClick={(e) => props.scope.setViewName(e)}><i className={'icon-content-gridguideL ' + ((props.scope.state.viewName === "CellLayout") ? 'tabIconChosen' : 'tabIconNotChosen')} role="img"></i></button>}
  36                 {!props.visualDisabled && <button type='button' className={'btn ' + ((props.scope.state.viewName === "VisualLayout") ? 'btn-primary' : 'btn-outline-secondary')} value="VisualLayout" onClick={(e) => props.scope.setViewName(e)}><i className={'icon-datanetwork-globalnetworkL ' + ((props.scope.state.viewName === "VisualLayout") ? 'tabIconChosen' : 'tabIconNotChosen')} role="img"></i></button>}
  37              </Col>
  38           </Row>
  39           <Row className='show-grid'>
  40               <Col md={8}>
  41                   <div className='checkbox'>
  42                             <label>
  43                                 {props.scope.state.viewName !==  'VisualLayout' && <input type='checkbox' className='radio'  value={props.scope.state.viewName} name='defaultViewName' checked={props.scope.state.viewName === props.scope.state.defaultViewName} onChange={(e) => props.scope.setDefaultViewName(e)} disabled={props.scope.state.viewName === props.scope.state.defaultViewName}/>}
  44                                 {props.scope.state.viewName !==  'VisualLayout' && (props.scope.state.viewName === props.scope.state.defaultViewName ? 'Default View' : 'Set as Default View')}
  45                             </label>
  46                   </div>
  47               </Col>
  48           </Row>
  49       </div>
  50   );
  51 };
  52
  53 export default OutputToggle;