@super-calendar/native 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/DefaultMonthEvent-86XCNCge.d.ts +326 -0
- package/dist/DefaultMonthEvent-CpRoOloh.d.mts +326 -0
- package/dist/MonthList-BCfN-UGz.js +1089 -0
- package/dist/MonthList-CyrEJ_U6.mjs +1030 -0
- package/dist/index.d.mts +386 -0
- package/dist/index.d.ts +386 -0
- package/dist/index.js +1700 -0
- package/dist/index.mjs +1543 -0
- package/dist/picker.d.mts +3 -0
- package/dist/picker.d.ts +3 -0
- package/dist/picker.js +96 -0
- package/dist/picker.mjs +3 -0
- package/package.json +92 -0
- package/src/components/Agenda.tsx +133 -0
- package/src/components/AllDayLane.tsx +98 -0
- package/src/components/Calendar.tsx +456 -0
- package/src/components/DefaultEvent.tsx +223 -0
- package/src/components/DefaultMonthEvent.tsx +105 -0
- package/src/components/MonthList.tsx +570 -0
- package/src/components/MonthPager.tsx +377 -0
- package/src/components/MonthView.tsx +518 -0
- package/src/components/TimeGrid.tsx +1943 -0
- package/src/index.tsx +70 -0
- package/src/picker.tsx +55 -0
- package/src/theme.ts +86 -0
- package/src/types.ts +62 -0
- package/src/utils/useWebGridZoom.ts +59 -0
- package/src/utils/useWebPagerKeys.ts +56 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Afonso Jorge Ramos
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
import { Locale } from "date-fns";
|
|
2
|
+
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
+
import { SharedValue } from "react-native-reanimated";
|
|
4
|
+
import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn } from "@super-calendar/core";
|
|
5
|
+
import { ComponentType } from "react";
|
|
6
|
+
|
|
7
|
+
//#region src/theme.d.ts
|
|
8
|
+
/**
|
|
9
|
+
* The full set of colours, text styles and metrics the calendar paints with.
|
|
10
|
+
* Supply a `Partial<CalendarTheme>` to `<Calendar theme={...} />`; missing keys
|
|
11
|
+
* fall back to {@link defaultTheme}, so you only override what you care about.
|
|
12
|
+
*/
|
|
13
|
+
interface CalendarTheme {
|
|
14
|
+
/** The shared colour palette (sourced from `@super-calendar/core`). */
|
|
15
|
+
colors: CalendarColors;
|
|
16
|
+
text: {
|
|
17
|
+
/** Large day number in the week/day header. */dayNumber: TextStyle; /** Short weekday label ("Mon") in headers. */
|
|
18
|
+
weekday: TextStyle; /** Date number inside a month cell. */
|
|
19
|
+
dateCell: TextStyle; /** Hour labels down the left of the time grid. */
|
|
20
|
+
hourLabel: TextStyle; /** The "+N more" overflow label in month cells. */
|
|
21
|
+
more: TextStyle; /** Title inside the built-in default event box. */
|
|
22
|
+
eventTitle: TextStyle;
|
|
23
|
+
};
|
|
24
|
+
/** Corner radius of the today badge. Use a large value for a circle. */
|
|
25
|
+
todayBadgeRadius: number;
|
|
26
|
+
/**
|
|
27
|
+
* Height of the range selection band (the centered rounded "pill"); its corner
|
|
28
|
+
* radius is half this. Ignored when `fillCellOnSelection` fills the whole cell.
|
|
29
|
+
*/
|
|
30
|
+
rangeBandHeight: number;
|
|
31
|
+
}
|
|
32
|
+
declare const defaultTheme: CalendarTheme;
|
|
33
|
+
/**
|
|
34
|
+
* A ready-made dark palette. Pass it straight to `<Calendar theme={darkTheme} />`,
|
|
35
|
+
* or switch on the system scheme with React Native's `useColorScheme()`. Shares
|
|
36
|
+
* {@link defaultTheme}'s typography and metrics; only the colours change.
|
|
37
|
+
*/
|
|
38
|
+
declare const darkTheme: CalendarTheme;
|
|
39
|
+
/** Deep-merge a partial theme over {@link defaultTheme}. */
|
|
40
|
+
declare function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme;
|
|
41
|
+
type PartialCalendarTheme = {
|
|
42
|
+
colors?: Partial<CalendarTheme["colors"]>;
|
|
43
|
+
text?: Partial<CalendarTheme["text"]>;
|
|
44
|
+
todayBadgeRadius?: number;
|
|
45
|
+
rangeBandHeight?: number;
|
|
46
|
+
};
|
|
47
|
+
declare const CalendarThemeProvider: import("react").Provider<CalendarTheme>;
|
|
48
|
+
declare const useCalendarTheme: () => CalendarTheme;
|
|
49
|
+
//#endregion
|
|
50
|
+
//#region src/types.d.ts
|
|
51
|
+
type RenderEventArgs<T = unknown> = {
|
|
52
|
+
event: CalendarEvent<T>;
|
|
53
|
+
mode: CalendarMode;
|
|
54
|
+
/**
|
|
55
|
+
* Live pixel height of the event box on the week/day grid, driven on the UI
|
|
56
|
+
* thread by pinch-to-zoom. Use it to reveal detail progressively as the box
|
|
57
|
+
* grows. `undefined` in month mode, where events render at a fixed size.
|
|
58
|
+
*/
|
|
59
|
+
boxHeight?: SharedValue<number>;
|
|
60
|
+
/**
|
|
61
|
+
* On the week/day grid, true when this is a clipped segment of a multi-day
|
|
62
|
+
* event that started on an earlier day / continues onto a later day. Lets a
|
|
63
|
+
* renderer draw "continues" affordances. `undefined` in month mode.
|
|
64
|
+
*/
|
|
65
|
+
continuesBefore?: boolean;
|
|
66
|
+
continuesAfter?: boolean; /** True when this event is rendered in the all-day lane (week/day) or is an all-day event in month view. */
|
|
67
|
+
isAllDay?: boolean; /** Format the built-in renderer's time range in 12-hour AM/PM. Default false (24h). */
|
|
68
|
+
ampm?: boolean; /** Show the time range in the built-in renderer (day/week/schedule). Default true. */
|
|
69
|
+
showTime?: boolean; /** Add a trailing ellipsis (…) when a clipped title overflows in the built-in renderer; otherwise the text is hard-clipped. Default false. */
|
|
70
|
+
ellipsizeTitle?: boolean; /** Label shown for an all-day event in the schedule (and its screen-reader text). Default "All day". */
|
|
71
|
+
allDayLabel?: string; /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
|
|
72
|
+
cellStyle?: StyleProp<ViewStyle>;
|
|
73
|
+
onPress: () => void; /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
|
|
74
|
+
onLongPress?: () => void;
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* A component that renders a single event. It is rendered as a real component
|
|
78
|
+
* (not called as a function), so it may safely use hooks — including Reanimated
|
|
79
|
+
* hooks driven by `boxHeight`. Render an element that fills its container
|
|
80
|
+
* (`flex: 1`); the calendar positions and sizes the wrapping box for you.
|
|
81
|
+
*/
|
|
82
|
+
type RenderEvent<T = unknown> = ComponentType<RenderEventArgs<T>>;
|
|
83
|
+
//#endregion
|
|
84
|
+
//#region src/components/MonthView.d.ts
|
|
85
|
+
type MonthViewProps<T> = {
|
|
86
|
+
date: Date;
|
|
87
|
+
events: CalendarEvent$1<T>[];
|
|
88
|
+
/**
|
|
89
|
+
* Max event chips per day cell. Omit to auto-fit as many as the cell height
|
|
90
|
+
* allows (the default); set a number for a fixed cap. Extra events collapse
|
|
91
|
+
* into a "+N more" label. Auto-fit assumes the built-in chip size — pass an
|
|
92
|
+
* explicit value when using a custom `renderEvent`.
|
|
93
|
+
*/
|
|
94
|
+
maxVisibleEventCount?: number;
|
|
95
|
+
weekStartsOn: WeekStartsOn;
|
|
96
|
+
locale?: Locale; /** Sort each day's events by start time before slicing. Default true. */
|
|
97
|
+
sortedMonthView?: boolean; /** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
|
|
98
|
+
moreLabel?: string; /** Show dimmed days from adjacent months in the grid. Default true. */
|
|
99
|
+
showAdjacentMonths?: boolean; /** Ignore taps on month-cell events (day-cell taps still fire). Default false. */
|
|
100
|
+
disableMonthEventCellPress?: boolean; /** Reverse the day order within each week (right-to-left). Default false. */
|
|
101
|
+
isRTL?: boolean; /** Always render six week rows, for a fixed-height grid. Default false. */
|
|
102
|
+
showSixWeeks?: boolean; /** Render the "MMMM yyyy" title above the grid. Default true. */
|
|
103
|
+
showTitle?: boolean; /** Render the weekday-label header row above the grid. Default true. */
|
|
104
|
+
showWeekdays?: boolean; /** Highlight this date instead of the real "today". */
|
|
105
|
+
activeDate?: Date; /** Days drawn as selected (a filled badge), in the month grid. */
|
|
106
|
+
selectedDates?: Date[]; /** A selected span: endpoints get a filled badge, the span gets the range band. */
|
|
107
|
+
selectedRange?: DateRange;
|
|
108
|
+
/**
|
|
109
|
+
* Fill the whole cell with the range band instead of the default centered
|
|
110
|
+
* rounded "pill" strip. Default false.
|
|
111
|
+
*/
|
|
112
|
+
fillCellOnSelection?: boolean; /** Earliest selectable day (inclusive); earlier days render disabled. */
|
|
113
|
+
minDate?: Date; /** Latest selectable day (inclusive); later days render disabled. */
|
|
114
|
+
maxDate?: Date; /** Return true to render a specific day disabled (dimmed, taps ignored). */
|
|
115
|
+
isDateDisabled?: (date: Date) => boolean; /** Web drag-to-select relay: a pointer pressed down on this day's cell. */
|
|
116
|
+
onDayPointerDown?: (date: Date) => void; /** Web drag-to-select relay: a pressed pointer entered this day's cell. */
|
|
117
|
+
onDayPointerEnter?: (date: Date) => void; /** Per-date style merged onto the day cell. */
|
|
118
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
119
|
+
renderEvent: RenderEvent<T>;
|
|
120
|
+
keyExtractor: EventKeyExtractor<T>;
|
|
121
|
+
onPressDay?: (date: Date) => void;
|
|
122
|
+
onLongPressDay?: (date: Date) => void;
|
|
123
|
+
onPressEvent: (event: CalendarEvent$1<T>) => void;
|
|
124
|
+
onLongPressEvent?: (event: CalendarEvent$1<T>) => void;
|
|
125
|
+
onPressMore?: (events: CalendarEvent$1<T>[], date: Date) => void;
|
|
126
|
+
/**
|
|
127
|
+
* Replace the default date badge in each day cell. Receives the day; return
|
|
128
|
+
* your own date label. Event chips and the "+N more" label still render below.
|
|
129
|
+
*/
|
|
130
|
+
renderCustomDateForMonth?: (date: Date) => React.ReactNode;
|
|
131
|
+
};
|
|
132
|
+
declare function MonthViewInner<T>({
|
|
133
|
+
date,
|
|
134
|
+
events,
|
|
135
|
+
maxVisibleEventCount,
|
|
136
|
+
weekStartsOn,
|
|
137
|
+
locale,
|
|
138
|
+
sortedMonthView,
|
|
139
|
+
moreLabel,
|
|
140
|
+
showAdjacentMonths,
|
|
141
|
+
disableMonthEventCellPress,
|
|
142
|
+
isRTL,
|
|
143
|
+
showSixWeeks,
|
|
144
|
+
showTitle,
|
|
145
|
+
showWeekdays,
|
|
146
|
+
activeDate,
|
|
147
|
+
selectedDates: selectedDatesProp,
|
|
148
|
+
selectedRange: selectedRangeProp,
|
|
149
|
+
fillCellOnSelection,
|
|
150
|
+
minDate: minDateProp,
|
|
151
|
+
maxDate: maxDateProp,
|
|
152
|
+
isDateDisabled: isDateDisabledProp,
|
|
153
|
+
calendarCellStyle,
|
|
154
|
+
renderEvent,
|
|
155
|
+
keyExtractor,
|
|
156
|
+
onPressDay,
|
|
157
|
+
onLongPressDay,
|
|
158
|
+
onPressEvent,
|
|
159
|
+
onLongPressEvent,
|
|
160
|
+
onPressMore,
|
|
161
|
+
renderCustomDateForMonth,
|
|
162
|
+
onDayPointerDown,
|
|
163
|
+
onDayPointerEnter
|
|
164
|
+
}: MonthViewProps<T>): import("react").JSX.Element;
|
|
165
|
+
declare const MonthView: typeof MonthViewInner;
|
|
166
|
+
//#endregion
|
|
167
|
+
//#region src/components/MonthPager.d.ts
|
|
168
|
+
type MonthPagerProps<T> = {
|
|
169
|
+
date: Date;
|
|
170
|
+
events: CalendarEvent$1<T>[];
|
|
171
|
+
maxVisibleEventCount?: number;
|
|
172
|
+
weekStartsOn: WeekStartsOn;
|
|
173
|
+
locale?: Locale;
|
|
174
|
+
sortedMonthView?: boolean;
|
|
175
|
+
moreLabel?: string;
|
|
176
|
+
showAdjacentMonths?: boolean;
|
|
177
|
+
disableMonthEventCellPress?: boolean;
|
|
178
|
+
isRTL?: boolean;
|
|
179
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
180
|
+
renderEvent: RenderEvent<T>;
|
|
181
|
+
keyExtractor: EventKeyExtractor<T>;
|
|
182
|
+
onPressDay?: (date: Date) => void;
|
|
183
|
+
onLongPressDay?: (date: Date) => void;
|
|
184
|
+
onPressEvent: (event: CalendarEvent$1<T>) => void;
|
|
185
|
+
onLongPressEvent?: (event: CalendarEvent$1<T>) => void;
|
|
186
|
+
onPressMore?: (events: CalendarEvent$1<T>[], date: Date) => void;
|
|
187
|
+
onChangeDate: (date: Date) => void;
|
|
188
|
+
freeSwipe?: boolean;
|
|
189
|
+
swipeEnabled?: boolean;
|
|
190
|
+
showSixWeeks?: boolean;
|
|
191
|
+
activeDate?: Date; /** Replace the weekday-label header above the month grid. Receives the week's days. */
|
|
192
|
+
renderHeaderForMonthView?: (weekDays: Date[]) => React.ReactNode; /** Replace the default date badge in each day cell. Receives the day. */
|
|
193
|
+
renderCustomDateForMonth?: (date: Date) => React.ReactNode;
|
|
194
|
+
};
|
|
195
|
+
declare function MonthPagerInner<T>({
|
|
196
|
+
date,
|
|
197
|
+
events,
|
|
198
|
+
maxVisibleEventCount,
|
|
199
|
+
weekStartsOn,
|
|
200
|
+
locale,
|
|
201
|
+
sortedMonthView,
|
|
202
|
+
moreLabel,
|
|
203
|
+
showAdjacentMonths,
|
|
204
|
+
disableMonthEventCellPress,
|
|
205
|
+
isRTL,
|
|
206
|
+
calendarCellStyle,
|
|
207
|
+
renderEvent,
|
|
208
|
+
keyExtractor,
|
|
209
|
+
onPressDay,
|
|
210
|
+
onLongPressDay,
|
|
211
|
+
onPressEvent,
|
|
212
|
+
onLongPressEvent,
|
|
213
|
+
onPressMore,
|
|
214
|
+
onChangeDate,
|
|
215
|
+
freeSwipe,
|
|
216
|
+
swipeEnabled,
|
|
217
|
+
showSixWeeks,
|
|
218
|
+
activeDate,
|
|
219
|
+
renderHeaderForMonthView,
|
|
220
|
+
renderCustomDateForMonth
|
|
221
|
+
}: MonthPagerProps<T>): import("react").JSX.Element;
|
|
222
|
+
declare const MonthPager: typeof MonthPagerInner;
|
|
223
|
+
//#endregion
|
|
224
|
+
//#region src/components/MonthList.d.ts
|
|
225
|
+
type MonthListProps<T> = {
|
|
226
|
+
/** The month scrolled to on mount. */date: Date; /** Events to render in the grids. Omit for an events-free date picker. */
|
|
227
|
+
events?: CalendarEvent$1<T>[];
|
|
228
|
+
weekStartsOn: WeekStartsOn;
|
|
229
|
+
/**
|
|
230
|
+
* Height of each week row (px). The month block sizes to its row count. Defaults
|
|
231
|
+
* to a taller row when `events` are shown (so a day fits ~3 chips) and a compact
|
|
232
|
+
* row for the events-free picker.
|
|
233
|
+
*/
|
|
234
|
+
weekRowHeight?: number;
|
|
235
|
+
/**
|
|
236
|
+
* Height of each month's title row (px). Default 44. A custom `renderMonthHeader`
|
|
237
|
+
* must fit this height, since it also anchors the drag hit-test.
|
|
238
|
+
*/
|
|
239
|
+
monthHeaderHeight?: number;
|
|
240
|
+
maxVisibleEventCount?: number;
|
|
241
|
+
locale?: Locale;
|
|
242
|
+
sortedMonthView?: boolean;
|
|
243
|
+
moreLabel?: string; /** Show dimmed adjacent-month days. Default false (each month shows only its own days). */
|
|
244
|
+
showAdjacentMonths?: boolean;
|
|
245
|
+
disableMonthEventCellPress?: boolean;
|
|
246
|
+
isRTL?: boolean;
|
|
247
|
+
activeDate?: Date;
|
|
248
|
+
selectedDates?: Date[];
|
|
249
|
+
selectedRange?: DateRange; /** Fill the whole cell on selection instead of the default rounded pill band. */
|
|
250
|
+
fillCellOnSelection?: boolean;
|
|
251
|
+
minDate?: Date;
|
|
252
|
+
maxDate?: Date;
|
|
253
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
254
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>; /** Replace the built-in event box. Defaults to `DefaultEvent`. */
|
|
255
|
+
renderEvent?: RenderEvent<T>; /** Stable key per event. Defaults to start-time + index. */
|
|
256
|
+
keyExtractor?: EventKeyExtractor<T>;
|
|
257
|
+
onPressDay?: (date: Date) => void;
|
|
258
|
+
onLongPressDay?: (date: Date) => void;
|
|
259
|
+
onPressEvent?: (event: CalendarEvent$1<T>) => void;
|
|
260
|
+
onLongPressEvent?: (event: CalendarEvent$1<T>) => void;
|
|
261
|
+
onPressMore?: (events: CalendarEvent$1<T>[], date: Date) => void;
|
|
262
|
+
/**
|
|
263
|
+
* Enable drag-to-select. Long-press a day and drag to sweep out a range,
|
|
264
|
+
* continuing across months (the list auto-scrolls at the edges). Fired with
|
|
265
|
+
* the ordered `[start, end]`; pair with `useDateRange`'s `selectRange`.
|
|
266
|
+
*/
|
|
267
|
+
onSelectDrag?: (start: Date, end: Date) => void; /** Fired with the month that scrolls into view. */
|
|
268
|
+
onChangeVisibleMonth?: (month: Date) => void; /** Replace the per-month title (default "LLLL yyyy"). */
|
|
269
|
+
renderMonthHeader?: (month: Date) => React.ReactNode;
|
|
270
|
+
};
|
|
271
|
+
declare function MonthListInner<T>({
|
|
272
|
+
date,
|
|
273
|
+
events,
|
|
274
|
+
weekStartsOn,
|
|
275
|
+
weekRowHeight: weekRowHeightProp,
|
|
276
|
+
monthHeaderHeight,
|
|
277
|
+
maxVisibleEventCount,
|
|
278
|
+
locale,
|
|
279
|
+
sortedMonthView,
|
|
280
|
+
moreLabel,
|
|
281
|
+
showAdjacentMonths,
|
|
282
|
+
disableMonthEventCellPress,
|
|
283
|
+
isRTL,
|
|
284
|
+
activeDate,
|
|
285
|
+
selectedDates,
|
|
286
|
+
selectedRange,
|
|
287
|
+
fillCellOnSelection,
|
|
288
|
+
minDate,
|
|
289
|
+
maxDate,
|
|
290
|
+
isDateDisabled,
|
|
291
|
+
calendarCellStyle,
|
|
292
|
+
renderEvent,
|
|
293
|
+
keyExtractor,
|
|
294
|
+
onPressDay,
|
|
295
|
+
onLongPressDay,
|
|
296
|
+
onPressEvent,
|
|
297
|
+
onLongPressEvent,
|
|
298
|
+
onPressMore,
|
|
299
|
+
onSelectDrag,
|
|
300
|
+
onChangeVisibleMonth,
|
|
301
|
+
renderMonthHeader
|
|
302
|
+
}: MonthListProps<T>): import("react").JSX.Element;
|
|
303
|
+
declare const MonthList: typeof MonthListInner;
|
|
304
|
+
//#endregion
|
|
305
|
+
//#region src/components/DefaultMonthEvent.d.ts
|
|
306
|
+
/**
|
|
307
|
+
* A lightweight event chip for the month grid and the date picker: the same
|
|
308
|
+
* titled box as {@link DefaultEvent} but with no Reanimated dependency (it drops
|
|
309
|
+
* the pinch-zoom time reveal, which only applies to the week/day grid). It's the
|
|
310
|
+
* default renderer for `MonthList`, so the `/picker` entry point stays free of
|
|
311
|
+
* Reanimated.
|
|
312
|
+
*/
|
|
313
|
+
declare function DefaultMonthEvent<T>({
|
|
314
|
+
event,
|
|
315
|
+
mode,
|
|
316
|
+
isAllDay,
|
|
317
|
+
ampm,
|
|
318
|
+
showTime,
|
|
319
|
+
ellipsizeTitle,
|
|
320
|
+
allDayLabel,
|
|
321
|
+
cellStyle,
|
|
322
|
+
onPress,
|
|
323
|
+
onLongPress
|
|
324
|
+
}: RenderEventArgs<T>): import("react").JSX.Element;
|
|
325
|
+
//#endregion
|
|
326
|
+
export { defaultTheme as C, darkTheme as S, useCalendarTheme as T, TimeGridMode as _, MonthPagerProps as a, CalendarThemeProvider as b, BusinessHours as c, EventKeyExtractor as d, ICalendarEvent as f, RenderEventArgs as g, RenderEvent as h, MonthPager as i, CalendarEvent$1 as l, RecurrenceRule as m, MonthList as n, MonthView as o, RecurrenceFrequency as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, WeekStartsOn as v, mergeTheme as w, PartialCalendarTheme as x, CalendarTheme as y };
|
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
import { Locale } from "date-fns";
|
|
2
|
+
import { ComponentType } from "react";
|
|
3
|
+
import { SharedValue } from "react-native-reanimated";
|
|
4
|
+
import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn } from "@super-calendar/core";
|
|
5
|
+
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
6
|
+
|
|
7
|
+
//#region src/theme.d.ts
|
|
8
|
+
/**
|
|
9
|
+
* The full set of colours, text styles and metrics the calendar paints with.
|
|
10
|
+
* Supply a `Partial<CalendarTheme>` to `<Calendar theme={...} />`; missing keys
|
|
11
|
+
* fall back to {@link defaultTheme}, so you only override what you care about.
|
|
12
|
+
*/
|
|
13
|
+
interface CalendarTheme {
|
|
14
|
+
/** The shared colour palette (sourced from `@super-calendar/core`). */
|
|
15
|
+
colors: CalendarColors;
|
|
16
|
+
text: {
|
|
17
|
+
/** Large day number in the week/day header. */dayNumber: TextStyle; /** Short weekday label ("Mon") in headers. */
|
|
18
|
+
weekday: TextStyle; /** Date number inside a month cell. */
|
|
19
|
+
dateCell: TextStyle; /** Hour labels down the left of the time grid. */
|
|
20
|
+
hourLabel: TextStyle; /** The "+N more" overflow label in month cells. */
|
|
21
|
+
more: TextStyle; /** Title inside the built-in default event box. */
|
|
22
|
+
eventTitle: TextStyle;
|
|
23
|
+
};
|
|
24
|
+
/** Corner radius of the today badge. Use a large value for a circle. */
|
|
25
|
+
todayBadgeRadius: number;
|
|
26
|
+
/**
|
|
27
|
+
* Height of the range selection band (the centered rounded "pill"); its corner
|
|
28
|
+
* radius is half this. Ignored when `fillCellOnSelection` fills the whole cell.
|
|
29
|
+
*/
|
|
30
|
+
rangeBandHeight: number;
|
|
31
|
+
}
|
|
32
|
+
declare const defaultTheme: CalendarTheme;
|
|
33
|
+
/**
|
|
34
|
+
* A ready-made dark palette. Pass it straight to `<Calendar theme={darkTheme} />`,
|
|
35
|
+
* or switch on the system scheme with React Native's `useColorScheme()`. Shares
|
|
36
|
+
* {@link defaultTheme}'s typography and metrics; only the colours change.
|
|
37
|
+
*/
|
|
38
|
+
declare const darkTheme: CalendarTheme;
|
|
39
|
+
/** Deep-merge a partial theme over {@link defaultTheme}. */
|
|
40
|
+
declare function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme;
|
|
41
|
+
type PartialCalendarTheme = {
|
|
42
|
+
colors?: Partial<CalendarTheme["colors"]>;
|
|
43
|
+
text?: Partial<CalendarTheme["text"]>;
|
|
44
|
+
todayBadgeRadius?: number;
|
|
45
|
+
rangeBandHeight?: number;
|
|
46
|
+
};
|
|
47
|
+
declare const CalendarThemeProvider: import("react").Provider<CalendarTheme>;
|
|
48
|
+
declare const useCalendarTheme: () => CalendarTheme;
|
|
49
|
+
//#endregion
|
|
50
|
+
//#region src/types.d.ts
|
|
51
|
+
type RenderEventArgs<T = unknown> = {
|
|
52
|
+
event: CalendarEvent<T>;
|
|
53
|
+
mode: CalendarMode;
|
|
54
|
+
/**
|
|
55
|
+
* Live pixel height of the event box on the week/day grid, driven on the UI
|
|
56
|
+
* thread by pinch-to-zoom. Use it to reveal detail progressively as the box
|
|
57
|
+
* grows. `undefined` in month mode, where events render at a fixed size.
|
|
58
|
+
*/
|
|
59
|
+
boxHeight?: SharedValue<number>;
|
|
60
|
+
/**
|
|
61
|
+
* On the week/day grid, true when this is a clipped segment of a multi-day
|
|
62
|
+
* event that started on an earlier day / continues onto a later day. Lets a
|
|
63
|
+
* renderer draw "continues" affordances. `undefined` in month mode.
|
|
64
|
+
*/
|
|
65
|
+
continuesBefore?: boolean;
|
|
66
|
+
continuesAfter?: boolean; /** True when this event is rendered in the all-day lane (week/day) or is an all-day event in month view. */
|
|
67
|
+
isAllDay?: boolean; /** Format the built-in renderer's time range in 12-hour AM/PM. Default false (24h). */
|
|
68
|
+
ampm?: boolean; /** Show the time range in the built-in renderer (day/week/schedule). Default true. */
|
|
69
|
+
showTime?: boolean; /** Add a trailing ellipsis (…) when a clipped title overflows in the built-in renderer; otherwise the text is hard-clipped. Default false. */
|
|
70
|
+
ellipsizeTitle?: boolean; /** Label shown for an all-day event in the schedule (and its screen-reader text). Default "All day". */
|
|
71
|
+
allDayLabel?: string; /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
|
|
72
|
+
cellStyle?: StyleProp<ViewStyle>;
|
|
73
|
+
onPress: () => void; /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
|
|
74
|
+
onLongPress?: () => void;
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* A component that renders a single event. It is rendered as a real component
|
|
78
|
+
* (not called as a function), so it may safely use hooks — including Reanimated
|
|
79
|
+
* hooks driven by `boxHeight`. Render an element that fills its container
|
|
80
|
+
* (`flex: 1`); the calendar positions and sizes the wrapping box for you.
|
|
81
|
+
*/
|
|
82
|
+
type RenderEvent<T = unknown> = ComponentType<RenderEventArgs<T>>;
|
|
83
|
+
//#endregion
|
|
84
|
+
//#region src/components/MonthView.d.ts
|
|
85
|
+
type MonthViewProps<T> = {
|
|
86
|
+
date: Date;
|
|
87
|
+
events: CalendarEvent$1<T>[];
|
|
88
|
+
/**
|
|
89
|
+
* Max event chips per day cell. Omit to auto-fit as many as the cell height
|
|
90
|
+
* allows (the default); set a number for a fixed cap. Extra events collapse
|
|
91
|
+
* into a "+N more" label. Auto-fit assumes the built-in chip size — pass an
|
|
92
|
+
* explicit value when using a custom `renderEvent`.
|
|
93
|
+
*/
|
|
94
|
+
maxVisibleEventCount?: number;
|
|
95
|
+
weekStartsOn: WeekStartsOn;
|
|
96
|
+
locale?: Locale; /** Sort each day's events by start time before slicing. Default true. */
|
|
97
|
+
sortedMonthView?: boolean; /** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
|
|
98
|
+
moreLabel?: string; /** Show dimmed days from adjacent months in the grid. Default true. */
|
|
99
|
+
showAdjacentMonths?: boolean; /** Ignore taps on month-cell events (day-cell taps still fire). Default false. */
|
|
100
|
+
disableMonthEventCellPress?: boolean; /** Reverse the day order within each week (right-to-left). Default false. */
|
|
101
|
+
isRTL?: boolean; /** Always render six week rows, for a fixed-height grid. Default false. */
|
|
102
|
+
showSixWeeks?: boolean; /** Render the "MMMM yyyy" title above the grid. Default true. */
|
|
103
|
+
showTitle?: boolean; /** Render the weekday-label header row above the grid. Default true. */
|
|
104
|
+
showWeekdays?: boolean; /** Highlight this date instead of the real "today". */
|
|
105
|
+
activeDate?: Date; /** Days drawn as selected (a filled badge), in the month grid. */
|
|
106
|
+
selectedDates?: Date[]; /** A selected span: endpoints get a filled badge, the span gets the range band. */
|
|
107
|
+
selectedRange?: DateRange;
|
|
108
|
+
/**
|
|
109
|
+
* Fill the whole cell with the range band instead of the default centered
|
|
110
|
+
* rounded "pill" strip. Default false.
|
|
111
|
+
*/
|
|
112
|
+
fillCellOnSelection?: boolean; /** Earliest selectable day (inclusive); earlier days render disabled. */
|
|
113
|
+
minDate?: Date; /** Latest selectable day (inclusive); later days render disabled. */
|
|
114
|
+
maxDate?: Date; /** Return true to render a specific day disabled (dimmed, taps ignored). */
|
|
115
|
+
isDateDisabled?: (date: Date) => boolean; /** Web drag-to-select relay: a pointer pressed down on this day's cell. */
|
|
116
|
+
onDayPointerDown?: (date: Date) => void; /** Web drag-to-select relay: a pressed pointer entered this day's cell. */
|
|
117
|
+
onDayPointerEnter?: (date: Date) => void; /** Per-date style merged onto the day cell. */
|
|
118
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
119
|
+
renderEvent: RenderEvent<T>;
|
|
120
|
+
keyExtractor: EventKeyExtractor<T>;
|
|
121
|
+
onPressDay?: (date: Date) => void;
|
|
122
|
+
onLongPressDay?: (date: Date) => void;
|
|
123
|
+
onPressEvent: (event: CalendarEvent$1<T>) => void;
|
|
124
|
+
onLongPressEvent?: (event: CalendarEvent$1<T>) => void;
|
|
125
|
+
onPressMore?: (events: CalendarEvent$1<T>[], date: Date) => void;
|
|
126
|
+
/**
|
|
127
|
+
* Replace the default date badge in each day cell. Receives the day; return
|
|
128
|
+
* your own date label. Event chips and the "+N more" label still render below.
|
|
129
|
+
*/
|
|
130
|
+
renderCustomDateForMonth?: (date: Date) => React.ReactNode;
|
|
131
|
+
};
|
|
132
|
+
declare function MonthViewInner<T>({
|
|
133
|
+
date,
|
|
134
|
+
events,
|
|
135
|
+
maxVisibleEventCount,
|
|
136
|
+
weekStartsOn,
|
|
137
|
+
locale,
|
|
138
|
+
sortedMonthView,
|
|
139
|
+
moreLabel,
|
|
140
|
+
showAdjacentMonths,
|
|
141
|
+
disableMonthEventCellPress,
|
|
142
|
+
isRTL,
|
|
143
|
+
showSixWeeks,
|
|
144
|
+
showTitle,
|
|
145
|
+
showWeekdays,
|
|
146
|
+
activeDate,
|
|
147
|
+
selectedDates: selectedDatesProp,
|
|
148
|
+
selectedRange: selectedRangeProp,
|
|
149
|
+
fillCellOnSelection,
|
|
150
|
+
minDate: minDateProp,
|
|
151
|
+
maxDate: maxDateProp,
|
|
152
|
+
isDateDisabled: isDateDisabledProp,
|
|
153
|
+
calendarCellStyle,
|
|
154
|
+
renderEvent,
|
|
155
|
+
keyExtractor,
|
|
156
|
+
onPressDay,
|
|
157
|
+
onLongPressDay,
|
|
158
|
+
onPressEvent,
|
|
159
|
+
onLongPressEvent,
|
|
160
|
+
onPressMore,
|
|
161
|
+
renderCustomDateForMonth,
|
|
162
|
+
onDayPointerDown,
|
|
163
|
+
onDayPointerEnter
|
|
164
|
+
}: MonthViewProps<T>): import("react").JSX.Element;
|
|
165
|
+
declare const MonthView: typeof MonthViewInner;
|
|
166
|
+
//#endregion
|
|
167
|
+
//#region src/components/MonthPager.d.ts
|
|
168
|
+
type MonthPagerProps<T> = {
|
|
169
|
+
date: Date;
|
|
170
|
+
events: CalendarEvent$1<T>[];
|
|
171
|
+
maxVisibleEventCount?: number;
|
|
172
|
+
weekStartsOn: WeekStartsOn;
|
|
173
|
+
locale?: Locale;
|
|
174
|
+
sortedMonthView?: boolean;
|
|
175
|
+
moreLabel?: string;
|
|
176
|
+
showAdjacentMonths?: boolean;
|
|
177
|
+
disableMonthEventCellPress?: boolean;
|
|
178
|
+
isRTL?: boolean;
|
|
179
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
180
|
+
renderEvent: RenderEvent<T>;
|
|
181
|
+
keyExtractor: EventKeyExtractor<T>;
|
|
182
|
+
onPressDay?: (date: Date) => void;
|
|
183
|
+
onLongPressDay?: (date: Date) => void;
|
|
184
|
+
onPressEvent: (event: CalendarEvent$1<T>) => void;
|
|
185
|
+
onLongPressEvent?: (event: CalendarEvent$1<T>) => void;
|
|
186
|
+
onPressMore?: (events: CalendarEvent$1<T>[], date: Date) => void;
|
|
187
|
+
onChangeDate: (date: Date) => void;
|
|
188
|
+
freeSwipe?: boolean;
|
|
189
|
+
swipeEnabled?: boolean;
|
|
190
|
+
showSixWeeks?: boolean;
|
|
191
|
+
activeDate?: Date; /** Replace the weekday-label header above the month grid. Receives the week's days. */
|
|
192
|
+
renderHeaderForMonthView?: (weekDays: Date[]) => React.ReactNode; /** Replace the default date badge in each day cell. Receives the day. */
|
|
193
|
+
renderCustomDateForMonth?: (date: Date) => React.ReactNode;
|
|
194
|
+
};
|
|
195
|
+
declare function MonthPagerInner<T>({
|
|
196
|
+
date,
|
|
197
|
+
events,
|
|
198
|
+
maxVisibleEventCount,
|
|
199
|
+
weekStartsOn,
|
|
200
|
+
locale,
|
|
201
|
+
sortedMonthView,
|
|
202
|
+
moreLabel,
|
|
203
|
+
showAdjacentMonths,
|
|
204
|
+
disableMonthEventCellPress,
|
|
205
|
+
isRTL,
|
|
206
|
+
calendarCellStyle,
|
|
207
|
+
renderEvent,
|
|
208
|
+
keyExtractor,
|
|
209
|
+
onPressDay,
|
|
210
|
+
onLongPressDay,
|
|
211
|
+
onPressEvent,
|
|
212
|
+
onLongPressEvent,
|
|
213
|
+
onPressMore,
|
|
214
|
+
onChangeDate,
|
|
215
|
+
freeSwipe,
|
|
216
|
+
swipeEnabled,
|
|
217
|
+
showSixWeeks,
|
|
218
|
+
activeDate,
|
|
219
|
+
renderHeaderForMonthView,
|
|
220
|
+
renderCustomDateForMonth
|
|
221
|
+
}: MonthPagerProps<T>): import("react").JSX.Element;
|
|
222
|
+
declare const MonthPager: typeof MonthPagerInner;
|
|
223
|
+
//#endregion
|
|
224
|
+
//#region src/components/MonthList.d.ts
|
|
225
|
+
type MonthListProps<T> = {
|
|
226
|
+
/** The month scrolled to on mount. */date: Date; /** Events to render in the grids. Omit for an events-free date picker. */
|
|
227
|
+
events?: CalendarEvent$1<T>[];
|
|
228
|
+
weekStartsOn: WeekStartsOn;
|
|
229
|
+
/**
|
|
230
|
+
* Height of each week row (px). The month block sizes to its row count. Defaults
|
|
231
|
+
* to a taller row when `events` are shown (so a day fits ~3 chips) and a compact
|
|
232
|
+
* row for the events-free picker.
|
|
233
|
+
*/
|
|
234
|
+
weekRowHeight?: number;
|
|
235
|
+
/**
|
|
236
|
+
* Height of each month's title row (px). Default 44. A custom `renderMonthHeader`
|
|
237
|
+
* must fit this height, since it also anchors the drag hit-test.
|
|
238
|
+
*/
|
|
239
|
+
monthHeaderHeight?: number;
|
|
240
|
+
maxVisibleEventCount?: number;
|
|
241
|
+
locale?: Locale;
|
|
242
|
+
sortedMonthView?: boolean;
|
|
243
|
+
moreLabel?: string; /** Show dimmed adjacent-month days. Default false (each month shows only its own days). */
|
|
244
|
+
showAdjacentMonths?: boolean;
|
|
245
|
+
disableMonthEventCellPress?: boolean;
|
|
246
|
+
isRTL?: boolean;
|
|
247
|
+
activeDate?: Date;
|
|
248
|
+
selectedDates?: Date[];
|
|
249
|
+
selectedRange?: DateRange; /** Fill the whole cell on selection instead of the default rounded pill band. */
|
|
250
|
+
fillCellOnSelection?: boolean;
|
|
251
|
+
minDate?: Date;
|
|
252
|
+
maxDate?: Date;
|
|
253
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
254
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>; /** Replace the built-in event box. Defaults to `DefaultEvent`. */
|
|
255
|
+
renderEvent?: RenderEvent<T>; /** Stable key per event. Defaults to start-time + index. */
|
|
256
|
+
keyExtractor?: EventKeyExtractor<T>;
|
|
257
|
+
onPressDay?: (date: Date) => void;
|
|
258
|
+
onLongPressDay?: (date: Date) => void;
|
|
259
|
+
onPressEvent?: (event: CalendarEvent$1<T>) => void;
|
|
260
|
+
onLongPressEvent?: (event: CalendarEvent$1<T>) => void;
|
|
261
|
+
onPressMore?: (events: CalendarEvent$1<T>[], date: Date) => void;
|
|
262
|
+
/**
|
|
263
|
+
* Enable drag-to-select. Long-press a day and drag to sweep out a range,
|
|
264
|
+
* continuing across months (the list auto-scrolls at the edges). Fired with
|
|
265
|
+
* the ordered `[start, end]`; pair with `useDateRange`'s `selectRange`.
|
|
266
|
+
*/
|
|
267
|
+
onSelectDrag?: (start: Date, end: Date) => void; /** Fired with the month that scrolls into view. */
|
|
268
|
+
onChangeVisibleMonth?: (month: Date) => void; /** Replace the per-month title (default "LLLL yyyy"). */
|
|
269
|
+
renderMonthHeader?: (month: Date) => React.ReactNode;
|
|
270
|
+
};
|
|
271
|
+
declare function MonthListInner<T>({
|
|
272
|
+
date,
|
|
273
|
+
events,
|
|
274
|
+
weekStartsOn,
|
|
275
|
+
weekRowHeight: weekRowHeightProp,
|
|
276
|
+
monthHeaderHeight,
|
|
277
|
+
maxVisibleEventCount,
|
|
278
|
+
locale,
|
|
279
|
+
sortedMonthView,
|
|
280
|
+
moreLabel,
|
|
281
|
+
showAdjacentMonths,
|
|
282
|
+
disableMonthEventCellPress,
|
|
283
|
+
isRTL,
|
|
284
|
+
activeDate,
|
|
285
|
+
selectedDates,
|
|
286
|
+
selectedRange,
|
|
287
|
+
fillCellOnSelection,
|
|
288
|
+
minDate,
|
|
289
|
+
maxDate,
|
|
290
|
+
isDateDisabled,
|
|
291
|
+
calendarCellStyle,
|
|
292
|
+
renderEvent,
|
|
293
|
+
keyExtractor,
|
|
294
|
+
onPressDay,
|
|
295
|
+
onLongPressDay,
|
|
296
|
+
onPressEvent,
|
|
297
|
+
onLongPressEvent,
|
|
298
|
+
onPressMore,
|
|
299
|
+
onSelectDrag,
|
|
300
|
+
onChangeVisibleMonth,
|
|
301
|
+
renderMonthHeader
|
|
302
|
+
}: MonthListProps<T>): import("react").JSX.Element;
|
|
303
|
+
declare const MonthList: typeof MonthListInner;
|
|
304
|
+
//#endregion
|
|
305
|
+
//#region src/components/DefaultMonthEvent.d.ts
|
|
306
|
+
/**
|
|
307
|
+
* A lightweight event chip for the month grid and the date picker: the same
|
|
308
|
+
* titled box as {@link DefaultEvent} but with no Reanimated dependency (it drops
|
|
309
|
+
* the pinch-zoom time reveal, which only applies to the week/day grid). It's the
|
|
310
|
+
* default renderer for `MonthList`, so the `/picker` entry point stays free of
|
|
311
|
+
* Reanimated.
|
|
312
|
+
*/
|
|
313
|
+
declare function DefaultMonthEvent<T>({
|
|
314
|
+
event,
|
|
315
|
+
mode,
|
|
316
|
+
isAllDay,
|
|
317
|
+
ampm,
|
|
318
|
+
showTime,
|
|
319
|
+
ellipsizeTitle,
|
|
320
|
+
allDayLabel,
|
|
321
|
+
cellStyle,
|
|
322
|
+
onPress,
|
|
323
|
+
onLongPress
|
|
324
|
+
}: RenderEventArgs<T>): import("react").JSX.Element;
|
|
325
|
+
//#endregion
|
|
326
|
+
export { defaultTheme as C, darkTheme as S, useCalendarTheme as T, TimeGridMode as _, MonthPagerProps as a, CalendarThemeProvider as b, BusinessHours as c, EventKeyExtractor as d, ICalendarEvent as f, RenderEventArgs as g, RenderEvent as h, MonthPager as i, CalendarEvent$1 as l, RecurrenceRule as m, MonthList as n, MonthView as o, RecurrenceFrequency as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, WeekStartsOn as v, mergeTheme as w, PartialCalendarTheme as x, CalendarTheme as y };
|