refactor(CCarousel): move the context outside the component

Author: mrholek

packages/coreui-react/src/components/carousel/CCarousel.tsx

@@ -1,6 +1,5 @@
 import React, {
   Children,
-  createContext,
   forwardRef,
   HTMLAttributes,
   TouchEvent,
@@ -14,6 +13,8 @@ import classNames from 'classnames'
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
 
+import { CCarouselContext } from './CCarouselContext'
+
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * index of the active item.
@@ -71,13 +72,6 @@ interface DataType {
   timeout?: null | ReturnType<typeof setTimeout>
 }
 
-export interface ContextProps {
-  setAnimating: (a: boolean) => void
-  setCustomInterval: (a: boolean | number) => void
-}
-
-export const CCarouselContext = createContext({} as ContextProps)
-
 export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
   (
     {
@@ -96,7 +90,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       wrap = true,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const carouselRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselRef)
@@ -141,7 +135,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       if (typeof interval === 'number') {
         data.timeout = setTimeout(
           () => nextItemWhenVisible(),
-          typeof customInterval === 'number' ? customInterval : interval,
+          typeof customInterval === 'number' ? customInterval : interval
         )
       }
     }
@@ -228,7 +222,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           {
             'carousel-fade': transition === 'crossfade',
           },
-          className,
+          className
         )}
         {...(dark && { 'data-coreui-theme': 'dark' })}
         onMouseEnter={_pause}
@@ -288,7 +282,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         </CCarouselContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CCarousel.propTypes = {

packages/coreui-react/src/components/carousel/CCarouselCaption.tsx

@@ -12,7 +12,7 @@ export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
 export const CCarouselCaption = forwardRef<HTMLDivElement, CCarouselCaptionProps>(
   ({ className, ...rest }, ref) => {
     return <div className={classNames('carousel-caption', className)} {...rest} ref={ref} />
-  },
+  }
 )
 
 CCarouselCaption.propTypes = {

packages/coreui-react/src/components/carousel/CCarouselContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CCarouselContextProps {
+  setAnimating: (a: boolean) => void
+  setCustomInterval: (a: boolean | number) => void
+}
+
+export const CCarouselContext = createContext({} as CCarouselContextProps)

packages/coreui-react/src/components/carousel/CCarouselItem.tsx

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { useForkedRef } from '../../hooks'
-import { CCarouselContext } from './CCarousel'
+
+import { CCarouselContext } from './CCarouselContext'
+
 export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * @ignore