@jacshuo/onyx 2.1.0 → 2.2.0
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/README.md +358 -361
- package/dist/Extras/DateTimePicker.cjs +1 -0
- package/dist/Extras/DateTimePicker.css +1 -0
- package/dist/Extras/DateTimePicker.d.cts +5 -0
- package/dist/Extras/DateTimePicker.d.ts +5 -0
- package/dist/Extras/DateTimePicker.js +1 -0
- package/dist/Extras/index.cjs +4 -4
- package/dist/Extras/index.css +1 -1
- package/dist/Extras/index.d.cts +5 -0
- package/dist/Extras/index.d.ts +5 -0
- package/dist/Extras/index.js +4 -4
- package/dist/Navigation/SideNav.cjs +1 -1
- package/dist/Navigation/SideNav.js +1 -1
- package/dist/Navigation/index.cjs +2 -2
- package/dist/Navigation/index.js +2 -2
- package/dist/Primitives/Dropdown.cjs +1 -1
- package/dist/Primitives/Dropdown.js +1 -1
- package/dist/Primitives/Input.cjs +1 -1
- package/dist/Primitives/Input.js +1 -1
- package/dist/Primitives/Slider.cjs +1 -1
- package/dist/Primitives/Slider.js +1 -1
- package/dist/Primitives/index.cjs +1 -1
- package/dist/Primitives/index.js +1 -1
- package/dist/_tsup-dts-rollup.d.cts +165 -3
- package/dist/_tsup-dts-rollup.d.ts +165 -3
- package/dist/index.cjs +5 -5
- package/dist/index.css +1 -1
- package/dist/index.d.cts +5 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +5 -5
- package/dist/styles/Extras/DateTimePicker.css +566 -0
- package/dist/styles/base.css +39 -12
- package/dist/styles.css +497 -12
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
'use strict';var react=require('react'),reactDom=require('react-dom'),lucideReact=require('lucide-react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function N(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function Z(e="en-US",t="long"){return Array.from({length:12},(n,r)=>new Intl.DateTimeFormat(e,{month:t}).format(new Date(2e3,r,1)))}function ue(e="en-US",t="narrow"){let n=new Date(2e3,0,2);return Array.from({length:7},(r,i)=>{let d=new Date(n);return d.setDate(n.getDate()+i),new Intl.DateTimeFormat(e,{weekday:t}).format(d)})}function fe(e,t=true,n=true){return e==="date"?"YYYY-MM-DD":e==="time"?t?n?"HH:mm:ss":"HH:mm":n?"hh:mm:ss A":"hh:mm A":t?n?"YYYY-MM-DD HH:mm:ss":"YYYY-MM-DD HH:mm":n?"YYYY-MM-DD hh:mm:ss A":"YYYY-MM-DD hh:mm A"}function Ae(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function ge(e,t,n="en-US"){let r=e.getHours(),i=Z(n,"long"),d=Z(n,"short"),a={YYYY:String(e.getFullYear()),YY:String(e.getFullYear()).slice(-2),MMMM:i[e.getMonth()],MMM:d[e.getMonth()],MM:String(e.getMonth()+1).padStart(2,"0"),M:String(e.getMonth()+1),DD:String(e.getDate()).padStart(2,"0"),D:String(e.getDate()),HH:String(r).padStart(2,"0"),H:String(r),hh:String(r%12||12).padStart(2,"0"),h:String(r%12||12),mm:String(e.getMinutes()).padStart(2,"0"),ss:String(e.getSeconds()).padStart(2,"0"),A:r<12?"AM":"PM",a:r<12?"am":"pm"},c=Object.keys(a).sort((s,m)=>m.length-s.length),l=new RegExp(c.map(Ae).join("|"),"g");return t.replace(l,s=>a[s]??s)}function U(e,t){return new Date(e,t+1,0).getDate()}function be(e,t){let n=new Date(e,t,1).getDay(),r=U(e,t),i=U(e,t-1),d=[];for(let c=n-1;c>=0;c--)d.push({date:new Date(e,t-1,i-c),thisMonth:false});for(let c=1;c<=r;c++)d.push({date:new Date(e,t,c),thisMonth:true});let a=42-d.length;for(let c=1;c<=a;c++)d.push({date:new Date(e,t+1,c),thisMonth:false});return d}function V(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())}function de(e,t){return V(e).getTime()===V(t).getTime()}function he(e,t){return V(e)<V(t)}function ve(e,t){return V(e)>V(t)}function re(e,t,n){return t&&e<t?new Date(t):n&&e>n?new Date(n):e}function ye(e,t,n,r){let i=new Date(e),a=t*(r==="future"?1:-1);switch(n){case "day":i.setDate(i.getDate()+a);break;case "week":i.setDate(i.getDate()+a*7);break;case "month":i.setMonth(i.getMonth()+a);break;case "year":i.setFullYear(i.getFullYear()+a);break}return i}function we(e,t=200){let n=e-Math.floor(t/2);return Array.from({length:t},(r,i)=>n+i)}function De(e){let{value:t,defaultValue:n,onChange:r,mode:i="datetime",minDate:d,maxDate:a,use24Hour:c=true,showSeconds:l=true,locale:s="en-US",format:m,onOpen:p,onClose:g}=e,f=t!==void 0,[O,S]=react.useState(n??null),x=f?t??null:O,[E,k]=react.useState(false),[L,W]=react.useState(()=>x??new Date),[ae,I]=react.useState("drum"),[j,R]=react.useState(()=>(x??new Date).getFullYear()),[v,P]=react.useState(()=>(x??new Date).getMonth()),[_,oe]=react.useState(1),[Q,ne]=react.useState("day"),[B,ie]=react.useState("future"),ee=m??fe(i,c,l),G=x?ge(x,ee,s):"",$=react.useCallback(()=>{let h=x??new Date;W(new Date(h)),R(h.getFullYear()),P(h.getMonth()),I("drum"),k(true),p?.();},[x,p]),H=react.useCallback(()=>{k(false),g?.();},[g]),b=react.useCallback(()=>{let h=re(L,d,a);f||S(h),r?.(h),H();},[L,d,a,f,r,H]),Y=react.useCallback(()=>{f||S(null),r?.(null),H();},[f,r,H]),A=react.useCallback((h,y)=>{W(F=>{let M=new Date(F);switch(h){case "year":M.setFullYear(y);break;case "month":{M.setMonth(y);let te=U(M.getFullYear(),y);M.getDate()>te&&M.setDate(te);break}case "day":M.setDate(y);break;case "hour":M.setHours(y);break;case "minute":M.setMinutes(y);break;case "second":M.setSeconds(y);break}return re(M,d,a)});},[d,a]),q=react.useCallback(()=>{let h=re(ye(new Date,_,Q,B),d,a);W(h),R(h.getFullYear()),P(h.getMonth());},[_,Q,B,d,a]),le=react.useCallback(h=>{let y=v+h,F=j;y<0&&(y=11,F--),y>11&&(y=0,F++),P(y),R(F);},[v,j]);return {isOpen:E,displayValue:G,workingDate:L,view:ae,calYear:j,calMonth:v,offsetAmount:_,offsetUnit:Q,offsetDirection:B,mode:i,use24Hour:c,showSeconds:l,locale:s,minDate:d,maxDate:a,openPicker:$,closePicker:H,confirm:b,clear:Y,updateField:A,setView:I,setCalYear:R,setCalMonth:P,setOffsetAmount:oe,setOffsetUnit:ne,setOffsetDirection:ie,applyQuickOffset:q,navigateCalendar:le}}var J=40;function Me(e,t,n=true){let r=react.useRef(t);r.current=t,react.useEffect(()=>{if(!n)return;function i(d){let a=d.target;e.some(l=>l.current?.contains(a))||r.current();}return document.addEventListener("mousedown",i),()=>document.removeEventListener("mousedown",i)},[e,n]);}function Se(e,t,n){let r=react.useRef(false),i=react.useRef(void 0),d=react.useRef(n);d.current=n;let a=react.useRef(t);a.current=t;let c=react.useCallback((s,m="smooth")=>{let p=e.current;if(!p)return;let g=s*J;Math.abs(p.scrollTop-g)<2&&m!=="instant"||(m==="instant"?p.scrollTop=g:p.scrollTo({top:g,behavior:m}));},[e]),l=react.useCallback(()=>{e.current&&(r.current=true,clearTimeout(i.current),i.current=setTimeout(()=>{r.current=false;let m=e.current;if(!m)return;let p=Math.round(m.scrollTop/J),g=Math.max(0,Math.min(a.current-1,p)),f=g*J;Math.abs(m.scrollTop-f)>1&&m.scrollTo({top:f,behavior:"smooth"}),d.current(g);},120));},[e]);return {scrollToIndex:c,handleScroll:l,isScrollingRef:r}}function Ce(e,t,n){react.useEffect(()=>{if(!n)return;function r(){let d=e.current,a=t.current;if(!d||!a)return;if(window.innerWidth<=640){a.style.top="",a.style.left="";return}let c=d.getBoundingClientRect(),l=window.innerHeight,s=window.innerWidth,m=a.offsetHeight||460,p=a.offsetWidth||340,g=c.bottom+8,f=c.left;g+m>l-16&&(g=Math.max(16,c.top-m-8)),f+p>s-16&&(f=Math.max(16,s-p-16)),f<16&&(f=16),a.style.top=`${Math.round(g)}px`,a.style.left=`${Math.round(f)}px`;}let i=setTimeout(r,0);return window.addEventListener("resize",r),window.addEventListener("scroll",r,true),()=>{clearTimeout(i),window.removeEventListener("resize",r),window.removeEventListener("scroll",r,true);}},[n,e,t]);}function T({items:e,selectedValue:t,onSelect:n,label:r}){let i=react.useRef(null),d=react.useRef(t),a=react.useRef(false),{scrollToIndex:c,handleScroll:l}=Se(i,e.length,s=>{let m=e[s];m&&(a.current=true,n(m.value),setTimeout(()=>{a.current=false;},200));});return react.useEffect(()=>{let s=i.current;if(!s)return;let m=e.findIndex(p=>p.value===t);m>=0&&(s.scrollTop=m*J);},[]),react.useEffect(()=>{if(d.current!==t&&(d.current=t,!a.current)){let s=e.findIndex(m=>m.value===t);s>=0&&c(s,"smooth");}},[t,e,c]),jsxRuntime.jsxs("div",{className:"dtp-column",role:"group","aria-label":r,children:[jsxRuntime.jsx("div",{className:"dtp-column-highlight","aria-hidden":"true"}),jsxRuntime.jsx("div",{ref:i,className:"dtp-column-list",onScroll:l,role:"listbox","aria-label":r,children:e.map(s=>jsxRuntime.jsx("div",{className:N("dtp-item",s.value===t&&"dtp-item--selected"),onClick:()=>{let m=e.findIndex(p=>p.value===s.value);m>=0&&c(m,"smooth"),n(s.value);},role:"option","aria-selected":s.value===t,children:s.label},s.value))}),jsxRuntime.jsx("div",{className:"dtp-fade-top","aria-hidden":"true"}),jsxRuntime.jsx("div",{className:"dtp-fade-bottom","aria-hidden":"true"})]})}function Ue({year:e,month:t,selectedDate:n,today:r,minDate:i,maxDate:d,locale:a,onSelectDay:c,onPrev:l,onNext:s}){let m=ue(a,"narrow"),p=Z(a,"long"),g=be(e,t);return jsxRuntime.jsxs("div",{className:"dtp-calendar",children:[jsxRuntime.jsxs("div",{className:"dtp-cal-nav",children:[jsxRuntime.jsx("button",{type:"button",className:"dtp-cal-nav-btn",onClick:l,"aria-label":"Previous month",children:jsxRuntime.jsx(lucideReact.ChevronLeft,{className:"h-4 w-4"})}),jsxRuntime.jsxs("span",{className:"dtp-cal-title",children:[p[t]," ",e]}),jsxRuntime.jsx("button",{type:"button",className:"dtp-cal-nav-btn",onClick:s,"aria-label":"Next month",children:jsxRuntime.jsx(lucideReact.ChevronRight,{className:"h-4 w-4"})})]}),jsxRuntime.jsx("div",{className:"dtp-cal-weekdays",role:"row",children:m.map((f,O)=>jsxRuntime.jsx("div",{className:"dtp-cal-weekday",role:"columnheader","aria-label":f,children:f},O))}),jsxRuntime.jsx("div",{className:"dtp-cal-days",role:"grid",children:g.map(({date:f,thisMonth:O},S)=>{let x=de(f,n),E=de(f,r),k=i!=null&&he(f,i)||d!=null&&ve(f,d);return jsxRuntime.jsx("button",{type:"button",role:"gridcell",className:N("dtp-cal-day",!O&&"dtp-cal-day--other",x&&"dtp-cal-day--selected",E&&!x&&"dtp-cal-day--today",k&&"dtp-cal-day--disabled"),onClick:()=>!k&&c(f),disabled:k,"aria-current":E?"date":void 0,"aria-selected":x,"aria-disabled":k,children:f.getDate()},S)})})]})}function Ve({amount:e,unit:t,direction:n,onAmountChange:r,onUnitChange:i,onDirectionChange:d,onApply:a,locale:c}){let l=c.startsWith("zh"),s=[{value:"day",label:l?"\u5929":"Day"},{value:"week",label:l?"\u5468":"Week"},{value:"month",label:l?"\u6708":"Month"},{value:"year",label:l?"\u5E74":"Year"}],m=[{value:"future",label:l?"\u4EE5\u540E":"from now"},{value:"past",label:l?"\u4EE5\u524D":"before now"}];return jsxRuntime.jsxs("div",{className:"dtp-quick-offset","aria-label":l?"\u5FEB\u901F\u504F\u79FB":"Quick offset",children:[jsxRuntime.jsx("input",{type:"number",className:"dtp-offset-input",value:e,min:1,max:9999,"aria-label":l?"\u504F\u79FB\u6570\u91CF":"Offset amount",onChange:p=>{let g=parseInt(p.target.value,10);!isNaN(g)&&g>=1&&r(g);}}),jsxRuntime.jsx("select",{className:"dtp-offset-select",value:t,"aria-label":l?"\u504F\u79FB\u5355\u4F4D":"Offset unit",onChange:p=>i(p.target.value),children:s.map(p=>jsxRuntime.jsx("option",{value:p.value,children:p.label},p.value))}),jsxRuntime.jsx("select",{className:"dtp-offset-select",value:n,"aria-label":l?"\u504F\u79FB\u65B9\u5411":"Offset direction",onChange:p=>d(p.target.value),children:m.map(p=>jsxRuntime.jsx("option",{value:p.value,children:p.label},p.value))}),jsxRuntime.jsx("button",{type:"button",className:"dtp-offset-apply",onClick:a,children:l?"\u5E94\u7528":"Apply"})]})}function Le({className:e,popupClassName:t,triggerClassName:n,disabled:r=false,placeholder:i,...d}){let{isOpen:a,displayValue:c,workingDate:l,view:s,calYear:m,calMonth:p,offsetAmount:g,offsetUnit:f,offsetDirection:O,mode:S,use24Hour:x,showSeconds:E,locale:k,minDate:L,maxDate:W,openPicker:ae,closePicker:I,confirm:j,clear:R,updateField:v,setView:P,setCalYear:_,setCalMonth:oe,setOffsetAmount:Q,setOffsetUnit:ne,setOffsetDirection:B,applyQuickOffset:ie,navigateCalendar:ee}=De({...d}),G=react.useRef(null),$=react.useRef(null),H=new Date;Me([G,$],I,a),Ce(G,$,a);let b=k.startsWith("zh"),Y={cancel:b?"\u53D6\u6D88":"Cancel",confirm:b?"\u786E\u5B9A":"Confirm",calendarView:b?"\u65E5\u5386":"Calendar",scrollView:b?"\u6EDA\u8F6E":"Scroll",placeholder:i??(b?"\u9009\u62E9\u65E5\u671F\u65F6\u95F4":"Select date / time")},A=S==="date"||S==="datetime",q=S==="time"||S==="datetime",le=we(l.getFullYear(),200).map(u=>({label:String(u),value:u})),h=Z(k,"short").map((u,D)=>({label:u,value:D})),y=U(l.getFullYear(),l.getMonth()),F=Array.from({length:y},(u,D)=>({label:String(D+1).padStart(2,"0"),value:D+1})),M=Array.from({length:24},(u,D)=>({label:String(D).padStart(2,"0"),value:D})),te=Array.from({length:12},(u,D)=>({label:String(D===0?12:D).padStart(2,"0"),value:D})),Te=[{label:"AM",value:0},{label:"PM",value:1}],ce=Array.from({length:60},(u,D)=>({label:String(D).padStart(2,"0"),value:D})),se=l.getHours(),pe=se%12,me=se<12?0:1,Oe=q&&!A?lucideReact.Clock:lucideReact.Calendar;return jsxRuntime.jsxs("div",{className:N("dtp-root",e),children:[jsxRuntime.jsxs("div",{className:"dtp-trigger-wrap",children:[jsxRuntime.jsxs("button",{ref:G,type:"button",className:N("dtp-trigger",c&&"dtp-trigger--has-clear",r&&"dtp-trigger--disabled",n),onClick:()=>!r&&(a?I():ae()),disabled:r,"aria-haspopup":"dialog","aria-expanded":a,children:[jsxRuntime.jsx(Oe,{className:"dtp-trigger-icon","aria-hidden":"true"}),jsxRuntime.jsx("span",{className:N("dtp-trigger-text",!c&&"dtp-trigger-placeholder"),children:c||Y.placeholder})]}),c&&jsxRuntime.jsx("button",{type:"button",className:"dtp-trigger-clear","aria-label":b?"\u6E05\u9664":"Clear value",onClick:()=>!r&&R(),children:jsxRuntime.jsx(lucideReact.X,{className:"h-3.5 w-3.5"})})]}),a&&reactDom.createPortal(jsxRuntime.jsxs("div",{ref:$,className:N("dtp-panel",t),role:"dialog","aria-modal":"true","aria-label":b?"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668":"Date time picker",children:[jsxRuntime.jsxs("div",{className:"dtp-panel-header",children:[jsxRuntime.jsx("span",{className:"dtp-panel-preview",children:c||Y.placeholder}),jsxRuntime.jsx("div",{className:"dtp-panel-actions",children:A&&jsxRuntime.jsx("button",{type:"button",className:N("dtp-view-btn",s==="calendar"&&"dtp-view-btn--active"),"aria-pressed":s==="calendar",title:s==="calendar"?Y.scrollView:Y.calendarView,onClick:()=>{s!=="calendar"&&(_(l.getFullYear()),oe(l.getMonth())),P(s==="calendar"?"drum":"calendar");},children:jsxRuntime.jsx(lucideReact.Calendar,{className:"h-4 w-4"})})})]}),jsxRuntime.jsx("div",{className:"dtp-panel-body",children:s==="drum"?jsxRuntime.jsxs("div",{className:"dtp-drum",children:[A&&jsxRuntime.jsxs("div",{className:"dtp-drum-date",children:[jsxRuntime.jsx(T,{label:b?"\u5E74":"Year",items:le,selectedValue:l.getFullYear(),onSelect:u=>v("year",u)}),jsxRuntime.jsx(T,{label:b?"\u6708":"Month",items:h,selectedValue:l.getMonth(),onSelect:u=>v("month",u)}),jsxRuntime.jsx(T,{label:b?"\u65E5":"Day",items:F,selectedValue:l.getDate(),onSelect:u=>v("day",u)})]}),A&&q&&jsxRuntime.jsx("div",{className:"dtp-drum-sep","aria-hidden":"true"}),q&&jsxRuntime.jsxs("div",{className:"dtp-drum-time",children:[x?jsxRuntime.jsx(T,{label:b?"\u65F6":"Hour",items:M,selectedValue:se,onSelect:u=>v("hour",u)}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(T,{label:b?"\u65F6":"Hour",items:te,selectedValue:pe,onSelect:u=>{v("hour",me===1?u+12:u);}}),jsxRuntime.jsx(T,{label:"AM/PM",items:Te,selectedValue:me,onSelect:u=>{v("hour",pe+(u===1?12:0));}})]}),jsxRuntime.jsx(T,{label:b?"\u5206":"Min",items:ce,selectedValue:l.getMinutes(),onSelect:u=>v("minute",u)}),E&&jsxRuntime.jsx(T,{label:b?"\u79D2":"Sec",items:ce,selectedValue:l.getSeconds(),onSelect:u=>v("second",u)})]})]}):jsxRuntime.jsx(Ue,{year:m,month:p,selectedDate:l,today:H,minDate:L,maxDate:W,locale:k,onSelectDay:u=>{v("year",u.getFullYear()),v("month",u.getMonth()),v("day",u.getDate()),P("drum");},onPrev:()=>ee(-1),onNext:()=>ee(1)})}),A&&jsxRuntime.jsx("div",{className:"dtp-panel-offset",children:jsxRuntime.jsx(Ve,{amount:g,unit:f,direction:O,onAmountChange:Q,onUnitChange:ne,onDirectionChange:B,onApply:ie,locale:k})}),jsxRuntime.jsxs("div",{className:"dtp-panel-footer",children:[jsxRuntime.jsx("button",{type:"button",className:"dtp-btn-cancel",onClick:I,children:Y.cancel}),jsxRuntime.jsx("button",{type:"button",className:"dtp-btn-confirm",onClick:j,children:Y.confirm})]})]}),document.body)]})}exports.DateTimePicker=Le;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--dtp-panel-bg: rgba(255, 255, 255, .9);--dtp-panel-border: var(--color-primary-200);--dtp-blur: 16px;--dtp-accent: var(--color-primary-500);--dtp-accent-bg: var(--color-primary-100);--dtp-text-selected: var(--color-primary-800);--dtp-text-muted: var(--color-secondary-400);--dtp-text-primary: var(--color-primary-700);--dtp-item-h: 40px;--dtp-radius: 16px;--dtp-shadow: 0 20px 60px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .06)}:root:where(.dark,.dark *),.dark{--dtp-panel-bg: rgba(15, 23, 42, .9);--dtp-panel-border: var(--color-primary-700);--dtp-accent-bg: rgba(100, 116, 139, .25);--dtp-text-selected: var(--color-primary-100);--dtp-text-muted: var(--color-secondary-500);--dtp-text-primary: var(--color-primary-300);--dtp-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 4px 16px rgba(0, 0, 0, .2)}.dtp-root{display:inline-flex;align-items:center}.dtp-trigger-wrap{position:relative;display:inline-flex;align-items:center}.dtp-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;border:1px solid var(--color-primary-300);background:var(--color-primary-50);color:var(--color-primary-700);font-size:.875rem;line-height:1.5;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;min-width:180px;text-align:left}.dtp-trigger--has-clear{padding-right:2rem}:where(.dark,.dark *) .dtp-trigger{border-color:var(--color-primary-600);background:var(--color-primary-800);color:var(--color-primary-200)}.dtp-trigger:hover:not(:disabled){border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-100)}:where(.dark,.dark *) .dtp-trigger:hover:not(:disabled){box-shadow:0 0 0 3px #64748b33}.dtp-trigger--disabled{opacity:.5;cursor:not-allowed}.dtp-trigger-icon{width:1rem;height:1rem;color:var(--color-primary-400);flex-shrink:0}.dtp-trigger-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dtp-trigger-placeholder{color:var(--color-secondary-400)}.dtp-trigger-clear{position:absolute;right:.375rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:.125rem;border-radius:9999px;border:none;background:transparent;color:var(--color-secondary-400);cursor:pointer;transition:background .1s ease,color .1s ease}.dtp-trigger-clear:hover{background:var(--color-primary-200);color:var(--color-primary-600)}.dtp-panel{position:fixed;z-index:9999;width:340px;max-width:calc(100vw - 32px);border-radius:var(--dtp-radius);border:1px solid var(--dtp-panel-border);background:var(--dtp-panel-bg);-webkit-backdrop-filter:blur(var(--dtp-blur));backdrop-filter:blur(var(--dtp-blur));box-shadow:var(--dtp-shadow);overflow:hidden;animation:dtp-panel-in .2s cubic-bezier(.16,1,.3,1) both;top:60px;left:0}@keyframes dtp-panel-in{0%{opacity:0;transform:scale(.97) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(max-width:640px){.dtp-panel{position:fixed!important;top:auto!important;left:0!important;bottom:0;width:100vw;max-width:100vw;border-radius:var(--dtp-radius) var(--dtp-radius) 0 0;animation:dtp-panel-slide-up .28s cubic-bezier(.16,1,.3,1) both}@keyframes dtp-panel-slide-up{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}.dtp-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem .625rem;border-bottom:1px solid var(--dtp-panel-border)}.dtp-panel-preview{font-size:.9375rem;font-weight:600;color:var(--dtp-text-primary);letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dtp-panel-actions{display:flex;gap:.375rem;margin-left:.5rem}.dtp-view-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.5rem;border:1px solid transparent;background:transparent;color:var(--dtp-text-muted);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease}.dtp-view-btn:hover{background:var(--dtp-accent-bg);color:var(--dtp-text-selected)}.dtp-view-btn--active{background:var(--dtp-accent-bg);color:var(--dtp-accent);border-color:var(--dtp-panel-border)}.dtp-panel-body{padding:.625rem .5rem}.dtp-drum{display:flex;align-items:stretch}.dtp-drum-date,.dtp-drum-time{display:flex;flex:1;min-width:0}.dtp-drum-sep{width:1px;background:var(--dtp-panel-border);margin:.5rem .25rem}.dtp-column{position:relative;flex:1;height:calc(var(--dtp-item-h) * 5);min-width:0;overflow:hidden}.dtp-column-highlight{position:absolute;left:4px;right:4px;top:50%;transform:translateY(-50%);height:var(--dtp-item-h);background:var(--dtp-accent-bg);border-radius:8px;pointer-events:none;z-index:0}.dtp-column-list{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding-top:calc(var(--dtp-item-h) * 2);padding-bottom:calc(var(--dtp-item-h) * 2)}.dtp-column-list::-webkit-scrollbar{display:none}.dtp-item{position:relative;z-index:1;height:var(--dtp-item-h);display:flex;align-items:center;justify-content:center;font-size:.875rem;cursor:pointer;color:var(--dtp-text-muted);transition:color .1s ease;-webkit-user-select:none;user-select:none}.dtp-item:hover{color:var(--dtp-text-primary)}.dtp-item--selected{color:var(--dtp-text-selected);font-weight:600;font-size:1rem}.dtp-fade-top,.dtp-fade-bottom{position:absolute;left:0;right:0;height:calc(var(--dtp-item-h) * 2);pointer-events:none;z-index:2}.dtp-fade-top{top:0;background:linear-gradient(to bottom,var(--dtp-panel-bg) 10%,transparent 100%)}.dtp-fade-bottom{bottom:0;background:linear-gradient(to top,var(--dtp-panel-bg) 10%,transparent 100%)}.dtp-calendar{padding:0 .25rem;min-height:230px}.dtp-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dtp-cal-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.5rem;border:none;background:transparent;color:var(--dtp-text-muted);cursor:pointer;transition:background .1s ease,color .1s ease}.dtp-cal-nav-btn:hover{background:var(--dtp-accent-bg);color:var(--dtp-text-selected)}.dtp-cal-title{font-size:.875rem;font-weight:600;color:var(--dtp-text-primary)}.dtp-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem}.dtp-cal-weekday{text-align:center;font-size:.6875rem;font-weight:500;color:var(--dtp-text-muted);padding:.25rem 0}.dtp-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.dtp-cal-day{display:flex;align-items:center;justify-content:center;height:2rem;border-radius:.375rem;border:none;background:transparent;font-size:.8125rem;color:var(--dtp-text-primary);cursor:pointer;transition:background 80ms ease,color 80ms ease;width:100%}.dtp-cal-day:hover:not(:disabled):not(.dtp-cal-day--selected){background:var(--dtp-accent-bg)}.dtp-cal-day--other{color:var(--dtp-text-muted);opacity:.45}.dtp-cal-day--selected{background:var(--dtp-accent)!important;color:#fff!important;font-weight:600}.dtp-cal-day--today:not(.dtp-cal-day--selected){font-weight:600;color:var(--dtp-accent);box-shadow:inset 0 0 0 1px var(--dtp-accent)}.dtp-cal-day--disabled{opacity:.28;cursor:not-allowed;pointer-events:none}.dtp-panel-offset{padding:.375rem .75rem .5rem;border-top:1px solid var(--dtp-panel-border)}.dtp-quick-offset{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;padding:.25rem 0}.dtp-offset-input{width:3.25rem;padding:.25rem .4rem;border-radius:.375rem;border:1px solid var(--dtp-panel-border);background:transparent;color:var(--dtp-text-primary);font-size:.8125rem;text-align:center;outline:none;transition:border-color .1s ease}.dtp-offset-input:focus{border-color:var(--dtp-accent)}.dtp-offset-select{padding:.25rem .3rem;border-radius:.375rem;border:1px solid var(--dtp-panel-border);background:transparent;color:var(--dtp-text-primary);font-size:.8125rem;outline:none;cursor:pointer;transition:border-color .1s ease}.dtp-offset-select:focus{border-color:var(--dtp-accent)}.dtp-offset-apply{padding:.25rem .65rem;border-radius:.375rem;border:none;background:var(--dtp-accent);color:#fff;font-size:.8125rem;font-weight:500;cursor:pointer;transition:opacity .12s ease}.dtp-offset-apply:hover{opacity:.85}.dtp-panel-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.625rem .75rem;border-top:1px solid var(--dtp-panel-border)}.dtp-btn-cancel{padding:.4375rem 1rem;border-radius:.5rem;border:1px solid var(--dtp-panel-border);background:transparent;color:var(--dtp-text-muted);font-size:.875rem;cursor:pointer;transition:background .1s ease,color .1s ease}.dtp-btn-cancel:hover{background:var(--dtp-accent-bg);color:var(--dtp-text-primary)}.dtp-btn-confirm{padding:.4375rem 1.25rem;border-radius:.5rem;border:none;background:var(--dtp-accent);color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:opacity .12s ease,transform .1s ease}.dtp-btn-confirm:hover{opacity:.9;transform:translateY(-1px)}.dtp-btn-confirm:active{transform:translateY(0)}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { DateTimePicker_alias_3 as DateTimePicker } from '../_tsup-dts-rollup.cjs';
|
|
2
|
+
export { DateTimePickerProps_alias_2 as DateTimePickerProps } from '../_tsup-dts-rollup.cjs';
|
|
3
|
+
export { DateTimeMode_alias_2 as DateTimeMode } from '../_tsup-dts-rollup.cjs';
|
|
4
|
+
export { OffsetUnit_alias_2 as OffsetUnit } from '../_tsup-dts-rollup.cjs';
|
|
5
|
+
export { OffsetDirection_alias_2 as OffsetDirection } from '../_tsup-dts-rollup.cjs';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { DateTimePicker_alias_3 as DateTimePicker } from '../_tsup-dts-rollup.js';
|
|
2
|
+
export { DateTimePickerProps_alias_2 as DateTimePickerProps } from '../_tsup-dts-rollup.js';
|
|
3
|
+
export { DateTimeMode_alias_2 as DateTimeMode } from '../_tsup-dts-rollup.js';
|
|
4
|
+
export { OffsetUnit_alias_2 as OffsetUnit } from '../_tsup-dts-rollup.js';
|
|
5
|
+
export { OffsetDirection_alias_2 as OffsetDirection } from '../_tsup-dts-rollup.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {useRef,useState,useCallback,useEffect}from'react';import {createPortal}from'react-dom';import {Clock,Calendar,X,ChevronLeft,ChevronRight}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function N(...e){return twMerge(clsx(e))}function Z(e="en-US",t="long"){return Array.from({length:12},(n,r)=>new Intl.DateTimeFormat(e,{month:t}).format(new Date(2e3,r,1)))}function ue(e="en-US",t="narrow"){let n=new Date(2e3,0,2);return Array.from({length:7},(r,i)=>{let d=new Date(n);return d.setDate(n.getDate()+i),new Intl.DateTimeFormat(e,{weekday:t}).format(d)})}function fe(e,t=true,n=true){return e==="date"?"YYYY-MM-DD":e==="time"?t?n?"HH:mm:ss":"HH:mm":n?"hh:mm:ss A":"hh:mm A":t?n?"YYYY-MM-DD HH:mm:ss":"YYYY-MM-DD HH:mm":n?"YYYY-MM-DD hh:mm:ss A":"YYYY-MM-DD hh:mm A"}function Ae(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function ge(e,t,n="en-US"){let r=e.getHours(),i=Z(n,"long"),d=Z(n,"short"),a={YYYY:String(e.getFullYear()),YY:String(e.getFullYear()).slice(-2),MMMM:i[e.getMonth()],MMM:d[e.getMonth()],MM:String(e.getMonth()+1).padStart(2,"0"),M:String(e.getMonth()+1),DD:String(e.getDate()).padStart(2,"0"),D:String(e.getDate()),HH:String(r).padStart(2,"0"),H:String(r),hh:String(r%12||12).padStart(2,"0"),h:String(r%12||12),mm:String(e.getMinutes()).padStart(2,"0"),ss:String(e.getSeconds()).padStart(2,"0"),A:r<12?"AM":"PM",a:r<12?"am":"pm"},c=Object.keys(a).sort((s,m)=>m.length-s.length),l=new RegExp(c.map(Ae).join("|"),"g");return t.replace(l,s=>a[s]??s)}function U(e,t){return new Date(e,t+1,0).getDate()}function be(e,t){let n=new Date(e,t,1).getDay(),r=U(e,t),i=U(e,t-1),d=[];for(let c=n-1;c>=0;c--)d.push({date:new Date(e,t-1,i-c),thisMonth:false});for(let c=1;c<=r;c++)d.push({date:new Date(e,t,c),thisMonth:true});let a=42-d.length;for(let c=1;c<=a;c++)d.push({date:new Date(e,t+1,c),thisMonth:false});return d}function V(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())}function de(e,t){return V(e).getTime()===V(t).getTime()}function he(e,t){return V(e)<V(t)}function ve(e,t){return V(e)>V(t)}function re(e,t,n){return t&&e<t?new Date(t):n&&e>n?new Date(n):e}function ye(e,t,n,r){let i=new Date(e),a=t*(r==="future"?1:-1);switch(n){case "day":i.setDate(i.getDate()+a);break;case "week":i.setDate(i.getDate()+a*7);break;case "month":i.setMonth(i.getMonth()+a);break;case "year":i.setFullYear(i.getFullYear()+a);break}return i}function we(e,t=200){let n=e-Math.floor(t/2);return Array.from({length:t},(r,i)=>n+i)}function De(e){let{value:t,defaultValue:n,onChange:r,mode:i="datetime",minDate:d,maxDate:a,use24Hour:c=true,showSeconds:l=true,locale:s="en-US",format:m,onOpen:p,onClose:g}=e,f=t!==void 0,[O,S]=useState(n??null),x=f?t??null:O,[E,k]=useState(false),[L,W]=useState(()=>x??new Date),[ae,I]=useState("drum"),[j,R]=useState(()=>(x??new Date).getFullYear()),[v,P]=useState(()=>(x??new Date).getMonth()),[_,oe]=useState(1),[Q,ne]=useState("day"),[B,ie]=useState("future"),ee=m??fe(i,c,l),G=x?ge(x,ee,s):"",$=useCallback(()=>{let h=x??new Date;W(new Date(h)),R(h.getFullYear()),P(h.getMonth()),I("drum"),k(true),p?.();},[x,p]),H=useCallback(()=>{k(false),g?.();},[g]),b=useCallback(()=>{let h=re(L,d,a);f||S(h),r?.(h),H();},[L,d,a,f,r,H]),Y=useCallback(()=>{f||S(null),r?.(null),H();},[f,r,H]),A=useCallback((h,y)=>{W(F=>{let M=new Date(F);switch(h){case "year":M.setFullYear(y);break;case "month":{M.setMonth(y);let te=U(M.getFullYear(),y);M.getDate()>te&&M.setDate(te);break}case "day":M.setDate(y);break;case "hour":M.setHours(y);break;case "minute":M.setMinutes(y);break;case "second":M.setSeconds(y);break}return re(M,d,a)});},[d,a]),q=useCallback(()=>{let h=re(ye(new Date,_,Q,B),d,a);W(h),R(h.getFullYear()),P(h.getMonth());},[_,Q,B,d,a]),le=useCallback(h=>{let y=v+h,F=j;y<0&&(y=11,F--),y>11&&(y=0,F++),P(y),R(F);},[v,j]);return {isOpen:E,displayValue:G,workingDate:L,view:ae,calYear:j,calMonth:v,offsetAmount:_,offsetUnit:Q,offsetDirection:B,mode:i,use24Hour:c,showSeconds:l,locale:s,minDate:d,maxDate:a,openPicker:$,closePicker:H,confirm:b,clear:Y,updateField:A,setView:I,setCalYear:R,setCalMonth:P,setOffsetAmount:oe,setOffsetUnit:ne,setOffsetDirection:ie,applyQuickOffset:q,navigateCalendar:le}}var J=40;function Me(e,t,n=true){let r=useRef(t);r.current=t,useEffect(()=>{if(!n)return;function i(d){let a=d.target;e.some(l=>l.current?.contains(a))||r.current();}return document.addEventListener("mousedown",i),()=>document.removeEventListener("mousedown",i)},[e,n]);}function Se(e,t,n){let r=useRef(false),i=useRef(void 0),d=useRef(n);d.current=n;let a=useRef(t);a.current=t;let c=useCallback((s,m="smooth")=>{let p=e.current;if(!p)return;let g=s*J;Math.abs(p.scrollTop-g)<2&&m!=="instant"||(m==="instant"?p.scrollTop=g:p.scrollTo({top:g,behavior:m}));},[e]),l=useCallback(()=>{e.current&&(r.current=true,clearTimeout(i.current),i.current=setTimeout(()=>{r.current=false;let m=e.current;if(!m)return;let p=Math.round(m.scrollTop/J),g=Math.max(0,Math.min(a.current-1,p)),f=g*J;Math.abs(m.scrollTop-f)>1&&m.scrollTo({top:f,behavior:"smooth"}),d.current(g);},120));},[e]);return {scrollToIndex:c,handleScroll:l,isScrollingRef:r}}function Ce(e,t,n){useEffect(()=>{if(!n)return;function r(){let d=e.current,a=t.current;if(!d||!a)return;if(window.innerWidth<=640){a.style.top="",a.style.left="";return}let c=d.getBoundingClientRect(),l=window.innerHeight,s=window.innerWidth,m=a.offsetHeight||460,p=a.offsetWidth||340,g=c.bottom+8,f=c.left;g+m>l-16&&(g=Math.max(16,c.top-m-8)),f+p>s-16&&(f=Math.max(16,s-p-16)),f<16&&(f=16),a.style.top=`${Math.round(g)}px`,a.style.left=`${Math.round(f)}px`;}let i=setTimeout(r,0);return window.addEventListener("resize",r),window.addEventListener("scroll",r,true),()=>{clearTimeout(i),window.removeEventListener("resize",r),window.removeEventListener("scroll",r,true);}},[n,e,t]);}function T({items:e,selectedValue:t,onSelect:n,label:r}){let i=useRef(null),d=useRef(t),a=useRef(false),{scrollToIndex:c,handleScroll:l}=Se(i,e.length,s=>{let m=e[s];m&&(a.current=true,n(m.value),setTimeout(()=>{a.current=false;},200));});return useEffect(()=>{let s=i.current;if(!s)return;let m=e.findIndex(p=>p.value===t);m>=0&&(s.scrollTop=m*J);},[]),useEffect(()=>{if(d.current!==t&&(d.current=t,!a.current)){let s=e.findIndex(m=>m.value===t);s>=0&&c(s,"smooth");}},[t,e,c]),jsxs("div",{className:"dtp-column",role:"group","aria-label":r,children:[jsx("div",{className:"dtp-column-highlight","aria-hidden":"true"}),jsx("div",{ref:i,className:"dtp-column-list",onScroll:l,role:"listbox","aria-label":r,children:e.map(s=>jsx("div",{className:N("dtp-item",s.value===t&&"dtp-item--selected"),onClick:()=>{let m=e.findIndex(p=>p.value===s.value);m>=0&&c(m,"smooth"),n(s.value);},role:"option","aria-selected":s.value===t,children:s.label},s.value))}),jsx("div",{className:"dtp-fade-top","aria-hidden":"true"}),jsx("div",{className:"dtp-fade-bottom","aria-hidden":"true"})]})}function Ue({year:e,month:t,selectedDate:n,today:r,minDate:i,maxDate:d,locale:a,onSelectDay:c,onPrev:l,onNext:s}){let m=ue(a,"narrow"),p=Z(a,"long"),g=be(e,t);return jsxs("div",{className:"dtp-calendar",children:[jsxs("div",{className:"dtp-cal-nav",children:[jsx("button",{type:"button",className:"dtp-cal-nav-btn",onClick:l,"aria-label":"Previous month",children:jsx(ChevronLeft,{className:"h-4 w-4"})}),jsxs("span",{className:"dtp-cal-title",children:[p[t]," ",e]}),jsx("button",{type:"button",className:"dtp-cal-nav-btn",onClick:s,"aria-label":"Next month",children:jsx(ChevronRight,{className:"h-4 w-4"})})]}),jsx("div",{className:"dtp-cal-weekdays",role:"row",children:m.map((f,O)=>jsx("div",{className:"dtp-cal-weekday",role:"columnheader","aria-label":f,children:f},O))}),jsx("div",{className:"dtp-cal-days",role:"grid",children:g.map(({date:f,thisMonth:O},S)=>{let x=de(f,n),E=de(f,r),k=i!=null&&he(f,i)||d!=null&&ve(f,d);return jsx("button",{type:"button",role:"gridcell",className:N("dtp-cal-day",!O&&"dtp-cal-day--other",x&&"dtp-cal-day--selected",E&&!x&&"dtp-cal-day--today",k&&"dtp-cal-day--disabled"),onClick:()=>!k&&c(f),disabled:k,"aria-current":E?"date":void 0,"aria-selected":x,"aria-disabled":k,children:f.getDate()},S)})})]})}function Ve({amount:e,unit:t,direction:n,onAmountChange:r,onUnitChange:i,onDirectionChange:d,onApply:a,locale:c}){let l=c.startsWith("zh"),s=[{value:"day",label:l?"\u5929":"Day"},{value:"week",label:l?"\u5468":"Week"},{value:"month",label:l?"\u6708":"Month"},{value:"year",label:l?"\u5E74":"Year"}],m=[{value:"future",label:l?"\u4EE5\u540E":"from now"},{value:"past",label:l?"\u4EE5\u524D":"before now"}];return jsxs("div",{className:"dtp-quick-offset","aria-label":l?"\u5FEB\u901F\u504F\u79FB":"Quick offset",children:[jsx("input",{type:"number",className:"dtp-offset-input",value:e,min:1,max:9999,"aria-label":l?"\u504F\u79FB\u6570\u91CF":"Offset amount",onChange:p=>{let g=parseInt(p.target.value,10);!isNaN(g)&&g>=1&&r(g);}}),jsx("select",{className:"dtp-offset-select",value:t,"aria-label":l?"\u504F\u79FB\u5355\u4F4D":"Offset unit",onChange:p=>i(p.target.value),children:s.map(p=>jsx("option",{value:p.value,children:p.label},p.value))}),jsx("select",{className:"dtp-offset-select",value:n,"aria-label":l?"\u504F\u79FB\u65B9\u5411":"Offset direction",onChange:p=>d(p.target.value),children:m.map(p=>jsx("option",{value:p.value,children:p.label},p.value))}),jsx("button",{type:"button",className:"dtp-offset-apply",onClick:a,children:l?"\u5E94\u7528":"Apply"})]})}function Le({className:e,popupClassName:t,triggerClassName:n,disabled:r=false,placeholder:i,...d}){let{isOpen:a,displayValue:c,workingDate:l,view:s,calYear:m,calMonth:p,offsetAmount:g,offsetUnit:f,offsetDirection:O,mode:S,use24Hour:x,showSeconds:E,locale:k,minDate:L,maxDate:W,openPicker:ae,closePicker:I,confirm:j,clear:R,updateField:v,setView:P,setCalYear:_,setCalMonth:oe,setOffsetAmount:Q,setOffsetUnit:ne,setOffsetDirection:B,applyQuickOffset:ie,navigateCalendar:ee}=De({...d}),G=useRef(null),$=useRef(null),H=new Date;Me([G,$],I,a),Ce(G,$,a);let b=k.startsWith("zh"),Y={cancel:b?"\u53D6\u6D88":"Cancel",confirm:b?"\u786E\u5B9A":"Confirm",calendarView:b?"\u65E5\u5386":"Calendar",scrollView:b?"\u6EDA\u8F6E":"Scroll",placeholder:i??(b?"\u9009\u62E9\u65E5\u671F\u65F6\u95F4":"Select date / time")},A=S==="date"||S==="datetime",q=S==="time"||S==="datetime",le=we(l.getFullYear(),200).map(u=>({label:String(u),value:u})),h=Z(k,"short").map((u,D)=>({label:u,value:D})),y=U(l.getFullYear(),l.getMonth()),F=Array.from({length:y},(u,D)=>({label:String(D+1).padStart(2,"0"),value:D+1})),M=Array.from({length:24},(u,D)=>({label:String(D).padStart(2,"0"),value:D})),te=Array.from({length:12},(u,D)=>({label:String(D===0?12:D).padStart(2,"0"),value:D})),Te=[{label:"AM",value:0},{label:"PM",value:1}],ce=Array.from({length:60},(u,D)=>({label:String(D).padStart(2,"0"),value:D})),se=l.getHours(),pe=se%12,me=se<12?0:1,Oe=q&&!A?Clock:Calendar;return jsxs("div",{className:N("dtp-root",e),children:[jsxs("div",{className:"dtp-trigger-wrap",children:[jsxs("button",{ref:G,type:"button",className:N("dtp-trigger",c&&"dtp-trigger--has-clear",r&&"dtp-trigger--disabled",n),onClick:()=>!r&&(a?I():ae()),disabled:r,"aria-haspopup":"dialog","aria-expanded":a,children:[jsx(Oe,{className:"dtp-trigger-icon","aria-hidden":"true"}),jsx("span",{className:N("dtp-trigger-text",!c&&"dtp-trigger-placeholder"),children:c||Y.placeholder})]}),c&&jsx("button",{type:"button",className:"dtp-trigger-clear","aria-label":b?"\u6E05\u9664":"Clear value",onClick:()=>!r&&R(),children:jsx(X,{className:"h-3.5 w-3.5"})})]}),a&&createPortal(jsxs("div",{ref:$,className:N("dtp-panel",t),role:"dialog","aria-modal":"true","aria-label":b?"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668":"Date time picker",children:[jsxs("div",{className:"dtp-panel-header",children:[jsx("span",{className:"dtp-panel-preview",children:c||Y.placeholder}),jsx("div",{className:"dtp-panel-actions",children:A&&jsx("button",{type:"button",className:N("dtp-view-btn",s==="calendar"&&"dtp-view-btn--active"),"aria-pressed":s==="calendar",title:s==="calendar"?Y.scrollView:Y.calendarView,onClick:()=>{s!=="calendar"&&(_(l.getFullYear()),oe(l.getMonth())),P(s==="calendar"?"drum":"calendar");},children:jsx(Calendar,{className:"h-4 w-4"})})})]}),jsx("div",{className:"dtp-panel-body",children:s==="drum"?jsxs("div",{className:"dtp-drum",children:[A&&jsxs("div",{className:"dtp-drum-date",children:[jsx(T,{label:b?"\u5E74":"Year",items:le,selectedValue:l.getFullYear(),onSelect:u=>v("year",u)}),jsx(T,{label:b?"\u6708":"Month",items:h,selectedValue:l.getMonth(),onSelect:u=>v("month",u)}),jsx(T,{label:b?"\u65E5":"Day",items:F,selectedValue:l.getDate(),onSelect:u=>v("day",u)})]}),A&&q&&jsx("div",{className:"dtp-drum-sep","aria-hidden":"true"}),q&&jsxs("div",{className:"dtp-drum-time",children:[x?jsx(T,{label:b?"\u65F6":"Hour",items:M,selectedValue:se,onSelect:u=>v("hour",u)}):jsxs(Fragment,{children:[jsx(T,{label:b?"\u65F6":"Hour",items:te,selectedValue:pe,onSelect:u=>{v("hour",me===1?u+12:u);}}),jsx(T,{label:"AM/PM",items:Te,selectedValue:me,onSelect:u=>{v("hour",pe+(u===1?12:0));}})]}),jsx(T,{label:b?"\u5206":"Min",items:ce,selectedValue:l.getMinutes(),onSelect:u=>v("minute",u)}),E&&jsx(T,{label:b?"\u79D2":"Sec",items:ce,selectedValue:l.getSeconds(),onSelect:u=>v("second",u)})]})]}):jsx(Ue,{year:m,month:p,selectedDate:l,today:H,minDate:L,maxDate:W,locale:k,onSelectDay:u=>{v("year",u.getFullYear()),v("month",u.getMonth()),v("day",u.getDate()),P("drum");},onPrev:()=>ee(-1),onNext:()=>ee(1)})}),A&&jsx("div",{className:"dtp-panel-offset",children:jsx(Ve,{amount:g,unit:f,direction:O,onAmountChange:Q,onUnitChange:ne,onDirectionChange:B,onApply:ie,locale:k})}),jsxs("div",{className:"dtp-panel-footer",children:[jsx("button",{type:"button",className:"dtp-btn-cancel",onClick:I,children:Y.cancel}),jsx("button",{type:"button",className:"dtp-btn-confirm",onClick:j,children:Y.confirm})]})]}),document.body)]})}export{Le as DateTimePicker};
|