import React, { useRef, useState } from "react"; import { Combobox } from "@headlessui/react"; import DatePicker from "react-datepicker"; import { usePopper } from "react-popper"; import { CalendarDays, X } from "lucide-react"; // hooks import { useDropdownKeyDown } from "hooks/use-dropdown-key-down"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; // components import { DropdownButton } from "./buttons"; // helpers import { renderFormattedDate } from "helpers/date-time.helper"; import { cn } from "helpers/common.helper"; // types import { TDropdownProps } from "./types"; // constants import { BUTTON_VARIANTS_WITH_TEXT } from "./constants"; type Props = TDropdownProps & { clearIconClassName?: string; icon?: React.ReactNode; isClearable?: boolean; minDate?: Date; maxDate?: Date; onChange: (val: Date | null) => void; value: Date | string | null; closeOnSelect?: boolean; }; export const DateDropdown: React.FC = (props) => { const { buttonClassName = "", buttonContainerClassName, buttonVariant, className = "", clearIconClassName = "", closeOnSelect = true, disabled = false, hideIcon = false, icon = , isClearable = true, minDate, maxDate, onChange, placeholder = "Date", placement, showTooltip = false, tabIndex, value, } = props; const [isOpen, setIsOpen] = useState(false); // refs const dropdownRef = useRef(null); // popper-js refs const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState(null); // popper-js init const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: placement ?? "bottom-start", modifiers: [ { name: "preventOverflow", options: { padding: 12, }, }, ], }); const isDateSelected = value && value.toString().trim() !== ""; const onOpen = () => { if (referenceElement) referenceElement.focus(); }; const handleClose = () => { if (isOpen) setIsOpen(false); if (referenceElement) referenceElement.blur(); }; const toggleDropdown = () => { if (!isOpen) onOpen(); setIsOpen((prevIsOpen) => !prevIsOpen); }; const dropdownOnChange = (val: Date | null) => { onChange(val); if (closeOnSelect) handleClose(); }; const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose); const handleOnClick = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); toggleDropdown(); }; useOutsideClickDetector(dropdownRef, handleClose); return ( {isOpen && (
)}
); };