From c3ad78218b0b6bc9eb531b48ee582e787fa242fa Mon Sep 17 00:00:00 2001 From: "mucahit.inel" Date: Fri, 18 Dec 2020 12:27:49 +0300 Subject: [PATCH 1/2] 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('', () => { 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 = (direction: SlideDirection) => { + console.log(direction); + }; + 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 = (direction: SlideDirection) => { + console.log(direction); + }; + 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 { From b65756a5acb46f6e73a07aedac82bbbd22f50ea7 Mon Sep 17 00:00:00 2001 From: "mucahit.inel" Date: Fri, 18 Dec 2020 12:55:31 +0300 Subject: [PATCH 2/2] remove unused method from tests --- __tests__/carousel.spec.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/__tests__/carousel.spec.tsx b/__tests__/carousel.spec.tsx index f639711..23bfe23 100644 --- a/__tests__/carousel.spec.tsx +++ b/__tests__/carousel.spec.tsx @@ -304,8 +304,8 @@ describe('', () => { }); it('should invoke beforeChange when beforeChange prop is defined on slide', async () => { - const onBeforeChange = (direction: SlideDirection) => { - console.log(direction); + const onBeforeChange = (_: SlideDirection) => { + return; }; const stub = jest.fn(onBeforeChange); const { getByTestId } = render( @@ -328,8 +328,8 @@ describe('', () => { }); it('should invoke afterChange when afterChange prop is defined on slide', async () => { - const onAfterChange = (direction: SlideDirection) => { - console.log(direction); + const onAfterChange = (_: SlideDirection) => { + return; }; const stub = jest.fn(onAfterChange); const { getByTestId } = render(