New features - arrow click callback and custom arrow (#41)

* New features - arrow click callback and custom arrow option

* lint

* lint

* prop types

* prop types

* Review comments fixes

* Linting

* remove spacing

* remove spacing

* Change callback name

* Unit test for auto play

Author: Sindhu Balakrishnan

src/carousel.less

@@ -16,19 +16,23 @@
     text-align: left;
   }
 
-  .carousel-arrow {
-    position: absolute;
-    z-index: 1;
-    color: white;
-    border: 3px solid;
+  .carousel-arrow-default {
+    border: 3px solid !important;
     border-radius: 50%;
-    bottom: 23px;
+    color: rgba(255, 255, 255, 0.9);
     height: 32px;
     width: 32px;
     font-weight: 900;
     background: rgba(0, 0, 0, 0.15);
+  }
+
+  .carousel-arrow {
+    position: absolute;
+    z-index: 1;
+    bottom: 23px;
     padding: 0;
     cursor: pointer;
+    border: none;
 
     &:focus {
       outline: none;
@@ -48,17 +52,27 @@
 
   .carousel-left-arrow {
     left: 23px;
-    &:before {
-      content: '<';
-      padding-right: 2px;
-    }
   }
 
   .carousel-right-arrow {
     right: 23px;
-    &:before {
-      content: '>';
-      padding-left: 2px;
+  }
+
+  .carousel-left-arrow {
+    &.carousel-arrow-default {
+      &:before {
+        content: '<';
+        padding-right: 2px;
+      }
+    }
+  }
+
+  .carousel-right-arrow {
+    &.carousel-arrow-default {
+      &:before {
+        content: '>';
+        padding-left: 2px;
+      }
     }
   }
 

src/controls/arrow.js

@@ -13,7 +13,15 @@ export default class Arrow extends Component {
       infinite: PropTypes.bool.isRequired,
       prevSlide: PropTypes.func.isRequired,
       nextSlide: PropTypes.func.isRequired,
-      direction: PropTypes.oneOf(['left', 'right']).isRequired
+      direction: PropTypes.oneOf(['left', 'right']).isRequired,
+      arrows: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+          left: PropTypes.node.isRequired,
+          right: PropTypes.node.isRequired,
+          className: PropTypes.string
+        })
+      ])
     };
   }
 
@@ -27,14 +35,23 @@ export default class Arrow extends Component {
   }
 
   render() {
-    const { prevSlide, nextSlide, direction } = this.props;
+    const { prevSlide, nextSlide, direction, arrows } = this.props;
+    let arrowComponent = null;
+    let buttonClass = 'carousel-arrow-default';
+
+    if (arrows.left) {
+      buttonClass = arrows.className ? arrows.className : '';
+      arrowComponent = direction === 'left' ? arrows.left : arrows.right;
+    }
 
     return (
       <button
+        type='button'
         disabled={ !this.hasNext() }
         onClick={ direction === 'left' ? prevSlide : nextSlide }
-        className={ `carousel-arrow carousel-${direction}-arrow` }
-      />
+        className={ `carousel-arrow carousel-${direction}-arrow ${buttonClass}` }>
+        { arrowComponent }
+      </button>
     );
   }
 }

src/index.js

@@ -25,7 +25,14 @@ export default class Carousel extends Component {
       className: PropTypes.string,
       transition: PropTypes.oneOf(['slide', 'fade']),
       dots: PropTypes.bool,
-      arrows: PropTypes.bool,
+      arrows: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+          left: PropTypes.node.isRequired,
+          right: PropTypes.node.isRequired,
+          className: PropTypes.string
+        })
+      ]),
       infinite: PropTypes.bool,
       children: PropTypes.any,
       viewportWidth: PropTypes.string,
@@ -52,6 +59,7 @@ export default class Carousel extends Component {
       pauseOnHover: PropTypes.bool,
       clickToNavigate: PropTypes.bool,
       dragThreshold: PropTypes.number,
+      onSlideTransitioned: PropTypes.func,
       easing: PropTypes.oneOf([
         'ease',
         'linear',
@@ -270,9 +278,19 @@ export default class Carousel extends Component {
    *
    * @param {Number} index - The slide index to move to.
    * @param {String} direction - The direction to transition, should be 'right' or 'left'.
+   * @param {Boolean} autoSlide - The source of slide transition, should be true for autoPlay and false for user click.
    */
-  goToSlide(index, direction) {
-    const { beforeChange, transitionDuration, transition } = this.props;
+  goToSlide(index, direction, autoSlide = false) {
+    const { beforeChange, transitionDuration, transition, onSlideTransitioned } = this.props;
+
+    if(onSlideTransitioned) {
+        onSlideTransitioned({
+            autoPlay: autoSlide,
+            index,
+            direction
+        });
+    }
+
     const { currentSlide } = this.state;
     if (currentSlide === index) {
       return;
@@ -303,12 +321,13 @@ export default class Carousel extends Component {
 
   /**
    * Transitions to the next slide moving from left to right.
+   * @param {Object} e - The event that calls nextSlide, will be undefined for autoPlay.
    */
-  nextSlide() {
+  nextSlide(e) {
     const { children } = this.props;
     const { currentSlide } = this.state;
     const newIndex = currentSlide < Children.count(children) - 1 ? currentSlide + 1 : 0;
-    this.goToSlide(newIndex, 'right');
+    this.goToSlide(newIndex, 'right', typeof e !== 'object');
   }
 
   /**
@@ -379,7 +398,7 @@ export default class Carousel extends Component {
    */
   render() {
     const { className, viewportWidth, viewportHeight, width, height, dots, infinite,
-      children, slideHeight, transition, style, draggable, easing } = this.props;
+      children, slideHeight, transition, style, draggable, easing, arrows } = this.props;
     const { loading, transitionDuration, dragOffset, currentSlide, leftOffset } = this.state;
     const numSlides = Children.count(children);
     const classes = classnames('carousel', className, {
@@ -456,6 +475,7 @@ export default class Carousel extends Component {
                 nextSlide={ this.nextSlide }
                 prevSlide={ this.prevSlide }
                 goToSlide={ this.goToSlide }
+                arrows={ arrows }
                 infinite={ infinite } />
             ))
           }

test/unit/carousel.tests.js

@@ -1,13 +1,16 @@
 import React, { Fragment } from 'react';
 import { render } from 'react-dom';
-import { expect } from 'chai';
+import chai, { expect } from 'chai';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
 import { Simulate } from 'react-dom/test-utils';
 import Carousel from '../../src/index';
 
 function renderToJsdom(component) {
   return render(component, window.document.querySelector('#root'));
 }
 
+chai.use(sinonChai);
 let imagesFetched;
 
 global.Image = class MyImage {
@@ -57,6 +60,7 @@ describe('Carousel', () => {
       expect(dots.length).to.equal(3);
       expect(dots[0].className).to.contain('selected');
       const nextButton = document.querySelector('.carousel-right-arrow');
+      expect(nextButton.className).to.contain('carousel-arrow-default');
       Simulate.click(nextButton);
       expect(dots[0].className).to.not.contain('selected');
       expect(dots[1].className).to.contain('selected');
@@ -65,8 +69,14 @@ describe('Carousel', () => {
   });
 
   it('should navigate to the previous slide when the button is clicked', done => {
+    const onSlideTransitionedStub = sinon.stub();
+
     renderToJsdom(
-      <Carousel initialSlide={ 1 } slideWidth='300px' viewportWidth='300px' infinite={ false }>
+      <Carousel initialSlide={ 1 }
+        slideWidth='300px'
+        viewportWidth='300px'
+        infinite={ false }
+        onSlideTransitioned={ onSlideTransitionedStub }>
         <div id='slide1'/>
         <div id='slide2'/>
         <div id='slide3'/>
@@ -78,16 +88,28 @@ describe('Carousel', () => {
       expect(dots.length).to.equal(3);
       expect(dots[1].className).to.contain('selected');
       const prevButton = document.querySelector('.carousel-left-arrow');
+      expect(prevButton.className).to.contain('carousel-arrow-default');
       Simulate.click(prevButton);
       expect(dots[1].className).to.not.contain('selected');
       expect(dots[0].className).to.contain('selected');
+      expect(onSlideTransitionedStub).to.have.been.calledWith({
+        autoPlay: false,
+        index: 0,
+        direction: 'left'
+      });
       done();
     });
   });
 
   it('should wrap around from the last to first slide if infinite is true and next is clicked', done => {
+    const onSlideTransitionedStub = sinon.stub();
+
     renderToJsdom(
-      <Carousel initialSlide={ 2 } slideWidth='300px' viewportWidth='300px' infinite={ true }>
+      <Carousel initialSlide={ 2 }
+        slideWidth='300px'
+        viewportWidth='300px'
+        infinite={ true }
+        onSlideTransitioned={ onSlideTransitionedStub }>
         <div id='slide1'/>
         <div id='slide2'/>
         <div id='slide3'/>
@@ -102,6 +124,11 @@ describe('Carousel', () => {
       Simulate.click(nextButton);
       expect(dots[2].className).to.not.contain('selected');
       expect(dots[0].className).to.contain('selected');
+      expect(onSlideTransitionedStub).to.have.been.calledWith({
+        autoPlay: false,
+        index: 0,
+        direction: 'right'
+      });
       done();
     });
   });
@@ -128,8 +155,13 @@ describe('Carousel', () => {
   });
 
   it('should jump directly to a slide when the dot is clicked', done => {
+    const onSlideTransitionedStub = sinon.stub();
+
     renderToJsdom(
-      <Carousel slideWidth='300px' viewportWidth='300px' infinite={ false }>
+      <Carousel slideWidth='300px'
+        viewportWidth='300px'
+        infinite={ false }
+        onSlideTransitioned={ onSlideTransitionedStub }>
         <div id='slide1'/>
         <div id='slide2'/>
         <div id='slide3'/>
@@ -143,6 +175,7 @@ describe('Carousel', () => {
       Simulate.click(dots[2]);
       expect(dots[0].className).to.not.contain('selected');
       expect(dots[2].className).to.contain('selected');
+      expect(onSlideTransitionedStub).to.have.been.calledOnce;
       done();
     });
   });
@@ -451,4 +484,91 @@ describe('Carousel', () => {
       expect(document.getElementById('slide10')).to.exist;
     });
   });
+
+  it('should render custom arrow', done => {
+    const arrows = {
+      className: 'test-custom-arrow',
+      left: <span id='custom-left'>Left</span>,
+      right: <span id='custom-right'>Right</span>
+    };
+
+    renderToJsdom(
+      <Carousel slideWidth='300px'
+        viewportWidth='300px'
+        infinite={ false }
+        arrows={ arrows }>
+        <div id='slide1'/>
+        <div id='slide2'/>
+        <div id='slide3'/>
+      </Carousel>
+    );
+
+    setImmediate(() => {
+      const prevButton = document.querySelector('.carousel-left-arrow');
+      const nextButton = document.querySelector('.carousel-right-arrow');
+      expect(prevButton.className).to.contain('test-custom-arrow');
+      expect(nextButton.className).to.contain('test-custom-arrow');
+      expect(document.getElementById('custom-left')).to.exist;
+      expect(document.getElementById('custom-right')).to.exist;
+      done();
+    });
+  });
+
+  it('should render custom arrow without className', done => {
+    const arrows = {
+      left: <span id='custom-left'>Left</span>,
+      right: <span id='custom-right'>Right</span>
+    };
+
+    renderToJsdom(
+      <Carousel slideWidth='300px'
+        viewportWidth='300px'
+        infinite={ false }
+        arrows={ arrows }>
+        <div id='slide1'/>
+        <div id='slide2'/>
+        <div id='slide3'/>
+      </Carousel>
+    );
+
+    setImmediate(() => {
+      const prevButton = document.querySelector('.carousel-left-arrow');
+      const nextButton = document.querySelector('.carousel-right-arrow');
+      expect(prevButton.className).to.not.contain('carousel-arrow-default');
+      expect(nextButton.className).to.not.contain('carousel-arrow-default');
+      expect(document.getElementById('custom-left')).to.exist;
+      expect(document.getElementById('custom-right')).to.exist;
+      done();
+    });
+  });
+
+  it('should call onSlideTransitioned with autoPlay true', done => {
+    const onSlideTransitionedStub = sinon.stub();
+    const carousel = renderToJsdom(
+      <Carousel slideWidth='300px'
+        viewportWidth='300px'
+        infinite={ false }
+        autoplay={ true }
+        pauseOnHover={ true }
+        onSlideTransitioned={ onSlideTransitionedStub }>
+        <div id='slide1' />
+        <div id='slide2' />
+        <div id='slide3' />
+      </Carousel>
+    );
+
+    setImmediate(() => {
+      const track = document.querySelector('.carousel-viewport');
+      const setHoverState = (bool) => {
+        expect(bool).to.be.true;
+        done();
+      };
+      carousel.setHoverState = setHoverState;
+      carousel.handleMovement(track);
+      expect(onSlideTransitionedStub).to.have.been.calledWith({
+        autoPlay: true,
+        direction: 'right'
+      });
+    });
+  });
 });