-
Notifications
You must be signed in to change notification settings - Fork 0
/
modal.tsx
93 lines (77 loc) · 2.07 KB
/
modal.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
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
'use client';
import { hideModal, showModal } from "@/utils/DOMModal";
import { useEffect, useState } from "react";
export type ModalProps = {
modalId: string,
show?: boolean,
header?: React.ReactNode,
body?: React.ReactNode,
actions?: React.ReactNode,
hasBackdrop?: boolean,
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void,
};
export default function Modal({
modalId,
show: wantToShow,
header,
body,
actions,
hasBackdrop = true,
onSubmit,
}: ModalProps) {
const [show, setShow] = useState(wantToShow ?? false);
useEffect(() => {
if (wantToShow === undefined) {
return;
}
setShow(wantToShow);
}, [wantToShow]);
useEffect(() => {
if (!show) {
hideModal(window, modalId);
return;
}
const timeout = setTimeout(() => {
showModal(window, modalId);
}, 100);
return () => {
clearTimeout(timeout);
}
}, [show, modalId]);
return (
<dialog id={modalId} className="modal modal-bottom sm:modal-middle">
{/* TODO: className deveria estar no forms? */}
<form method="dialog" className="modal-box bg-gray-800 text-white" onSubmit={onSubmit}>
{header}
{body}
{actions}
</form>
{
hasBackdrop && (
<form method="dialog" className="modal-backdrop">
<button>close</button>
</form>
)
}
</dialog>
);
}
Modal.Header = ModalHeader;
Modal.Body = ModalBody;
Modal.Actions = ModalActions;
function ModalHeader() {
return (
<h3 className="font-bold text-lg text-white">Novo item em
<span className="text-green-500"> "TEST" </span>
</h3>
);
}
function ModalBody() {
}
function ModalActions({ children }: { children: React.ReactNode }) {
return (
<div className="modal-action">
{children}
</div>
);
}