Support non-circular carousel

package.json

@@ -55,8 +55,10 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "keycode": "^2.2.0",
     "material-ui-dots": "^2.0.0",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "react-event-listener": "^0.6.6"
   },
   "standard": {
     "parser": "babel-eslint"

src/AutoRotatingCarousel.js

@@ -14,7 +14,7 @@ import Backdrop from '@material-ui/core/Backdrop'
 import Dots from 'material-ui-dots'
 import classNames from 'classnames'
 import Carousel from './SwipableCarouselView'
-import { modulo } from './util'
+import { bounded, modulo } from './util'
 
 const styles = {
   root: {
@@ -51,6 +51,10 @@ const styles = {
     position: 'absolute',
     top: 'calc((100% - 96px) / 2 + 24px)'
   },
+  arrowDisabled: {
+    opacity: 0.5,
+    cursor: 'default'
+  },
   arrowLeft: {
     left: -96
   },
@@ -116,37 +120,49 @@ class AutoRotatingCarousel extends Component {
 
   handleContentClick = (e) => e.stopPropagation() || e.preventDefault()
 
-  handleChange = (slideIndex) => {
+  handleChange = (index) => {
+    const slideIndex = this.getIndex(index, this.slideCount)
     this.setState({
       slideIndex
     }, this.onChange(slideIndex))
   }
 
   decreaseIndex () {
-    const slideIndex = this.state.slideIndex - 1
+    const slideIndex = this.getIndex(this.state.slideIndex - 1, this.slideCount)
     this.setState({
       slideIndex
     }, this.onChange(slideIndex))
   }
 
   increaseIndex () {
-    const slideIndex = this.state.slideIndex + 1
+    const slideIndex = this.getIndex(this.state.slideIndex + 1, this.slideCount)
     this.setState({
       slideIndex
     }, this.onChange(slideIndex))
   }
 
   onChange (slideIndex) {
     if (this.props.onChange) {
-      this.props.onChange(modulo(slideIndex, this.props.children.length))
+      this.props.onChange(this.getIndex(slideIndex, this.slideCount))
     }
   }
 
+  getIndex (idx, n) {
+    const { circular } = this.props
+    const indexer = circular ? modulo : bounded
+    return indexer(idx, n)
+  }
+
+  get slideCount () {
+    return this.props.children.length
+  }
+
   render () {
     const {
       autoplay,
       ButtonProps,
       children,
+      circular,
       classes,
       containerStyle,
       hideArrows,
@@ -161,7 +177,10 @@ class AutoRotatingCarousel extends Component {
     } = this.props
     const landscape = mobile && landscapeProp
     const transitionDuration = { enter: duration.enteringScreen, exit: duration.leavingScreen }
-    const hasMultipleChildren = children.length != null
+    const hasMultipleChildren = this.slideCount != null
+
+    const disableLeftArrow = !circular && this.state.slideIndex === 0
+    const disableRightArrow = !circular && this.state.slideIndex === this.slideCount - 1
 
     const carousel = (
       <Carousel
@@ -226,8 +245,8 @@ class AutoRotatingCarousel extends Component {
                 {
                   hasMultipleChildren &&
                   <Dots
-                    count={children.length}
-                    index={modulo(this.state.slideIndex, children.length)}
+                    count={this.slideCount}
+                    index={this.getIndex(this.state.slideIndex, this.slideCount)}
                     className={classNames(classes.dots, {
                       [classes.dotsMobile]: mobile,
                       [classes.dotsMobileLandscape]: landscape
@@ -240,14 +259,16 @@ class AutoRotatingCarousel extends Component {
             {!mobile && !hideArrows && hasMultipleChildren && (
               <div>
                 <Fab
-                  className={classNames(classes.arrow, classes.arrowLeft)}
+                  className={classNames(classes.arrow, classes.arrowLeft, { [classes.arrowDisabled]: disableLeftArrow })}
                   onClick={() => this.decreaseIndex()}
+                  disableRipple={disableLeftArrow}
                 >
                   <ArrowBackIcon className={classes.arrowIcon} />
                 </Fab>
                 <Fab
-                  className={classNames(classes.arrow, classes.arrowRight)}
+                  className={classNames(classes.arrow, classes.arrowRight, { [classes.arrowDisabled]: disableRightArrow })}
                   onClick={() => this.increaseIndex()}
+                  disableRipple={disableRightArrow}
                 >
                   <ArrowForwardIcon className={classes.arrowIcon} />
                 </Fab>
@@ -265,7 +286,8 @@ AutoRotatingCarousel.defaultProps = {
   interval: 3000,
   mobile: false,
   open: false,
-  hideArrows: false
+  hideArrows: false,
+  circular: true
 }
 
 AutoRotatingCarousel.propTypes = {
@@ -296,7 +318,9 @@ AutoRotatingCarousel.propTypes = {
   /** Controls whether the AutoRotatingCarousel is opened or not. */
   open: PropTypes.bool,
   /** If `true`, the left and right arrows are hidden in the desktop version. */
-  hideArrows: PropTypes.bool
+  hideArrows: PropTypes.bool,
+  /** If `false`, the carousel becomes non-circular and its buttons are disabled in the boundaries. */
+  circular: PropTypes.bool
 }
 
 export default withStyles(styles)(AutoRotatingCarousel)

src/AutoRotatingCarousel.md

@@ -102,3 +102,38 @@ const Button = require('@material-ui/core/Button').default;
   </AutoRotatingCarousel>
 </div>
 ```
+
+### Desktop mode (non circular)
+
+```
+const Slide = require('./Slide').default;
+const { red, blue, green } = require('@material-ui/core/colors');
+const Button = require('@material-ui/core/Button').default;
+
+<div>
+  <Button onClick={() => setState({ open: true })}>Open carousel</Button>
+  <AutoRotatingCarousel
+    label='Get started'
+    open={state.open}
+    onClose={() => setState({ open: false })}
+    onStart={() => setState({ open: false })}
+    style={{ position: 'absolute' }}
+    circular={false}
+  >
+    <Slide
+      media={<img src='http://www.icons101.com/icon_png/size_256/id_79394/youtube.png' />}
+      mediaBackgroundStyle={{ backgroundColor: red[400] }}
+      style={{ backgroundColor: red[600] }}
+      title='This is a very cool feature'
+      subtitle='Just using this will blow your mind.'
+    />
+    <Slide
+      media={<img src='http://www.icons101.com/icon_png/size_256/id_80975/GoogleInbox.png' />}
+      mediaBackgroundStyle={{ backgroundColor: blue[400] }}
+      style={{ backgroundColor: blue[600] }}
+      title='Ever wanted to be popular?'
+      subtitle='Well just mix two colors and your are good to go!'
+    />
+  </AutoRotatingCarousel>
+</div>
+```

src/SwipableCarouselView.js

@@ -1,18 +1,46 @@
-import React from 'react'
+import React, { Component } from 'react'
 import autoPlay from 'react-swipeable-views-utils/lib/autoPlay'
 import virtualize from 'react-swipeable-views-utils/lib/virtualize'
 import bindKeyboard from 'react-swipeable-views-utils/lib/bindKeyboard'
 import SwipeableViews from 'react-swipeable-views'
+import keycode from 'keycode';
+import EventListener from 'react-event-listener';
 import { modulo } from './util'
 
+const NonVirtualizedSwipeViews = bindKeyboard(SwipeableViews)
 const VirtualizeSwipeViews = bindKeyboard(virtualize(SwipeableViews))
 const VirtualizeAutoPlaySwipeViews = autoPlay(VirtualizeSwipeViews)
 
 const carouselSlideRenderer = (children) =>
   ({index, key}) => React.cloneElement(children[modulo(index, children.length)], {key})
 
-export default function Carousel ({children, autoplay, ...other}) {
+class NonCircularCarousel extends Component {
+  handleKeyDown = event => {
+    const { index, children } = this.props
+    switch (keycode(event)) {
+      case 'left':
+        if (index === 0) event.stopPropagation()
+        break
+      case 'right':
+        if (index === children.length - 1) event.stopPropagation()
+        break
+    }
+  }
+
+  render () {
+    return (
+      <EventListener target="document" onKeyDown={this.handleKeyDown}>
+        <NonVirtualizedSwipeViews {...this.props} />
+      </EventListener>
+    )
+  }
+}
+
+export default function Carousel ({children, autoplay, circular, ...other}) {
   const slideRenderer = carouselSlideRenderer(children)
+  if (!circular) {
+    return <NonCircularCarousel {...other} resistance children={children} />
+  }
   return autoplay ? (
     <VirtualizeAutoPlaySwipeViews
       {...other}

src/util.js

@@ -1,2 +1,4 @@
 // modulo that supports negative numbers (so that e.g. -5 % 4 = 3)
 export const modulo = (a, n) => ((a % n) + n) % n
+
+export const bounded = (idx, n) => Math.max(0, Math.min(idx, n - 1))