<commit_before>import React, { Component } from 'react'
import styled from 'styled-components'
import _ from 'lodash'
import ui from '../layouts/theme'

export default styled(class HorizontalScrollContainer extends Component {
	constructor(props) {
		super(props)
		this.handleScroll = _.throttle(this.handleScroll, 1300, { trailing: false}).bind(this)
		this.handleResize = _.throttle(this.handleResize, 100, { trailing: true}).bind(this)
		this.setUpScroll = this.setUpScroll.bind(this)
		this.scroll = this.scroll.bind(this)
		this.state = {
			offset: 0,
			lastDirection: 'backward',
			scrollInProgress: false,
			viewportWidth: 0
		}
	}

	componentDidMount() {
		window.addEventListener('resize', this.handleResize)
		this.container.addEventListener('wheel', this.handleScroll)
	}

	componentWillUnmount() {
		window.removeEventListener('resize', this.handleScroll)
		this.container.removeEventListener('wheel', this.handleScroll)
	}

	scroll(direction, behavior) {	
		const viewportWidth = window.matchMedia("(min-width: 768px)")
			? this.container.parentNode.clientWidth / 2
			: this.container.parentNode.clientWidth;

		const offset = (direction === 'forward')
			? this.state.offset + viewportWidth
			: this.state.offset - viewportWidth
		
		this.container.scroll({
			behavior,
			left: offset,
			top: 0
		})
		this.setState({<commit_msg>Keep scrollAmount ratio on mobile<commit_after>import React, { Component } from 'react'
import styled from 'styled-components'
import _ from 'lodash'
import ui from '../layouts/theme'

export default styled(class HorizontalScrollContainer extends Component {
	constructor(props) {
		super(props)
		this.handleScroll = _.throttle(this.handleScroll, 1300, { trailing: false}).bind(this)
		this.handleResize = _.throttle(this.handleResize, 100, { trailing: true}).bind(this)
		this.setUpScroll = this.setUpScroll.bind(this)
		this.scroll = this.scroll.bind(this)
		this.state = {
			offset: 0,
			lastDirection: 'backward',
			scrollInProgress: false,
			viewportWidth: 0
		}
	}

	componentDidMount() {
		window.addEventListener('resize', this.handleResize)
		this.container.addEventListener('wheel', this.handleScroll)
	}

	componentWillUnmount() {
		window.removeEventListener('resize', this.handleScroll)
		this.container.removeEventListener('wheel', this.handleScroll)
	}

	scroll(direction, behavior) {	
		const viewportWidth = (window.outerWidth > 767)
			? this.container.parentNode.clientWidth / 2
			: this.container.parentNode.clientWidth;

		const offset = (direction === 'forward')
			? this.state.offset + viewportWidth
			: this.state.offset - viewportWidth
		
		this.container.scroll({
			behavior,
			left: offset,
			top: 0
		})
		this.setState({
{'fraction_non_alphanumeric': 0.12417096536477525, 'fraction_numerical': 0.010316875460574797, 'mean_word_length': 4.62111801242236, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 4, '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': '4032063', 'n_tokens_mistral': 934, 'n_tokens_neox': 822, 'n_words': 165}