<commit_before>import React, { Component, PropTypes } from 'react';
import { bindAll } from 'underscore';
import Icon from './Icon.jsx';

class Collapsable extends Component {

  constructor() {
    bindAll(this, 'handleToggle');

    this.state = {
      expanded: false
    };
  }

  componentDidMount() {
    this.setState({
      expanded: this.props.initialToggleStateOpen
    });
  }

  getHeaderClassNames() {
    return 'collapsable__header ' + this.props.headerClassNames;
  }

  getIconState() {
    return this.state.expanded ? 'minus' : 'plus';
  }

  handleToggle() {
    this.setState({
      expanded: !this.state.expanded
    });
  }

  getCollapsableState() {
    return this.state.expanded ? 'show' : 'hide';
  }

  render() {
    let icon;
    const branch = this.props.branch;

    if (this.props.iconName) {
      icon = <Icon type={this.props.iconType} name={this.props.iconName} classNames="icon-roomy" />
    }
    return (
      <div className='collapsable'>
        <h4 onClick={this.handleToggle} className={this.getHeaderClassNames()}>
          <Icon classNames='collapsable__header-icon' type='fa' name={this.getIconState()} />
          {icon}
          {this.props.header}
        </h4>
        <div className={this.getCollapsableState()}>
          {this.props.children}
        </div>
      </div>
    );
  }

}

Collapsable.defaultProps = {
  initialToggleStateOpen: false
};

Collapsable.propTypes = {
  header: PropTypes.node,
  children: PropTypes.node,
  iconType: PropTypes.oneOf(['fa','octicon']),
  iconName: PropTypes.string
};

export default Collapsable;<commit_msg>add optional inner padding in Collapsable<commit_after>import React, { Component, PropTypes } from 'react';
import { bindAll } from 'underscore';
import Icon from './Icon.jsx';

class Collapsable extends Component {

  constructor() {
    bindAll(this, 'handleToggle');

    this.state = {
      expanded: false
    };
  }

  componentDidMount() {
    this.setState({
      expanded: this.props.initialToggleStateOpen
    });
  }

  getHeaderClassNames() {
    return 'collapsable__header ' + this.props.headerClassNames;
  }

  getIconState() {
    return this.state.expanded ? 'minus' : 'plus';
  }

  handleToggle() {
    this.setState({
      expanded: !this.state.expanded
    });
  }

  getInnerClassNames() {
    let classNames = this.state.expanded ? 'show' : 'hide';
    classNames += this.props.pad ? ' pad-inner' : '';
    return classNames;
  }

  render() {
    let icon;
    const branch = this.props.branch;

    if (this.props.iconName) {
      icon = <Icon type={this.props.iconType} name={this.props.iconName} classNames="icon-roomy" />
    }
    return (
      <div className='collapsable'>
        <h4 onClick={this.handleToggle} className={this.getHeaderClassNames()}>
          <Icon classNames='collapsable__header-icon' type='fa' name={this.getIconState()} />
          {icon}
          {this.props.header}
        </h4>
        <div className={this.getInnerClassNames()}>
          {this.props.children}
        </div>
      </div>
    );
  }

}

Collapsable.defaultProps = {
  initialToggleStateOpen: false,
  pad: false
};

Collapsable.propTypes = {
  header: PropTypes.node,
  children: PropTypes.node,
  iconType: PropTypes.oneOf(['fa','octicon']),
  iconName: PropTypes.string,
  pad: PropTypes.bool
};

export default Collapsable;
{'fraction_non_alphanumeric': 0.14205219454329773, 'fraction_numerical': 0.0011862396204033216, 'mean_word_length': 2.9775943396226414, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1366902', 'n_tokens_mistral': 1079, 'n_tokens_neox': 1080, 'n_words': 198}