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