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