'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
|