<commit_before>import React from 'react'
import styled from 'styled-components'

var ModalTitle = styled.div`
  background-color: var(--secondary-bg-color);
  text-align: center;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
`

var ModalBody = styled.div`
  background-color: var(--main-bg-color);
  margin: 40px;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  position: relative;
  color: white;
  .close-button {
    position: absolute;
    right: -5px;
    top: -5px;
    height: inherit;
    width: 20px;
    background-color: black;
    color: white;
    border-radius: 100px;
  }
`
var ModalOverlay = styled.div`
  z-index: var(--visible-z-index);
  width: 100%;
  background-color: rgba(0,0,0,.5);
  justify-content: center;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
`

export default class Modal extends React.Component {
  onKeyDown (event) {
    if (event.key === 'Enter') {
      this.submitHandler()
    }
    if (event.key === 'Escape') {
      this.props.onClose()
    }
  }

  onClickOverlay (event) {
    this.props.onClose()
  }

  onClickModal (event) {
    event.stopPropagation()
  }

  render () {
    var { onClose, title, closeButton } = this.props
    if (!closeButton) closeButton = true
    return (<ModalOverlay onClick={this.onClickOverlay.bind(this)}>
      <ModalBody onKeyDown={this.onKeyDown.bind(this)} onClick={this.onClickModal}>
        {closeButton && <button className='close-button' onClick={onClose}>X</button>}
        {title && <ModalTitle>{title}</ModalTitle>}
        {this.props.children}
      </ModalBody>
    </ModalOverlay>
    )
  }
}<commit_msg>add closeButton option to modal<commit_after>import React from 'react'
import styled from 'styled-components'

var ModalTitle = styled.div`
  background-color: var(--secondary-bg-color);
  text-align: center;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
`

var ModalBody = styled.div`
  background-color: var(--main-bg-color);
  margin: 40px;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  position: relative;
  color: white;
  .close-button {
    position: absolute;
    right: -5px;
    top: -5px;
    height: inherit;
    width: 20px;
    background-color: black;
    color: white;
    border-radius: 100px;
  }
`
var ModalOverlay = styled.div`
  z-index: var(--visible-z-index);
  width: 100%;
  background-color: rgba(0,0,0,.5);
  justify-content: center;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
`

export default class Modal extends React.Component {
  onKeyDown (event) {
    if (event.key === 'Enter') {
      this.submitHandler()
    }
    if (event.key === 'Escape') {
      this.props.onClose()
    }
  }

  onClickOverlay (event) {
    this.props.onClose()
  }

  onClickModal (event) {
    event.stopPropagation()
  }

  render () {
    var { onClose, title, closeButton } = this.props
    if (typeof closeButton === 'undefined') closeButton = true
    return (<ModalOverlay onClick={this.onClickOverlay.bind(this)}>
      <ModalBody onKeyDown={this.onKeyDown.bind(this)} onClick={this.onClickModal}>
        {closeButton && <button className='close-button' onClick={onClose}>X</button>}
        {title && <ModalTitle>{title}</ModalTitle>}
        {this.props.children}
      </ModalBody>
    </ModalOverlay>
    )
  }
}
{'fraction_non_alphanumeric': 0.14654161781946073, 'fraction_numerical': 0.01406799531066823, 'mean_word_length': 3.192874692874693, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, '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': '777491', 'n_tokens_mistral': 1196, 'n_tokens_neox': 1164, 'n_words': 252}