<commit_before>import React from 'react'

export default class Switch extends React.Component {
  constructor () {
    super()

    this.state = {
      thumbLeft: -5,
      toggled: false
    }

    this.mouseDownPosition = {
      x: -1,
      y: -1
    }
    
    this.lastState = false
  }

  onMouseDown = (e) => {
    if (e.target !== this.track) {
      this.mouseDownPosition = {
        x: e.clientX,
        y: e.clientY
      }

      window.addEventListener('mousemove', this.onWindowMouseMove)
      window.addEventListener('mouseup', this.onWindowMouseUp)
    } else {
      this.toggle()
    }
  }

  onWindowMouseMove = (e) => {
    const rect = this.root.getBoundingClientRect()

    const {
      off,
      on
    } = this.props.thumbPosition

    if (e.clientX + -off >= rect.left && e.clientX <= rect.right) {
      let delta = e.clientX - rect.left

      if (delta <= off) delta = off

      if (delta <= on) {
        const toggled = delta >= on / 2

        this.setState({
          thumbLeft: delta,
          toggled: toggled
        })

        if (this.lastState !== toggled) {
          this.lastState = toggled
          this.triggerEvent()
        }   
      }
    }
  }

  onWindowMouseUp = (e) => {
    const {
      on,
      off
    } = this.props.thumbPosition

    if (this.mouseDownPosition.x === e.clientX) {
      this.toggle()
    } else {
      this.setState({
        thumbLeft: this.state.toggled ? on : off
      })
    }

    window.removeEventListener('mousemove', this.onWindowMouseMove)
    window.removeEventListener('mouseup', this.onWindowMouseUp)
  }

  toggle (flag = !this.state.toggled) {
    const {
      on,
      off
    } = this.props.thumbPosition

    this.setState({
      thumbLeft: flag ? on : off,
      toggled: flag
    })

    this.triggerEvent()
  }

  triggerEvent () {
    const onToggle = this.props.onToggle

    if (typeof onToggle === 'function') onToggle(this.state.toggled, this)
  }

  render () {
    const thumbStyle = {
      left: this.state.thumbLeft
    }

    return (
      <div className={'material-switch ' + (this.state.toggled ? 'toggled' : '')} ref={(r) => this.root = r} onMouseDown={this.onMouseDown}>
        <div className='track' ref={(r) => this.track = r} /><commit_msg>Fix positioning in switch<commit_after>import React from 'react'

export default class Switch extends React.Component {
  constructor () {
    super()

    this.state = {
      thumbLeft: -5,
      toggled: false
    }

    this.mouseDownPosition = {
      x: -1,
      y: -1
    }

    this.samePosition = false
    
    this.lastState = false
  }

  onMouseDown = (e) => {
    if (e.target !== this.track) {
      this.mouseDownPosition = {
        x: e.clientX,
        y: e.clientY
      }

      window.addEventListener('mousemove', this.onWindowMouseMove)
      window.addEventListener('mouseup', this.onWindowMouseUp)
    }
  }

  onWindowMouseMove = (e) => {
    const rect = this.root.getBoundingClientRect()

    const {
      off,
      on
    } = this.props.thumbPosition

    if (e.clientX + -off >= rect.left && e.clientX <= rect.right) {
      let delta = e.clientX - rect.left

      if (delta <= off) delta = off

      if (delta <= on) {
        const toggled = delta >= on / 2

        this.setState({
          thumbLeft: delta,
          toggled: toggled
        })

        if (this.lastState !== toggled) {
          this.lastState = toggled
          this.triggerEvent()
        }   
      }
    }
  }

  onWindowMouseUp = (e) => {
    const {
      on,
      off
    } = this.props.thumbPosition

    this.samePosition = this.mouseDownPosition.x === e.clientX

    if (!this.samePosition) {
      this.setState({
        thumbLeft: this.state.toggled ? on : off
      })
    }

    window.removeEventListener('mousemove', this.onWindowMouseMove)
    window.removeEventListener('mouseup', this.onWindowMouseUp)
  }

  onClick = (e) => {
    if (this.samePosition) this.toggle()
  }

  toggle (flag = !this.state.toggled) {
    const {
      on,
      off
    } = this.props.thumbPosition

    this.setState({
      thumbLeft: flag ? on : off,
      toggled: flag
    })

    this.triggerEvent()
  }

  triggerEvent () {
    const onToggle = this.props.onToggle

    if (typeof onToggle === 'function') onToggle(this.state.toggled, this)
  }

  render () {
    const thumbStyle = {
      left: this.state.thumbLeft
    }

    return (
      <div className={'material-switch ' + (this.state.toggled ? 'toggled' : '')} ref={(r) => this.root = r} onMouseDown={this.onMouseDown} onClick={this.onClick}>
        <div className='track' ref={(r) => this.track = r} />
{'fraction_non_alphanumeric': 0.13383458646616542, 'fraction_numerical': 0.0017185821697099893, 'mean_word_length': 2.0451275343361672, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 22, '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': '5144434', 'n_tokens_mistral': 1533, 'n_tokens_neox': 1506, 'n_words': 303}