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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import {
createContext,
createRoot,
createSignal,
getOwner,
type Owner,
type ParentProps,
runWithOwner,
useContext,
type JSX,
} from "solid-js"
import { Dialog as Kobalte } from "@kobalte/core/dialog"
type DialogElement = () => JSX.Element
type Active = {
id: string
node: JSX.Element
dispose: () => void
owner: Owner
onClose?: () => void
}
const Context = createContext<ReturnType<typeof init>>()
function init() {
const [active, setActive] = createSignal<Active | undefined>()
const close = () => {
const current = active()
if (!current) return
current.onClose?.()
current.dispose()
setActive(undefined)
}
const show = (element: DialogElement, owner: Owner, onClose?: () => void) => {
close()
const id = Math.random().toString(36).slice(2)
let dispose: (() => void) | undefined
const node = runWithOwner(owner, () =>
createRoot((d) => {
dispose = d
return (
<Kobalte
modal
open={true}
onOpenChange={(open) => {
if (open) return
close()
}}
>
<Kobalte.Portal>
<Kobalte.Overlay data-component="dialog-overlay" />
{element()}
</Kobalte.Portal>
</Kobalte>
)
}),
)
if (!dispose) return
setActive({ id, node, dispose, owner, onClose })
}
return {
get active() {
return active()
},
close,
show,
}
}
export function DialogProvider(props: ParentProps) {
const ctx = init()
return (
<Context.Provider value={ctx}>
{props.children}
<div data-component="dialog-stack">{ctx.active?.node}</div>
</Context.Provider>
)
}
export function useDialog() {
const ctx = useContext(Context)
const owner = getOwner()
if (!owner) {
throw new Error("useDialog must be used within a DialogProvider")
}
if (!ctx) {
throw new Error("useDialog must be used within a DialogProvider")
}
return {
get active() {
return ctx.active
},
show(element: DialogElement, onClose?: () => void) {
const base = ctx.active?.owner ?? owner
ctx.show(element, base, onClose)
},
close() {
ctx.close()
},
}
}
|
