@utrecht/calendar-react 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/LICENSE.md +288 -0
- package/dist/CalendarButton.d.ts +6 -0
- package/dist/CalendarButton.d.ts.map +1 -0
- package/dist/CalendarIcon.d.ts +5 -0
- package/dist/CalendarIcon.d.ts.map +1 -0
- package/dist/CalendarNavigation.d.ts +5 -0
- package/dist/CalendarNavigation.d.ts.map +1 -0
- package/dist/CalendarNavigationButtons.d.ts +13 -0
- package/dist/CalendarNavigationButtons.d.ts.map +1 -0
- package/dist/CalendarNavigationLabel.d.ts +5 -0
- package/dist/CalendarNavigationLabel.d.ts.map +1 -0
- package/dist/CalendarTableDaysContainer.d.ts +5 -0
- package/dist/CalendarTableDaysContainer.d.ts.map +1 -0
- package/dist/CalendarTableDaysItem.d.ts +5 -0
- package/dist/CalendarTableDaysItem.d.ts.map +1 -0
- package/dist/CalendarTableDaysItemDay.d.ts +12 -0
- package/dist/CalendarTableDaysItemDay.d.ts.map +1 -0
- package/dist/CalendarTableWeeksContainer.d.ts +3 -0
- package/dist/CalendarTableWeeksContainer.d.ts.map +1 -0
- package/dist/CalendarTableWeeksItem.d.ts +5 -0
- package/dist/CalendarTableWeeksItem.d.ts.map +1 -0
- package/dist/IconArrowLeft.d.ts +8 -0
- package/dist/IconArrowLeft.d.ts.map +1 -0
- package/dist/IconArrowLeftDouble.d.ts +8 -0
- package/dist/IconArrowLeftDouble.d.ts.map +1 -0
- package/dist/IconArrowRight.d.ts +8 -0
- package/dist/IconArrowRight.d.ts.map +1 -0
- package/dist/IconArrowRightDouble.d.ts +8 -0
- package/dist/IconArrowRightDouble.d.ts.map +1 -0
- package/dist/css.d.ts +8 -0
- package/dist/css.d.ts.map +1 -0
- package/dist/css.js +493 -0
- package/dist/css.js.map +1 -0
- package/dist/css.mjs +491 -0
- package/dist/css.mjs.map +1 -0
- package/dist/index.cjs.js +493 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +42 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.js +491 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +43 -0
- package/src/CalendarButton.tsx +11 -0
- package/src/CalendarIcon.tsx +10 -0
- package/src/CalendarNavigation.tsx +9 -0
- package/src/CalendarNavigationButtons.tsx +30 -0
- package/src/CalendarNavigationLabel.tsx +9 -0
- package/src/CalendarTableDaysContainer.tsx +13 -0
- package/src/CalendarTableDaysItem.tsx +8 -0
- package/src/CalendarTableDaysItemDay.tsx +37 -0
- package/src/CalendarTableWeeksContainer.tsx +7 -0
- package/src/CalendarTableWeeksItem.tsx +10 -0
- package/src/IconArrowLeft.tsx +12 -0
- package/src/IconArrowLeftDouble.tsx +13 -0
- package/src/IconArrowRight.tsx +12 -0
- package/src/IconArrowRightDouble.tsx +13 -0
- package/src/css.tsx +9 -0
- package/src/index.test.tsx +145 -0
- package/src/index.tsx +199 -0
|
@@ -0,0 +1,493 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var dateFns = require('date-fns');
|
|
5
|
+
var locale = require('date-fns/locale');
|
|
6
|
+
var chunk = require('lodash.chunk');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var clsx = require('clsx');
|
|
9
|
+
|
|
10
|
+
/******************************************************************************
|
|
11
|
+
Copyright (c) Microsoft Corporation.
|
|
12
|
+
|
|
13
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
14
|
+
purpose with or without fee is hereby granted.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
17
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
18
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
19
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
20
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
21
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
22
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
23
|
+
***************************************************************************** */
|
|
24
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
function __rest$1(s, e) {
|
|
28
|
+
var t = {};
|
|
29
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
30
|
+
t[p] = s[p];
|
|
31
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
32
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
33
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
34
|
+
t[p[i]] = s[p[i]];
|
|
35
|
+
}
|
|
36
|
+
return t;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
40
|
+
var e = new Error(message);
|
|
41
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const CalendarNavigation = _a => {
|
|
45
|
+
var {
|
|
46
|
+
children
|
|
47
|
+
} = _a,
|
|
48
|
+
props = __rest$1(_a, ["children"]);
|
|
49
|
+
return jsxRuntime.jsx("div", Object.assign({
|
|
50
|
+
className: "utrecht-calendar__navigation"
|
|
51
|
+
}, props, {
|
|
52
|
+
children: children
|
|
53
|
+
}));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
/******************************************************************************
|
|
57
|
+
Copyright (c) Microsoft Corporation.
|
|
58
|
+
|
|
59
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
60
|
+
purpose with or without fee is hereby granted.
|
|
61
|
+
|
|
62
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
63
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
64
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
65
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
66
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
67
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
68
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
69
|
+
***************************************************************************** */
|
|
70
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
function __rest(s, e) {
|
|
74
|
+
var t = {};
|
|
75
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
76
|
+
t[p] = s[p];
|
|
77
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
78
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
79
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
80
|
+
t[p[i]] = s[p[i]];
|
|
81
|
+
}
|
|
82
|
+
return t;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
86
|
+
var e = new Error(message);
|
|
87
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
|
|
91
|
+
var {
|
|
92
|
+
appearance,
|
|
93
|
+
busy,
|
|
94
|
+
disabled,
|
|
95
|
+
children,
|
|
96
|
+
className,
|
|
97
|
+
hint,
|
|
98
|
+
pressed,
|
|
99
|
+
type
|
|
100
|
+
} = _a,
|
|
101
|
+
restProps = __rest(_a, ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"]);
|
|
102
|
+
return jsxRuntime.jsx("button", Object.assign({
|
|
103
|
+
ref: ref,
|
|
104
|
+
className: clsx('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', hint === 'danger' && 'utrecht-button--danger', hint === 'warning' && 'utrecht-button--warning', hint === 'ready' && 'utrecht-button--ready', pressed === true && 'utrecht-button--pressed', className),
|
|
105
|
+
"aria-busy": busy || undefined,
|
|
106
|
+
"aria-pressed": typeof pressed === 'boolean' ? pressed : undefined,
|
|
107
|
+
disabled: disabled,
|
|
108
|
+
type: type || 'button'
|
|
109
|
+
}, restProps, {
|
|
110
|
+
children: children
|
|
111
|
+
}));
|
|
112
|
+
});
|
|
113
|
+
Button.displayName = 'Button';
|
|
114
|
+
|
|
115
|
+
const CalendarButton = _a => {
|
|
116
|
+
var {
|
|
117
|
+
children,
|
|
118
|
+
className
|
|
119
|
+
} = _a,
|
|
120
|
+
props = __rest$1(_a, ["children", "className"]);
|
|
121
|
+
return jsxRuntime.jsx(Button, Object.assign({
|
|
122
|
+
appearance: "subtle-button"
|
|
123
|
+
}, props, {
|
|
124
|
+
className: clsx.clsx('utrecht-calendar__button', className)
|
|
125
|
+
}, {
|
|
126
|
+
children: children
|
|
127
|
+
}));
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
const CalendarIcon = _a => {
|
|
131
|
+
var {
|
|
132
|
+
children
|
|
133
|
+
} = _a,
|
|
134
|
+
props = __rest$1(_a, ["children"]);
|
|
135
|
+
return jsxRuntime.jsx("div", Object.assign({
|
|
136
|
+
className: clsx.clsx('utrecht-calendar__icon')
|
|
137
|
+
}, props, {
|
|
138
|
+
children: children
|
|
139
|
+
}));
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
const CalendarNavigationButtons = _a => {
|
|
143
|
+
var {
|
|
144
|
+
onPreviousClick,
|
|
145
|
+
onNextClick,
|
|
146
|
+
previousIcon,
|
|
147
|
+
nextIcon,
|
|
148
|
+
children
|
|
149
|
+
} = _a,
|
|
150
|
+
props = __rest$1(_a, ["onPreviousClick", "onNextClick", "previousIcon", "nextIcon", "children"]);
|
|
151
|
+
return jsxRuntime.jsxs("div", Object.assign({
|
|
152
|
+
className: "utrecht-calendar__navigation-buttons"
|
|
153
|
+
}, {
|
|
154
|
+
children: [jsxRuntime.jsx(CalendarButton, Object.assign({
|
|
155
|
+
onClick: onPreviousClick
|
|
156
|
+
}, props, {
|
|
157
|
+
children: jsxRuntime.jsx(CalendarIcon, {
|
|
158
|
+
children: previousIcon
|
|
159
|
+
})
|
|
160
|
+
})), children, jsxRuntime.jsx(CalendarButton, Object.assign({
|
|
161
|
+
onClick: onNextClick
|
|
162
|
+
}, props, {
|
|
163
|
+
children: jsxRuntime.jsx(CalendarIcon, {
|
|
164
|
+
children: nextIcon
|
|
165
|
+
})
|
|
166
|
+
}))]
|
|
167
|
+
}));
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
const CalendarNavigationLabel = _a => {
|
|
171
|
+
var {
|
|
172
|
+
children
|
|
173
|
+
} = _a,
|
|
174
|
+
props = __rest$1(_a, ["children"]);
|
|
175
|
+
return jsxRuntime.jsx("time", Object.assign({
|
|
176
|
+
className: "utrecht-calendar__navigation-label"
|
|
177
|
+
}, props, {
|
|
178
|
+
children: children
|
|
179
|
+
}));
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
const CalendarTableDaysContainer = _a => {
|
|
183
|
+
var {
|
|
184
|
+
children
|
|
185
|
+
} = _a,
|
|
186
|
+
props = __rest$1(_a, ["children"]);
|
|
187
|
+
return jsxRuntime.jsx("tbody", Object.assign({}, props, {
|
|
188
|
+
className: "utrecht-calendar__table-days-container"
|
|
189
|
+
}, {
|
|
190
|
+
children: children
|
|
191
|
+
}));
|
|
192
|
+
};
|
|
193
|
+
|
|
194
|
+
const CalendarTableDaysItem = _a => {
|
|
195
|
+
var {
|
|
196
|
+
children
|
|
197
|
+
} = _a,
|
|
198
|
+
props = __rest$1(_a, ["children"]);
|
|
199
|
+
return jsxRuntime.jsx("tr", Object.assign({}, props, {
|
|
200
|
+
children: children
|
|
201
|
+
}));
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
const CalendarTableDaysItemDay = _a => {
|
|
205
|
+
var {
|
|
206
|
+
day,
|
|
207
|
+
dayOutOfTheMonth,
|
|
208
|
+
isToday,
|
|
209
|
+
emphasis,
|
|
210
|
+
selected,
|
|
211
|
+
disabled
|
|
212
|
+
} = _a,
|
|
213
|
+
props = __rest$1(_a, ["day", "dayOutOfTheMonth", "isToday", "emphasis", "selected", "disabled"]);
|
|
214
|
+
return jsxRuntime.jsx("td", {
|
|
215
|
+
children: jsxRuntime.jsx(CalendarButton, Object.assign({
|
|
216
|
+
className: clsx('utrecht-calendar__table-days-item-day', {
|
|
217
|
+
'utrecht-calendar__table-days-item-day--out-of-the-month': dayOutOfTheMonth
|
|
218
|
+
}, {
|
|
219
|
+
'utrecht-calendar__table-days-item-day--is-today': isToday
|
|
220
|
+
}, {
|
|
221
|
+
'utrecht-calendar__table-days-item-day--emphasis': emphasis
|
|
222
|
+
}, {
|
|
223
|
+
'utrecht-calendar__table-days-item-day--selected': selected
|
|
224
|
+
}),
|
|
225
|
+
disabled: disabled
|
|
226
|
+
}, props, {
|
|
227
|
+
children: day
|
|
228
|
+
}))
|
|
229
|
+
});
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
const CalendarTableWeeksContainer = ({
|
|
233
|
+
children
|
|
234
|
+
}) => jsxRuntime.jsx("thead", Object.assign({
|
|
235
|
+
className: "utrecht-calendar__table-weeks-container"
|
|
236
|
+
}, {
|
|
237
|
+
children: jsxRuntime.jsx("tr", Object.assign({
|
|
238
|
+
className: "utrecht-calendar__table-weeks-container-content"
|
|
239
|
+
}, {
|
|
240
|
+
children: children
|
|
241
|
+
}))
|
|
242
|
+
}));
|
|
243
|
+
|
|
244
|
+
const CalendarTableWeeksItem = _a => {
|
|
245
|
+
var {
|
|
246
|
+
children
|
|
247
|
+
} = _a,
|
|
248
|
+
props = __rest$1(_a, ["children"]);
|
|
249
|
+
return jsxRuntime.jsx("th", Object.assign({}, props, {
|
|
250
|
+
className: "utrecht-calendar__table-weeks-item"
|
|
251
|
+
}, {
|
|
252
|
+
children: children
|
|
253
|
+
}));
|
|
254
|
+
};
|
|
255
|
+
|
|
256
|
+
const IconArrowLeft = _a => {
|
|
257
|
+
var {
|
|
258
|
+
title,
|
|
259
|
+
titleId
|
|
260
|
+
} = _a,
|
|
261
|
+
props = __rest$1(_a, ["title", "titleId"]);
|
|
262
|
+
return jsxRuntime.jsxs("svg", Object.assign({
|
|
263
|
+
width: "100%",
|
|
264
|
+
height: "100%",
|
|
265
|
+
fill: "none",
|
|
266
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
267
|
+
"aria-labelledby": titleId
|
|
268
|
+
}, props, {
|
|
269
|
+
children: [title ? jsxRuntime.jsx("title", Object.assign({
|
|
270
|
+
id: titleId
|
|
271
|
+
}, {
|
|
272
|
+
children: title
|
|
273
|
+
})) : null, jsxRuntime.jsx("path", {
|
|
274
|
+
d: "M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41Z",
|
|
275
|
+
fill: "currentColor"
|
|
276
|
+
})]
|
|
277
|
+
}));
|
|
278
|
+
};
|
|
279
|
+
|
|
280
|
+
const IconArrowLeftDouble = _a => {
|
|
281
|
+
var {
|
|
282
|
+
title,
|
|
283
|
+
titleId
|
|
284
|
+
} = _a,
|
|
285
|
+
props = __rest$1(_a, ["title", "titleId"]);
|
|
286
|
+
return jsxRuntime.jsxs("svg", Object.assign({
|
|
287
|
+
width: "100%",
|
|
288
|
+
height: "100%",
|
|
289
|
+
fill: "none",
|
|
290
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
291
|
+
"aria-labelledby": titleId
|
|
292
|
+
}, props, {
|
|
293
|
+
children: [title ? jsxRuntime.jsx("title", Object.assign({
|
|
294
|
+
id: titleId
|
|
295
|
+
}, {
|
|
296
|
+
children: title
|
|
297
|
+
})) : null, jsxRuntime.jsx("path", {
|
|
298
|
+
d: "M17.59 18 19 16.59 14.42 12 19 7.41 17.59 6l-6 6 6 6Z",
|
|
299
|
+
fill: "currentColor"
|
|
300
|
+
}), jsxRuntime.jsx("path", {
|
|
301
|
+
d: "m11 18 1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6 6 6Z",
|
|
302
|
+
fill: "currentColor"
|
|
303
|
+
})]
|
|
304
|
+
}));
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
const IconArrowRight = _a => {
|
|
308
|
+
var {
|
|
309
|
+
title,
|
|
310
|
+
titleId
|
|
311
|
+
} = _a,
|
|
312
|
+
props = __rest$1(_a, ["title", "titleId"]);
|
|
313
|
+
return jsxRuntime.jsxs("svg", Object.assign({
|
|
314
|
+
width: "100%",
|
|
315
|
+
height: "100%",
|
|
316
|
+
fill: "none",
|
|
317
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
318
|
+
"aria-labelledby": titleId
|
|
319
|
+
}, props, {
|
|
320
|
+
children: [title ? jsxRuntime.jsx("title", Object.assign({
|
|
321
|
+
id: titleId
|
|
322
|
+
}, {
|
|
323
|
+
children: title
|
|
324
|
+
})) : null, jsxRuntime.jsx("path", {
|
|
325
|
+
d: "M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41Z",
|
|
326
|
+
fill: "currentColor"
|
|
327
|
+
})]
|
|
328
|
+
}));
|
|
329
|
+
};
|
|
330
|
+
|
|
331
|
+
const IconArrowRightDouble = _a => {
|
|
332
|
+
var {
|
|
333
|
+
title,
|
|
334
|
+
titleId
|
|
335
|
+
} = _a,
|
|
336
|
+
props = __rest$1(_a, ["title", "titleId"]);
|
|
337
|
+
return jsxRuntime.jsxs("svg", Object.assign({
|
|
338
|
+
fill: "none",
|
|
339
|
+
width: "100%",
|
|
340
|
+
height: "100%",
|
|
341
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
342
|
+
"aria-labelledby": titleId
|
|
343
|
+
}, props, {
|
|
344
|
+
children: [title ? jsxRuntime.jsx("title", Object.assign({
|
|
345
|
+
id: titleId
|
|
346
|
+
}, {
|
|
347
|
+
children: title
|
|
348
|
+
})) : null, jsxRuntime.jsx("path", {
|
|
349
|
+
d: "M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6-6-6Z",
|
|
350
|
+
fill: "currentColor"
|
|
351
|
+
}), jsxRuntime.jsx("path", {
|
|
352
|
+
d: "m13 6-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6-6-6Z",
|
|
353
|
+
fill: "currentColor"
|
|
354
|
+
})]
|
|
355
|
+
}));
|
|
356
|
+
};
|
|
357
|
+
|
|
358
|
+
function createCalendar(today) {
|
|
359
|
+
const start = dateFns.startOfWeek(dateFns.startOfMonth(today), {
|
|
360
|
+
weekStartsOn: 1 /* Monday */
|
|
361
|
+
});
|
|
362
|
+
const end = dateFns.endOfWeek(dateFns.addWeeks(start, 5), {
|
|
363
|
+
weekStartsOn: 1 /* Monday */
|
|
364
|
+
});
|
|
365
|
+
return dateFns.eachDayOfInterval({
|
|
366
|
+
start,
|
|
367
|
+
end
|
|
368
|
+
});
|
|
369
|
+
}
|
|
370
|
+
/**
|
|
371
|
+
* Calendar Component
|
|
372
|
+
* powered by date-fns, so that make it easy to use the `date-fns` date functions & locale
|
|
373
|
+
* */
|
|
374
|
+
const Calendar = ({
|
|
375
|
+
onCalendarClick,
|
|
376
|
+
events,
|
|
377
|
+
currentDate,
|
|
378
|
+
locale: locale$1 = locale.enUS,
|
|
379
|
+
previousYearButtonTitle = 'Previous year',
|
|
380
|
+
nextYearButtonTitle = 'Next year',
|
|
381
|
+
previousMonthButtonTitle = 'Previous month',
|
|
382
|
+
nextMonthButtonTitle = 'Next month',
|
|
383
|
+
minDate,
|
|
384
|
+
maxDate
|
|
385
|
+
}) => {
|
|
386
|
+
const [visibleMonth, setVisibleMonth] = react.useState(currentDate || new Date());
|
|
387
|
+
const [selectedDate, setSelectedDate] = react.useState(currentDate);
|
|
388
|
+
const calendar = createCalendar(visibleMonth);
|
|
389
|
+
const start = dateFns.startOfWeek(visibleMonth, {
|
|
390
|
+
weekStartsOn: 1
|
|
391
|
+
});
|
|
392
|
+
const end = dateFns.endOfWeek(visibleMonth, {
|
|
393
|
+
weekStartsOn: 1
|
|
394
|
+
});
|
|
395
|
+
const currentWeek = dateFns.eachDayOfInterval({
|
|
396
|
+
start,
|
|
397
|
+
end
|
|
398
|
+
}).map(day => day);
|
|
399
|
+
const chunksWeeks = chunk(calendar, calendar.length / 6);
|
|
400
|
+
const weeks = chunksWeeks.map(week => week.map(date => {
|
|
401
|
+
const currentEvent = events && events.length > 0 && events.find(e => dateFns.isSameDay(dateFns.endOfDay(dateFns.parseISO(e.date)), date));
|
|
402
|
+
if (currentEvent) {
|
|
403
|
+
return {
|
|
404
|
+
date,
|
|
405
|
+
emphasis: currentEvent.emphasis,
|
|
406
|
+
selected: currentEvent.selected,
|
|
407
|
+
disabled: currentEvent.disabled
|
|
408
|
+
};
|
|
409
|
+
} else {
|
|
410
|
+
return {
|
|
411
|
+
date,
|
|
412
|
+
emphasis: false,
|
|
413
|
+
selected: false,
|
|
414
|
+
disabled: false
|
|
415
|
+
};
|
|
416
|
+
}
|
|
417
|
+
}));
|
|
418
|
+
return jsxRuntime.jsxs("div", Object.assign({
|
|
419
|
+
className: "utrecht-calendar"
|
|
420
|
+
}, {
|
|
421
|
+
children: [jsxRuntime.jsx(CalendarNavigation, {
|
|
422
|
+
children: jsxRuntime.jsx(CalendarNavigationButtons, Object.assign({
|
|
423
|
+
previousIcon: jsxRuntime.jsx(IconArrowLeftDouble, {
|
|
424
|
+
title: previousYearButtonTitle
|
|
425
|
+
}),
|
|
426
|
+
nextIcon: jsxRuntime.jsx(IconArrowRightDouble, {
|
|
427
|
+
title: nextYearButtonTitle
|
|
428
|
+
}),
|
|
429
|
+
onPreviousClick: () => setVisibleMonth(dateFns.setYear(visibleMonth, dateFns.getYear(visibleMonth) - 1)),
|
|
430
|
+
onNextClick: () => setVisibleMonth(dateFns.addYears(visibleMonth, 1))
|
|
431
|
+
}, {
|
|
432
|
+
children: jsxRuntime.jsx(CalendarNavigationButtons, Object.assign({
|
|
433
|
+
previousIcon: jsxRuntime.jsx(IconArrowLeft, {
|
|
434
|
+
title: previousMonthButtonTitle
|
|
435
|
+
}),
|
|
436
|
+
nextIcon: jsxRuntime.jsx(IconArrowRight, {
|
|
437
|
+
title: nextMonthButtonTitle
|
|
438
|
+
}),
|
|
439
|
+
onPreviousClick: () => setVisibleMonth(dateFns.setMonth(visibleMonth, visibleMonth.getMonth() - 1)),
|
|
440
|
+
onNextClick: () => setVisibleMonth(dateFns.addMonths(visibleMonth, 1))
|
|
441
|
+
}, {
|
|
442
|
+
children: jsxRuntime.jsx(CalendarNavigationLabel, Object.assign({
|
|
443
|
+
dateTime: dateFns.format(visibleMonth, 'yyyy-mm')
|
|
444
|
+
}, {
|
|
445
|
+
children: dateFns.format(visibleMonth, 'LLLL Y', {
|
|
446
|
+
locale: locale$1
|
|
447
|
+
})
|
|
448
|
+
}))
|
|
449
|
+
}))
|
|
450
|
+
}))
|
|
451
|
+
}), jsxRuntime.jsxs("table", Object.assign({
|
|
452
|
+
className: "utrecht-calendar__table",
|
|
453
|
+
role: "grid"
|
|
454
|
+
}, {
|
|
455
|
+
children: [jsxRuntime.jsx(CalendarTableWeeksContainer, {
|
|
456
|
+
children: currentWeek && currentWeek.length > 0 && currentWeek.map((day, index) => jsxRuntime.jsx(CalendarTableWeeksItem, Object.assign({
|
|
457
|
+
scope: "col",
|
|
458
|
+
abbr: dateFns.format(day, 'EEEE', {
|
|
459
|
+
locale: locale$1
|
|
460
|
+
})
|
|
461
|
+
}, {
|
|
462
|
+
children: dateFns.format(day, 'EEEEEE', {
|
|
463
|
+
locale: locale$1
|
|
464
|
+
})
|
|
465
|
+
}), index))
|
|
466
|
+
}), jsxRuntime.jsx(CalendarTableDaysContainer, {
|
|
467
|
+
children: weeks && weeks.length > 0 && weeks.map((week, index) => jsxRuntime.jsx(CalendarTableDaysItem, {
|
|
468
|
+
children: week.map((day, index) => {
|
|
469
|
+
return jsxRuntime.jsx(CalendarTableDaysItemDay, {
|
|
470
|
+
isToday: dateFns.isSameDay(day.date, Date.now()),
|
|
471
|
+
dayOutOfTheMonth: !dateFns.isSameMonth(day.date, visibleMonth),
|
|
472
|
+
onClick: () => {
|
|
473
|
+
setVisibleMonth(day.date);
|
|
474
|
+
setSelectedDate(day.date);
|
|
475
|
+
onCalendarClick(dateFns.formatISO(day.date));
|
|
476
|
+
},
|
|
477
|
+
"aria-label": dateFns.format(day.date, 'eeee dd LLLL Y', {
|
|
478
|
+
locale: locale$1
|
|
479
|
+
}),
|
|
480
|
+
day: day.date.getDate().toString(),
|
|
481
|
+
emphasis: day.emphasis,
|
|
482
|
+
selected: day.selected || selectedDate && dateFns.isSameDay(day.date, selectedDate),
|
|
483
|
+
disabled: day.disabled || minDate && dateFns.isBefore(day.date, dateFns.startOfDay(minDate)) || maxDate && dateFns.isAfter(day.date, dateFns.endOfDay(maxDate))
|
|
484
|
+
}, index);
|
|
485
|
+
})
|
|
486
|
+
}, index))
|
|
487
|
+
})]
|
|
488
|
+
}))]
|
|
489
|
+
}));
|
|
490
|
+
};
|
|
491
|
+
|
|
492
|
+
exports.Calendar = Calendar;
|
|
493
|
+
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../button-react/dist/index.esm.js"],"sourcesContent":["import { jsx } from 'react/jsx-runtime';\nimport clsx from 'clsx';\nimport { forwardRef } from 'react';\n\n/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol */\r\n\r\n\r\nfunction __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\ntypeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n var e = new Error(message);\r\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\n\nconst Button = /*#__PURE__*/forwardRef((_a, ref) => {\n var {\n appearance,\n busy,\n disabled,\n children,\n className,\n hint,\n pressed,\n type\n } = _a,\n restProps = __rest(_a, [\"appearance\", \"busy\", \"disabled\", \"children\", \"className\", \"hint\", \"pressed\", \"type\"]);\n return jsx(\"button\", Object.assign({\n ref: ref,\n className: clsx('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', hint === 'danger' && 'utrecht-button--danger', hint === 'warning' && 'utrecht-button--warning', hint === 'ready' && 'utrecht-button--ready', pressed === true && 'utrecht-button--pressed', className),\n \"aria-busy\": busy || undefined,\n \"aria-pressed\": typeof pressed === 'boolean' ? pressed : undefined,\n disabled: disabled,\n type: type || 'button'\n }, restProps, {\n children: children\n }));\n});\nButton.displayName = 'Button';\nconst PrimaryActionButton = _a => {\n var args = __rest(_a, []);\n return jsx(Button, Object.assign({}, args, {\n appearance: \"primary-action-button\"\n }));\n};\nPrimaryActionButton.displayName = 'PrimaryActionButton';\nconst SecondaryActionButton = _a => {\n var args = __rest(_a, []);\n return jsx(Button, Object.assign({}, args, {\n appearance: \"secondary-action-button\"\n }));\n};\nSecondaryActionButton.displayName = 'SecondaryActionButton';\nconst SubtleButton = _a => {\n var args = __rest(_a, []);\n return jsx(Button, Object.assign({}, args, {\n appearance: \"subtle-button\"\n }));\n};\nSubtleButton.displayName = 'SubtleButton';\n\nexport { Button, PrimaryActionButton, SecondaryActionButton, SubtleButton };\n//# sourceMappingURL=index.esm.js.map\n"],"names":["forwardRef","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;AACtB,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;AACf,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;AACvF,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACpB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,OAAO,MAAM,CAAC,qBAAqB,KAAK,UAAU;AACvE,QAAQ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAChF,YAAY,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1F,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClC,SAAS;AACT,IAAI,OAAO,CAAC,CAAC;AACb,CAAC;AACD;AACA,OAAO,eAAe,KAAK,UAAU,GAAG,eAAe,GAAG,UAAU,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE;AAChG,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;AAC/B,IAAI,OAAO,CAAC,CAAC,IAAI,GAAG,iBAAiB,EAAE,CAAC,CAAC,KAAK,GAAG,KAAK,EAAE,CAAC,CAAC,UAAU,GAAG,UAAU,EAAE,CAAC,CAAC;AACrF,CAAC,CAAC;AACF;AACA,MAAM,MAAM,gBAAgBA,gBAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AACpD,EAAE,IAAI;AACN,MAAM,UAAU;AAChB,MAAM,IAAI;AACV,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,SAAS;AACf,MAAM,IAAI;AACV,MAAM,OAAO;AACb,MAAM,IAAI;AACV,KAAK,GAAG,EAAE;AACV,IAAI,SAAS,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AACnH,EAAE,OAAOC,cAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC;AACrC,IAAI,GAAG,EAAE,GAAG;AACZ,IAAI,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,IAAI,sBAAsB,EAAE,QAAQ,IAAI,0BAA0B,EAAE,IAAI,KAAK,QAAQ,IAAI,wBAAwB,EAAE,UAAU,KAAK,uBAAuB,IAAI,gCAAgC,EAAE,UAAU,KAAK,yBAAyB,IAAI,kCAAkC,EAAE,UAAU,KAAK,eAAe,IAAI,wBAAwB,EAAE,IAAI,KAAK,QAAQ,IAAI,wBAAwB,EAAE,IAAI,KAAK,SAAS,IAAI,yBAAyB,EAAE,IAAI,KAAK,OAAO,IAAI,uBAAuB,EAAE,OAAO,KAAK,IAAI,IAAI,yBAAyB,EAAE,SAAS,CAAC;AAC3jB,IAAI,WAAW,EAAE,IAAI,IAAI,SAAS;AAClC,IAAI,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,GAAG,OAAO,GAAG,SAAS;AACtE,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,IAAI,EAAE,IAAI,IAAI,QAAQ;AAC1B,GAAG,EAAE,SAAS,EAAE;AAChB,IAAI,QAAQ,EAAE,QAAQ;AACtB,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,CAAC,CAAC;AACH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Locale } from 'date-fns';
|
|
2
|
+
export type Events = {
|
|
3
|
+
date: string;
|
|
4
|
+
emphasis?: boolean;
|
|
5
|
+
selected?: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export interface CalendarProps {
|
|
9
|
+
/**
|
|
10
|
+
* `onCalendarClick` It's a callback function that returns the selected date, triggered when you click on the day
|
|
11
|
+
*
|
|
12
|
+
* */
|
|
13
|
+
onCalendarClick: (date: string) => void;
|
|
14
|
+
/**
|
|
15
|
+
* `events` An array of event objects that contain some properties that allow you to change the calendar day style base on your value
|
|
16
|
+
* `{date?: Date; emphasis?: boolean; selected?: boolean; disabled?: boolean;}`
|
|
17
|
+
*
|
|
18
|
+
* */
|
|
19
|
+
events?: Events[];
|
|
20
|
+
/**
|
|
21
|
+
* `currentDate` The default value is `new Date()`, but you can provide a different date
|
|
22
|
+
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
|
|
23
|
+
* */
|
|
24
|
+
currentDate?: Date;
|
|
25
|
+
/**
|
|
26
|
+
* `locale` to change the calendar language by using 'date-fns/locale'
|
|
27
|
+
* `import { nl, enUS } from 'date-fns/locale';`
|
|
28
|
+
* */
|
|
29
|
+
locale?: Locale;
|
|
30
|
+
previousYearButtonTitle?: string;
|
|
31
|
+
nextYearButtonTitle?: string;
|
|
32
|
+
previousMonthButtonTitle?: string;
|
|
33
|
+
nextMonthButtonTitle?: string;
|
|
34
|
+
minDate?: Date;
|
|
35
|
+
maxDate?: Date;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Calendar Component
|
|
39
|
+
* powered by date-fns, so that make it easy to use the `date-fns` date functions & locale
|
|
40
|
+
* */
|
|
41
|
+
export declare const Calendar: ({ onCalendarClick, events, currentDate, locale, previousYearButtonTitle, nextYearButtonTitle, previousMonthButtonTitle, nextMonthButtonTitle, minDate, maxDate, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAcL,MAAM,EAOP,MAAM,UAAU,CAAC;AA2BlB,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B;;;SAGK;IACL,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;SAIK;IACL,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;;SAGK;IACL,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;SAGK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB;AAED;;;KAGK;AAEL,eAAO,MAAM,QAAQ,sKAWlB,aAAa,4CAiGf,CAAC"}
|