@koine/react 2.0.0-beta.132 → 2.0.0-beta.134
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 -10
- package/FaviconTags.d.ts +10 -0
- package/FaviconTags.esm.js +1 -10
- package/Meta.cjs.js +1 -10
- package/Meta.d.ts +10 -0
- package/Meta.esm.js +1 -10
- package/NoJs.cjs.js +1 -1
- package/NoJs.esm.js +1 -1
- package/Polymorphic.d.ts +13 -0
- package/calendar/CalendarDaygridCell.cjs.js +1 -20
- package/calendar/CalendarDaygridCell.esm.js +1 -20
- package/calendar/CalendarDaygridNav.cjs.js +1 -1
- package/calendar/CalendarDaygridNav.esm.js +1 -1
- package/calendar/CalendarDaygridTable.cjs.js +1 -4
- package/calendar/CalendarDaygridTable.esm.js +1 -4
- package/calendar/CalendarLegend.cjs.js +1 -8
- package/calendar/CalendarLegend.esm.js +1 -8
- package/calendar/calendar-api-google.cjs.js +1 -15
- package/calendar/calendar-api-google.d.ts +8 -0
- package/calendar/calendar-api-google.esm.js +1 -15
- package/calendar/types.d.ts +19 -0
- package/calendar/useCalendar.cjs.js +1 -13
- package/calendar/useCalendar.d.ts +14 -0
- package/calendar/useCalendar.esm.js +1 -13
- package/calendar/useDateLocale.cjs.js +1 -18
- package/calendar/useDateLocale.d.ts +6 -0
- package/calendar/useDateLocale.esm.js +1 -18
- package/calendar/utils.cjs.js +1 -18
- package/calendar/utils.esm.js +1 -18
- package/classed.cjs.js +1 -42
- package/classed.d.ts +19 -0
- package/classed.esm.js +1 -42
- package/createUseMediaQueryWidth.cjs.js +1 -15
- package/createUseMediaQueryWidth.d.ts +6 -0
- package/createUseMediaQueryWidth.esm.js +1 -15
- package/extendComponent.cjs.js +1 -5
- package/extendComponent.d.ts +11 -0
- package/extendComponent.esm.js +1 -5
- package/forms/antispam.cjs.js +1 -27
- package/forms/antispam.d.ts +22 -2
- package/forms/antispam.esm.js +1 -27
- package/package.json +3 -3
- package/useAsyncFn.cjs.js +1 -4
- package/useAsyncFn.d.ts +3 -0
- package/useAsyncFn.esm.js +1 -4
- package/useFirstMountState.cjs.js +1 -3
- package/useFirstMountState.d.ts +3 -0
- package/useFirstMountState.esm.js +1 -3
- package/useFixedOffset.cjs.js +1 -12
- package/useFixedOffset.d.ts +9 -0
- package/useFixedOffset.esm.js +1 -12
- package/useFocus.cjs.js +1 -3
- package/useFocus.d.ts +3 -0
- package/useFocus.esm.js +1 -3
- package/useInterval.cjs.js +1 -6
- package/useInterval.d.ts +5 -0
- package/useInterval.esm.js +1 -6
- package/useIsomorphicLayoutEffect.cjs.js +1 -3
- package/useIsomorphicLayoutEffect.d.ts +3 -0
- package/useIsomorphicLayoutEffect.esm.js +1 -3
- package/useKeyUp.cjs.js +1 -6
- package/useKeyUp.esm.js +1 -6
- package/useMeasure.cjs.js +1 -33
- package/useMeasure.d.ts +5 -0
- package/useMeasure.esm.js +1 -33
- package/useMountedState.cjs.js +1 -3
- package/useMountedState.d.ts +3 -0
- package/useMountedState.esm.js +1 -3
- package/useNavigateAway.cjs.js +1 -47
- package/useNavigateAway.d.ts +29 -0
- package/useNavigateAway.esm.js +1 -47
- package/usePrevious.d.ts +3 -0
- package/useReveal.d.ts +21 -0
- package/useScrollPosition.cjs.js +1 -7
- package/useScrollPosition.d.ts +7 -0
- package/useScrollPosition.esm.js +1 -7
- package/useScrollThreshold.cjs.js +1 -4
- package/useScrollThreshold.esm.js +1 -4
- package/useScrollTo.cjs.js +1 -3
- package/useScrollTo.esm.js +1 -3
- package/useSmoothScroll.cjs.js +1 -6
- package/useSmoothScroll.d.ts +6 -0
- package/useSmoothScroll.esm.js +1 -6
- package/useSpinDelay.cjs.js +1 -12
- package/useSpinDelay.d.ts +12 -0
- package/useSpinDelay.esm.js +1 -12
- package/useTraceUpdate.cjs.js +1 -4
- package/useTraceUpdate.d.ts +3 -0
- package/useTraceUpdate.esm.js +1 -4
- package/useUpdateEffect.cjs.js +1 -4
- package/useUpdateEffect.d.ts +3 -0
- package/useUpdateEffect.esm.js +1 -4
- package/useWindowSize.cjs.js +1 -9
- package/useWindowSize.d.ts +11 -2
- package/useWindowSize.esm.js +1 -9
package/FaviconTags.cjs.js
CHANGED
|
@@ -4,16 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
* Favicon tags.
|
|
9
|
-
*
|
|
10
|
-
* This component is meant to be wrapped in a `<head>` manager component.
|
|
11
|
-
*
|
|
12
|
-
* These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
|
|
13
|
-
* on _**16 Feb 2022**_.
|
|
14
|
-
*
|
|
15
|
-
* @see https://realfavicongenerator.net/
|
|
16
|
-
*/let FaviconTags=({name:a,color:t,safariTabColor:o,tileColor:c,themeColor:l})=>/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[/*#__PURE__*/jsxRuntime.jsx("link",{rel:"shortcut icon",href:"/favicon.ico",type:"image/x-icon"}),/*#__PURE__*/jsxRuntime.jsx("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/apple-touch-icon.png"}),/*#__PURE__*/jsxRuntime.jsx("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/favicon-32x32.png"}),/*#__PURE__*/jsxRuntime.jsx("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/favicon-16x16.png"}),/*#__PURE__*/jsxRuntime.jsx("link",{rel:"manifest",href:"/site.webmanifest"}),/*#__PURE__*/jsxRuntime.jsx("link",{rel:"mask-icon",href:"/safari-pinned-tab.svg",color:o||t}),/*#__PURE__*/jsxRuntime.jsx("meta",{name:"apple-mobile-web-app-title",content:a}),/*#__PURE__*/jsxRuntime.jsx("meta",{name:"application-name",content:a}),/*#__PURE__*/jsxRuntime.jsx("meta",{name:"msapplication-TileColor",content:c||t}),/*#__PURE__*/jsxRuntime.jsx("meta",{name:"theme-color",content:l||t})]});
|
|
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})]});
|
|
17
8
|
|
|
18
9
|
exports.FaviconTags = FaviconTags;
|
|
19
10
|
exports.default = FaviconTags;
|
package/FaviconTags.d.ts
CHANGED
|
@@ -5,5 +5,15 @@ export type FaviconTagsProps = {
|
|
|
5
5
|
tileColor?: string;
|
|
6
6
|
themeColor?: string;
|
|
7
7
|
};
|
|
8
|
+
/**
|
|
9
|
+
* Favicon tags.
|
|
10
|
+
*
|
|
11
|
+
* This component is meant to be wrapped in a `<head>` manager component.
|
|
12
|
+
*
|
|
13
|
+
* These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
|
|
14
|
+
* on _**16 Feb 2022**_.
|
|
15
|
+
*
|
|
16
|
+
* @see https://realfavicongenerator.net/
|
|
17
|
+
*/
|
|
8
18
|
export declare let FaviconTags: ({ name, color, safariTabColor, tileColor, themeColor, }: FaviconTagsProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
19
|
export default FaviconTags;
|
package/FaviconTags.esm.js
CHANGED
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
* Favicon tags.
|
|
5
|
-
*
|
|
6
|
-
* This component is meant to be wrapped in a `<head>` manager component.
|
|
7
|
-
*
|
|
8
|
-
* These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
|
|
9
|
-
* on _**16 Feb 2022**_.
|
|
10
|
-
*
|
|
11
|
-
* @see https://realfavicongenerator.net/
|
|
12
|
-
*/let FaviconTags=({name:a,color:t,safariTabColor:o,tileColor:c,themeColor:l})=>/*#__PURE__*/jsxs(Fragment,{children:[/*#__PURE__*/jsx("link",{rel:"shortcut icon",href:"/favicon.ico",type:"image/x-icon"}),/*#__PURE__*/jsx("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/apple-touch-icon.png"}),/*#__PURE__*/jsx("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/favicon-32x32.png"}),/*#__PURE__*/jsx("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/favicon-16x16.png"}),/*#__PURE__*/jsx("link",{rel:"manifest",href:"/site.webmanifest"}),/*#__PURE__*/jsx("link",{rel:"mask-icon",href:"/safari-pinned-tab.svg",color:o||t}),/*#__PURE__*/jsx("meta",{name:"apple-mobile-web-app-title",content:a}),/*#__PURE__*/jsx("meta",{name:"application-name",content:a}),/*#__PURE__*/jsx("meta",{name:"msapplication-TileColor",content:c||t}),/*#__PURE__*/jsx("meta",{name:"theme-color",content:l||t})]});
|
|
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})]});
|
|
13
4
|
|
|
14
5
|
export { FaviconTags, FaviconTags as default };
|
package/Meta.cjs.js
CHANGED
|
@@ -4,16 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
* Determines whether `user-scalable=0` is add to the `meta->viewport` content
|
|
9
|
-
*
|
|
10
|
-
* This is an opt in instead of the default browser behaviour as it helps prevent
|
|
11
|
-
* weird zooming on input fields on iPhone iOS devices.
|
|
12
|
-
* @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
|
|
13
|
-
* @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
|
|
14
|
-
*
|
|
15
|
-
* @default false
|
|
16
|
-
*/let Meta=({zoom:t})=>/*#__PURE__*/jsxRuntime.jsx("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});
|
|
7
|
+
let Meta=({zoom:t})=>jsxRuntime.jsx("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});
|
|
17
8
|
|
|
18
9
|
exports.Meta = Meta;
|
|
19
10
|
exports.default = Meta;
|
package/Meta.d.ts
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
export type MetaProps = {
|
|
2
|
+
/**
|
|
3
|
+
* Determines whether `user-scalable=0` is add to the `meta->viewport` content
|
|
4
|
+
*
|
|
5
|
+
* This is an opt in instead of the default browser behaviour as it helps prevent
|
|
6
|
+
* weird zooming on input fields on iPhone iOS devices.
|
|
7
|
+
* @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
|
|
8
|
+
* @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
|
|
9
|
+
*
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
2
12
|
zoom?: boolean;
|
|
3
13
|
};
|
|
4
14
|
export declare let Meta: ({ zoom }: MetaProps) => import("react/jsx-runtime").JSX.Element;
|
package/Meta.esm.js
CHANGED
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
* Determines whether `user-scalable=0` is add to the `meta->viewport` content
|
|
5
|
-
*
|
|
6
|
-
* This is an opt in instead of the default browser behaviour as it helps prevent
|
|
7
|
-
* weird zooming on input fields on iPhone iOS devices.
|
|
8
|
-
* @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
|
|
9
|
-
* @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
|
|
10
|
-
*
|
|
11
|
-
* @default false
|
|
12
|
-
*/let Meta=({zoom:t})=>/*#__PURE__*/jsx("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});
|
|
3
|
+
let Meta=({zoom:t})=>jsx("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});
|
|
13
4
|
|
|
14
5
|
export { Meta, Meta as default };
|
package/NoJs.cjs.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
let NoJs=t
|
|
7
|
+
let NoJs=t=>jsxRuntime.jsx("script",{id:"no-js",dangerouslySetInnerHTML:{__html:'document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";'}});
|
|
8
8
|
|
|
9
9
|
exports.NoJs = NoJs;
|
|
10
10
|
exports.default = NoJs;
|
package/NoJs.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
let NoJs=t
|
|
3
|
+
let NoJs=t=>jsx("script",{id:"no-js",dangerouslySetInnerHTML:{__html:'document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";'}});
|
|
4
4
|
|
|
5
5
|
export { NoJs, NoJs as default };
|
package/Polymorphic.d.ts
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* React Polymorphic components type utilities
|
|
3
|
+
*
|
|
4
|
+
* @resources
|
|
5
|
+
* - [Polymorphic types from Radix UI in Wanda System](https://github.com/wonderflow-bv/wanda/blob/main/packages/react-components/src/types/polymorphic/index.ts)
|
|
6
|
+
* - [TypeScript + React: Typing Generic forwardRefs](https://fettblog.eu/typescript-react-generic-forward-refs/)
|
|
7
|
+
* - [React with Typescript -- Generics while using React.forwardRef](https://stackoverflow.com/a/58473012/1938970)
|
|
8
|
+
* - [How to write a generic that extracts the prop types of the component that passed in](https://stackoverflow.com/a/57846897/1938970)
|
|
9
|
+
* - [React TS Generic component to pass generic props to children](https://stackoverflow.com/a/68442669/1938970)
|
|
10
|
+
* - [About custom ref prop](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)
|
|
11
|
+
* - [forwardRef performance](https://github.com/facebook/react/issues/13456)
|
|
12
|
+
* - [React docs: Exposing DOM Refs to Parent Components](https://github.com/facebook/react/issues/13456)
|
|
13
|
+
*/
|
|
1
14
|
export declare namespace Polymorphic {
|
|
2
15
|
type Merge<P1 = Record<string, never>, P2 = Record<string, never>> = Omit<P1, keyof P2> & P2;
|
|
3
16
|
type ComponentTypes = React.ComponentClass<any> | React.FunctionComponent<any> | keyof JSX.IntrinsicElements;
|
|
@@ -4,25 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var react = require('react');
|
|
5
5
|
var utils = require('./utils.cjs.js');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
* TODO: include in this lib utilities like in https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/iconBase.tsx
|
|
9
|
-
*
|
|
10
|
-
* this is the `MdAdd` icon from `react-icons`
|
|
11
|
-
*/let d=l=>/*#__PURE__*/jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",stroke:"none",...l,children:[/*#__PURE__*/jsxRuntime.jsx("path",{d:"M0 0h24v24H0z"}),/*#__PURE__*/jsxRuntime.jsx("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"})]}),/**
|
|
12
|
-
* Style for button within a event cell
|
|
13
|
-
*
|
|
14
|
-
* Here we might differentiate week/month view where the first does not get
|
|
15
|
-
* ellipsed btn texts, with `Start` as block element and underneath the `Title`
|
|
16
|
-
* on multiple lines, but that would mean that we loose the ability to interweave
|
|
17
|
-
* single-day events among the spaces left by wider multi-days events.
|
|
18
|
-
*/o={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"};let CalendarDaygridCell=({eventClicked:a,setEventClicked:s,// eventHovered,
|
|
19
|
-
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 /*#__PURE__*/jsxRuntime.jsx(f,{children:p.map((t,p)=>{if(p===u&&!x)return /*#__PURE__*/jsxRuntime.jsxs(y,{onClick:()=>M(!0),children:[/*#__PURE__*/jsxRuntime.jsx(d,{}),O.length-u]},"overflowMessage"+p);if(p>u&&!x)return null;if(t.placeholder)return /*#__PURE__*/jsxRuntime.jsx(react.Fragment,{children:/*#__PURE__*/jsxRuntime.jsx($,{$placeholder:!0,children:/*#__PURE__*/jsxRuntime.jsx(m,{"aria-hidden":"true",style:{visibility:"hidden"},$placeholder:!0,children:/*#__PURE__*/jsxRuntime.jsx(w,{children:" "})})})},t.key);let f={zIndex:t.firstOfMulti?1:0,// to cover the following event days
|
|
20
|
-
position:"relative",width:t.firstOfMulti?`${100*t.width}%`:"100%"};v[t.calendar.id].on||// @ts-expect-error nevermind
|
|
21
|
-
(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 /*#__PURE__*/jsxRuntime.jsx(react.Fragment,{children:/*#__PURE__*/jsxRuntime.jsx($,{style:f,...k,children:/*#__PURE__*/jsxRuntime.jsx(m,{role:"button",style:o,...k,onClick:()=>s(e=>e?.uid===t.uid?null:t),onMouseEnter:()=>h(t),onMouseLeave:()=>h(null),children:t.allDay?/*#__PURE__*/jsxRuntime.jsx(w,{children:t.title}):/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[/*#__PURE__*/jsxRuntime.jsx(g,{children:utils.getDisplayTime(t.start)}),/*#__PURE__*/jsxRuntime.jsx(w,{children:t.title})]})})})},t.key)})})};/* {i === events.length - 1 && isExpanded ? (
|
|
22
|
-
<CellOverflow onClick={() => expand(false)}>
|
|
23
|
-
<IconCollapse />
|
|
24
|
-
Show less
|
|
25
|
-
</CellOverflow>
|
|
26
|
-
) : null} */
|
|
7
|
+
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={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.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,...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:utils.getDisplayTime(t.start)}),jsxRuntime.jsx(w,{children:t.title})]})})})},t.key)})})};
|
|
27
8
|
|
|
28
9
|
exports.CalendarDaygridCell = CalendarDaygridCell;
|
|
@@ -2,25 +2,6 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useState, Fragment } from 'react';
|
|
3
3
|
import { getDisplayTime } from './utils.esm.js';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
* TODO: include in this lib utilities like in https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/iconBase.tsx
|
|
7
|
-
*
|
|
8
|
-
* this is the `MdAdd` icon from `react-icons`
|
|
9
|
-
*/let d=l=>/*#__PURE__*/jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",stroke:"none",...l,children:[/*#__PURE__*/jsx("path",{d:"M0 0h24v24H0z"}),/*#__PURE__*/jsx("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"})]}),/**
|
|
10
|
-
* Style for button within a event cell
|
|
11
|
-
*
|
|
12
|
-
* Here we might differentiate week/month view where the first does not get
|
|
13
|
-
* ellipsed btn texts, with `Start` as block element and underneath the `Title`
|
|
14
|
-
* on multiple lines, but that would mean that we loose the ability to interweave
|
|
15
|
-
* single-day events among the spaces left by wider multi-days events.
|
|
16
|
-
*/o={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"};let CalendarDaygridCell=({eventClicked:a,setEventClicked:s,// eventHovered,
|
|
17
|
-
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 /*#__PURE__*/jsx(f,{children:p.map((t,p)=>{if(p===u&&!x)return /*#__PURE__*/jsxs(y,{onClick:()=>M(!0),children:[/*#__PURE__*/jsx(d,{}),O.length-u]},"overflowMessage"+p);if(p>u&&!x)return null;if(t.placeholder)return /*#__PURE__*/jsx(Fragment,{children:/*#__PURE__*/jsx($,{$placeholder:!0,children:/*#__PURE__*/jsx(m,{"aria-hidden":"true",style:{visibility:"hidden"},$placeholder:!0,children:/*#__PURE__*/jsx(w,{children:" "})})})},t.key);let f={zIndex:t.firstOfMulti?1:0,// to cover the following event days
|
|
18
|
-
position:"relative",width:t.firstOfMulti?`${100*t.width}%`:"100%"};v[t.calendar.id].on||// @ts-expect-error nevermind
|
|
19
|
-
(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 /*#__PURE__*/jsx(Fragment,{children:/*#__PURE__*/jsx($,{style:f,...k,children:/*#__PURE__*/jsx(m,{role:"button",style:o,...k,onClick:()=>s(e=>e?.uid===t.uid?null:t),onMouseEnter:()=>h(t),onMouseLeave:()=>h(null),children:t.allDay?/*#__PURE__*/jsx(w,{children:t.title}):/*#__PURE__*/jsxs(Fragment$1,{children:[/*#__PURE__*/jsx(g,{children:getDisplayTime(t.start)}),/*#__PURE__*/jsx(w,{children:t.title})]})})})},t.key)})})};/* {i === events.length - 1 && isExpanded ? (
|
|
20
|
-
<CellOverflow onClick={() => expand(false)}>
|
|
21
|
-
<IconCollapse />
|
|
22
|
-
Show less
|
|
23
|
-
</CellOverflow>
|
|
24
|
-
) : null} */
|
|
5
|
+
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={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.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,...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)})})};
|
|
25
6
|
|
|
26
7
|
export { CalendarDaygridCell };
|
|
@@ -4,6 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var format = require('date-fns/format');
|
|
5
5
|
var useDateLocale = require('./useDateLocale.cjs.js');
|
|
6
6
|
|
|
7
|
-
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.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)}`)
|
|
7
|
+
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.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})]})};
|
|
8
8
|
|
|
9
9
|
exports.KoineCalendarDaygridNav = KoineCalendarDaygridNav;
|
|
@@ -2,6 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { format } from 'date-fns/format';
|
|
3
3
|
import { useDateLocale } from './useDateLocale.esm.js';
|
|
4
4
|
|
|
5
|
-
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)}`)
|
|
5
|
+
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})]})};
|
|
6
6
|
|
|
7
7
|
export { KoineCalendarDaygridNav };
|
|
@@ -8,9 +8,6 @@ var CalendarDaygridCell = require('./CalendarDaygridCell.cjs.js');
|
|
|
8
8
|
var useDateLocale = require('./useDateLocale.cjs.js');
|
|
9
9
|
var utils = require('./utils.cjs.js');
|
|
10
10
|
|
|
11
|
-
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})
|
|
12
|
-
{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([]),// const [days, setDays] = useState(dayLabels || [...Array(7).keys()]);
|
|
13
|
-
G=useDateLocale.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(utils.processEventsInView(h,b,H,J));},[h,b,H,J]),react.useEffect(()=>{G&&G.localize&&!f&&B([1,2,3,4,5,6,0].map(// @ts-expect-error nevermind
|
|
14
|
-
e=>G.localize.day(e,{width:"abbreviated"})));},[G,f]),/*#__PURE__*/jsxRuntime.jsxs(C,{...N,children:[/*#__PURE__*/jsxRuntime.jsx(D,{children:/*#__PURE__*/jsxRuntime.jsx("tr",{children:A.map(t=>/*#__PURE__*/jsxRuntime.jsx(S,{scope:"column",children:t},t))})}),/*#__PURE__*/jsxRuntime.jsx(k,{children:E.map((r,a)=>/*#__PURE__*/jsxRuntime.jsx(z,{...r.props,children:r.days.map(r=>/*#__PURE__*/jsxRuntime.jsxs(L,{...r.props,children:[/*#__PURE__*/jsxRuntime.jsx(O,{...r.props,children:r.label}),r.events.length>0&&/*#__PURE__*/jsxRuntime.jsx(CalendarDaygridCell.CalendarDaygridCell,{eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,view:b,maxEvents:j,events:r.events,timestamp:r.timestamp,calendarsMap:x,...q})]}))}))})]})};
|
|
11
|
+
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.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(utils.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=>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.CalendarDaygridCell,{eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,view:b,maxEvents:j,events:r.events,timestamp:r.timestamp,calendarsMap:x,...q})]}))}))})]})};
|
|
15
12
|
|
|
16
13
|
exports.KoineCalendarDaygridTable = KoineCalendarDaygridTable;
|
|
@@ -6,9 +6,6 @@ import { CalendarDaygridCell } from './CalendarDaygridCell.esm.js';
|
|
|
6
6
|
import { useDateLocale } from './useDateLocale.esm.js';
|
|
7
7
|
import { processEventsInView } from './utils.esm.js';
|
|
8
8
|
|
|
9
|
-
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})
|
|
10
|
-
{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([]),// const [days, setDays] = useState(dayLabels || [...Array(7).keys()]);
|
|
11
|
-
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(// @ts-expect-error nevermind
|
|
12
|
-
e=>G.localize.day(e,{width:"abbreviated"})));},[G,f]),/*#__PURE__*/jsxs(C,{...N,children:[/*#__PURE__*/jsx(D,{children:/*#__PURE__*/jsx("tr",{children:A.map(t=>/*#__PURE__*/jsx(S,{scope:"column",children:t},t))})}),/*#__PURE__*/jsx(k,{children:E.map((r,a)=>/*#__PURE__*/jsx(z,{...r.props,children:r.days.map(r=>/*#__PURE__*/jsxs(L,{...r.props,children:[/*#__PURE__*/jsx(O,{...r.props,children:r.label}),r.events.length>0&&/*#__PURE__*/jsx(CalendarDaygridCell,{eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,view:b,maxEvents:j,events:r.events,timestamp:r.timestamp,calendarsMap:x,...q})]}))}))})]})};
|
|
9
|
+
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=>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})]}))}))})]})};
|
|
13
10
|
|
|
14
11
|
export { KoineCalendarDaygridTable };
|
|
@@ -2,13 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
|
|
5
|
-
let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})
|
|
6
|
-
// const { name: nameA } = a[1];
|
|
7
|
-
// const { name: nameB } = b[1];
|
|
8
|
-
// if (nameA < nameB) return -1;
|
|
9
|
-
// else if (nameA > nameB) return 1;
|
|
10
|
-
// else return 0;
|
|
11
|
-
// });
|
|
12
|
-
/*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment,{children:Object.entries(a).map(([r,a])=>/*#__PURE__*/jsxRuntime.jsxs(d,{onClick:()=>s(r),$color:a.color,$empty:0===a.events,disabled:0===a.events,children:[/*#__PURE__*/jsxRuntime.jsx(i,{children:a.on?"⬤":"⭘"}),/*#__PURE__*/jsxRuntime.jsx(l,{children:a.name}),/*#__PURE__*/jsxRuntime.jsx(t,{children:a.events})]},"CalendarLegend."+r))});
|
|
5
|
+
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))});
|
|
13
6
|
|
|
14
7
|
exports.KoineCalendarLegend = KoineCalendarLegend;
|
|
@@ -1,12 +1,5 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})
|
|
4
|
-
// const { name: nameA } = a[1];
|
|
5
|
-
// const { name: nameB } = b[1];
|
|
6
|
-
// if (nameA < nameB) return -1;
|
|
7
|
-
// else if (nameA > nameB) return 1;
|
|
8
|
-
// else return 0;
|
|
9
|
-
// });
|
|
10
|
-
/*#__PURE__*/jsx(Fragment,{children:Object.entries(a).map(([r,a])=>/*#__PURE__*/jsxs(d,{onClick:()=>s(r),$color:a.color,$empty:0===a.events,disabled:0===a.events,children:[/*#__PURE__*/jsx(i,{children:a.on?"⬤":"⭘"}),/*#__PURE__*/jsx(l,{children:a.name}),/*#__PURE__*/jsx(t,{children:a.events})]},"CalendarLegend."+r))});
|
|
3
|
+
let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})=>jsx(Fragment,{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))});
|
|
11
4
|
|
|
12
5
|
export { KoineCalendarLegend };
|
|
@@ -5,20 +5,6 @@ var subDays = require('date-fns/subDays');
|
|
|
5
5
|
var utils$1 = require('@koine/utils');
|
|
6
6
|
var utils = require('./utils.cjs.js');
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
* The default is the time zone of the calendar
|
|
10
|
-
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
11
|
-
*//** The calendars settings */let getCalendarsEventsFromGoogle=async({calendars:e,...t})=>{let a={};return await Promise.all(e.map(async e=>{utils.addCalendarEvents(await o({calendar:e,...t}),a);})),a};/** The calendar settings */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=/**
|
|
12
|
-
* Google event as it comes from Google's API
|
|
13
|
-
*//**
|
|
14
|
-
* Google calendar as it comes from Google's API
|
|
15
|
-
*//**
|
|
16
|
-
* Google event's date as it comes from Google's API
|
|
17
|
-
*//** When the event is "all day" we have `date` instead of `dateTime` */"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$1.isUndefined(i.end.dateTime)&&utils$1.isString(i.end.date),p=i.location||"",D=i.description||"",// FIXME: he.decode(event.description || '');
|
|
18
|
-
h=m.getTime()+""+u.getTime();// multi-days all day events has as end date the date after to what we actually
|
|
19
|
-
// mean, hence we subtract one day. @see https://support.google.com/calendar/thread/10074544/google-calendar-all-day-events-are-showing-up-as-a-24-hr-event-across-time-zones?hl=en
|
|
20
|
-
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=[utils.getEventTimestamp(t)];for(;differenceInDays.differenceInDays(a,t);)// console.log(title, differenceInDays(to, from))
|
|
21
|
-
t.setDate(t.getDate()+1),n.push(utils.getEventTimestamp(t));return n}(),E=utils$1.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){}// if (onError) onError(e);
|
|
22
|
-
return c}
|
|
8
|
+
let getCalendarsEventsFromGoogle=async({calendars:e,...t})=>{let a={};return await Promise.all(e.map(async e=>{utils.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$1.isUndefined(i.end.dateTime)&&utils$1.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=[utils.getEventTimestamp(t)];for(;differenceInDays.differenceInDays(a,t);)t.setDate(t.getDate()+1),n.push(utils.getEventTimestamp(t));return n}(),E=utils$1.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}
|
|
23
9
|
|
|
24
10
|
exports.getCalendarsEventsFromGoogle = getCalendarsEventsFromGoogle;
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import type { CalendarEventsMap, Calendars } from "./types";
|
|
2
2
|
type GetCalendarsEventsFromGoogleOptions = {
|
|
3
|
+
/** Fall back to `process.env.GOOGLE_CALENDAR_API_KEY */
|
|
3
4
|
apiKey?: string;
|
|
5
|
+
/** Start gethering events from date */
|
|
4
6
|
start: Date;
|
|
7
|
+
/** End gethering events at date */
|
|
5
8
|
end: Date;
|
|
9
|
+
/**
|
|
10
|
+
* The default is the time zone of the calendar
|
|
11
|
+
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
12
|
+
*/
|
|
6
13
|
timeZone?: string;
|
|
14
|
+
/** The calendars settings */
|
|
7
15
|
calendars: Calendars;
|
|
8
16
|
};
|
|
9
17
|
export declare let getCalendarsEventsFromGoogle: ({ calendars, ...options }: GetCalendarsEventsFromGoogleOptions) => Promise<CalendarEventsMap>;
|
|
@@ -3,20 +3,6 @@ import { subDays } from 'date-fns/subDays';
|
|
|
3
3
|
import { isUndefined, isString, arrayToLookup } from '@koine/utils';
|
|
4
4
|
import { addCalendarEvents, getEventTimestamp } from './utils.esm.js';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
* The default is the time zone of the calendar
|
|
8
|
-
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
9
|
-
*//** The calendars settings */let getCalendarsEventsFromGoogle=async({calendars:e,...t})=>{let a={};return await Promise.all(e.map(async e=>{addCalendarEvents(await o({calendar:e,...t}),a);})),a};/** The calendar settings */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=/**
|
|
10
|
-
* Google event as it comes from Google's API
|
|
11
|
-
*//**
|
|
12
|
-
* Google calendar as it comes from Google's API
|
|
13
|
-
*//**
|
|
14
|
-
* Google event's date as it comes from Google's API
|
|
15
|
-
*//** When the event is "all day" we have `date` instead of `dateTime` */"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||"",// FIXME: he.decode(event.description || '');
|
|
16
|
-
h=m.getTime()+""+u.getTime();// multi-days all day events has as end date the date after to what we actually
|
|
17
|
-
// mean, hence we subtract one day. @see https://support.google.com/calendar/thread/10074544/google-calendar-all-day-events-are-showing-up-as-a-24-hr-event-across-time-zones?hl=en
|
|
18
|
-
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);)// console.log(title, differenceInDays(to, from))
|
|
19
|
-
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){}// if (onError) onError(e);
|
|
20
|
-
return c}
|
|
6
|
+
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}
|
|
21
7
|
|
|
22
8
|
export { getCalendarsEventsFromGoogle };
|
package/calendar/types.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
export type Calendar = {
|
|
2
2
|
id: string;
|
|
3
3
|
color: string;
|
|
4
|
+
/**
|
|
5
|
+
* If not defined the name is gathered from the remote calendar response,
|
|
6
|
+
* for google calendars that comes from the `summary` value.
|
|
7
|
+
*/
|
|
4
8
|
name?: string;
|
|
5
9
|
};
|
|
6
10
|
export type Calendars = Calendar[];
|
|
@@ -12,8 +16,17 @@ export type CalendarRange = [Date, Date];
|
|
|
12
16
|
export type CalendarView = "month" | "week";
|
|
13
17
|
export type CalendarEvent = {
|
|
14
18
|
calendar: Calendar;
|
|
19
|
+
/**
|
|
20
|
+
* List of day timestamps across which the event spans
|
|
21
|
+
*/
|
|
15
22
|
days: number[];
|
|
23
|
+
/**
|
|
24
|
+
* Lookup object for day timestamps across which the event spans
|
|
25
|
+
*/
|
|
16
26
|
daysMap: Record<number, 1>;
|
|
27
|
+
/**
|
|
28
|
+
* Flag for events that spans across multiple days
|
|
29
|
+
*/
|
|
17
30
|
multi: boolean;
|
|
18
31
|
allDay: boolean;
|
|
19
32
|
link: string;
|
|
@@ -27,7 +40,13 @@ export type CalendarEvent = {
|
|
|
27
40
|
description: string;
|
|
28
41
|
uid: string;
|
|
29
42
|
};
|
|
43
|
+
/**
|
|
44
|
+
* Calendar events mapped by day `timestamp` number
|
|
45
|
+
*/
|
|
30
46
|
export type CalendarEventsByTimestamp = Record<number, CalendarEventsMap>;
|
|
47
|
+
/**
|
|
48
|
+
* Calendar events map by `uid`
|
|
49
|
+
*/
|
|
31
50
|
export type CalendarEventsMap = Record<CalendarEvent["uid"], CalendarEvent>;
|
|
32
51
|
export type CalendarViewWeeks = CalendarViewWeek[];
|
|
33
52
|
export type CalendarViewWeek = {
|
|
@@ -4,18 +4,6 @@ var react = require('react');
|
|
|
4
4
|
var calendarApiGoogle = require('./calendar-api-google.cjs.js');
|
|
5
5
|
var utils = require('./utils.cjs.js');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
* The calendar view
|
|
9
|
-
* @default "month"
|
|
10
|
-
*//**
|
|
11
|
-
* The default is the time zone of the calendar
|
|
12
|
-
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
13
|
-
*/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||utils.getStartDate(new Date,w),h=y||utils.getEndDate(D,w),[O,P]=react.useState([D,h]),[j,x]=react.useState(utils.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}},// initial state
|
|
14
|
-
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 calendarApiGoogle.getCalendarsEventsFromGoogle({apiKey:c,calendars:e,timeZone:f,start:t,end:l});// setEvents(mergeCalendarEvents(events, newEvents));
|
|
15
|
-
L(n);}catch(e){b&&b(e);}},[L,c,f,b]),H=react.useCallback(()=>{let[e,t]=O,l=utils.getStartDate(new Date,w),n=utils.getEndDate(l,w);P([l,n]),// reset event only if we are not on the current view already
|
|
16
|
-
(e.getTime()!==l.getTime()||t.getTime()!==n.getTime())&&(z(null),k(null));},[w,O]),I=react.useCallback(()=>{P(([e])=>{let t=utils.getPrevDate(e,w),l=utils.getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),J=react.useCallback(()=>{P(([e])=>{let t=utils.getNextDate(e,w),l=utils.getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),K=react.useCallback(e=>{let t=utils.getStartDate(D,e),l=utils.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(utils.isTodayInView(e,t));},// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
17
|
-
[O]),react.useEffect(()=>{C&&F(C);},[C,F]),// when toggling a calendar we also remove the clicked event if that belongs
|
|
18
|
-
// to a now hidden calendar
|
|
19
|
-
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})}};
|
|
7
|
+
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||utils.getStartDate(new Date,w),h=y||utils.getEndDate(D,w),[O,P]=react.useState([D,h]),[j,x]=react.useState(utils.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 calendarApiGoogle.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=utils.getStartDate(new Date,w),n=utils.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=utils.getPrevDate(e,w),l=utils.getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),J=react.useCallback(()=>{P(([e])=>{let t=utils.getNextDate(e,w),l=utils.getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),K=react.useCallback(e=>{let t=utils.getStartDate(D,e),l=utils.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(utils.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})}};
|
|
20
8
|
|
|
21
9
|
exports.useCalendar = useCalendar;
|
|
@@ -3,13 +3,27 @@ import type { KoineCalendarDaygridTableProps } from "./CalendarDaygridTable";
|
|
|
3
3
|
import type { KoineCalendarLegendProps } from "./CalendarLegend";
|
|
4
4
|
import type { CalendarEvent, CalendarEventsMap, CalendarView, Calendars } from "./types";
|
|
5
5
|
export type UseCalendarProps = {
|
|
6
|
+
/** The locale to format with `date-fns` */
|
|
6
7
|
locale: string;
|
|
8
|
+
/** Calendars infos to use */
|
|
7
9
|
calendars: Calendars;
|
|
10
|
+
/** Fall back to `process.env.GOOGLE_CALENDAR_API_KEY */
|
|
8
11
|
apiKey?: string;
|
|
12
|
+
/** The key is the event `uid` */
|
|
9
13
|
events?: CalendarEventsMap;
|
|
14
|
+
/** It defaults to the first of the current month */
|
|
10
15
|
start?: Date;
|
|
16
|
+
/** It defaults to the last day of the current month */
|
|
11
17
|
end?: Date;
|
|
18
|
+
/**
|
|
19
|
+
* The calendar view
|
|
20
|
+
* @default "month"
|
|
21
|
+
*/
|
|
12
22
|
view?: CalendarView;
|
|
23
|
+
/**
|
|
24
|
+
* The default is the time zone of the calendar
|
|
25
|
+
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
26
|
+
*/
|
|
13
27
|
timeZone?: string;
|
|
14
28
|
onError?: (e: any) => void;
|
|
15
29
|
};
|
|
@@ -2,18 +2,6 @@ import { useState, useReducer, useCallback, useEffect } from 'react';
|
|
|
2
2
|
import { getCalendarsEventsFromGoogle } from './calendar-api-google.esm.js';
|
|
3
3
|
import { getStartDate, getEndDate, isTodayInView, getPrevDate, getNextDate } from './utils.esm.js';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
* The calendar view
|
|
7
|
-
* @default "month"
|
|
8
|
-
*//**
|
|
9
|
-
* The default is the time zone of the calendar
|
|
10
|
-
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
11
|
-
*/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}},// initial state
|
|
12
|
-
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});// setEvents(mergeCalendarEvents(events, newEvents));
|
|
13
|
-
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]),// reset event only if we are not on the current view already
|
|
14
|
-
(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));},// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15
|
-
[O]),useEffect(()=>{C&&F(C);},[C,F]),// when toggling a calendar we also remove the clicked event if that belongs
|
|
16
|
-
// to a now hidden calendar
|
|
17
|
-
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})}};
|
|
5
|
+
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})}};
|
|
18
6
|
|
|
19
7
|
export { useCalendar };
|
|
@@ -2,23 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var react = require('react');
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
* Dynamically import the date-fns correct locale
|
|
7
|
-
*
|
|
8
|
-
* Inspired by:
|
|
9
|
-
* @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
|
|
10
|
-
*/let useDateLocale=(a,l="en")=>{let[r,n]=react.useState(),[o,c]=react.useState(l);return(// const [ready, setReady] = useState(false);
|
|
11
|
-
// If the user changes the locale listen to the change and import the locale that is now required.
|
|
12
|
-
react.useEffect(()=>{let e=async()=>{// This webpack option stops all of the date-fns files being imported and chunked.
|
|
13
|
-
// NB: this makes unnecessary numerous webpack chunks in applications
|
|
14
|
-
// that do not even use this hook, so we comment out the webpack dynamic
|
|
15
|
-
// import and its magic comment
|
|
16
|
-
// const localeToSet = await import(
|
|
17
|
-
// /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
|
|
18
|
-
// `date-fns/locale/${locale}/index.js`,
|
|
19
|
-
// );
|
|
20
|
-
let e=await import('date-fns/locale/en-US');c(a||o),n(e.enUS);};// setReady(true);
|
|
21
|
-
// If the locale has not yet been loaded.
|
|
22
|
-
a!==o&&e();},[a,o]),r)};
|
|
5
|
+
let useDateLocale=(a,l="en")=>{let[r,n]=react.useState(),[o,c]=react.useState(l);return react.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};
|
|
23
6
|
|
|
24
7
|
exports.useDateLocale = useDateLocale;
|
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
import type { Locale } from "date-fns";
|
|
2
|
+
/**
|
|
3
|
+
* Dynamically import the date-fns correct locale
|
|
4
|
+
*
|
|
5
|
+
* Inspired by:
|
|
6
|
+
* @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
|
|
7
|
+
*/
|
|
2
8
|
export declare let useDateLocale: (locale?: string, defaultLocale?: string) => Locale | undefined;
|
|
@@ -1,22 +1,5 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
* Dynamically import the date-fns correct locale
|
|
5
|
-
*
|
|
6
|
-
* Inspired by:
|
|
7
|
-
* @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
|
|
8
|
-
*/let useDateLocale=(a,l="en")=>{let[r,n]=useState(),[o,c]=useState(l);return(// const [ready, setReady] = useState(false);
|
|
9
|
-
// If the user changes the locale listen to the change and import the locale that is now required.
|
|
10
|
-
useEffect(()=>{let e=async()=>{// This webpack option stops all of the date-fns files being imported and chunked.
|
|
11
|
-
// NB: this makes unnecessary numerous webpack chunks in applications
|
|
12
|
-
// that do not even use this hook, so we comment out the webpack dynamic
|
|
13
|
-
// import and its magic comment
|
|
14
|
-
// const localeToSet = await import(
|
|
15
|
-
// /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
|
|
16
|
-
// `date-fns/locale/${locale}/index.js`,
|
|
17
|
-
// );
|
|
18
|
-
let e=await import('date-fns/locale/en-US');c(a||o),n(e.enUS);};// setReady(true);
|
|
19
|
-
// If the locale has not yet been loaded.
|
|
20
|
-
a!==o&&e();},[a,o]),r)};
|
|
3
|
+
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};
|
|
21
4
|
|
|
22
5
|
export { useDateLocale };
|