@lazerlen/legend-calendar 1.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/.eslintrc.js +29 -0
- package/.turbo/turbo-build.log +19 -0
- package/.turbo/turbo-lint.log +14 -0
- package/.turbo/turbo-test.log +261 -0
- package/.turbo/turbo-typecheck.log +1 -0
- package/CHANGELOG.md +127 -0
- package/dist/index.d.mts +679 -0
- package/dist/index.d.ts +679 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +47 -0
- package/src/components/Calendar.stories.tsx +226 -0
- package/src/components/Calendar.tsx +224 -0
- package/src/components/CalendarItemDay.tsx +385 -0
- package/src/components/CalendarItemEmpty.tsx +30 -0
- package/src/components/CalendarItemWeekName.tsx +67 -0
- package/src/components/CalendarList.stories.tsx +326 -0
- package/src/components/CalendarList.tsx +373 -0
- package/src/components/CalendarRowMonth.tsx +62 -0
- package/src/components/CalendarRowWeek.tsx +46 -0
- package/src/components/CalendarThemeProvider.tsx +43 -0
- package/src/components/HStack.tsx +67 -0
- package/src/components/VStack.tsx +67 -0
- package/src/components/index.ts +108 -0
- package/src/developer/decorators.tsx +54 -0
- package/src/developer/loggginHandler.tsx +6 -0
- package/src/developer/useRenderCount.ts +7 -0
- package/src/helpers/dates.test.ts +567 -0
- package/src/helpers/dates.ts +163 -0
- package/src/helpers/functions.ts +327 -0
- package/src/helpers/numbers.ts +11 -0
- package/src/helpers/strings.ts +2 -0
- package/src/helpers/tokens.ts +71 -0
- package/src/helpers/types.ts +3 -0
- package/src/hooks/useCalendar.test.ts +381 -0
- package/src/hooks/useCalendar.ts +351 -0
- package/src/hooks/useCalendarList.test.ts +382 -0
- package/src/hooks/useCalendarList.tsx +291 -0
- package/src/hooks/useDateRange.test.ts +128 -0
- package/src/hooks/useDateRange.ts +94 -0
- package/src/hooks/useOptimizedDayMetadata.test.ts +582 -0
- package/src/hooks/useOptimizedDayMetadata.ts +93 -0
- package/src/hooks/useTheme.ts +14 -0
- package/src/index.ts +24 -0
- package/tsconfig.json +13 -0
- package/tsup.config.ts +15 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,679 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { TextProps, ViewStyle, TextStyle, PressableProps, ColorSchemeName } from 'react-native';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import { LegendListProps } from '@legendapp/list';
|
|
6
|
+
import * as mitt from 'mitt';
|
|
7
|
+
|
|
8
|
+
/** All fields that affects the day's state. */
|
|
9
|
+
interface CalendarDayStateFields {
|
|
10
|
+
/** Is this day disabled? */
|
|
11
|
+
isDisabled: boolean;
|
|
12
|
+
/** Is this the current day? */
|
|
13
|
+
isToday: boolean;
|
|
14
|
+
/** Is this the start of a range? */
|
|
15
|
+
isStartOfRange: boolean;
|
|
16
|
+
/** Is this the end of a range? */
|
|
17
|
+
isEndOfRange: boolean;
|
|
18
|
+
/** The state of the day */
|
|
19
|
+
state: DayState;
|
|
20
|
+
/** Is the range valid (has both start and end dates set)? */
|
|
21
|
+
isRangeValid: boolean;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* The type of each day in the calendar. Has a few pre-computed properties to
|
|
25
|
+
* help increase re-rendering performance.
|
|
26
|
+
*/
|
|
27
|
+
type CalendarDayMetadata = {
|
|
28
|
+
date: Date;
|
|
29
|
+
/** The day displayed in the desired format from `calendarDayFormat` */
|
|
30
|
+
displayLabel: string;
|
|
31
|
+
/** Does this day belong to a different month? */
|
|
32
|
+
isDifferentMonth: boolean;
|
|
33
|
+
/** Is this the last day of the month? */
|
|
34
|
+
isEndOfMonth: boolean;
|
|
35
|
+
/** Is this the last day of the week? */
|
|
36
|
+
isEndOfWeek: boolean;
|
|
37
|
+
/** Is this the first day of the month? */
|
|
38
|
+
isStartOfMonth: boolean;
|
|
39
|
+
/** Is this the first day of the week? */
|
|
40
|
+
isStartOfWeek: boolean;
|
|
41
|
+
/** Is this day part of the weekend? */
|
|
42
|
+
isWeekend: boolean;
|
|
43
|
+
/** The ID of this date is the `YYYY-MM-DD` representation */
|
|
44
|
+
id: string;
|
|
45
|
+
} & CalendarDayStateFields;
|
|
46
|
+
/**
|
|
47
|
+
* An active date range to highlight in the calendar.
|
|
48
|
+
*/
|
|
49
|
+
interface CalendarActiveDateRange {
|
|
50
|
+
startId?: string;
|
|
51
|
+
endId?: string;
|
|
52
|
+
}
|
|
53
|
+
interface UseCalendarParams {
|
|
54
|
+
/**
|
|
55
|
+
* The calendar's month. It can be any date within the month, since it gets
|
|
56
|
+
* normalized to the first day of the month.
|
|
57
|
+
*
|
|
58
|
+
* **Tip**: To convert to date ID, use `toDateId(date)`.
|
|
59
|
+
*/
|
|
60
|
+
calendarMonthId: string;
|
|
61
|
+
/**
|
|
62
|
+
* The minimum date allowed to be selected (inclusive). Dates earlier than
|
|
63
|
+
* this will be disabled.
|
|
64
|
+
*
|
|
65
|
+
* **Tip**: To convert to date ID, use `toDateId(date)`.
|
|
66
|
+
*/
|
|
67
|
+
calendarMinDateId?: string;
|
|
68
|
+
/**
|
|
69
|
+
* The maximum date allowed to be selected (inclusive). Dates later than this
|
|
70
|
+
* will be disabled.
|
|
71
|
+
*
|
|
72
|
+
* **Tip**: To convert to date ID, use `toDateId(date)`.
|
|
73
|
+
*/
|
|
74
|
+
calendarMaxDateId?: string;
|
|
75
|
+
/**
|
|
76
|
+
* The locale to use for the date formatting. If you're using custom
|
|
77
|
+
* formatting functions, this value will be forwarded as the second argument.
|
|
78
|
+
* @defaultValue "en-US"
|
|
79
|
+
*/
|
|
80
|
+
calendarFormatLocale?: string;
|
|
81
|
+
/**
|
|
82
|
+
* A custom function to override the default month format ("January 2022").
|
|
83
|
+
*/
|
|
84
|
+
getCalendarMonthFormat?: (date: Date, locale: string) => string;
|
|
85
|
+
/**
|
|
86
|
+
* A custom function to override the default month format ("S", "M", "T").
|
|
87
|
+
*/
|
|
88
|
+
getCalendarWeekDayFormat?: (date: Date, locale: string) => string;
|
|
89
|
+
/**
|
|
90
|
+
* A custom function to override the default day format ("1", "9", "17").
|
|
91
|
+
*/
|
|
92
|
+
getCalendarDayFormat?: (date: Date, locale: string) => string;
|
|
93
|
+
/**
|
|
94
|
+
* The day of the week to start the calendar with.
|
|
95
|
+
* @defaultValue "sunday"
|
|
96
|
+
*/
|
|
97
|
+
calendarFirstDayOfWeek?: "sunday" | "monday";
|
|
98
|
+
/**
|
|
99
|
+
* The active date ranges to highlight in the calendar.
|
|
100
|
+
*/
|
|
101
|
+
calendarActiveDateRanges?: CalendarActiveDateRange[];
|
|
102
|
+
/**
|
|
103
|
+
* The disabled date IDs. Dates in this list will be in the `disabled` state
|
|
104
|
+
* unless they are part of an active range.
|
|
105
|
+
*/
|
|
106
|
+
calendarDisabledDateIds?: string[];
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Builds a calendar based on the given parameters.
|
|
110
|
+
*/
|
|
111
|
+
declare const buildCalendar: (params: UseCalendarParams) => {
|
|
112
|
+
weeksList: CalendarDayMetadata[][];
|
|
113
|
+
calendarRowMonth: string;
|
|
114
|
+
weekDaysList: string[];
|
|
115
|
+
};
|
|
116
|
+
/**
|
|
117
|
+
* Returns a memoized calendar based on the given parameters.
|
|
118
|
+
*/
|
|
119
|
+
declare const useCalendar: (params: UseCalendarParams) => {
|
|
120
|
+
weeksList: CalendarDayMetadata[][];
|
|
121
|
+
calendarRowMonth: string;
|
|
122
|
+
weekDaysList: string[];
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
declare module "react-native" {
|
|
126
|
+
interface PressableStateCallbackType {
|
|
127
|
+
hovered?: boolean;
|
|
128
|
+
focused?: boolean;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
type DayState = "idle" | "active" | "today" | "disabled";
|
|
132
|
+
interface DayTheme {
|
|
133
|
+
container: Omit<ViewStyle, "borderRadius">;
|
|
134
|
+
content: TextStyle;
|
|
135
|
+
}
|
|
136
|
+
interface CalendarItemDayProps {
|
|
137
|
+
children: ReactNode;
|
|
138
|
+
onPress: (id: string) => void;
|
|
139
|
+
metadata: CalendarDayMetadata;
|
|
140
|
+
theme?: Partial<Record<DayState | "base", (params: CalendarDayMetadata & {
|
|
141
|
+
isPressed: boolean;
|
|
142
|
+
isHovered?: boolean;
|
|
143
|
+
isFocused?: boolean;
|
|
144
|
+
}) => Partial<DayTheme>>>;
|
|
145
|
+
/** The cell's height */
|
|
146
|
+
height: number;
|
|
147
|
+
/** Optional TextProps to spread to the <Text> component. */
|
|
148
|
+
textProps?: Omit<TextProps, "children" | "onPress">;
|
|
149
|
+
/** Optional component to replace the default <Pressable> component. */
|
|
150
|
+
CalendarPressableComponent?: PressableLike;
|
|
151
|
+
}
|
|
152
|
+
/**
|
|
153
|
+
* The base calendar item day component. This component is responsible for
|
|
154
|
+
* rendering each day cell, along with its event handlers.
|
|
155
|
+
*
|
|
156
|
+
* This is not meant to be used directly. Instead, use the
|
|
157
|
+
* `CalendarItemDayWithContainer`, since it also includes the spacing between
|
|
158
|
+
* each day.
|
|
159
|
+
*/
|
|
160
|
+
declare const CalendarItemDay: ({ onPress, children, theme, height, metadata, textProps, CalendarPressableComponent, }: CalendarItemDayProps) => react_jsx_runtime.JSX.Element;
|
|
161
|
+
interface CalendarItemDayContainerTheme {
|
|
162
|
+
/** An empty view that acts as a spacer between each day. The spacing is
|
|
163
|
+
* controlled by the `daySpacing` prop. */
|
|
164
|
+
spacer?: ViewStyle;
|
|
165
|
+
/** An absolute positioned filler to join the active days together in a single
|
|
166
|
+
* complete range. */
|
|
167
|
+
activeDayFiller?: ViewStyle | ((params: CalendarDayMetadata) => ViewStyle);
|
|
168
|
+
}
|
|
169
|
+
interface CalendarItemDayContainerProps {
|
|
170
|
+
children: ReactNode;
|
|
171
|
+
isStartOfWeek: boolean;
|
|
172
|
+
/**
|
|
173
|
+
* If true, the active day filler/extension will be shown. The filler is used
|
|
174
|
+
* as a visual effect to join the active days together in a complete range.
|
|
175
|
+
*/
|
|
176
|
+
shouldShowActiveDayFiller?: boolean;
|
|
177
|
+
theme?: CalendarItemDayContainerTheme;
|
|
178
|
+
/**
|
|
179
|
+
* The spacing between each day
|
|
180
|
+
*/
|
|
181
|
+
daySpacing: number;
|
|
182
|
+
/** The day's height */
|
|
183
|
+
dayHeight: number;
|
|
184
|
+
/** The metadata for the day, extracted from the calendar's state. */
|
|
185
|
+
metadata?: CalendarDayMetadata;
|
|
186
|
+
}
|
|
187
|
+
declare const CalendarItemDayContainer: ({ children, isStartOfWeek, shouldShowActiveDayFiller, theme, daySpacing, dayHeight, metadata, }: CalendarItemDayContainerProps) => react_jsx_runtime.JSX.Element;
|
|
188
|
+
interface CalendarItemDayWithContainerProps extends Omit<CalendarItemDayProps, "height">, Pick<CalendarItemDayContainerProps, "daySpacing" | "dayHeight"> {
|
|
189
|
+
containerTheme?: CalendarItemDayContainerTheme;
|
|
190
|
+
/**
|
|
191
|
+
* A unique identifier for this calendar instance. This is useful if you
|
|
192
|
+
* need to render more than one calendar at once. This allows Legend Calendar
|
|
193
|
+
* to scope its state to the given instance.
|
|
194
|
+
*
|
|
195
|
+
* No need to get fancy with `uuid` or anything like that - a simple static
|
|
196
|
+
* string is enough.
|
|
197
|
+
*
|
|
198
|
+
* If not provided, Legend Calendar will use a default value which will hoist
|
|
199
|
+
* the state in a global scope.
|
|
200
|
+
*/
|
|
201
|
+
calendarInstanceId?: string;
|
|
202
|
+
}
|
|
203
|
+
declare const CalendarItemDayWithContainer: ({ children, metadata: baseMetadata, onPress, theme, dayHeight, daySpacing, containerTheme, calendarInstanceId, CalendarPressableComponent, }: CalendarItemDayWithContainerProps) => react_jsx_runtime.JSX.Element;
|
|
204
|
+
|
|
205
|
+
interface CalendarItemEmptyProps {
|
|
206
|
+
/** The height of the cell. Should be the same as `CalendarItemDay`. */
|
|
207
|
+
height: number;
|
|
208
|
+
/** The theme of the empty cell, useful for customizing the component. */
|
|
209
|
+
theme?: {
|
|
210
|
+
container?: ViewStyle;
|
|
211
|
+
};
|
|
212
|
+
}
|
|
213
|
+
declare const CalendarItemEmpty: react.NamedExoticComponent<CalendarItemEmptyProps>;
|
|
214
|
+
|
|
215
|
+
interface CalendarItemWeekNameTheme {
|
|
216
|
+
container?: ViewStyle;
|
|
217
|
+
content?: TextStyle;
|
|
218
|
+
}
|
|
219
|
+
interface CalendarItemWeekNameProps {
|
|
220
|
+
children: ReactNode;
|
|
221
|
+
/**
|
|
222
|
+
* The height of the week name, needed to correctly measure the calendar's
|
|
223
|
+
*/
|
|
224
|
+
height: number;
|
|
225
|
+
/** The theme of the week name, useful for customizing the component. */
|
|
226
|
+
theme?: CalendarItemWeekNameTheme;
|
|
227
|
+
/** Optional TextProps to spread to the <Text> component. */
|
|
228
|
+
textProps?: Omit<TextProps, "children">;
|
|
229
|
+
}
|
|
230
|
+
declare const CalendarItemWeekName: ({ children, height, theme, textProps, }: CalendarItemWeekNameProps) => react_jsx_runtime.JSX.Element;
|
|
231
|
+
|
|
232
|
+
interface CalendarRowMonthTheme {
|
|
233
|
+
container?: ViewStyle;
|
|
234
|
+
content?: TextStyle;
|
|
235
|
+
}
|
|
236
|
+
interface CalendarRowMonthProps {
|
|
237
|
+
children: ReactNode;
|
|
238
|
+
/**
|
|
239
|
+
* The height of the month row, needed to correctly measure the calendar's
|
|
240
|
+
* height.
|
|
241
|
+
*/
|
|
242
|
+
height: number;
|
|
243
|
+
/** The theme of the month row, useful for customizing the component. */
|
|
244
|
+
theme?: CalendarRowMonthTheme;
|
|
245
|
+
}
|
|
246
|
+
declare const CalendarRowMonth: ({ children, height, theme, }: CalendarRowMonthProps) => react_jsx_runtime.JSX.Element;
|
|
247
|
+
|
|
248
|
+
/**
|
|
249
|
+
* Minimal theme for the Legend Calendar component.
|
|
250
|
+
* @internal
|
|
251
|
+
*/
|
|
252
|
+
declare const lightTheme: {
|
|
253
|
+
readonly colors: {
|
|
254
|
+
readonly content: {
|
|
255
|
+
readonly disabled: "#B0B0B0";
|
|
256
|
+
readonly primary: "#000000";
|
|
257
|
+
readonly secondary: "#212121";
|
|
258
|
+
readonly inverse: {
|
|
259
|
+
readonly primary: "#FFFFFF";
|
|
260
|
+
};
|
|
261
|
+
};
|
|
262
|
+
readonly background: {
|
|
263
|
+
readonly primary: "#FFFFFF";
|
|
264
|
+
readonly tertiary: "#EDEFEE";
|
|
265
|
+
readonly tertiaryPressed: "#D1D2D3";
|
|
266
|
+
readonly inverse: {
|
|
267
|
+
readonly primary: "#000000";
|
|
268
|
+
};
|
|
269
|
+
};
|
|
270
|
+
readonly borders: {
|
|
271
|
+
readonly default: "#E0E0E0";
|
|
272
|
+
};
|
|
273
|
+
readonly transparent: "transparent";
|
|
274
|
+
};
|
|
275
|
+
readonly spacing: {
|
|
276
|
+
readonly 0: 0;
|
|
277
|
+
readonly 2: 2;
|
|
278
|
+
readonly 4: 4;
|
|
279
|
+
readonly 6: 6;
|
|
280
|
+
readonly 8: 8;
|
|
281
|
+
readonly 12: 12;
|
|
282
|
+
readonly 16: 16;
|
|
283
|
+
readonly 20: 20;
|
|
284
|
+
readonly 24: 24;
|
|
285
|
+
};
|
|
286
|
+
};
|
|
287
|
+
declare const darkTheme: {
|
|
288
|
+
readonly colors: {
|
|
289
|
+
readonly content: {
|
|
290
|
+
readonly disabled: "#bdbdbd";
|
|
291
|
+
readonly primary: "#FFFFFF";
|
|
292
|
+
readonly secondary: "#e8e8e8";
|
|
293
|
+
readonly inverse: {
|
|
294
|
+
readonly primary: "#000000";
|
|
295
|
+
};
|
|
296
|
+
};
|
|
297
|
+
readonly background: {
|
|
298
|
+
readonly primary: "#000000";
|
|
299
|
+
readonly tertiary: "#111111";
|
|
300
|
+
readonly tertiaryPressed: "#212121";
|
|
301
|
+
readonly inverse: {
|
|
302
|
+
readonly primary: "#FFFFFF";
|
|
303
|
+
};
|
|
304
|
+
};
|
|
305
|
+
readonly borders: {
|
|
306
|
+
readonly default: "#5c5c5c";
|
|
307
|
+
};
|
|
308
|
+
readonly transparent: "transparent";
|
|
309
|
+
};
|
|
310
|
+
readonly spacing: {
|
|
311
|
+
readonly 0: 0;
|
|
312
|
+
readonly 2: 2;
|
|
313
|
+
readonly 4: 4;
|
|
314
|
+
readonly 6: 6;
|
|
315
|
+
readonly 8: 8;
|
|
316
|
+
readonly 12: 12;
|
|
317
|
+
readonly 16: 16;
|
|
318
|
+
readonly 20: 20;
|
|
319
|
+
readonly 24: 24;
|
|
320
|
+
};
|
|
321
|
+
};
|
|
322
|
+
type BaseTheme = typeof lightTheme | typeof darkTheme;
|
|
323
|
+
|
|
324
|
+
interface CalendarRowWeekProps {
|
|
325
|
+
children: ReactNode;
|
|
326
|
+
spacing?: keyof BaseTheme["spacing"];
|
|
327
|
+
theme?: CalendarRowWeekTheme;
|
|
328
|
+
}
|
|
329
|
+
interface CalendarRowWeekTheme {
|
|
330
|
+
container?: ViewStyle;
|
|
331
|
+
}
|
|
332
|
+
declare const CalendarRowWeek: ({ children, spacing, theme, }: CalendarRowWeekProps) => react_jsx_runtime.JSX.Element;
|
|
333
|
+
|
|
334
|
+
type PressableLike = React.ComponentType<Pick<PressableProps, "children" | "style" | "disabled"> & {
|
|
335
|
+
onPress: () => void;
|
|
336
|
+
}>;
|
|
337
|
+
interface CalendarTheme {
|
|
338
|
+
rowMonth?: CalendarRowMonthProps["theme"];
|
|
339
|
+
rowWeek?: CalendarRowWeekProps["theme"];
|
|
340
|
+
itemWeekName?: CalendarItemWeekNameProps["theme"];
|
|
341
|
+
itemEmpty?: CalendarItemEmptyProps["theme"];
|
|
342
|
+
itemDayContainer?: CalendarItemDayContainerProps["theme"];
|
|
343
|
+
/**
|
|
344
|
+
* The theme for the day. `base` is applied before any state, allowing you to
|
|
345
|
+
* set a base value once and use it for all states.
|
|
346
|
+
*/
|
|
347
|
+
itemDay?: CalendarItemDayProps["theme"];
|
|
348
|
+
}
|
|
349
|
+
type CalendarOnDayPress = (dateId: string) => void;
|
|
350
|
+
interface CalendarProps extends UseCalendarParams {
|
|
351
|
+
/**
|
|
352
|
+
* A unique identifier for this calendar instance. This is useful if you
|
|
353
|
+
* need to render more than one calendar at once. This allows Legend Calendar
|
|
354
|
+
* to scope its state to the given instance.
|
|
355
|
+
*
|
|
356
|
+
* No need to get fancy with `uuid` or anything like that - a simple static
|
|
357
|
+
* string is enough.
|
|
358
|
+
*
|
|
359
|
+
* If not provided, Legend Calendar will use a default value which will hoist
|
|
360
|
+
* the state in a global scope.
|
|
361
|
+
*/
|
|
362
|
+
calendarInstanceId?: string;
|
|
363
|
+
/**
|
|
364
|
+
* The spacing between each calendar row (the month header, the week days row,
|
|
365
|
+
* and the weeks row)
|
|
366
|
+
* @defaultValue 8
|
|
367
|
+
*/
|
|
368
|
+
calendarRowVerticalSpacing?: number;
|
|
369
|
+
/**
|
|
370
|
+
* The spacing between each day in the weeks row.
|
|
371
|
+
* @defaultValue 8
|
|
372
|
+
*/
|
|
373
|
+
calendarRowHorizontalSpacing?: number;
|
|
374
|
+
/**
|
|
375
|
+
* The height of each day cell.
|
|
376
|
+
* @defaultValue 32
|
|
377
|
+
*/
|
|
378
|
+
calendarDayHeight?: number;
|
|
379
|
+
/**
|
|
380
|
+
* The height of the week day's header.
|
|
381
|
+
* @defaultValue calendarDayHeight
|
|
382
|
+
*/
|
|
383
|
+
calendarWeekHeaderHeight?: number;
|
|
384
|
+
/**
|
|
385
|
+
* The height of the month header.
|
|
386
|
+
* @defaultValue 20
|
|
387
|
+
*/
|
|
388
|
+
calendarMonthHeaderHeight?: number;
|
|
389
|
+
/**
|
|
390
|
+
* When set, Legend Calendar will use this color scheme instead of the system's
|
|
391
|
+
* value (`light|dark`). This is useful if your app doesn't support dark-mode,
|
|
392
|
+
* for example.
|
|
393
|
+
*
|
|
394
|
+
* We don't advise using this prop - ideally, your app should reflect the
|
|
395
|
+
* user's preferences.
|
|
396
|
+
* @defaultValue undefined
|
|
397
|
+
*/
|
|
398
|
+
calendarColorScheme?: ColorSchemeName;
|
|
399
|
+
/**
|
|
400
|
+
* The callback to be called when a day is pressed.
|
|
401
|
+
*/
|
|
402
|
+
onCalendarDayPress: CalendarOnDayPress;
|
|
403
|
+
/** Theme to customize the calendar component. */
|
|
404
|
+
theme?: CalendarTheme;
|
|
405
|
+
/** Optional component to replace the default <Pressable> component. */
|
|
406
|
+
CalendarPressableComponent?: PressableLike;
|
|
407
|
+
}
|
|
408
|
+
declare const Calendar$1: react.NamedExoticComponent<CalendarProps>;
|
|
409
|
+
|
|
410
|
+
interface CalendarMonth {
|
|
411
|
+
id: string;
|
|
412
|
+
date: Date;
|
|
413
|
+
numberOfWeeks: number;
|
|
414
|
+
}
|
|
415
|
+
interface UseCalendarListParams extends Pick<UseCalendarParams, "calendarMinDateId" | "calendarMaxDateId"> {
|
|
416
|
+
/**
|
|
417
|
+
* The initial month to open the calendar to, as a `YYYY-MM-DD` string.
|
|
418
|
+
* @defaultValue today
|
|
419
|
+
*/
|
|
420
|
+
calendarInitialMonthId?: string;
|
|
421
|
+
/**
|
|
422
|
+
* How many months to show before the current month. Only applicable if
|
|
423
|
+
* `calendarMinDateId` is not set.
|
|
424
|
+
*/
|
|
425
|
+
calendarPastScrollRangeInMonths: number;
|
|
426
|
+
/**
|
|
427
|
+
* How many months to show after the current month. Applicable if
|
|
428
|
+
* `calendarMaxDateId` is not set.
|
|
429
|
+
*/
|
|
430
|
+
calendarFutureScrollRangeInMonths: number;
|
|
431
|
+
calendarFirstDayOfWeek: "monday" | "sunday";
|
|
432
|
+
}
|
|
433
|
+
/**
|
|
434
|
+
* Returns a list of months to display in the calendar, and methods to append
|
|
435
|
+
* and prepend months to the list.
|
|
436
|
+
*/
|
|
437
|
+
declare const useCalendarList: ({ calendarInitialMonthId, calendarPastScrollRangeInMonths, calendarFutureScrollRangeInMonths, calendarFirstDayOfWeek, calendarMaxDateId, calendarMinDateId, }: UseCalendarListParams) => {
|
|
438
|
+
/**
|
|
439
|
+
* The list of months to display in the calendar.
|
|
440
|
+
*/
|
|
441
|
+
monthList: CalendarMonth[];
|
|
442
|
+
/**
|
|
443
|
+
* The index of the initial month in the list.
|
|
444
|
+
*/
|
|
445
|
+
initialMonthIndex: number;
|
|
446
|
+
/**
|
|
447
|
+
* Appends new months to the list.
|
|
448
|
+
*/
|
|
449
|
+
appendMonths: (numberOfMonths: number) => CalendarMonth[];
|
|
450
|
+
/**
|
|
451
|
+
* Prepends new months to the list.
|
|
452
|
+
*/
|
|
453
|
+
prependMonths: (numberOfMonths: number) => CalendarMonth[];
|
|
454
|
+
/**
|
|
455
|
+
* Adds missing months to the list, so that the target month is included.
|
|
456
|
+
*/
|
|
457
|
+
addMissingMonths: (targetMonthId: string) => CalendarMonth[];
|
|
458
|
+
};
|
|
459
|
+
/**
|
|
460
|
+
* Returns the absolute height for a month, accounting for the spacings and
|
|
461
|
+
* headers.
|
|
462
|
+
*/
|
|
463
|
+
declare const getHeightForMonth: ({ calendarRowVerticalSpacing: vSpacing, calendarDayHeight: day, calendarWeekHeaderHeight: weekName, calendarMonthHeaderHeight: header, calendarAdditionalHeight: extraHeight, calendarMonth, calendarSpacing, }: {
|
|
464
|
+
calendarAdditionalHeight: number;
|
|
465
|
+
calendarDayHeight: number;
|
|
466
|
+
calendarMonthHeaderHeight: number;
|
|
467
|
+
calendarRowVerticalSpacing: number;
|
|
468
|
+
calendarWeekHeaderHeight: number;
|
|
469
|
+
calendarMonth: CalendarMonth;
|
|
470
|
+
calendarSpacing: number;
|
|
471
|
+
}) => number;
|
|
472
|
+
|
|
473
|
+
/**
|
|
474
|
+
* Represents each `CalendarList` item. It's enhanced with the required
|
|
475
|
+
* `Calendar` props to simplify building custom `Calendar` components.
|
|
476
|
+
*/
|
|
477
|
+
type CalendarMonthEnhanced = CalendarMonth & {
|
|
478
|
+
calendarProps: Omit<CalendarProps, "calendarMonthId">;
|
|
479
|
+
};
|
|
480
|
+
interface CalendarListProps extends Omit<CalendarProps, "calendarMonthId">, Omit<LegendListProps<CalendarMonthEnhanced>, "renderItem" | "data" | "children"> {
|
|
481
|
+
/**
|
|
482
|
+
* How many months to show before the current month. Once the user scrolls
|
|
483
|
+
* past this range and if they haven't exceeded the `calendarMinDateId`, new
|
|
484
|
+
* months are prepended in this increment.
|
|
485
|
+
* @defaultValue 12
|
|
486
|
+
*/
|
|
487
|
+
calendarPastScrollRangeInMonths?: number;
|
|
488
|
+
/**
|
|
489
|
+
* How many months to show after the current month. Once the user scrolls
|
|
490
|
+
* past this range and if they haven't exceeded the `calendarMaxDateId`, new
|
|
491
|
+
* months are appended in this increment.
|
|
492
|
+
* @defaultValue 12
|
|
493
|
+
*/
|
|
494
|
+
calendarFutureScrollRangeInMonths?: number;
|
|
495
|
+
/**
|
|
496
|
+
* An additional height to use in the month's height calculation. Useful when
|
|
497
|
+
* providing a custom `Calendar` component with extra content such as a
|
|
498
|
+
* footer.
|
|
499
|
+
*/
|
|
500
|
+
calendarAdditionalHeight?: number;
|
|
501
|
+
/**
|
|
502
|
+
* The vertical spacing between each `<Calendar />` component.
|
|
503
|
+
* @defaultValue 20
|
|
504
|
+
*/
|
|
505
|
+
calendarSpacing?: number;
|
|
506
|
+
/**
|
|
507
|
+
* The initial month to open the calendar to, as a `YYYY-MM-DD` string.
|
|
508
|
+
* Defaults to the current month.
|
|
509
|
+
*
|
|
510
|
+
* **Tip**: To convert to date ID, use `toDateId(date)`.
|
|
511
|
+
*/
|
|
512
|
+
calendarInitialMonthId?: string;
|
|
513
|
+
/**
|
|
514
|
+
* Overwrites the default `Calendar` component.
|
|
515
|
+
*
|
|
516
|
+
* **Important**: when providing a custom implementation, make sure to
|
|
517
|
+
* manually set all the spacing and height props to ensure the list scrolls
|
|
518
|
+
* to the right offset:
|
|
519
|
+
* - calendarDayHeight
|
|
520
|
+
* - calendarMonthHeaderHeight
|
|
521
|
+
* - calendarWeekHeaderHeight
|
|
522
|
+
* - calendarAdditionalHeight
|
|
523
|
+
* - calendarRowVerticalSpacing
|
|
524
|
+
* - calendarSpacing
|
|
525
|
+
*/
|
|
526
|
+
renderItem?: LegendListProps<CalendarMonthEnhanced>["renderItem"];
|
|
527
|
+
}
|
|
528
|
+
interface ImperativeScrollParams {
|
|
529
|
+
/**
|
|
530
|
+
* An additional offset to add to the final scroll position. Useful when
|
|
531
|
+
* you need to slightly change the final scroll position.
|
|
532
|
+
*/
|
|
533
|
+
additionalOffset?: number;
|
|
534
|
+
}
|
|
535
|
+
interface CalendarListRef {
|
|
536
|
+
scrollToMonth: (date: Date, animated: boolean, params?: ImperativeScrollParams) => void;
|
|
537
|
+
scrollToDate: (date: Date, animated: boolean, params?: ImperativeScrollParams) => void;
|
|
538
|
+
scrollToOffset: (offset: number, animated: boolean) => void;
|
|
539
|
+
}
|
|
540
|
+
declare const CalendarList: react.NamedExoticComponent<CalendarListProps & {
|
|
541
|
+
ref?: React.Ref<CalendarListRef>;
|
|
542
|
+
}>;
|
|
543
|
+
|
|
544
|
+
interface HStackProps {
|
|
545
|
+
alignItems?: ViewStyle["alignItems"];
|
|
546
|
+
justifyContent?: ViewStyle["justifyContent"];
|
|
547
|
+
children: ReactNode;
|
|
548
|
+
grow?: boolean;
|
|
549
|
+
shrink?: boolean;
|
|
550
|
+
spacing?: number;
|
|
551
|
+
wrap?: ViewStyle["flexWrap"];
|
|
552
|
+
backgroundColor?: string;
|
|
553
|
+
style?: ViewStyle;
|
|
554
|
+
width?: ViewStyle["width"];
|
|
555
|
+
}
|
|
556
|
+
declare const HStack: ({ alignItems, children, justifyContent, grow, shrink, spacing, wrap, backgroundColor, width, style, }: HStackProps) => react_jsx_runtime.JSX.Element;
|
|
557
|
+
|
|
558
|
+
interface VStackProps {
|
|
559
|
+
children: ReactNode;
|
|
560
|
+
spacing?: number;
|
|
561
|
+
alignItems?: ViewStyle["alignItems"];
|
|
562
|
+
justifyContent?: ViewStyle["justifyContent"];
|
|
563
|
+
/** If the VStack should `flex: 1` to fill the parent's height */
|
|
564
|
+
grow?: boolean;
|
|
565
|
+
}
|
|
566
|
+
declare function VStack({ children, spacing, alignItems, justifyContent, grow, }: VStackProps): react_jsx_runtime.JSX.Element;
|
|
567
|
+
|
|
568
|
+
/**
|
|
569
|
+
* This file houses the public API for the legend-calendar package.
|
|
570
|
+
*/
|
|
571
|
+
type CalendarItemDayNamespace = {
|
|
572
|
+
Container: typeof CalendarItemDayContainer;
|
|
573
|
+
WithContainer: typeof CalendarItemDayWithContainer;
|
|
574
|
+
} & typeof CalendarItemDay;
|
|
575
|
+
declare const CalendarItemDayWithNamespace: CalendarItemDayNamespace;
|
|
576
|
+
|
|
577
|
+
interface CalendarItemNamespace {
|
|
578
|
+
/**
|
|
579
|
+
* Renders the day item of the calendar (e.g. `1`, `2`, `3`, etc.)
|
|
580
|
+
*/
|
|
581
|
+
Day: typeof CalendarItemDayWithNamespace;
|
|
582
|
+
/**
|
|
583
|
+
* Renders the week day name item of the calendar (e.g. `Sun`, `Mon`, `Tue`, etc.)
|
|
584
|
+
*/
|
|
585
|
+
WeekName: typeof CalendarItemWeekName;
|
|
586
|
+
/**
|
|
587
|
+
* Renders an empty item to fill the calendar's grid in the start or end of
|
|
588
|
+
* the month.
|
|
589
|
+
*/
|
|
590
|
+
Empty: typeof CalendarItemEmpty;
|
|
591
|
+
}
|
|
592
|
+
declare const CalendarItemWithNamespace: CalendarItemNamespace;
|
|
593
|
+
interface CalendarRowNamespace {
|
|
594
|
+
/**
|
|
595
|
+
* Renders the month row of the calendar (e.g. `January`, `February`, `March`, etc.)
|
|
596
|
+
*/
|
|
597
|
+
Month: typeof CalendarRowMonth;
|
|
598
|
+
/**
|
|
599
|
+
* Renders each week row of the calendar, including the week day names.
|
|
600
|
+
*/
|
|
601
|
+
Week: typeof CalendarRowWeek;
|
|
602
|
+
}
|
|
603
|
+
declare const CalendarRowWithNamespace: CalendarRowNamespace;
|
|
604
|
+
type CalendarNamespace = {
|
|
605
|
+
Item: typeof CalendarItemWithNamespace;
|
|
606
|
+
Row: typeof CalendarRowWithNamespace;
|
|
607
|
+
List: typeof CalendarList;
|
|
608
|
+
HStack: typeof HStack;
|
|
609
|
+
VStack: typeof VStack;
|
|
610
|
+
} & typeof Calendar$1;
|
|
611
|
+
declare const Calendar: CalendarNamespace;
|
|
612
|
+
|
|
613
|
+
/**
|
|
614
|
+
* Returns the date formatted as YYYY-MM-DD, ensuring timezone doesn't affect
|
|
615
|
+
* the result.
|
|
616
|
+
*/
|
|
617
|
+
declare function toDateId(date: Date): string;
|
|
618
|
+
/**
|
|
619
|
+
* Converts a date ID to a `Date` object, correctly accounting for timezone.
|
|
620
|
+
*/
|
|
621
|
+
declare function fromDateId(dateId: string): Date;
|
|
622
|
+
|
|
623
|
+
interface OnSetActiveDateRangesPayload {
|
|
624
|
+
instanceId?: string;
|
|
625
|
+
ranges: CalendarActiveDateRange[];
|
|
626
|
+
}
|
|
627
|
+
/**
|
|
628
|
+
* An event emitter for the active date ranges. This notifies the calendar items
|
|
629
|
+
* when their state changes, allowing just the affected items to re-render.
|
|
630
|
+
*
|
|
631
|
+
* While this is an implementation detail focused on improving performance, it's
|
|
632
|
+
* exported in case you need to build your own calendar. Check the source code
|
|
633
|
+
* for a reference implementation.
|
|
634
|
+
*/
|
|
635
|
+
declare const activeDateRangesEmitter: mitt.Emitter<{
|
|
636
|
+
onSetActiveDateRanges: OnSetActiveDateRangesPayload;
|
|
637
|
+
}>;
|
|
638
|
+
/**
|
|
639
|
+
* Returns an optimized metadata for a particular day. This hook listens to the
|
|
640
|
+
* `activeDateRanges` emitter, enabling only the affected calendar items to
|
|
641
|
+
* re-render.
|
|
642
|
+
*
|
|
643
|
+
* While this is an implementation detail focused on improving performance, it's
|
|
644
|
+
* exported in case you need to build your own calendar. Check the source code
|
|
645
|
+
* for a reference implementation.
|
|
646
|
+
*/
|
|
647
|
+
declare const useOptimizedDayMetadata: (baseMetadata: CalendarDayMetadata, calendarInstanceId?: string) => CalendarDayMetadata;
|
|
648
|
+
|
|
649
|
+
/**
|
|
650
|
+
* A convenience hook to simplify managing a date range in the calendar in a
|
|
651
|
+
* performant way.
|
|
652
|
+
*/
|
|
653
|
+
declare const useDateRange: (initialDateRange?: CalendarActiveDateRange) => {
|
|
654
|
+
/**
|
|
655
|
+
* The current date range.
|
|
656
|
+
**/
|
|
657
|
+
dateRange: CalendarActiveDateRange;
|
|
658
|
+
/**
|
|
659
|
+
* Derived from the current date range as a convenience when passing to
|
|
660
|
+
* the `<Calendar.List />` component.
|
|
661
|
+
*/
|
|
662
|
+
calendarActiveDateRanges: CalendarActiveDateRange[];
|
|
663
|
+
/**
|
|
664
|
+
* Clears the current date range.
|
|
665
|
+
*/
|
|
666
|
+
onClearDateRange: () => void;
|
|
667
|
+
/**
|
|
668
|
+
* Callback to pass to the `<Calendar.List />` component to handle date
|
|
669
|
+
* range.
|
|
670
|
+
*/
|
|
671
|
+
onCalendarDayPress: CalendarOnDayPress;
|
|
672
|
+
/**
|
|
673
|
+
* Whether the current date range is valid (e.g. has both start and end
|
|
674
|
+
* dates)
|
|
675
|
+
*/
|
|
676
|
+
isDateRangeValid: boolean;
|
|
677
|
+
};
|
|
678
|
+
|
|
679
|
+
export { Calendar, type CalendarActiveDateRange, type CalendarDayMetadata, type CalendarItemDayContainerProps, type CalendarItemDayProps, type CalendarItemDayWithContainerProps, type CalendarItemEmptyProps, type CalendarItemWeekNameProps, type CalendarListProps, type CalendarListRef, type CalendarMonth, type CalendarMonthEnhanced, type CalendarOnDayPress, type CalendarProps, type CalendarRowMonthProps, type CalendarRowWeekProps, type CalendarTheme, type HStackProps, type UseCalendarListParams, type UseCalendarParams, type VStackProps, activeDateRangesEmitter, buildCalendar, fromDateId, getHeightForMonth, toDateId, useCalendar, useCalendarList, useDateRange, useOptimizedDayMetadata };
|