openecomp-ui/src/nfvo-components/input/ToggleInput.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17
  18 export default
  19 class ToggleInput extends React.Component {
  20
  21         static propTypes = {
  22                 label: React.PropTypes.node,
  23                 value: React.PropTypes.bool,
  24                 onChange: React.PropTypes.func,
  25                 disabled: React.PropTypes.bool
  26         }
  27
  28         static defaultProps = {
  29                 value: false,
  30                 label: ''
  31         }
  32
  33         state = {
  34                 value: this.props.value
  35         }
  36
  37         status() {
  38                 return this.state.value ? 'on' : 'off';
  39         }
  40
  41         render() {
  42                 let {label, disabled} = this.props;
  43                 let checked = this.status() === 'on';
  44                 return (
  45                         <div className='toggle-input-wrapper form-group' onClick={!disabled && this.click}>
  46                                 <div className='toggle-input-label'>{label}</div>
  47                                 <div className='toggle-switch'>
  48                                         <input className='toggle toggle-round-flat' type='checkbox' checked={checked} readOnly/>
  49                                         <label></label>
  50                                 </div>
  51                         </div>
  52                 );
  53         }
  54
  55         click = () => {
  56                 let value = !this.state.value;
  57                 this.setState({value});
  58
  59                 let onChange = this.props.onChange;
  60                 if (onChange) {
  61                         onChange(value);
  62                 }
  63         }
  64
  65         getValue() {
  66                 return this.state.value;
  67         }
  68 }