<commit_before>import * as React from 'react'

interface IFullScreenInfoState {
  readonly renderInfo: boolean
}

// const holdDuration = 750

export class FullScreenInfo extends React.Component<any, IFullScreenInfoState> {

  // private infoDisappearTimeoutId: number | null = null

  public constructor() {
    super()

    this.state = {
      renderInfo: false,
    }
  }

  public render () {
    if (!this.state.renderInfo) {
      return null
    }

    return (
      <div className='toast-notification-container'>
        <div className='toast-notification'>
          Press <kbd className='kbd'>Esc</kbd> to exit fullscreen
        </div>
      </div>
    )
  }
}<commit_msg>Set up CSSTransitionGroup<commit_after>import * as React from 'react'
import { CSSTransitionGroup } from 'react-transition-group'

interface IFullScreenInfoState {
  readonly renderInfo: boolean
  readonly renderTransitionGroup: boolean
}

const transitionDuration = 100
const holdDuration = 750

export class FullScreenInfo extends React.Component<any, IFullScreenInfoState> {

  private infoDisappearTimeoutId: number | null = null
  private transitionGroupDisappearTimeoutId: number | null = null

  public constructor() {
    super()

    this.state = {
      renderInfo: false,
      renderTransitionGroup: false,
    }
  }

  public componentWillReceiveProps(nextProps: any) {
    if (this.infoDisappearTimeoutId !== null) {
      clearTimeout(this.infoDisappearTimeoutId)
    }

    if (this.transitionGroupDisappearTimeoutId !== null) {
      clearTimeout(this.transitionGroupDisappearTimeoutId)
    }

    this.transitionGroupDisappearTimeoutId = window.setTimeout(
      this.onTransitionGroupDisappearTimeout,
      holdDuration + transitionDuration,
    )
  }

  private onTransitionGroupDisappearTimeout = () => {
    this.setState({ renderTransitionGroup: false })
  }

  public render () {
    if (!this.state.renderInfo) {
      return null
    }

    return (
      <CSSTransitionGroup
        className='toast-notification-container'
        id='full-screen-info'
        transitionName='zoom-in' component='div'
        transitionAppear={true}
        transitionEnter={false}
        transitionLeave={true}
        transitionAppearTimeout={transitionDuration}
        transitionLeaveTimeout={transitionDuration}
      >
        <div className='toast-notification'>
          Press <kbd className='kbd'>Esc</kbd> or <kbd className='kbd'>F11</kbd> to exit fullscreen
        </div>
      </CSSTransitionGroup>
    )
  }
}
{'fraction_non_alphanumeric': 0.09631391200951249, 'fraction_numerical': 0.004359889021006738, 'mean_word_length': 3.2707275803722506, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 20, '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': '3937891', 'n_tokens_mistral': 737, 'n_tokens_neox': 705, 'n_words': 149}