66 lines
1.9 KiB
TypeScript
Executable File
66 lines
1.9 KiB
TypeScript
Executable File
"use client"
|
|
import * as React from "react"
|
|
import { Calendar } from "~/components/ui/BillTrackerCalendar"
|
|
import CreateBillForm from "~/components/billtracker/CreateBillForm"
|
|
|
|
export default function BillTrackerCalendar() {
|
|
const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(undefined)
|
|
const [isOpen, setIsOpen] = React.useState(false)
|
|
const calendarRef = React.useRef<HTMLDivElement>(null)
|
|
const popoverRef = React.useRef<HTMLDivElement>(null)
|
|
|
|
const handleSelect = (date: Date | undefined) => {
|
|
if (date) {
|
|
if (selectedDate && date.getTime() === selectedDate.getTime())
|
|
setIsOpen(!isOpen)
|
|
else {
|
|
setSelectedDate(date)
|
|
setIsOpen(true)
|
|
}
|
|
} else
|
|
setIsOpen(false)
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (
|
|
calendarRef.current &&
|
|
popoverRef.current &&
|
|
!calendarRef.current.contains(event.target as Node) &&
|
|
!popoverRef.current.contains(event.target as Node)
|
|
) {
|
|
//setIsOpen(false)
|
|
console.log('Calendar closed');
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handleClickOutside)
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="m-auto p-2 relative mt-10" ref={calendarRef}>
|
|
<Calendar
|
|
mode="single"
|
|
selected={selectedDate}
|
|
onSelect={handleSelect}
|
|
className="rounded-md border m-auto"
|
|
/>
|
|
{isOpen && selectedDate && (
|
|
<div
|
|
ref={popoverRef}
|
|
className="absolute top-full left-1/2 transform -translate-x-1/2
|
|
border rounded-lg shadow-lg px-4 pb-4 w-80"
|
|
>
|
|
<div className="grid gap-4">
|
|
<div className="space-y-2">
|
|
< CreateBillForm date={selectedDate} setIsOpen={setIsOpen} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|