Merge pull request #31824 from DoozyX/reactstrap/add-UncontrolledCarousel

[reactstrap] Add UncontrolledCarousel

types/reactstrap/index.d.ts

@@ -241,17 +241,20 @@ import {
   UncontrolledButtonDropdown as UncontrolledButtonDropdown_,
   UncontrolledDropdown as UncontrolledDropdown_,
   UncontrolledTooltip as UncontrolledTooltip_,
-  UncontrolledCollapse as UncontrolledCollapse_
+  UncontrolledCollapse as UncontrolledCollapse_,
+  UncontrolledCarousel as UncontrolledCarousel_
 } from './lib/Uncontrolled';
 export class UncontrolledAlert<T = {}> extends UncontrolledAlert_<T> {}
 export class UncontrolledButtonDropdown<T = {}> extends UncontrolledButtonDropdown_<T> {}
 export class UncontrolledDropdown<T = {}> extends UncontrolledDropdown_<T> {}
 export class UncontrolledTooltip<T = {}> extends UncontrolledTooltip_<T> {}
 export class UncontrolledCollapse<T = {}> extends UncontrolledCollapse_<T> {}
+export class UncontrolledCarousel<T = {}> extends UncontrolledCarousel_<T> {}
 export {
   UncontrolledButtonDropdownProps,
   UncontrolledAlertProps,
   UncontrolledDropdownProps,
   UncontrolledTooltipProps,
-  UncontrolledCollapseProps
+  UncontrolledCollapseProps,
+  UncontrolledCarouselProps
 } from './lib/Uncontrolled';

types/reactstrap/lib/Carousel.d.ts

@@ -15,5 +15,25 @@ export type CarouselProps<T = {}> = React.HTMLProps<HTMLElement> & {
     cssModule?: CSSModule
 } & T;
 
+export type UncontrolledProps<T = {}> = React.HTMLProps<HTMLElement> & {
+    items: any[];
+    activeIndex?: number;
+    next?: () => void;
+    previous?: () => void;
+    keyboard?: boolean;
+    pause?: "hover" | false;
+    ride?: "carousel";
+    interval?: number | string | boolean;
+    mouseEnter?: () => void;
+    mouseExit?: () => void;
+    slide?: boolean;
+    cssModule?: CSSModule;
+    controls?: boolean;
+    indicators?: boolean;
+    autoPlay?: boolean;
+} & T;
+
+export type UncontrolledCarouselProps<T = {}> = UncontrolledProps<T>;
+
 declare class Carousel<T = {[key: string]: any}> extends React.Component<CarouselProps<T>> {}
 export default Carousel;

types/reactstrap/lib/Uncontrolled.d.ts

@@ -5,15 +5,18 @@ import { UncontrolledButtonDropdownProps } from './ButtonDropdown';
 import { UncontrolledDropdownProps       } from './Dropdown';
 import { UncontrolledTooltipProps        } from './Tooltip';
 import { UncontrolledCollapseProps       } from './Collapse';
+import { UncontrolledCarouselProps       } from "./Carousel";
 
 export class UncontrolledAlert<T = {}> extends React.Component<UncontrolledAlertProps<T>> {}
 export class UncontrolledButtonDropdown<T = {}> extends React.Component<UncontrolledButtonDropdownProps<T>> {}
 export class UncontrolledDropdown<T = {}> extends React.Component<UncontrolledDropdownProps<T>> {}
 export class UncontrolledTooltip<T = {}> extends React.Component<UncontrolledTooltipProps<T>> {}
 export class UncontrolledCollapse<T = {}> extends React.Component<UncontrolledCollapseProps<T>> {}
+export class UncontrolledCarousel<T = {}> extends React.Component<UncontrolledCarouselProps<T>> {}
 
 export { UncontrolledAlertProps          } from './Alert';
 export { UncontrolledButtonDropdownProps } from './ButtonDropdown';
 export { UncontrolledDropdownProps       } from './Dropdown';
 export { UncontrolledTooltipProps        } from './Tooltip';
 export { UncontrolledCollapseProps       } from './Collapse';
+export { UncontrolledCarouselProps       } from "./Carousel";

types/reactstrap/reactstrap-tests.tsx

@@ -75,6 +75,7 @@ import {
   UncontrolledDropdown,
   UncontrolledTooltip,
   UncontrolledCollapse,
+  UncontrolledCarousel,
   TabContent,
   Table,
   Tag,
@@ -4297,3 +4298,28 @@ function Example123() {
     </div>
   );
 }
+
+function Example124()  {
+  // https://reactstrap.github.io/components/carousel/
+  const items = [
+    {
+      src: 'data:image/svg+xml...',
+      altText: 'Slide 1',
+      caption: 'Slide 1'
+    },
+    {
+      src: 'data:image/svg+xml...',
+      altText: 'Slide 2',
+      caption: 'Slide 2'
+    },
+    {
+      src: 'data:image/svg+xml...',
+      altText: 'Slide 3',
+      caption: 'Slide 3'
+    }
+  ];
+
+  return (
+    <UncontrolledCarousel items={items} />
+  );
+}