74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
import { createContext, useCallback, useContext, useMemo, useState } from 'react'
|
|
import Modal from 'react-bootstrap/Modal'
|
|
import BackArrow from '../svgs/arrow-left-line.svg'
|
|
|
|
export const ShowModalContext = createContext(() => null)
|
|
|
|
export function ShowModalProvider ({ children }) {
|
|
const [modal, showModal] = useModal()
|
|
const contextValue = showModal
|
|
|
|
return (
|
|
<ShowModalContext.Provider value={contextValue}>
|
|
{children}
|
|
{modal}
|
|
</ShowModalContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useShowModal () {
|
|
return useContext(ShowModalContext)
|
|
}
|
|
|
|
export default function useModal () {
|
|
const [modalContent, setModalContent] = useState(null)
|
|
const [modalOptions, setModalOptions] = useState(null)
|
|
const [modalStack, setModalStack] = useState([])
|
|
|
|
const onBack = useCallback(() => {
|
|
if (modalStack.length === 0) {
|
|
return setModalContent(null)
|
|
}
|
|
const previousModalContent = modalStack[modalStack.length - 1]
|
|
setModalStack(modalStack.slice(0, -1))
|
|
return setModalContent(previousModalContent)
|
|
}, [modalStack, setModalStack])
|
|
|
|
const onClose = useCallback(() => {
|
|
setModalContent(null)
|
|
setModalStack([])
|
|
}, [])
|
|
|
|
const modal = useMemo(() => {
|
|
if (modalContent === null) {
|
|
return null
|
|
}
|
|
return (
|
|
<Modal onHide={modalOptions?.keepOpen ? null : onClose} show={!!modalContent}>
|
|
<div className='d-flex flex-row'>
|
|
{modalStack.length > 0 ? <div className='modal-btn modal-back' onClick={onBack}><BackArrow width={18} height={18} className='fill-white' /></div> : null}
|
|
<div className='modal-btn modal-close' onClick={onClose}>X</div>
|
|
</div>
|
|
<Modal.Body>
|
|
{modalContent}
|
|
</Modal.Body>
|
|
</Modal>
|
|
)
|
|
}, [modalContent, onClose])
|
|
|
|
const showModal = useCallback(
|
|
(getContent, options) => {
|
|
if (modalContent) {
|
|
if (options?.replaceModal) {
|
|
setModalStack(stack => ([]))
|
|
} else setModalStack(stack => ([...stack, modalContent]))
|
|
}
|
|
setModalOptions(options)
|
|
setModalContent(getContent(onClose))
|
|
},
|
|
[modalContent, onClose]
|
|
)
|
|
|
|
return [modal, showModal]
|
|
}
|