feat(CCarousel): add pause, wrap properties, and indivuadl interval for items

Author: mrholek

docs/4.0/api/CCarousel.api.mdx

@@ -8,4 +8,6 @@
 | **indicators** | Adding indicators at the bottom of the carousel for each item. | `boolean` | - |
 | **interval** | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | `number | boolean` | 5000 |
 | **onSlideChange** | On slide change callback. | `(a: string | number) => void` | - |
-| **transition** | On slide change callback. | `{'slide' | 'crossfade'}` | 'slide' |
+| **pause** | If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. | `boolean | "hover"` | hover |
+| **transition** | Set type of the transition. | `{'slide' | 'crossfade'}` | 'slide' |
+| **wrap** | Set whether the carousel should cycle continuously or have hard stops. | `boolean` | true |

docs/4.0/api/CCarouselControl.api.mdx

@@ -1,3 +1,4 @@
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
+| **interval** | The amount of time to delay between automatically cycling an item. | `number | boolean` | false |

docs/4.0/api/CCarouselIndicators.api.mdx

@@ -10,9 +10,6 @@ import {
   CCallout,
   CCarousel,
   CCarouselCaption,
-  CCarouselControl,
-  CCarouselIndicators,
-  CCarouselInner,
   CCarouselItem,
   CImage,
 } from './../../../src/index.ts'
@@ -39,7 +36,7 @@ Carousels don't automatically normalize slide dimensions. As such, you may want
       <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
     </CCarouselItem>
     <CCarouselItem>
-      <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
+      <CImage className="d-block w-100" src={VueImg} alt="slide 2"/>
     </CCarouselItem>
     <CCarouselItem>
       <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
@@ -279,18 +276,6 @@ Add `dark` property to the `CCarousel` for darker controls, indicators, and capt
 
 `markdown:CCarouselCaption.api.mdx`
 
-### CCarouselControl
-
-`markdown:CCarouselControl.api.mdx`
-
-### CCarouselIndicators
-
-`markdown:CCarouselIndicators.api.mdx`
-
-### CCarouselInner
-
-`markdown:CCarouselInner.api.mdx`
-
 ### CCarouselItem
 
 `markdown:CCarouselItem.api.mdx`

docs/4.0/api/CCarouselInner.api.mdx

@@ -1,4 +1,5 @@
 import React, {
+  Children,
   createContext,
   forwardRef,
   HTMLAttributes,
@@ -9,9 +10,17 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CCarouselControl } from './CCarouselControl'
-import { CCarouselIndicators } from './CCarouselIndicators'
-import { CCarouselInner } from './CCarouselInner'
+import { useForkedRef } from '../../utils/hooks'
+
+const isVisible = (element: HTMLDivElement) => {
+  const rect = element.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
 
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -47,26 +56,29 @@ export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
    */
   onSlideChange?: (a: number | string | null) => void
   /**
-   * On slide change callback. [docs]
+   * If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.
+   */
+  pause?: boolean | 'hover'
+  /**
+   * Set type of the transition. [docs]
    *
    * @type {'slide' | 'crossfade'}
    * @default 'slide'
    */
   transition?: 'slide' | 'crossfade'
+  /**
+   * Set whether the carousel should cycle continuously or have hard stops.
+   */
+  wrap?: boolean
 }
 
 interface DataType {
   timeout?: null | ReturnType<typeof setTimeout>
 }
 
 export interface ContextProps {
-  itemsNumber: number
-  state: [number | null, number, string?]
-  animating: boolean
-  animate?: boolean
-  setItemsNumber: (a: number) => void
   setAnimating: (a: boolean) => void
-  setState: (a: [number | null, number, string?]) => void
+  setCustomInterval: (a: boolean | number) => void
 }
 
 export const CCarouselContext = createContext({} as ContextProps)
@@ -83,40 +95,47 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       indicators,
       interval = 5000,
       onSlideChange,
+      pause = 'hover',
       transition,
+      wrap = true,
       ...rest
     },
     ref,
   ) => {
-    const [state, setState] = useState<[number | null, number, string?]>([null, index])
-    const [itemsNumber, setItemsNumber] = useState<number>(0)
+    const carouselRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, carouselRef)
+    const data = useRef<DataType>({}).current
+
+    const [active, setActive] = useState<number>(0)
     const [animating, setAnimating] = useState<boolean>(false)
+    const [customInterval, setCustomInterval] = useState<boolean | number>()
+    const [direction, setDirection] = useState<string>('next')
+    const [itemsNumber, setItemsNumber] = useState<number>(0)
+    const [visible, setVisible] = useState<boolean>()
 
-    const data = useRef<DataType>({}).current
+    useEffect(() => {
+      setItemsNumber(Children.toArray(children).length)
+    })
 
-    const cycle = () => {
-      pause()
-      if (typeof interval === 'number') {
-        data.timeout = setTimeout(() => nextItem(), interval)
-      }
-    }
-    const pause = () => data.timeout && clearTimeout(data.timeout)
-    const nextItem = () => {
-      if (typeof state[1] === 'number')
-        setState([state[1], itemsNumber === state[1] + 1 ? 0 : state[1] + 1, 'next'])
-    }
+    useEffect(() => {
+      visible && cycle()
+    }, [visible])
+
+    useEffect(() => {
+      !animating && cycle()
+    }, [animating])
 
     useEffect(() => {
-      setState([state[1], index])
-    }, [index])
+      onSlideChange && onSlideChange(active)
+    }, [active])
 
     useEffect(() => {
-      onSlideChange && onSlideChange(state[1])
-      cycle()
+      window.addEventListener('scroll', handleScroll)
+
       return () => {
-        pause()
+        window.removeEventListener('scroll', handleScroll)
       }
-    }, [state])
+    })
 
     const _className = classNames(
       'carousel slide',
@@ -125,25 +144,119 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       className,
     )
 
+    const cycle = () => {
+      _pause()
+      if (!wrap && active === itemsNumber - 1) {
+        return
+      }
+
+      if (typeof interval === 'number') {
+        data.timeout = setTimeout(
+          () => nextItemWhenVisible(),
+          typeof customInterval === 'number' ? customInterval : interval,
+        )
+      }
+    }
+    const _pause = () => pause && data.timeout && clearTimeout(data.timeout)
+
+    const nextItemWhenVisible = () => {
+      // Don't call next when the page isn't visible
+      // or the carousel or its parent isn't visible
+      if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+        if (animating) {
+          return
+        }
+        handleControlClick('next')
+      }
+    }
+
+    const handleControlClick = (direction: string) => {
+      if (animating) {
+        return
+      }
+      setDirection(direction)
+      if (direction === 'next') {
+        active === itemsNumber - 1 ? setActive(0) : setActive(active + 1)
+      } else {
+        active === 0 ? setActive(itemsNumber - 1) : setActive(active - 1)
+      }
+    }
+
+    const handleIndicatorClick = (index: number) => {
+      if (active === index) {
+        return
+      }
+
+      if (active < index) {
+        setDirection('next')
+        setActive(index)
+        return
+      }
+
+      if (active > index) {
+        setDirection('prev')
+        setActive(index)
+      }
+    }
+
+    const handleScroll = () => {
+      if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+        setVisible(true)
+      } else {
+        setVisible(false)
+      }
+    }
+
     return (
-      <div className={_className} onMouseEnter={pause} onMouseLeave={cycle} {...rest} ref={ref}>
+      <div
+        className={_className}
+        onMouseEnter={_pause}
+        onMouseLeave={cycle}
+        {...rest}
+        ref={forkedRef}
+      >
         <CCarouselContext.Provider
           value={{
-            state,
-            setState,
-            animate,
-            itemsNumber,
-            setItemsNumber,
-            animating,
             setAnimating,
+            setCustomInterval,
           }}
         >
-          {indicators && <CCarouselIndicators />}
-          <CCarouselInner>{children}</CCarouselInner>
+          {indicators && (
+            <ol className="carousel-indicators">
+              {Array.from({ length: itemsNumber }, (_, i) => i).map((index) => {
+                return (
+                  <li
+                    key={`indicator${index}`}
+                    onClick={() => {
+                      !animating && handleIndicatorClick(index)
+                    }}
+                    className={active === index ? 'active' : ''}
+                    data-coreui-target=""
+                  />
+                )
+              })}
+            </ol>
+          )}
+          <div className="carousel-inner">
+            {Children.map(children, (child, index) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                  active: active === index ? true : false,
+                  direction: direction,
+                  key: index,
+                })
+              }
+              return
+            })}
+          </div>
           {controls && (
             <>
-              <CCarouselControl direction="prev" />
-              <CCarouselControl direction="next" />
+              <button className="carousel-control-prev" onClick={() => handleControlClick('prev')}>
+                <span className={`carousel-control-prev-icon`} aria-label="prev" />
+              </button>
+              <button className="carousel-control-next" onClick={() => handleControlClick('next')}>
+                <span className={`carousel-control-next-icon`} aria-label="next" />
+              </button>
             </>
           )}
         </CCarouselContext.Provider>
@@ -162,7 +275,9 @@ CCarousel.propTypes = {
   indicators: PropTypes.bool,
   interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   onSlideChange: PropTypes.func,
+  pause: PropTypes.oneOf([false, 'hover']),
   transition: PropTypes.oneOf(['slide', 'crossfade']),
+  wrap: PropTypes.bool,
 }
 
 CCarousel.displayName = 'CCarousel'