<commit_before>import React from "react";
import PropTypes from "prop-types";
import "./style.css";

export default class VerticalTabbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
      activeTab: props.defaultTab ? {
        tab: props.defaultTab
      } : {
        tab: props.tabs[0]
      }
    };
  }
  static propTypes = {
    children: PropTypes.node,
    tabs: PropTypes.array.isRequired,
    defaultTab: PropTypes.string,
    buttonsMargin: PropTypes.number,
    tabChanged: PropTypes.func
  };
  static defaultProps = {
    buttonsMargin: 5
  };
  setActive(state) {
    this.setState({
      active: state
    });
  }
  handleClick(tab) {
    this.setState({
      active: false,
      activeTab: { tab }
    });
    if (this.props.tabChanged) this.props.tabChanged(tab);
  }
  render() {
    return (
      <div className="tabbar vertical" onMouseLeave={this.setActive.bind(this, false)}>
        <div style={{
          maxHeight: this.state.active ? `${29 * this.props.tabs.length}px` : "29px"
        }}>
          <ul>
            <li>
              <a href="#" onClick={this.setActive.bind(this, true)}>{this.state.activeTab.tab}</a>
            </li>
            {this.props.tabs.filter(tab => (tab !== this.state.activeTab.tab)).map((tab) => (
              <li key={tab}>
                <a href="#" tabIndex={this.state.active ? "0" : "-1"} onClick={this.handleClick.bind(this, tab)}>{tab}</a>
              </li>
            ))}
          </ul>
          {this.props.children ? <span className="buttons" style={{
            marginRight: `${this.props.buttonsMargin}px`
          }}>{this.props.children}</span> : null}
        </div>
      </div>
    );
  }
}<commit_msg>toggle the tabbar instead<commit_after>import React from "react";
import PropTypes from "prop-types";
import "./style.css";

export default class VerticalTabbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
      activeTab: props.defaultTab ? {
        tab: props.defaultTab
      } : {
        tab: props.tabs[0]
      }
    };
  }
  static propTypes = {
    children: PropTypes.node,
    tabs: PropTypes.array.isRequired,
    defaultTab: PropTypes.string,
    buttonsMargin: PropTypes.number,
    tabChanged: PropTypes.func
  };
  static defaultProps = {
    buttonsMargin: 5
  };
  setActive(state) {
    this.setState({
      active: state
    });
  }
  handleClick(tab) {
    this.setState({
      active: false,
      activeTab: { tab }
    });
    if (this.props.tabChanged) this.props.tabChanged(tab);
  }
  render() {
    return (
      <div className="tabbar vertical" onMouseLeave={this.setActive.bind(this, false)}>
        <div style={{
          maxHeight: this.state.active ? `${29 * this.props.tabs.length}px` : "29px"
        }}>
          <ul>
            <li>
              <a href="#" onClick={this.setActive.bind(this, !this.state.active)}>{this.state.activeTab.tab}</a>
            </li>
            {this.props.tabs.filter(tab => (tab !== this.state.activeTab.tab)).map((tab) => (
              <li key={tab}>
                <a href="#" tabIndex={this.state.active ? "0" : "-1"} onClick={this.handleClick.bind(this, tab)}>{tab}</a>
              </li>
            ))}
          </ul>
          {this.props.children ? <span className="buttons" style={{
            marginRight: `${this.props.buttonsMargin}px`
          }}>{this.props.children}</span> : null}
        </div>
      </div>
    );
  }
}
{'fraction_non_alphanumeric': 0.160643704121965, 'fraction_numerical': 0.004517221908526256, 'mean_word_length': 2.180430879712747, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, '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': '242450', 'n_tokens_mistral': 1108, 'n_tokens_neox': 1122, 'n_words': 205}