All files / js/components ToggleGroup.jsx

100% Statements 16/16
83.33% Branches 5/6
100% Functions 1/1
100% Lines 15/15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51    1x 1x 1x     9x   3x           1x 1x         16x 4x 4x 4x 2x   2x     4x                           1x            
'use strict'
 
import PropTypes from 'prop-types'
import React from 'react'
import Component from './Component'
 
class ToggleGroup extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isVisible: props.defaultVisibility
    }
  }
 
  toggle (event) {
    event.preventDefault()
    this.setState({
      isVisible: !this.state.isVisible
    })
  }
 
  render () {
    let { className, groupTitle, children, defaultVisibility, ...otherProps } = this.props
    className = (className || '') + ' toggle-group'
    if (this.state.isVisible) {
      className += ' toggle-group-open'
    } else {
      className += ' toggle-group-closed'
    }
 
    return (
      <div className={className} {...otherProps}>
        <div className='header'>
          <h4 className='toggle' onClick={
            this.toggle.bind(this)}>{groupTitle}</h4>
        </div>
        <div className='children'>
          {children}
        </div>
      </div>
    )
  }
}
 
ToggleGroup.propTypes = {
  groupTitle: PropTypes.string,
  defaultVisibility: PropTypes.bool
}
 
export default ToggleGroup