From f5f6e32343d931a37b2c4218e1f913599011d1cd Mon Sep 17 00:00:00 2001
From: Ben Hacker <56195110+Sigabiel@users.noreply.github.com>
Date: Sat, 18 Nov 2023 16:35:13 +0100
Subject: [PATCH] Added draggable option to carousel component (#1121)

* added draggable option to carousel component

* prettier formatting

* fixed mouse cursor when draggable flag is off

* add draggable to theme and remove redundant change
---
 src/components/Carousel/Carousel.tsx | 9 ++++++---
 src/components/Carousel/theme.ts     | 5 ++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
index 11204aa65..d1ff6f57d 100644
--- a/src/components/Carousel/Carousel.tsx
+++ b/src/components/Carousel/Carousel.tsx
@@ -33,7 +33,7 @@ export interface FlowbiteCarouselIndicatorsTheme {
 
 export interface FlowbiteCarouselItemTheme {
   base: string;
-  wrapper: string;
+  wrapper: FlowbiteBoolean;
 }
 
 export interface FlowbiteCarouselControlTheme {
@@ -50,6 +50,7 @@ export interface CarouselProps extends ComponentProps<'div'> {
   indicators?: boolean;
   leftControl?: ReactNode;
   rightControl?: ReactNode;
+  draggable?: boolean;
   slide?: boolean;
   slideInterval?: number;
   theme?: DeepPartial<FlowbiteCarouselTheme>;
@@ -67,6 +68,7 @@ export const Carousel: FC<CarouselProps> = ({
   leftControl,
   rightControl,
   slide = true,
+  draggable = true,
   slideInterval,
   className,
   theme: customTheme = {},
@@ -148,13 +150,14 @@ export const Carousel: FC<CarouselProps> = ({
         draggingClassName="cursor-grab"
         innerRef={carouselContainer}
         onEndScroll={handleDragging(false)}
-        onStartScroll={handleDragging(true)}
+        onStartScroll={handleDragging(draggable)}
         vertical={false}
+        horizontal={draggable}
       >
         {items?.map((item, index) => (
           <div
             key={index}
-            className={theme.item.wrapper}
+            className={theme.item.wrapper[draggable ? 'on' : 'off']}
             data-active={activeItem === index}
             data-testid="carousel-item"
           >
diff --git a/src/components/Carousel/theme.ts b/src/components/Carousel/theme.ts
index 1f19cd1d7..2706ce1dc 100644
--- a/src/components/Carousel/theme.ts
+++ b/src/components/Carousel/theme.ts
@@ -16,7 +16,10 @@ export const carouselTheme: FlowbiteCarouselTheme = {
   },
   item: {
     base: 'absolute top-1/2 left-1/2 block w-full -translate-x-1/2 -translate-y-1/2',
-    wrapper: 'w-full flex-shrink-0 transform cursor-grab snap-center',
+    wrapper: {
+      off: 'w-full flex-shrink-0 transform cursor-default snap-center',
+      on: 'w-full flex-shrink-0 transform cursor-grab snap-center',
+    },
   },
   control: {
     base: 'inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10',