import { DateRange, DayPickerProps } from 'react-day-picker'; import { PopoverProps, SideDrawerProps, TextInputProps } from '../ComponentTypes.models'; export type CommonProps = { /** Optionally restrict the selection of dates */ dateRestrictions?: { beforeDate?: Date; afterDate?: Date; }; /** Optional ID for QA to identify this component */ qaTestId?: string; /** Optionally show a clear button */ clear?: boolean; /** Optionally show a reset button to restore initial date selection */ reset?: boolean; /** Optionally add a layer position to the drawer to allow layered drawers. The number here will * be the position in the stack of SideDrawer layers if there are multiple SideDrawers that * need to be displayed. NOTE: Omit this prop if there is only 1 SideDrawer layer. This is * important for styling. */ layerPosition?: SideDrawerProps['layerPosition']; /** Optionally set the position of the date picker */ position?: PopoverProps['position']; }; export type CalendarProps = DayPickerProps & CommonProps & { /** The range of years to display in the year selector */ yearRange?: number; /** Determines if the year switcher should be shown */ showYearSwitcher?: boolean; /** Stores the currently selected date / dateRange */ selected?: Date | DateRange; }; export type BaseDatePickerProps = CommonProps & { /** To show selected date in the button or not */ showDateValue?: boolean; /** Callback for when a date is clicked */ onDateChange: (date: Date | DateRange | undefined) => void; /** If DatePicker is exposed or not */ isExposed?: boolean; /** Optional description to display below the input */ labelTooltip?: TextInputProps['labelTooltip']; /** Optional error to display below the input */ error?: { text: string; showError: boolean; }; } & Pick; export type RangeDatePickerProps = BaseDatePickerProps & { /** Type of DatePicker */ type: 'range'; /** Preset buttons for quick selection of date range */ actionButtons?: { /** Enables the use of the Last 7 Days button */ last7Days?: boolean; /** Enables the use of the Next 7 Days button */ next7Days?: boolean; /** Enables the use of the This Week (To Date) button */ thisWeekToDate?: boolean; /** Enables the use of the This Week button */ thisWeek?: boolean; /** Enables the use of the Last Week button */ lastWeek?: boolean; /** Enables the use of the Next Week button */ nextWeek?: boolean; /** Enables the use of the Last Month button */ lastMonth?: boolean; /** Enables the use of the This Month button */ thisMonth?: boolean; /** Enables the use of the This Month (To Date) button */ thisMonthToDate?: boolean; /** Enables the use of the Next Month button */ nextMonth?: boolean; /** Enables the use of the This Quarter button */ thisQuarter?: boolean; /** Enables the use of the This Quarter (To Date) button */ thisQuarterToDate?: boolean; /** Enables the use of the Last Quarter button */ lastQuarter?: boolean; /** Enables the use of the Next Quarter button */ nextQuarter?: boolean; /** Enables the use of the This Year button */ thisYear?: boolean; /** Enables the use of the This Year (To Date) button */ thisYearToDate?: boolean; /** Enables the use of the Last Year button */ lastYear?: boolean; /** Enables the use of the Next Year button */ nextYear?: boolean; today?: never; yesterday?: never; tomorrow?: never; }; /** Stores the selected date range */ selectedDateRange?: DateRange; selectedDate?: never; disableAutoClose?: never; }; export type SingleDatePickerProps = BaseDatePickerProps & { /** Type of DatePicker */ type: 'single'; actionButtons?: { last7Days?: never; next7Days?: never; thisWeekToDate?: never; thisWeek?: never; lastWeek?: never; nextWeek?: never; lastMonth?: never; thisMonth?: never; thisMonthToDate?: never; nextMonth?: never; thisQuarter?: never; thisQuarterToDate?: never; lastQuarter?: never; nextQuarter?: never; thisYear?: never; thisYearToDate?: never; lastYear?: never; nextYear?: never; /** Enables the use of the Today button */ today?: boolean; /** Enables the use of the Yesterday button */ yesterday?: boolean; /** Enables the use of the Tomorrow button */ tomorrow?: boolean; }; selectedDateRange?: never; /** Stores the selected date */ selectedDate?: Date; /** Optionally turn off auto closing of popover when the date is selected */ disableAutoClose?: boolean; }; export type DatePickerProps = RangeDatePickerProps | SingleDatePickerProps; export type ActionButtonHandlers = { selectToday?: () => void; selectYesterday?: () => void; selectTomorrow?: () => void; selectLast7Days?: () => void; selectNext7Days?: () => void; selectThisWeekToDate?: () => void; selectThisWeek?: () => void; selectLastWeek?: () => void; selectNextWeek?: () => void; selectThisMonth?: () => void; selectLastMonth?: () => void; selectThisMonthToDate?: () => void; selectNextMonth?: () => void; selectThisQuarter?: () => void; selectThisQuarterToDate?: () => void; selectLastQuarter?: () => void; selectNextQuarter?: () => void; selectThisYear?: () => void; selectThisYearToDate?: () => void; selectLastYear?: () => void; selectNextYear?: () => void; };