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(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 {
onClick: (...args: any) => any;
onClick?: (...args: any) => any;
direction: string;
}

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

@ -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 {

Loading…
Cancel
Save