@rnwonder/react-date-picker
Version:
A simple and reusable Datepicker component for ReactJS ([Demo](https://stackblitz.com/edit/solidjs-templates-dof6jl?file=src%2FApp.tsx))
2 lines (1 loc) • 2.38 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../Popover/index.js"),n=require("../../utils/class.js"),o=require("../../node_modules/.pnpm/@rnwonder_simple-datejs@1.0.8/node_modules/@rnwonder/simple-datejs/dist/datePicker.js"),t=require("../SelectorOptionButton/index.js"),a=require("../SelectorTriggerButton/index.js"),l=require("react"),s=l.forwardRef(((s,i)=>{const[d,c]=l.useState(!1),p=(e,r,n)=>{o.handleSelectorOptionClick(e,r,s,n)};return e.jsx(r.Popover,{zIndex:s.zIndex,className:n.cn("date-selector-trigger-wrapper rn-w-fit",s.monthYearTriggerBtnWrapperClass),onOpen:()=>{c(!0);const e=document.querySelector("[date-selector-option-selected=true]");null==e||e.scrollIntoView({block:"center",inline:"center"})},onClose:()=>c(!1),content:({close:r})=>{var o;return e.jsx("div",{className:n.cn("\n date-selector-wrapper\n rn-grid\n rn-max-h-[10.625rem]\n rn-max-w-[25rem]\n rn-gap-2\n rn-overflow-y-auto\n rn-rounded-lg\n rn-bg-white\n rn-p-2\n rn-drop-shadow-lg\n dark:rn-bg-eerie-black\n ",{"rn-grid-cols-3":"3"===s.gridTemplateColumnsNo&&s.gridTemplateColumnsNo,"rn-grid-cols-4":!s.gridTemplateColumnsNo||s.gridTemplateColumnsNo&&"3"!==s.gridTemplateColumnsNo},s.monthYearSelectorWrapperClass),ref:i,"data-part":"grid","data-scope":"date-picker","aria-roledescription":s.useValueAsName?"calendar year":"calendar month",role:"grid","aria-multiselectable":!1,"aria-readonly":!1,"aria-disabled":!1,"data-type":"date-selector-wrapper",style:{...s.backgroundColor&&{backgroundColor:s.backgroundColor}},children:null==(o=s.optionsArray)?void 0:o.map(((o,a)=>e.jsx(t.SelectorOptionButton,{...s,handleOptionClick:p,value:o,index:a,callback:r,className:n.cn("\n date-selector-option\n rn-px-[5px] \n rn-text-sm \n rn-text-black\n disabled:rn-opacity-40\n smallMobile:rn-text-[12px]\n ",s.className)})))})},children:e.jsx(a.SelectorTriggerButton,{option:s.option,optionsArray:s.optionsArray,useValueAsName:s.useValueAsName,type:"compact-dropdown",isOpen:d,twoMonthsDisplay:s.twoMonthsDisplay,noButtonAnimation:s.noButtonAnimation})})}));exports.Selector=s;