import { HTMLAttributes, ReactNode } from "react"; import type { ReactDatePickerCustomHeaderProps } from "react-datepicker"; import { BaseInputProps } from "@components/Input/Input.interface"; import { IconButtonProps } from "@components/IconButton/IconButton.interface"; import { ClassName, InputTexts } from "@helpers/types"; export interface DatePickerInput extends InputTexts, Omit { enabledKeys: string[]; inputId: string; inputClassName?: string; onIconClick(): void; maskedValue: string | Date | undefined; isReadOnly?: boolean; } export interface DatePickerHeaderButtonsProps { nextYearButtonProps?: Pick; previousYearButtonProps?: Pick; nextMonthButtonProps?: Pick; previousMonthButtonProps?: Pick; } export type TPopperPlacement = "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"; export interface DatePickerProps extends ClassName, InputTexts, Required, "id">> { placeholder?: string; disabled?: boolean; variant?: TDatePickerVariant; dateFormat?: TDateFormat; selectedDate?: TSelectedDate; cancelText?: string; confirmText?: string; displayActionButtons?: boolean; colorWeekends?: boolean; inputClassName?: string; name?: string; onCancelClick?: () => void; onSelectDate: (date: TSelectedDate) => void; leftSlot?: ReactNode; rightSlot?: ReactNode; customCalendarClassName?: string; calendarContainerClassName?: string; isReadOnly?: boolean; customPopperClassName?: string; popperPlacement?: TPopperPlacement; } export interface DatePickerHeaderProps extends ReactDatePickerCustomHeaderProps, DatePickerHeaderButtonsProps { onHeaderDateClick(): void; onCancelClick?(): void; onConfirmClick?(): void; currentPicker: TDatePickerDataVariant; variant?: TDatePickerVariant; } export interface DatePickerActionButtonProps extends Pick { cancelText: string; confirmText: string; } export interface CustomCalendarContainerProps { className?: string; children: ReactNode; leftSlot?: ReactNode; rightSlot?: ReactNode; customCalendarClassName?: string; calendarContainerClassName?: string; refreshPicker: () => void; } export type TSelectedDate = TDate | TRangeDate; export type TDate = Date | null; export type TRangeDate = [TDate, TDate]; export type TDatePickerDataVariant = "day" | "month" | "year"; export type TDatePickerVariant = "date" | "range" | "month"; export declare enum EDateRange { START = 0, END = 1 } export type TDateFormat = "MM/dd/yyyy" | "dd/MM/yyyy" | "dd.MM.yyyy" | "MM.dd.yyyy" | "MMMM" | "MMMM yyyy";