UNPKG

@transkripid/flowbite-react

Version:

Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork

3 lines (2 loc) 4.34 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("react"),x=require("react-icons/hi"),p=require("tailwind-merge"),G=require("../../helpers/merge-deep.js"),J=require("../../theme-store/index.js"),K=require("./DatepickerContext.js"),Q=require("./Views/Days.js"),U=require("./Views/Decades.js"),X=require("./Views/Months.js"),Z=require("./Views/Years.js"),e=require("./helpers.js"),B=require("../TextInput/TextInput.js"),C=({title:y,open:I,inline:D=!1,autoHide:P=!0,showClearButton:j=!0,labelClearButton:F="Clear",showTodayButton:f=!0,labelTodayButton:T="Today",defaultDate:c=new Date,minDate:g,maxDate:k,language:b="en",weekStart:E=e.WeekStart.Sunday,className:$,theme:H={},onSelectedDateChanged:v,...L})=>{const t=G.mergeDeep(J.getTheme().datepicker,H);c=e.getFirstDateInRange(c,g,k);const[M,w]=u.useState(I),[o,N]=u.useState(e.Views.Days),[l,Y]=u.useState(c),[a,d]=u.useState(c),h=u.useRef(null),m=u.useRef(null),V=(r,n)=>{Y(r),v&&v(r),P&&o===e.Views.Days&&n==!0&&!D&&w(!1)},R=r=>{switch(r){case e.Views.Decades:return s.jsx(U.DatepickerViewsDecades,{theme:t.views.decades});case e.Views.Years:return s.jsx(Z.DatepickerViewsYears,{theme:t.views.years});case e.Views.Months:return s.jsx(X.DatepickerViewsMonth,{theme:t.views.months});case e.Views.Days:default:return s.jsx(Q.DatepickerViewsDays,{theme:t.views.days})}},A=()=>{switch(o){case e.Views.Days:return e.Views.Months;case e.Views.Months:return e.Views.Years;case e.Views.Years:return e.Views.Decades}return o},W=()=>{switch(o){case e.Views.Decades:return`${e.startOfYearPeriod(a,100)} - ${e.startOfYearPeriod(a,100)+90}`;case e.Views.Years:return`${e.startOfYearPeriod(a,10)} - ${e.startOfYearPeriod(a,10)+9}`;case e.Views.Months:return e.getFormattedDate(b,a,{year:"numeric"});case e.Views.Days:default:return e.getFormattedDate(b,a,{month:"long",year:"numeric"})}},q=(r,n,i)=>{switch(r){case e.Views.Days:return new Date(e.addMonths(n,i));case e.Views.Months:return new Date(e.addYears(n,i));case e.Views.Years:return new Date(e.addYears(n,i*10));case e.Views.Decades:return new Date(e.addYears(n,i*100));default:return new Date(e.addYears(n,i*10))}};return u.useEffect(()=>{const r=n=>{var O,S;const i=(O=m==null?void 0:m.current)==null?void 0:O.contains(n.target),z=(S=h==null?void 0:h.current)==null?void 0:S.contains(n.target);!i&&!z&&w(!1)};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[h,m,w]),s.jsx(K.DatepickerContext.Provider,{value:{theme:t,language:b,minDate:g,maxDate:k,weekStart:E,isOpen:M,setIsOpen:w,view:o,setView:N,viewDate:a,setViewDate:d,selectedDate:l,setSelectedDate:Y,changeSelectedDate:V},children:s.jsxs("div",{className:p.twMerge(t.root.base,$),children:[!D&&s.jsx(B.TextInput,{theme:t.root.input,icon:x.HiCalendar,ref:h,onFocus:()=>{e.isDateEqual(a,l)||d(l),w(!0)},value:l&&e.getFormattedDate(b,l),readOnly:!0,...L}),(M||D)&&s.jsx("div",{ref:m,className:p.twMerge(t.popup.root.base,D&&t.popup.root.inline),children:s.jsxs("div",{className:t.popup.root.inner,children:[s.jsxs("div",{className:t.popup.header.base,children:[y&&s.jsx("div",{className:t.popup.header.title,children:y}),s.jsxs("div",{className:t.popup.header.selectors.base,children:[s.jsx("button",{type:"button",className:p.twMerge(t.popup.header.selectors.button.base,t.popup.header.selectors.button.prev),onClick:()=>d(q(o,a,-1)),children:s.jsx(x.HiArrowLeft,{})}),s.jsx("button",{type:"button",className:p.twMerge(t.popup.header.selectors.button.base,t.popup.header.selectors.button.view),onClick:()=>N(A()),children:W()}),s.jsx("button",{type:"button",className:p.twMerge(t.popup.header.selectors.button.base,t.popup.header.selectors.button.next),onClick:()=>d(q(o,a,1)),children:s.jsx(x.HiArrowRight,{})})]})]}),s.jsx("div",{className:t.popup.view.base,children:R(o)}),(j||f)&&s.jsxs("div",{className:t.popup.footer.base,children:[f&&s.jsx("button",{type:"button",className:p.twMerge(t.popup.footer.button.base,t.popup.footer.button.today),onClick:()=>{const r=new Date;V(r,!0),d(r)},children:T}),j&&s.jsx("button",{type:"button",className:p.twMerge(t.popup.footer.button.base,t.popup.footer.button.clear),onClick:()=>{V(c,!0),c&&d(c)},children:F})]})]})})]})})};C.displayName="Datepicker";exports.Datepicker=C; //# sourceMappingURL=Datepicker.js.map