<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { getSlideHeight } from '../utilities/style-utilities';
import { handleSelfFocus } from '../utilities/utilities';

export default class FadeTransition extends React.Component {
  constructor(props) {
    super(props);
    this.fadeFromSlide = props.currentSlide;
  }

  formatChildren(children, opacity) {
    const { currentSlide, slidesToShow } = this.props;
    return React.Children.map(children, (child, index) => {
      const visible =
        index >= currentSlide && index < currentSlide + slidesToShow;
      return (
        <li
          className={`slider-slide${visible ? ' slide-visible' : ''}`}
          style={this.getSlideStyles(index, opacity)}
          key={index}
          onClick={handleSelfFocus}
          tabIndex={-1}
        >
          {child}
        </li>
      );
    });
  }

  getSlideOpacityAndLeftMap(fadeFrom, fadeTo, fade) {
    // Figure out which position to fade to
    let fadeToPosition = fadeTo;
    if (fadeFrom > fade && fadeFrom === 0) {
      fadeToPosition = fadeFrom - this.props.slidesToShow;
    } else if (
      fadeFrom < fade &&
      fadeFrom + this.props.slidesToShow > this.props.slideCount - 1
    ) {
      fadeToPosition = fadeFrom + this.props.slidesToShow;
    }

    // Calculate opacity for active slides
    const opacity = {};
    if (fadeFrom === fadeTo) {
      opacity[fadeFrom] = 1;
    } else {
      const distance = fadeFrom - fadeToPosition;
      opacity[fadeFrom] = (fade - fadeToPosition) / distance;
      opacity[fadeTo] = (fadeFrom - fade) / distance;
    }

    // Calculate left for slides and merge in opacity
    const map = {};
    for (let i = 0; i < this.props.slidesToShow; i++) {
      map[fadeFrom + i] = {
        opacity: opacity[fadeFrom],
        left: this.props.slideWidth * i
      };

      map[fadeTo + i] = {
        opacity: opacity[fadeTo],
        left: this.props.slideWidth * i
      };
    }

    return map;
  }

  getSlideStyles(index, data) {
    return {
      boxSizing: 'border-box',
      display: 'block',
      height: getSlideHeight(this.props),
      left: data[index] ? data[index].left : 0,
      listStyleType: 'none',
      marginBottom: 'auto',
      marginLeft: this.props.cellSpacing / 2,
      marginRight: this.props.cellSpacing / 2,
      marginTop: 'auto',
      MozBoxSizing: 'border-box',
      opacity: data[index] ? data[index].opacity : 0,
      position: 'absolute',
      top: 0,
      verticalAlign: 'top',
      visibility: data[index] ? 'inherit' : 'hidden',
      width: this.props.slideWidth
    };
  }

  getContainerStyles() {
    const width = this.props.slideWidth * this.props.slidesToShow;

    return {
      boxSizing: 'border-box',
      cursor: this.props.dragging === true ? 'pointer' : 'inherit',
      display: 'block',
      height: this.props.slideHeight,
      margin: this.props.vertical
        ? `${(this.props.cellSpacing / 2) * -1}px 0px`
        : `0px ${(this.props.cellSpacing / 2) * -1}px`,
      MozBoxSizing: 'border-box',
      padding: 0,
      touchAction: 'none',
      width
    };
  }

  render() {
    const fade =
      -(this.props.deltaX || this.props.deltaY) / this.props.slideWidth;

    if (parseInt(fade) === fade) {
      this.fadeFromSlide = fade;
    }

    const opacityAndLeftMap = this.getSlideOpacityAndLeftMap(
      this.fadeFromSlide,
      this.props.currentSlide,
      fade<commit_msg>Issue 646: Prevent fade and fadeFromSlide from reaching/equalling slideCount to solve opacity issue (#647)<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { getSlideHeight } from '../utilities/style-utilities';
import { handleSelfFocus } from '../utilities/utilities';

export default class FadeTransition extends React.Component {
  constructor(props) {
    super(props);
    this.fadeFromSlide = props.currentSlide;
  }

  formatChildren(children, opacity) {
    const { currentSlide, slidesToShow } = this.props;
    return React.Children.map(children, (child, index) => {
      const visible =
        index >= currentSlide && index < currentSlide + slidesToShow;
      return (
        <li
          className={`slider-slide${visible ? ' slide-visible' : ''}`}
          style={this.getSlideStyles(index, opacity)}
          key={index}
          onClick={handleSelfFocus}
          tabIndex={-1}
        >
          {child}
        </li>
      );
    });
  }

  getSlideOpacityAndLeftMap(fadeFrom, fadeTo, fade) {
    // Figure out which position to fade to
    let fadeToPosition = fadeTo;
    if (fadeFrom > fade && fadeFrom === 0) {
      fadeToPosition = fadeFrom - this.props.slidesToShow;
    } else if (
      fadeFrom < fade &&
      fadeFrom + this.props.slidesToShow > this.props.slideCount - 1
    ) {
      fadeToPosition = fadeFrom + this.props.slidesToShow;
    }

    // Calculate opacity for active slides
    const opacity = {};
    if (fadeFrom === fadeTo) {
      opacity[fadeFrom] = 1;
    } else {
      const distance = fadeFrom - fadeToPosition;
      opacity[fadeFrom] = (fade - fadeToPosition) / distance;
      opacity[fadeTo] = (fadeFrom - fade) / distance;
    }

    // Calculate left for slides and merge in opacity
    const map = {};
    for (let i = 0; i < this.props.slidesToShow; i++) {
      map[fadeFrom + i] = {
        opacity: opacity[fadeFrom],
        left: this.props.slideWidth * i
      };

      map[fadeTo + i] = {
        opacity: opacity[fadeTo],
        left: this.props.slideWidth * i
      };
    }

    return map;
  }

  getSlideStyles(index, data) {
    return {
      boxSizing: 'border-box',
      display: 'block',
      height: getSlideHeight(this.props),
      left: data[index] ? data[index].left : 0,
      listStyleType: 'none',
      marginBottom: 'auto',
      marginLeft: this.props.cellSpacing / 2,
      marginRight: this.props.cellSpacing / 2,
      marginTop: 'auto',
      MozBoxSizing: 'border-box',
      opacity: data[index] ? data[index].opacity : 0,
      position: 'absolute',
      top: 0,
      verticalAlign: 'top',
      visibility: data[index] ? 'inherit' : 'hidden',
      width: this.props.slideWidth
    };
  }

  getContainerStyles() {
    const width = this.props.slideWidth * this.props.slidesToShow;

    return {
      boxSizing: 'border-box',
      cursor: this.props.dragging === true ? 'pointer' : 'inherit',
      display: 'block',
      height: this.props.slideHeight,
      margin: this.props.vertical
        ? `${(this.props.cellSpacing / 2) * -1}px 0px`
        : `0px ${(this.props.cellSpacing / 2) * -1}px`,
      MozBoxSizing: 'border-box',
      padding: 0,
      touchAction: 'none',
      width
    };
  }

  render() {
    const fade =
      (-(this.props.deltaX || this.props.deltaY) / this.props.slideWidth) %
      this.props.slideCount;
    if (parseInt(fade) === fade) {
      this.fadeFromSlide = fade;
    }

    const opacityAndLeftMap = this.getSlideOpacityAndLeftMap(
      this.fadeFromSlide,
      this.props.currentSlide,
      fade
{'fraction_non_alphanumeric': 0.13059490084985836, 'fraction_numerical': 0.0056657223796034, 'mean_word_length': 2.434338521400778, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 15, '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': '2345260', 'n_tokens_mistral': 2277, 'n_tokens_neox': 2202, 'n_words': 489}