src/generic-components/input/ToggleInput.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 from 'react';
  22 import { PropTypes } from 'prop-types';
  23
  24 export default
  25 class ToggleInput extends React.Component {
  26
  27   static propTypes = {
  28     label: PropTypes.node,
  29     value: PropTypes.bool,
  30     onChange: PropTypes.func,
  31     disabled: PropTypes.bool
  32   }
  33
  34   static defaultProps = {
  35     value: false,
  36     label: ''
  37   }
  38
  39   state = {
  40     value: this.props.value
  41   }
  42
  43   status() {
  44     return this.state.value ? 'on' : 'off';
  45   }
  46
  47   render() {
  48     let {label, disabled} = this.props;
  49     let checked = this.status() === 'on';
  50     return (
  51       <div className='toggle-input-wrapper form-group'
  52            onClick={!disabled && this.click}>
  53         <div className='toggle-input-label'>{label}</div>
  54         <div className='toggle-switch'>
  55           <input className='toggle toggle-round-flat' type='checkbox'
  56                  checked={checked} readOnly/>
  57           <label></label>
  58         </div>
  59       </div>
  60     );
  61   }
  62
  63   click = () => {
  64     let value = !this.state.value;
  65     this.setState({value});
  66
  67     let onChange = this.props.onChange;
  68     if (onChange) {
  69       onChange(value);
  70     }
  71   }
  72
  73   getValue() {
  74     return this.state.value;
  75   }
  76 }