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