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/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", 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 {