Skip to content
This repository has been archived by the owner on May 2, 2019. It is now read-only.

Commit

Permalink
fix(arrows): Arrows are not disabled in infinite mode
Browse files Browse the repository at this point in the history
- Remove unnecessary isRequired checks in propTypes for arrows
- Fixed bug where right arrow doesn't get disabled when it
  reaches the end
  • Loading branch information
vramana committed Sep 18, 2015
1 parent 069be1e commit 85e3f6a
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 21 deletions.
36 changes: 17 additions & 19 deletions src/Arrows.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
9 changes: 7 additions & 2 deletions src/Slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit 85e3f6a

Please sign in to comment.