From 7e85982fde82a2eef3883b7f9f6822b6f3e5ec85 Mon Sep 17 00:00:00 2001 From: "yavuz.koca" Date: Fri, 3 Sep 2021 17:17:24 +0300 Subject: [PATCH 1/2] add custom arrows when its given from the props --- __tests__/carousel.spec.tsx | 14 ++++++++++++++ src/components/arrow/index.tsx | 2 +- src/components/carousel/defaultProps.ts | 2 ++ src/components/carousel/index.tsx | 11 +++++++++-- 4 files changed, 26 insertions(+), 3 deletions(-) diff --git a/__tests__/carousel.spec.tsx b/__tests__/carousel.spec.tsx index 84232d7..30b1505 100644 --- a/__tests__/carousel.spec.tsx +++ b/__tests__/carousel.spec.tsx @@ -329,4 +329,18 @@ describe('', () => { expect(paginationCallback).toHaveBeenCalledTimes(1); expect(mockUsePrevious).toBeCalled(); }); + + it('should render custom arrows when prop is passed', async () => { + const { container } = render( + } + rightArrow={
} + children={carouselItemNodes(6)} + />, + ); + + expect(container.getElementsByClassName("left-arrow")[0]).toBeTruthy(); + expect(container.getElementsByClassName("right-arrow")[0]).toBeTruthy(); + }); }); diff --git a/src/components/arrow/index.tsx b/src/components/arrow/index.tsx index aab5b11..c81ee39 100644 --- a/src/components/arrow/index.tsx +++ b/src/components/arrow/index.tsx @@ -9,6 +9,6 @@ export const Arrow: FunctionComponent = (props: ArrowProps) => ( /> ); export interface ArrowProps { - onClick: (...args: any) => any; + onClick?: (...args: any) => any; direction: string; } diff --git a/src/components/carousel/defaultProps.ts b/src/components/carousel/defaultProps.ts index 6088744..0e4828e 100644 --- a/src/components/carousel/defaultProps.ts +++ b/src/components/carousel/defaultProps.ts @@ -15,4 +15,6 @@ export const defaultProps: Required = { dynamic: false, paginationCallback: null, pageCount: 0, + rightArrow: null, + leftArrow: null }; diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx index 623c649..8a1e940 100644 --- a/src/components/carousel/index.tsx +++ b/src/components/carousel/index.tsx @@ -4,6 +4,7 @@ import React, { KeyboardEvent, useEffect, useRef, + ReactElement, } from 'react'; import { Arrow } from '../arrow'; import { ItemProvider } from '../item'; @@ -168,7 +169,9 @@ export const Carousel: FunctionComponent = (userProps: CarouselPr className={`${styles.carouselBase} ${props.className}`} > {showArrow.left && ( - slide(SlideDirection.Left)} /> +
slide(SlideDirection.Left)}> + {props.leftArrow ?? } +
)} = (userProps: CarouselPr widthCallBack={widthCallBack} /> {showArrow.right && ( - slide(SlideDirection.Right)} /> +
slide(SlideDirection.Right)}> + {props.rightArrow ?? } +
)}
); @@ -201,6 +206,8 @@ export interface CarouselProps { dynamic?: boolean; paginationCallback?: ((direction: SlideDirection) => any) | null; pageCount?: number; + leftArrow?: ReactElement | null; + rightArrow?: ReactElement | null; } export interface CarouselState { From eb7a187679ad8b12d56bacbb9dfd9b0990268432 Mon Sep 17 00:00:00 2001 From: "yavuz.koca" Date: Fri, 3 Sep 2021 17:29:03 +0300 Subject: [PATCH 2/2] change version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index acd6173..877c9eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@trendyol-js/react-carousel", - "version": "1.2.0-beta.1", + "version": "1.2.0-beta.2", "description": "Lightweight carousel component for react", "main": "dist/cjs/index.js", "module": "dist/es/index.js",