fix: Dots component does not account for large values in case of infi…

…nite carousel
brainhubeu · May 7, 2018 · ae2ece4 · ae2ece4
1 parent 759c96a
commit ae2ece4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/example/pages/DotsPage.js b/example/pages/DotsPage.js
@@ -37,6 +37,7 @@ render() {
       <Carousel
         value={this.state.value}
         onChange={this.onChange}
+        infinite
       >
         <img className="img-example" src={someImage} />
         ...
@@ -83,6 +84,7 @@ export default class ControlledPage extends Component {
           <Carousel
             value={this.state.value}
             onChange={this.onChange}
+            infinite
           >
             <img className="img-example" src={abstractImage} />
             <img className="img-example" src={animalsImage} />

diff --git a/src/components/CarouselDots.js b/src/components/CarouselDots.js
@@ -11,7 +11,19 @@ export default class CarouselDots extends Component {
     onChange: PropTypes.func,
   };
 
-  onChange = index => () => this.props.onChange(index);
+  onChange = index => () => {
+    const numberOfSlides = this.props.number || this.props.thumbnails.length;
+    const moduloItem = this.calculateButtonValue() % numberOfSlides;
+
+    return this.props.onChange(this.props.value - ( moduloItem - index));
+  };
+
+  calculateButtonValue = () => {
+    const numberOfSlides = this.props.number || this.props.thumbnails.length;
+    return this.props.value >= 0
+      ? this.props.value
+      : this.props.value + numberOfSlides * Math.ceil(Math.abs(this.props.value/numberOfSlides));
+  };
 
   renderCarouselDots() {
     if (this.props.thumbnails) {
@@ -20,7 +32,7 @@ export default class CarouselDots extends Component {
           <div
             className={classnames(
               'BrainhubCarousel__thumbnail',
-              { 'BrainhubCarousel__thumbnail--selected': index === this.props.value }
+              { 'BrainhubCarousel__thumbnail--selected': this.calculateButtonValue() === this.props.value }
             )}
             type="button"
             onClick={this.onChange(index)}
@@ -30,14 +42,15 @@ export default class CarouselDots extends Component {
         </li>
       ));
     }
+
     const dots = [];
     for (let i = 0; i < this.props.number; i++) {
       dots.push(
         <li key={i}>
           <div
             className={classnames(
               'BrainhubCarousel__dot',
-              { 'BrainhubCarousel__dot--selected': i === this.props.value }
+              { 'BrainhubCarousel__dot--selected': i === this.calculateButtonValue() % this.props.number }
             )}
             type="button"
             onClick={this.onChange(i)}