feat: add verticalSwipe property to deal with mobile vertical swipping.

This commit aims to fix [issue 198](#198).
leandrowd · Nov 29, 2017 · b6ff360 · b6ff360
1 parent 9e3f734
commit b6ff360
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git a/src/__tests__/Carousel.js b/src/__tests__/Carousel.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { shallow, mount } from 'enzyme';
 import renderer from 'react-test-renderer';
 import * as index from '../index';
+import Swipe from 'react-easy-swipe';
 
 describe("Slider", function() {
 	jest.autoMockOff();
@@ -76,6 +77,7 @@ describe("Slider", function() {
                 infiniteLoop: false,
                 selectedItem: 0,
                 axis: 'horizontal',
+                verticalSwipe: 'standard',
                 useKeyboardArrows: false,
                 autoPlay: false,
                 stopOnHover: true,
@@ -587,6 +589,33 @@ describe("Slider", function() {
                 expect(componentInstance.autoPlay.mock.calls.length).toBe(1);
             });
         });
+
+        describe('verticalSwipe === \'standard\'', () => {
+            it('should pass the correct props to <Swipe />', () => {
+                renderDefaultComponent({
+                    axis: 'vertical',
+                });
+
+                const swipeProps = component.find(Swipe).first().props();
+
+                expect(swipeProps.onSwipeUp).toBe(componentInstance.decrement);
+                expect(swipeProps.onSwipeDown).toBe(componentInstance.increment);
+            });
+        });
+
+        describe('verticalSwipe === \'natural\'', () => {
+            it('should pass the correct props to <Swipe />', () => {
+                renderDefaultComponent({
+                    axis: 'vertical',
+                    verticalSwipe: 'natural',
+                });
+
+                const swipeProps = component.find(Swipe).first().props();
+
+                expect(swipeProps.onSwipeUp).toBe(componentInstance.increment);
+                expect(swipeProps.onSwipeDown).toBe(componentInstance.decrement);
+            });
+        });
     });
 
     describe('center mode', () => {
@@ -610,7 +639,7 @@ describe("Slider", function() {
                 expect(componentInstance.getPosition(5)).toBe(-500);
                 expect(componentInstance.getPosition(6)).toBe(-600);
             });
-    
+
             it('should return padded transform calculation for horizontal axis', () => {
                 expect(componentInstance.getPosition(0)).toBe(0);
                 expect(componentInstance.getPosition(1)).toBe(-70);

diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -28,6 +28,7 @@ class Carousel extends Component {
         onClickThumb: PropTypes.func.isRequired,
         onChange: PropTypes.func.isRequired,
         axis: PropTypes.oneOf(['horizontal', 'vertical']),
+        verticalSwipe: PropTypes.oneOf(['natural', 'standard']),
         width: customPropTypes.unit,
         useKeyboardArrows: PropTypes.bool,
         autoPlay: PropTypes.bool,
@@ -50,6 +51,7 @@ class Carousel extends Component {
         infiniteLoop: false,
         selectedItem: 0,
         axis: 'horizontal',
+        verticalSwipe: 'standard',
         width: '100%',
         useKeyboardArrows: false,
         autoPlay: false,
@@ -339,7 +341,7 @@ class Carousel extends Component {
         if (this.props.centerMode && this.props.axis === 'horizontal') {
             let currentPosition = - index * this.props.centerSlidePercentage;
             const lastPosition = this.props.children.length  - 1;
-            
+
             if (index && index !== lastPosition) {
                 currentPosition += (100 - this.props.centerSlidePercentage) / 2;
             } else if (index === lastPosition) {
@@ -573,8 +575,8 @@ class Carousel extends Component {
             }
 
         } else {
-            swiperProps.onSwipeUp = this.decrement;
-            swiperProps.onSwipeDown = this.increment;
+            swiperProps.onSwipeUp = this.props.verticalSwipe === 'natural' ? this.increment : this.decrement;
+            swiperProps.onSwipeDown = this.props.verticalSwipe === 'natural' ? this.decrement : this.increment;
             swiperProps.style.height = this.state.itemSize;
             containerStyles.height = this.state.itemSize;
         }

diff --git a/stories/index.js b/stories/index.js
@@ -254,6 +254,11 @@ storiesOf('Carousel')
         { baseChildren.props.children }
     </Carousel>
   ), { source: true, inline: true, propTables: false})
+  .addWithInfo('vertical axis + emulateTouch + "natural" vertical swipe', () => (
+    <Carousel axis="vertical" verticalSwipe="natural" emulateTouch>
+        { baseChildren.props.children }
+    </Carousel>
+  ), { source: true, inline: true, propTables: false})
   .addWithInfo('youtube', () => (
     <Carousel showThumbs={false}>
 		<div key="youtube-1">