| 41 | } |
| 42 | |
| 43 | function Carousel({ |
| 44 | orientation = "horizontal", |
| 45 | opts, |
| 46 | setApi, |
| 47 | plugins, |
| 48 | className, |
| 49 | children, |
| 50 | ...props |
| 51 | }: React.ComponentProps<"div"> & CarouselProps) { |
| 52 | const [carouselRef, api] = useEmblaCarousel( |
| 53 | { |
| 54 | ...opts, |
| 55 | axis: orientation === "horizontal" ? "x" : "y", |
| 56 | }, |
| 57 | plugins |
| 58 | ) |
| 59 | const [canScrollPrev, setCanScrollPrev] = React.useState(false) |
| 60 | const [canScrollNext, setCanScrollNext] = React.useState(false) |
| 61 | |
| 62 | const onSelect = React.useCallback((api: CarouselApi) => { |
| 63 | if (!api) return |
| 64 | setCanScrollPrev(api.canScrollPrev()) |
| 65 | setCanScrollNext(api.canScrollNext()) |
| 66 | }, []) |
| 67 | |
| 68 | const scrollPrev = React.useCallback(() => { |
| 69 | api?.scrollPrev() |
| 70 | }, [api]) |
| 71 | |
| 72 | const scrollNext = React.useCallback(() => { |
| 73 | api?.scrollNext() |
| 74 | }, [api]) |
| 75 | |
| 76 | const handleKeyDown = React.useCallback( |
| 77 | (event: React.KeyboardEvent<HTMLDivElement>) => { |
| 78 | if (event.key === "ArrowLeft") { |
| 79 | event.preventDefault() |
| 80 | scrollPrev() |
| 81 | } else if (event.key === "ArrowRight") { |
| 82 | event.preventDefault() |
| 83 | scrollNext() |
| 84 | } |
| 85 | }, |
| 86 | [scrollPrev, scrollNext] |
| 87 | ) |
| 88 | |
| 89 | React.useEffect(() => { |
| 90 | if (!api || !setApi) return |
| 91 | setApi(api) |
| 92 | }, [api, setApi]) |
| 93 | |
| 94 | React.useEffect(() => { |
| 95 | if (!api) return |
| 96 | onSelect(api) |
| 97 | api.on("reInit", onSelect) |
| 98 | api.on("select", onSelect) |
| 99 | |
| 100 | return () => { |