react-calendar-kit
Version:
React Calendar Kit is a powerful and flexible library for building accessible and highly customizable calendar and date/time picker components in your React applications. React Calendar Kit provides a solid foundation for creating inclusive user experienc
3 lines (2 loc) • 2.2 kB
JavaScript
'use client';
import{a as E}from"./chunk-ILIERJDH.mjs";import{b as N}from"./chunk-72DQY2E5.mjs";import{a as I}from"./chunk-C56KUXDV.mjs";import{a as L}from"./chunk-QSOEAWMM.mjs";import{a as D,f as S}from"./chunk-WABH67VC.mjs";import{b as C}from"./chunk-VMZM6ONT.mjs";import c,{memo as Y,useCallback as m,useEffect as w,useRef as j}from"react";import q from"lodash.debounce";import z from"scroll-into-view-if-needed";var G=200,J=A=>{let{initialDate:y,options:f=[],className:T,style:x,listClassName:H,itemClassName:u,listStyle:M,itemStyle:g,listType:n="month",highlightRef:B,...V}=A,d=j(null),[$,i]=I(),{state:o,isPickerExpanded:l,headerRef:b,setPickerExpanded:p,pickerEmptyItem:v}=C(),k=m((t,e)=>{if(!(t.target instanceof HTMLElement))return;let r=i(),s=Array.from(r.values()).findLast(O=>{let _=O.getBoundingClientRect(),R=e?.getBoundingClientRect();return R?N(_,R)>50:!1}),h=Number(s?.getAttribute("data-value"));if(!h)return;let U=o.focusedDate.set({[n]:h});o.setFocusedDate(U)},[o,y,n,l]);w(()=>{let t=d.current,e=B;if(!e)return;let r=q(a=>k(a,e),G);return t?.addEventListener("scroll",r),()=>{r&&t?.removeEventListener("scroll",r)}},[k]);let P=m((t,e=!0)=>{let a=i().get(t);a&&z(a,{scrollMode:"always",behavior:e?"smooth":"instant",boundary:d.current})},[i]),F=m(t=>{let e=t.target,r=Number(e.getAttribute("data-value"));if(r===o.focusedDate[n]){p?.(!1);return}r&&P(r)},[o]),K=m((t,e)=>{let r=i();if(!r.get(e))return;let s=e;switch(t.key){case"ArrowDown":s=e+1;break;case"ArrowUp":s=e-1;break;case"Home":s=0;break;case"End":s=f.length-1;break;case"PageUp":s=e-3;break;case"PageDown":s=e+3;break;case"Escape":case"Enter":case" ":p?.(!1),b?.current?.focus();return}r.get(s)?.focus()},[i,f.length,p,b]);return w(()=>{l&&P(y,!1)},[l]),c.createElement("div",{ref:d,className:D(H,T),style:S({overflowY:"scroll"},x,M),role:`picker-${n}-list`,...V},c.createElement(E,{total:v,className:u,style:g}),f.map(t=>c.createElement(L,{role:`picker-${n}-item`,key:`picker-${n}-${t.value}`,ref:e=>$(e,t.value),className:u,style:g,"data-value":t.value,tabIndex:!l||o.focusedDate?.[n]!==t.value?-1:0,onKeyDown:e=>K(e,t.value),onPress:e=>F(e)},t.label)),c.createElement(E,{total:v,className:u}))},ae=Y(J);export{ae as a};