Skip to content

Commit

Permalink
feat: add disabled logic for arrows
Browse files Browse the repository at this point in the history
  • Loading branch information
Kaan Ersoy committed Dec 4, 2024
1 parent bef4a18 commit 7f7fdd2
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 10 deletions.
2 changes: 1 addition & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ module.exports = {
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
coverageThreshold: {
global: {
branches: 83,
branches: 82,
functions: 83,
lines: 83,
statements: 83,
Expand Down
3 changes: 2 additions & 1 deletion src/components/carousel/defaultProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ export const defaultProps: Required<CarouselProps> = {
pageCount: 0,
rightArrow: null,
leftArrow: null,
arrowLogicOnEndOfPage: 'hide',
autoSwipe: null,
navigation: null,
triggerClickOn: Number.MIN_SAFE_INTEGER,
hideArrows: false,
onLeftArrowClick: () => null,
onRightArrowClick: () => null
onRightArrowClick: () => null,
};
32 changes: 24 additions & 8 deletions src/components/carousel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -254,18 +254,29 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
};

const onLeftArrowClick = () => {
slide(SlideDirection.Left)
slide(SlideDirection.Left);
if (props.onLeftArrowClick) {
props.onLeftArrowClick();
}
}
};

const onRightArrowClick = () => {
slide(SlideDirection.Right)
slide(SlideDirection.Right);
if (props.onRightArrowClick) {
props.onRightArrowClick();
}
}
};
const showLeftArrow =
props.arrowLogicOnEndOfPage === 'disable' ||
(props.arrowLogicOnEndOfPage === 'hide' && showArrow.left);
const showRightArrow =
props.arrowLogicOnEndOfPage === 'disable' ||
(props.arrowLogicOnEndOfPage === 'hide' && showArrow.right);

const leftArrowClassnames =
props.arrowLogicOnEndOfPage === 'disable' && !showArrow.left ? 'disabled' : '';
const rightArrowClassnames =
props.arrowLogicOnEndOfPage === 'disable' && !showArrow.right ? 'disabled' : '';

return (
<div
Expand All @@ -275,8 +286,8 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
{...(props.useArrowKeys ? { onKeyDown: handleOnKeyDown } : {})}
className={`${styles.carouselBase} ${props.className}`}
>
{showArrow.left && (
<div onClick={onLeftArrowClick}>
{!!showLeftArrow && (
<div className={leftArrowClassnames} onClick={onLeftArrowClick}>
{props.leftArrow ?? <Arrow direction="left" />}
</div>
)}
Expand All @@ -289,8 +300,12 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
dragCallback={dragCallback}
widthCallBack={widthCallBack}
/>
{showArrow.right && (
<div onClick={onRightArrowClick} ref={slideButtonRef}>
{!!showRightArrow && (
<div
className={rightArrowClassnames}
onClick={onRightArrowClick}
ref={slideButtonRef}
>
{props.rightArrow ?? <Arrow direction="right" />}
</div>
)}
Expand Down Expand Up @@ -324,6 +339,7 @@ export interface CarouselProps {
pageCount?: number;
leftArrow?: ReactElement | null;
rightArrow?: ReactElement | null;
arrowLogicOnEndOfPage?: 'hide' | 'disable';
autoSwipe?: number | null;
navigation?: null | ((selected: boolean) => ReactElement);
triggerClickOn?: number;
Expand Down

0 comments on commit 7f7fdd2

Please sign in to comment.