src/state/dialogs/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import React from 'react'
import {DialogControlProps} from '#/components/Dialog'
import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'

const DialogContext = React.createContext<{
  activeDialogs: React.MutableRefObject<
    Map<string, React.MutableRefObject<DialogControlProps>>
  >
}>({
  activeDialogs: {
    current: new Map(),
  },
})

const DialogControlContext = React.createContext<{
  closeAllDialogs(): void
}>({
  closeAllDialogs: () => {},
})

export function useDialogStateContext() {
  return React.useContext(DialogContext)
}

export function useDialogStateControlContext() {
  return React.useContext(DialogControlContext)
}

export function Provider({children}: React.PropsWithChildren<{}>) {
  const activeDialogs = React.useRef<
    Map<string, React.MutableRefObject<DialogControlProps>>
  >(new Map())
  const closeAllDialogs = React.useCallback(() => {
    activeDialogs.current.forEach(dialog => dialog.current.close())
  }, [])
  const context = React.useMemo(() => ({activeDialogs}), [])
  const controls = React.useMemo(() => ({closeAllDialogs}), [closeAllDialogs])
  return (
    <DialogContext.Provider value={context}>
      <DialogControlContext.Provider value={controls}>
        <GlobalDialogsProvider>{children}</GlobalDialogsProvider>
      </DialogControlContext.Provider>
    </DialogContext.Provider>
  )
}