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

   1 import React from 'react';
   2
   3 export default
   4 class ToggleInput extends React.Component {
   5
   6         static propTypes = {
   7                 label: React.PropTypes.node,
   8                 value: React.PropTypes.bool,
   9                 onChange: React.PropTypes.func,
  10                 disabled: React.PropTypes.bool
  11         }
  12
  13         static defaultProps = {
  14                 value: false,
  15                 label: ''
  16         }
  17
  18         state = {
  19                 value: this.props.value
  20         }
  21
  22         status() {
  23                 return this.state.value ? 'on' : 'off';
  24         }
  25
  26         render() {
  27                 let {label, disabled} = this.props;
  28                 let checked = this.status() === 'on';
  29                 return (
  30                         <div className='toggle-input-wrapper form-group' onClick={!disabled && this.click}>
  31                                 <div className='toggle-input-label'>{label}</div>
  32                                 <div className='toggle-switch'>
  33                                         <input className='toggle toggle-round-flat' type='checkbox' checked={checked} readOnly/>
  34                                         <label></label>
  35                                 </div>
  36                         </div>
  37                 );
  38         }
  39
  40         click = () => {
  41                 let value = !this.state.value;
  42                 this.setState({value});
  43
  44                 let onChange = this.props.onChange;
  45                 if (onChange) {
  46                         onChange(value);
  47                 }
  48         }
  49
  50         getValue() {
  51                 return this.state.value;
  52         }
  53 }