From 7e85982fde82a2eef3883b7f9f6822b6f3e5ec85 Mon Sep 17 00:00:00 2001
From: "yavuz.koca" <yavuz.koca@trendyol.com>
Date: Fri, 3 Sep 2021 17:17:24 +0300
Subject: [PATCH] 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('<Carousel />', () => {
 		expect(paginationCallback).toHaveBeenCalledTimes(1);
 		expect(mockUsePrevious).toBeCalled();
 	});
+
+	it('should render custom arrows when prop is passed', async () => {
+		const { container } = render(
+			<Carousel
+				{...defaultProps}
+				leftArrow={<div className="left-arrow"/>}
+				rightArrow={<div className="right-arrow"/>}
+				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<ArrowProps> = (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<CarouselProps> = {
 	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<CarouselProps> = (userProps: CarouselPr
 			className={`${styles.carouselBase} ${props.className}`}
 		>
 			{showArrow.left && (
-				<Arrow direction="left" onClick={() => slide(SlideDirection.Left)} />
+				<div onClick={() => slide(SlideDirection.Left)}>
+					{props.leftArrow ?? <Arrow direction="left" />}
+				</div>
 			)}
 			<ItemProvider
 				{...props}
@@ -180,7 +183,9 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 				widthCallBack={widthCallBack}
 			/>
 			{showArrow.right && (
-				<Arrow direction="right" onClick={() => slide(SlideDirection.Right)} />
+				<div onClick={() => slide(SlideDirection.Right)}>
+					{props.rightArrow ?? <Arrow direction="right" />}
+				</div>
 			)}
 		</div>
 	);
@@ -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 {