<commit_before>import React from 'react'
import {
  connect
} from 'react-redux'

import SMMButton from '../buttons/SMMButton'
import {
  applyFilter, setFilter, showFilter
} from '../../actions'

const MAX_LENGTH_TITLE = 0x20
const MAX_LENGTH_MAKER = 0x20
const MAX_LENGTH_UPLOADER = 0x20

class FilterArea extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = {}
    this.getFilter = this.getFilter.bind(this)
    this.setFilter = this.setFilter.bind(this)
    this.onFilterHide = this.onFilterHide.bind(this)
    this.onTitleChange = this.onStringChange.bind(this, 'title', MAX_LENGTH_TITLE)
    this.onMakerChange = this.onStringChange.bind(this, 'maker', MAX_LENGTH_MAKER)
    this.onUploaderChange = this.onStringChange.bind(this, 'uploader', MAX_LENGTH_UPLOADER)
    this.onLastModifiedFromChange = this.onDateChange.bind(this, 'lastmodifiedfrom')
    this.onLastModifiedToChange = this.onDateChange.bind(this, 'lastmodifiedto')
    this.onUploadedFromChange = this.onDateChange.bind(this, 'uploadedfrom')
    this.onUploadedToChange = this.onDateChange.bind(this, 'uploadedto')
    this.onDifficultyFromChange = this.onSelectChange.bind(this, 'difficultyfrom')
    this.onDifficultyToChange = this.onSelectChange.bind(this, 'difficultyto')
    this.onGameStyleChange = this.onSelectChange.bind(this, 'gamestyle')
    this.onCourseThemeChange = this.onSelectChange.bind(this, 'coursetheme')
    this.onCourseThemeSubChange = this.onSelectChange.bind(this, 'coursethemesub')
    this.onAutoScrollChange = this.onSelectChange.bind(this, 'autoscroll')
  }
  componentWillMount () {
    const filter = this.props.filter.toJS()
    if (filter) {
      this.setState({
        title: filter.title ? filter.title : '',
        maker: filter.maker ? filter.maker : '',
        uploader: filter.uploader ? filter.uploader : '',
        lastmodifiedfrom: filter.lastmodifiedfrom ? filter.lastmodifiedfrom : NaN,
        lastmodifiedto: filter.lastmodifiedto ? filter.lastmodifiedto : NaN,
        uploadedfrom: filter.uploadedfrom ? filter.uploadedfrom : NaN,
        uploadedto: filter.uploadedto ? filter.uploadedto : NaN,
        difficultyfrom: filter.difficultyfrom ? filter.difficultyfrom : '',
        difficultyto: filter.difficultyto ? filter.difficultyto : '',
        gamestyle: filter.gamestyle ? filter.gamestyle : '',
        coursetheme: filter.coursetheme ? filter.coursetheme : '',
        coursethemesub: filter.coursethemesub ? filter.coursethemesub : '',
        autoscroll: filter.autoscroll ? filter.autoscroll : ''
      })
    }
  }
  getFilter () {
    const filter = {
      title: this.state.title,
      maker: this.state.maker,
      uploader: this.state.uploader,
      lastmodifiedfrom: this.state.lastmodifiedfrom,
      lastmodifiedto: this.state.lastmodifiedto,
      uploadedfrom: this.state.uploadedfrom,
      uploadedto: this.state.uploadedto,
      difficultyfrom: this.state.difficultyfrom,
      difficultyto: this.state.difficultyto,
      gamestyle: this.state.gamestyle,
      coursetheme: this.state.coursetheme,
      coursethemesub: this.state.coursethemesub,
      autoscroll: this.state.autoscroll
    }
    if (!this.state.title) delete filter.title
    if (!this.state.maker) delete filter.maker
    if (!this.state.uploader) delete filter.uploader
    if (!this.state.lastmodifiedfrom) delete filter.lastmodifiedfrom
    if (!this.state.lastmodifiedto) delete filter.lastmodifiedto
    if (!this.state.uploadedfrom) delete filter.uploadedfrom
    if (!this.state.uploadedto) delete filter.uploadedto
    if (!this.state.difficultyfrom) delete filter.difficultyfrom
    if (!this.state.difficultyto) delete filter.difficultyto
    if (!this.state.gamestyle) delete filter.gamestyle
    if (!this.state.coursetheme) delete filter.coursetheme
    if (!this.state.coursethemesub) delete filter.coursethemesub
    if (!this.state.autoscroll) delete filter.autoscroll
    return filter
  }
  setFilter () {
    const filter = this.getFilter()
    this.props.dispatch(setFilter(filter))
    this.props.dispatch(showFilter(false))
    this.props.dispatch(applyFilter())
  }
  onFilterHide () {
    const filter = this.getFilter()
    this.props.dispatch(setFilter(filter))
    this.props.dispatch(showFilter(false))
  }
  onStringChange (value, limit, e) {
    let val = e.target.value
    if (val.length > limit) {
      val = val.substr(0, limit)
    }
    const res = {}
    res[value] = val
    this.setState(res)
  }
  onDateChange (value, e) {
    const offset = (new Date()).getTimezoneOffset() * -1
    const sign = (new Date()).getTimezoneOffset() >= 0 ? '-' : '+'
    const res = {}
    res[value] = (new Date(`${e.target.value}${sign}${pad((offset / 60), 2)}:${pad((offset % 60), 2)}`)).valueOf() / 1000
    this.setState(res)
  }
  onSelectChange (value, e) {
    const val = e.target.value
    const res = {}
    res[value] = val
    this.setState(res)
  }
  render () {
    const styles = {
      area: {
        width: '1050px',
        height: 'auto',
        margin: 'auto',
        backgroundColor: '#ffcf00',
        borderRadius: '12px',
        boxShadow: '0px 0px 4px 12px rgba(0,0,0,0.1)',
        fontSize: '24px',
        padding: '15px 5px',
        zIndex: '101'
      },
      title: {
        width: 'calc(100% - 44px)',
        textAlign: 'center',
        fontSize: '34px',
        height: '40px',
        lineHeight: '40px'
      },
      close: {
        cursor: 'pointer',
        width: '32px',
        height: '32px',
        float: 'right',
        margin: '6px',
        backgroundColor: '#11c2b0',
        borderRadius: '5px',
        padding: '2px'
      },
      option: {
        height: 'auto',
        width: '50%',
        padding: '10px'
      },
      value: {
        height: '32px',
        lineHeight: '32px'
      },
      input: {
        height: '32px',
        fontSize: '18px'
      },
      date: {
        height: 'auto'
      },
      dateInput: {
        width: 'auto',
        height: '32px',
        fontSize: '18px'
      }
    }
    return (
      <div style={styles.area}>
        <div style={styles.title}>
          Filters
        </div>
        <div style={styles.close} onClick={this.onFilterHide}>
          <img src='/img/cancel.svg' />
        </div>
        <div style={styles.option}>
          <div style={styles.value}>
            Title:
          </div>
          <input style={styles.input} value={this.state.title} onChange={this.onTitleChange} />
        </div><br />
        <div style={styles.option}>
          <div style={styles.value}>
            Maker:
          </div>
          <input style={styles.input} value={this.state.maker} onChange={this.onMakerChange} />
        </div>
        <div style={styles.option}>
          <div style={styles.value}>
            Uploader:
          </div>
          <input style={styles.input} value={this.state.uploader} onChange={this.onUploaderChange} />
        </div>
        <div style={styles.option}>
          <div style={styles.value}>
            Last modified:
          </div>
          <div style={styles.date}><commit_msg>FilterArea scrollable + submit with Enter<commit_after>import React from 'react'
import {
  connect
} from 'react-redux'

import SMMButton from '../buttons/SMMButton'
import {
  applyFilter, setFilter, showFilter
} from '../../actions'

const MAX_LENGTH_TITLE = 0x20
const MAX_LENGTH_MAKER = 0x20
const MAX_LENGTH_UPLOADER = 0x20

class FilterArea extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = {}
    this.getFilter = this.getFilter.bind(this)
    this.setFilter = this.setFilter.bind(this)
    this.onFilterHide = this.onFilterHide.bind(this)
    this.handleKeyPress = this.handleKeyPress.bind(this)
    this.onTitleChange = this.onStringChange.bind(this, 'title', MAX_LENGTH_TITLE)
    this.onMakerChange = this.onStringChange.bind(this, 'maker', MAX_LENGTH_MAKER)
    this.onUploaderChange = this.onStringChange.bind(this, 'uploader', MAX_LENGTH_UPLOADER)
    this.onLastModifiedFromChange = this.onDateChange.bind(this, 'lastmodifiedfrom')
    this.onLastModifiedToChange = this.onDateChange.bind(this, 'lastmodifiedto')
    this.onUploadedFromChange = this.onDateChange.bind(this, 'uploadedfrom')
    this.onUploadedToChange = this.onDateChange.bind(this, 'uploadedto')
    this.onDifficultyFromChange = this.onSelectChange.bind(this, 'difficultyfrom')
    this.onDifficultyToChange = this.onSelectChange.bind(this, 'difficultyto')
    this.onGameStyleChange = this.onSelectChange.bind(this, 'gamestyle')
    this.onCourseThemeChange = this.onSelectChange.bind(this, 'coursetheme')
    this.onCourseThemeSubChange = this.onSelectChange.bind(this, 'coursethemesub')
    this.onAutoScrollChange = this.onSelectChange.bind(this, 'autoscroll')
  }
  componentWillMount () {
    const filter = this.props.filter.toJS()
    if (filter) {
      this.setState({
        title: filter.title ? filter.title : '',
        maker: filter.maker ? filter.maker : '',
        uploader: filter.uploader ? filter.uploader : '',
        lastmodifiedfrom: filter.lastmodifiedfrom ? filter.lastmodifiedfrom : NaN,
        lastmodifiedto: filter.lastmodifiedto ? filter.lastmodifiedto : NaN,
        uploadedfrom: filter.uploadedfrom ? filter.uploadedfrom : NaN,
        uploadedto: filter.uploadedto ? filter.uploadedto : NaN,
        difficultyfrom: filter.difficultyfrom ? filter.difficultyfrom : '',
        difficultyto: filter.difficultyto ? filter.difficultyto : '',
        gamestyle: filter.gamestyle ? filter.gamestyle : '',
        coursetheme: filter.coursetheme ? filter.coursetheme : '',
        coursethemesub: filter.coursethemesub ? filter.coursethemesub : '',
        autoscroll: filter.autoscroll ? filter.autoscroll : ''
      })
    }
  }
  getFilter () {
    const filter = {
      title: this.state.title,
      maker: this.state.maker,
      uploader: this.state.uploader,
      lastmodifiedfrom: this.state.lastmodifiedfrom,
      lastmodifiedto: this.state.lastmodifiedto,
      uploadedfrom: this.state.uploadedfrom,
      uploadedto: this.state.uploadedto,
      difficultyfrom: this.state.difficultyfrom,
      difficultyto: this.state.difficultyto,
      gamestyle: this.state.gamestyle,
      coursetheme: this.state.coursetheme,
      coursethemesub: this.state.coursethemesub,
      autoscroll: this.state.autoscroll
    }
    if (!this.state.title) delete filter.title
    if (!this.state.maker) delete filter.maker
    if (!this.state.uploader) delete filter.uploader
    if (!this.state.lastmodifiedfrom) delete filter.lastmodifiedfrom
    if (!this.state.lastmodifiedto) delete filter.lastmodifiedto
    if (!this.state.uploadedfrom) delete filter.uploadedfrom
    if (!this.state.uploadedto) delete filter.uploadedto
    if (!this.state.difficultyfrom) delete filter.difficultyfrom
    if (!this.state.difficultyto) delete filter.difficultyto
    if (!this.state.gamestyle) delete filter.gamestyle
    if (!this.state.coursetheme) delete filter.coursetheme
    if (!this.state.coursethemesub) delete filter.coursethemesub
    if (!this.state.autoscroll) delete filter.autoscroll
    return filter
  }
  setFilter () {
    const filter = this.getFilter()
    this.props.dispatch(setFilter(filter))
    this.props.dispatch(showFilter(false))
    this.props.dispatch(applyFilter())
  }
  onFilterHide () {
    const filter = this.getFilter()
    this.props.dispatch(setFilter(filter))
    this.props.dispatch(showFilter(false))
  }
  handleKeyPress (e) {
    if (e.key !== 'Enter') return
    this.setFilter()
  }
  onStringChange (value, limit, e) {
    let val = e.target.value
    if (val.length > limit) {
      val = val.substr(0, limit)
    }
    const res = {}
    res[value] = val
    this.setState(res)
  }
  onDateChange (value, e) {
    const offset = (new Date()).getTimezoneOffset() * -1
    const sign = (new Date()).getTimezoneOffset() >= 0 ? '-' : '+'
    const res = {}
    res[value] = (new Date(`${e.target.value}${sign}${pad((offset / 60), 2)}:${pad((offset % 60), 2)}`)).valueOf() / 1000
    this.setState(res)
  }
  onSelectChange (value, e) {
    const val = e.target.value
    const res = {}
    res[value] = val
    this.setState(res)
  }
  render () {
    const styles = {
      area: {
        width: '1050px',
        height: 'auto',
        margin: 'auto',
        backgroundColor: '#ffcf00',
        borderRadius: '12px',
        boxShadow: '0px 0px 4px 12px rgba(0,0,0,0.1)',
        fontSize: '24px',
        padding: '15px 5px',
        zIndex: '101'
      },
      title: {
        width: 'calc(100% - 44px)',
        textAlign: 'center',
        fontSize: '34px',
        height: '40px',
        lineHeight: '40px'
      },
      close: {
        cursor: 'pointer',
        width: '32px',
        height: '32px',
        float: 'right',
        margin: '6px',
        backgroundColor: '#11c2b0',
        borderRadius: '5px',
        padding: '2px'
      },
      option: {
        height: 'auto',
        width: '50%',
        padding: '10px'
      },
      value: {
        height: '32px',
        lineHeight: '32px'
      },
      input: {
        height: '32px',
        fontSize: '18px'
      },
      date: {
        height: 'auto'
      },
      dateInput: {
        width: 'auto',
        height: '32px',
        fontSize: '18px'
      }
    }
    return (
      <div style={styles.area}>
        <div style={styles.title}>
          Filters
        </div>
        <div style={styles.close} onClick={this.onFilterHide}>
          <img src='/img/cancel.svg' />
        </div>
        <div style={styles.option}>
          <div style={styles.value}>
            Title:
          </div>
          <input style={styles.input} value={this.state.title} onChange={this.onTitleChange} onKeyPress={this.handleKeyPress} />
        </div><br />
        <div style={styles.option}>
          <div style={styles.value}>
            Maker:
          </div>
          <input style={styles.input} value={this.state.maker} onChange={this.onMakerChange} onKeyPress={this.handleKeyPress} />
        </div>
        <div style={styles.option}>
          <div style={styles.value}>
            Uploader:
          </div>
          <input style={styles.input} value={this.state.uploader} onChange={this.onUploaderChange} onKeyPress={this.handleKeyPress} />
        </div>
        <div style={styles.option}>
          <div style={styles.value}>
            Last modified:
          </div>
          <div style={styles.date}>
{'fraction_non_alphanumeric': 0.13218707015130673, 'fraction_numerical': 0.011829436038514442, 'mean_word_length': 2.7342064714946073, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 59, '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': '7546054', 'n_tokens_mistral': 4751, 'n_tokens_neox': 4652, 'n_words': 855}