feat: add flag to carousel onActiveIdUpdate to denote if the update was initiated by autoplay (#1970)

completing as code owner

Author: chrisdholt

packages/fast-components-react-msft/src/carousel/carousel.props.ts

@@ -64,7 +64,7 @@ export interface CarouselHandledProps extends CarouselManagedClasses {
     /**
      * The callback which is fired when the active id is changed
      */
-    onActiveIdUpdate?: (activeId: string) => void;
+    onActiveIdUpdate?: (activeId: string, isAutoplay?: boolean) => void;
 
     /**
      * The carousel items

packages/fast-components-react-msft/src/carousel/carousel.spec.tsx

@@ -292,6 +292,22 @@ describe("carousel", (): void => {
         expect(onActiveIdUpdateFn.mock.results[2].value).toBe("id02");
     });
 
+    test("should provide the `isAutoplayInitiated` value to `onActiveIdUpdate` when prop is passed", () => {
+        const onActiveIdUpdateFn: any = jest.fn(
+            (id: string, autoplayInitiated: boolean) => autoplayInitiated
+        );
+        const rendered: any = mount(
+            <MSFTCarousel {...handledProps} onActiveIdUpdate={onActiveIdUpdateFn} />
+        );
+
+        rendered
+            .find('[role="tab"]')
+            .at(1)
+            .simulate("click");
+
+        expect(onActiveIdUpdateFn.mock.results[0].value).toBe(false);
+    });
+
     describe("autoplay", (): void => {
         const mockFocus: any = jest.fn();
         const mockHover: any = jest.fn();
@@ -309,6 +325,18 @@ describe("carousel", (): void => {
             expect(rendered.props().autoplay).toBe(false);
         });
 
+        test("should automatically advance the slide when `autoplay` prop is passed to the component", () => {
+            jest.useFakeTimers();
+
+            const rendered: any = mount(<MSFTCarousel {...props} autoplay={true} />);
+
+            expect(rendered.state().activeId).toBe("id01");
+
+            jest.advanceTimersByTime(6001);
+
+            expect(rendered.state().activeId).toBe("id02");
+        });
+
         test("should set `autoplay` to true when `autoplay` is passed as true", () => {
             const rendered: any = mount(<MSFTCarousel {...props} autoplay={true} />);
 

packages/fast-components-react-msft/src/carousel/carousel.stories.tsx

@@ -7,6 +7,7 @@ import CarouselHero from "../../assets/carousel-hero-content";
 storiesOf("Carousel", module).add("Default", () => (
     <Carousel
         label="A carousel of items"
+        autoplay={true}
         items={[
             {
                 id: uniqueId(),

packages/fast-components-react-msft/src/carousel/carousel.tsx

@@ -84,7 +84,7 @@ class Carousel extends Foundation<
                 activeId:
                     typeof this.props.activeId === "string"
                         ? this.props.activeId
-                        : get(this.props.items[0], "id", ""),
+                        : get(this.props.items[0], "id", " "),
             };
         }
     }
@@ -120,7 +120,7 @@ class Carousel extends Foundation<
         if (canUseDOM() && this.props.autoplay) {
             // Set initial interval for autoplay
             this.autoplayTimer = window.setInterval(
-                this.nextSlide,
+                this.autoplayNextSlide,
                 this.props.autoplayInterval
             );
         }
@@ -133,7 +133,7 @@ class Carousel extends Foundation<
         if (this.props.autoplay && isNil(this.autoplayTimer)) {
             // Set the window interval if we are in autplay and don't have a timer
             this.autoplayTimer = window.setInterval(
-                this.nextSlide,
+                this.autoplayNextSlide,
                 this.props.autoplayInterval
             );
         } else if (!this.props.autoplay && !isNil(this.autoplayTimer)) {
@@ -319,7 +319,7 @@ class Carousel extends Foundation<
      */
     private handleUpdate = (activeTab: string): void => {
         if (typeof this.props.onActiveIdUpdate === "function") {
-            this.props.onActiveIdUpdate(activeTab);
+            this.props.onActiveIdUpdate(activeTab, false);
         }
 
         this.setState({
@@ -333,6 +333,29 @@ class Carousel extends Foundation<
         this.setTransitionDirection(activeTabIndex);
     };
 
+    /**
+     * Handles automation of slide movement
+     */
+    private autoplayNextSlide = (): void => {
+        let nextPosition: number = this.getActiveIndex() + 1;
+
+        if (nextPosition > this.slides.length - 1) {
+            nextPosition = 0;
+        }
+
+        const activeId: string = this.slides[nextPosition].id;
+
+        this.setTransitionDirection(nextPosition);
+
+        if (typeof this.props.onActiveIdUpdate === "function") {
+            this.props.onActiveIdUpdate(activeId, true);
+        }
+
+        this.setState({
+            activeId,
+        });
+    };
+
     /**
      * Move to next slide if applicable
      */
@@ -368,8 +391,9 @@ class Carousel extends Foundation<
         const newActiveId: string = this.slides[position].id;
 
         if (typeof this.props.onActiveIdUpdate === "function") {
-            this.props.onActiveIdUpdate(newActiveId);
+            this.props.onActiveIdUpdate(newActiveId, false);
         }
+
         this.setState({
             activeId: newActiveId,
         });