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 {