<commit_before>/**
 * Copyright 2019 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { Component, h } from "preact";
import { bind } from "src/utils/bind.js";
import About from "../about";
import { Close } from "../icons/additional";
import {
  button as btnStyle,
  buttonOff as btnOffStyle,
  buttonOn as btnOnStyle,
  closeButton as closebtnStyle,
  settings as settingsStyle,
  settingsContent as settingsContentStyle,
  settingsWindow as settingsWindowStyle
} from "./style.css";

interface Props {
  onCloseClicked: () => void;
  onMotionPrefChange: () => void;
  motion: boolean;
}

interface State {
  aboutVisible: boolean;
}

export default class Settings extends Component<Props, State> {
  state: State = {
    aboutVisible: false
  };

  private focusItem?: HTMLElement;

  render(
    { onCloseClicked, onMotionPrefChange, motion }: Props,
    { aboutVisible }: State
  ) {
    return (
      <div role="dialog" aria-label="settings dialog" class={settingsStyle}>
        <button
          aria-label={`close button`}
          class={closebtnStyle}
          ref={focusItem => (this.focusItem = focusItem)}
          onClick={aboutVisible ? this._onAboutCloseClicked : onCloseClicked}
        >
          <Close />
        </button>
        <div class={settingsWindowStyle}>
          <div class={settingsContentStyle}>
            <h1>Settings</h1>
            <button
              class={motion ? btnOnStyle : btnOffStyle}
              onClick={onMotionPrefChange}
            >
              Animations {motion ? "on" : "off"}
            </button>
            <About motion={motion} />
          </div>
        </div>
      </div>
    );
  }

  componentDidMount() {
    this.focusItem!.focus();
    window.addEventListener("keyup", this._onKeyUp);
  }

  @bind
  private _onKeyUp(event: KeyboardEvent) {
    if (event.key === "Escape") {
      this.props.onCloseClicked();
    }
  }

  @bind
  private _onAboutClicked() {
    this.setState({ aboutVisible: true });
    this.focusItem!.focus();
  }

  @bind
  private _onAboutCloseClicked() {
    this.setState({ aboutVisible: false });
  }
}<commit_msg>remove about page related events and state<commit_after>/**
 * Copyright 2019 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { Component, h } from "preact";
import { bind } from "src/utils/bind.js";
import About from "../about";
import { Close } from "../icons/additional";
import {
  button as btnStyle,
  buttonOff as btnOffStyle,
  buttonOn as btnOnStyle,
  closeButton as closebtnStyle,
  settings as settingsStyle,
  settingsContent as settingsContentStyle,
  settingsWindow as settingsWindowStyle
} from "./style.css";

interface Props {
  onCloseClicked: () => void;
  onMotionPrefChange: () => void;
  motion: boolean;
}

interface State {}

export default class Settings extends Component<Props, State> {
  private focusItem?: HTMLElement;

  render({ onCloseClicked, onMotionPrefChange, motion }: Props) {
    return (
      <div role="dialog" aria-label="settings dialog" class={settingsStyle}>
        <button
          aria-label={`close button`}
          class={closebtnStyle}
          ref={focusItem => (this.focusItem = focusItem)}
          onClick={onCloseClicked}
        >
          <Close />
        </button>
        <div class={settingsWindowStyle}>
          <div class={settingsContentStyle}>
            <h1>Settings</h1>
            <button
              class={motion ? btnOnStyle : btnOffStyle}
              onClick={onMotionPrefChange}
            >
              Animations {motion ? "on" : "off"}
            </button>
            <About motion={motion} />
          </div>
        </div>
      </div>
    );
  }

  componentDidMount() {
    this.focusItem!.focus();
    window.addEventListener("keyup", this._onKeyUp);
  }

  @bind
  private _onKeyUp(event: KeyboardEvent) {
    if (event.key === "Escape") {
      this.props.onCloseClicked();
    }
  }
}
{'fraction_non_alphanumeric': 0.11124425803874576, 'fraction_numerical': 0.003994407829039345, 'mean_word_length': 2.817073170731707, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, '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': '1368611', 'n_tokens_mistral': 1413, 'n_tokens_neox': 1383, 'n_words': 429}