@fluentui/react-northstar
Version:
A themable React component library.
72 lines (71 loc) • 3.86 kB
TypeScript
import { Accessibility, DatepickerCalendarBehaviorProps } from '@fluentui/accessibility';
import { IDay, ICalendarStrings, IDayGridOptions } from '../../utils/date-time-utilities';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ComponentEventHandler, FluentComponentStaticProps, ShorthandValue } from '../../types';
import { UIComponentProps } from '../../utils';
import { DatepickerCalendarGridProps } from './DatepickerCalendarGrid';
import { DatepickerCalendarGridRowProps } from './DatepickerCalendarGridRow';
import { DatepickerCalendarHeaderProps } from './DatepickerCalendarHeader';
import { DatepickerCalendarCellProps } from './DatepickerCalendarCell';
import { DatepickerCalendarCellButtonProps } from './DatepickerCalendarCellButton';
import { DatepickerCalendarHeaderCellProps } from './DatepickerCalendarHeaderCell';
export interface DatepickerCalendarProps extends UIComponentProps, Partial<ICalendarStrings>, Partial<IDayGridOptions> {
/** Calendar can have header. */
header?: ShorthandValue<DatepickerCalendarHeaderProps>;
/** A render function to customize how cells are rendered in the Calendar. */
calendarCell?: ShorthandValue<DatepickerCalendarCellProps>;
/** A render function to customize how cell's buttons are rendered in the Calendar. */
calendarCellButton?: ShorthandValue<DatepickerCalendarCellButtonProps>;
/** A render function to customize how header cells are rendered in the Calendar. */
calendarHeaderCell?: ShorthandValue<DatepickerCalendarHeaderCellProps>;
/** A render function to customize how the calendar grid is rendered. */
calendarGrid?: ShorthandValue<DatepickerCalendarGridProps>;
/** A render function to customize how the calendar grid row is rendered. */
calendarGridRow?: ShorthandValue<DatepickerCalendarGridRowProps>;
/**
* The currently selected date range, currently only supports week.
*/
selectedDateRange?: Date[];
/**
* The currently selected date.
*/
selectedDate?: Date;
/**
* The currently navigated date.
*/
navigatedDate?: Date;
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<DatepickerCalendarBehaviorProps>;
/**
* Called on change of the date.
*
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onDateChange?: ComponentEventHandler<DatepickerCalendarProps & {
value: IDay;
}>;
}
export declare type DatepickerCalendarStylesProps = never;
export declare const datepickerCalendarClassName = "ui-datepicker__calendar";
/**
* A DatepickerCalendar is used to display dates in sematically grouped way.
*/
export declare const DatepickerCalendar: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof DatepickerCalendarProps> & {
as?: TExtendedElementType;
} & DatepickerCalendarProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<DatepickerCalendarProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<DatepickerCalendarProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof DatepickerCalendarProps> & {
as?: "div";
} & DatepickerCalendarProps;
} & FluentComponentStaticProps<DatepickerCalendarProps>;