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

A UI component library from Xandr.

import PropTypes from 'prop-types';
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';
/** Date Select Calendar Month */
export interface IDateSelectCalendarMonthProps extends StandardProps {
    modifiers: any;
    description?: string;
}
/** Date Select */
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: {
        /**
            Appended to the component-specific class names set on the root element.
        */
        className: PropTypes.Requireable<string>;
        /**
            Number of calendar months to show. Min 1, suggested max 3. Actual max is 6.
        */
        monthsShown: PropTypes.Requireable<number>;
        calendarsRendered: PropTypes.Requireable<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.
        */
        /**
            The offset of the leftmost month in view, where 0 is the
            \`initialMonth\`.  Negative values will show previous months.
        */
        offset: PropTypes.Requireable<number>;
        /**
            Sets the start date in a date range.
        */
        from: PropTypes.Requireable<Date>;
        /**
            Sets the end date in a date range.
        */
        to: PropTypes.Requireable<Date>;
        /**
            The next selection that is expected. Primarily used to preview expected
            ranges when the cursor is on a target date.
        */
        selectMode: PropTypes.Requireable<string>;
        /**
            Sets first month in view on render. The 0 value for the \`offset\` prop
            refers to this month.
        */
        initialMonth: PropTypes.Requireable<Date>;
        /**
            Sets selected days. Passed through to \`CalendarMonth\` ->
            \`react-day-picker\`. Can be a \`Date\`, array of \`Date\`s or a function
            with the signature \`(date) => Boolean\`.
        */
        selectedDays: PropTypes.Requireable<any>;
        /**
            Sets disabled days. Passed through to \`CalendarMonth\` ->
            \`react-day-picker\`. Can be a \`Date\`, array of \`Date\`s or a function
            with the signature \`(date) => Boolean\`.
        */
        disabledDays: PropTypes.Requireable<any>;
        /**
            Display a divider between each month.
        */
        showDivider: PropTypes.Requireable<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).  Signature:
            \`(monthsSwiped, { event, props }) => {}\`
        */
        onSwipe: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when user clicks the previous button.  Signature:
            \`({ event, props }) => {}\`
        */
        onPrev: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when user clicks the next button.  Signature:
            \`({ event, props }) => {}\`
        */
        onNext: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when user selects a date. Callback passes a Date object as the
            first argument.  Signature: \`(selectedDate, { event, props }) => {}\`
        */
        onSelectDate: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Render initial font size relative to size of the component so it scales
            with the calendar size.
        */
        isFontSizeRelative: PropTypes.Requireable<boolean>;
        /**
            Highlight dates and ranges based on cursor position.
        */
        showCursorHighlight: PropTypes.Requireable<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: PropTypes.Requireable<boolean>;
        /**
            Child component to pass thru props to underlying CalendarMonth.
        */
        CalendarMonth: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    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 };
//# sourceMappingURL=DateSelect.d.ts.map