|
|
@ -3,7 +3,7 @@ import React, { |
|
|
|
MouseEvent, |
|
|
|
MouseEvent, |
|
|
|
useState, |
|
|
|
useState, |
|
|
|
useRef, |
|
|
|
useRef, |
|
|
|
useCallback, |
|
|
|
useCallback, ReactElement, |
|
|
|
} from 'react'; |
|
|
|
} from 'react'; |
|
|
|
import { Item, SlideDirection } from '../../types/carousel'; |
|
|
|
import { Item, SlideDirection } from '../../types/carousel'; |
|
|
|
import styles from '../../styles/slider/styles.module.css'; |
|
|
|
import styles from '../../styles/slider/styles.module.css'; |
|
|
@ -12,6 +12,8 @@ import { getOuterWidth } from '../../helpers'; |
|
|
|
export const ScrollingCarousel: FunctionComponent<SliderProps> = ({ |
|
|
|
export const ScrollingCarousel: FunctionComponent<SliderProps> = ({ |
|
|
|
children, |
|
|
|
children, |
|
|
|
className, |
|
|
|
className, |
|
|
|
|
|
|
|
leftIcon, |
|
|
|
|
|
|
|
rightIcon |
|
|
|
}: SliderProps) => { |
|
|
|
}: SliderProps) => { |
|
|
|
const slider = useRef<HTMLDivElement>(null); |
|
|
|
const slider = useRef<HTMLDivElement>(null); |
|
|
|
const [isDown, setIsDown] = useState(false); |
|
|
|
const [isDown, setIsDown] = useState(false); |
|
|
@ -119,17 +121,21 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({ |
|
|
|
slider.current!.scrollLeft = amount; |
|
|
|
slider.current!.scrollLeft = amount; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getArrow = (direction: SlideDirection, data: string, element?: ReactElement) => { |
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<div data-arrow={data} onClick={() => slide(direction)}> |
|
|
|
|
|
|
|
{element ?? <button />} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className={`${styles.sliderBase} ${className}`}> |
|
|
|
<div className={`${styles.sliderBase} ${className}`}> |
|
|
|
{showArrow.left && ( |
|
|
|
{showArrow.left && ( |
|
|
|
<div data-arrow="left"> |
|
|
|
getArrow(SlideDirection.Right, "left", leftIcon) |
|
|
|
<button onClick={() => slide(SlideDirection.Right)} /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
)} |
|
|
|
{showArrow.right && ( |
|
|
|
{showArrow.right && ( |
|
|
|
<div data-arrow="right"> |
|
|
|
getArrow(SlideDirection.Left, "right", rightIcon) |
|
|
|
<button onClick={() => slide(SlideDirection.Left)} /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
)} |
|
|
|
<div |
|
|
|
<div |
|
|
|
ref={ref} |
|
|
|
ref={ref} |
|
|
@ -148,6 +154,8 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({ |
|
|
|
export interface SliderProps { |
|
|
|
export interface SliderProps { |
|
|
|
children: Item[]; |
|
|
|
children: Item[]; |
|
|
|
className?: string; |
|
|
|
className?: string; |
|
|
|
|
|
|
|
leftIcon?: ReactElement; |
|
|
|
|
|
|
|
rightIcon?: ReactElement; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export type Arrows = { |
|
|
|
export type Arrows = { |
|
|
|