From 7211dcb53e21f41d7dc5ef0a4c0a7708fd100298 Mon Sep 17 00:00:00 2001
From: Craig Anthony <mcraiganthony@gmail.com>
Date: Fri, 5 Jun 2015 15:08:11 -0400
Subject: [PATCH] [added] Add prevIcon and nextIcon props as node proptypes to
 Carousel

---
 src/Carousel.js      | 13 +++++++++----
 test/CarouselSpec.js | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/Carousel.js b/src/Carousel.js
index df3b9bf486..12f682c906 100644
--- 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,7 +163,7 @@ 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>
     );
   },
@@ -166,7 +171,7 @@ const Carousel = React.createClass({
   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
index b21af0bb35..3fdc82cd8c 100644
--- 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);
+  });
 });