lucid-ui/dist/components/DateSelect/DateSelect.d.ts

A UI component library from AppNexus.

import React from 'react';
import { StandardProps } from '../../util/component-types';
import * as reducers from './DateSelect.reducers';
import { ISlidePanelProps } from '../SlidePanel/SlidePanel';
import { ICalendarProps } from '../CalendarMonth/CalendarMonth';
interface IDateSelectCalendarMonthProps extends StandardProps {
    modifiers: any;
    description?: string;
}
export interface IDateSelectProps extends StandardProps {
    /** Number of calendar months to show. Min 1, suggested max 3. Actual max is 6. */
    monthsShown: number;
    /** Number of calendar months rendered at any given time (including those out
            of view).  In practice it should be at least (2 * monthsShown) + 2. It's
            got some issues that still need to be ironed out but it works. */
    calendarsRendered: number;
    /** The offset of the leftmost month in view, where 0 is the
            \`initialMonth\`.  Negative values will show previous months. */
    offset: number;
    /** Sets the start date in a date range. */
    from: Date | null;
    /** Sets the end date in a date range. */
    to: Date | null;
    /** The next selection that is expected. Primarily used to preview expected
            ranges when the cursor is on a target date. */
    selectMode?: 'day' | 'from' | 'to';
    /** Sets first month in view on render. The 0 value for the \`offset\` prop
            refers to this month. */
    initialMonth: Date;
    /** Sets selected days. Passed through to \`CalendarMonth\` ->
            \`react-day-picker\`. */
    selectedDays: (date: Date) => boolean | Date | Date[];
    /** Sets disabled days. Passed through to \`CalendarMonth\` ->
            \`react-day-picker\`.*/
    disabledDays: (date: Date) => boolean | Date | Date[];
    /** Display a divider between each month. */
    showDivider: boolean;
    /** Called when user's swipe would change the month \`offset\`. Callback
            passes number of months swiped by the user (positive for forward swipes,
            negative for backwards swipes). */
    onSwipe: (monthsSwipes: number, { event, props }: {
        event: React.TouchEvent;
        props: ISlidePanelProps;
    }) => void;
    /** Called when user clicks the previous button.   */
    onPrev: ({ event, props, }: {
        event: React.MouseEvent;
        props: IDateSelectProps;
    }) => void;
    /** Called when user clicks the next button */
    onNext: ({ event, props, }: {
        event: React.MouseEvent;
        props: IDateSelectProps;
    }) => void;
    /** Called when user selects a date. Callback passes a Date object as the
            first argument. */
    onSelectDate: (selectedDate: any, { event, props }: {
        event: React.MouseEvent;
        props: IDateSelectProps;
    }) => void;
    /** Render initial font size relative to size of the component so it scales
            with the calendar size. */
    isFontSizeRelative: boolean;
    /** Highlight dates and ranges based on cursor position. */
    showCursorHighlight: boolean;
    /** Render the calendar months in a touch-friendly slider with some being
            rendered out-of-view. Set to \`false\` to disable this feature and gain a
            performance boost. */
    useSlidePanel: boolean;
}
export interface IDateSelectState {
    offset: number;
    cursor: Date | null;
}
declare class DateSelect extends React.Component<IDateSelectProps, IDateSelectState> {
    static displayName: string;
    static CalendarMonth: {
        (_props: IDateSelectCalendarMonthProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
    };
    private initialMonth;
    private rootRef;
    constructor(props: IDateSelectProps);
    static peek: {
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    static propTypes: {
        className: any;
        monthsShown: any;
        calendarsRendered: any;
        offset: any;
        from: any;
        to: any;
        selectMode: any;
        initialMonth: any;
        selectedDays: any;
        disabledDays: any;
        showDivider: any;
        onSwipe: any;
        onPrev: any;
        onNext: any;
        onSelectDate: any;
        isFontSizeRelative: any;
        showCursorHighlight: any;
        useSlidePanel: any;
        CalendarMonth: any;
    };
    static defaultProps: {
        monthsShown: number;
        calendarsRendered: number;
        offset: number;
        from: null;
        to: null;
        initialMonth: Date;
        selectedDays: () => boolean;
        disabledDays: () => boolean;
        showDivider: boolean;
        onSwipe: (...args: any[]) => void;
        onPrev: (...args: any[]) => void;
        onNext: (...args: any[]) => void;
        onSelectDate: (...args: any[]) => void;
        isFontSizeRelative: boolean;
        showCursorHighlight: boolean;
        useSlidePanel: boolean;
    };
    static reducers: typeof reducers;
    handleDayClick: (day: Date, { disabled }: {
        disabled: boolean;
    }, event: React.MouseEvent) => void;
    handleDayMouseEnter: (day: Date, { disabled }: {
        disabled: boolean;
    }) => void;
    handleDayMouseLeave: () => void;
    handlePrev: ({ event }: {
        event: React.MouseEvent;
    }) => void;
    handleNext: ({ event }: {
        event: React.MouseEvent;
    }) => void;
    componentDidMount: () => void;
    renderCalendarMonth: (monthOffset: number, isRangeSameDay: boolean, selectedDays: (date: Date) => boolean | Date[] | Date, { key, initialMonth, cursor, from, to, disabledDays, selectMode, onDayClick, showCursorHighlight, onDayMouseEnter, onDayMouseLeave, ...rest }: ICalendarProps) => JSX.Element;
    render(): JSX.Element;
}
declare const _default: typeof DateSelect & import("../../util/state-management").IHybridComponent<IDateSelectProps, IDateSelectState>;
export default _default;
export { DateSelect as DateSelectDumb };