stacker.news/components/modal.js

95 lines
2.9 KiB
JavaScript

import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
import Modal from 'react-bootstrap/Modal'
import BackArrow from '../svgs/arrow-left-line.svg'
import { useRouter } from 'next/router'
import ActionDropdown from './action-dropdown'
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([])
modalOptions?.onClose?.()
}, [modalOptions?.onClose])
const router = useRouter()
useEffect(() => {
router.events.on('routeChangeStart', onClose)
return () => router.events.off('routeChangeStart', onClose)
}, [router, onClose])
const modal = useMemo(() => {
if (modalContent === null) {
return null
}
const className = modalOptions?.fullScreen ? 'fullscreen' : ''
return (
<Modal
onHide={modalOptions?.keepOpen ? null : onClose} show={!!modalContent}
className={className}
dialogClassName={className}
contentClassName={className}
>
<div className='d-flex flex-row'>
{modalOptions?.overflow &&
<div className={'modal-btn modal-overflow ' + className}>
<ActionDropdown>
{modalOptions.overflow}
</ActionDropdown>
</div>}
{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 ' + className} onClick={onClose}>X</div>
</div>
<Modal.Body className={className}>
{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]
}