feat(Carousel): add className to carousel components (#682)

mkalish · TheSharpieOne · commit d23b28acfb51 · 2017-11-14T14:55:49.000-05:00
Closes #669
diff --git a/docs/lib/Components/CarouselPage.js b/docs/lib/Components/CarouselPage.js
@@ -6,6 +6,8 @@ import CarouselExample from '../examples/Carousel';
 const CarouselExampleSource = require('!!raw!../examples/Carousel');
 import CarouselUncontrolledExample from '../examples/CarouselUncontrolled';
 const CarouselUncontrolledExampleSource = require('!!raw!../examples/CarouselUncontrolled');
+import CarouselCustomTagExample from '../examples/CarouselCustomTag';
+const CarouselCustomTagExampleSource = require('!!raw!../examples/CarouselCustomTag');
 
 export default class CarouselPage extends React.Component {
   render() {
@@ -140,6 +142,16 @@ export default class CarouselPage extends React.Component {
 };`}
           </PrismCode>
         </pre>
+
+        <h3>Carousel using a tag and classname</h3>
+        <div className="docs-example">
+          <CarouselCustomTagExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {CarouselCustomTagExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }
diff --git a/docs/lib/examples/Carousel.js b/docs/lib/examples/Carousel.js
@@ -93,4 +93,5 @@ class Example extends Component {
   }
 }
 
+
 export default Example;
diff --git a/docs/lib/examples/CarouselCustomTag.js b/docs/lib/examples/CarouselCustomTag.js
@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import {
+  Carousel,
+  CarouselItem,
+  CarouselControl,
+  CarouselIndicators,
+  CarouselCaption
+} from 'reactstrap';
+
+const items = [
+    {
+        altText: 'Slide 1',
+        caption: 'Slide 1'
+    },
+    {
+        altText: 'Slide 2',
+        caption: 'Slide 2'
+    },
+    {
+        altText: 'Slide 3',
+        caption: 'Slide 3'
+    }
+];
+
+class Example extends Component {
+    constructor(props) {
+      super(props);
+      this.state = { activeIndex: 0 };
+      this.next = this.next.bind(this);
+      this.previous = this.previous.bind(this);
+      this.goToIndex = this.goToIndex.bind(this);
+      this.onExiting = this.onExiting.bind(this);
+      this.onExited = this.onExited.bind(this);
+    }
+  
+    onExiting() {
+      this.animating = true;
+    }
+  
+    onExited() {
+      this.animating = false;
+    }
+  
+    next() {
+      if (this.animating) return;
+      const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
+      this.setState({ activeIndex: nextIndex });
+    }
+  
+    previous() {
+      if (this.animating) return;
+      const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
+      this.setState({ activeIndex: nextIndex });
+    }
+  
+    goToIndex(newIndex) {
+      if (this.animating) return;
+      this.setState({ activeIndex: newIndex });
+    }
+  
+    render() {
+      const { activeIndex } = this.state;
+  
+      const slides = items.map((item) => {
+        return (
+          <CarouselItem
+            className="custom-tag"
+            tag="div"
+            onExiting={this.onExiting}
+            onExited={this.onExited}
+          >
+            <CarouselCaption className="text-danger" captionText={item.caption} captionHeader={item.caption} />
+          </CarouselItem>
+        );
+      });
+  
+      return (
+        <div>
+          <style>{`
+            .custom-tag { 
+                max-width: 100%;
+                height: 500px;
+                background: black;
+            }
+          `}</style>
+          <Carousel
+            activeIndex={activeIndex}
+            next={this.next}
+            previous={this.previous}
+          >
+            <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
+            {slides}
+            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
+            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
+          </Carousel>
+        </div>
+      );
+    }
+  }
+  
+  export default Example;
diff --git a/src/Carousel.js b/src/Carousel.js
@@ -105,10 +105,11 @@ class Carousel extends React.Component {
   }
 
   render() {
-    const { children, cssModule, slide } = this.props;
+    const { children, cssModule, slide, className } = this.props;
     const outerClasses = mapToCssModules(classNames(
+      className,
       'carousel',
-      slide && 'slide',
+      slide && 'slide'
     ), cssModule);
 
     const innerClasses = mapToCssModules(classNames(
@@ -190,6 +191,7 @@ Carousel.propTypes = {
   // controls whether the slide animation on the Carousel works or not
   slide: PropTypes.bool,
   cssModule: PropTypes.object,
+  className: PropTypes.string,
 };
 
 Carousel.defaultProps = {
diff --git a/src/CarouselCaption.js b/src/CarouselCaption.js
@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const CarouselCaption = (props) => {
-  const { captionHeader, captionText, cssModule } = props;
+  const { captionHeader, captionText, cssModule, className } = props;
   const classes = mapToCssModules(classNames(
+    className,
     'carousel-caption',
     'd-none',
     'd-md-block'
@@ -22,7 +23,8 @@ const CarouselCaption = (props) => {
 CarouselCaption.propTypes = {
   captionHeader: PropTypes.string,
   captionText: PropTypes.string.isRequired,
-  cssModule: PropTypes.object
+  cssModule: PropTypes.object,
+  className: PropTypes.string,
 };
 
 export default CarouselCaption;
diff --git a/src/CarouselControl.js b/src/CarouselControl.js
@@ -4,9 +4,10 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const CarouselControl = (props) => {
-  const { direction, onClickHandler, cssModule, directionText } = props;
+  const { direction, onClickHandler, cssModule, directionText, className } = props;
 
   const anchorClasses = mapToCssModules(classNames(
+    className,
     `carousel-control-${direction}`
   ), cssModule);
 
@@ -39,7 +40,8 @@ CarouselControl.propTypes = {
   direction: PropTypes.oneOf(['prev', 'next']).isRequired,
   onClickHandler: PropTypes.func.isRequired,
   cssModule: PropTypes.object,
-  directionText: PropTypes.string
+  directionText: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default CarouselControl;
diff --git a/src/CarouselIndicators.js b/src/CarouselIndicators.js
@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const CarouselIndicators = (props) => {
-  const { items, activeIndex, cssModule, onClickHandler } = props;
+  const { items, activeIndex, cssModule, onClickHandler, className } = props;
 
-  const listClasses = mapToCssModules('carousel-indicators', cssModule);
+  const listClasses = mapToCssModules(classNames(className, 'carousel-indicators', cssModule));
   const indicators = items.map((item, idx) => {
     const indicatorClasses = mapToCssModules(classNames(
       { active: activeIndex === idx }
@@ -33,7 +33,8 @@ CarouselIndicators.propTypes = {
   items: PropTypes.array.isRequired,
   activeIndex: PropTypes.number.isRequired,
   cssModule: PropTypes.object,
-  onClickHandler: PropTypes.func.isRequired
+  onClickHandler: PropTypes.func.isRequired,
+  className: PropTypes.string,
 };
 
 export default CarouselIndicators;
diff --git a/src/CarouselItem.js b/src/CarouselItem.js
@@ -50,10 +50,11 @@ class CarouselItem extends React.Component {
   }
 
   render() {
-    const { src, altText, in: isIn, children, cssModule, slide, tag: Tag, ...transitionProps } = this.props;
+    const { src, altText, in: isIn, children, cssModule, slide, tag: Tag, className, ...transitionProps } = this.props;
     const imgClasses = mapToCssModules(classNames(
+      className,
       'd-block',
-      'img-fluid'
+      'img-fluid',
     ), cssModule);
 
     return (
@@ -106,6 +107,7 @@ CarouselItem.propTypes = {
     type: PropTypes.oneOf([CarouselCaption]),
   }),
   slide: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 CarouselItem.defaultProps = {

Original file line number	Diff line number	Diff line change
`@@ -93,4 +93,5 @@ class Example extends Component {`
`93`	`93`	`}`
`94`	`94`	`}`
`95`	`95`
	`96`	`+`
`96`	`97`	`export default Example;`