<commit_before>
import React from 'react'

/**
 * Slider
 */

const clip = (v, min, max) => {
  if (v < min) {
    return min
  }
  if (v > max) {
    return max
  }
  return v
}

export default class Slider extends React.Component {

  static propTypes = {
    value: React.PropTypes.number,
    min: React.PropTypes.number.isRequired,
    max: React.PropTypes.number.isRequired,
    step: React.PropTypes.number,
    onChange: React.PropTypes.func,
    onMove: React.PropTypes.func
  }

  defaultProps = {
    value: 0
  }

  update = (value, func) => {
    let newValue
    if (this.props.step) {
      const steps = (value - this.state.prevValue) / this.props.step
      if (Math.round(steps)) {
        newValue = this.state.prevValue + Math.round(steps) * this.props.step
      }
    } else {
      newValue = value
    }
    if (newValue !== undefined && newValue !== this.state.prevValue) {
      this.setState({value: newValue, prevValue: newValue})
      if (func) {
        func(newValue)
      }
    }
  }

  onChange = (event) => {
    const value = parseFloat(event.target.value, 10)
    this.setState({value, prevValue: value})
    if (this.props.onChange) {
      this.props.onChange(value)
    }
    if (this.props.onMove) {
      this.props.onMove(value)
    }
  }

  constructor (props) {
    super(props)
    this.state = {
      mouseDown: false,
      isAnimating: false,
      value: props.value || 0,
      prevValue: props.value || 0,
      step: 1,
      // ratio between actual dom element width and range value (0 -> 100)
      ratio: 1
    }
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.value !== undefined) {
      this.setState({value: nextProps.value, prevValue: nextProps.value})
    }
  }

  // get initial width of dom element
  componentDidMount () {
    const {slider} = this.refs
    const width = slider.getBoundingClientRect().width - 16
    this.setState({
      ratio: width / (this.props.max - this.props.min)
    })
  }

  onMouseUp = (event) => {
    this.setState({
      mouseDown: false
    })
    document.removeEventListener('mousemove', this.onMouseMove)
    document.removeEventListener('touchmove', this.onMouseMove)
    document.removeEventListener('mouseup', this.onMouseUp)
    document.removeEventListener('touchend', this.onMouseUp)
    if (this.props.onChange) {
      this.props.onChange(this.state.value)
    }
  }

  getValueFromSlider = (event) => {
    const {slider} = this.refs
    const pageX = event.pageX || event.touches[0].pageX
    const x = pageX - 8 - slider.getBoundingClientRect().left
    return clip(x / this.state.ratio + this.props.min, this.props.min, this.props.max)
  }

  onMouseDown = (event) => {
    event.preventDefault()
    this.setState({
      mouseDown: true
    })
    document.addEventListener('mousemove', this.onMouseMove)
    document.addEventListener('touchmove', this.onMouseMove)
    document.addEventListener('mouseup', this.onMouseUp)
    document.addEventListener('touchend', this.onMouseUp)
  }

  onMouseMove = (event) => {
    if (this.state.mouseDown) {
      const value = this.getValueFromSlider(event)
      this.update(value, this.props.onMove)
    }
  }

  render () {
    const position = (this.state.value - this.props.min) * this.state.ratio

    return (
      <label className='Slider'>
        <input
          className='Slider-input'
          max={this.props.max}
          min={this.props.min}
          onChange={this.onChange}
          type='range'
          value={this.state.value}
          step={this.props.step}
        />
        <div
          className='Slider-track'
          onMouseDown={this.onMouseDown}
          onTouchStart={this.onMouseDown}
          onMouseMove={this.onMouseMove}
          onTouchMove={this.onMouseMove}
          ref='slider'>
          <div className='Slider-track-off'>
            <div className='Slider-track-on' style={{width: `${position}px`}} />
          </div>
          <div
            className={`Slider-thumb${this.state.value === this.props.min ? ' is-zero' : ''}`}
            style={{left: `${position}px`}}
          />
        </div>
      </label>
    )
  }

}
<commit_msg>add click handling to change to slider value<commit_after>
import React from 'react'

/**
 * Slider
 */

const clip = (v, min, max) => {
  if (v < min) {
    return min
  }
  if (v > max) {
    return max
  }
  return v
}

export default class Slider extends React.Component {

  static propTypes = {
    value: React.PropTypes.number,
    min: React.PropTypes.number.isRequired,
    max: React.PropTypes.number.isRequired,
    step: React.PropTypes.number,
    onChange: React.PropTypes.func,
    onMove: React.PropTypes.func
  }

  defaultProps = {
    value: 0
  }

  getSteppedValue = (value) => {
    if (this.props.step) {
      const steps = (value - this.state.prevValue) / this.props.step
      if (Math.round(steps)) {
        return this.state.prevValue + Math.round(steps) * this.props.step
      }
    } else {
      return value
    }
  }

  updateMoveValue = (value) => {
    const newValue = this.getSteppedValue(value)
    if (newValue !== undefined && newValue !== this.state.prevValue) {
      this.setState({value: newValue, prevValue: newValue})
      if (this.props.onMove) {
        this.props.onMove(newValue)
      }
    }
  }

  setValue = function (value) {
    this.setState({value, prevValue: value})
    if (this.props.onChange) {
      this.props.onChange(value)
    }
    if (this.props.onMove) {
      this.props.onMove(value)
    }
  }

  onChange = (event) => {
    const value = parseFloat(event.target.value, 10)
    this.setValue(value)
  }

  constructor (props) {
    super(props)
    this.state = {
      mouseDown: false,
      isAnimating: false,
      value: props.value || 0,
      prevValue: props.value || 0,
      step: 1,
      // ratio between actual dom element width and range value (min -> max)
      ratio: 1
    }
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.value !== undefined) {
      this.setState({value: nextProps.value, prevValue: nextProps.value})
    }
  }

  // get initial width of dom element
  componentDidMount () {
    const {slider} = this.refs
    const width = slider.getBoundingClientRect().width - 16
    this.setState({
      ratio: width / (this.props.max - this.props.min)
    })
  }

  onMouseUp = (event) => {
    this.setState({
      mouseDown: false
    })
    document.removeEventListener('mousemove', this.onMouseMove)
    document.removeEventListener('touchmove', this.onMouseMove)
    document.removeEventListener('mouseup', this.onMouseUp)
    document.removeEventListener('touchend', this.onMouseUp)
    if (this.props.onChange) {
      this.props.onChange(this.state.value)
    }
  }

  getValueFromSlider = (event) => {
    const {slider} = this.refs
    const pageX = event.pageX || event.touches[0].pageX
    const x = pageX - 8 - slider.getBoundingClientRect().left
    return clip(x / this.state.ratio + this.props.min, this.props.min, this.props.max)
  }

  onMouseDown = (event) => {
    event.preventDefault()
    this.setState({
      mouseDown: true
    })
    document.addEventListener('mousemove', this.onMouseMove)
    document.addEventListener('touchmove', this.onMouseMove)
    document.addEventListener('mouseup', this.onMouseUp)
    document.addEventListener('touchend', this.onMouseUp)
  }

  onMouseMove = (event) => {
    if (this.state.mouseDown) {
      const value = this.getValueFromSlider(event)
      this.updateMoveValue(value)
    }
  }

  onClick = (event) => {
    const value = this.getValueFromSlider(event)
    const steppedValue = this.getSteppedValue(value)
    if (steppedValue !== undefined) {
      this.setValue(steppedValue)
    }
  }

  render () {
    const position = (this.state.value - this.props.min) * this.state.ratio

    return (
      <label className='Slider'>
        <input
          className='Slider-input'
          max={this.props.max}
          min={this.props.min}
          onChange={this.onChange}
          type='range'
          value={this.state.value}
          step={this.props.step}
        />
        <div
          className='Slider-track'
          onMouseDown={this.onMouseDown}
          onTouchStart={this.onMouseDown}
          onMouseMove={this.onMouseMove}
          onTouchMove={this.onMouseMove}
          onClick={this.onClick}
          ref='slider'>
          <div className='Slider-track-off'>
            <div className='Slider-track-on' style={{width: `${position}px`}} />
          </div>
          <div
            className={`Slider-thumb${this.state.value === this.props.min ? ' is-zero' : ''}`}
            style={{left: `${position}px`}}
          />
        </div>
      </label>
    )
  }

}

{'fraction_non_alphanumeric': 0.1361304298255615, 'fraction_numerical': 0.0029643142173070344, 'mean_word_length': 2.4346123727486297, 'pattern_counts': {'":': 0, '<': 23, '<?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': '1278344', 'n_tokens_mistral': 2813, 'n_tokens_neox': 2798, 'n_words': 523}