add custom arrows when its given from the props

master
yavuz.koca 3 years ago
parent 16da9dda5b
commit 7e85982fde
  1. 14
      __tests__/carousel.spec.tsx
  2. 2
      src/components/arrow/index.tsx
  3. 2
      src/components/carousel/defaultProps.ts
  4. 11
      src/components/carousel/index.tsx

@ -329,4 +329,18 @@ describe('<Carousel />', () => {
expect(paginationCallback).toHaveBeenCalledTimes(1); expect(paginationCallback).toHaveBeenCalledTimes(1);
expect(mockUsePrevious).toBeCalled(); 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();
});
}); });

@ -9,6 +9,6 @@ export const Arrow: FunctionComponent<ArrowProps> = (props: ArrowProps) => (
/> />
); );
export interface ArrowProps { export interface ArrowProps {
onClick: (...args: any) => any; onClick?: (...args: any) => any;
direction: string; direction: string;
} }

@ -15,4 +15,6 @@ export const defaultProps: Required<CarouselProps> = {
dynamic: false, dynamic: false,
paginationCallback: null, paginationCallback: null,
pageCount: 0, pageCount: 0,
rightArrow: null,
leftArrow: null
}; };

@ -4,6 +4,7 @@ import React, {
KeyboardEvent, KeyboardEvent,
useEffect, useEffect,
useRef, useRef,
ReactElement,
} from 'react'; } from 'react';
import { Arrow } from '../arrow'; import { Arrow } from '../arrow';
import { ItemProvider } from '../item'; import { ItemProvider } from '../item';
@ -168,7 +169,9 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
className={`${styles.carouselBase} ${props.className}`} className={`${styles.carouselBase} ${props.className}`}
> >
{showArrow.left && ( {showArrow.left && (
<Arrow direction="left" onClick={() => slide(SlideDirection.Left)} /> <div onClick={() => slide(SlideDirection.Left)}>
{props.leftArrow ?? <Arrow direction="left" />}
</div>
)} )}
<ItemProvider <ItemProvider
{...props} {...props}
@ -180,7 +183,9 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
widthCallBack={widthCallBack} widthCallBack={widthCallBack}
/> />
{showArrow.right && ( {showArrow.right && (
<Arrow direction="right" onClick={() => slide(SlideDirection.Right)} /> <div onClick={() => slide(SlideDirection.Right)}>
{props.rightArrow ?? <Arrow direction="right" />}
</div>
)} )}
</div> </div>
); );
@ -201,6 +206,8 @@ export interface CarouselProps {
dynamic?: boolean; dynamic?: boolean;
paginationCallback?: ((direction: SlideDirection) => any) | null; paginationCallback?: ((direction: SlideDirection) => any) | null;
pageCount?: number; pageCount?: number;
leftArrow?: ReactElement | null;
rightArrow?: ReactElement | null;
} }
export interface CarouselState { export interface CarouselState {

Loading…
Cancel
Save