@fowusu/calendar-kit
Version:
A simple JS only calendar UI for react native
2 lines (1 loc) • 16.9 kB
JavaScript
var de=Object.defineProperty,pe=Object.defineProperties;var ye=Object.getOwnPropertyDescriptors;var tt=Object.getOwnPropertySymbols;var At=Object.prototype.hasOwnProperty,Ht=Object.prototype.propertyIsEnumerable;var Et=(t,e,n)=>e in t?de(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,d=(t,e)=>{for(var n in e||(e={}))At.call(e,n)&&Et(t,n,e[n]);if(tt)for(var n of tt(e))Ht.call(e,n)&&Et(t,n,e[n]);return t},C=(t,e)=>pe(t,ye(e));var T=(t,e)=>{var n={};for(var o in t)At.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(t!=null&&tt)for(var o of tt(t))e.indexOf(o)<0&&Ht.call(t,o)&&(n[o]=t[o]);return n};import kt,{useMemo as Qe}from"react";import{StyleSheet as Xe,Text as Ze,View as ne}from"react-native";var V=t=>!isNaN(t.valueOf());var i=t=>{let e=new Date(`${t}T12:00:00`);if(!V(e))throw new Error("Invalid date");return e};var et=(t,e)=>new Date(t,e,0).getDate();var lt=(t,e)=>{let n=i(t),o=n.getDate();n.setMonth(n.getMonth()+Math.abs(e));let r=et(n.getFullYear(),n.getMonth()+1),a=Math.min(o,r);return n.setDate(a),n};var F=t=>`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`;var ct=({start:t,end:e})=>{if(!V(t)||!V(e))throw new Error("Invalid start or end date");if(t>e)throw new Error("Invalid date range");let n=[],o=new Date(t);o.setDate(1),o.setHours(0,0,0,0);let r=new Date(e);for(r.setDate(1),r.setHours(0,0,0,0);o<=r;){n.push(F(o));let a=o.getMonth();o.setMonth(a+1)}return n};var ft=(t,e)=>{let n=i(t),o=n.getDate();n.setMonth(n.getMonth()-Math.abs(e));let r=et(n.getFullYear(),n.getMonth()+1),a=Math.min(o,r);return n.setDate(a),n};var dt=({startMonth:t,pastMonthsCount:e=0,futureMonthsCount:n=12})=>{let o=t!=null?t:F(new Date),r=ft(o,e),a=lt(o,n);return ct({start:r,end:a})};var Y=t=>{if(!V(t))throw new Error("Invalid date");let e=t.getMonth()+1,n=t.getFullYear();return new Date(n,e,0,23,59,59)};var $=(t,{weekStartsOn:e=0})=>{let n=new Date(t),o=(n.getDay()+7-e)%7;return n.setDate(n.getDate()-o),n.setHours(0,0,0,0),n};var nt=(t,{weekStartsOn:e=0})=>{let n=$(t,{weekStartsOn:e});return n.setDate(n.getDate()+6),n.setHours(23,59,59,999),n};var B=t=>{if(!V(t))throw new Error("Invalid date");let e=t.getFullYear(),n=t.getMonth();return new Date(e,n,1,0,0,0)},J=t=>t.replace(/.{2}$/,"01");var ge=t=>({start:B(t),end:Y(t)}),pt=(t,e=0)=>{let{start:n,end:o}=ge(t);return ot(n,o,e)},ot=(t,e,n=0)=>{let o=[],r=$(t,{weekStartsOn:n}),a=nt(e,{weekStartsOn:n});for(;r<=a;){let m=[];for(let s=0;s<7&&!(r>a);s++)m.push(F(r)),r.setDate(r.getDate()+1);o.push(m)}return o};var yt=({start:t,end:e})=>{if(!V(t)||!V(e))throw new Error("Invalid start or end date");if(t>e)throw new Error("Invalid date range");let n=[],o=new Date(t);o.setHours(0,0,0,0);let r=new Date(e);for(r.setHours(23,59,59,999);o<=r;){n.push(new Date(o));let a=o.getDate();o.setDate(a+1)}return n};var K=(t,e="en-US")=>t.toLocaleDateString(e,{month:"long",year:"numeric"});var Yt=(t,e)=>yt({start:i(t),end:i(e)}).map(F);var gt=(t,e=0)=>{let n=i(t),o=Y(n),r=(n.getDay()-e+7)%7,a=o.getDate(),m=7-r,s=a-m;return Math.ceil(s/7)+1};var ht=(t,e)=>{let n=i(t);return n.getMonth()===e.getMonth()&&n.getFullYear()===e.getFullYear()};var Dt=(t,e)=>{let n=i(t),o=i(e);return n>=o};var ut=(t,e)=>{let n=i(t),o=i(e);return n<=o};var wt=t=>{let e=i(t),n=new Date;return e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()&&e.getDate()===n.getDate()};import{useMemo as Le}from"react";import{StyleSheet as Re,View as Oe}from"react-native";import Me,{useMemo as qt}from"react";import{StyleSheet as We,View as be}from"react-native";var xt=({month:t,showExtraDays:e,dateString:n,minDate:o,maxDate:r,markedDates:a,isLastWeekOfList:m})=>{let s=ht(n,t),c=o?Dt(n,o):!0,h=r?ut(n,r):!0,y=(!m||s)&&h&&c,k=!!(s||e),D=s&&wt(n),l=a.includes(n);return{state:y?"active":"inactive",isVisible:k,isSelected:l,isToday:D}};import xe from"react";import{Pressable as Ie,StyleSheet as Se,View as Ce}from"react-native";function _(t,e){if(t===e)return!0;if(typeof t!=typeof e||t===null||e===null)return!1;if(Array.isArray(t)&&Array.isArray(e))return t.length!==e.length?!1:t.every((n,o)=>_(n,e[o]));if(typeof t=="object"){let n=Object.keys(t),o=Object.keys(e);return n.length!==o.length?!1:n.every(r=>_(t[r],e[r]))}return!1}import{useMemo as he}from"react";import{StyleSheet as _t,Text as De,View as ue}from"react-native";import{Fragment as we,jsx as It}from"react/jsx-runtime";var $t=({day:t,locale:e="en-US",state:n,isToday:o,isSelected:r})=>{let a=he(()=>n!=="inactive"&&r?{textStyle:rt.selected,containerStyle:Bt.selected}:o?{textStyle:rt.today}:{},[n,r,o]);return It(we,{children:It(ue,{style:[Bt.defaultContainer,a.containerStyle],children:It(De,{style:[rt.defaultDayText,rt[n],a.textStyle],children:t.toLocaleDateString(e,{day:"numeric"})})})})},Bt=_t.create({defaultContainer:{alignContent:"center",justifyContent:"center",paddingVertical:12},selected:{backgroundColor:"#b1b5ff"}}),rt=_t.create({defaultDayText:{textAlign:"center",fontSize:16},selected:{color:"#fff",fontWeight:"normal"},active:{color:"#5a5a5a"},inactive:{color:"#cacaca"},today:{color:"#787de7",fontWeight:"bold"}});import{jsx as St}from"react/jsx-runtime";var ke=({dateString:t,DayComponent:e=$t,onPress:n,viewState:o,locale:r,dayContainerStyle:a})=>o.isVisible?St(Ie,{disabled:o.state==="inactive",onPress:()=>n==null?void 0:n(t),style:[zt.dayContainer,a],children:St(e,C(d({},o),{day:i(t),locale:r}))}):St(Ce,{style:zt.dayContainer}),zt=Se.create({dayContainer:{width:"14.28%"},dayText:{textAlign:"center"}}),Ut=xe.memo(ke,(t,e)=>_(t.DayComponent,e.DayComponent)&&_(t.viewState,e.viewState)&&_(t.locale,e.locale)&&_(t.dateString,e.dateString));import{jsx as Gt}from"react/jsx-runtime";var Q=Me.memo(({weekDays:t,month:e,locale:n,DayComponent:o,onDayPress:r,showExtraDays:a=!0,minDate:m,maxDate:s,customStateCreator:c,markedDates:h=[],weekContainerStyle:y,isLastWeekOfList:k})=>{let D=qt(()=>t.map(R=>{let M={month:e,markedDates:h,dateString:R,showExtraDays:a,minDate:m,maxDate:s,isLastWeekOfList:k},I=xt(M),p=c==null?void 0:c(M,I);return d(d({},I),p)}),[t,e,h,a,m,s,c,k]),l=qt(()=>t.map((R,M)=>Gt(Ut,{viewState:D[M],onPress:r,DayComponent:o,dateString:R,locale:n},R)),[t,D,r,o,n]);return Gt(be,{style:[Ve.weekContainer,y],children:l})});Q.displayName="Week";var Ve=We.create({weekContainer:{flexDirection:"row"}});import{jsx as Ne}from"react/jsx-runtime";import{createElement as Fe}from"react";var Jt=m=>{var s=m,{firstDayOfWeek:t,month:e,date:n,weeksContainerStyle:o,locale:r}=s,a=T(s,["firstDayOfWeek","month","date","weeksContainerStyle","locale"]);let c=Le(()=>pt(e,t),[e,t]);return Ne(Oe,{style:[Te.weeksContainer,o],children:c.map((h,y)=>Fe(Q,C(d({},a),{locale:r,key:`${n}-week-${y}`,weekDays:h,month:e,isLastWeekOfList:!0})))})},Te=Re.create({weeksContainer:{gap:8}});import{forwardRef as ve,useCallback as Ee,useImperativeHandle as Ae,useMemo as Qt,useRef as Xt,useState as He}from"react";import{FlatList as Ye,I18nManager as Be,Platform as _e}from"react-native";import{FlashList as $e}from"@shopify/flash-list";import{Dimensions as Pe}from"react-native";var{width:X,height:Kt}=Pe.get("window");var z={waitForInteraction:!0,minimumViewTime:100,viewAreaCoveragePercentThreshold:75};import{jsx as Zt}from"react/jsx-runtime";import{createElement as Ue}from"react";var ze=_e.select({web:!0,default:!1}),Z=ve((M,R)=>{var I=M,{months:t,firstDayOfWeek:e=0,MonthNameComponent:n,locale:o,weekContainerStyle:r,currentDate:a,onScroll:m,showScrollIndicator:s=!1,decelerationRate:c="fast",onListEndReached:h,onEndReachedThreshold:y,showDayNames:k,calendarListContentContainerStyle:D}=I,l=T(I,["months","firstDayOfWeek","MonthNameComponent","locale","weekContainerStyle","currentDate","onScroll","showScrollIndicator","decelerationRate","onListEndReached","onEndReachedThreshold","showDayNames","calendarListContentContainerStyle"]);let[p,L]=He(X),S=Xt(null),g=Qt(()=>{let f=Y(i(t[t.length-1])),w=i(t[0]);return ot(w,f,e).map(x=>({month:B(i(x[0])),week:x}))},[t,e]),N=Xt(a),A=Qt(()=>{if(N.current){let f=g.findIndex(({week:w})=>w.includes(N.current));return f>=0?f:0}return 0},[g]),q={scrollSnapAlign:"center",width:ze?"100vw":p},H=({item:{month:f,week:w},index:x})=>Ue(Q,C(d({},l),{month:f,key:`${f}-week-${x}`,weekDays:w,isLastWeekOfList:x===g.length-1,weekContainerStyle:d(d({},r),q)})),u=({nativeEvent:{layout:f}})=>{L(f.width)};Ae(R,()=>({scrollToItem(f,w=!0){var O;let x=g.find(({week:mt})=>mt.includes(f));x&&((O=S.current)==null||O.scrollToItem({animated:w,item:x}))}}));let W=Ee(({viewableItems:f})=>{let w=f.filter(x=>x.isViewable).map(({item:x})=>x);w&&w.length>0&&(m==null||m(w))},[m]);return Be.isRTL?Zt(Ye,{ref:S,data:g,renderItem:H,horizontal:!0,pagingEnabled:!0,showsHorizontalScrollIndicator:!1,onViewableItemsChanged:W,initialScrollIndex:A,getItemLayout:(f,w)=>({length:p,offset:p*w,index:w}),onLayout:u,initialNumToRender:1,maxToRenderPerBatch:1,contentContainerStyle:D,decelerationRate:c,extraData:l,viewabilityConfig:z}):Zt($e,{ref:S,onViewableItemsChanged:W,onLayout:u,horizontal:!0,data:g,renderItem:H,pagingEnabled:!0,snapToInterval:p,estimatedItemSize:p,initialScrollIndex:A,onEndReachedThreshold:y,onEndReached:h,showsHorizontalScrollIndicator:s,decelerationRate:c,extraData:l,contentContainerStyle:D,viewabilityConfig:z})});Z.displayName="ListWeeklyScrollContainer";import{memo as qe,useMemo as te}from"react";import{StyleSheet as Ge,Text as Je,View as ee}from"react-native";var jt=(t,e="short")=>{let n=[];for(let o=0;o<7;o++){let a=new Date(2024,0,o).toLocaleDateString(t,{weekday:e});n.push(a)}return n};import{jsx as at}from"react/jsx-runtime";var Ke=40,j=qe(({firstDayOfWeek:t=0,weekdaysShort:e,WeekDayNameComponent:n,locale:o="en-US",weekdaysFormat:r="short"})=>{let a=te(()=>e||jt(o,r),[e,o,r]),m=te(()=>{let s=a.slice(0,t);return[...a.slice(t),...s]},[t,a]);return n?at(n,{weekDays:m}):at(ee,{style:Ct.daysContainer,children:m.map((s,c)=>at(ee,{style:Ct.day,children:at(Je,{style:Ct.dayText,children:s})},s+c))})});j.displayName="WeekDayName";var Ct=Ge.create({daysContainer:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",height:Ke,gap:2,zIndex:2},day:{height:"100%",justifyContent:"center",alignItems:"center",flex:1},dayText:{textAlign:"center",color:"#c3c3c3",fontWeight:"500",fontSize:16}});import{jsx as v,jsxs as je}from"react/jsx-runtime";var st=kt.memo(R=>{var M=R,{date:t,firstDayOfWeek:e=0,weekdaysShort:n,MonthNameComponent:o,showDayNames:r=!0,contentContainerStyle:a,WeekDayNameComponent:m,locale:s,showMonthName:c=!0,weekdaysFormat:h,viewAs:y="month",MonthAnimatedTransitionComponent:k=kt.Fragment,WeekAnimatedTransitionComponent:D=kt.Fragment}=M,l=T(M,["date","firstDayOfWeek","weekdaysShort","MonthNameComponent","showDayNames","contentContainerStyle","WeekDayNameComponent","locale","showMonthName","weekdaysFormat","viewAs","MonthAnimatedTransitionComponent","WeekAnimatedTransitionComponent"]);var L,S;let I=Qe(()=>B(i(t)),[t]),p=()=>c?o?v(o,{month:I,locale:s}):v(ne,{style:Mt.monthNameContainer,children:v(Ze,{style:Mt.monthNameText,children:K(I,s)})}):null;return je(ne,{style:[Mt.calenderContainer,a],children:[p(),r?v(j,{firstDayOfWeek:e,weekdaysShort:n,WeekDayNameComponent:m,locale:s,weekdaysFormat:h}):null,y==="week"?v(D,{children:v(Z,C(d({},l),{firstDayOfWeek:e,locale:s,currentDate:(S=(L=l.markedDates)==null?void 0:L.at(0))!=null?S:t,months:[J(t)]}))}):v(k,{children:v(Jt,C(d({},l),{firstDayOfWeek:e,locale:s,date:t,month:I}))})]})});st.displayName="Calendar";var Mt=Xe.create({calenderContainer:{width:"100%"},weeksContainer:{gap:8},monthNameContainer:{paddingBottom:8,height:30},monthNameText:{fontSize:18,fontWeight:"bold",textAlign:"center"}});import bt,{forwardRef as cn,useCallback as fn,useEffect as oe,useImperativeHandle as dn,useMemo as pn,useRef as yn,useState as gn}from"react";import{StyleSheet as hn,Text as Dn,View as un}from"react-native";import{forwardRef as tn,useCallback as it,useMemo as en,useRef as nn}from"react";import{FlatList as on,I18nManager as rn,Platform as an,View as sn}from"react-native";import{FlashList as mn}from"@shopify/flash-list";import{Fragment as ln,jsx as U}from"react/jsx-runtime";var Wt=tn((w,f)=>{var x=w,{estimatedCalendarSize:{fiveWeekCalendarSize:t,monthTitleSize:e=30,weekDayNamesSize:n=40},CalendarSeparator:o,calendarVerticalGap:r=32,minDate:a,currentDate:m,markedDates:s,pastMonthsCount:c=0,futureMonthsCount:h=12,horizontal:y,showDayNamesOnTop:k=!1,showDayNames:D=!0,WeekDayNameComponent:l,weekdaysShort:R,firstDayOfWeek:M,calendarContentContainerStyle:I,calendarSize:p,showScrollIndicator:L,onScroll:S,showMonthName:g=!0,calendarListContentContainerStyle:N,decelerationRate:A="fast",onEndReachedThreshold:q,onListEndReached:H,months:u}=x,W=T(x,["estimatedCalendarSize","CalendarSeparator","calendarVerticalGap","minDate","currentDate","markedDates","pastMonthsCount","futureMonthsCount","horizontal","showDayNamesOnTop","showDayNames","WeekDayNameComponent","weekdaysShort","firstDayOfWeek","calendarContentContainerStyle","calendarSize","showScrollIndicator","onScroll","showMonthName","calendarListContentContainerStyle","decelerationRate","onEndReachedThreshold","onListEndReached","months"]);var Nt,Pt;let O=(Nt=p==null?void 0:p.width)!=null?Nt:X,mt=(Pt=p==null?void 0:p.height)!=null?Pt:Kt,ie=an.select({web:!0,default:!1}),me={scrollSnapAlign:y?"center":"start",width:ie&&O===X?"100vw":O},Vt=nn(m),Lt=en(()=>{if(Vt.current){let b=u.indexOf(J(Vt.current));return b>=0?b:0}return 0},[u]),Rt=it(()=>o?U(o,{}):U(sn,{style:{height:r}}),[o,r]),Ot=it(({viewableItems:b})=>{let P=b.filter(G=>G.isViewable).map(({item:G})=>G);P&&P.length>0&&(S==null||S(P))},[S]),le=it((b,P)=>{if(y){b.size=O;return}let G=gt(P,M),vt=t+r;if(G>5){let ce=g?e:0,fe=(t-(D&&!k?n:0)-ce)/5;b.size=vt+fe}else b.size=vt},[y,O,M,g,D,e,k,r,n,t]),Tt=({item:b})=>U(st,C(d({},W),{showMonthName:g,showDayNames:D&&!k,firstDayOfWeek:M,weekdaysShort:R,minDate:a,markedDates:s,date:b,WeekDayNameComponent:l,contentContainerStyle:d(d({},I),me)})),Ft=it(b=>b,[]);return U(ln,{children:y&&rn.isRTL?U(on,{data:u,renderItem:Tt,ref:f,ItemSeparatorComponent:Rt,keyExtractor:Ft,extraData:W,horizontal:!0,pagingEnabled:!0,showsHorizontalScrollIndicator:!1,onViewableItemsChanged:Ot,initialScrollIndex:Lt,getItemLayout:(b,P)=>({length:O,offset:O*P,index:P}),initialNumToRender:1,maxToRenderPerBatch:1,contentContainerStyle:N,decelerationRate:A,viewabilityConfig:z}):U(mn,{ref:f,horizontal:y,ItemSeparatorComponent:Rt,renderItem:Tt,keyExtractor:Ft,data:u,estimatedItemSize:y?O:t,estimatedListSize:{width:O,height:mt},extraData:W,pagingEnabled:y,showsHorizontalScrollIndicator:!1,showsVerticalScrollIndicator:L,onViewableItemsChanged:Ot,initialScrollIndex:Lt,overrideItemLayout:le,contentContainerStyle:N,decelerationRate:A,onEndReached:H,onEndReachedThreshold:q,viewabilityConfig:z})})});Wt.displayName="FullCalendarListView";import{Fragment as wn,jsx as E,jsxs as xn}from"react/jsx-runtime";var ae=bt.memo(cn((M,R)=>{var I=M,{currentDate:t,minDate:e,pastMonthsCount:n,futureMonthsCount:o,viewAs:r="month",showMonthName:a=!0,showDayNames:m=!0,MonthNameComponent:s,onScroll:c,markedDates:h,WeekAnimatedTransitionComponent:y=bt.Fragment,MonthAnimatedTransitionComponent:k=bt.Fragment,onActiveMonthChange:D}=I,l=T(I,["currentDate","minDate","pastMonthsCount","futureMonthsCount","viewAs","showMonthName","showDayNames","MonthNameComponent","onScroll","markedDates","WeekAnimatedTransitionComponent","MonthAnimatedTransitionComponent","onActiveMonthChange"]);let p=yn(),L=r==="week",S=pn(()=>dt({startMonth:e,pastMonthsCount:n,futureMonthsCount:o}),[e,n,o]),[g,N]=gn(t),A=()=>{if(a&&g&&L){let u=i(g);return s?E(s,{month:u,locale:l.locale}):E(un,{style:re.monthNameContainer,children:E(Dn,{style:re.monthNameText,children:K(u,l.locale)})})}return null},q=()=>m&&l.showDayNamesOnTop||L?E(j,{firstDayOfWeek:l.firstDayOfWeek,weekdaysShort:l.weekdaysShort,WeekDayNameComponent:l.WeekDayNameComponent,locale:l.locale,weekdaysFormat:l.weekdaysFormat}):null,H=fn(u=>{c==null||c(u);let W;if(L){let{week:f}=u[0];W=f[f.length-1]}else W=u[0];W&&N(W)},[c,L]);return oe(()=>{h&&N(h.at(0))},[h]),oe(()=>{g&&D&&D(g)},[g,D]),dn(R,()=>({scrollToDate(u,W=!0){var f;(f=p.current)==null||f.scrollToItem({animated:W,item:u})}})),xn(wn,{children:[A(),q(),L?E(y,{children:E(Z,C(d({},l),{showDayNames:m,markedDates:h,ref:p,showExtraDays:!0,months:S,minDate:e,currentDate:g,onScroll:H}))}):E(k,{children:E(Wt,C(d({},l),{showDayNames:m,markedDates:h,showMonthName:a,MonthNameComponent:s,ref:p,months:S,minDate:e,currentDate:g,onScroll:H}))})]})}));ae.displayName="CalendarList";var re=hn.create({monthNameContainer:{paddingBottom:8,height:30},monthNameText:{fontSize:18,fontWeight:"bold",textAlign:"center"}});import{useRef as se}from"react";var In=t=>{let e=se(0);e.current+=1;let n=se(t);return n.current!==t&&(n.current=t,e.current=1),e.current};export{st as Calendar,ae as CalendarList,i as dateStringToDate,Yt as getDatesInRange,xt as getDayState,F as toLocaleDateString,In as useRenderCount};