{"size": 1205, "ext": "js", "max_stars_repo_path": "web/src/components/collapsible.js", "max_stars_repo_name": "18F/cms-apd-prototype-budget-table", "max_stars_repo_stars_event_min_datetime": "2017-07-21T02:19:22.000Z", "max_stars_repo_stars_event_max_datetime": "2017-07-21T02:19:22.000Z", "max_issues_repo_path": "web/src/components/collapsible.js", "max_issues_repo_name": "18F/cms-apd-prototype-budget-table", "max_issues_repo_issues_event_min_datetime": "2017-05-30T15:27:17.000Z", "max_issues_repo_issues_event_max_datetime": "2017-07-07T17:04:51.000Z", "max_forks_repo_path": "web/src/components/collapsible.js", "max_forks_repo_name": "18F/cms-apd-prototype-budget-table", "max_forks_repo_forks_event_min_datetime": "2017-07-14T01:17:50.000Z", "max_forks_repo_forks_event_max_datetime": "2021-02-14T11:12:42.000Z"}
{"max_stars_count": 1, "max_issues_count": 8, "max_forks_count": 3, "avg_line_length": 24.1, "max_line_length": 139, "alphanum_fraction": 0.6074688797}
import React from 'react';
import PropTypes from 'prop-types';

class Collapsible extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      expanded: !props.collapsed
    };

    this.toggleExpand = () => {
      this.setState({ expanded: !this.state.expanded });
    };
  }

  render() {
    return (
      <div className={`collapsible ${this.state.expanded ? 'expanded' : 'collapsed'} ${this.props.className}`}>
        <button aria-expanded={this.state.expanded} aria-controls={this.state.id} aria-label={this.props.name} onClick={this.toggleExpand}>
          <span>
            {this.state.expanded ? '-' : '+'}
          </span>
        </button>
        <h2>{this.props.name}</h2>
        <div className="content" id={this.state.id} hidden={!this.state.expanded}>
          <div className="children">
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
}

Collapsible.propTypes = {
  name: PropTypes.string.isRequired,
  children: PropTypes.node,
  collapsed: PropTypes.bool,
  className: PropTypes.string
};

Collapsible.defaultProps = {
  children: null,
  collapsed: false,
  className: ''
};

export default Collapsible;
