react-box-tools/dist/calendar.d.ts

Box tools react components, utils and hooks

import { Context } from 'react';
import { CSSProperties } from 'react';
import { JSX } from 'react/jsx-runtime';
import { JSX as JSX_2 } from 'react';
import { ReactNode } from 'react';

export declare const Calendar: CalendarObject;

export declare const CalendarContext: Context<CalendarContextProps>;

export declare type CalendarContextProps = DataCalendar & {
    monthsToShow?: MonthKey;
    refilldays?: boolean;
    todayText?: CalendarMonthToday;
};

export declare type CalendarControlsProps = {
    monthDropDown: DropdownBase;
    yearDropDown: DropdownBase;
    icons?: DatePickerIcons;
};

declare type CalendarEvent = {
    onSelect: (day: Day) => void;
    onRangeStart: (day: Day) => void;
    onRangeHover: (day: Day) => void;
    onRangeEnd: (day: Day) => void;
};

export declare type CalendarLoad = {
    date?: Date;
    dateRange?: DateRange;
};

export declare type CalendarMonthToday = {
    show?: boolean;
    format?: DateFormat;
};

export declare type CalendarObject = {
    ({}: CalendarProps): JSX_2.Element;
    Months: () => JSX_2.Element;
    Controls: ({}: CalendarControlsProps) => JSX_2.Element;
};

export declare type CalendarProps = {
    culture?: string;
    monthsToShow?: MonthKey;
    range?: boolean;
    refilldays?: boolean;
    format?: DateFormat;
    onSelected: (date: Date) => void;
    onSelectedRange: ({}: DateRange) => void;
    onLoad: ({}: CalendarLoad) => void;
    children: ReactNode;
    todayText?: CalendarMonthToday;
    minDate?: Date;
    maxDate?: Date;
    value?: Date | DateRange;
};

export declare const CalendarProvider: (props: CalendarProps) => JSX.Element;

export declare type DataCalendar = {
    culture: string;
    date: {
        today: number;
        instance: globalThis.Date;
        month: Month;
        year: number;
        surroundingYear: number;
        manyYears: boolean;
    };
    monthList: Month[][];
    monthRows: Day[][][][];
    daysOfWeek: string[];
    prevMonth: () => void;
    nextMonth: () => void;
    selectMonth: (month: Month) => void;
    goToMonth: (key: number) => void;
    setYear: React.Dispatch<React.SetStateAction<number>>;
    goToYear: (year: number) => void;
    yearList: Year[][];
    setSurroundingYear: React.Dispatch<React.SetStateAction<number>>;
    isRefillDay: (day: Day) => boolean;
    getClassDay: (day: Day) => string;
    event: CalendarEvent;
};

declare type DateFormat = 'ddd, dd mmm yyyy' | 'dd/mm/yyyy' | 'mm/dd/yyyy' | 'yyyy-mm-dd' | 'dd mmm, yyyy';

declare type DatePickerIcons = {
    calendar?: ReactNode;
    prev?: ReactNode;
    next?: ReactNode;
};

export declare type DateRange = {
    from: Date;
    to: Date;
};

export declare type Day = {
    key: number;
    month: number;
    year: number;
    type: 'prev' | 'next' | 'month' | '';
};

declare interface DropdownBase {
    arrow?: boolean;
    show?: boolean;
    style?: CSSProperties;
    className?: string;
    contentClass?: string;
    direction?: DropdownDirection;
    width?: DropdownWidth;
    mode?: DropdownMode;
    offset?: number;
    onFirstOpen?: () => void;
    onOpen?: () => void;
    onClose?: () => void;
    intersect?: boolean;
}

declare type DropdownDirection = 'down' | 'down-left' | 'down-right' | 'left' | 'left-top' | 'left-bottom' | 'up' | 'up-left' | 'up-right' | 'right' | 'right-top' | 'right-bottom';

declare type DropdownMode = 'hover' | 'click' | 'toggle';

declare type DropdownWidth = 'full' | 'auto' | 'target';

export declare type Month = {
    key: number;
    name: string;
    year: number;
    type?: 'dsbl' | '';
};

export declare type MonthKey = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

export declare const MonthOfYear: (props: MonthOfYearProps) => JSX.Element;

export declare type MonthOfYearProps = {
    month: Day[][];
};

export declare type SelectedCalendar = {
    day?: Day;
    from?: Date;
    to?: Date;
    range?: boolean;
};

export declare const useCalendar: (props: UseCalendarProps) => DataCalendar;

export declare type UseCalendarProps = {
    onSelected?: (date: Date) => void;
    onSelectedRange?: ({}: DateRange) => void;
    onLoad: ({}: CalendarLoad) => void;
    culture?: string;
    monthsToShow?: MonthKey;
    range?: boolean;
    minDate?: Date;
    maxDate?: Date;
    value?: Date | DateRange;
};

export declare type Year = {
    key: number;
    type?: 'dsbl' | '';
};

export { }