auto-cycle

Author: AJIXuMuK

src/controls/carousel/Carousel.tsx

@@ -14,6 +14,8 @@ import * as telemetry from '../../common/telemetry';
 import CarouselImage from "./CarouselImage";
 
 export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
+  private _intervalId: number | undefined;
+
   constructor(props: ICarouselProps) {
     super(props);
 
@@ -42,9 +44,15 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
       this.setState({
         processingState: ProcessingState.idle
       });
+      this.startCycle(); // restarting cycle when new slide is available
     }
   }
 
+  public componentDidMount() {
+    // starting auto cycling
+    this.startCycle();
+  }
+
 
   public render(): React.ReactElement<ICarouselProps> {
     const { currentIndex, processingState } = this.state;
@@ -192,6 +200,9 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
   }
 
   private onIndicatorClick = (e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, index: number): void => {
+
+    this.startCycle();
+
     if (this.props.onSelect) {
       this.props.onSelect(index);
     }
@@ -296,6 +307,9 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
    * Handles carousel button click.
    */
   private onCarouselButtonClicked = (nextButtonClicked: boolean): void => {
+
+    this.startCycle();
+
     const currentIndex = this.state.currentIndex;
 
     let nextIndex = this.state.currentIndex;
@@ -406,4 +420,47 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
 
     return result;
   }
+
+  private startCycle = (): void => {
+
+    const {
+      interval,
+      triggerPageEvent
+    } = this.props;
+
+    if (this._intervalId) {
+      if (triggerPageEvent) {
+        clearTimeout(this._intervalId);
+      }
+      else {
+        clearInterval(this._intervalId);
+      }
+    }
+
+    if (interval !== null) {
+      const intervalValue = interval || 5000;
+      if (!triggerPageEvent) {
+        this._intervalId = setInterval(this.moveNext, intervalValue);
+      }
+      else {
+        this._intervalId = setTimeout(this.moveNext, intervalValue);
+      }
+    }
+  }
+
+  private moveNext = (): void => {
+    if (!this.isCarouselButtonDisabled(true)) {
+      this.onCarouselButtonClicked(true);
+    }
+    else {
+      if (this._intervalId) {
+        if (this.props.triggerPageEvent) {
+          clearTimeout(this._intervalId);
+        }
+        else {
+          clearInterval(this._intervalId);
+        }
+      }
+    }
+  }
 }

src/controls/carousel/ICarouselProps.ts

@@ -149,9 +149,9 @@ export interface ICarouselProps {
   slide?: boolean;
 
   /**
-   * The amount of time to delay between automatically cycling an item. If undefined, carousel will not automatically cycle.
+   * The amount of time to delay between automatically cycling an item. If null, carousel will not automatically cycle.
    */
-  interval?: number;
+  interval?: number | null;
 
   /**
    * Specifies if set of slide position indicators is shown