From c3ad78218b0b6bc9eb531b48ee582e787fa242fa Mon Sep 17 00:00:00 2001
From: "mucahit.inel" <mucahit.inel@trendyol.com>
Date: Fri, 18 Dec 2020 12:27:49 +0300
Subject: [PATCH] add slideChangeHooks for before and after changes

---
 __tests__/carousel.spec.tsx             | 49 +++++++++++++++++++++++++
 package-lock.json                       |  2 +-
 package.json                            |  2 +-
 src/components/carousel/defaultProps.ts |  2 +
 src/components/carousel/index.tsx       |  5 +++
 5 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/__tests__/carousel.spec.tsx b/__tests__/carousel.spec.tsx
index 4dda1ab..f639711 100644
--- a/__tests__/carousel.spec.tsx
+++ b/__tests__/carousel.spec.tsx
@@ -4,6 +4,7 @@ import { Carousel } from '../src/components/carousel';
 import { defaultProps } from '../src/components/carousel/defaultProps';
 import { carouselItemNodes, dynamicCarouselItemNodes } from './__fixtures__/nodes';
 import * as helpers from '../src/helpers';
+import { SlideDirection } from '../src/types/carousel';
 
 describe('<Carousel />', () => {
 	let mockGetPageX: jest.SpyInstance<
@@ -301,4 +302,52 @@ describe('<Carousel />', () => {
 
 		expect(button!.innerHTML).toEqual('1');
 	});
+
+	it('should invoke beforeChange when beforeChange prop is defined on slide', async () => {
+		const onBeforeChange = (direction: SlideDirection) => {
+			console.log(direction);
+		};
+		const stub = jest.fn(onBeforeChange);
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				children={carouselItemNodes(4)}
+				beforeChange={stub}
+			/>,
+		);
+		const carousel = getByTestId('carousel');
+		const button = carousel.querySelector('button');
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+		jest.runAllTimers();
+
+		expect(stub).toHaveBeenCalledTimes(1);
+	});
+
+	it('should invoke afterChange when afterChange prop is defined on slide', async () => {
+		const onAfterChange = (direction: SlideDirection) => {
+			console.log(direction);
+		};
+		const stub = jest.fn(onAfterChange);
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				children={carouselItemNodes(4)}
+				afterChange={stub}
+			/>,
+		);
+		const carousel = getByTestId('carousel');
+		const button = carousel.querySelector('button');
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+		jest.runAllTimers();
+
+		expect(stub).toHaveBeenCalledTimes(1);
+	});
 });
diff --git a/package-lock.json b/package-lock.json
index 820bcfb..2f42738 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@trendyol-js/react-carousel",
-	"version": "1.0.0",
+	"version": "1.0.7-beta.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 1a1a384..b08e14d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@trendyol-js/react-carousel",
-	"version": "1.0.7-beta.1",
+	"version": "1.0.7-beta.2",
 	"description": "Lightweight carousel component for react",
 	"main": "dist/cjs/index.js",
 	"module": "dist/es/index.js",
diff --git a/src/components/carousel/defaultProps.ts b/src/components/carousel/defaultProps.ts
index b86e0b7..8fcdcb9 100644
--- a/src/components/carousel/defaultProps.ts
+++ b/src/components/carousel/defaultProps.ts
@@ -13,4 +13,6 @@ export const defaultProps: Required<CarouselProps> = {
 	useArrowKeys: false,
 	a11y: {},
 	dynamic: false,
+	beforeChange: null,
+	afterChange: null,
 };
diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
index 7140487..53c1273 100644
--- a/src/components/carousel/index.tsx
+++ b/src/components/carousel/index.tsx
@@ -51,6 +51,8 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 			return;
 		}
 
+		if (props.beforeChange) props.beforeChange(direction);
+
 		const next = getCurrent(current, slide, props.children.length, direction);
 		const rotated = props.infinite
 			? rotateItems(props.children, items, next, props.show, slide, direction)
@@ -78,6 +80,7 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 				transition: 0,
 				isSliding: false,
 			});
+			if (props.afterChange) props.afterChange(direction);
 		}, props.transition * 1_0_0_0);
 	};
 
@@ -162,6 +165,8 @@ export interface CarouselProps {
 	useArrowKeys?: boolean;
 	a11y?: { [key: string]: string };
 	dynamic?: boolean;
+	beforeChange?: ((direction: SlideDirection) => void) | null;
+	afterChange?: ((direction: SlideDirection) => void) | null;
 }
 
 export interface CarouselState {