# 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