<commit_before>import React from 'react';
import { observer } from 'mobx-react';

import store from '../../../store';
import Button from '../../../components/Button';
import { colors } from '../../../../defaults';
import { ButtonType } from '../../../../enums';
import {
  Root, Title, ButtonsContainer, Content, KeyInput,
} from './styles';
import { KeyBinding } from '../../../../interfaces';

@observer
export default class KeyRecordingDialog extends React.Component {
  public input: HTMLInputElement;

  public combination = {
    key: '',
    ctrl: false,
    alt: false,
    shift: false,
    meta: false,
  };

  public onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    e.preventDefault();

    if (
      e.key !== 'Control'
      && e.key !== 'Alt'
      && e.key !== 'Shift'
      && e.key !== 'Alt'
      && e.key !== 'Meta'
    ) {
      this.combination = {
        key: e.key,
        ctrl: e.ctrlKey,
        alt: e.altKey,
        shift: e.shiftKey,
        meta: e.metaKey,
      };

      e.currentTarget.value = this.getCombination();
    }
  };

  public getCombination = () => {
    let text = '';

    if (this.combination.ctrl) text += 'ctrl+';
    if (this.combination.alt) text += 'alt+';
    if (this.combination.shift) text += 'shift+';
    if (this.combination.meta) text += 'meta+';
    if (this.combination.key !== '') text += this.combination.key;

    return text;
  };

  public onCancelClick = () => {
    store.keyRecordingDialogVisible = false;
  };

  public onOKClick = () => {
    if (this.combination != null) {
      console.log(store.selectedKeyBinding);
    }

    store.keyRecordingDialogVisible = false;
  };

  public render() {
    return (
      <Root visible={store.keyRecordingDialogVisible}>
        <Title>Recording key combination</Title>
        <Content>
          <KeyInput innerRef={r => (this.input = r)} onKeyDown={this.onKeyDown} />
        </Content>
        <ButtonsContainer>
          <Button
            type={ButtonType.Text}
            foreground={colors.blue['500']}
            onClick={this.onCancelClick}
          >
            CANCEL
          </Button>
          <Button type={ButtonType.Text} foreground={colors.blue['500']} onClick={this.onOKClick}>
            OK
          </Button>
        </ButtonsContainer>
      </Root>
    );
  }<commit_msg>Add re-binding key<commit_after>import React from 'react';
import mousetrap from 'mousetrap';
import { observer } from 'mobx-react';

import store from '../../../store';
import Button from '../../../components/Button';
import { colors, Commands } from '../../../../defaults';
import { ButtonType } from '../../../../enums';
import {
  Root, Title, ButtonsContainer, Content, KeyInput,
} from './styles';
import { KeyBinding } from '../../../../interfaces';

@observer
export default class KeyRecordingDialog extends React.Component {
  public input: HTMLInputElement;

  public combination = {
    key: '',
    ctrl: false,
    alt: false,
    shift: false,
    meta: false,
  };

  public onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    e.preventDefault();

    if (
      e.key !== 'Control'
      && e.key !== 'Alt'
      && e.key !== 'Shift'
      && e.key !== 'Alt'
      && e.key !== 'Meta'
    ) {
      this.combination = {
        key: e.key,
        ctrl: e.ctrlKey,
        alt: e.altKey,
        shift: e.shiftKey,
        meta: e.metaKey,
      };

      e.currentTarget.value = this.getCombination();
    }
  };

  public getCombination = () => {
    let text = '';

    if (this.combination.ctrl) text += 'ctrl+';
    if (this.combination.alt) text += 'alt+';
    if (this.combination.shift) text += 'shift+';
    if (this.combination.meta) text += 'meta+';
    if (this.combination.key !== '') text += this.combination.key;

    return text;
  };

  public onCancelClick = () => {
    store.keyRecordingDialogVisible = false;
  };

  public onOKClick = () => {
    if (this.combination != null) {
      const selected = store.selectedKeyBinding;
      const combination = this.getCombination();

      mousetrap.unbind(selected.key);
      mousetrap.bind(combination, Commands[selected.command]);

      selected.key = combination;
    }

    store.keyRecordingDialogVisible = false;
  };

  public render() {
    return (
      <Root visible={store.keyRecordingDialogVisible}>
        <Title>Recording key combination</Title>
        <Content>
          <KeyInput innerRef={r => (this.input = r)} onKeyDown={this.onKeyDown} />
        </Content>
        <ButtonsContainer>
          <Button
            type={ButtonType.Text}
            foreground={colors.blue['500']}
            onClick={this.onCancelClick}
          >
            CANCEL
          </Button>
          <Button type={ButtonType.Text} foreground={colors.blue['500']} onClick={this.onOKClick}>
            OK
          </Button>
        </ButtonsContainer>
      </Root>
    );
  }
{'fraction_non_alphanumeric': 0.16578626574563185, 'fraction_numerical': 0.002438033319788704, 'mean_word_length': 2.258107213765718, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 41, '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': '1790371', 'n_tokens_mistral': 1504, 'n_tokens_neox': 1486, 'n_words': 325}