Merge pull request #366 from willedanielsson/add-callback-on-swipe-ev…

…ents Add callback on swipe events
leandrowd · Oct 23, 2019 · 69e1663 · 69e1663
2 parents 512929c + db4aba9
commit 69e1663
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -115,6 +115,9 @@ ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
 | centerMode            | `boolean`     | `false` | Enables centered view with partial prev/next slides. Only works with horizontal axis. |
 | centerSlidePercentage | `number`      | `80` | optionally specify percentage width (as an integer) of the slides in `centerMode` |
 | labels | `object [key: string]: string`      | `{ leftArrow, rightArrow, item }` | optionally specify labels to be applied to controls |
+| onSwipeStart          | `function`    | - | Fired when a swiping gesture has started |
+| onSwipeEnd            | `function`    | - | Fired when a swiping gesture has ended |
+| onSwipeMove           | `function`    | - | Fired when a swiping gesture is happening |
 
 
 =======================

diff --git a/src/__tests__/Carousel.js b/src/__tests__/Carousel.js
@@ -639,6 +639,14 @@ describe("Slider", function() {
                 componentInstance.onSwipeStart();
                 expect(componentInstance.clearAutoPlay.mock.calls.length).toBe(1);
             });
+
+            it('should call onSwipeStart callback', () => {
+                var onSwipeStartFunction = jest.genMockFunction();
+                renderDefaultComponent({onSwipeStart: onSwipeStartFunction});
+
+                componentInstance.onSwipeStart();
+                expect(onSwipeStartFunction).toBeCalled();
+            });
         });
 
         describe('onSwipeMove', () => {
@@ -655,6 +663,14 @@ describe("Slider", function() {
                     y: 10
                 })).toBe(false);
             });
+
+            it('should call onSwipeMove callback', () => {
+                var onSwipeMoveFunction = jest.genMockFunction();
+                renderDefaultComponent({onSwipeMove: onSwipeMoveFunction});
+
+                componentInstance.onSwipeMove({ x: 0, y: 10 });
+                expect(onSwipeMoveFunction).toBeCalled();
+            });
         });
 
         describe('onSwipeEnd', () => {
@@ -667,6 +683,14 @@ describe("Slider", function() {
                 componentInstance.onSwipeEnd();
                 expect(componentInstance.autoPlay.mock.calls.length).toBe(1);
             });
+
+            it('should call onSwipeEnd callback', () => {
+                var onSwipeEndFunction = jest.genMockFunction();
+                renderDefaultComponent({onSwipeEnd: onSwipeEndFunction});
+
+                componentInstance.onSwipeEnd();
+                expect(onSwipeEndFunction).toBeCalled();
+            });
         });
 
         describe('verticalSwipe === \'standard\'', () => {

diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -46,7 +46,10 @@ class Carousel extends Component {
             leftArrow: PropTypes.string,
             rightArrow: PropTypes.string,
             item: PropTypes.string
-        })
+        }),
+        onSwipeStart: PropTypes.func,
+        onSwipeEnd: PropTypes.func,
+        onSwipeMove: PropTypes.func
     };
 
     static defaultProps = {
@@ -78,7 +81,10 @@ class Carousel extends Component {
             leftArrow: 'previous slide / item',
             rightArrow: 'next slide / item',
             item: 'slide item'
-        }
+        },
+        onSwipeStart: () => {},
+        onSwipeEnd: () => {},
+        onSwipeMove: () => {}
     };
 
     constructor(props) {
@@ -346,22 +352,25 @@ class Carousel extends Component {
         });
     }
 
-    onSwipeStart = () => {
+    onSwipeStart = (event) => {
         this.setState({
             swiping: true,
         });
+        this.props.onSwipeStart(event);
         this.clearAutoPlay();
     }
 
-    onSwipeEnd = () => {
+    onSwipeEnd = (event) => {
         this.setState({
             swiping: false,
             cancelClick: false
         });
+        this.props.onSwipeEnd(event);
         this.autoPlay();
     }
 
-    onSwipeMove = (delta) => {
+    onSwipeMove = (delta, event) => {
+        this.props.onSwipeMove(event);
         const isHorizontal = this.props.axis === 'horizontal';
         const childrenLength = Children.count(this.props.children);