fix(Carousel): fixes #4136 - reverse carousel slide navigation direct…

…ion for touch (#4137) * fix(Carousel): fixes #4136 - reverse carousel slide navigation direction for touch * chore(carousel-spec): correct formatting #4136
react-bootstrap · Jul 29, 2019 · 5be68b7 · 5be68b7
1 parent fce0e8b
commit 5be68b7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/Carousel.js b/src/Carousel.js
@@ -242,11 +242,13 @@ class Carousel extends React.Component {
     )
       return;
 
-    // Going left
-    if (e.changedTouches[0].screenX < this.state.touchStartX)
+    if (e.changedTouches[0].screenX < this.state.touchStartX) {
+      // Swiping left to navigate to next item.
+      this.handleNext(e);
+    } else {
+      // Swiping right to navigate to previous item.
       this.handlePrev(e);
-    // Going right
-    else this.handleNext(e);
+    }
   };
 
   handleSlideEnd = () => {

diff --git a/test/CarouselSpec.js b/test/CarouselSpec.js
@@ -289,14 +289,16 @@ describe('<Carousel>', () => {
   });
 
   describe('touch events', () => {
-    // const clock = sinon.useFakeTimers();
     let clock, wrapper, onSelectSpy;
-
+    const slideItems = [
+      ...items,
+      <Carousel.Item key={3}>Item 3 content</Carousel.Item>,
+    ];
     beforeEach(() => {
       onSelectSpy = sinon.spy();
       wrapper = mount(
-        <Carousel interval={0} onSelect={onSelectSpy} touch>
-          {items}
+        <Carousel activeIndex={1} interval={null} onSelect={onSelectSpy} touch>
+          {slideItems}
         </Carousel>,
       );
 
@@ -305,27 +307,27 @@ describe('<Carousel>', () => {
     afterEach(() => {
       clock.tick(150);
     });
-    it('should swipe left', () => {
+    it('should swipe right', () => {
       try {
         wrapper.simulate('touchStart', { changedTouches: [{ screenX: 50 }] });
         wrapper.simulate('touchEnd', { changedTouches: [{ screenX: 0 }] });
 
         clock.tick(50);
         expect(onSelectSpy).to.have.been.calledOnce;
-        expect(onSelectSpy.getCall(0).args[0]).to.equal(1);
+        expect(onSelectSpy.getCall(0).args[0]).to.equal(2);
       } finally {
         clock.restore();
       }
     });
 
-    it('should swipe right', () => {
+    it('should swipe left', () => {
       try {
         wrapper.simulate('touchStart', { changedTouches: [{ screenX: 0 }] });
         wrapper.simulate('touchEnd', { changedTouches: [{ screenX: 50 }] });
 
         clock.tick(50);
         expect(onSelectSpy).to.have.been.calledOnce;
-        expect(onSelectSpy.getCall(0).args[0]).to.equal(1);
+        expect(onSelectSpy.getCall(0).args[0]).to.equal(0);
       } finally {
         clock.restore();
       }

diff --git a/types/components/Carousel.d.ts b/types/components/Carousel.d.ts
@@ -22,6 +22,7 @@ export interface CarouselProps {
   prevLabel?: string;
   nextIcon?: React.ReactNode;
   nextLabel?: string;
+  touch?: boolean;
 }
 
 declare class Carousel<