Fix bug with clicking slide to navigate in infinite mode

Author: chinrichs-godaddy

.eslintrc

@@ -5,6 +5,7 @@
     "template-curly-spacing": "off",
     "indent": "off",
     "accessor-pairs": "off",
-    "react/jsx-pascal-case": "off"
+    "react/jsx-pascal-case": "off",
+    "no-nested-ternary": "off"
   }
 }

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 2.0.2 - May 2021
+
+***(Bug Fix)*** Fixes a bug when clicking to navigate to a particular slide and crossing the end or beginning of the list
+
 # 2.0.1 - May 2021
 
 ***(Bug Fix)*** Fixes a bug in Safari 14.1 and Mobile Safari where carousel content is not visible in some scenarios

src/index.js

@@ -300,18 +300,24 @@ export default class Carousel extends Component {
    * @param {Boolean} autoSlide - The source of slide transition, should be true for autoPlay and false for user click.
    */
   goToSlide = (index, direction, autoSlide = false) => {
-    const { beforeChange, transitionDuration, transition, onSlideTransitioned } = this.props;
+    const { beforeChange, transitionDuration, transition, onSlideTransitioned, children } = this.props;
+    const { currentSlide } = this.state;
+    const lastIndex = Children.count(children) - 1;
+
+    const newIndex = index < 0 ? lastIndex + index + 1 :
+      index <= lastIndex ? index : index - lastIndex - 1;
+
+    direction = direction || (index > currentSlide ? 'right' : 'left');
 
     if (onSlideTransitioned) {
       onSlideTransitioned({
         autoPlay: autoSlide,
-        index,
+        index: newIndex,
         direction
       });
     }
 
-    const { currentSlide } = this.state;
-    if (currentSlide === index) {
+    if (currentSlide === newIndex) {
       return;
     }
 
@@ -326,7 +332,7 @@ export default class Carousel extends Component {
       transitionDuration
     }, () => {
       this.setState({
-        currentSlide: index,
+        currentSlide: newIndex,
         direction,
         transitioningFrom: currentSlide
       }, () => {
@@ -343,20 +349,16 @@ export default class Carousel extends Component {
    * @param {Object} e - The event that calls nextSlide, will be undefined for autoPlay.
    */
   nextSlide = (e) => {
-    const { children } = this.props;
     const { currentSlide } = this.state;
-    const newIndex = currentSlide < Children.count(children) - 1 ? currentSlide + 1 : 0;
-    this.goToSlide(newIndex, 'right', typeof e !== 'object');
+    this.goToSlide(currentSlide + 1, 'right', typeof e !== 'object');
   }
 
   /**
    * Transitions to the previous slide moving from right to left.
    */
   prevSlide = () => {
-    const { children } = this.props;
     const { currentSlide } = this.state;
-    const newIndex = currentSlide > 0 ? currentSlide - 1 : Children.count(children) - 1;
-    this.goToSlide(newIndex, 'left');
+    this.goToSlide(currentSlide - 1, 'left');
   }
 
   /**
@@ -585,6 +587,7 @@ export default class Carousel extends Component {
           style={ loadingSlideStyle }
           data-index={ index }
           className={ classnames(slideClasses, LOADING_CLASS) }
+          onClick={ this.handleSlideClick }
         ></li>
       );
     });

test/unit/carousel.tests.js

@@ -189,6 +189,44 @@ describe('Carousel', () => {
     });
   });
 
+  it('should jump directly to a slide when the slide is clicked', done => {
+    const onSlideTransitionedStub = sinon.stub();
+
+    renderToJsdom(
+      <Carousel slideWidth='300px'
+        viewportWidth='300px'
+        infinite={ true }
+        onSlideTransitioned={ onSlideTransitionedStub }>
+        <div id='slide1'/>
+        <div id='slide2'/>
+        <div id='slide3'/>
+        <div id='slide4'/>
+        <div id='slide5'/>
+        <div id='slide6'/>
+      </Carousel>
+    );
+
+    setImmediate(() => {
+      let slides = tree.find('.carousel-slide');
+      const track = tree.find('.carousel-track');
+      expect(slides.length).to.equal(10);
+      expect(slides.at(2).prop('className')).to.contain('carousel-slide-selected');
+      expect(slides.at(2).prop('data-index')).to.eql(0);
+      slides.at(0).simulate('mousedown', { clientX: 0, clientY: 0 });
+      slides.at(0).simulate('click', { clientX: 0, clientY: 0 });
+      slides = tree.find('.carousel-slide');
+      expect(slides.at(6).prop('className')).to.contain('carousel-slide-selected');
+      expect(slides.at(6).prop('data-index')).to.eql(4);
+      track.simulate('transitionend', { propertyName: 'transform' });
+      slides.at(9).simulate('mousedown', { clientX: 0, clientY: 0 });
+      slides.at(9).simulate('click', { clientX: 0, clientY: 0 });
+      slides = tree.find('.carousel-slide');
+      expect(slides.at(3).prop('className')).to.contain('carousel-slide-selected');
+      expect(slides.at(3).prop('data-index')).to.eql(1);
+      done();
+    });
+  });
+
   it('should not freeze when a selected dot is clicked', done => {
     renderToJsdom(
       <Carousel slideWidth='300px' viewportWidth='300px' infinite={ false }>