Carousel autoplay (#699)

* added autoplay feature for carousel, with defautl interval of 4 seconds

* 1)Added a checkbox for autoplay in the Carousel demo screen. 2)filled the types in Carousel.d.ts

* fixed bug when making a loop to the begining: the autoplay moved left all the way back instead of right. fixed by moving right to the cloned first page, then returning silently to the real first page

* resets the autoplay timer when the user scrolls manually, in order to avoid auto scroll immediately after manual one

Author: yginton

demo/src/screens/componentScreens/CarouselScreen.js

@@ -30,7 +30,8 @@ class CarouselScreen extends Component {
   state = {
     limitShownPages: false,
     numberOfPagesShown: 7,
-    currentPage: INITIAL_PAGE
+    currentPage: INITIAL_PAGE,
+    autoplay: false
   };
 
   onChangePage = currentPage => {
@@ -42,14 +43,15 @@ class CarouselScreen extends Component {
   };
 
   render() {
-    const {limitShownPages, numberOfPagesShown} = this.state;
+    const {limitShownPages, numberOfPagesShown, autoplay} = this.state;
 
     return (
       <ScrollView showsVerticalScrollIndicator={false}>
         <Text text30 margin-20>Carousel</Text>
 
         <View marginH-20 marginB-20>
           {renderBooleanOption.call(this, 'Limit number of pages shown in page control', 'limitShownPages')}
+          {renderBooleanOption.call(this, 'autoplay', 'autoplay')}          
           {renderSliderOption.call(this, 'Number of pages shown', 'numberOfPagesShown', {
             min: 5,
             max: 10,
@@ -62,7 +64,8 @@ class CarouselScreen extends Component {
           key={numberOfPagesShown}
           migrate
           ref={r => (this.carousel = r)}
-          // loop
+          //loop
+          autoplay={autoplay}          
           onChangePage={this.onChangePage}
           pageWidth={WIDTH}
           // itemSpacings={Spacings.s3}
@@ -85,7 +88,7 @@ class CarouselScreen extends Component {
         </View>
 
         <View padding-20>
-          <Carousel containerStyle={{height: 160}} initialPage={INITIAL_PAGE} loop allowAccessibleLayout>
+          <Carousel containerStyle={{height: 160}} initialPage={INITIAL_PAGE} loop allowAccessibleLayout autoplay={autoplay}>
             {_.map(IMAGES, (image, index) => {
               return (
                 <View key={index} flex padding-10 bottom>

src/components/carousel/index.js

@@ -87,12 +87,22 @@ export default class Carousel extends BaseComponent {
     /**
      * Whether to layout Carousel for accessibility
      */
-    allowAccessibleLayout: PropTypes.bool
+    allowAccessibleLayout: PropTypes.bool,
+    /**
+     * Whether to switch automatically between the pages
+     */
+    autoplay: PropTypes.bool,
+    /**
+     * the amount of ms to wait before switching to the next page, in case autoplay is on
+     */
+    autoplayInterval: PropTypes.number
   };
 
   static defaultProps = {
     initialPage: 0,
-    pagingEnabled: true
+    pagingEnabled: true,
+    autoplay: false,
+    autoplayInterval: 4000
   };
 
   static pageControlPositions = PAGE_CONTROL_POSITIONS;
@@ -115,10 +125,24 @@ export default class Carousel extends BaseComponent {
 
   componentDidMount() {
     Constants.addDimensionsEventListener(this.onOrientationChanged);
+
+    if (this.props.autoplay) {
+      this.startAutoPlay();
+    }
   }
 
   componentWillUnmount() {
     Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    clearInterval(this.autoplayTimer);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {autoplay} = this.props;
+    if (autoplay && !prevProps.autoplay) {
+      this.startAutoPlay();
+    } else if (!autoplay && prevProps.autoplay) {
+      this.stopAutoPlay();
+    }
   }
 
   onOrientationChanged = () => {
@@ -168,6 +192,23 @@ export default class Carousel extends BaseComponent {
     }
   };
 
+  
+
+  startAutoPlay() {    
+    this.autoplayTimer = setInterval(() => {      
+      this.goToNextPage();
+    }, this.props.autoplayInterval);
+  }
+
+  stopAutoPlay() {
+    clearInterval(this.autoplayTimer);
+  }  
+
+  resetAutoPlay() {
+    this.stopAutoPlay();
+    this.startAutoPlay();
+  }
+
   goToPage(pageIndex, animated = true) {
     this.setState({currentPage: this.getCalcIndex(pageIndex)}, () => this.updateOffset(animated));
   }
@@ -243,13 +284,34 @@ export default class Carousel extends BaseComponent {
     }
   };
 
+  goToNextPage() {
+    const {currentPage} = this.state;
+    const pagesCount = presenter.getChildrenLength(this.getThemeProps());
+    const {loop} = this.getThemeProps();        
+
+    let nextPageIndex;
+    if (loop) {
+      nextPageIndex = currentPage + 1;
+    } else {
+      nextPageIndex = Math.min(pagesCount - 1, currentPage + 1);
+    }
+
+    this.goToPage(nextPageIndex, true);
+
+    // in case of a loop, after we advanced right to the cloned first page, 
+    // we return silently to the real first page
+    if (loop && currentPage === pagesCount) {
+      this.goToPage(0, false);
+    }  
+  }
+
   onScroll = event => {
     if (!this.skippedInitialScroll) {
       this.skippedInitialScroll = true;
       return;
     }
 
-    const {loop} = this.getThemeProps();
+    const {loop, autoplay} = this.getThemeProps();
     const {pageWidth} = this.state;
     const offsetX = event.nativeEvent.contentOffset.x;
 
@@ -265,6 +327,10 @@ export default class Carousel extends BaseComponent {
       this.updateOffset();
     }
 
+    if (autoplay) { // reset the timer to avoid auto scroll immediately after manual one
+      this.resetAutoPlay();
+    }
+
     _.invoke(this.props, 'onScroll', event);
   };
 

typings/components/Carousel.d.ts

@@ -15,6 +15,8 @@ export interface CarouselProps {
   initialPage?: number;
   pageWidth?: number;
   itemSpacings?: number;
+  containerMarginHorizontal?: number;
+  containerPaddingVertical?: number;
   loop?: boolean;
   onChangePage?: (page: number, prevPage: number) => void;
   onScroll?: (event?: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -23,6 +25,10 @@ export interface CarouselProps {
   pageControlPosition?: CarouselPageControlPosition;
   showCounter?: boolean;
   counterTextStyle?: StyleProp<TextStyle>;
+  pagingEnabled?: boolean;
+  allowAccessibleLayout?: boolean;
+  autoplay?: boolean;
+  autoplayInterval?: number;
 }
 
 export class Carousel extends BaseComponent<CarouselProps> {}