@koine/react 2.0.0-beta.80 → 2.0.0-beta.82
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/FaviconTags.cjs.js +1 -3
- package/FaviconTags.esm.js +1 -3
- package/Meta.cjs.js +1 -3
- package/Meta.esm.js +1 -3
- package/NoJs.cjs.js +1 -5
- package/NoJs.esm.js +1 -5
- package/calendar.cjs.js +8 -534
- package/calendar.esm.js +8 -534
- package/classed.cjs.js +1 -39
- package/classed.esm.js +1 -39
- package/createUseMediaQueryWidth.cjs.js +1 -34
- package/createUseMediaQueryWidth.d.ts +1 -1
- package/createUseMediaQueryWidth.esm.js +1 -34
- package/extendComponent.cjs.js +1 -7
- package/extendComponent.d.ts +1 -1
- package/extendComponent.esm.js +1 -7
- package/forms/antispam.d.ts +1 -1
- package/forms.cjs.js +1 -27
- package/forms.esm.js +1 -27
- package/mergeRefs.cjs.js +1 -12
- package/mergeRefs.d.ts +1 -1
- package/mergeRefs.esm.js +1 -12
- package/package.json +3 -3
- package/useAsyncFn.cjs.js +1 -23
- package/useAsyncFn.esm.js +1 -23
- package/useFirstMountState.cjs.js +1 -8
- package/useFirstMountState.esm.js +1 -8
- package/useFixedOffset.cjs.js +1 -37
- package/useFixedOffset.esm.js +2 -38
- package/useFocus.cjs.js +1 -7
- package/useFocus.esm.js +1 -7
- package/useInterval.cjs.js +1 -17
- package/useInterval.esm.js +1 -17
- package/useIsomorphicLayoutEffect.cjs.js +1 -1
- package/useIsomorphicLayoutEffect.esm.js +1 -1
- package/useKeyUp.cjs.js +1 -13
- package/useKeyUp.esm.js +1 -13
- package/useMeasure.cjs.js +1 -115
- package/useMeasure.esm.js +1 -115
- package/useMountedState.cjs.js +1 -11
- package/useMountedState.esm.js +1 -11
- package/useNavigateAway.cjs.js +1 -22
- package/useNavigateAway.esm.js +1 -22
- package/usePrevious.cjs.js +1 -7
- package/usePrevious.esm.js +1 -7
- package/usePreviousRef.cjs.js +1 -7
- package/usePreviousRef.esm.js +1 -7
- package/useScrollPosition.cjs.js +1 -53
- package/useScrollPosition.esm.js +1 -53
- package/useScrollThreshold.cjs.js +1 -22
- package/useScrollThreshold.esm.js +1 -22
- package/useScrollTo.cjs.js +1 -16
- package/useScrollTo.esm.js +1 -16
- package/useSmoothScroll.cjs.js +1 -27
- package/useSmoothScroll.esm.js +1 -27
- package/useSpinDelay.cjs.js +1 -34
- package/useSpinDelay.esm.js +1 -34
- package/useTraceUpdate.cjs.js +1 -15
- package/useTraceUpdate.esm.js +1 -15
- package/useUpdateEffect.cjs.js +1 -8
- package/useUpdateEffect.esm.js +1 -8
- package/useWindowSize.cjs.js +1 -17
- package/useWindowSize.esm.js +1 -17
package/FaviconTags.cjs.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
let FaviconTags
|
|
8
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), jsxRuntime.jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), jsxRuntime.jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), jsxRuntime.jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), jsxRuntime.jsx("link", { rel: "manifest", href: "/site.webmanifest" }), jsxRuntime.jsx("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), jsxRuntime.jsx("meta", { name: "apple-mobile-web-app-title", content: name }), jsxRuntime.jsx("meta", { name: "application-name", content: name }), jsxRuntime.jsx("meta", { name: "msapplication-TileColor", content: tileColor || color }), jsxRuntime.jsx("meta", { name: "theme-color", content: themeColor || color })] }));
|
|
9
|
-
};
|
|
7
|
+
let FaviconTags=({name:a,color:t,safariTabColor:o,tileColor:c,themeColor:l})=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("link",{rel:"shortcut icon",href:"/favicon.ico",type:"image/x-icon"}),jsxRuntime.jsx("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/apple-touch-icon.png"}),jsxRuntime.jsx("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/favicon-32x32.png"}),jsxRuntime.jsx("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/favicon-16x16.png"}),jsxRuntime.jsx("link",{rel:"manifest",href:"/site.webmanifest"}),jsxRuntime.jsx("link",{rel:"mask-icon",href:"/safari-pinned-tab.svg",color:o||t}),jsxRuntime.jsx("meta",{name:"apple-mobile-web-app-title",content:a}),jsxRuntime.jsx("meta",{name:"application-name",content:a}),jsxRuntime.jsx("meta",{name:"msapplication-TileColor",content:c||t}),jsxRuntime.jsx("meta",{name:"theme-color",content:l||t})]});
|
|
10
8
|
|
|
11
9
|
exports.FaviconTags = FaviconTags;
|
|
12
10
|
exports["default"] = FaviconTags;
|
package/FaviconTags.esm.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
let FaviconTags
|
|
4
|
-
return (jsxs(Fragment, { children: [jsx("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), jsx("link", { rel: "manifest", href: "/site.webmanifest" }), jsx("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), jsx("meta", { name: "apple-mobile-web-app-title", content: name }), jsx("meta", { name: "application-name", content: name }), jsx("meta", { name: "msapplication-TileColor", content: tileColor || color }), jsx("meta", { name: "theme-color", content: themeColor || color })] }));
|
|
5
|
-
};
|
|
3
|
+
let FaviconTags=({name:a,color:t,safariTabColor:o,tileColor:c,themeColor:l})=>jsxs(Fragment,{children:[jsx("link",{rel:"shortcut icon",href:"/favicon.ico",type:"image/x-icon"}),jsx("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/apple-touch-icon.png"}),jsx("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/favicon-32x32.png"}),jsx("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/favicon-16x16.png"}),jsx("link",{rel:"manifest",href:"/site.webmanifest"}),jsx("link",{rel:"mask-icon",href:"/safari-pinned-tab.svg",color:o||t}),jsx("meta",{name:"apple-mobile-web-app-title",content:a}),jsx("meta",{name:"application-name",content:a}),jsx("meta",{name:"msapplication-TileColor",content:c||t}),jsx("meta",{name:"theme-color",content:l||t})]});
|
|
6
4
|
|
|
7
5
|
export { FaviconTags, FaviconTags as default };
|
package/Meta.cjs.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
let Meta
|
|
8
|
-
return (jsxRuntime.jsx("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
|
|
9
|
-
};
|
|
7
|
+
let Meta=({zoom:t})=>jsxRuntime.jsx("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});
|
|
10
8
|
|
|
11
9
|
exports.Meta = Meta;
|
|
12
10
|
exports["default"] = Meta;
|
package/Meta.esm.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
let Meta
|
|
4
|
-
return (jsx("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
|
|
5
|
-
};
|
|
3
|
+
let Meta=({zoom:t})=>jsx("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});
|
|
6
4
|
|
|
7
5
|
export { Meta, Meta as default };
|
package/NoJs.cjs.js
CHANGED
|
@@ -4,11 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
let NoJs
|
|
8
|
-
return (jsxRuntime.jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
|
|
9
|
-
__html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
|
|
10
|
-
} }));
|
|
11
|
-
};
|
|
7
|
+
let NoJs=t=>jsxRuntime.jsx("script",{id:"no-js",dangerouslySetInnerHTML:{__html:'document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";'}});
|
|
12
8
|
|
|
13
9
|
exports.NoJs = NoJs;
|
|
14
10
|
exports["default"] = NoJs;
|
package/NoJs.esm.js
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
let NoJs
|
|
4
|
-
return (jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
|
|
5
|
-
__html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
|
|
6
|
-
} }));
|
|
7
|
-
};
|
|
3
|
+
let NoJs=t=>jsx("script",{id:"no-js",dangerouslySetInnerHTML:{__html:'document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";'}});
|
|
8
4
|
|
|
9
5
|
export { NoJs, NoJs as default };
|
package/calendar.cjs.js
CHANGED
|
@@ -38,547 +38,21 @@ function _interopNamespace(e) {
|
|
|
38
38
|
return Object.freeze(n);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
let getEventTimestamp = (
|
|
42
|
-
const date = new Date(dateLike);
|
|
43
|
-
date.setHours(0, 0, 0, 0);
|
|
44
|
-
return date.valueOf() / 1000;
|
|
45
|
-
};
|
|
46
|
-
let getDisplayTime = (date) => date.getHours() +
|
|
47
|
-
":" +
|
|
48
|
-
"0".repeat(2 - date.getMinutes().toString().length) +
|
|
49
|
-
date.getMinutes();
|
|
50
|
-
let getStartDate = (date, view) => {
|
|
51
|
-
date.setHours(0, 0, 0);
|
|
52
|
-
if (view === "month") {
|
|
53
|
-
date.setDate(1);
|
|
54
|
-
}
|
|
55
|
-
else if (view === "week") {
|
|
56
|
-
date = startOfWeek.startOfWeek(date, { weekStartsOn: 1 });
|
|
57
|
-
}
|
|
58
|
-
return date;
|
|
59
|
-
};
|
|
60
|
-
let getEndDate = (start, view) => {
|
|
61
|
-
let end = start;
|
|
62
|
-
if (view === "month") {
|
|
63
|
-
end = endOfMonth.endOfMonth(start);
|
|
64
|
-
}
|
|
65
|
-
else if (view === "week") {
|
|
66
|
-
end = endOfWeek.endOfWeek(start, { weekStartsOn: 1 });
|
|
67
|
-
}
|
|
68
|
-
end.setHours(23, 59, 59);
|
|
69
|
-
return end;
|
|
70
|
-
};
|
|
71
|
-
let getPrevDate = (date, view) => view === "month" ? subMonths.subMonths(date, 1) : subWeeks.subWeeks(date, 1);
|
|
72
|
-
let getNextDate = (date, view) => view === "month" ? addMonths.addMonths(date, 1) : addWeeks.addWeeks(date, 1);
|
|
73
|
-
let isTodayInView = (start, end) => isWithinInterval.isWithinInterval(new Date(), { start, end });
|
|
74
|
-
let addCalendarEvents = (toAdd, toExtend) => {
|
|
75
|
-
for (const id in toAdd) {
|
|
76
|
-
const event = toAdd[id];
|
|
77
|
-
toExtend[id] = event;
|
|
78
|
-
}
|
|
79
|
-
return toExtend;
|
|
80
|
-
};
|
|
81
|
-
let getEventsByTimestamp = (events) => {
|
|
82
|
-
const output = {};
|
|
83
|
-
for (const uid in events) {
|
|
84
|
-
const event = events[uid];
|
|
85
|
-
event.days.forEach((timestamp) => {
|
|
86
|
-
output[timestamp] = (output[timestamp] || {});
|
|
87
|
-
output[timestamp][uid] = event;
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
return output;
|
|
91
|
-
};
|
|
92
|
-
let getSortedEvents = (events) => {
|
|
93
|
-
const output = [];
|
|
94
|
-
for (const uid in events) {
|
|
95
|
-
output.push(events[uid]);
|
|
96
|
-
}
|
|
97
|
-
output.sort((a, b) => {
|
|
98
|
-
const multi = Number(b.multi) - Number(a.multi);
|
|
99
|
-
const allDay = Number(b.allDay) - Number(a.allDay);
|
|
100
|
-
const start = a.start.getTime() - b.start.getTime();
|
|
101
|
-
const created = a.created.getTime() - b.created.getTime();
|
|
102
|
-
return multi || allDay || start || created;
|
|
103
|
-
});
|
|
104
|
-
return output;
|
|
105
|
-
};
|
|
106
|
-
const FREE_SLOT = 0;
|
|
107
|
-
const BUSY_SLOT = 1;
|
|
108
|
-
let processEventsInView = (eventsMap, calendarView, month, weeks) => {
|
|
109
|
-
const eventsByTimestamp = getEventsByTimestamp(eventsMap);
|
|
110
|
-
const eventsList = getSortedEvents(eventsMap);
|
|
111
|
-
const todayDate = new Date();
|
|
112
|
-
const todayTimestamp = getEventTimestamp(todayDate);
|
|
113
|
-
const startedAtTopMap = {};
|
|
114
|
-
const viewWeeks = [];
|
|
115
|
-
for (let weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
|
|
116
|
-
const viewWeek = {
|
|
117
|
-
props: { key: `week.${weekIdx}` },
|
|
118
|
-
days: [],
|
|
119
|
-
};
|
|
120
|
-
const weekStartDate = weeks[weekIdx];
|
|
121
|
-
const weekStartDay = weekStartDate.getDate();
|
|
122
|
-
const weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
|
|
123
|
-
const weekEndTimestamp = getEventTimestamp(addDays.addDays(new Date(weekStartDate), 6));
|
|
124
|
-
for (let dayNumber = 0; dayNumber < 7; dayNumber++) {
|
|
125
|
-
const dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
|
|
126
|
-
const dayTimestamp = getEventTimestamp(dayDate);
|
|
127
|
-
const $isToday = todayTimestamp === dayTimestamp;
|
|
128
|
-
const $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
|
|
129
|
-
const contextualProps = {
|
|
130
|
-
$isToday,
|
|
131
|
-
$isOutOfRange,
|
|
132
|
-
};
|
|
133
|
-
const viewDay = {
|
|
134
|
-
props: { key: `day.${dayTimestamp}`, ...contextualProps },
|
|
135
|
-
timestamp: dayTimestamp + "",
|
|
136
|
-
label: dayDate.getDate() + "",
|
|
137
|
-
events: [],
|
|
138
|
-
};
|
|
139
|
-
if (eventsByTimestamp?.[dayTimestamp]) {
|
|
140
|
-
const verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(() => FREE_SLOT);
|
|
141
|
-
for (let eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
|
|
142
|
-
const event = eventsList[eventIdx];
|
|
143
|
-
let width = 1;
|
|
144
|
-
let top = 0;
|
|
145
|
-
let firstOfMulti;
|
|
146
|
-
if (!event.daysMap[dayTimestamp]) {
|
|
147
|
-
continue;
|
|
148
|
-
}
|
|
149
|
-
if (event.multi) {
|
|
150
|
-
width = event.days.filter((t) => t >= weekStartTimestamp && t <= weekEndTimestamp).length;
|
|
151
|
-
if (event.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
|
|
152
|
-
firstOfMulti = true;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
if (startedAtTopMap[event.uid]) {
|
|
156
|
-
top = startedAtTopMap[event.uid];
|
|
157
|
-
}
|
|
158
|
-
else {
|
|
159
|
-
for (let verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
|
|
160
|
-
const freeOrBusy = verticalSlots[verticalIdx];
|
|
161
|
-
if (freeOrBusy !== BUSY_SLOT) {
|
|
162
|
-
top = verticalIdx;
|
|
163
|
-
break;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
verticalSlots[top] = BUSY_SLOT;
|
|
168
|
-
if (firstOfMulti) {
|
|
169
|
-
startedAtTopMap[event.uid] = top;
|
|
170
|
-
}
|
|
171
|
-
viewDay.events.push({
|
|
172
|
-
key: `event.${dayTimestamp}-${top}`,
|
|
173
|
-
...contextualProps,
|
|
174
|
-
...event,
|
|
175
|
-
isPast: todayDate > event.end,
|
|
176
|
-
firstOfMulti,
|
|
177
|
-
top,
|
|
178
|
-
width,
|
|
179
|
-
});
|
|
180
|
-
}
|
|
181
|
-
for (let i = 0; i < verticalSlots.length; i++) {
|
|
182
|
-
if (verticalSlots[i] !== BUSY_SLOT) {
|
|
183
|
-
viewDay.events.push({
|
|
184
|
-
key: `event.${dayTimestamp}-${i}}`,
|
|
185
|
-
placeholder: true,
|
|
186
|
-
top: i,
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
viewDay.events.sort((a, b) => a.top - b.top);
|
|
191
|
-
}
|
|
192
|
-
viewWeek.days.push(viewDay);
|
|
193
|
-
}
|
|
194
|
-
viewWeeks.push(viewWeek);
|
|
195
|
-
}
|
|
196
|
-
return viewWeeks;
|
|
197
|
-
};
|
|
41
|
+
let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek.startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth.endOfMonth(e):"week"===t&&(r=endOfWeek.endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths.subMonths(e,1):subWeeks.subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths.addMonths(e,1):addWeeks.addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval.isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d$1=e=>{let t=[];for(let r in e)t.push(e[r]);return t.sort((e,t)=>{let r=Number(t.multi)-Number(e.multi),a=Number(t.allDay)-Number(e.allDay),n=e.start.getTime()-t.start.getTime(),s=e.created.getTime()-t.created.getTime();return r||a||n||s}),t};let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d$1(t),l=new Date,m=getEventTimestamp(l),p={},f=[];for(let t=0;t<n.length;t++){let i={props:{key:`week.${t}`},days:[]},d=n[t],u=d.getDate(),g=getEventTimestamp(new Date(d)),h=getEventTimestamp(addDays.addDays(new Date(d),6));for(let e=0;e<7;e++){let t=new Date(new Date(d).setDate(u+e)),n=getEventTimestamp(t),f={$isToday:m===n,$isOutOfRange:"month"===r&&t.getMonth()!==a},v={props:{key:`day.${n}`,...f},timestamp:n+"",label:t.getDate()+"",events:[]};if(s?.[n]){let t=Object.keys(s[n]).map(()=>0);for(let r=0;r<o.length;r++){let a;let s=o[r],m=1,i=0;if(s.daysMap[n]){if(s.multi&&(m=s.days.filter(e=>e>=g&&e<=h).length,(0===s.days.indexOf(n)||0===e)&&(a=!0)),p[s.uid])i=p[s.uid];else for(let e=0;e<t.length;e++)if(1!==t[e]){i=e;break}t[i]=1,a&&(p[s.uid]=i),v.events.push({key:`event.${n}-${i}`,...f,...s,isPast:l>s.end,firstOfMulti:a,top:i,width:m});}}for(let e=0;e<t.length;e++)1!==t[e]&&v.events.push({key:`event.${n}-${e}}`,placeholder:!0,top:e});v.events.sort((e,t)=>e.top-t.top);}i.days.push(v);}f.push(i);}return f};
|
|
198
42
|
|
|
199
|
-
|
|
200
|
-
return (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", ...props, children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0z" }), jsxRuntime.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })] }));
|
|
201
|
-
};
|
|
202
|
-
const styleBtn = {
|
|
203
|
-
overflow: "hidden",
|
|
204
|
-
whiteSpace: "nowrap",
|
|
205
|
-
textOverflow: "ellipsis",
|
|
206
|
-
};
|
|
207
|
-
let CalendarDaygridCell = ({ eventClicked, setEventClicked, setEventHovered, view, maxEvents, events, calendarsMap, Cell = "div", CellOverflow = "div", CellEvent = "div", CellEventBtn = "div", CellEventTitle = "span", CellEventStart = "span", }) => {
|
|
208
|
-
const [isExpanded, expand] = react.useState(false);
|
|
209
|
-
const eventsWithoutPlaceholders = events.filter((event) => !event.placeholder);
|
|
210
|
-
return (jsxRuntime.jsx(Cell, { children: events.map((event, i) => {
|
|
211
|
-
if (i === maxEvents && !isExpanded) {
|
|
212
|
-
return (jsxRuntime.jsxs(CellOverflow, { onClick: () => expand(true), children: [jsxRuntime.jsx(IconExpand, {}), eventsWithoutPlaceholders.length - maxEvents] }, "overflowMessage" + i));
|
|
213
|
-
}
|
|
214
|
-
if (i > maxEvents && !isExpanded)
|
|
215
|
-
return null;
|
|
216
|
-
if (event.placeholder) {
|
|
217
|
-
return (jsxRuntime.jsx(react.Fragment, { children: jsxRuntime.jsx(CellEvent, { "$placeholder": true, children: jsxRuntime.jsx(CellEventBtn, { "aria-hidden": "true", style: { visibility: "hidden" }, "$placeholder": true, children: jsxRuntime.jsx(CellEventTitle, { children: "\u00A0" }) }) }) }, event.key));
|
|
218
|
-
}
|
|
219
|
-
const styleEvent = {
|
|
220
|
-
zIndex: event.firstOfMulti ? 1 : 0,
|
|
221
|
-
position: "relative",
|
|
222
|
-
width: event.firstOfMulti ? `${100 * event.width}%` : "100%",
|
|
223
|
-
};
|
|
224
|
-
if (!calendarsMap[event.calendar.id].on) {
|
|
225
|
-
styleBtn.display = "none";
|
|
226
|
-
}
|
|
227
|
-
const styledProps = {
|
|
228
|
-
$view: view,
|
|
229
|
-
$selected: eventClicked?.uid === event.uid,
|
|
230
|
-
$past: event.isPast,
|
|
231
|
-
$color: event.color,
|
|
232
|
-
$isOutOfRange: event.$isOutOfRange,
|
|
233
|
-
$isToday: event.$isToday,
|
|
234
|
-
};
|
|
235
|
-
return (jsxRuntime.jsx(react.Fragment, { children: jsxRuntime.jsx(CellEvent, { style: styleEvent, ...styledProps, children: jsxRuntime.jsx(CellEventBtn, { role: "button", style: styleBtn, ...styledProps, onClick: () => setEventClicked((prev) => prev?.uid === event.uid ? null : event), onMouseEnter: () => setEventHovered(event), onMouseLeave: () => setEventHovered(null), children: event.allDay ? (jsxRuntime.jsx(CellEventTitle, { children: event.title })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CellEventStart, { children: getDisplayTime(event.start) }), jsxRuntime.jsx(CellEventTitle, { children: event.title })] })) }) }) }, event.key));
|
|
236
|
-
}) }));
|
|
237
|
-
};
|
|
43
|
+
let d=l=>jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",stroke:"none",...l,children:[jsxRuntime.jsx("path",{d:"M0 0h24v24H0z"}),jsxRuntime.jsx("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"})]}),o$1={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"};let CalendarDaygridCell=({eventClicked:a,setEventClicked:s,setEventHovered:h,view:c,maxEvents:u,events:p,calendarsMap:v,Cell:f="div",CellOverflow:y="div",CellEvent:$="div",CellEventBtn:m="div",CellEventTitle:w="span",CellEventStart:g="span"})=>{let[x,M]=react.useState(!1),O=p.filter(e=>!e.placeholder);return jsxRuntime.jsx(f,{children:p.map((t,p)=>{if(p===u&&!x)return jsxRuntime.jsxs(y,{onClick:()=>M(!0),children:[jsxRuntime.jsx(d,{}),O.length-u]},"overflowMessage"+p);if(p>u&&!x)return null;if(t.placeholder)return jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx($,{$placeholder:!0,children:jsxRuntime.jsx(m,{"aria-hidden":"true",style:{visibility:"hidden"},$placeholder:!0,children:jsxRuntime.jsx(w,{children:" "})})})},t.key);let f={zIndex:t.firstOfMulti?1:0,position:"relative",width:t.firstOfMulti?`${100*t.width}%`:"100%"};v[t.calendar.id].on||(o$1.display="none");let k={$view:c,$selected:a?.uid===t.uid,$past:t.isPast,$color:t.color,$isOutOfRange:t.$isOutOfRange,$isToday:t.$isToday};return jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx($,{style:f,...k,children:jsxRuntime.jsx(m,{role:"button",style:o$1,...k,onClick:()=>s(e=>e?.uid===t.uid?null:t),onMouseEnter:()=>h(t),onMouseLeave:()=>h(null),children:t.allDay?jsxRuntime.jsx(w,{children:t.title}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(g,{children:getDisplayTime(t.start)}),jsxRuntime.jsx(w,{children:t.title})]})})})},t.key)})})};
|
|
238
44
|
|
|
239
|
-
let useDateLocale
|
|
240
|
-
const [data, setData] = react.useState();
|
|
241
|
-
const [current, setCurrent] = react.useState(defaultLocale);
|
|
242
|
-
react.useEffect(() => {
|
|
243
|
-
const importLocaleFile = async () => {
|
|
244
|
-
const localeToSet = await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('date-fns/locale/en-US')); });
|
|
245
|
-
setCurrent(locale || current);
|
|
246
|
-
setData(localeToSet.enUS);
|
|
247
|
-
};
|
|
248
|
-
if (locale !== current) {
|
|
249
|
-
importLocaleFile();
|
|
250
|
-
}
|
|
251
|
-
}, [locale, current]);
|
|
252
|
-
return data;
|
|
253
|
-
};
|
|
45
|
+
let useDateLocale=(a,l="en")=>{let[r,n]=react.useState(),[o,c]=react.useState(l);return react.useEffect(()=>{let e=async()=>{let e=await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('date-fns/locale/en-US')); });c(a||o),n(e.enUS);};a!==o&&e();},[a,o]),r};
|
|
254
46
|
|
|
255
|
-
let KoineCalendarDaygridNav
|
|
256
|
-
const [start, end] = range;
|
|
257
|
-
const locale = useDateLocale(localeCode);
|
|
258
|
-
const opts = { locale };
|
|
259
|
-
let formatted = "";
|
|
260
|
-
if (view === "month") {
|
|
261
|
-
formatted = format.format(start, "MMMM yyyy", opts);
|
|
262
|
-
}
|
|
263
|
-
if (view === "week") {
|
|
264
|
-
const inSameMonth = start.getMonth() === end.getMonth();
|
|
265
|
-
if (inSameMonth) {
|
|
266
|
-
formatted = format.format(start, "# MMMM yyyy", opts).replace("#", `${start.getDate()}-${end.getDate()}`);
|
|
267
|
-
}
|
|
268
|
-
else {
|
|
269
|
-
formatted = `${format.format(start, "d MMMM", opts)} - ${format.format(end, "d MMMM yyyy", opts)}`;
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
return (jsxRuntime.jsxs(NavRoot, { children: [jsxRuntime.jsxs(NavBtns, { children: [jsxRuntime.jsx(NavBtnPrev, { onClick: handlePrev }), jsxRuntime.jsx(NavBtnNext, { onClick: handleNext }), jsxRuntime.jsx(NavBtnToday, { onClick: handleToday, disabled: todayInView }), jsxRuntime.jsx(NavBtnViewMonth, { onClick: () => handleView("month"), disabled: view === "month" }), jsxRuntime.jsx(NavBtnViewWeek, { onClick: () => handleView("week"), disabled: view === "week" })] }), jsxRuntime.jsx(NavTitle, { range: range, formatted: formatted })] }));
|
|
273
|
-
};
|
|
47
|
+
let KoineCalendarDaygridNav=({range:a,view:l,todayInView:r,handlePrev:i,handleNext:M,handleToday:d,handleView:y,locale:c,NavRoot:m="nav",NavTitle:s="div",NavBtns:b="div",NavBtnPrev:k="button",NavBtnNext:u="button",NavBtnToday:h="button",NavBtnViewMonth:f="button",NavBtnViewWeek:g="button"})=>{let[C,p]=a,v={locale:useDateLocale(c)},x="";return "month"===l&&(x=format.format(C,"MMMM yyyy",v)),"week"===l&&(x=C.getMonth()===p.getMonth()?format.format(C,"# MMMM yyyy",v).replace("#",`${C.getDate()}-${p.getDate()}`):`${format.format(C,"d MMMM",v)} - ${format.format(p,"d MMMM yyyy",v)}`),jsxRuntime.jsxs(m,{children:[jsxRuntime.jsxs(b,{children:[jsxRuntime.jsx(k,{onClick:i}),jsxRuntime.jsx(u,{onClick:M}),jsxRuntime.jsx(h,{onClick:d,disabled:r}),jsxRuntime.jsx(f,{onClick:()=>y("month"),disabled:"month"===l}),jsxRuntime.jsx(g,{onClick:()=>y("week"),disabled:"week"===l})]}),jsxRuntime.jsx(s,{range:a,formatted:x})]})};
|
|
274
48
|
|
|
275
|
-
|
|
276
|
-
const [start, end] = range;
|
|
277
|
-
const weeks = eachWeekOfInterval.eachWeekOfInterval({ start, end }, { weekStartsOn: 1 });
|
|
278
|
-
return {
|
|
279
|
-
month: start.getMonth(),
|
|
280
|
-
weeks,
|
|
281
|
-
};
|
|
282
|
-
}
|
|
283
|
-
let KoineCalendarDaygridTable = ({ locale: localeCode, handlePrev, handleNext, events, dayLabels, view, range, eventClicked, setEventClicked, eventHovered, setEventHovered, calendarsMap = {}, maxEvents = 5, Table = "table", TableHead = "thead", TableHeadCell = "th", TableBody = "tbody", TableBodyRow = "tr", TableBodyCell = "td", TableBodyCellDate = "div", Cell, CellOverflow, CellEvent, CellEventBtn, CellEventTitle, CellEventStart, }) => {
|
|
284
|
-
const restKoine = {
|
|
285
|
-
Cell,
|
|
286
|
-
CellOverflow,
|
|
287
|
-
CellEvent,
|
|
288
|
-
CellEventBtn,
|
|
289
|
-
CellEventTitle,
|
|
290
|
-
CellEventStart,
|
|
291
|
-
};
|
|
292
|
-
const [days, setDays] = react.useState(dayLabels || [0, 1, 2, 3, 4, 5, 6]);
|
|
293
|
-
const [weeksEvents, setWeeksEvents] = react.useState([]);
|
|
294
|
-
const locale = useDateLocale(localeCode);
|
|
295
|
-
const { month, weeks } = react.useMemo(() => getView(range), [range]);
|
|
296
|
-
const swipeableHandlers = reactSwipeable.useSwipeable({
|
|
297
|
-
onSwipedLeft: handleNext,
|
|
298
|
-
onSwipedRight: handlePrev,
|
|
299
|
-
});
|
|
300
|
-
react.useEffect(() => {
|
|
301
|
-
setWeeksEvents(processEventsInView(events, view, month, weeks));
|
|
302
|
-
}, [events, view, month, weeks]);
|
|
303
|
-
react.useEffect(() => {
|
|
304
|
-
if (locale && locale.localize && !dayLabels) {
|
|
305
|
-
setDays([1, 2, 3, 4, 5, 6, 0].map((i) => locale.localize.day(i, { width: "abbreviated" })));
|
|
306
|
-
}
|
|
307
|
-
}, [locale, dayLabels]);
|
|
308
|
-
return (jsxRuntime.jsxs(Table, { ...swipeableHandlers, children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx("tr", { children: days.map((day) => (jsxRuntime.jsx(TableHeadCell, { scope: "column", children: day }, day))) }) }), jsxRuntime.jsx(TableBody, { children: weeksEvents.map((week, i) => (jsxRuntime.jsx(TableBodyRow, { ...week.props, children: week.days.map((day) => (jsxRuntime.jsxs(TableBodyCell, { ...day.props, children: [jsxRuntime.jsx(TableBodyCellDate, { ...day.props, children: day.label }), day.events.length > 0 && (jsxRuntime.jsx(CalendarDaygridCell, { eventClicked,
|
|
309
|
-
setEventClicked,
|
|
310
|
-
eventHovered,
|
|
311
|
-
setEventHovered,
|
|
312
|
-
view,
|
|
313
|
-
maxEvents,
|
|
314
|
-
events: day.events,
|
|
315
|
-
timestamp: day.timestamp,
|
|
316
|
-
calendarsMap, ...restKoine }))] }))) }))) })] }));
|
|
317
|
-
};
|
|
49
|
+
let KoineCalendarDaygridTable=({locale:d,handlePrev:s,handleNext:c,events:h,dayLabels:f,view:b,range:u,eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,calendarsMap:x={},maxEvents:j=5,Table:C="table",TableHead:D="thead",TableHeadCell:S="th",TableBody:k="tbody",TableBodyRow:z="tr",TableBodyCell:L="td",TableBodyCellDate:O="div",Cell:I,CellOverflow:K,CellEvent:M,CellEventBtn:R,CellEventTitle:T,CellEventStart:W})=>{let q={Cell:I,CellOverflow:K,CellEvent:M,CellEventBtn:R,CellEventTitle:T,CellEventStart:W},[A,B]=react.useState(f||[0,1,2,3,4,5,6]),[E,F]=react.useState([]),G=useDateLocale(d),{month:H,weeks:J}=react.useMemo(()=>(function(e){let[t,a]=e,i=eachWeekOfInterval.eachWeekOfInterval({start:t,end:a},{weekStartsOn:1});return {month:t.getMonth(),weeks:i}})(u),[u]),N=reactSwipeable.useSwipeable({onSwipedLeft:c,onSwipedRight:s});return react.useEffect(()=>{F(processEventsInView(h,b,H,J));},[h,b,H,J]),react.useEffect(()=>{G&&G.localize&&!f&&B([1,2,3,4,5,6,0].map(e=>G.localize.day(e,{width:"abbreviated"})));},[G,f]),jsxRuntime.jsxs(C,{...N,children:[jsxRuntime.jsx(D,{children:jsxRuntime.jsx("tr",{children:A.map(t=>jsxRuntime.jsx(S,{scope:"column",children:t},t))})}),jsxRuntime.jsx(k,{children:E.map((r,a)=>jsxRuntime.jsx(z,{...r.props,children:r.days.map(r=>jsxRuntime.jsxs(L,{...r.props,children:[jsxRuntime.jsx(O,{...r.props,children:r.label}),r.events.length>0&&jsxRuntime.jsx(CalendarDaygridCell,{eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,view:b,maxEvents:j,events:r.events,timestamp:r.timestamp,calendarsMap:x,...q})]}))}))})]})};
|
|
318
50
|
|
|
319
|
-
let KoineCalendarLegend
|
|
320
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.entries(calendarsMap).map(([id, calendar]) => (jsxRuntime.jsxs(LegendItem, { onClick: () => toggleCalendarVisibility(id), "$color": calendar.color, "$empty": calendar.events === 0, disabled: calendar.events === 0, children: [jsxRuntime.jsx(LegendItemStatus, { children: calendar.on ? "\u2b24" : "\u2b58" }), jsxRuntime.jsx(LegendItemLabel, { children: calendar.name }), jsxRuntime.jsx(LegendItemEvents, { children: calendar.events })] }, "CalendarLegend." + id))) }));
|
|
321
|
-
};
|
|
51
|
+
let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:Object.entries(a).map(([r,a])=>jsxRuntime.jsxs(d,{onClick:()=>s(r),$color:a.color,$empty:0===a.events,disabled:0===a.events,children:[jsxRuntime.jsx(i,{children:a.on?"⬤":"⭘"}),jsxRuntime.jsx(l,{children:a.name}),jsxRuntime.jsx(t,{children:a.events})]},"CalendarLegend."+r))});
|
|
322
52
|
|
|
323
|
-
|
|
324
|
-
let getCalendarsEventsFromGoogle = async ({ calendars, ...options }) => {
|
|
325
|
-
const allEvents = {};
|
|
326
|
-
await Promise.all(calendars.map(async (calendar) => {
|
|
327
|
-
const events = await getCalendarEventsFromGoogle({
|
|
328
|
-
calendar,
|
|
329
|
-
...options,
|
|
330
|
-
});
|
|
331
|
-
addCalendarEvents(events, allEvents);
|
|
332
|
-
}));
|
|
333
|
-
return allEvents;
|
|
334
|
-
};
|
|
335
|
-
async function getCalendarEventsFromGoogle({ apiKey, calendar, timeZone = "", start, end, }) {
|
|
336
|
-
const events = {};
|
|
337
|
-
const params = new URLSearchParams({
|
|
338
|
-
calendarId: calendar.id,
|
|
339
|
-
timeZone,
|
|
340
|
-
singleEvents: "true",
|
|
341
|
-
maxAttendees: "1",
|
|
342
|
-
maxResults: "9999",
|
|
343
|
-
sanitizeHtml: "true",
|
|
344
|
-
timeMin: start.toISOString(),
|
|
345
|
-
timeMax: end.toISOString(),
|
|
346
|
-
key: apiKey || process.env["GOOGLE_CALENDAR_API_KEY"] || "",
|
|
347
|
-
}).toString();
|
|
348
|
-
const url = baseURL + calendar.id + "/events?" + params;
|
|
349
|
-
try {
|
|
350
|
-
const response = await fetch(url, { method: "GET" });
|
|
351
|
-
const data = (await response.json());
|
|
352
|
-
calendar.name = calendar.name || data.summary;
|
|
353
|
-
data.items.forEach((googleEvent) => {
|
|
354
|
-
const event = transformCalendarEventFromGoogle(googleEvent, calendar);
|
|
355
|
-
events[event.uid] = event;
|
|
356
|
-
});
|
|
357
|
-
}
|
|
358
|
-
catch (e) {
|
|
359
|
-
}
|
|
360
|
-
return events;
|
|
361
|
-
}
|
|
362
|
-
function transformCalendarEventFromGoogle(event, calendar) {
|
|
363
|
-
const created = new Date(event.created);
|
|
364
|
-
const link = event.htmlLink;
|
|
365
|
-
const title = event.summary;
|
|
366
|
-
const status = event.status;
|
|
367
|
-
const start = new Date(event.start.date || event.start.dateTime);
|
|
368
|
-
let end = new Date(event.end.date || event.end.dateTime);
|
|
369
|
-
const color = calendar.color;
|
|
370
|
-
const allDay = utils.isUndefined(event.end.dateTime) && utils.isString(event.end.date);
|
|
371
|
-
const location = event.location || "";
|
|
372
|
-
const description = event.description || "";
|
|
373
|
-
const uid = created.getTime() + "" + start.getTime();
|
|
374
|
-
if (allDay && end > start) {
|
|
375
|
-
end = subDays.subDays(end, 1);
|
|
376
|
-
end.setHours(23, 59, 59);
|
|
377
|
-
}
|
|
378
|
-
const days = getDays();
|
|
379
|
-
const daysMap = utils.arrayToLookup(days);
|
|
380
|
-
const multi = days.length > 1;
|
|
381
|
-
function getDays() {
|
|
382
|
-
const from = new Date(start);
|
|
383
|
-
const to = new Date(end);
|
|
384
|
-
const days = [getEventTimestamp(from)];
|
|
385
|
-
while (differenceInDays.differenceInDays(to, from)) {
|
|
386
|
-
from.setDate(from.getDate() + 1);
|
|
387
|
-
days.push(getEventTimestamp(from));
|
|
388
|
-
}
|
|
389
|
-
return days;
|
|
390
|
-
}
|
|
391
|
-
return {
|
|
392
|
-
calendar,
|
|
393
|
-
created,
|
|
394
|
-
link,
|
|
395
|
-
title,
|
|
396
|
-
status,
|
|
397
|
-
start,
|
|
398
|
-
end,
|
|
399
|
-
days,
|
|
400
|
-
daysMap,
|
|
401
|
-
multi,
|
|
402
|
-
color,
|
|
403
|
-
allDay,
|
|
404
|
-
location,
|
|
405
|
-
description,
|
|
406
|
-
uid,
|
|
407
|
-
};
|
|
408
|
-
}
|
|
53
|
+
let getCalendarsEventsFromGoogle=async({calendars:e,...t})=>{let a={};return await Promise.all(e.map(async e=>{addCalendarEvents(await o({calendar:e,...t}),a);})),a};async function o({apiKey:i,calendar:o,timeZone:m="",start:d,end:l}){let c={},u=new URLSearchParams({calendarId:o.id,timeZone:m,singleEvents:"true",maxAttendees:"1",maxResults:"9999",sanitizeHtml:"true",timeMin:d.toISOString(),timeMax:l.toISOString(),key:i||process.env.GOOGLE_CALENDAR_API_KEY||""}).toString(),f="https://www.googleapis.com/calendar/v3/calendars/"+o.id+"/events?"+u;try{let i=await fetch(f,{method:"GET"}),m=await i.json();o.name=o.name||m.summary,m.items.forEach(i=>{let m=function(i,o){let m=new Date(i.created),d=i.htmlLink,l=i.summary,c=i.status,u=new Date(i.start.date||i.start.dateTime),f=new Date(i.end.date||i.end.dateTime),w=o.color,g=utils.isUndefined(i.end.dateTime)&&utils.isString(i.end.date),p=i.location||"",D=i.description||"",h=m.getTime()+""+u.getTime();g&&f>u&&(f=subDays.subDays(f,1)).setHours(23,59,59);let y=function(){let t=new Date(u),a=new Date(f),n=[getEventTimestamp(t)];for(;differenceInDays.differenceInDays(a,t);)t.setDate(t.getDate()+1),n.push(getEventTimestamp(t));return n}(),E=utils.arrayToLookup(y),S=y.length>1;return {calendar:o,created:m,link:d,title:l,status:c,start:u,end:f,days:y,daysMap:E,multi:S,color:w,allDay:g,location:p,description:D,uid:h}}(i,o);c[m.uid]=m;});}catch(e){}return c}
|
|
409
54
|
|
|
410
|
-
let useCalendar
|
|
411
|
-
const [view, setView] = react.useState(initialView);
|
|
412
|
-
const start = initialStart || getStartDate(new Date(), view);
|
|
413
|
-
const end = initialEnd || getEndDate(start, view);
|
|
414
|
-
const [range, setRange] = react.useState([start, end]);
|
|
415
|
-
const [todayInView, setTodayInView] = react.useState(isTodayInView(start, end));
|
|
416
|
-
const [events, setEvents] = react.useState(initialEvents || {});
|
|
417
|
-
const [eventHovered, setEventHovered] = react.useState(null);
|
|
418
|
-
const [eventClicked, setEventClicked] = react.useState(null);
|
|
419
|
-
const [calendarsMap, updateCalendars] = react.useReducer((state, action) => {
|
|
420
|
-
const { type } = action;
|
|
421
|
-
switch (type) {
|
|
422
|
-
case "events": {
|
|
423
|
-
const events = action.payload;
|
|
424
|
-
return Object.entries(state).reduce((map, [id, calendar]) => {
|
|
425
|
-
map[id] = {
|
|
426
|
-
...calendar,
|
|
427
|
-
events: events[id] || 0,
|
|
428
|
-
};
|
|
429
|
-
return map;
|
|
430
|
-
}, {});
|
|
431
|
-
}
|
|
432
|
-
case "visibility": {
|
|
433
|
-
const visible = action.payload;
|
|
434
|
-
if (typeof visible === "string") {
|
|
435
|
-
return {
|
|
436
|
-
...state,
|
|
437
|
-
[visible]: {
|
|
438
|
-
...state[visible],
|
|
439
|
-
on: !state[visible].on,
|
|
440
|
-
},
|
|
441
|
-
};
|
|
442
|
-
}
|
|
443
|
-
else {
|
|
444
|
-
return Object.entries(state).reduce((map, [id, calendar]) => {
|
|
445
|
-
map[id] = {
|
|
446
|
-
...calendar,
|
|
447
|
-
on: visible.indexOf(id) > -1,
|
|
448
|
-
};
|
|
449
|
-
return map;
|
|
450
|
-
}, {});
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
default:
|
|
454
|
-
return state;
|
|
455
|
-
}
|
|
456
|
-
}, calendars.reduce((map, calendar) => {
|
|
457
|
-
map[calendar.id] = {
|
|
458
|
-
...calendar,
|
|
459
|
-
name: calendar.name || "",
|
|
460
|
-
on: true,
|
|
461
|
-
events: 0,
|
|
462
|
-
};
|
|
463
|
-
return map;
|
|
464
|
-
}, {}));
|
|
465
|
-
const toggleCalendarVisibility = react.useCallback((idOrIds) => {
|
|
466
|
-
updateCalendars({ type: "visibility", payload: idOrIds });
|
|
467
|
-
}, [updateCalendars]);
|
|
468
|
-
const updateCalendarsBasedOnEvents = react.useCallback((events) => {
|
|
469
|
-
const payload = {};
|
|
470
|
-
for (const uid in events) {
|
|
471
|
-
const { id } = events[uid].calendar;
|
|
472
|
-
payload[id] = payload[id] || 0;
|
|
473
|
-
payload[id]++;
|
|
474
|
-
}
|
|
475
|
-
updateCalendars({ type: "events", payload });
|
|
476
|
-
}, []);
|
|
477
|
-
const loadCalendars = react.useCallback(async (calendars, start, end) => {
|
|
478
|
-
try {
|
|
479
|
-
const newEvents = await getCalendarsEventsFromGoogle({
|
|
480
|
-
apiKey,
|
|
481
|
-
calendars,
|
|
482
|
-
timeZone,
|
|
483
|
-
start,
|
|
484
|
-
end,
|
|
485
|
-
});
|
|
486
|
-
setEvents(newEvents);
|
|
487
|
-
}
|
|
488
|
-
catch (e) {
|
|
489
|
-
if (onError)
|
|
490
|
-
onError(e);
|
|
491
|
-
}
|
|
492
|
-
}, [setEvents, apiKey, timeZone, onError]);
|
|
493
|
-
const handleToday = react.useCallback(() => {
|
|
494
|
-
const [start, end] = range;
|
|
495
|
-
const newStart = getStartDate(new Date(), view);
|
|
496
|
-
const newEnd = getEndDate(newStart, view);
|
|
497
|
-
setRange([newStart, newEnd]);
|
|
498
|
-
if (start.getTime() !== newStart.getTime() ||
|
|
499
|
-
end.getTime() !== newEnd.getTime()) {
|
|
500
|
-
setEventClicked(null);
|
|
501
|
-
setEventHovered(null);
|
|
502
|
-
}
|
|
503
|
-
}, [view, range]);
|
|
504
|
-
const handlePrev = react.useCallback(() => {
|
|
505
|
-
setRange(([start]) => {
|
|
506
|
-
const newStart = getPrevDate(start, view);
|
|
507
|
-
const newEnd = getEndDate(newStart, view);
|
|
508
|
-
return [newStart, newEnd];
|
|
509
|
-
});
|
|
510
|
-
setEventClicked(null);
|
|
511
|
-
setEventHovered(null);
|
|
512
|
-
}, [view]);
|
|
513
|
-
const handleNext = react.useCallback(() => {
|
|
514
|
-
setRange(([start]) => {
|
|
515
|
-
const newStart = getNextDate(start, view);
|
|
516
|
-
const newEnd = getEndDate(newStart, view);
|
|
517
|
-
return [newStart, newEnd];
|
|
518
|
-
});
|
|
519
|
-
setEventClicked(null);
|
|
520
|
-
setEventHovered(null);
|
|
521
|
-
}, [view]);
|
|
522
|
-
const handleView = react.useCallback((newView) => {
|
|
523
|
-
const newStart = getStartDate(start, newView);
|
|
524
|
-
const newEnd = getEndDate(newStart, newView);
|
|
525
|
-
setRange([newStart, newEnd]);
|
|
526
|
-
setView(newView);
|
|
527
|
-
setEventClicked(null);
|
|
528
|
-
setEventHovered(null);
|
|
529
|
-
}, [start]);
|
|
530
|
-
react.useEffect(() => {
|
|
531
|
-
const [start, end] = range;
|
|
532
|
-
loadCalendars(calendars, start, end);
|
|
533
|
-
setTodayInView(isTodayInView(start, end));
|
|
534
|
-
}, [range]);
|
|
535
|
-
react.useEffect(() => {
|
|
536
|
-
if (events) {
|
|
537
|
-
updateCalendarsBasedOnEvents(events);
|
|
538
|
-
}
|
|
539
|
-
}, [events, updateCalendarsBasedOnEvents]);
|
|
540
|
-
react.useEffect(() => {
|
|
541
|
-
if (eventClicked) {
|
|
542
|
-
if (!calendarsMap[eventClicked.calendar.id].on) {
|
|
543
|
-
setEventClicked(null);
|
|
544
|
-
}
|
|
545
|
-
}
|
|
546
|
-
}, [calendarsMap, eventClicked, setEventClicked]);
|
|
547
|
-
return {
|
|
548
|
-
view,
|
|
549
|
-
eventClicked,
|
|
550
|
-
setEventClicked,
|
|
551
|
-
eventHovered,
|
|
552
|
-
setEventHovered,
|
|
553
|
-
getDaygridNavProps: () => ({
|
|
554
|
-
locale,
|
|
555
|
-
handlePrev,
|
|
556
|
-
handleNext,
|
|
557
|
-
handleToday,
|
|
558
|
-
handleView,
|
|
559
|
-
todayInView,
|
|
560
|
-
range,
|
|
561
|
-
view,
|
|
562
|
-
}),
|
|
563
|
-
getDaygridTableProps: () => ({
|
|
564
|
-
locale,
|
|
565
|
-
events,
|
|
566
|
-
eventClicked,
|
|
567
|
-
setEventClicked,
|
|
568
|
-
eventHovered,
|
|
569
|
-
setEventHovered,
|
|
570
|
-
handlePrev,
|
|
571
|
-
handleNext,
|
|
572
|
-
calendarsMap,
|
|
573
|
-
range,
|
|
574
|
-
view,
|
|
575
|
-
}),
|
|
576
|
-
getLegendProps: () => ({
|
|
577
|
-
calendarsMap,
|
|
578
|
-
toggleCalendarVisibility,
|
|
579
|
-
}),
|
|
580
|
-
};
|
|
581
|
-
};
|
|
55
|
+
let useCalendar=({locale:d,apiKey:c,calendars:p,events:g,start:m,end:y,view:v="month",timeZone:f="",onError:b})=>{let[w,T]=react.useState(v),D=m||getStartDate(new Date,w),h=y||getEndDate(D,w),[O,P]=react.useState([D,h]),[j,x]=react.useState(isTodayInView(D,h)),[C,L]=react.useState(g||{}),[N,k]=react.useState(null),[q,z]=react.useState(null),[A,B]=react.useReducer((e,t)=>{let{type:l}=t;switch(l){case"events":{let l=t.payload;return Object.entries(e).reduce((e,[t,n])=>(e[t]={...n,events:l[t]||0},e),{})}case"visibility":{let l=t.payload;if("string"==typeof l)return {...e,[l]:{...e[l],on:!e[l].on}};return Object.entries(e).reduce((e,[t,n])=>(e[t]={...n,on:l.indexOf(t)>-1},e),{})}default:return e}},p.reduce((e,t)=>(e[t.id]={...t,name:t.name||"",on:!0,events:0},e),{})),E=react.useCallback(e=>{B({type:"visibility",payload:e});},[B]),F=react.useCallback(e=>{let t={};for(let l in e){let{id:n}=e[l].calendar;t[n]=t[n]||0,t[n]++;}B({type:"events",payload:t});},[]),G=react.useCallback(async(e,t,l)=>{try{let n=await getCalendarsEventsFromGoogle({apiKey:c,calendars:e,timeZone:f,start:t,end:l});L(n);}catch(e){b&&b(e);}},[L,c,f,b]),H=react.useCallback(()=>{let[e,t]=O,l=getStartDate(new Date,w),n=getEndDate(l,w);P([l,n]),(e.getTime()!==l.getTime()||t.getTime()!==n.getTime())&&(z(null),k(null));},[w,O]),I=react.useCallback(()=>{P(([e])=>{let t=getPrevDate(e,w),l=getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),J=react.useCallback(()=>{P(([e])=>{let t=getNextDate(e,w),l=getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),K=react.useCallback(e=>{let t=getStartDate(D,e),l=getEndDate(t,e);P([t,l]),T(e),z(null),k(null);},[D]);return react.useEffect(()=>{let[e,t]=O;G(p,e,t),x(isTodayInView(e,t));},[O]),react.useEffect(()=>{C&&F(C);},[C,F]),react.useEffect(()=>{q&&!A[q.calendar.id].on&&z(null);},[A,q,z]),{view:w,eventClicked:q,setEventClicked:z,eventHovered:N,setEventHovered:k,getDaygridNavProps:()=>({locale:d,handlePrev:I,handleNext:J,handleToday:H,handleView:K,todayInView:j,range:O,view:w}),getDaygridTableProps:()=>({locale:d,events:C,eventClicked:q,setEventClicked:z,eventHovered:N,setEventHovered:k,handlePrev:I,handleNext:J,calendarsMap:A,range:O,view:w}),getLegendProps:()=>({calendarsMap:A,toggleCalendarVisibility:E})}};
|
|
582
56
|
|
|
583
57
|
exports.CalendarDaygridCell = CalendarDaygridCell;
|
|
584
58
|
exports.KoineCalendarDaygridNav = KoineCalendarDaygridNav;
|