refactor(CModal): move the context outside the component

Author: mrholek

packages/coreui-react/src/components/modal/CModal.tsx

@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   forwardRef,
   HTMLAttributes,
   useEffect,
@@ -14,6 +13,7 @@ import { Transition } from 'react-transition-group'
 import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 import { CModalContent } from './CModalContent'
+import { CModalContext } from './CModalContext'
 import { CModalDialog } from './CModalDialog'
 
 import { useForkedRef } from '../../hooks'
@@ -93,13 +93,6 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   visible?: boolean
 }
 
-interface ModalContextProps {
-  visible?: boolean
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const CModalContext = createContext({} as ModalContextProps)
-
 export const CModal = forwardRef<HTMLDivElement, CModalProps>(
   (
     {
@@ -123,7 +116,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const activeElementRef = useRef<HTMLElement | null>(null)
     const modalRef = useRef<HTMLDivElement>(null)
@@ -184,7 +177,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           () => {
             focus && modalRef.current?.focus()
           },
-          transition ? duration : 0,
+          transition ? duration : 0
         )
       } else {
         document.body.classList.remove('modal-open')
@@ -238,7 +231,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                       fade: transition,
                       show: state === 'entered',
                     },
-                    className,
+                    className
                   )}
                   tabIndex={-1}
                   {...(_visible
@@ -270,7 +263,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         )}
       </>
     )
-  },
+  }
 )
 
 CModal.propTypes = {

packages/coreui-react/src/components/modal/CModalContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CModalContextProps {
+  visible?: boolean
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CModalContext = createContext({} as CModalContextProps)

packages/coreui-react/src/components/modal/CModalHeader.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CCloseButton } from '../close-button/CCloseButton'
-import { CModalContext } from './CModal'
+import { CModalContext } from './CModalContext'
 
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**