fix(arrows): Arrows are not disabled in infinite mode

- Remove unnecessary isRequired checks in propTypes for arrows
- Fixed bug where right arrow doesn't get disabled when it
  reaches the end

Author: vramana

src/Arrows.js

@@ -2,24 +2,22 @@ import React, { Component, PropTypes } from 'react';
 
 class LeftArrow extends Component {
   static propTypes = {
-    handleClick: PropTypes.func.isRequired,
-    currentSlide: PropTypes.number.isRequired,
-    activeClassName: PropTypes.string.isRequired,
-    inactiveClassName: PropTypes.string.isRequired
+    handleClick: PropTypes.func,
+    currentSlide: PropTypes.number,
+    activeClassName: PropTypes.string,
+    inactiveClassName: PropTypes.string,
+    infinite: PropTypes.bool
   }
 
-  // HACK for propsTypes handleClick, currentSlide
   static defaultProps = {
-    handleClick: () => {},
     activeClassName: '',
-    inactiveClassName: '',
-    currentSlide: 0
+    inactiveClassName: ''
   }
 
   render() {
-    const { activeClassName, inactiveClassName, currentSlide } = this.props;
+    const { activeClassName, inactiveClassName, currentSlide, infinite } = this.props;
 
-    const className = currentSlide === 0 ? inactiveClassName : activeClassName;
+    const className = currentSlide === 0 && infinite === false ? inactiveClassName : activeClassName;
     const style = className !== '' ? null : {
       width: 0,
       height: 0,
@@ -37,24 +35,24 @@ class LeftArrow extends Component {
 
 class RightArrow extends Component {
   static propTypes = {
-    handleClick: PropTypes.func.isRequired,
-    currentSlide: PropTypes.number.isRequired,
-    activeClassName: PropTypes.string.isRequired,
-    inactiveClassName: PropTypes.string.isRequired
+    handleClick: PropTypes.func,
+    currentSlide: PropTypes.number,
+    activeClassName: PropTypes.string,
+    inactiveClassName: PropTypes.string,
+    infinite: PropTypes.bool,
+    slideCount: PropTypes.number
   }
 
-  // HACK for propsTypes handleClick, currentSlide
   static defaultProps = {
-    handleClick: () => {},
     activeClassName: '',
-    inactiveClassName: '',
-    currentSlide: 0
+    inactiveClassName: ''
   }
 
   render() {
     const { activeClassName, inactiveClassName, currentSlide } = this.props;
+    const { infinite, slideCount } = this.props;
 
-    const className = currentSlide === 0 ? inactiveClassName : activeClassName;
+    const className = (currentSlide + 1) === slideCount && infinite === false ? inactiveClassName : activeClassName;
     const style = className !== '' ? null : {
       width: 0,
       height: 0,

src/Slider.js

@@ -97,17 +97,22 @@ class Slider extends Component {
     const { children, transitionSpeed, transitionTimingFn, vertical, infinite } = this.props;
     const [ leftArrow, slides, rightArrow ] = children;
     const { currentSlide } = this.state;
+    const slideCount = Children.count(slides.props.children);
 
     const newLeftArrow = cloneElement(leftArrow, {
       key: 0,
       handleClick: () => { this.handleSlideShift(-1); },
-      currentSlide
+      currentSlide,
+      infinite
     });
 
+    // Need to pass slideCount to check if end of slide has been reached.
     const newRightArrow = cloneElement(rightArrow, {
       key: 2,
       handleClick: () => { this.handleSlideShift(1); },
-      currentSlide
+      currentSlide,
+      infinite,
+      slideCount
     });
 
     // TODO Show a warning if transitionSpeed prop is declared on Slides.