feat: added 'as' prop to Carousel (fix: #3509) (#3514)

#3509
react-bootstrap · Mar 7, 2019 · a25d03c · a25d03c
1 parent 9b8627f
commit a25d03c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -134,7 +134,7 @@
     "invariant": "^2.2.3",
     "keycode": "^2.1.2",
     "popper.js": "^1.14.6",
-    "prop-types": "^15.6.2",
+    "prop-types": "^15.7.2",
     "prop-types-extra": "^1.1.0",
     "react-context-toolbox": "^2.0.2",
     "react-overlays": "^1.0.0",

diff --git a/src/Carousel.js b/src/Carousel.js
@@ -22,6 +22,7 @@ const propTypes = {
    * @default 'carousel'
    */
   bsPrefix: PropTypes.string,
+  as: PropTypes.elementType,
 
   /**
    * Enables animation on the Carousel as it transitions between slides.
@@ -101,6 +102,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  as: 'div',
   slide: true,
   fade: false,
   interval: 5000,
@@ -421,6 +423,7 @@ class Carousel extends React.Component {
 
   render() {
     const {
+      as: Component,
       bsPrefix,
       slide,
       fade,
@@ -451,7 +454,7 @@ class Carousel extends React.Component {
 
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      <div
+      <Component
         {...props}
         className={classNames(
           className,
@@ -491,7 +494,7 @@ class Carousel extends React.Component {
             nextIcon,
             nextLabel,
           })}
-      </div>
+      </Component>
     );
   }
 }

diff --git a/types/components/Carousel.d.ts b/types/components/Carousel.d.ts
@@ -3,7 +3,7 @@ import * as React from 'react';
 import CarouselItem from './CarouselItem';
 import CarouselCaption from './CarouselCaption';
 
-import { ReplaceProps, SelectCallback } from './helpers';
+import { ReplaceProps, SelectCallback, BsPrefixComponent } from './helpers';
 
 export interface CarouselProps {
   bsPrefix?: string;
@@ -24,9 +24,9 @@ export interface CarouselProps {
   nextLabel?: string;
 }
 
-declare class Carousel extends React.Component<
-  ReplaceProps<'div', CarouselProps>
-> {
+declare class Carousel<
+  As extends React.ReactType = 'div'
+> extends BsPrefixComponent<As, CarouselProps> {
   static Item: typeof CarouselItem;
   static Caption: typeof CarouselCaption;
 }

diff --git a/yarn.lock b/yarn.lock
@@ -9514,6 +9514,15 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.5.9,
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
@@ -9830,6 +9839,11 @@ react-is@^16.6.1, react-is@^16.6.3:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
   integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==
 
+react-is@^16.8.1:
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.3.tgz#4ad8b029c2a718fc0cfc746c8d4e1b7221e5387d"
+  integrity sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==
+
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"