@koine/react 2.0.0-beta.82 → 2.0.0-beta.83
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 +10 -1
- package/FaviconTags.esm.js +10 -1
- package/Meta.cjs.js +10 -1
- package/Meta.esm.js +10 -1
- package/NoJs.cjs.js +1 -1
- package/NoJs.esm.js +1 -1
- package/calendar.cjs.js +97 -8
- package/calendar.esm.js +97 -8
- package/classed.cjs.js +42 -1
- package/classed.esm.js +42 -1
- package/createUseMediaQueryWidth.cjs.js +15 -1
- package/createUseMediaQueryWidth.esm.js +15 -1
- package/extendComponent.cjs.js +5 -1
- package/extendComponent.esm.js +5 -1
- package/forms.cjs.js +27 -1
- package/forms.esm.js +27 -1
- package/package.json +3 -3
- package/useAsyncFn.cjs.js +4 -1
- package/useAsyncFn.esm.js +4 -1
- package/useFirstMountState.cjs.js +3 -1
- package/useFirstMountState.esm.js +3 -1
- package/useFixedOffset.cjs.js +12 -1
- package/useFixedOffset.esm.js +12 -1
- package/useFocus.cjs.js +3 -1
- package/useFocus.esm.js +3 -1
- package/useInterval.cjs.js +6 -1
- package/useInterval.esm.js +6 -1
- package/useIsomorphicLayoutEffect.cjs.js +3 -1
- package/useIsomorphicLayoutEffect.esm.js +3 -1
- package/useKeyUp.cjs.js +6 -1
- package/useKeyUp.esm.js +6 -1
- package/useMeasure.cjs.js +33 -1
- package/useMeasure.esm.js +33 -1
- package/useMountedState.cjs.js +3 -1
- package/useMountedState.esm.js +3 -1
- package/useNavigateAway.cjs.js +47 -1
- package/useNavigateAway.esm.js +47 -1
- package/useScrollPosition.cjs.js +7 -1
- package/useScrollPosition.esm.js +7 -1
- package/useScrollThreshold.cjs.js +4 -1
- package/useScrollThreshold.esm.js +4 -1
- package/useScrollTo.cjs.js +3 -1
- package/useScrollTo.esm.js +3 -1
- package/useSmoothScroll.cjs.js +6 -1
- package/useSmoothScroll.esm.js +6 -1
- package/useSpinDelay.cjs.js +12 -1
- package/useSpinDelay.esm.js +12 -1
- package/useTraceUpdate.cjs.js +4 -1
- package/useTraceUpdate.esm.js +4 -1
- package/useUpdateEffect.cjs.js +4 -1
- package/useUpdateEffect.esm.js +4 -1
- package/useWindowSize.cjs.js +9 -1
- package/useWindowSize.esm.js +9 -1
package/FaviconTags.cjs.js
CHANGED
|
@@ -4,7 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
|
|
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})]});
|
|
8
17
|
|
|
9
18
|
exports.FaviconTags = FaviconTags;
|
|
10
19
|
exports["default"] = FaviconTags;
|
package/FaviconTags.esm.js
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
|
|
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})]});
|
|
4
13
|
|
|
5
14
|
export { FaviconTags, FaviconTags as default };
|
package/Meta.cjs.js
CHANGED
|
@@ -4,7 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
|
|
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"}`});
|
|
8
17
|
|
|
9
18
|
exports.Meta = Meta;
|
|
10
19
|
exports["default"] = Meta;
|
package/Meta.esm.js
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
|
|
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"}`});
|
|
4
13
|
|
|
5
14
|
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=>/*#__PURE__*/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=>/*#__PURE__*/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/calendar.cjs.js
CHANGED
|
@@ -38,21 +38,110 @@ function _interopNamespace(e) {
|
|
|
38
38
|
return Object.freeze(n);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek.startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth.endOfMonth(e):"week"===t&&(r=endOfWeek.endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths.subMonths(e,1):subWeeks.subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths.addMonths(e,1):addWeeks.addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval.isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d$1=e=>{let t=[];for(let r in e)t.push(e[r]);return
|
|
41
|
+
let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek.startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth.endOfMonth(e):"week"===t&&(r=endOfWeek.endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths.subMonths(e,1):subWeeks.subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths.addMonths(e,1):addWeeks.addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval.isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d$1=e=>{let t=[];for(let r in e)t.push(e[r]);return(// sort events first multi, then all day then by start then by created date
|
|
42
|
+
t.sort((e,t)=>{let r=Number(t.multi)-Number(e.multi),a=Number(t.allDay)-Number(e.allDay),n=e.start.getTime()-t.start.getTime(),s=e.created.getTime()-t.created.getTime();return r||a||n||s}),t)};let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d$1(t),l=new Date,m=getEventTimestamp(l),p={},f=[];for(let t=0;t<n.length;t++){let i={props:{key:`week.${t}`},days:[]},d=n[t],u=d.getDate(),g=getEventTimestamp(new Date(d)),h=getEventTimestamp(addDays.addDays(new Date(d),6));for(let e=0;e<7;e++){let t=new Date(new Date(d).setDate(u+e)),n=getEventTimestamp(t),f={$isToday:m===n,$isOutOfRange:"month"===r&&t.getMonth()!==a},v={props:{key:`day.${n}`,...f},timestamp:n+"",label:t.getDate()+"",events:[]};// check that we have events in this day
|
|
43
|
+
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 we already have the information on when the event has been
|
|
44
|
+
// vertically positioned use that index
|
|
45
|
+
if(// only for multi days events:
|
|
46
|
+
s.multi&&(// filter out the days outside of the current week view to avoid
|
|
47
|
+
// making a multi-days event chip wider than the week row or shorter
|
|
48
|
+
// than it should be (when event spans across weeks)
|
|
49
|
+
m=s.days.filter(e=>e>=g&&e<=h).length,// flag the first day of multi-days events, consider that an event
|
|
50
|
+
// might start in a day earlier (hence outside) of the current
|
|
51
|
+
// week/month view, so we always check for Mondays (dayNumber === 0)
|
|
52
|
+
(0===s.days.indexOf(n)||0===e)&&(a=!0)),p[s.uid])i=p[s.uid];else // now look for a free slot and use its index as `top`
|
|
53
|
+
for(let e=0;e<t.length;e++)if(1!==t[e]){i=e;break}// now mark the slot as busy
|
|
54
|
+
t[i]=1,// store the slot vertical position consistently for multi-days events
|
|
55
|
+
a&&(p[s.uid]=i),// push the event, they will be sorted later
|
|
56
|
+
v.events.push({key:`event.${n}-${i}`,...f,...s,isPast:l>s.end,firstOfMulti:a,top:i,width:m});}}// fill the empty slots with events' placeholders
|
|
57
|
+
for(let e=0;e<t.length;e++)1!==t[e]&&v.events.push({key:`event.${n}-${e}}`,placeholder:!0,top:e});// sort events and events placeholders by top position
|
|
58
|
+
v.events.sort((e,t)=>e.top-t.top);}i.days.push(v);}f.push(i);}return f};
|
|
42
59
|
|
|
43
|
-
|
|
60
|
+
/**
|
|
61
|
+
* TODO: include in this lib utilities like in https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/iconBase.tsx
|
|
62
|
+
*
|
|
63
|
+
* this is the `MdAdd` icon from `react-icons`
|
|
64
|
+
*/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"})]}),/**
|
|
65
|
+
* Style for button within a event cell
|
|
66
|
+
*
|
|
67
|
+
* Here we might differentiate week/month view where the first does not get
|
|
68
|
+
* ellipsed btn texts, with `Start` as block element and underneath the `Title`
|
|
69
|
+
* on multiple lines, but that would mean that we loose the ability to interweave
|
|
70
|
+
* single-day events among the spaces left by wider multi-days events.
|
|
71
|
+
*/o$1={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"};let CalendarDaygridCell=({eventClicked:a,setEventClicked:s,// eventHovered,
|
|
72
|
+
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
|
|
73
|
+
position:"relative",width:t.firstOfMulti?`${100*t.width}%`:"100%"};v[t.calendar.id].on||// @ts-expect-error nevermind
|
|
74
|
+
(o$1.display="none");let k={$view:c,$selected:a?.uid===t.uid,$past:t.isPast,$color:t.color,$isOutOfRange:t.$isOutOfRange,$isToday:t.$isToday};return /*#__PURE__*/jsxRuntime.jsx(react.Fragment,{children:/*#__PURE__*/jsxRuntime.jsx($,{style:f,...k,children:/*#__PURE__*/jsxRuntime.jsx(m,{role:"button",style:o$1,...k,onClick:()=>s(e=>e?.uid===t.uid?null:t),onMouseEnter:()=>h(t),onMouseLeave:()=>h(null),children:t.allDay?/*#__PURE__*/jsxRuntime.jsx(w,{children:t.title}):/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[/*#__PURE__*/jsxRuntime.jsx(g,{children:getDisplayTime(t.start)}),/*#__PURE__*/jsxRuntime.jsx(w,{children:t.title})]})})})},t.key)})})};/* {i === events.length - 1 && isExpanded ? (
|
|
75
|
+
<CellOverflow onClick={() => expand(false)}>
|
|
76
|
+
<IconCollapse />
|
|
77
|
+
Show less
|
|
78
|
+
</CellOverflow>
|
|
79
|
+
) : null} */
|
|
44
80
|
|
|
45
|
-
|
|
81
|
+
/**
|
|
82
|
+
* Dynamically import the date-fns correct locale
|
|
83
|
+
*
|
|
84
|
+
* Inspired by:
|
|
85
|
+
* @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
|
|
86
|
+
*/let useDateLocale=(a,l="en")=>{let[r,n]=react.useState(),[o,c]=react.useState(l);return(// const [ready, setReady] = useState(false);
|
|
87
|
+
// If the user changes the locale listen to the change and import the locale that is now required.
|
|
88
|
+
react.useEffect(()=>{let e=async()=>{// This webpack option stops all of the date-fns files being imported and chunked.
|
|
89
|
+
// NB: this makes unnecessary numerous webpack chunks in applications
|
|
90
|
+
// that do not even use this hook, so we comment out the webpack dynamic
|
|
91
|
+
// import and its magic comment
|
|
92
|
+
// const localeToSet = await import(
|
|
93
|
+
// /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
|
|
94
|
+
// `date-fns/locale/${locale}/index.js`,
|
|
95
|
+
// );
|
|
96
|
+
let e=await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('date-fns/locale/en-US')); });c(a||o),n(e.enUS);};// setReady(true);
|
|
97
|
+
// If the locale has not yet been loaded.
|
|
98
|
+
a!==o&&e();},[a,o]),r)};
|
|
46
99
|
|
|
47
|
-
let KoineCalendarDaygridNav=({range:a,view:l,todayInView:r,handlePrev:i,handleNext:M,handleToday:d,handleView:y,locale:c,NavRoot:m="nav",NavTitle:s="div",NavBtns:b="div",NavBtnPrev:k="button",NavBtnNext:u="button",NavBtnToday:h="button",NavBtnViewMonth:f="button",NavBtnViewWeek:g="button"})=>{let[C,p]=a,v={locale:useDateLocale(c)},x="";return "month"===l&&(x=format.format(C,"MMMM yyyy",v)),"week"===l&&(x=C.getMonth()===p.getMonth()?format.format(C,"# MMMM yyyy",v).replace("#",`${C.getDate()}-${p.getDate()}`):`${format.format(C,"d MMMM",v)} - ${format.format(p,"d MMMM yyyy",v)}`)
|
|
100
|
+
let KoineCalendarDaygridNav=({range:a,view:l,todayInView:r,handlePrev:i,handleNext:M,handleToday:d,handleView:y,locale:c,NavRoot:m="nav",NavTitle:s="div",NavBtns:b="div",NavBtnPrev:k="button",NavBtnNext:u="button",NavBtnToday:h="button",NavBtnViewMonth:f="button",NavBtnViewWeek:g="button"})=>{let[C,p]=a,v={locale:useDateLocale(c)},x="";return "month"===l&&(x=format.format(C,"MMMM yyyy",v)),"week"===l&&(x=C.getMonth()===p.getMonth()?format.format(C,"# MMMM yyyy",v).replace("#",`${C.getDate()}-${p.getDate()}`):`${format.format(C,"d MMMM",v)} - ${format.format(p,"d MMMM yyyy",v)}`),/*#__PURE__*/jsxRuntime.jsxs(m,{children:[/*#__PURE__*/jsxRuntime.jsxs(b,{children:[/*#__PURE__*/jsxRuntime.jsx(k,{onClick:i}),/*#__PURE__*/jsxRuntime.jsx(u,{onClick:M}),/*#__PURE__*/jsxRuntime.jsx(h,{onClick:d,disabled:r}),/*#__PURE__*/jsxRuntime.jsx(f,{onClick:()=>y("month"),disabled:"month"===l}),/*#__PURE__*/jsxRuntime.jsx(g,{onClick:()=>y("week"),disabled:"week"===l})]}),/*#__PURE__*/jsxRuntime.jsx(s,{range:a,formatted:x})]})};
|
|
48
101
|
|
|
49
|
-
let KoineCalendarDaygridTable=({locale:d,handlePrev:s,handleNext:c,events:h,dayLabels:f,view:b,range:u,eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,calendarsMap:x={},maxEvents:j=5,Table:C="table",TableHead:D="thead",TableHeadCell:S="th",TableBody:k="tbody",TableBodyRow:z="tr",TableBodyCell:L="td",TableBodyCellDate:O="div",Cell:I,CellOverflow:K,CellEvent:M,CellEventBtn:R,CellEventTitle:T,CellEventStart:W})
|
|
102
|
+
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})=>// ...props
|
|
103
|
+
{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()]);
|
|
104
|
+
G=useDateLocale(d),{month:H,weeks:J}=react.useMemo(()=>(function(e){let[t,a]=e,i=eachWeekOfInterval.eachWeekOfInterval({start:t,end:a},{weekStartsOn:1});return {month:t.getMonth(),weeks:i}})(u),[u]),N=reactSwipeable.useSwipeable({onSwipedLeft:c,onSwipedRight:s});return react.useEffect(()=>{F(processEventsInView(h,b,H,J));},[h,b,H,J]),react.useEffect(()=>{G&&G.localize&&!f&&B([1,2,3,4,5,6,0].map(// @ts-expect-error nevermind
|
|
105
|
+
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,{eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,view:b,maxEvents:j,events:r.events,timestamp:r.timestamp,calendarsMap:x,...q})]}))}))})]})};
|
|
50
106
|
|
|
51
|
-
let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})
|
|
107
|
+
let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})=>// const sorted = Object.entries(calendarsMap).sort((a, b) => {
|
|
108
|
+
// const { name: nameA } = a[1];
|
|
109
|
+
// const { name: nameB } = b[1];
|
|
110
|
+
// if (nameA < nameB) return -1;
|
|
111
|
+
// else if (nameA > nameB) return 1;
|
|
112
|
+
// else return 0;
|
|
113
|
+
// });
|
|
114
|
+
/*#__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))});
|
|
52
115
|
|
|
53
|
-
|
|
116
|
+
/** Fall back to `process.env.GOOGLE_CALENDAR_API_KEY *//** Start gethering events from date *//** End gethering events at date *//**
|
|
117
|
+
* The default is the time zone of the calendar
|
|
118
|
+
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
119
|
+
*//** 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=/**
|
|
120
|
+
* Google event as it comes from Google's API
|
|
121
|
+
*//**
|
|
122
|
+
* Google calendar as it comes from Google's API
|
|
123
|
+
*//**
|
|
124
|
+
* Google event's date as it comes from Google's API
|
|
125
|
+
*//** 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.isUndefined(i.end.dateTime)&&utils.isString(i.end.date),p=i.location||"",D=i.description||"",// FIXME: he.decode(event.description || '');
|
|
126
|
+
h=m.getTime()+""+u.getTime();// multi-days all day events has as end date the date after to what we actually
|
|
127
|
+
// 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
|
|
128
|
+
g&&f>u&&(f=subDays.subDays(f,1)).setHours(23,59,59);let y=function(){let t=new Date(u),a=new Date(f),n=[getEventTimestamp(t)];for(;differenceInDays.differenceInDays(a,t);)// console.log(title, differenceInDays(to, from))
|
|
129
|
+
t.setDate(t.getDate()+1),n.push(getEventTimestamp(t));return n}(),E=utils.arrayToLookup(y),S=y.length>1;return {calendar:o,created:m,link:d,title:l,status:c,start:u,end:f,days:y,daysMap:E,multi:S,color:w,allDay:g,location:p,description:D,uid:h}}(i,o);c[m.uid]=m;});}catch(e){}// if (onError) onError(e);
|
|
130
|
+
return c}
|
|
54
131
|
|
|
55
|
-
|
|
132
|
+
/** The locale to format with `date-fns` *//** Calendars infos to use *//** Fall back to `process.env.GOOGLE_CALENDAR_API_KEY *//** The key is the event `uid` *//** It defaults to the first of the current month *//** It defaults to the last day of the current month *//**
|
|
133
|
+
* The calendar view
|
|
134
|
+
* @default "month"
|
|
135
|
+
*//**
|
|
136
|
+
* The default is the time zone of the calendar
|
|
137
|
+
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
138
|
+
*/let useCalendar=({locale:d,apiKey:c,calendars:p,events:g,start:m,end:y,view:v="month",timeZone:f="",onError:b})=>{let[w,T]=react.useState(v),D=m||getStartDate(new Date,w),h=y||getEndDate(D,w),[O,P]=react.useState([D,h]),[j,x]=react.useState(isTodayInView(D,h)),[C,L]=react.useState(g||{}),[N,k]=react.useState(null),[q,z]=react.useState(null),[A,B]=react.useReducer((e,t)=>{let{type:l}=t;switch(l){case"events":{let l=t.payload;return Object.entries(e).reduce((e,[t,n])=>(e[t]={...n,events:l[t]||0},e),{})}case"visibility":{let l=t.payload;if("string"==typeof l)return {...e,[l]:{...e[l],on:!e[l].on}};return Object.entries(e).reduce((e,[t,n])=>(e[t]={...n,on:l.indexOf(t)>-1},e),{})}default:return e}},// initial state
|
|
139
|
+
p.reduce((e,t)=>(e[t.id]={...t,name:t.name||"",on:!0,events:0},e),{})),E=react.useCallback(e=>{B({type:"visibility",payload:e});},[B]),F=react.useCallback(e=>{let t={};for(let l in e){let{id:n}=e[l].calendar;t[n]=t[n]||0,t[n]++;}B({type:"events",payload:t});},[]),G=react.useCallback(async(e,t,l)=>{try{let n=await getCalendarsEventsFromGoogle({apiKey:c,calendars:e,timeZone:f,start:t,end:l});// setEvents(mergeCalendarEvents(events, newEvents));
|
|
140
|
+
L(n);}catch(e){b&&b(e);}},[L,c,f,b]),H=react.useCallback(()=>{let[e,t]=O,l=getStartDate(new Date,w),n=getEndDate(l,w);P([l,n]),// reset event only if we are not on the current view already
|
|
141
|
+
(e.getTime()!==l.getTime()||t.getTime()!==n.getTime())&&(z(null),k(null));},[w,O]),I=react.useCallback(()=>{P(([e])=>{let t=getPrevDate(e,w),l=getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),J=react.useCallback(()=>{P(([e])=>{let t=getNextDate(e,w),l=getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),K=react.useCallback(e=>{let t=getStartDate(D,e),l=getEndDate(t,e);P([t,l]),T(e),z(null),k(null);},[D]);return react.useEffect(()=>{let[e,t]=O;G(p,e,t),x(isTodayInView(e,t));},// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
142
|
+
[O]),react.useEffect(()=>{C&&F(C);},[C,F]),// when toggling a calendar we also remove the clicked event if that belongs
|
|
143
|
+
// to a now hidden calendar
|
|
144
|
+
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})}};
|
|
56
145
|
|
|
57
146
|
exports.CalendarDaygridCell = CalendarDaygridCell;
|
|
58
147
|
exports.KoineCalendarDaygridNav = KoineCalendarDaygridNav;
|
package/calendar.esm.js
CHANGED
|
@@ -16,20 +16,109 @@ import { differenceInDays } from 'date-fns/differenceInDays';
|
|
|
16
16
|
import { subDays } from 'date-fns/subDays';
|
|
17
17
|
import { isUndefined, isString, arrayToLookup } from '@koine/utils';
|
|
18
18
|
|
|
19
|
-
let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth(e):"week"===t&&(r=endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths(e,1):subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths(e,1):addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d$1=e=>{let t=[];for(let r in e)t.push(e[r]);return
|
|
19
|
+
let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth(e):"week"===t&&(r=endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths(e,1):subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths(e,1):addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d$1=e=>{let t=[];for(let r in e)t.push(e[r]);return(// sort events first multi, then all day then by start then by created date
|
|
20
|
+
t.sort((e,t)=>{let r=Number(t.multi)-Number(e.multi),a=Number(t.allDay)-Number(e.allDay),n=e.start.getTime()-t.start.getTime(),s=e.created.getTime()-t.created.getTime();return r||a||n||s}),t)};let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d$1(t),l=new Date,m=getEventTimestamp(l),p={},f=[];for(let t=0;t<n.length;t++){let i={props:{key:`week.${t}`},days:[]},d=n[t],u=d.getDate(),g=getEventTimestamp(new Date(d)),h=getEventTimestamp(addDays(new Date(d),6));for(let e=0;e<7;e++){let t=new Date(new Date(d).setDate(u+e)),n=getEventTimestamp(t),f={$isToday:m===n,$isOutOfRange:"month"===r&&t.getMonth()!==a},v={props:{key:`day.${n}`,...f},timestamp:n+"",label:t.getDate()+"",events:[]};// check that we have events in this day
|
|
21
|
+
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 we already have the information on when the event has been
|
|
22
|
+
// vertically positioned use that index
|
|
23
|
+
if(// only for multi days events:
|
|
24
|
+
s.multi&&(// filter out the days outside of the current week view to avoid
|
|
25
|
+
// making a multi-days event chip wider than the week row or shorter
|
|
26
|
+
// than it should be (when event spans across weeks)
|
|
27
|
+
m=s.days.filter(e=>e>=g&&e<=h).length,// flag the first day of multi-days events, consider that an event
|
|
28
|
+
// might start in a day earlier (hence outside) of the current
|
|
29
|
+
// week/month view, so we always check for Mondays (dayNumber === 0)
|
|
30
|
+
(0===s.days.indexOf(n)||0===e)&&(a=!0)),p[s.uid])i=p[s.uid];else // now look for a free slot and use its index as `top`
|
|
31
|
+
for(let e=0;e<t.length;e++)if(1!==t[e]){i=e;break}// now mark the slot as busy
|
|
32
|
+
t[i]=1,// store the slot vertical position consistently for multi-days events
|
|
33
|
+
a&&(p[s.uid]=i),// push the event, they will be sorted later
|
|
34
|
+
v.events.push({key:`event.${n}-${i}`,...f,...s,isPast:l>s.end,firstOfMulti:a,top:i,width:m});}}// fill the empty slots with events' placeholders
|
|
35
|
+
for(let e=0;e<t.length;e++)1!==t[e]&&v.events.push({key:`event.${n}-${e}}`,placeholder:!0,top:e});// sort events and events placeholders by top position
|
|
36
|
+
v.events.sort((e,t)=>e.top-t.top);}i.days.push(v);}f.push(i);}return f};
|
|
20
37
|
|
|
21
|
-
|
|
38
|
+
/**
|
|
39
|
+
* TODO: include in this lib utilities like in https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/iconBase.tsx
|
|
40
|
+
*
|
|
41
|
+
* this is the `MdAdd` icon from `react-icons`
|
|
42
|
+
*/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"})]}),/**
|
|
43
|
+
* Style for button within a event cell
|
|
44
|
+
*
|
|
45
|
+
* Here we might differentiate week/month view where the first does not get
|
|
46
|
+
* ellipsed btn texts, with `Start` as block element and underneath the `Title`
|
|
47
|
+
* on multiple lines, but that would mean that we loose the ability to interweave
|
|
48
|
+
* single-day events among the spaces left by wider multi-days events.
|
|
49
|
+
*/o$1={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"};let CalendarDaygridCell=({eventClicked:a,setEventClicked:s,// eventHovered,
|
|
50
|
+
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
|
|
51
|
+
position:"relative",width:t.firstOfMulti?`${100*t.width}%`:"100%"};v[t.calendar.id].on||// @ts-expect-error nevermind
|
|
52
|
+
(o$1.display="none");let k={$view:c,$selected:a?.uid===t.uid,$past:t.isPast,$color:t.color,$isOutOfRange:t.$isOutOfRange,$isToday:t.$isToday};return /*#__PURE__*/jsx(Fragment,{children:/*#__PURE__*/jsx($,{style:f,...k,children:/*#__PURE__*/jsx(m,{role:"button",style:o$1,...k,onClick:()=>s(e=>e?.uid===t.uid?null:t),onMouseEnter:()=>h(t),onMouseLeave:()=>h(null),children:t.allDay?/*#__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 ? (
|
|
53
|
+
<CellOverflow onClick={() => expand(false)}>
|
|
54
|
+
<IconCollapse />
|
|
55
|
+
Show less
|
|
56
|
+
</CellOverflow>
|
|
57
|
+
) : null} */
|
|
22
58
|
|
|
23
|
-
|
|
59
|
+
/**
|
|
60
|
+
* Dynamically import the date-fns correct locale
|
|
61
|
+
*
|
|
62
|
+
* Inspired by:
|
|
63
|
+
* @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
|
|
64
|
+
*/let useDateLocale=(a,l="en")=>{let[r,n]=useState(),[o,c]=useState(l);return(// const [ready, setReady] = useState(false);
|
|
65
|
+
// If the user changes the locale listen to the change and import the locale that is now required.
|
|
66
|
+
useEffect(()=>{let e=async()=>{// This webpack option stops all of the date-fns files being imported and chunked.
|
|
67
|
+
// NB: this makes unnecessary numerous webpack chunks in applications
|
|
68
|
+
// that do not even use this hook, so we comment out the webpack dynamic
|
|
69
|
+
// import and its magic comment
|
|
70
|
+
// const localeToSet = await import(
|
|
71
|
+
// /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
|
|
72
|
+
// `date-fns/locale/${locale}/index.js`,
|
|
73
|
+
// );
|
|
74
|
+
let e=await import('date-fns/locale/en-US');c(a||o),n(e.enUS);};// setReady(true);
|
|
75
|
+
// If the locale has not yet been loaded.
|
|
76
|
+
a!==o&&e();},[a,o]),r)};
|
|
24
77
|
|
|
25
|
-
let KoineCalendarDaygridNav=({range:a,view:l,todayInView:r,handlePrev:i,handleNext:M,handleToday:d,handleView:y,locale:c,NavRoot:m="nav",NavTitle:s="div",NavBtns:b="div",NavBtnPrev:k="button",NavBtnNext:u="button",NavBtnToday:h="button",NavBtnViewMonth:f="button",NavBtnViewWeek:g="button"})=>{let[C,p]=a,v={locale:useDateLocale(c)},x="";return "month"===l&&(x=format(C,"MMMM yyyy",v)),"week"===l&&(x=C.getMonth()===p.getMonth()?format(C,"# MMMM yyyy",v).replace("#",`${C.getDate()}-${p.getDate()}`):`${format(C,"d MMMM",v)} - ${format(p,"d MMMM yyyy",v)}`)
|
|
78
|
+
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)}`),/*#__PURE__*/jsxs(m,{children:[/*#__PURE__*/jsxs(b,{children:[/*#__PURE__*/jsx(k,{onClick:i}),/*#__PURE__*/jsx(u,{onClick:M}),/*#__PURE__*/jsx(h,{onClick:d,disabled:r}),/*#__PURE__*/jsx(f,{onClick:()=>y("month"),disabled:"month"===l}),/*#__PURE__*/jsx(g,{onClick:()=>y("week"),disabled:"week"===l})]}),/*#__PURE__*/jsx(s,{range:a,formatted:x})]})};
|
|
26
79
|
|
|
27
|
-
let KoineCalendarDaygridTable=({locale:d,handlePrev:s,handleNext:c,events:h,dayLabels:f,view:b,range:u,eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,calendarsMap:x={},maxEvents:j=5,Table:C="table",TableHead:D="thead",TableHeadCell:S="th",TableBody:k="tbody",TableBodyRow:z="tr",TableBodyCell:L="td",TableBodyCellDate:O="div",Cell:I,CellOverflow:K,CellEvent:M,CellEventBtn:R,CellEventTitle:T,CellEventStart:W})
|
|
80
|
+
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})=>// ...props
|
|
81
|
+
{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()]);
|
|
82
|
+
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
|
|
83
|
+
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})]}))}))})]})};
|
|
28
84
|
|
|
29
|
-
let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})
|
|
85
|
+
let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})=>// const sorted = Object.entries(calendarsMap).sort((a, b) => {
|
|
86
|
+
// const { name: nameA } = a[1];
|
|
87
|
+
// const { name: nameB } = b[1];
|
|
88
|
+
// if (nameA < nameB) return -1;
|
|
89
|
+
// else if (nameA > nameB) return 1;
|
|
90
|
+
// else return 0;
|
|
91
|
+
// });
|
|
92
|
+
/*#__PURE__*/jsx(Fragment$1,{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))});
|
|
30
93
|
|
|
31
|
-
|
|
94
|
+
/** Fall back to `process.env.GOOGLE_CALENDAR_API_KEY *//** Start gethering events from date *//** End gethering events at date *//**
|
|
95
|
+
* The default is the time zone of the calendar
|
|
96
|
+
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
97
|
+
*//** 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=/**
|
|
98
|
+
* Google event as it comes from Google's API
|
|
99
|
+
*//**
|
|
100
|
+
* Google calendar as it comes from Google's API
|
|
101
|
+
*//**
|
|
102
|
+
* Google event's date as it comes from Google's API
|
|
103
|
+
*//** 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 || '');
|
|
104
|
+
h=m.getTime()+""+u.getTime();// multi-days all day events has as end date the date after to what we actually
|
|
105
|
+
// 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
|
|
106
|
+
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))
|
|
107
|
+
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);
|
|
108
|
+
return c}
|
|
32
109
|
|
|
33
|
-
|
|
110
|
+
/** The locale to format with `date-fns` *//** Calendars infos to use *//** Fall back to `process.env.GOOGLE_CALENDAR_API_KEY *//** The key is the event `uid` *//** It defaults to the first of the current month *//** It defaults to the last day of the current month *//**
|
|
111
|
+
* The calendar view
|
|
112
|
+
* @default "month"
|
|
113
|
+
*//**
|
|
114
|
+
* The default is the time zone of the calendar
|
|
115
|
+
* @see https://developers.google.com/calendar/api/v3/reference/events/list
|
|
116
|
+
*/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
|
|
117
|
+
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));
|
|
118
|
+
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
|
|
119
|
+
(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
|
|
120
|
+
[O]),useEffect(()=>{C&&F(C);},[C,F]),// when toggling a calendar we also remove the clicked event if that belongs
|
|
121
|
+
// to a now hidden calendar
|
|
122
|
+
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})}};
|
|
34
123
|
|
|
35
124
|
export { CalendarDaygridCell, KoineCalendarDaygridNav, KoineCalendarDaygridTable, KoineCalendarLegend, useCalendar, useDateLocale };
|
package/classed.cjs.js
CHANGED
|
@@ -4,7 +4,48 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var react = require('react');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
// React.ComponentProps<typeof Component>
|
|
8
|
+
// ? @see https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component
|
|
9
|
+
// type ClassedComponent<Props = {}> =
|
|
10
|
+
// | React.ElementType<Props>
|
|
11
|
+
// | OverridableComponent<any>
|
|
12
|
+
// | React.Component<Props>
|
|
13
|
+
// | React.FunctionComponent<Props>
|
|
14
|
+
// | React.ReactElement<Props>
|
|
15
|
+
// | React.ReactHTMLElement<any>
|
|
16
|
+
// | string // | JSX.IntrinsicElements
|
|
17
|
+
// | ((props: Props) => JSX.Element);
|
|
18
|
+
/**
|
|
19
|
+
* This utility allows to extend a component a là `styled-components` but for
|
|
20
|
+
* a className based styling solution like Tailwind,
|
|
21
|
+
*
|
|
22
|
+
* It also plays nicely with tailwind intellisense:
|
|
23
|
+
* - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
|
|
24
|
+
*
|
|
25
|
+
* For references about tagged functions:
|
|
26
|
+
* - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
|
|
27
|
+
* - https://makersden.io/blog/reverse-engineering-styled-components
|
|
28
|
+
* - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
|
|
29
|
+
* - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
|
|
30
|
+
*
|
|
31
|
+
* Similar projects:
|
|
32
|
+
* - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
|
|
33
|
+
*
|
|
34
|
+
* Discussions and Q/A:
|
|
35
|
+
* - https://stackoverflow.com/q/73055695/1938970
|
|
36
|
+
*/let classed=r=>{// @ts-expect-error nevermind for now...
|
|
37
|
+
let s=r.type||r;return function(r,...a){// FIXME: not sure if this is needed
|
|
38
|
+
// WrappedComponent.displayName = type.toString();
|
|
39
|
+
return /*#__PURE__*/react.forwardRef(// Props
|
|
40
|
+
function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)// like styled-components `transient` props
|
|
41
|
+
t.startsWith("$")||// FIXME: for react 18 we need: @ts-expect-error
|
|
42
|
+
(i[t]=e[t]);// get the tagged function string outcome
|
|
43
|
+
let c=o||r[0];return(// add the custom classes from props
|
|
44
|
+
c=// check if we need to clean it or not from the optional structure `< class="..."`
|
|
45
|
+
(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),/*#__PURE__*/react.createElement(s,{// ...props,
|
|
46
|
+
...i,// only add ot props if it is not an empty string
|
|
47
|
+
className:c||void 0,// add ref to props
|
|
48
|
+
ref:n}))})}};// as unknown as React.ReactElement<typeof props>;
|
|
8
49
|
|
|
9
50
|
exports.classed = classed;
|
|
10
51
|
exports["default"] = classed;
|
package/classed.esm.js
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
1
|
import { forwardRef, createElement } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
// React.ComponentProps<typeof Component>
|
|
4
|
+
// ? @see https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component
|
|
5
|
+
// type ClassedComponent<Props = {}> =
|
|
6
|
+
// | React.ElementType<Props>
|
|
7
|
+
// | OverridableComponent<any>
|
|
8
|
+
// | React.Component<Props>
|
|
9
|
+
// | React.FunctionComponent<Props>
|
|
10
|
+
// | React.ReactElement<Props>
|
|
11
|
+
// | React.ReactHTMLElement<any>
|
|
12
|
+
// | string // | JSX.IntrinsicElements
|
|
13
|
+
// | ((props: Props) => JSX.Element);
|
|
14
|
+
/**
|
|
15
|
+
* This utility allows to extend a component a là `styled-components` but for
|
|
16
|
+
* a className based styling solution like Tailwind,
|
|
17
|
+
*
|
|
18
|
+
* It also plays nicely with tailwind intellisense:
|
|
19
|
+
* - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
|
|
20
|
+
*
|
|
21
|
+
* For references about tagged functions:
|
|
22
|
+
* - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
|
|
23
|
+
* - https://makersden.io/blog/reverse-engineering-styled-components
|
|
24
|
+
* - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
|
|
25
|
+
* - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
|
|
26
|
+
*
|
|
27
|
+
* Similar projects:
|
|
28
|
+
* - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
|
|
29
|
+
*
|
|
30
|
+
* Discussions and Q/A:
|
|
31
|
+
* - https://stackoverflow.com/q/73055695/1938970
|
|
32
|
+
*/let classed=r=>{// @ts-expect-error nevermind for now...
|
|
33
|
+
let s=r.type||r;return function(r,...a){// FIXME: not sure if this is needed
|
|
34
|
+
// WrappedComponent.displayName = type.toString();
|
|
35
|
+
return /*#__PURE__*/forwardRef(// Props
|
|
36
|
+
function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)// like styled-components `transient` props
|
|
37
|
+
t.startsWith("$")||// FIXME: for react 18 we need: @ts-expect-error
|
|
38
|
+
(i[t]=e[t]);// get the tagged function string outcome
|
|
39
|
+
let c=o||r[0];return(// add the custom classes from props
|
|
40
|
+
c=// check if we need to clean it or not from the optional structure `< class="..."`
|
|
41
|
+
(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),/*#__PURE__*/createElement(s,{// ...props,
|
|
42
|
+
...i,// only add ot props if it is not an empty string
|
|
43
|
+
className:c||void 0,// add ref to props
|
|
44
|
+
ref:n}))})}};// as unknown as React.ReactElement<typeof props>;
|
|
4
45
|
|
|
5
46
|
export { classed, classed as default };
|
|
@@ -6,7 +6,21 @@ var react = require('react');
|
|
|
6
6
|
var utils = require('@koine/utils');
|
|
7
7
|
var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
|
|
11
|
+
*
|
|
12
|
+
* @param customBreakpoints
|
|
13
|
+
* @returns
|
|
14
|
+
*/let createUseMediaQueryWidth=n=>{let a=utils.getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");utils.isUndefined(s)&&(s=o),utils.isUndefined(o)&&(o="min");// with the hook creator approach these breakpoint types cannot be deduced
|
|
15
|
+
// const [br1, br2] = ruleBreakpoint.split("-") as Split<
|
|
16
|
+
// typeof ruleBreakpoint,
|
|
17
|
+
// "-"
|
|
18
|
+
// >;
|
|
19
|
+
let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=react.useState(utils.isUndefined(n)?null:n);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return(// Safari < 14 can't use addEventListener on a MediaQueryList
|
|
20
|
+
// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
|
|
21
|
+
(l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(// Update the state whenever the media query match state changes
|
|
22
|
+
e.addListener(t),// Clean up on unmount and if the query changes
|
|
23
|
+
()=>{e.removeListener(t);}))},[u]),c}};//// without creator it would be:
|
|
10
24
|
|
|
11
25
|
exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
|
|
12
26
|
exports["default"] = createUseMediaQueryWidth;
|
|
@@ -2,6 +2,20 @@ import { useState } from 'react';
|
|
|
2
2
|
import { getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
|
|
3
3
|
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
|
|
7
|
+
*
|
|
8
|
+
* @param customBreakpoints
|
|
9
|
+
* @returns
|
|
10
|
+
*/let createUseMediaQueryWidth=n=>{let a=getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");isUndefined(s)&&(s=o),isUndefined(o)&&(o="min");// with the hook creator approach these breakpoint types cannot be deduced
|
|
11
|
+
// const [br1, br2] = ruleBreakpoint.split("-") as Split<
|
|
12
|
+
// typeof ruleBreakpoint,
|
|
13
|
+
// "-"
|
|
14
|
+
// >;
|
|
15
|
+
let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=useState(isUndefined(n)?null:n);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return(// Safari < 14 can't use addEventListener on a MediaQueryList
|
|
16
|
+
// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
|
|
17
|
+
(l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(// Update the state whenever the media query match state changes
|
|
18
|
+
e.addListener(t),// Clean up on unmount and if the query changes
|
|
19
|
+
()=>{e.removeListener(t);}))},[u]),c}};//// without creator it would be:
|
|
6
20
|
|
|
7
21
|
export { createUseMediaQueryWidth, createUseMediaQueryWidth as default };
|
package/extendComponent.cjs.js
CHANGED
|
@@ -4,7 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var react = require('react');
|
|
6
6
|
|
|
7
|
-
let extendComponent=(t,o)
|
|
7
|
+
let extendComponent=(t,o)=>// const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
|
|
8
|
+
// (props, ref) => createElement(component, { ...props, ref })
|
|
9
|
+
// );
|
|
10
|
+
Object.assign(// FIXME: check if we need to forwardRef or not
|
|
11
|
+
o=>react.createElement(t,o),{...o,defaultProps:o});
|
|
8
12
|
|
|
9
13
|
exports["default"] = extendComponent;
|
|
10
14
|
exports.extendComponent = extendComponent;
|
package/extendComponent.esm.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { createElement } from 'react';
|
|
2
2
|
|
|
3
|
-
let extendComponent=(t,o)
|
|
3
|
+
let extendComponent=(t,o)=>// const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
|
|
4
|
+
// (props, ref) => createElement(component, { ...props, ref })
|
|
5
|
+
// );
|
|
6
|
+
Object.assign(// FIXME: check if we need to forwardRef or not
|
|
7
|
+
o=>createElement(t,o),{...o,defaultProps:o});
|
|
4
8
|
|
|
5
9
|
export { extendComponent as default, extendComponent };
|