refactor: change Context to CCarouselContext

Author: mrholek

src/components/carousel/CCarousel.tsx

@@ -1,4 +1,11 @@
-import React, { forwardRef, HTMLAttributes, useState, useEffect, useRef } from 'react'
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useState,
+  useEffect,
+  useRef,
+} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -68,7 +75,7 @@ interface DataType {
   timeout?: null | ReturnType<typeof setTimeout>
 }
 
-export interface ContextType {
+export interface ContextProps {
   itemsNumber: number
   state: [number | null, number, string?]
   animating: boolean
@@ -78,16 +85,7 @@ export interface ContextType {
   setState: (a: [number | null, number, string?]) => void
 }
 
-//
-
-export const Context = React.createContext<ContextType>({
-  itemsNumber: 0,
-  state: [null, 0],
-  animating: false,
-  setItemsNumber: (_) => {},
-  setAnimating: (_) => {},
-  setState: (_) => {},
-})
+export const CCarouselContext = createContext({} as ContextProps)
 
 export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
   (
@@ -110,7 +108,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
     const [itemsNumber, setItemsNumber] = useState<number>(0)
     const [animating, setAnimating] = useState<boolean>(false)
 
-    let data = useRef<DataType>({}).current
+    const data = useRef<DataType>({}).current
 
     const cycle = () => {
       pause()
@@ -147,7 +145,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
 
     return (
       <div className={_className} onMouseEnter={pause} onMouseLeave={cycle} {...rest} ref={ref}>
-        <Context.Provider
+        <CCarouselContext.Provider
           value={{
             state,
             setState,
@@ -166,7 +164,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
               <CCarouselControl direction="next" />
             </>
           )}
-        </Context.Provider>
+        </CCarouselContext.Provider>
       </div>
     )
   },

src/components/carousel/CCarouselControl.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { Context } from './CCarousel'
+import { CCarouselContext } from './CCarousel'
 
 type Direction = 'prev' | 'next'
 
@@ -20,7 +20,7 @@ export interface CCarouselControlProps extends HTMLAttributes<HTMLButtonElement>
 
 export const CCarouselControl = forwardRef<HTMLButtonElement, CCarouselControlProps>(
   ({ className, children, direction, ...rest }, ref) => {
-    const { state, setState, itemsNumber, animating } = useContext(Context)
+    const { state, setState, itemsNumber, animating } = useContext(CCarouselContext)
 
     const onClick = (): void => {
       if (animating) {

src/components/carousel/CCarouselIndicators.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { Context } from './CCarousel'
+import { CCarouselContext } from './CCarousel'
 
 export interface CCarouselIndicatorsProps extends HTMLAttributes<HTMLOListElement> {
   /**
@@ -18,7 +18,7 @@ export interface CCarouselIndicatorsProps extends HTMLAttributes<HTMLOListElemen
 
 export const CCarouselIndicators = forwardRef<HTMLOListElement, CCarouselIndicatorsProps>(
   ({ className, indicatorsClass = 'carousel-indicators' }, ref) => {
-    const { itemsNumber, state, setState, animating } = useContext(Context)
+    const { itemsNumber, state, setState, animating } = useContext(CCarouselContext)
 
     const listClasses = classNames(indicatorsClass, className)
 
@@ -30,7 +30,7 @@ export const CCarouselIndicators = forwardRef<HTMLOListElement, CCarouselIndicat
             !animating && key !== state[1] && setState([state[1], key])
           }}
           className={state[1] === key ? 'active' : ''}
-          data-coreui-target=''
+          data-coreui-target=""
         />
       )
     })

src/components/carousel/CCarouselInner.tsx

@@ -2,7 +2,7 @@ import React, { Children, forwardRef, HTMLAttributes, useContext, useEffect } fr
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Context } from './CCarousel'
+import { CCarouselContext } from './CCarousel'
 
 export interface CCarouselInnerProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -13,7 +13,7 @@ export interface CCarouselInnerProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCarouselInner = forwardRef<HTMLDivElement, CCarouselInnerProps>(
   ({ children, className, ...rest }, ref) => {
-    const { setItemsNumber } = useContext(Context)
+    const { setItemsNumber } = useContext(CCarouselContext)
     const _className = classNames('carousel-inner', className)
 
     useEffect(() => {

src/components/carousel/CCarouselItem.tsx

@@ -3,15 +3,19 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CSSTransition } from 'react-transition-group'
 
-import { Context } from './CCarousel'
+import { CCarouselContext } from './CCarousel'
 export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component. [docs]
    */
   className?: string
-  idx: number
+  /**
+   * @ignore
+   */
+  idx?: number
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-types
 const getDirection = (state: object) => {
   if (state[2]) {
     return state[2] === 'next' ? 'right' : 'left'
@@ -22,9 +26,7 @@ const getDirection = (state: object) => {
 
 export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
   ({ children, className, idx, ...rest }, ref) => {
-    const { animate, state, animating, setAnimating } = useContext(
-      Context,
-    )
+    const { animate, state, animating, setAnimating } = useContext(CCarouselContext)
 
     const [isIn, setIsIn] = useState<boolean>(false)
 
@@ -44,12 +46,10 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
       setAnimating(false)
     }
 
-
     useEffect(() => {
       setIsIn(state[1] === idx)
     }, [state])
 
-
     if (!animate || state[0] === null) {
       const itemClasses = classNames('carousel-item', isIn && 'active', className)
       return (
@@ -104,6 +104,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
 CCarouselItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  idx: PropTypes.number,
 }
 
 CCarouselItem.displayName = 'CCarouselItem'