@koine/react 2.0.0-beta.74 → 2.0.0-beta.76

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 (182) hide show
  1. package/FaviconTags.js +1 -5
  2. package/Meta.js +1 -5
  3. package/NoJs.js +1 -7
  4. package/Polymorphic.js +1 -1
  5. package/calendar/CalendarDaygridCell.js +1 -42
  6. package/calendar/CalendarDaygridNav.js +1 -22
  7. package/calendar/CalendarDaygridTable.js +1 -50
  8. package/calendar/CalendarLegend.js +1 -4
  9. package/calendar/calendar-api-google.js +1 -90
  10. package/calendar/types.js +1 -1
  11. package/calendar/useCalendar.js +1 -175
  12. package/calendar/useDateLocale.js +1 -16
  13. package/calendar/utils.js +1 -172
  14. package/calendar.js +1 -7
  15. package/{components → cjs}/FaviconTags.d.ts +1 -0
  16. package/cjs/FaviconTags.js +1 -0
  17. package/{components → cjs}/Meta.d.ts +1 -0
  18. package/cjs/Meta.js +1 -0
  19. package/{components → cjs}/NoJs.d.ts +1 -0
  20. package/cjs/NoJs.js +1 -0
  21. package/cjs/Polymorphic.js +1 -0
  22. package/cjs/calendar/CalendarDaygridCell.d.ts +35 -0
  23. package/cjs/calendar/CalendarDaygridCell.js +1 -0
  24. package/cjs/calendar/CalendarDaygridNav.d.ts +27 -0
  25. package/cjs/calendar/CalendarDaygridNav.js +1 -0
  26. package/cjs/calendar/CalendarDaygridTable.d.ts +25 -0
  27. package/cjs/calendar/CalendarDaygridTable.js +1 -0
  28. package/cjs/calendar/CalendarLegend.d.ts +18 -0
  29. package/cjs/calendar/CalendarLegend.js +1 -0
  30. package/cjs/calendar/calendar-api-google.d.ts +10 -0
  31. package/cjs/calendar/calendar-api-google.js +1 -0
  32. package/cjs/calendar/types.d.ts +62 -0
  33. package/cjs/calendar/types.js +1 -0
  34. package/cjs/calendar/useCalendar.d.ts +35 -0
  35. package/cjs/calendar/useCalendar.js +1 -0
  36. package/cjs/calendar/useDateLocale.d.ts +2 -0
  37. package/cjs/calendar/useDateLocale.js +1 -0
  38. package/cjs/calendar/utils.d.ts +11 -0
  39. package/cjs/calendar/utils.js +1 -0
  40. package/cjs/calendar.d.ts +7 -0
  41. package/cjs/calendar.js +1 -0
  42. package/{utils → cjs}/classed.d.ts +2 -2
  43. package/cjs/classed.js +1 -0
  44. package/{utils → cjs}/createUseMediaQueryWidth.d.ts +1 -1
  45. package/cjs/createUseMediaQueryWidth.js +1 -0
  46. package/{utils → cjs}/extendComponent.d.ts +1 -1
  47. package/cjs/extendComponent.js +1 -0
  48. package/cjs/forms/antispam.d.ts +27 -0
  49. package/cjs/forms/antispam.js +1 -0
  50. package/cjs/forms.d.ts +1 -0
  51. package/cjs/forms.js +1 -0
  52. package/{hooks → cjs}/index.d.ts +9 -0
  53. package/cjs/index.js +1 -0
  54. package/{utils → cjs}/mergeRefs.d.ts +1 -0
  55. package/cjs/mergeRefs.js +1 -0
  56. package/cjs/package.json +31 -0
  57. package/cjs/types.d.ts +2 -0
  58. package/cjs/types.js +1 -0
  59. package/{hooks → cjs}/useAsyncFn.d.ts +1 -1
  60. package/cjs/useAsyncFn.js +1 -0
  61. package/{hooks → cjs}/useFirstMountState.d.ts +1 -0
  62. package/cjs/useFirstMountState.js +1 -0
  63. package/{hooks → cjs}/useFixedOffset.d.ts +1 -0
  64. package/cjs/useFixedOffset.js +1 -0
  65. package/{hooks → cjs}/useFocus.d.ts +1 -0
  66. package/cjs/useFocus.js +1 -0
  67. package/{hooks → cjs}/useInterval.d.ts +1 -0
  68. package/cjs/useInterval.js +1 -0
  69. package/cjs/useIsomorphicLayoutEffect.d.ts +3 -0
  70. package/cjs/useIsomorphicLayoutEffect.js +1 -0
  71. package/{hooks → cjs}/useKeyUp.d.ts +1 -0
  72. package/cjs/useKeyUp.js +1 -0
  73. package/{hooks → cjs}/useMeasure.d.ts +1 -1
  74. package/cjs/useMeasure.js +1 -0
  75. package/{hooks → cjs}/useMountedState.d.ts +1 -0
  76. package/cjs/useMountedState.js +1 -0
  77. package/{hooks → cjs}/useNavigateAway.d.ts +1 -0
  78. package/cjs/useNavigateAway.js +1 -0
  79. package/{hooks → cjs}/usePrevious.d.ts +1 -0
  80. package/cjs/usePrevious.js +1 -0
  81. package/{hooks → cjs}/usePreviousRef.d.ts +1 -0
  82. package/cjs/usePreviousRef.js +1 -0
  83. package/{hooks → cjs}/useReveal.d.ts +1 -0
  84. package/cjs/useReveal.js +1 -0
  85. package/{hooks → cjs}/useScrollPosition.d.ts +1 -1
  86. package/cjs/useScrollPosition.js +1 -0
  87. package/{hooks → cjs}/useScrollThreshold.d.ts +1 -0
  88. package/cjs/useScrollThreshold.js +1 -0
  89. package/{hooks → cjs}/useScrollTo.d.ts +1 -0
  90. package/cjs/useScrollTo.js +1 -0
  91. package/{hooks → cjs}/useSmoothScroll.d.ts +1 -0
  92. package/cjs/useSmoothScroll.js +1 -0
  93. package/{hooks → cjs}/useSpinDelay.d.ts +1 -0
  94. package/cjs/useSpinDelay.js +1 -0
  95. package/{hooks → cjs}/useTraceUpdate.d.ts +1 -0
  96. package/cjs/useTraceUpdate.js +1 -0
  97. package/{hooks → cjs}/useUpdateEffect.d.ts +1 -0
  98. package/cjs/useUpdateEffect.js +1 -0
  99. package/{hooks → cjs}/useWindowSize.d.ts +1 -0
  100. package/cjs/useWindowSize.js +1 -0
  101. package/classed.d.ts +1 -1
  102. package/classed.js +1 -41
  103. package/createUseMediaQueryWidth.js +1 -38
  104. package/extendComponent.js +1 -9
  105. package/forms/antispam.js +1 -29
  106. package/forms.js +1 -1
  107. package/index.js +1 -26
  108. package/mergeRefs.js +1 -13
  109. package/package.json +172 -15
  110. package/types.js +1 -1
  111. package/useAsyncFn.js +1 -26
  112. package/useFirstMountState.js +1 -10
  113. package/useFixedOffset.js +1 -42
  114. package/useFocus.js +1 -9
  115. package/useInterval.js +1 -20
  116. package/useIsomorphicLayoutEffect.d.ts +2 -2
  117. package/useIsomorphicLayoutEffect.js +1 -4
  118. package/useKeyUp.js +1 -16
  119. package/useMeasure.js +1 -119
  120. package/useMountedState.js +1 -13
  121. package/useNavigateAway.js +1 -25
  122. package/usePrevious.js +1 -9
  123. package/usePreviousRef.js +1 -9
  124. package/useReveal.js +1 -42
  125. package/useScrollPosition.js +1 -58
  126. package/useScrollThreshold.js +1 -26
  127. package/useScrollTo.js +1 -18
  128. package/useSmoothScroll.js +1 -32
  129. package/useSpinDelay.js +1 -36
  130. package/useTraceUpdate.js +1 -17
  131. package/useUpdateEffect.js +1 -11
  132. package/useWindowSize.js +1 -20
  133. package/README.md +0 -1
  134. package/calendar.cjs.d.ts +0 -1
  135. package/calendar.cjs.default.js +0 -1
  136. package/calendar.cjs.js +0 -62
  137. package/calendar.cjs.mjs +0 -2
  138. package/calendar.esm.js +0 -35
  139. package/components/FaviconTags.js +0 -4
  140. package/components/Meta.js +0 -4
  141. package/components/NoJs.js +0 -6
  142. package/forms.cjs.d.ts +0 -1
  143. package/forms.cjs.default.js +0 -1
  144. package/forms.cjs.js +0 -11
  145. package/forms.cjs.mjs +0 -2
  146. package/forms.esm.js +0 -6
  147. package/hooks/index.js +0 -19
  148. package/hooks/useAsyncFn.js +0 -25
  149. package/hooks/useFirstMountState.js +0 -9
  150. package/hooks/useFixedOffset.js +0 -41
  151. package/hooks/useFocus.js +0 -8
  152. package/hooks/useInterval.js +0 -19
  153. package/hooks/useIsomorphicLayoutEffect.d.ts +0 -2
  154. package/hooks/useIsomorphicLayoutEffect.js +0 -3
  155. package/hooks/useKeyUp.js +0 -15
  156. package/hooks/useMeasure.js +0 -118
  157. package/hooks/useMountedState.js +0 -12
  158. package/hooks/useNavigateAway.js +0 -24
  159. package/hooks/usePrevious.js +0 -8
  160. package/hooks/usePreviousRef.js +0 -8
  161. package/hooks/useReveal.js +0 -41
  162. package/hooks/useScrollPosition.js +0 -57
  163. package/hooks/useScrollThreshold.js +0 -25
  164. package/hooks/useScrollTo.js +0 -17
  165. package/hooks/useSmoothScroll.js +0 -31
  166. package/hooks/useSpinDelay.js +0 -35
  167. package/hooks/useTraceUpdate.js +0 -16
  168. package/hooks/useUpdateEffect.js +0 -10
  169. package/hooks/useWindowSize.js +0 -19
  170. package/index.cjs.d.ts +0 -1
  171. package/index.cjs.default.js +0 -1
  172. package/index.cjs.js +0 -87
  173. package/index.cjs.mjs +0 -2
  174. package/index.esm.js +0 -58
  175. package/utils/Polymorphic.js +0 -1
  176. package/utils/classed.js +0 -40
  177. package/utils/createUseMediaQueryWidth.js +0 -37
  178. package/utils/extendComponent.js +0 -8
  179. package/utils/index.d.ts +0 -5
  180. package/utils/index.js +0 -4
  181. package/utils/mergeRefs.js +0 -12
  182. /package/{utils → cjs}/Polymorphic.d.ts +0 -0
package/FaviconTags.js CHANGED
@@ -1,5 +1 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- export let FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
3
- 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 })] }));
4
- };
5
- export default FaviconTags;
1
+ import{jsx as e,jsxs as n,Fragment as i}from"react/jsx-runtime";export let FaviconTags=({name:a,color:t,safariTabColor:o,tileColor:c,themeColor:l})=>n(i,{children:[e("link",{rel:"shortcut icon",href:"/favicon.ico",type:"image/x-icon"}),e("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/apple-touch-icon.png"}),e("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/favicon-32x32.png"}),e("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/favicon-16x16.png"}),e("link",{rel:"manifest",href:"/site.webmanifest"}),e("link",{rel:"mask-icon",href:"/safari-pinned-tab.svg",color:o||t}),e("meta",{name:"apple-mobile-web-app-title",content:a}),e("meta",{name:"application-name",content:a}),e("meta",{name:"msapplication-TileColor",content:c||t}),e("meta",{name:"theme-color",content:l||t})]});export default FaviconTags;
package/Meta.js CHANGED
@@ -1,5 +1 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- export let Meta = ({ zoom }) => {
3
- return (_jsx("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
4
- };
5
- export default Meta;
1
+ import{jsx as e}from"react/jsx-runtime";export let Meta=({zoom:t})=>e("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});export default Meta;
package/NoJs.js CHANGED
@@ -1,7 +1 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- export let NoJs = (_props) => {
3
- return (_jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
4
- __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
5
- } }));
6
- };
7
- export default NoJs;
1
+ import{jsx as e}from"react/jsx-runtime";export let NoJs=t=>e("script",{id:"no-js",dangerouslySetInnerHTML:{__html:'document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";'}});export default NoJs;
package/Polymorphic.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+ export{};
@@ -1,42 +1 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Fragment, useState } from "react";
3
- import { getDisplayTime } from "./utils";
4
- const IconExpand = (props) => {
5
- 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" })] }));
6
- };
7
- const styleBtn = {
8
- overflow: "hidden",
9
- whiteSpace: "nowrap",
10
- textOverflow: "ellipsis",
11
- };
12
- export let CalendarDaygridCell = ({ eventClicked, setEventClicked, setEventHovered, view, maxEvents, events, calendarsMap, Cell = "div", CellOverflow = "div", CellEvent = "div", CellEventBtn = "div", CellEventTitle = "span", CellEventStart = "span", }) => {
13
- const [isExpanded, expand] = useState(false);
14
- const eventsWithoutPlaceholders = events.filter((event) => !event.placeholder);
15
- return (_jsx(Cell, { children: events.map((event, i) => {
16
- if (i === maxEvents && !isExpanded) {
17
- return (_jsxs(CellOverflow, { onClick: () => expand(true), children: [_jsx(IconExpand, {}), eventsWithoutPlaceholders.length - maxEvents] }, "overflowMessage" + i));
18
- }
19
- if (i > maxEvents && !isExpanded)
20
- return null;
21
- if (event.placeholder) {
22
- 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));
23
- }
24
- const styleEvent = {
25
- zIndex: event.firstOfMulti ? 1 : 0,
26
- position: "relative",
27
- width: event.firstOfMulti ? `${100 * event.width}%` : "100%",
28
- };
29
- if (!calendarsMap[event.calendar.id].on) {
30
- styleBtn.display = "none";
31
- }
32
- const styledProps = {
33
- $view: view,
34
- $selected: eventClicked?.uid === event.uid,
35
- $past: event.isPast,
36
- $color: event.color,
37
- $isOutOfRange: event.$isOutOfRange,
38
- $isToday: event.$isToday,
39
- };
40
- 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, { children: [_jsx(CellEventStart, { children: getDisplayTime(event.start) }), _jsx(CellEventTitle, { children: event.title })] })) }) }) }, event.key));
41
- }) }));
42
- };
1
+ import{jsx as e,jsxs as i,Fragment as l}from"react/jsx-runtime";import{Fragment as r,useState as t}from"react";import{getDisplayTime as n}from"./utils";let d=l=>i("svg",{viewBox:"0 0 24 24",fill:"currentColor",stroke:"none",...l,children:[e("path",{d:"M0 0h24v24H0z"}),e("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"})]}),o={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"};export 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]=t(!1),O=p.filter(e=>!e.placeholder);return e(f,{children:p.map((t,p)=>{if(p===u&&!x)return i(y,{onClick:()=>M(!0),children:[e(d,{}),O.length-u]},"overflowMessage"+p);if(p>u&&!x)return null;if(t.placeholder)return e(r,{children:e($,{$placeholder:!0,children:e(m,{"aria-hidden":"true",style:{visibility:"hidden"},$placeholder:!0,children:e(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.display="none");let k={$view:c,$selected:a?.uid===t.uid,$past:t.isPast,$color:t.color,$isOutOfRange:t.$isOutOfRange,$isToday:t.$isToday};return e(r,{children:e($,{style:f,...k,children:e(m,{role:"button",style:o,...k,onClick:()=>s(e=>e?.uid===t.uid?null:t),onMouseEnter:()=>h(t),onMouseLeave:()=>h(null),children:t.allDay?e(w,{children:t.title}):i(l,{children:[e(g,{children:n(t.start)}),e(w,{children:t.title})]})})})},t.key)})})};
@@ -1,22 +1 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { format } from "date-fns/format";
3
- import { useDateLocale } from "./useDateLocale";
4
- export 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", }) => {
5
- const [start, end] = range;
6
- const locale = useDateLocale(localeCode);
7
- const opts = { locale };
8
- let formatted = "";
9
- if (view === "month") {
10
- formatted = format(start, "MMMM yyyy", opts);
11
- }
12
- if (view === "week") {
13
- const inSameMonth = start.getMonth() === end.getMonth();
14
- if (inSameMonth) {
15
- formatted = format(start, "# MMMM yyyy", opts).replace("#", `${start.getDate()}-${end.getDate()}`);
16
- }
17
- else {
18
- formatted = `${format(start, "d MMMM", opts)} - ${format(end, "d MMMM yyyy", opts)}`;
19
- }
20
- }
21
- 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 })] }));
22
- };
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{format as o}from"date-fns/format";import{useDateLocale as n}from"./useDateLocale";export 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:n(c)},x="";return"month"===l&&(x=o(C,"MMMM yyyy",v)),"week"===l&&(x=C.getMonth()===p.getMonth()?o(C,"# MMMM yyyy",v).replace("#",`${C.getDate()}-${p.getDate()}`):`${o(C,"d MMMM",v)} - ${o(p,"d MMMM yyyy",v)}`),t(m,{children:[t(b,{children:[e(k,{onClick:i}),e(u,{onClick:M}),e(h,{onClick:d,disabled:r}),e(f,{onClick:()=>y("month"),disabled:"month"===l}),e(g,{onClick:()=>y("week"),disabled:"week"===l})]}),e(s,{range:a,formatted:x})]})};
@@ -1,50 +1 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { eachWeekOfInterval } from "date-fns/eachWeekOfInterval";
3
- import { useEffect, useMemo, useState } from "react";
4
- import { useSwipeable } from "react-swipeable";
5
- import { CalendarDaygridCell, } from "./CalendarDaygridCell";
6
- import { useDateLocale } from "./useDateLocale";
7
- import { processEventsInView } from "./utils";
8
- function getView(range) {
9
- const [start, end] = range;
10
- const weeks = eachWeekOfInterval({ start, end }, { weekStartsOn: 1 });
11
- return {
12
- month: start.getMonth(),
13
- weeks,
14
- };
15
- }
16
- export 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, }) => {
17
- const restKoine = {
18
- Cell,
19
- CellOverflow,
20
- CellEvent,
21
- CellEventBtn,
22
- CellEventTitle,
23
- CellEventStart,
24
- };
25
- const [days, setDays] = useState(dayLabels || [0, 1, 2, 3, 4, 5, 6]);
26
- const [weeksEvents, setWeeksEvents] = useState([]);
27
- const locale = useDateLocale(localeCode);
28
- const { month, weeks } = useMemo(() => getView(range), [range]);
29
- const swipeableHandlers = useSwipeable({
30
- onSwipedLeft: handleNext,
31
- onSwipedRight: handlePrev,
32
- });
33
- useEffect(() => {
34
- setWeeksEvents(processEventsInView(events, view, month, weeks));
35
- }, [events, view, month, weeks]);
36
- useEffect(() => {
37
- if (locale && locale.localize && !dayLabels) {
38
- setDays([1, 2, 3, 4, 5, 6, 0].map((i) => locale.localize.day(i, { width: "abbreviated" })));
39
- }
40
- }, [locale, dayLabels]);
41
- 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,
42
- setEventClicked,
43
- eventHovered,
44
- setEventHovered,
45
- view,
46
- maxEvents,
47
- events: day.events,
48
- timestamp: day.timestamp,
49
- calendarsMap, ...restKoine }))] }))) }))) })] }));
50
- };
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{eachWeekOfInterval as r}from"date-fns/eachWeekOfInterval";import{useEffect as a,useMemo as i,useState as l}from"react";import{useSwipeable as o}from"react-swipeable";import{CalendarDaygridCell as n}from"./CalendarDaygridCell";import{useDateLocale as m}from"./useDateLocale";import{processEventsInView as p}from"./utils";export 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]=l(f||[0,1,2,3,4,5,6]),[E,F]=l([]),G=m(d),{month:H,weeks:J}=i(()=>(function(e){let[t,a]=e,i=r({start:t,end:a},{weekStartsOn:1});return{month:t.getMonth(),weeks:i}})(u),[u]),N=o({onSwipedLeft:c,onSwipedRight:s});return a(()=>{F(p(h,b,H,J))},[h,b,H,J]),a(()=>{G&&G.localize&&!f&&B([1,2,3,4,5,6,0].map(e=>G.localize.day(e,{width:"abbreviated"})))},[G,f]),t(C,{...N,children:[e(D,{children:e("tr",{children:A.map(t=>e(S,{scope:"column",children:t},t))})}),e(k,{children:E.map((r,a)=>e(z,{...r.props,children:r.days.map(r=>t(L,{...r.props,children:[e(O,{...r.props,children:r.label}),r.events.length>0&&e(n,{eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,view:b,maxEvents:j,events:r.events,timestamp:r.timestamp,calendarsMap:x,...q})]}))}))})]})};
@@ -1,4 +1 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- export let KoineCalendarLegend = ({ calendarsMap = {}, toggleCalendarVisibility, LegendItem = "div", LegendItemStatus = "span", LegendItemLabel = "span", LegendItemEvents = "span", }) => {
3
- return (_jsx(_Fragment, { 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))) }));
4
- };
1
+ import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";export let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})=>e(r,{children:Object.entries(a).map(([r,a])=>n(d,{onClick:()=>s(r),$color:a.color,$empty:0===a.events,disabled:0===a.events,children:[e(i,{children:a.on?"⬤":"⭘"}),e(l,{children:a.name}),e(t,{children:a.events})]},"CalendarLegend."+r))});
@@ -1,90 +1 @@
1
- import { differenceInDays } from "date-fns/differenceInDays";
2
- import { subDays } from "date-fns/subDays";
3
- import { arrayToLookup, isString, isUndefined } from "@koine/utils";
4
- import { addCalendarEvents, getEventTimestamp } from "./utils";
5
- const baseURL = "https://www.googleapis.com/calendar/v3/calendars/";
6
- export let getCalendarsEventsFromGoogle = async ({ calendars, ...options }) => {
7
- const allEvents = {};
8
- await Promise.all(calendars.map(async (calendar) => {
9
- const events = await getCalendarEventsFromGoogle({
10
- calendar,
11
- ...options,
12
- });
13
- addCalendarEvents(events, allEvents);
14
- }));
15
- return allEvents;
16
- };
17
- async function getCalendarEventsFromGoogle({ apiKey, calendar, timeZone = "", start, end, }) {
18
- const events = {};
19
- const params = new URLSearchParams({
20
- calendarId: calendar.id,
21
- timeZone,
22
- singleEvents: "true",
23
- maxAttendees: "1",
24
- maxResults: "9999",
25
- sanitizeHtml: "true",
26
- timeMin: start.toISOString(),
27
- timeMax: end.toISOString(),
28
- key: apiKey || process.env["GOOGLE_CALENDAR_API_KEY"] || "",
29
- }).toString();
30
- const url = baseURL + calendar.id + "/events?" + params;
31
- try {
32
- const response = await fetch(url, { method: "GET" });
33
- const data = (await response.json());
34
- calendar.name = calendar.name || data.summary;
35
- data.items.forEach((googleEvent) => {
36
- const event = transformCalendarEventFromGoogle(googleEvent, calendar);
37
- events[event.uid] = event;
38
- });
39
- }
40
- catch (e) {
41
- }
42
- return events;
43
- }
44
- function transformCalendarEventFromGoogle(event, calendar) {
45
- const created = new Date(event.created);
46
- const link = event.htmlLink;
47
- const title = event.summary;
48
- const status = event.status;
49
- const start = new Date(event.start.date || event.start.dateTime);
50
- let end = new Date(event.end.date || event.end.dateTime);
51
- const color = calendar.color;
52
- const allDay = isUndefined(event.end.dateTime) && isString(event.end.date);
53
- const location = event.location || "";
54
- const description = event.description || "";
55
- const uid = created.getTime() + "" + start.getTime();
56
- if (allDay && end > start) {
57
- end = subDays(end, 1);
58
- end.setHours(23, 59, 59);
59
- }
60
- const days = getDays();
61
- const daysMap = arrayToLookup(days);
62
- const multi = days.length > 1;
63
- function getDays() {
64
- const from = new Date(start);
65
- const to = new Date(end);
66
- const days = [getEventTimestamp(from)];
67
- while (differenceInDays(to, from)) {
68
- from.setDate(from.getDate() + 1);
69
- days.push(getEventTimestamp(from));
70
- }
71
- return days;
72
- }
73
- return {
74
- calendar,
75
- created,
76
- link,
77
- title,
78
- status,
79
- start,
80
- end,
81
- days,
82
- daysMap,
83
- multi,
84
- color,
85
- allDay,
86
- location,
87
- description,
88
- uid,
89
- };
90
- }
1
+ import{differenceInDays as e}from"date-fns/differenceInDays";import{subDays as t}from"date-fns/subDays";import{arrayToLookup as a,isString as n,isUndefined as r}from"@koine/utils";import{addCalendarEvents as i,getEventTimestamp as s}from"./utils";export let getCalendarsEventsFromGoogle=async({calendars:e,...t})=>{let a={};return await Promise.all(e.map(async e=>{i(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=r(i.end.dateTime)&&n(i.end.date),p=i.location||"",D=i.description||"",h=m.getTime()+""+u.getTime();g&&f>u&&(f=t(f,1)).setHours(23,59,59);let y=function(){let t=new Date(u),a=new Date(f),n=[s(t)];for(;e(a,t);)t.setDate(t.getDate()+1),n.push(s(t));return n}(),E=a(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}
package/calendar/types.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+ export{};
@@ -1,175 +1 @@
1
- import { useCallback, useEffect, useReducer, useState } from "react";
2
- import { getCalendarsEventsFromGoogle } from "./calendar-api-google";
3
- import { getEndDate, getNextDate, getPrevDate, getStartDate, isTodayInView, } from "./utils";
4
- export let useCalendar = ({ locale, apiKey, calendars, events: initialEvents, start: initialStart, end: initialEnd, view: initialView = "month", timeZone = "", onError, }) => {
5
- const [view, setView] = useState(initialView);
6
- const start = initialStart || getStartDate(new Date(), view);
7
- const end = initialEnd || getEndDate(start, view);
8
- const [range, setRange] = useState([start, end]);
9
- const [todayInView, setTodayInView] = useState(isTodayInView(start, end));
10
- const [events, setEvents] = useState(initialEvents || {});
11
- const [eventHovered, setEventHovered] = useState(null);
12
- const [eventClicked, setEventClicked] = useState(null);
13
- const [calendarsMap, updateCalendars] = useReducer((state, action) => {
14
- const { type } = action;
15
- switch (type) {
16
- case "events": {
17
- const events = action.payload;
18
- return Object.entries(state).reduce((map, [id, calendar]) => {
19
- map[id] = {
20
- ...calendar,
21
- events: events[id] || 0,
22
- };
23
- return map;
24
- }, {});
25
- }
26
- case "visibility": {
27
- const visible = action.payload;
28
- if (typeof visible === "string") {
29
- return {
30
- ...state,
31
- [visible]: {
32
- ...state[visible],
33
- on: !state[visible].on,
34
- },
35
- };
36
- }
37
- else {
38
- return Object.entries(state).reduce((map, [id, calendar]) => {
39
- map[id] = {
40
- ...calendar,
41
- on: visible.indexOf(id) > -1,
42
- };
43
- return map;
44
- }, {});
45
- }
46
- }
47
- default:
48
- return state;
49
- }
50
- }, calendars.reduce((map, calendar) => {
51
- map[calendar.id] = {
52
- ...calendar,
53
- name: calendar.name || "",
54
- on: true,
55
- events: 0,
56
- };
57
- return map;
58
- }, {}));
59
- const toggleCalendarVisibility = useCallback((idOrIds) => {
60
- updateCalendars({ type: "visibility", payload: idOrIds });
61
- }, [updateCalendars]);
62
- const updateCalendarsBasedOnEvents = useCallback((events) => {
63
- const payload = {};
64
- for (const uid in events) {
65
- const { id } = events[uid].calendar;
66
- payload[id] = payload[id] || 0;
67
- payload[id]++;
68
- }
69
- updateCalendars({ type: "events", payload });
70
- }, []);
71
- const loadCalendars = useCallback(async (calendars, start, end) => {
72
- try {
73
- const newEvents = await getCalendarsEventsFromGoogle({
74
- apiKey,
75
- calendars,
76
- timeZone,
77
- start,
78
- end,
79
- });
80
- setEvents(newEvents);
81
- }
82
- catch (e) {
83
- if (onError)
84
- onError(e);
85
- }
86
- }, [setEvents, apiKey, timeZone, onError]);
87
- const handleToday = useCallback(() => {
88
- const [start, end] = range;
89
- const newStart = getStartDate(new Date(), view);
90
- const newEnd = getEndDate(newStart, view);
91
- setRange([newStart, newEnd]);
92
- if (start.getTime() !== newStart.getTime() ||
93
- end.getTime() !== newEnd.getTime()) {
94
- setEventClicked(null);
95
- setEventHovered(null);
96
- }
97
- }, [view, range]);
98
- const handlePrev = useCallback(() => {
99
- setRange(([start]) => {
100
- const newStart = getPrevDate(start, view);
101
- const newEnd = getEndDate(newStart, view);
102
- return [newStart, newEnd];
103
- });
104
- setEventClicked(null);
105
- setEventHovered(null);
106
- }, [view]);
107
- const handleNext = useCallback(() => {
108
- setRange(([start]) => {
109
- const newStart = getNextDate(start, view);
110
- const newEnd = getEndDate(newStart, view);
111
- return [newStart, newEnd];
112
- });
113
- setEventClicked(null);
114
- setEventHovered(null);
115
- }, [view]);
116
- const handleView = useCallback((newView) => {
117
- const newStart = getStartDate(start, newView);
118
- const newEnd = getEndDate(newStart, newView);
119
- setRange([newStart, newEnd]);
120
- setView(newView);
121
- setEventClicked(null);
122
- setEventHovered(null);
123
- }, [start]);
124
- useEffect(() => {
125
- const [start, end] = range;
126
- loadCalendars(calendars, start, end);
127
- setTodayInView(isTodayInView(start, end));
128
- }, [range]);
129
- useEffect(() => {
130
- if (events) {
131
- updateCalendarsBasedOnEvents(events);
132
- }
133
- }, [events, updateCalendarsBasedOnEvents]);
134
- useEffect(() => {
135
- if (eventClicked) {
136
- if (!calendarsMap[eventClicked.calendar.id].on) {
137
- setEventClicked(null);
138
- }
139
- }
140
- }, [calendarsMap, eventClicked, setEventClicked]);
141
- return {
142
- view,
143
- eventClicked,
144
- setEventClicked,
145
- eventHovered,
146
- setEventHovered,
147
- getDaygridNavProps: () => ({
148
- locale,
149
- handlePrev,
150
- handleNext,
151
- handleToday,
152
- handleView,
153
- todayInView,
154
- range,
155
- view,
156
- }),
157
- getDaygridTableProps: () => ({
158
- locale,
159
- events,
160
- eventClicked,
161
- setEventClicked,
162
- eventHovered,
163
- setEventHovered,
164
- handlePrev,
165
- handleNext,
166
- calendarsMap,
167
- range,
168
- view,
169
- }),
170
- getLegendProps: () => ({
171
- calendarsMap,
172
- toggleCalendarVisibility,
173
- }),
174
- };
175
- };
1
+ import{useCallback as e,useEffect as t,useReducer as l,useState as n}from"react";import{getCalendarsEventsFromGoogle as r}from"./calendar-api-google";import{getEndDate as a,getNextDate as i,getPrevDate as u,getStartDate as o,isTodayInView as s}from"./utils";export let useCalendar=({locale:d,apiKey:c,calendars:p,events:g,start:m,end:y,view:v="month",timeZone:f="",onError:b})=>{let[w,T]=n(v),D=m||o(new Date,w),h=y||a(D,w),[O,P]=n([D,h]),[j,x]=n(s(D,h)),[C,L]=n(g||{}),[N,k]=n(null),[q,z]=n(null),[A,B]=l((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=e(e=>{B({type:"visibility",payload:e})},[B]),F=e(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=e(async(e,t,l)=>{try{let n=await r({apiKey:c,calendars:e,timeZone:f,start:t,end:l});L(n)}catch(e){b&&b(e)}},[L,c,f,b]),H=e(()=>{let[e,t]=O,l=o(new Date,w),n=a(l,w);P([l,n]),(e.getTime()!==l.getTime()||t.getTime()!==n.getTime())&&(z(null),k(null))},[w,O]),I=e(()=>{P(([e])=>{let t=u(e,w),l=a(t,w);return[t,l]}),z(null),k(null)},[w]),J=e(()=>{P(([e])=>{let t=i(e,w),l=a(t,w);return[t,l]}),z(null),k(null)},[w]),K=e(e=>{let t=o(D,e),l=a(t,e);P([t,l]),T(e),z(null),k(null)},[D]);return t(()=>{let[e,t]=O;G(p,e,t),x(s(e,t))},[O]),t(()=>{C&&F(C)},[C,F]),t(()=>{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})}};
@@ -1,16 +1 @@
1
- import { useEffect, useState } from "react";
2
- export let useDateLocale = (locale, defaultLocale = "en") => {
3
- const [data, setData] = useState();
4
- const [current, setCurrent] = useState(defaultLocale);
5
- useEffect(() => {
6
- const importLocaleFile = async () => {
7
- const localeToSet = await import(`date-fns/locale/en-US`);
8
- setCurrent(locale || current);
9
- setData(localeToSet.enUS);
10
- };
11
- if (locale !== current) {
12
- importLocaleFile();
13
- }
14
- }, [locale, current]);
15
- return data;
16
- };
1
+ import{useEffect as e,useState as t}from"react";export let useDateLocale=(a,l="en")=>{let[r,n]=t(),[o,c]=t(l);return e(()=>{let e=async()=>{let e=await import("date-fns/locale/en-US");c(a||o),n(e.enUS)};a!==o&&e()},[a,o]),r};
package/calendar/utils.js CHANGED
@@ -1,172 +1 @@
1
- import { addDays } from "date-fns/addDays";
2
- import { addMonths } from "date-fns/addMonths";
3
- import { addWeeks } from "date-fns/addWeeks";
4
- import { endOfMonth } from "date-fns/endOfMonth";
5
- import { endOfWeek } from "date-fns/endOfWeek";
6
- import { isWithinInterval } from "date-fns/isWithinInterval";
7
- import { startOfWeek } from "date-fns/startOfWeek";
8
- import { subMonths } from "date-fns/subMonths";
9
- import { subWeeks } from "date-fns/subWeeks";
10
- export let getEventTimestamp = (dateLike) => {
11
- const date = new Date(dateLike);
12
- date.setHours(0, 0, 0, 0);
13
- return date.valueOf() / 1000;
14
- };
15
- export let getDisplayTime = (date) => date.getHours() +
16
- ":" +
17
- "0".repeat(2 - date.getMinutes().toString().length) +
18
- date.getMinutes();
19
- export let getStartDate = (date, view) => {
20
- date.setHours(0, 0, 0);
21
- if (view === "month") {
22
- date.setDate(1);
23
- }
24
- else if (view === "week") {
25
- date = startOfWeek(date, { weekStartsOn: 1 });
26
- }
27
- return date;
28
- };
29
- export let getEndDate = (start, view) => {
30
- let end = start;
31
- if (view === "month") {
32
- end = endOfMonth(start);
33
- }
34
- else if (view === "week") {
35
- end = endOfWeek(start, { weekStartsOn: 1 });
36
- }
37
- end.setHours(23, 59, 59);
38
- return end;
39
- };
40
- export let getPrevDate = (date, view) => view === "month" ? subMonths(date, 1) : subWeeks(date, 1);
41
- export let getNextDate = (date, view) => view === "month" ? addMonths(date, 1) : addWeeks(date, 1);
42
- export let isTodayInView = (start, end) => isWithinInterval(new Date(), { start, end });
43
- export let mergeCalendarEvents = (first, second) => {
44
- const all = {};
45
- addCalendarEvents(first, all);
46
- addCalendarEvents(second, all);
47
- return all;
48
- };
49
- export let addCalendarEvents = (toAdd, toExtend) => {
50
- for (const id in toAdd) {
51
- const event = toAdd[id];
52
- toExtend[id] = event;
53
- }
54
- return toExtend;
55
- };
56
- let getEventsByTimestamp = (events) => {
57
- const output = {};
58
- for (const uid in events) {
59
- const event = events[uid];
60
- event.days.forEach((timestamp) => {
61
- output[timestamp] = (output[timestamp] || {});
62
- output[timestamp][uid] = event;
63
- });
64
- }
65
- return output;
66
- };
67
- let getSortedEvents = (events) => {
68
- const output = [];
69
- for (const uid in events) {
70
- output.push(events[uid]);
71
- }
72
- output.sort((a, b) => {
73
- const multi = Number(b.multi) - Number(a.multi);
74
- const allDay = Number(b.allDay) - Number(a.allDay);
75
- const start = a.start.getTime() - b.start.getTime();
76
- const created = a.created.getTime() - b.created.getTime();
77
- return multi || allDay || start || created;
78
- });
79
- return output;
80
- };
81
- const FREE_SLOT = 0;
82
- const BUSY_SLOT = 1;
83
- export let processEventsInView = (eventsMap, calendarView, month, weeks) => {
84
- const eventsByTimestamp = getEventsByTimestamp(eventsMap);
85
- const eventsList = getSortedEvents(eventsMap);
86
- const todayDate = new Date();
87
- const todayTimestamp = getEventTimestamp(todayDate);
88
- const startedAtTopMap = {};
89
- const viewWeeks = [];
90
- for (let weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
91
- const viewWeek = {
92
- props: { key: `week.${weekIdx}` },
93
- days: [],
94
- };
95
- const weekStartDate = weeks[weekIdx];
96
- const weekStartDay = weekStartDate.getDate();
97
- const weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
98
- const weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
99
- for (let dayNumber = 0; dayNumber < 7; dayNumber++) {
100
- const dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
101
- const dayTimestamp = getEventTimestamp(dayDate);
102
- const $isToday = todayTimestamp === dayTimestamp;
103
- const $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
104
- const contextualProps = {
105
- $isToday,
106
- $isOutOfRange,
107
- };
108
- const viewDay = {
109
- props: { key: `day.${dayTimestamp}`, ...contextualProps },
110
- timestamp: dayTimestamp + "",
111
- label: dayDate.getDate() + "",
112
- events: [],
113
- };
114
- if (eventsByTimestamp?.[dayTimestamp]) {
115
- const verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(() => FREE_SLOT);
116
- for (let eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
117
- const event = eventsList[eventIdx];
118
- let width = 1;
119
- let top = 0;
120
- let firstOfMulti;
121
- if (!event.daysMap[dayTimestamp]) {
122
- continue;
123
- }
124
- if (event.multi) {
125
- width = event.days.filter((t) => t >= weekStartTimestamp && t <= weekEndTimestamp).length;
126
- if (event.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
127
- firstOfMulti = true;
128
- }
129
- }
130
- if (startedAtTopMap[event.uid]) {
131
- top = startedAtTopMap[event.uid];
132
- }
133
- else {
134
- for (let verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
135
- const freeOrBusy = verticalSlots[verticalIdx];
136
- if (freeOrBusy !== BUSY_SLOT) {
137
- top = verticalIdx;
138
- break;
139
- }
140
- }
141
- }
142
- verticalSlots[top] = BUSY_SLOT;
143
- if (firstOfMulti) {
144
- startedAtTopMap[event.uid] = top;
145
- }
146
- viewDay.events.push({
147
- key: `event.${dayTimestamp}-${top}`,
148
- ...contextualProps,
149
- ...event,
150
- isPast: todayDate > event.end,
151
- firstOfMulti,
152
- top,
153
- width,
154
- });
155
- }
156
- for (let i = 0; i < verticalSlots.length; i++) {
157
- if (verticalSlots[i] !== BUSY_SLOT) {
158
- viewDay.events.push({
159
- key: `event.${dayTimestamp}-${i}}`,
160
- placeholder: true,
161
- top: i,
162
- });
163
- }
164
- }
165
- viewDay.events.sort((a, b) => a.top - b.top);
166
- }
167
- viewWeek.days.push(viewDay);
168
- }
169
- viewWeeks.push(viewWeek);
170
- }
171
- return viewWeeks;
172
- };
1
+ import{addDays as e}from"date-fns/addDays";import{addMonths as t}from"date-fns/addMonths";import{addWeeks as r}from"date-fns/addWeeks";import{endOfMonth as a}from"date-fns/endOfMonth";import{endOfWeek as n}from"date-fns/endOfWeek";import{isWithinInterval as s}from"date-fns/isWithinInterval";import{startOfWeek as o}from"date-fns/startOfWeek";import{subMonths as l}from"date-fns/subMonths";import{subWeeks as m}from"date-fns/subWeeks";export let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};export let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();export let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=o(e,{weekStartsOn:1})),e);export let getEndDate=(e,t)=>{let r=e;return"month"===t?r=a(e):"week"===t&&(r=n(e,{weekStartsOn:1})),r.setHours(23,59,59),r};export let getPrevDate=(e,t)=>"month"===t?l(e,1):m(e,1);export let getNextDate=(e,a)=>"month"===a?t(e,1):r(e,1);export let isTodayInView=(e,t)=>s(new Date,{start:e,end:t});export let mergeCalendarEvents=(e,t)=>{let r={};return addCalendarEvents(e,r),addCalendarEvents(t,r),r};export 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=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};export let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d(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(e(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};
package/calendar.js CHANGED
@@ -1,7 +1 @@
1
- export * from "./calendar/CalendarDaygridCell";
2
- export * from "./calendar/CalendarDaygridNav";
3
- export * from "./calendar/CalendarDaygridTable";
4
- export * from "./calendar/CalendarLegend";
5
- export * from "./calendar/useCalendar";
6
- export * from "./calendar/useDateLocale";
7
- export * from "./calendar/types";
1
+ export*from"./calendar/CalendarDaygridCell";export*from"./calendar/CalendarDaygridNav";export*from"./calendar/CalendarDaygridTable";export*from"./calendar/CalendarLegend";export*from"./calendar/useCalendar";export*from"./calendar/useDateLocale";export*from"./calendar/types";