diff --git a/src/__tests__/Carousel.js b/src/__tests__/Carousel.js index fd7d64f8..8e8bcd69 100644 --- 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 ', () => { + 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 ', () => { + 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 index 5d9025a2..f3c906aa 100644 --- 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 index 7ac5acb8..eb42e911 100644 --- a/stories/index.js +++ b/stories/index.js @@ -254,6 +254,11 @@ storiesOf('Carousel') { baseChildren.props.children } ), { source: true, inline: true, propTables: false}) + .addWithInfo('vertical axis + emulateTouch + "natural" vertical swipe', () => ( + + { baseChildren.props.children } + + ), { source: true, inline: true, propTables: false}) .addWithInfo('youtube', () => (