feat(carousel): add individual item intervals

Adds the ability to specify intervals per-item, which should hopefully match the functionality of the upstream feature. fixes #5305
react-bootstrap · Aug 7, 2020 · d4e12f0 · d4e12f0
1 parent d90ce3e
commit d4e12f0
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 2 deletions.
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -250,6 +250,8 @@ function CarouselFunc(uncontrolledProps: CarouselProps, ref) {
     activeIndex || 0,
   );
 
+  const intervals = useRef<number[]>([]);
+
   if (!isSliding && activeIndex !== renderedActiveIndex) {
     if (nextDirectionRef.current) {
       setDirection(nextDirectionRef.current);
@@ -492,17 +494,23 @@ function CarouselFunc(uncontrolledProps: CarouselProps, ref) {
       return undefined;
     }
 
+    let chosenInterval = interval || undefined;
+
+    if (activeIndex !== undefined && intervals.current[activeIndex]) {
+      chosenInterval = intervals.current[activeIndex];
+    }
+
     intervalHandleRef.current = window.setInterval(
       document.visibilityState ? nextWhenVisible : next,
-      interval || undefined,
+      chosenInterval,
     );
 
     return () => {
       if (intervalHandleRef.current !== null) {
         clearInterval(intervalHandleRef.current);
       }
     };
-  }, [shouldPlay, next, interval, nextWhenVisible]);
+  }, [shouldPlay, next, activeIndex, interval, nextWhenVisible]);
 
   const indicatorOnClicks = useMemo(
     () =>
@@ -547,6 +555,7 @@ function CarouselFunc(uncontrolledProps: CarouselProps, ref) {
       <div className={`${prefix}-inner`}>
         {map(children, (child, index) => {
           const isActive = index === renderedActiveIndex;
+          intervals.current[index] = child.props.interval as number;
 
           return slide ? (
             <Transition

diff --git a/test/CarouselSpec.js b/test/CarouselSpec.js
@@ -315,6 +315,39 @@ describe('<Carousel>', () => {
       expect(onSelectSpy).to.have.been.calledOnce;
     });
 
+    it('should go through the items given the specified intervals', () => {
+      const defaultInterval = 5000;
+      const intervals = [
+        1000,
+        500,
+        defaultInterval, // to test for no interval specified, it should be the default
+      ];
+      const itemsWithIntervals = [
+        <Carousel.Item key={1} interval={intervals[0]}>
+          Item 1 content
+        </Carousel.Item>,
+        <Carousel.Item key={2} interval={intervals[1]}>
+          Item 2 content
+        </Carousel.Item>,
+        <Carousel.Item key={3}>Item 3 content</Carousel.Item>,
+      ];
+
+      const onSelectSpy = sinon.spy();
+      mount(
+        <Carousel interval={defaultInterval} onSelect={onSelectSpy}>
+          {itemsWithIntervals}
+        </Carousel>,
+      );
+
+      const total = intervals.reduce((sum, current) => sum + current, 0);
+      clock.tick(total * 1.1);
+
+      expect(onSelectSpy).to.have.been.calledThrice;
+      expect(onSelectSpy.firstCall).to.have.been.calledWith(1);
+      expect(onSelectSpy.secondCall).to.have.been.calledWith(2);
+      expect(onSelectSpy.thirdCall).to.have.been.calledWith(0);
+    });
+
     it('should stop going through items on hover and continue afterwards', () => {
       const onSelectSpy = sinon.spy();
       const interval = 500;

diff --git a/www/src/examples/Carousel/IndividualIntervals.js b/www/src/examples/Carousel/IndividualIntervals.js
@@ -0,0 +1,35 @@
+<Carousel>
+  <Carousel.Item interval={1000}>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=First slide&bg=373940"
+      alt="First slide"
+    />
+    <Carousel.Caption>
+      <h3>First slide label</h3>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item interval={500}>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=Second slide&bg=282c34"
+      alt="Third slide"
+    />
+    <Carousel.Caption>
+      <h3>Second slide label</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=Third slide&bg=20232a"
+      alt="Third slide"
+    />
+    <Carousel.Caption>
+      <h3>Third slide label</h3>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+</Carousel>;
diff --git a/www/src/pages/components/carousel.mdx b/www/src/pages/components/carousel.mdx
@@ -4,6 +4,7 @@ import ComponentApi from '../../components/ComponentApi';
 import ReactPlayground from '../../components/ReactPlayground';
 import CarouselControlled from '../../examples/Carousel/Controlled';
 import CarouselUncontrolled from '../../examples/Carousel/Uncontrolled';
+import IndividualIntervals from '../../examples/Carousel/IndividualIntervals';
 
 # Carousels
 
@@ -29,6 +30,13 @@ You can also _control_ the Carousel state, via the
 
 <ReactPlayground codeText={CarouselControlled} />
 
+## Individual Item Intervals
+
+You can specify individual intervals for each carousel item via the `interval`
+prop.
+
+<ReactPlayground codeText={IndividualIntervals} />
+
 ## API
 
 <ComponentApi metadata={props.data.carousel} />