midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add canClose state to CalenderGoogle for controlled dialog closing

This commit is contained in:
faisolavolut 2025-02-25 09:12:24 +07:00
parent debd60d0bd
commit 2f46d31080
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/ui/CalenderGoogle.tsx
View File

@ -22,6 +22,7 @@ interface PopupPos {
} }
export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => { export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
const [showDialog, setShowDialog] = useState(false as boolean); const [showDialog, setShowDialog] = useState(false as boolean);
const [canClose, setCanClose] = useState(true as boolean);
const [detailDialog, setDetailDialog] = useState({ const [detailDialog, setDetailDialog] = useState({
title: "Judul", title: "Judul",
start: new Date(), start: new Date(),
@ -76,6 +77,9 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
open={showDialog} open={showDialog}
onOpenChange={(e) => { onOpenChange={(e) => {
setShowDialog(e); setShowDialog(e);
setTimeout(() => {
setCanClose(true);
}, 100);
}} }}
> >
<DialogContent <DialogContent
@ -87,6 +91,9 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
)} )}
onClick={() => { onClick={() => {
setShowDialog(false); setShowDialog(false);
setTimeout(() => {
setCanClose(true);
}, 100);
}} }}
> >
<DialogHeader> <DialogHeader>
@ -214,13 +221,18 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
setDetailDialog(event); setDetailDialog(event);
setShowDialog(true); setShowDialog(true);
setCanClose(true);
// setSelectedEvent(info.event); // setSelectedEvent(info.event);
// setShowEventPopup(true); // setShowEventPopup(true);
}} }}
/> />
{showPopup && ( {showPopup && (
<CenteredPopup <CenteredPopup
onClose={() => setShowPopup(false)} onClose={() => {
if (canClose) {
setShowPopup(false);
}
}}
popupPos={popupPos} popupPos={popupPos}
> >
<div className="flex flex-col gap-y-1"> <div className="flex flex-col gap-y-1">
@ -244,6 +256,7 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
onClick={() => { onClick={() => {
setDetailDialog(evt); setDetailDialog(evt);
setShowDialog(true); setShowDialog(true);
setCanClose(false);
}} }}
> >
{evt?.title} {evt?.title}
@ -307,7 +320,6 @@ const CenteredPopup: React.FC<CenteredPopupProps> = ({
// Jika bagian bawah popup melebihi tinggi viewport, geser ke atas // Jika bagian bawah popup melebihi tinggi viewport, geser ke atas
if (newY + rect.height > window.innerHeight) { if (newY + rect.height > window.innerHeight) {
newY = window.innerHeight - rect.height - 10; // beri margin 10px newY = window.innerHeight - rect.height - 10; // beri margin 10px
console.log("CEKKK");
setClassname(css` setClassname(css`
bottom: 0; bottom: 0;
left: ${popupPos.x}px; left: ${popupPos.x}px;