Merge pull request #35 from yavuzkoca/custom-arrows

add custom arrows when its given from the props
master
Mehmet Sefa 3 years ago committed by GitHub
commit 2b81716f79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 14
      __tests__/carousel.spec.tsx
  2. 2
      package.json
  3. 2
      src/components/arrow/index.tsx
  4. 2
      src/components/carousel/defaultProps.ts
  5. 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();
});
});

@ -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",

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