{"size": 1294, "ext": "js", "max_stars_repo_path": "app/containers/ConfigPage.js", "max_stars_repo_name": "Nate06/WonderPod", "max_stars_repo_stars_event_min_datetime": "2018-04-19T10:30:06.000Z", "max_stars_repo_stars_event_max_datetime": "2018-04-30T08:03:09.000Z", "max_issues_repo_path": "app/containers/ConfigPage.js", "max_issues_repo_name": "Nate06/WonderPod", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "app/containers/ConfigPage.js", "max_forks_repo_name": "Nate06/WonderPod", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.962962963, "max_line_length": 73, "alphanum_fraction": 0.4961360124}
// @flow
import React, { Component } from 'react';
import { Dialog } from '@blueprintjs/core';
import styles from './ConfigPage.css';

type Props = {};
class ConfigPage extends Component {
  props: Props

  state = {
    isDialogOpen: false
  }

  toggleDialog = () => {
    this.setState({ isDialogOpen: !this.state.isDialogOpen });
  }

  render() {
    return (
      <div className={styles.config}>
        <h3>设置</h3>
        <hr />
        <div className={styles.config__body}>
          <h5>快捷键</h5>
          <div className={styles.config__shortcut}>
            <table className="pt-html-table pt-interactive">
              <thead>
                <tr>
                  <th className={styles.config__shortcut_head}>功能说明</th>
                  <th className={styles.config__shortcut_head}>全局快捷键</th>
                </tr>
              </thead>
              <tbody>
                <tr onClick={this.toggleDialog}>
                  <td>播放</td>
                  <td>Control+A</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <Dialog
          title="设置快捷键"
          isOpen={this.state.isDialogOpen}
          onClose={this.toggleDialog}
        >
        </Dialog>
      </div>
    );
  }
}

export default ConfigPage;
