[added] Add prevIcon and nextIcon props as node proptypes to Carousel

kyletsang · Jun 8, 2015 · 7211dcb · 7211dcb
1 parent d9b08d3
commit 7211dcb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/Carousel.js b/src/Carousel.js
@@ -2,6 +2,7 @@ import React, { cloneElement } from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import ValidComponentChildren from './utils/ValidComponentChildren';
+import Glyphicon from './Glyphicon';
 
 const Carousel = React.createClass({
   mixins: [BootstrapMixin],
@@ -17,7 +18,9 @@ const Carousel = React.createClass({
     onSlideEnd: React.PropTypes.func,
     activeIndex: React.PropTypes.number,
     defaultActiveIndex: React.PropTypes.number,
-    direction: React.PropTypes.oneOf(['prev', 'next'])
+    direction: React.PropTypes.oneOf(['prev', 'next']),
+    prevIcon: React.PropTypes.node.isRequired,
+    nextIcon: React.PropTypes.node.isRequired
   },
 
   getDefaultProps() {
@@ -27,7 +30,9 @@ const Carousel = React.createClass({
       pauseOnHover: true,
       wrap: true,
       indicators: true,
-      controls: true
+      controls: true,
+      prevIcon: <Glyphicon glyph="chevron-left" />,
+      nextIcon: <Glyphicon glyph="chevron-right" />
     };
   },
 
@@ -158,15 +163,15 @@ const Carousel = React.createClass({
   renderPrev() {
     return (
       <a className="left carousel-control" href="#prev" key={0} onClick={this.prev}>
-        <span className="glyphicon glyphicon-chevron-left" />
+        {this.props.prevIcon}
       </a>
     );
   },
 
   renderNext() {
     return (
       <a className="right carousel-control" href="#next" key={1} onClick={this.next}>
-        <span className="glyphicon glyphicon-chevron-right"/>
+        {this.props.nextIcon}
       </a>
     );
   },

diff --git a/test/CarouselSpec.js b/test/CarouselSpec.js
@@ -112,4 +112,22 @@ describe('Carousel', function () {
     assert.equal(backButtons.length, 0);
     assert.equal(nextButtons.length, 1);
   });
+
+  it('Should allow user to specify a previous and next icon', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Carousel activeIndex={1} controls={true} wrap={false}
+        prevIcon={<span className='ficon ficon-left'/>}
+        nextIcon={<span className='ficon ficon-right'/>}>
+        <CarouselItem ref="item1">Item 1 content</CarouselItem>
+        <CarouselItem ref="item2">Item 2 content</CarouselItem>
+        <CarouselItem ref="item3">Item 3 content</CarouselItem>
+      </Carousel>
+    );
+
+    let backButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'ficon-left');
+    let nextButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'ficon-right');
+
+    assert.equal(backButtons.length, 1);
+    assert.equal(nextButtons.length, 1);
+  });
 });