Close active elems (react-query refactor) (#1926)

* Refactor closeAny and closeAllActiveElements

* Add close lightbox

* Switch to hooks

* Fixes
This commit is contained in:
Paul Frazee 2023-11-16 08:18:59 -08:00 committed by GitHub
parent 0de8d40981
commit a84b2f9f2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 101 additions and 66 deletions

View file

@ -213,10 +213,12 @@ const ModalContext = React.createContext<{
const ModalControlContext = React.createContext<{
openModal: (modal: Modal) => void
closeModal: () => void
closeModal: () => boolean
closeAllModals: () => void
}>({
openModal: () => {},
closeModal: () => {},
closeModal: () => false,
closeAllModals: () => {},
})
/**
@ -226,6 +228,13 @@ export let unstable__openModal: (modal: Modal) => void = () => {
throw new Error(`ModalContext is not initialized`)
}
/**
* @deprecated DO NOT USE THIS unless you have no other choice.
*/
export let unstable__closeModal: () => boolean = () => {
throw new Error(`ModalContext is not initialized`)
}
export function Provider({children}: React.PropsWithChildren<{}>) {
const [isModalActive, setIsModalActive] = React.useState(false)
const [activeModals, setActiveModals] = React.useState<Modal[]>([])
@ -238,17 +247,25 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
[setIsModalActive, setActiveModals],
)
unstable__openModal = openModal
const closeModal = React.useCallback(() => {
let totalActiveModals = 0
let wasActive = isModalActive
setActiveModals(activeModals => {
activeModals = activeModals.slice(0, -1)
totalActiveModals = activeModals.length
return activeModals
})
setIsModalActive(totalActiveModals > 0)
}, [setIsModalActive, setActiveModals])
return wasActive
}, [setIsModalActive, setActiveModals, isModalActive])
const closeAllModals = React.useCallback(() => {
setActiveModals([])
setIsModalActive(false)
}, [setActiveModals, setIsModalActive])
unstable__openModal = openModal
unstable__closeModal = closeModal
const state = React.useMemo(
() => ({
@ -262,8 +279,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
() => ({
openModal,
closeModal,
closeAllModals,
}),
[openModal, closeModal],
[openModal, closeModal, closeAllModals],
)
return (