Fix carousel selected state and dots (#179)

* fixes css specificity issue preventing selected dot styles from applying

* fixes carousel loop-around behavior

* fix the selected thumbnail state

* simplified the next index loop-around calculations logic

Author: jasonadkison

src/carousel/Carousel.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react'
+import React, { Fragment, useCallback, useState } from 'react'
 import clsx from 'clsx'
 import { makeStyles } from '@material-ui/core/styles'
 import SwipeableViews from 'react-swipeable-views'
@@ -108,6 +108,23 @@ const Carousel = React.forwardRef((props, ref) => {
     return <Fragment key={key}>{slide}</Fragment>
   }
 
+  const onChangeIndex = useCallback((index) => {
+    if (!infinite) {
+      setSelected(index)
+      return
+    }
+
+    // carousel loop-around calculations
+    let nextSelectedIndex = index;
+    if (nextSelectedIndex + 1 > count) {
+      nextSelectedIndex = 0;
+    } else if (nextSelectedIndex < 0) {
+      nextSelectedIndex = count - 1;
+    }
+
+    setSelected(nextSelectedIndex)
+  }, [infinite, count, selected, setSelected])
+
   return (
     <div
       ref={ref}
@@ -122,7 +139,7 @@ const Carousel = React.forwardRef((props, ref) => {
         <div className={classes.swipeWrap}>
           <Tag
             index={selected}
-            onChangeIndex={setSelected}
+            onChangeIndex={onChangeIndex}
             className={classes.autoPlaySwipeableViews}
             style={swipeStyle}
             slideStyle={slideStyle}

src/carousel/CarouselArrows.js

@@ -61,9 +61,23 @@ export default function CarouselArrows({
   const createOnClickArrow = useCallback(
     idxChange => evt => {
       evt.preventDefault()
-      setSelected(selected + idxChange)
+
+      if (!infinite) {
+        setSelected(selected + idxChange);
+        return;
+      }
+
+      // carousel loop-around calculations
+      let nextSelectedIndex = selected + idxChange;
+      if (nextSelectedIndex + 1 > count) {
+        nextSelectedIndex = 0;
+      } else if (nextSelectedIndex < 0) {
+        nextSelectedIndex = count - 1;
+      }
+
+      setSelected(nextSelectedIndex);
     },
-    [selected, setSelected],
+    [selected, setSelected, count, infinite],
   )
 
   return (

src/carousel/CarouselDots.js

@@ -15,13 +15,6 @@ const styles = theme => ({
     width: '100%',
   },
 
-  /**
-   * Styles applied to the dot representing the selected slide.
-   */
-  dotSelected: {
-    backgroundColor: theme.palette.text.primary,
-  },
-
   /**
    * Styles applied to each dot element.
    */
@@ -38,6 +31,13 @@ const styles = theme => ({
     // Same duration as SwipeableViews animation
     transitionDuration: '0.35s',
   },
+
+  /**
+   * Styles applied to the dot representing the selected slide.
+   */
+  dotSelected: {
+    backgroundColor: theme.palette.text.primary,
+  }
 })
 
 const useStyles = makeStyles(styles, { name: 'RSFCarouselDots' })

src/carousel/CarouselThumbnails.js

@@ -6,7 +6,6 @@ import Tab from '@material-ui/core/Tab'
 import { makeStyles, useTheme } from '@material-ui/core/styles'
 import useMediaQuery from '@material-ui/core/useMediaQuery'
 import Image from '../Image'
-import mod from '../utils/mod'
 
 export const styles = theme => ({
   /**
@@ -139,7 +138,7 @@ function CarouselThumbnails({
   return (
     <div className={clsx(className, styles.thumbs)}>
       <Tabs
-        value={selected ? mod(selected, count) : false}
+        value={selected}
         variant="scrollable"
         onChange={(_, index) => setSelected(index)}
         orientation={isVertical ? 'vertical' : 'horizontal'}