UNPKG

7.8 kBTypeScriptView Raw
1/// <reference types="react" />
2import PropTypes from 'prop-types';
3import { DateFormats } from './Localization';
4import { RenderDayProp } from './Month';
5import SlideTransitionGroup from './SlideTransitionGroup';
6import { WidgetHTMLProps, WidgetProps, InferFormat } from './shared';
7declare type Direction = 'DOWN' | 'UP' | 'LEFT' | 'RIGHT';
8declare type SlideDirection = 'bottom' | 'top' | 'left' | 'right';
9declare type View = 'month' | 'year' | 'decade' | 'century';
10export interface CalendarProps<TLocalizer = unknown> extends WidgetHTMLProps, WidgetProps {
11 bordered?: boolean;
12 views?: View[];
13 disabled?: boolean;
14 readOnly?: boolean;
15 value?: Date | null;
16 defaultValue?: Date;
17 onChange?: (nextValue: Date) => void;
18 min?: Date;
19 max?: Date;
20 view?: View;
21 defaultView?: View;
22 onViewChange?: (nextView: View) => void;
23 currentDate?: Date;
24 defaultCurrentDate?: Date;
25 onCurrentDateChange?: (nextDate: Date) => void;
26 onNavigate?: (date: Date, slideDirection: SlideDirection, nextView: View) => void;
27 renderDay?: RenderDayProp;
28 formats?: DateFormats<InferFormat<TLocalizer>>;
29 messages?: {
30 moveBack?: string;
31 moveForward?: string;
32 moveToday?: string;
33 };
34}
35/**
36 * @public
37 */
38declare function Calendar({ id, autoFocus, bordered, views, tabIndex, disabled, readOnly, className, value, defaultValue, onChange, currentDate: pCurrentDate, defaultCurrentDate, onCurrentDateChange, min, max, view, defaultView, onViewChange, onKeyDown, onNavigate, renderDay, messages, formats, ...elementProps }: CalendarProps): JSX.Element;
39declare namespace Calendar {
40 var displayName: string;
41 var propTypes: {
42 /**
43 * @example ['disabled', ['new Date()']]
44 */
45 disabled: PropTypes.Requireable<boolean>;
46 /**
47 * @example ['readOnly', ['new Date()']]
48 */
49 readOnly: PropTypes.Requireable<boolean>;
50 /**
51 * @example ['onChangePicker', [ ['new Date()'] ]]
52 */
53 onChange: PropTypes.Requireable<(...args: any[]) => any>;
54 /**
55 * The selected Date.
56 *
57 * ```tsx live
58 * import { Calendar } from 'react-widgets';
59 *
60 * <Calendar value={new Date()} />
61 * ```
62 * @example false
63 */
64 value: PropTypes.Requireable<Date>;
65 /**
66 * The minimum date that the Calendar can navigate from.
67 *
68 * @example ['prop', ['min', 'new Date()']]
69 */
70 min: PropTypes.Requireable<Date>;
71 /**
72 * The maximum date that the Calendar can navigate to.
73 *
74 * @example ['prop', ['max', 'new Date()']]
75 */
76 max: PropTypes.Requireable<Date>;
77 /**
78 * Default current date at which the calendar opens. If none is provided, opens at today's date or the `value` date (if any).
79 */
80 currentDate: PropTypes.Requireable<Date>;
81 /**
82 * Change event Handler that is called when the currentDate is changed. The handler is called with the currentDate object.
83 */
84 onCurrentDateChange: PropTypes.Requireable<(...args: any[]) => any>;
85 /** Specify the navigate into the past header icon */
86 navigatePrevIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
87 /** Specify the navigate into the future header icon */
88 navigateNextIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
89 /**
90 * Controls the currently displayed calendar view. Use `defaultView` to set a unique starting view.
91 *
92 * @type {("month"|"year"|"decade"|"century")}
93 * @controllable onViewChange
94 */
95 view(props: any, ...args: any[]): Error | null;
96 /**
97 * Defines a list of views the Calendar can traverse through, starting with the
98 * first in the list to the last.
99 *
100 * @type array<"month"|"year"|"decade"|"century">
101 */
102 views: PropTypes.Requireable<(View | null | undefined)[]>;
103 /**
104 * A callback fired when the `view` changes.
105 *
106 * @controllable view
107 */
108 onViewChange: PropTypes.Requireable<(...args: any[]) => any>;
109 /**
110 * Callback fired when the Calendar navigates between views, or forward and backwards in time.
111 *
112 * @type function(date: ?Date, direction: string, view: string)
113 */
114 onNavigate: PropTypes.Requireable<(...args: any[]) => any>;
115 culture: PropTypes.Requireable<string>;
116 autoFocus: PropTypes.Requireable<boolean>;
117 /**
118 * Show or hide the Calendar footer.
119 *
120 * @example ['prop', ['footer', true]]
121 */
122 footer: PropTypes.Requireable<boolean>;
123 /**
124 * Provide a custom component to render the days of the month. The Component is provided the following props
125 *
126 * - `date`: a `Date` object for the day of the month to render
127 * - `label`: a formatted `string` of the date to render. To adjust the format of the `label` string use the `dateFormat` prop, listed below.
128 */
129 renderDay: PropTypes.Requireable<(...args: any[]) => any>;
130 formats: PropTypes.Requireable<PropTypes.InferProps<{
131 /**
132 * A formatter for the header button of the month view.
133 *
134 * @example ['dateFormat', ['headerFormat', "{ date: 'medium' }"]]
135 */
136 header: PropTypes.Requireable<any>;
137 /**
138 * A formatter for the Calendar footer, formats today's Date as a string.
139 *
140 * @example ['dateFormat', ['footerFormat', "{ date: 'medium' }", "date => 'Today is: ' + formatter(date)"]]
141 */
142 footer: PropTypes.Requireable<any>;
143 /**
144 * A formatter calendar days of the week, the default formats each day as a Narrow name: "Mo", "Tu", etc.
145 *
146 * @example ['prop', { day: "day => \n['🎉', 'M', 'T','W','Th', 'F', '🎉'][day.getDay()]" }]
147 */
148 day: PropTypes.Requireable<any>;
149 /**
150 * A formatter for day of the month
151 *
152 * @example ['prop', { date: "dt => String(dt.getDate())" }]
153 */
154 date: PropTypes.Requireable<any>;
155 /**
156 * A formatter for month name.
157 *
158 * @example ['dateFormat', ['monthFormat', "{ raw: 'MMMM' }", null, { defaultView: '"year"' }]]
159 */
160 month: PropTypes.Requireable<any>;
161 /**
162 * A formatter for month name.
163 *
164 * @example ['dateFormat', ['yearFormat', "{ raw: 'yy' }", null, { defaultView: '"decade"' }]]
165 */
166 year: PropTypes.Requireable<any>;
167 /**
168 * A formatter for decade, the default formats the first and last year of the decade like: 2000 - 2009.
169 */
170 decade: PropTypes.Requireable<any>;
171 /**
172 * A formatter for century, the default formats the first and last year of the century like: 1900 - 1999.
173 */
174 century: PropTypes.Requireable<any>;
175 }>>;
176 messages: PropTypes.Requireable<PropTypes.InferProps<{
177 moveBack: PropTypes.Requireable<string>;
178 moveForward: PropTypes.Requireable<string>;
179 }>>;
180 onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
181 /** @ignore */
182 tabIndex: PropTypes.Requireable<any>;
183 };
184 var Transition: typeof SlideTransitionGroup;
185 var move: (date: Date, min: Date, max: Date, view: View, direction: Direction) => Date;
186}
187export default Calendar;
188//# sourceMappingURL=Calendar.d.ts.map
\No newline at end of file