import * as React from 'react'; import { CustomRender, Values } from '../../commonTypes'; import { AllActions } from '../DateTimeInput/types'; import { CALENDAR_CLICK_ACTION, VIEW_TYPES } from './constants'; import { defaultTheme } from './theme'; import { DivProps } from '../../components/Div'; export declare type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string]; export declare type WeekDayNames = [string, string, string, string, string, string, string]; export interface CalendarClickHandler { (type: Values, ev: React.MouseEvent, payload?: { dateCell?: number; monthCell?: number; yearCell?: number; }): void; } export interface CalendarBaseProps { /** Ссылка на контейнер, относительно которого нужно позиционировать календарь */ boundingContainerRef?: React.RefObject; /** Кастомный заголовок календаря */ calendarHeaderRender?: CustomRender; /** Кастомный рендер враппера календаря */ calendarWrapperRender?: CustomRender; /** Кастомная ячейка с датой */ dateCellRender?: CustomRender; /** Кастомный вид выбора даты */ dateViewRender?: CustomRender; /** Dates that are disabled to be selected. Array of dates or dates ranges. */ disabledDates?: (Date | [Date, Date])[]; /** Кнопка "Сегодня" под календарем */ hasTodayButton?: boolean; /** List of dates or date ranges with mark */ markedDates?: (Date | [Date, Date])[]; /** Массив кастомных названий месяцев */ monthNames?: MonthsNames; /** Кастомный вид выбора месяца */ monthViewRender?: CustomRender; /** Массив сокращенных кастомных названий месяцев */ shortMonthNames?: MonthsNames; /** Массив сокращенных кастомных названий дней недели */ shortWeekDayNames?: WeekDayNames; /** Массив кастомных названий дней недели */ weekDayNames?: WeekDayNames; /** Кастомизация списка дней недели (строка "Пн Вт Ср Чт Пт Сб Вс") */ weeksRowRender?: CustomRender; /** Кастомный вид выбора года */ yearViewRender?: CustomRender; } export interface CalendarProps extends CalendarBaseProps { /** Изменение состояния календаря */ dispatch: React.Dispatch; /** Формат выводимого значения */ format: string; /** Выключенное состояние */ isDisabled?: boolean; /** Открытый календарь */ isOpen?: boolean; /** Максимально доступная дата для выбора */ max?: Date; /** Минимальнo доступная дата для выбора */ min?: Date; /** Обработчик события клика по календарю */ onClick: CalendarClickHandler; /** Обработчик нажатия на кнопку мыши */ onMouseDown: React.MouseEventHandler; /** Тема */ theme: typeof defaultTheme; /** Выбранное значение календаря */ value: Date | null; /** Текущая дата календаря */ viewDate: Date; /** Вид календаря (дни, месяцы, годы) */ viewType: Values; } export interface DateCellProps { children?: React.ReactNode; date: number; dateCellRender?: CustomRender; dates: number[][]; /** Dates that are disabled to be selected. Array of dates or dates ranges. */ disabledDates?: (Date | [Date, Date])[]; index: number; /** List of dates or date ranges with mark */ markedDates?: (Date | [Date, Date])[]; max?: Date; min?: Date; onClick: CalendarClickHandler; theme: typeof defaultTheme; value: Date | null; viewDate: Date; viewType: Values; weekIndex: number; } export interface CalendarHeaderProps { children?: React.ReactNode; conditions: CalendarConditions; monthNames?: MonthsNames; onClick: CalendarClickHandler; theme: CalendarProps['theme']; viewDate: CalendarProps['viewDate']; viewType: CalendarProps['viewType']; } export interface DateViewProps { children?: React.ReactNode; dateCellRender?: CustomRender; /** Dates that are disabled to be selected. Array of dates or dates ranges. */ disabledDates?: (Date | [Date, Date])[]; /** List of dates or date ranges with mark */ markedDates?: (Date | [Date, Date])[]; max?: Date; min?: Date; onClick: CalendarClickHandler; shortWeekDayNames?: WeekDayNames; theme: typeof defaultTheme; value: Date | null; viewDate: Date; viewType: Values; weekDayNames?: WeekDayNames; weeksRowRender?: CustomRender; } export interface MonthViewProps { children?: React.ReactNode; max?: Date; min?: Date; monthNames?: MonthsNames; onClick: CalendarClickHandler; shortMonthNames?: MonthsNames; theme: typeof defaultTheme; viewDate: Date; viewType: Values; } export interface YearViewProps { children?: React.ReactNode; format: string; max?: Date; min?: Date; onClick: CalendarClickHandler; theme: typeof defaultTheme; value?: Date; viewDate: Date; viewType: Values; } export interface DateCellItemProps extends DivProps { children?: React.ReactNode; className?: string; key?: string; onClick?: React.MouseEventHandler; title?: string; } export interface WeekRowProps extends DivProps { className?: string; } export interface CalendarConditionProps { max?: Date; min?: Date; value: Date | null; viewDate: Date; viewType: Values; } export interface CalendarConditions { isDateOutOfMaxDecadeRange: boolean; isDateOutOfMaxMonthRange: boolean; isDateOutOfMaxYearRange: boolean; isDateOutOfMinDecadeRange: boolean; isDateOutOfMinMonthRange: boolean; isDateOutOfMinYearRange: boolean; isNextButtonDisabled: boolean; isOneMonthInRange: boolean; isOneYearInRange: boolean; isPrevButtonDisabled: boolean; isTitleDisabled: boolean; isValueInRange: boolean; } export interface TodayButtonProps { onClick?: (ev: React.MouseEvent) => void; theme: typeof defaultTheme; } export interface DateCellConditions { firstDayOfMonth: number; isDateDisabled: boolean; isDateMarked: boolean; isDateOfNextMonth: boolean; isDateOfPrevMonth: boolean; isDateOutOfMaxMonthRange: boolean; isDateOutOfMinMonthRange: boolean; lastDayOfMonth: number; renderedDate: Date; renderedNextMonth: string | null; renderedPrevMonth: string | null; } export interface CustomElements { CalendarHeader: React.FC; CalendarWrapper: React.FC; DateView: React.FC; MonthView: React.FC; YearView: React.FC; }