diff --git a/__tests__/carousel.spec.tsx b/__tests__/carousel.spec.tsx
index 4dda1ab..23bfe23 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('', () => {
let mockGetPageX: jest.SpyInstance<
@@ -301,4 +302,52 @@ describe('', () => {
expect(button!.innerHTML).toEqual('1');
});
+
+ it('should invoke beforeChange when beforeChange prop is defined on slide', async () => {
+ const onBeforeChange = (_: SlideDirection) => {
+ return;
+ };
+ const stub = jest.fn(onBeforeChange);
+ const { getByTestId } = render(
+ ,
+ );
+ 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 = (_: SlideDirection) => {
+ return;
+ };
+ const stub = jest.fn(onAfterChange);
+ const { getByTestId } = render(
+ ,
+ );
+ 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 = {
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 = (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 = (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 {