<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Scrollbars } from 'react-custom-scrollbars';
import Group from './Group';

export default class Groups extends Component {
  static propTypes = {
    cacheBustParam: PropTypes.string.isRequired,
    imagePath: PropTypes.string.isRequired,
    imageType: PropTypes.string.isRequired,
    theme: PropTypes.object.isRequired,
    groups: PropTypes.arrayOf(PropTypes.object).isRequired,
    emojis: PropTypes.object.isRequired,
    checkMouseDown: PropTypes.func.isRequired,
    onEmojiSelect: PropTypes.func.isRequired,
    onEmojiMouseDown: PropTypes.func.isRequired,
    onGroupScroll: PropTypes.func.isRequired,
  };

  componentDidMount() {
    this.calculateBounds();
  }

  componentDidUpdate() {
    this.calculateBounds();
  }

  onScroll = (values) => {
    const { groups, onGroupScroll } = this.props;
    let activeGroup = 0;
    console.log(values.top);
    groups.forEach((group, index) => {
      if (values.top >= group.top) {
        activeGroup = index;
      }
    });
    onGroupScroll(activeGroup);
  }

  onWheel = (e) => {
    // Disable page scroll
    const height = this.scrollbars.getValues().scrollHeight;
    const delta = e.deltaY / height;
    const top = this.scrollbars.getValues().top;
    if (delta > 0) {
      if (top < 1 - delta) {
        e.stopPropagation();
      } else {
        this.scrollbars.scrollToBottom();
      }
    } else {
      if (top > -delta) { // eslint-disable-line no-lonely-if
        e.stopPropagation();
      } else {
        this.scrollbars.scrollTop();
      }
    }
  }

  scrollToGroup = (groupIndex) => {
    const { groups } = this.props;

    this.scrollbars.scrollTop(groups[groupIndex].topList);
  }

  calculateBounds = () => {
    const { groups } = this.props;
    const height = this.scrollbars.getValues().scrollHeight;
    const scrollTop = this.scrollbars.getValues().scrollTop;
    const containerTop = this.container.getBoundingClientRect().top - scrollTop;

    console.log(height);

    if (height) {
      groups.forEach((group) => {
        const groupTop = group.instance.container.getBoundingClientRect().top;
        const listTop = group.instance.list.getBoundingClientRect().top;
        group.top = (groupTop - containerTop) / height; // eslint-disable-line no-param-reassign
        group.topList = (listTop - containerTop) / height; // eslint-disable-line no-param-reassign
      });
    }

    console.log(groups);
  }

  render() {<commit_msg>Fix disable/enable scroll & select active group & nav<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Scrollbars } from 'react-custom-scrollbars';
import Group from './Group';

export default class Groups extends Component {
  static propTypes = {
    cacheBustParam: PropTypes.string.isRequired,
    imagePath: PropTypes.string.isRequired,
    imageType: PropTypes.string.isRequired,
    theme: PropTypes.object.isRequired,
    groups: PropTypes.arrayOf(PropTypes.object).isRequired,
    emojis: PropTypes.object.isRequired,
    checkMouseDown: PropTypes.func.isRequired,
    onEmojiSelect: PropTypes.func.isRequired,
    onEmojiMouseDown: PropTypes.func.isRequired,
    onGroupScroll: PropTypes.func.isRequired,
  };

  componentDidMount() {
    this.calculateBounds();
  }

  componentDidUpdate() {
    this.calculateBounds();
  }

  onScroll = (values) => {
    const { groups, onGroupScroll } = this.props;
    let activeGroup = 0;
    groups.forEach((group, index) => {
      if (values.scrollTop >= group.top) {
        activeGroup = index;
      }
    });
    onGroupScroll(activeGroup);
  }

  onWheel = (e) => {
    // Disable page scroll, but enable groups scroll
    const { clientHeight, scrollHeight, scrollTop } = this.scrollbars.getValues();
    if (e.deltaY > 0) {
      if (scrollTop < scrollHeight - clientHeight - e.deltaY) {
        e.stopPropagation();
      } else {
        this.scrollbars.scrollToBottom();
      }
    } else {
      if (scrollTop > -e.deltaY) { // eslint-disable-line no-lonely-if
        e.stopPropagation();
      } else {
        this.scrollbars.scrollTop();
      }
    }
  }

  scrollToGroup = (groupIndex) => {
    const { groups } = this.props;

    this.scrollbars.scrollTop(groups[groupIndex].topList);
  }

  calculateBounds = () => {
    const { scrollHeight, scrollTop } = this.scrollbars.getValues();
    if (scrollHeight) {
      const { groups } = this.props;
      const containerTop = this.container.getBoundingClientRect().top - scrollTop;

      groups.forEach((group) => {
        const groupTop = group.instance.container.getBoundingClientRect().top;
        const listTop = group.instance.list.getBoundingClientRect().top;
        group.top = groupTop - containerTop; // eslint-disable-line no-param-reassign
        group.topList = listTop - containerTop; // eslint-disable-line no-param-reassign
      });
    }
  }

  render() {
{'fraction_non_alphanumeric': 0.12672949669139763, 'fraction_numerical': 0.0010026067776218166, 'mean_word_length': 2.9462025316455698, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 21, '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': '7661832', 'n_tokens_mistral': 1517, 'n_tokens_neox': 1519, 'n_words': 289}