{"size": 1077, "ext": "js", "max_stars_repo_path": "src/TabManager.js", "max_stars_repo_name": "chhavi-khandelwal/React-EventManager", "max_stars_repo_stars_event_min_datetime": "2020-02-01T20:42:40.000Z", "max_stars_repo_stars_event_max_datetime": "2020-02-01T20:42:40.000Z", "max_issues_repo_path": "src/TabManager.js", "max_issues_repo_name": "chhavi-khandelwal/React-EventManager", "max_issues_repo_issues_event_min_datetime": "2020-09-06T13:49:26.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T15:29:45.000Z", "max_forks_repo_path": "src/TabManager.js", "max_forks_repo_name": "chhavi-khandelwal/React-EventManager", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 23.9333333333, "max_line_length": 93, "alphanum_fraction": 0.4874651811}
import React from 'react';
import TabScreen from './TabScreen';

class TabManager extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
  }

  showEventScreen(tab) {
    this.props.updateFocussedTab(tab);
  }

  closeTab(e, id) {
    this.props.closeTab(e, id);
  }

  render() {
    const { openedTabs } = this.props;
    return (
      <div className="tab-manager">
          <header>
            {
              openedTabs.map((tab, id) => {
                return (
                  <div className="tab" key={ id }>
                    <button onClick={ this.showEventScreen.bind(this, tab) }>{ tab.name }
                      <span onClick={ (e) => this.closeTab.bind(this, e, tab.id)() }>x</span>
                    </button>
                  </div>
                )
              })
            }
          </header>
          <div className="content-manager">
            <TabScreen
              screenData = { this.props.focussedTab.data }></TabScreen>
          </div>
        </div>
    )
  }
}

export default TabManager;
