@dotss/ui 1.0.4 → 1.0.5
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/DatePicker/DatePicker.cjs +1 -1
- package/DatePicker/DatePicker.es.js +65 -65
- package/Tab/Tab.cjs +1 -1
- package/Tab/Tab.es.js +12 -12
- package/package.json +1 -1
|
@@ -97,4 +97,4 @@
|
|
|
97
97
|
min-width: 100%;
|
|
98
98
|
height: 6px;
|
|
99
99
|
min-height: 6px;
|
|
100
|
-
`,xt=30,Je=5,bt=d.forwardRef(function({children:n,onChange:r,onChangeMonth:u,value:o,date:p,minDate:h,maxDate:y,holidayDates:je,disableDates:_,showWeekHead:Ce=!1,multiple:M=!1,period:re=!1,enableMonthSelect:J=!1,showToday:Ae=!1,edgeSpacing:pe=0,renderEvent:F,inlineCSS:et,monthProps:ne,...tt},rt){const{spacing:ve}=pt.default(),[$,ie]=d.useState((typeof p=="string"||typeof p=="number"?new Date(p):p)||new Date),[x,Q]=d.useState(()=>Array.isArray(o)&&o.length>0?g(o[0]):g(o)),[Y,se]=d.useState(()=>Array.isArray(o)&&o.length>1?g(o[o.length-1]):null),[j,Te]=d.useState(0),[b,X]=d.useState(1),[Re,He]=d.useState(!1),[he,me]=d.useState(!1),Z=d.useRef(null),D=d.useRef(null),ye=d.useRef(0),We=d.useRef(0),H=d.useRef(0),T=d.useRef(!1),C=d.useRef(b),ge=d.useRef(),oe=d.useRef(null),De=d.useRef(null),A=$.getFullYear(),ae=$.getMonth(),Fe=Me(A,ae),z=q(ae),N=g(o),B=g(je),K=g(_),we=G($,h)||de($,h),$e=O($,y)||de($,y),ce=new Date(A,ae-1),le=new Date(A,ae+1),L=`${A}. ${z}`,E=`${A}년 ${z}월`,P=re&&!!x&&!!Y,Ye=[{year:ce.getFullYear(),month:q(ce.getMonth()),weeks:Me(ce.getFullYear(),ce.getMonth())},{year:A,month:z,weeks:Fe},{year:le.getFullYear(),month:q(le.getMonth()),weeks:Me(le.getFullYear(),le.getMonth())}],xe=typeof F=="function",nt=Ye[1].weeks.length*(xt+(xe?10:0)+ve.content(2))+ve.content(2),ze=(t,l)=>()=>{D.current&&(D.current.style.transition="none",D.current.style.cursor="grabbing"),ye.current=t,We.current=l},I=d.useCallback(()=>{if(!T.current)return;const t=j-H.current,l=Math.abs(j-t),s=j*.1;D.current&&(D.current.style.transform=`translate3d(-${j*b}px, 0, 0)`,D.current.style.cursor="grab",D.current.style.transition="transform 0.2s"),ye.current=0,H.current=0,T.current=!1,!(l<=s)&&(j<t?X(c=>c+1):j>t&&X(c=>c-1))},[j,b]),be=(t,l)=>()=>{if(!(T.current||b!==1)&&!l){if(!re){r==null||r(t,g);return}if(R(t,x)&&Array.isArray(o)&&o.length===1){Q(null),se(null),r==null||r([],g);return}else if(R(t,x)&&!Array.isArray(o)&&R(t,o)){Q(null),se(null),r==null||r([],g);return}if(!x){Q(t),r==null||r(t,g);return}if(!Y&&x){const[s,c]=O(t,x)?[x,t]:[t,x];Q(s),se(c);const i=Ze([s,c],_);r==null||r(i,g);return}x&&Y&&(Q(t),se(null),r==null||r(t,g))}},it=t=>{M&&(T.current=!0,ze(t.clientX,t.clientY)())},st=t=>{M&&ze(t.touches[0].clientX,t.touches[0].clientY)()},Le=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t-1))},Ee=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t+1))},ue=t=>{t.stopPropagation(),me(l=>!l)},ot=()=>me(!1),at=t=>{if(!t)return;const[l,s]=t.toString().split(".").map(Number);ie(new Date(l,s-1)),u&&typeof u=="function"&&u(g(new Date(l,s-1)),g),me(!1)},Ie=(t,l)=>s=>{const c=new Date(t);let i=null;if(s.stopPropagation(),s.key==="ArrowRight")i=new Date(c),i.setDate(c.getDate()+1);else if(s.key==="ArrowLeft")i=new Date(c),i.setDate(c.getDate()-1);else if(s.key==="ArrowDown")i=new Date(c),i.setDate(c.getDate()+7);else if(s.key==="ArrowUp")i=new Date(c),i.setDate(c.getDate()-7);else if(s.key==="Home")i=new Date(c),i.setDate(c.getDate()-c.getDay());else if(s.key==="End")i=new Date(c),i.setDate(c.getDate()+(6-c.getDay()));else if(s.key==="PageUp")i=new Date(c),i.setMonth(c.getMonth()-1);else if(s.key==="PageDown")i=new Date(c),i.setMonth(c.getMonth()+1);else if(s.key==="Enter"||s.key===" "){s.preventDefault(),be(t,l)();return}else if(s.key==="Escape"){s.preventDefault(),r==null||r([],g);return}if(i&&Z.current){const w=c.getMonth(),m=c.getFullYear(),k=i.getMonth(),f=i.getFullYear(),v=g(i),W=Z.current.querySelector(`[data-date="${v}"]`);if(W){if(w!==k||m!==f){i>c?(Ee(),setTimeout(()=>{W.focus()},0)):(Le(),setTimeout(()=>{W.focus()},0));return}W.focus()}}};return d.useLayoutEffect(()=>{var t;Te(((t=Z.current)==null?void 0:t.clientWidth)||0)},[M]),d.useEffect(()=>{const t=()=>{var l;Te(((l=Z.current)==null?void 0:l.clientWidth)||0)};return window.addEventListener("resize",t),window.addEventListener("scroll",t),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t)}},[M]),d.useEffect(()=>{const t=D.current,l=(i,w,m)=>{if(!t)return;H.current=i-ye.current;const k=w-We.current;if(T.current=T.current||Math.abs(H.current)>Je&&Math.abs(k)<Je*2,T.current&&m.cancelable&&(m.preventDefault(),m.stopPropagation()),T.current){if(we&&H.current>0){I();return}if($e&&H.current<0){I();return}Math.abs(H.current)>=10&&(t.style.transform=`translate3d(${H.current-j*b}px, 0, 0)`,t.style.cursor="grabbing")}},s=i=>l(i.touches[0].clientX,i.touches[0].clientY,i),c=i=>{T.current&&l(i.clientX,i.clientY,i)};return t==null||t.addEventListener("mousemove",c),t==null||t.addEventListener("touchmove",s),()=>{t==null||t.removeEventListener("mousemove",c),t==null||t.removeEventListener("touchmove",s)}},[j,b,I,$e,we]),d.useEffect(()=>{He(!0),ge.current=setTimeout(()=>{if(D.current&&(D.current.style.transition="none"),b>C.current){X(1);const t=new Date($.setMonth($.getMonth()+1));ie(t),u&&typeof u=="function"&&u(g(t),g),C.current=1}else if(b<C.current){const t=new Date($.setMonth($.getMonth()-1));ie(t),u&&typeof u=="function"&&u(g(t),g),X(1),C.current=1}else C.current=b;He(!1)},200)},[b,$,u]),d.useLayoutEffect(()=>{if(!re||!Array.isArray(o))return;const t=Ze(o,_);o.length<t.length&&(r==null||r(t,g))},[re,o,r,_]),d.useEffect(()=>{let t;return he&&(t=setTimeout(()=>{if(De.current){const l=De.current.querySelector("ul"),s=l==null?void 0:l.querySelector(`[data-value="${L}"]`);s==null||s.scrollIntoView({block:"start"})}},200)),()=>{clearTimeout(t)}},[he,L]),d.useEffect(()=>()=>{ge.current&&clearTimeout(ge.current)},[]),d.useEffect(()=>{p&&ie((typeof p=="string"||typeof p=="number"?new Date(p):p)||new Date)},[p]),a.jsxs(yt,{ref:rt,"aria-label":"달력",role:"application",...tt,css:et,children:[M?a.jsxs(gt,{children:[a.jsx(Xe.default,{name:"ChevronLeftLine",size:"small",onClick:Le,disabled:we,"aria-label":`이전 달로 이동, 현재 ${E}`}),J&&a.jsxs(Ge,{ref:oe,clickable:!0,onClick:ue,"aria-label":E,...ne,children:[L,a.jsx(Ne.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:ue,"aria-label":`달 변경, 현재 ${E}`,startAdornment:a.jsx(_e.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Ge,{ref:oe,id:"date-picker-title",clickable:!1,"aria-label":E,...ne,children:L}),a.jsx(Xe.default,{name:"ChevronRightLine",size:"small",onClick:Ee,disabled:$e,"aria-label":`다음 달로 이동, 현재 ${E}`})]}):a.jsxs(a.Fragment,{children:[J&&a.jsxs(Be,{ref:oe,clickable:!0,onClick:ue,"aria-label":E,...ne,children:[L,a.jsx(Ne.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:ue,"aria-label":`달 변경, 현재 ${E}`,startAdornment:a.jsx(_e.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Be,{id:"date-picker-title",clickable:!1,...ne,children:L})]}),J&&a.jsx(ft.default,{id:"date-picker-month-menu",anchorRef:oe,ref:De,open:he,onClose:ot,onChange:at,value:L,placement:M?"bottom-center":"bottom-left",width:160,fitToAnchorWidth:!1,maxHeight:368,children:Array.from({length:130},(t,l)=>{const s=1970+l;return Array.from({length:12},(c,i)=>{const w=i+1,m=w<10?`0${w}`:w,k=new Date(s,i+1,0).getDate(),f=`${s}-${m}-${k}`,v=`${s}-${m}-01`;return G(f,h)||O(v,y)?null:a.jsx(dt.default,{value:`${s}. ${m}`,"aria-label":`${s}년 ${m}월 선택`,children:`${s}. ${m}`},`${s}-${m}`)})})}),a.jsxs(ut.default,{flexDirection:"column",role:"grid","aria-label":`${A}년 ${z}월 달력`,children:[Ce&&a.jsxs(Dt,{id:"date-picker-week-head",role:"row",edgeSpacing:pe,children:[a.jsx("span",{role:"columnheader",children:"일"}),a.jsx("span",{role:"columnheader",children:"월"}),a.jsx("span",{role:"columnheader",children:"화"}),a.jsx("span",{role:"columnheader",children:"수"}),a.jsx("span",{role:"columnheader",children:"목"}),a.jsx("span",{role:"columnheader",children:"금"}),a.jsx("span",{role:"columnheader",children:"토"})]}),a.jsx(wt,{ref:Z,role:"presentation",children:a.jsxs($t,{role:"presentation",ref:D,onMouseDown:it,onMouseUp:I,onMouseLeave:I,onTouchStart:st,onTouchEnd:I,onTouchCancel:I,style:{transform:M?`translate3d(-${j*b}px, 0, 0)`:void 0,cursor:M?"grab":void 0,maxHeight:nt},children:[M&&Ye.map(({year:t,month:l,weeks:s},c)=>a.jsx(Ke,{role:"rowgroup",edgeSpacing:pe,className:c===1?"week-body-current":"",children:s.map((i,w)=>a.jsx(Pe,{role:"row",children:i.map((m,k)=>{const f=`${t}-${l}-${V(m||0)}`,v=!m,W=R(f,new Date),ke=Array.isArray(B)?B.includes(f):B===f,ee=Array.isArray(N)?N.includes(f):N===f,U=!m||(Array.isArray(K)?K.includes(f):K===f)||O(f,y)||G(f,h),Se=P&&R(f,x),fe=P&&R(f,Y),ct=P&&O(f,x)&&G(f,Y),Oe=de(f,$),lt=Oe&&w===0&&m===1||Oe&&ee,qe=F==null?void 0:F(f);return a.jsxs(Ue,{as:"button",role:"gridcell",variant:Se?"start":fe?"end":ct?"middle":void 0,onClick:be(f,U),today:Ae&&W,holiday:ke,tabIndex:lt?0:-1,"aria-rowindex":w+1,"aria-colindex":k+1,selected:ee,"aria-selected":ee,"aria-disabled":U,"aria-hidden":m===null,"data-date":f,onKeyDown:Ie(f,U),children:[a.jsx("div",{"aria-label":`${Qe(f)}`,children:a.jsx("span",{children:m})}),!v&&qe,!v&&xe&&!qe&&a.jsx(Ve,{})]},`${t}-${l}-week-row-${k}-${m?f:`${w}-${k}`}`)})},`${t}-${l}-week-row-${String(i)}`))},`week-body-${t}-${l}`)),!M&&a.jsx(Ke,{role:"rowgroup",edgeSpacing:pe,children:Fe.map((t,l)=>a.jsx(Pe,{role:"row",children:t.map((s,c)=>{const i=`${A}-${z}-${V(s||0)}`,w=!s,m=R(i,new Date),k=Array.isArray(B)?B.includes(i):B===i,f=Array.isArray(N)?N.includes(i):N===i,v=!s||(Array.isArray(K)?K.includes(i):K===i)||O(i,y)||G(i,h),W=P&&R(i,x),ke=P&&R(i,Y),ee=P&&O(i,x)&&G(i,Y),U=de(i,$),Se=U&&l===0&&s===1||U&&f,fe=F==null?void 0:F(i);return a.jsxs(Ue,{as:"button",variant:W?"start":ke?"end":ee?"middle":void 0,role:"gridcell",onClick:be(i,v),today:Ae&&m,holiday:k,"aria-rowindex":l+1,"aria-colindex":c+1,selected:f,"aria-selected":f,"aria-disabled":v,"aria-hidden":s===null,tabIndex:Se?0:-1,"data-date":i,onKeyDown:Ie(i,v),children:[a.jsx("div",{"aria-label":`${Qe(i)}`,children:a.jsx("span",{children:s})}),!w&&fe,!w&&xe&&!fe&&a.jsx(Ve,{})]},`${A}-${z}-week-row-${t}-${s?i:`${l}-${c}`}`)})},`${A}-${z}-week-row-${String(t)}`))})]})})]}),n]})});function Me(e,n){let r=[];const u=new Date(e,n,1),o=new Date(e,n+1,0).getDate(),p=u.getDay();let h=Array.from({length:p}).fill(null);for(let y=1;y<=o;y+=1)h.push(y),(h.length===7||y===o)&&(r.push(h),h=[]);return r=r.map(y=>Array.from({length:7}).map((je,_)=>y[_]||null)),r}function q(e){return String(e+1).length===1?`0${e+1}`:e+1}function V(e){return String(e).length===1?`0${e}`:e}function g(e){if(Array.isArray(e))return e.map(n=>n instanceof Date?`${n.getFullYear()}-${q(n.getMonth())}-${V(n.getDate())}`:n);if(e instanceof Date)return`${e.getFullYear()}-${q(e.getMonth())}-${V(e.getDate())}`;if(typeof e=="number"){const n=new Date(e);return`${n.getFullYear()}-${q(n.getMonth())}-${V(n.getDate())}`}return e}function Qe(e){const[n,r,u]=e.split("-");return`${n}년 ${Number(r)}월 ${Number(u)}일`}function O(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u>p}function G(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u<p}function de(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e),u=n instanceof Date?n:new Date(n);return`${r.getFullYear()}-${r.getMonth()}`==`${u.getFullYear()}-${u.getMonth()}`}function R(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u===p}function Ze(e,n){if(!e||!Array.isArray(e)||e.length===0)return[];const r=e.map(y=>y instanceof Date?y:y===null?new Date:new Date(y)),u=new Date(Math.min(...r.map(y=>y.getTime()))),o=new Date(Math.max(...r.map(y=>y.getTime()))),p=[],h=new Date(u);for(;h<=o;){if(Array.isArray(n)&&n.includes(h)){h.setDate(h.getDate()+1);continue}else if(n===h){h.setDate(h.getDate()+1);continue}p.push(`${h.getFullYear()}-${q(h.getMonth())}-${V(h.getDate())}`),h.setDate(h.getDate()+1)}return p}exports.default=bt;
|
|
100
|
+
`,xt=30,Je=5,bt=d.forwardRef(function({children:n,onChange:r,onChangeMonth:u,value:o,date:p,minDate:h,maxDate:y,holidayDates:je,disableDates:_,showWeekHead:Ce=!1,multiple:M=!1,period:re=!1,enableMonthSelect:J=!1,showToday:Ae=!1,edgeSpacing:he=0,renderEvent:F,inlineCSS:et,monthProps:ne,...tt},rt){const{spacing:ve}=pt.default(),[$,ie]=d.useState((typeof p=="string"||typeof p=="number"?new Date(p):p)||new Date),[x,Q]=d.useState(()=>Array.isArray(o)&&o.length>0?g(o[0]):g(o)),[Y,se]=d.useState(()=>Array.isArray(o)&&o.length>1?g(o[o.length-1]):null),[j,Te]=d.useState(0),[b,X]=d.useState(1),[Re,He]=d.useState(!1),[me,ye]=d.useState(!1),Z=d.useRef(null),D=d.useRef(null),oe=d.useRef(0),We=d.useRef(0),H=d.useRef(0),A=d.useRef(!1),C=d.useRef(b),ge=d.useRef(),ae=d.useRef(null),De=d.useRef(null),v=$.getFullYear(),ce=$.getMonth(),Fe=Me(v,ce),z=q(ce),N=g(o),B=g(je),K=g(_),we=G($,h)||pe($,h),$e=O($,y)||pe($,y),le=new Date(v,ce-1),ue=new Date(v,ce+1),L=`${v}. ${z}`,E=`${v}년 ${z}월`,P=re&&!!x&&!!Y,Ye=[{year:le.getFullYear(),month:q(le.getMonth()),weeks:Me(le.getFullYear(),le.getMonth())},{year:v,month:z,weeks:Fe},{year:ue.getFullYear(),month:q(ue.getMonth()),weeks:Me(ue.getFullYear(),ue.getMonth())}],xe=typeof F=="function",nt=Ye[1].weeks.length*(xt+(xe?10:0)+ve.content(2))+ve.content(2),ze=(t,l)=>()=>{D.current&&(D.current.style.transition="none",D.current.style.cursor="grabbing"),oe.current=t,We.current=l},I=d.useCallback(()=>{if(!A.current)return;const t=j-H.current,l=Math.abs(j-t),s=j*.1;D.current&&(D.current.style.transform=`translate3d(-${j*b}px, 0, 0)`,D.current.style.cursor="grab",D.current.style.transition="transform 0.2s"),oe.current=0,H.current=0,A.current=!1,!(l<=s)&&(j<t?X(c=>c+1):j>t&&X(c=>c-1))},[j,b]),be=(t,l)=>()=>{if(!(A.current||b!==1)&&!l){if(!re){r==null||r(t,g);return}if(R(t,x)&&Array.isArray(o)&&o.length===1){Q(null),se(null),r==null||r([],g);return}else if(R(t,x)&&!Array.isArray(o)&&R(t,o)){Q(null),se(null),r==null||r([],g);return}if(!x){Q(t),r==null||r(t,g);return}if(!Y&&x){const[s,c]=O(t,x)?[x,t]:[t,x];Q(s),se(c);const i=Ze([s,c],_);r==null||r(i,g);return}x&&Y&&(Q(t),se(null),r==null||r(t,g))}},it=t=>{M&&(A.current=!0,ze(t.clientX,t.clientY)())},st=t=>{M&&ze(t.touches[0].clientX,t.touches[0].clientY)()},Le=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t-1))},Ee=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t+1))},fe=t=>{t.stopPropagation(),ye(l=>!l)},ot=()=>ye(!1),at=t=>{if(!t)return;const[l,s]=t.toString().split(".").map(Number);ie(new Date(l,s-1)),u&&typeof u=="function"&&u(g(new Date(l,s-1)),g),ye(!1)},Ie=(t,l)=>s=>{const c=new Date(t);let i=null;if(s.stopPropagation(),s.key==="ArrowRight")i=new Date(c),i.setDate(c.getDate()+1);else if(s.key==="ArrowLeft")i=new Date(c),i.setDate(c.getDate()-1);else if(s.key==="ArrowDown")i=new Date(c),i.setDate(c.getDate()+7);else if(s.key==="ArrowUp")i=new Date(c),i.setDate(c.getDate()-7);else if(s.key==="Home")i=new Date(c),i.setDate(c.getDate()-c.getDay());else if(s.key==="End")i=new Date(c),i.setDate(c.getDate()+(6-c.getDay()));else if(s.key==="PageUp")i=new Date(c),i.setMonth(c.getMonth()-1);else if(s.key==="PageDown")i=new Date(c),i.setMonth(c.getMonth()+1);else if(s.key==="Enter"||s.key===" "){s.preventDefault(),be(t,l)();return}else if(s.key==="Escape"){s.preventDefault(),r==null||r([],g);return}if(i&&Z.current){const w=c.getMonth(),m=c.getFullYear(),k=i.getMonth(),f=i.getFullYear(),T=g(i),W=Z.current.querySelector(`[data-date="${T}"]`);if(W){if(w!==k||m!==f){i>c?(Ee(),setTimeout(()=>{W.focus()},0)):(Le(),setTimeout(()=>{W.focus()},0));return}W.focus()}}};return d.useLayoutEffect(()=>{var t;Te(((t=Z.current)==null?void 0:t.clientWidth)||0)},[M]),d.useEffect(()=>{const t=()=>{var l;Te(((l=Z.current)==null?void 0:l.clientWidth)||0)};return window.addEventListener("resize",t),window.addEventListener("scroll",t),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t)}},[M]),d.useEffect(()=>{const t=D.current,l=(i,w,m)=>{if(!t||!A.current&&oe.current===0)return;H.current=i-oe.current;const k=w-We.current;if(A.current=A.current||Math.abs(H.current)>Je&&Math.abs(k)<Je*2,A.current&&m.cancelable&&(m.preventDefault(),m.stopPropagation()),A.current){if(we&&H.current>0){I();return}if($e&&H.current<0){I();return}Math.abs(H.current)>=10&&(t.style.transform=`translate3d(${H.current-j*b}px, 0, 0)`,t.style.cursor="grabbing")}},s=i=>l(i.touches[0].clientX,i.touches[0].clientY,i),c=i=>{A.current&&l(i.clientX,i.clientY,i)};return t==null||t.addEventListener("mousemove",c),t==null||t.addEventListener("touchmove",s),()=>{t==null||t.removeEventListener("mousemove",c),t==null||t.removeEventListener("touchmove",s)}},[j,b,I,$e,we]),d.useEffect(()=>{He(!0),ge.current=setTimeout(()=>{if(D.current&&(D.current.style.transition="none"),b>C.current){X(1);const t=new Date($.setMonth($.getMonth()+1));ie(t),u&&typeof u=="function"&&u(g(t),g),C.current=1}else if(b<C.current){const t=new Date($.setMonth($.getMonth()-1));ie(t),u&&typeof u=="function"&&u(g(t),g),X(1),C.current=1}else C.current=b;He(!1)},200)},[b,$,u]),d.useLayoutEffect(()=>{if(!re||!Array.isArray(o))return;const t=Ze(o,_);o.length<t.length&&(r==null||r(t,g))},[re,o,r,_]),d.useEffect(()=>{let t;return me&&(t=setTimeout(()=>{if(De.current){const l=De.current.querySelector("ul"),s=l==null?void 0:l.querySelector(`[data-value="${L}"]`);s==null||s.scrollIntoView({block:"start"})}},200)),()=>{clearTimeout(t)}},[me,L]),d.useEffect(()=>()=>{ge.current&&clearTimeout(ge.current)},[]),d.useEffect(()=>{p&&ie((typeof p=="string"||typeof p=="number"?new Date(p):p)||new Date)},[p]),a.jsxs(yt,{ref:rt,"aria-label":"달력",role:"application",...tt,css:et,children:[M?a.jsxs(gt,{children:[a.jsx(Xe.default,{name:"ChevronLeftLine",size:"small",onClick:Le,disabled:we,"aria-label":`이전 달로 이동, 현재 ${E}`}),J&&a.jsxs(Ge,{ref:ae,clickable:!0,onClick:fe,"aria-label":E,...ne,children:[L,a.jsx(Ne.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:fe,"aria-label":`달 변경, 현재 ${E}`,startAdornment:a.jsx(_e.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Ge,{ref:ae,id:"date-picker-title",clickable:!1,"aria-label":E,...ne,children:L}),a.jsx(Xe.default,{name:"ChevronRightLine",size:"small",onClick:Ee,disabled:$e,"aria-label":`다음 달로 이동, 현재 ${E}`})]}):a.jsxs(a.Fragment,{children:[J&&a.jsxs(Be,{ref:ae,clickable:!0,onClick:fe,"aria-label":E,...ne,children:[L,a.jsx(Ne.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:fe,"aria-label":`달 변경, 현재 ${E}`,startAdornment:a.jsx(_e.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Be,{id:"date-picker-title",clickable:!1,...ne,children:L})]}),J&&a.jsx(ft.default,{id:"date-picker-month-menu",anchorRef:ae,ref:De,open:me,onClose:ot,onChange:at,value:L,placement:M?"bottom-center":"bottom-left",width:160,fitToAnchorWidth:!1,maxHeight:368,children:Array.from({length:130},(t,l)=>{const s=1970+l;return Array.from({length:12},(c,i)=>{const w=i+1,m=w<10?`0${w}`:w,k=new Date(s,i+1,0).getDate(),f=`${s}-${m}-${k}`,T=`${s}-${m}-01`;return G(f,h)||O(T,y)?null:a.jsx(dt.default,{value:`${s}. ${m}`,"aria-label":`${s}년 ${m}월 선택`,children:`${s}. ${m}`},`${s}-${m}`)})})}),a.jsxs(ut.default,{flexDirection:"column",role:"grid","aria-label":`${v}년 ${z}월 달력`,children:[Ce&&a.jsxs(Dt,{id:"date-picker-week-head",role:"row",edgeSpacing:he,children:[a.jsx("span",{role:"columnheader",children:"일"}),a.jsx("span",{role:"columnheader",children:"월"}),a.jsx("span",{role:"columnheader",children:"화"}),a.jsx("span",{role:"columnheader",children:"수"}),a.jsx("span",{role:"columnheader",children:"목"}),a.jsx("span",{role:"columnheader",children:"금"}),a.jsx("span",{role:"columnheader",children:"토"})]}),a.jsx(wt,{ref:Z,role:"presentation",children:a.jsxs($t,{role:"presentation",ref:D,onMouseDown:it,onMouseUp:I,onMouseLeave:I,onTouchStart:st,onTouchEnd:I,onTouchCancel:I,style:{transform:M?`translate3d(-${j*b}px, 0, 0)`:void 0,cursor:M?"grab":void 0,maxHeight:nt},children:[M&&Ye.map(({year:t,month:l,weeks:s},c)=>a.jsx(Ke,{role:"rowgroup",edgeSpacing:he,className:c===1?"week-body-current":"",children:s.map((i,w)=>a.jsx(Pe,{role:"row",children:i.map((m,k)=>{const f=`${t}-${l}-${V(m||0)}`,T=!m,W=R(f,new Date),ke=Array.isArray(B)?B.includes(f):B===f,ee=Array.isArray(N)?N.includes(f):N===f,U=!m||(Array.isArray(K)?K.includes(f):K===f)||O(f,y)||G(f,h),Se=P&&R(f,x),de=P&&R(f,Y),ct=P&&O(f,x)&&G(f,Y),Oe=pe(f,$),lt=Oe&&w===0&&m===1||Oe&&ee,qe=F==null?void 0:F(f);return a.jsxs(Ue,{as:"button",role:"gridcell",variant:Se?"start":de?"end":ct?"middle":void 0,onClick:be(f,U),today:Ae&&W,holiday:ke,tabIndex:lt?0:-1,"aria-rowindex":w+1,"aria-colindex":k+1,selected:ee,"aria-selected":ee,"aria-disabled":U,"aria-hidden":m===null,"data-date":f,onKeyDown:Ie(f,U),children:[a.jsx("div",{"aria-label":`${Qe(f)}`,children:a.jsx("span",{children:m})}),!T&&qe,!T&&xe&&!qe&&a.jsx(Ve,{})]},`${t}-${l}-week-row-${k}-${m?f:`${w}-${k}`}`)})},`${t}-${l}-week-row-${String(i)}`))},`week-body-${t}-${l}`)),!M&&a.jsx(Ke,{role:"rowgroup",edgeSpacing:he,children:Fe.map((t,l)=>a.jsx(Pe,{role:"row",children:t.map((s,c)=>{const i=`${v}-${z}-${V(s||0)}`,w=!s,m=R(i,new Date),k=Array.isArray(B)?B.includes(i):B===i,f=Array.isArray(N)?N.includes(i):N===i,T=!s||(Array.isArray(K)?K.includes(i):K===i)||O(i,y)||G(i,h),W=P&&R(i,x),ke=P&&R(i,Y),ee=P&&O(i,x)&&G(i,Y),U=pe(i,$),Se=U&&l===0&&s===1||U&&f,de=F==null?void 0:F(i);return a.jsxs(Ue,{as:"button",variant:W?"start":ke?"end":ee?"middle":void 0,role:"gridcell",onClick:be(i,T),today:Ae&&m,holiday:k,"aria-rowindex":l+1,"aria-colindex":c+1,selected:f,"aria-selected":f,"aria-disabled":T,"aria-hidden":s===null,tabIndex:Se?0:-1,"data-date":i,onKeyDown:Ie(i,T),children:[a.jsx("div",{"aria-label":`${Qe(i)}`,children:a.jsx("span",{children:s})}),!w&&de,!w&&xe&&!de&&a.jsx(Ve,{})]},`${v}-${z}-week-row-${t}-${s?i:`${l}-${c}`}`)})},`${v}-${z}-week-row-${String(t)}`))})]})})]}),n]})});function Me(e,n){let r=[];const u=new Date(e,n,1),o=new Date(e,n+1,0).getDate(),p=u.getDay();let h=Array.from({length:p}).fill(null);for(let y=1;y<=o;y+=1)h.push(y),(h.length===7||y===o)&&(r.push(h),h=[]);return r=r.map(y=>Array.from({length:7}).map((je,_)=>y[_]||null)),r}function q(e){return String(e+1).length===1?`0${e+1}`:e+1}function V(e){return String(e).length===1?`0${e}`:e}function g(e){if(Array.isArray(e))return e.map(n=>n instanceof Date?`${n.getFullYear()}-${q(n.getMonth())}-${V(n.getDate())}`:n);if(e instanceof Date)return`${e.getFullYear()}-${q(e.getMonth())}-${V(e.getDate())}`;if(typeof e=="number"){const n=new Date(e);return`${n.getFullYear()}-${q(n.getMonth())}-${V(n.getDate())}`}return e}function Qe(e){const[n,r,u]=e.split("-");return`${n}년 ${Number(r)}월 ${Number(u)}일`}function O(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u>p}function G(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u<p}function pe(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e),u=n instanceof Date?n:new Date(n);return`${r.getFullYear()}-${r.getMonth()}`==`${u.getFullYear()}-${u.getMonth()}`}function R(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u===p}function Ze(e,n){if(!e||!Array.isArray(e)||e.length===0)return[];const r=e.map(y=>y instanceof Date?y:y===null?new Date:new Date(y)),u=new Date(Math.min(...r.map(y=>y.getTime()))),o=new Date(Math.max(...r.map(y=>y.getTime()))),p=[],h=new Date(u);for(;h<=o;){if(Array.isArray(n)&&n.includes(h)){h.setDate(h.getDate()+1);continue}else if(n===h){h.setDate(h.getDate()+1);continue}p.push(`${h.getFullYear()}-${q(h.getMonth())}-${V(h.getDate())}`),h.setDate(h.getDate()+1)}return p}exports.default=bt;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as he, useState as X, useRef as
|
|
1
|
+
import { jsxs as R, jsx as f, Fragment as pe } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { forwardRef as he, useState as X, useRef as H, useCallback as ye, useLayoutEffect as Kt, useEffect as J } from "react";
|
|
3
3
|
import ge from "../Flexbox/Flexbox.es.js";
|
|
4
4
|
import qt from "../Icon/Icon.es.js";
|
|
5
5
|
import Ut from "../IconButton/IconButton.es.js";
|
|
@@ -301,7 +301,7 @@ const be = k.div`
|
|
|
301
301
|
period: ot = !1,
|
|
302
302
|
enableMonthSelect: C = !1,
|
|
303
303
|
showToday: Ht = !1,
|
|
304
|
-
edgeSpacing:
|
|
304
|
+
edgeSpacing: gt = 0,
|
|
305
305
|
renderEvent: z,
|
|
306
306
|
inlineCSS: ie,
|
|
307
307
|
monthProps: st,
|
|
@@ -309,30 +309,30 @@ const be = k.div`
|
|
|
309
309
|
}, se) {
|
|
310
310
|
const { spacing: Wt } = $e(), [w, at] = X(
|
|
311
311
|
(typeof d == "string" || typeof d == "number" ? new Date(d) : d) || /* @__PURE__ */ new Date()
|
|
312
|
-
), [$, tt] = X(() => Array.isArray(s) && s.length > 0 ? y(s[0]) : y(s)), [L, ct] = X(() => Array.isArray(s) && s.length > 1 ? y(s[s.length - 1]) : null), [M, Ft] = X(0), [b, K] = X(1), [Yt, zt] = X(!1), [
|
|
312
|
+
), [$, tt] = X(() => Array.isArray(s) && s.length > 0 ? y(s[0]) : y(s)), [L, ct] = X(() => Array.isArray(s) && s.length > 1 ? y(s[s.length - 1]) : null), [M, Ft] = X(0), [b, K] = X(1), [Yt, zt] = X(!1), [Dt, wt] = X(!1), et = H(null), g = H(null), lt = H(0), Lt = H(0), F = H(0), S = H(!1), rt = H(b), $t = H(), ut = H(null), bt = H(null), T = w.getFullYear(), ft = w.getMonth(), It = vt(T, ft), I = _(ft), q = y(s), U = y(Rt), P = y(B), xt = Q(w, m) || yt(w, m), kt = N(w, h) || yt(w, h), dt = new Date(T, ft - 1), mt = new Date(T, ft + 1), O = `${T}. ${I}`, E = `${T}년 ${I}월`, G = ot && !!$ && !!L, Ot = [
|
|
313
313
|
{
|
|
314
|
-
year:
|
|
315
|
-
month: _(
|
|
316
|
-
weeks: vt(
|
|
314
|
+
year: dt.getFullYear(),
|
|
315
|
+
month: _(dt.getMonth()),
|
|
316
|
+
weeks: vt(dt.getFullYear(), dt.getMonth())
|
|
317
317
|
},
|
|
318
318
|
{
|
|
319
|
-
year:
|
|
319
|
+
year: T,
|
|
320
320
|
month: I,
|
|
321
321
|
weeks: It
|
|
322
322
|
},
|
|
323
323
|
{
|
|
324
|
-
year:
|
|
325
|
-
month: _(
|
|
326
|
-
weeks: vt(
|
|
324
|
+
year: mt.getFullYear(),
|
|
325
|
+
month: _(mt.getMonth()),
|
|
326
|
+
weeks: vt(mt.getFullYear(), mt.getMonth())
|
|
327
327
|
}
|
|
328
328
|
], At = typeof z == "function", ae = Ot[1].weeks.length * (Se + (At ? 10 : 0) + Wt.content(2)) + Wt.content(2), Et = (e, c) => () => {
|
|
329
|
-
g.current && (g.current.style.transition = "none", g.current.style.cursor = "grabbing"),
|
|
329
|
+
g.current && (g.current.style.transition = "none", g.current.style.cursor = "grabbing"), lt.current = e, Lt.current = c;
|
|
330
330
|
}, j = ye(() => {
|
|
331
|
-
if (!
|
|
331
|
+
if (!S.current) return;
|
|
332
332
|
const e = M - F.current, c = Math.abs(M - e), o = M * 0.1;
|
|
333
|
-
g.current && (g.current.style.transform = `translate3d(-${M * b}px, 0, 0)`, g.current.style.cursor = "grab", g.current.style.transition = "transform 0.2s"),
|
|
333
|
+
g.current && (g.current.style.transform = `translate3d(-${M * b}px, 0, 0)`, g.current.style.cursor = "grab", g.current.style.transition = "transform 0.2s"), lt.current = 0, F.current = 0, S.current = !1, !(c <= o) && (M < e ? K((a) => a + 1) : M > e && K((a) => a - 1));
|
|
334
334
|
}, [M, b]), Mt = (e, c) => () => {
|
|
335
|
-
if (!(
|
|
335
|
+
if (!(S.current || b !== 1) && !c) {
|
|
336
336
|
if (!ot) {
|
|
337
337
|
r == null || r(e, y);
|
|
338
338
|
return;
|
|
@@ -358,19 +358,19 @@ const be = k.div`
|
|
|
358
358
|
$ && L && (tt(e), ct(null), r == null || r(e, y));
|
|
359
359
|
}
|
|
360
360
|
}, ce = (e) => {
|
|
361
|
-
A && (
|
|
361
|
+
A && (S.current = !0, Et(e.clientX, e.clientY)());
|
|
362
362
|
}, le = (e) => {
|
|
363
363
|
A && Et(e.touches[0].clientX, e.touches[0].clientY)();
|
|
364
364
|
}, jt = () => {
|
|
365
365
|
Yt || (g.current && (g.current.style.transition = "transform 0.2s"), K((e) => e - 1));
|
|
366
366
|
}, Xt = () => {
|
|
367
367
|
Yt || (g.current && (g.current.style.transition = "transform 0.2s"), K((e) => e + 1));
|
|
368
|
-
},
|
|
369
|
-
e.stopPropagation(),
|
|
370
|
-
}, ue = () =>
|
|
368
|
+
}, pt = (e) => {
|
|
369
|
+
e.stopPropagation(), wt((c) => !c);
|
|
370
|
+
}, ue = () => wt(!1), fe = (e) => {
|
|
371
371
|
if (!e) return;
|
|
372
372
|
const [c, o] = e.toString().split(".").map(Number);
|
|
373
|
-
at(new Date(c, o - 1)), l && typeof l == "function" && l(y(new Date(c, o - 1)), y),
|
|
373
|
+
at(new Date(c, o - 1)), l && typeof l == "function" && l(y(new Date(c, o - 1)), y), wt(!1);
|
|
374
374
|
}, Nt = (e, c) => (o) => {
|
|
375
375
|
const a = new Date(e);
|
|
376
376
|
let i = null;
|
|
@@ -398,8 +398,8 @@ const be = k.div`
|
|
|
398
398
|
return;
|
|
399
399
|
}
|
|
400
400
|
if (i && et.current) {
|
|
401
|
-
const D = a.getMonth(), p = a.getFullYear(), x = i.getMonth(), u = i.getFullYear(),
|
|
402
|
-
`[data-date="${
|
|
401
|
+
const D = a.getMonth(), p = a.getFullYear(), x = i.getMonth(), u = i.getFullYear(), v = y(i), Y = et.current.querySelector(
|
|
402
|
+
`[data-date="${v}"]`
|
|
403
403
|
);
|
|
404
404
|
if (Y) {
|
|
405
405
|
if (D !== x || p !== u) {
|
|
@@ -427,10 +427,10 @@ const be = k.div`
|
|
|
427
427
|
};
|
|
428
428
|
}, [A]), J(() => {
|
|
429
429
|
const e = g.current, c = (i, D, p) => {
|
|
430
|
-
if (!e) return;
|
|
431
|
-
F.current = i -
|
|
430
|
+
if (!e || !S.current && lt.current === 0) return;
|
|
431
|
+
F.current = i - lt.current;
|
|
432
432
|
const x = D - Lt.current;
|
|
433
|
-
if (
|
|
433
|
+
if (S.current = S.current || Math.abs(F.current) > te && Math.abs(x) < te * 2, S.current && p.cancelable && (p.preventDefault(), p.stopPropagation()), S.current) {
|
|
434
434
|
if (xt && F.current > 0) {
|
|
435
435
|
j();
|
|
436
436
|
return;
|
|
@@ -442,7 +442,7 @@ const be = k.div`
|
|
|
442
442
|
Math.abs(F.current) >= 10 && (e.style.transform = `translate3d(${F.current - M * b}px, 0, 0)`, e.style.cursor = "grabbing");
|
|
443
443
|
}
|
|
444
444
|
}, o = (i) => c(i.touches[0].clientX, i.touches[0].clientY, i), a = (i) => {
|
|
445
|
-
|
|
445
|
+
S.current && c(i.clientX, i.clientY, i);
|
|
446
446
|
};
|
|
447
447
|
return e == null || e.addEventListener("mousemove", a), e == null || e.addEventListener("touchmove", o), () => {
|
|
448
448
|
e == null || e.removeEventListener("mousemove", a), e == null || e.removeEventListener("touchmove", o);
|
|
@@ -466,7 +466,7 @@ const be = k.div`
|
|
|
466
466
|
s.length < e.length && (r == null || r(e, y));
|
|
467
467
|
}, [ot, s, r, B]), J(() => {
|
|
468
468
|
let e;
|
|
469
|
-
return
|
|
469
|
+
return Dt && (e = setTimeout(() => {
|
|
470
470
|
if (bt.current) {
|
|
471
471
|
const c = bt.current.querySelector("ul"), o = c == null ? void 0 : c.querySelector(`[data-value="${O}"]`);
|
|
472
472
|
o == null || o.scrollIntoView({
|
|
@@ -476,14 +476,14 @@ const be = k.div`
|
|
|
476
476
|
}, 200)), () => {
|
|
477
477
|
clearTimeout(e);
|
|
478
478
|
};
|
|
479
|
-
}, [
|
|
479
|
+
}, [Dt, O]), J(() => () => {
|
|
480
480
|
$t.current && clearTimeout($t.current);
|
|
481
481
|
}, []), J(() => {
|
|
482
482
|
d && at(
|
|
483
483
|
(typeof d == "string" || typeof d == "number" ? new Date(d) : d) || /* @__PURE__ */ new Date()
|
|
484
484
|
);
|
|
485
|
-
}, [d]), /* @__PURE__ */
|
|
486
|
-
A ? /* @__PURE__ */
|
|
485
|
+
}, [d]), /* @__PURE__ */ R(be, { ref: se, "aria-label": "달력", role: "application", ...oe, css: ie, children: [
|
|
486
|
+
A ? /* @__PURE__ */ R(xe, { children: [
|
|
487
487
|
/* @__PURE__ */ f(
|
|
488
488
|
Ut,
|
|
489
489
|
{
|
|
@@ -494,12 +494,12 @@ const be = k.div`
|
|
|
494
494
|
"aria-label": `이전 달로 이동, 현재 ${E}`
|
|
495
495
|
}
|
|
496
496
|
),
|
|
497
|
-
C && /* @__PURE__ */
|
|
497
|
+
C && /* @__PURE__ */ R(
|
|
498
498
|
Zt,
|
|
499
499
|
{
|
|
500
|
-
ref:
|
|
500
|
+
ref: ut,
|
|
501
501
|
clickable: !0,
|
|
502
|
-
onClick:
|
|
502
|
+
onClick: pt,
|
|
503
503
|
"aria-label": E,
|
|
504
504
|
...st,
|
|
505
505
|
children: [
|
|
@@ -512,7 +512,7 @@ const be = k.div`
|
|
|
512
512
|
size: "xSmall",
|
|
513
513
|
variant: "text",
|
|
514
514
|
menuId: "date-picker-month-menu",
|
|
515
|
-
onClick:
|
|
515
|
+
onClick: pt,
|
|
516
516
|
"aria-label": `달 변경, 현재 ${E}`,
|
|
517
517
|
startAdornment: /* @__PURE__ */ f(qt, { name: "ArrowDownFill", size: "xSmall" })
|
|
518
518
|
}
|
|
@@ -523,7 +523,7 @@ const be = k.div`
|
|
|
523
523
|
!C && /* @__PURE__ */ f(
|
|
524
524
|
Zt,
|
|
525
525
|
{
|
|
526
|
-
ref:
|
|
526
|
+
ref: ut,
|
|
527
527
|
id: "date-picker-title",
|
|
528
528
|
clickable: !1,
|
|
529
529
|
"aria-label": E,
|
|
@@ -541,13 +541,13 @@ const be = k.div`
|
|
|
541
541
|
"aria-label": `다음 달로 이동, 현재 ${E}`
|
|
542
542
|
}
|
|
543
543
|
)
|
|
544
|
-
] }) : /* @__PURE__ */
|
|
545
|
-
C && /* @__PURE__ */
|
|
544
|
+
] }) : /* @__PURE__ */ R(pe, { children: [
|
|
545
|
+
C && /* @__PURE__ */ R(
|
|
546
546
|
Gt,
|
|
547
547
|
{
|
|
548
|
-
ref:
|
|
548
|
+
ref: ut,
|
|
549
549
|
clickable: !0,
|
|
550
|
-
onClick:
|
|
550
|
+
onClick: pt,
|
|
551
551
|
"aria-label": E,
|
|
552
552
|
...st,
|
|
553
553
|
children: [
|
|
@@ -560,7 +560,7 @@ const be = k.div`
|
|
|
560
560
|
size: "xSmall",
|
|
561
561
|
variant: "text",
|
|
562
562
|
menuId: "date-picker-month-menu",
|
|
563
|
-
onClick:
|
|
563
|
+
onClick: pt,
|
|
564
564
|
"aria-label": `달 변경, 현재 ${E}`,
|
|
565
565
|
startAdornment: /* @__PURE__ */ f(qt, { name: "ArrowDownFill", size: "xSmall" })
|
|
566
566
|
}
|
|
@@ -574,9 +574,9 @@ const be = k.div`
|
|
|
574
574
|
De,
|
|
575
575
|
{
|
|
576
576
|
id: "date-picker-month-menu",
|
|
577
|
-
anchorRef:
|
|
577
|
+
anchorRef: ut,
|
|
578
578
|
ref: bt,
|
|
579
|
-
open:
|
|
579
|
+
open: Dt,
|
|
580
580
|
onClose: ue,
|
|
581
581
|
onChange: fe,
|
|
582
582
|
value: O,
|
|
@@ -587,8 +587,8 @@ const be = k.div`
|
|
|
587
587
|
children: Array.from({ length: 130 }, (e, c) => {
|
|
588
588
|
const o = 1970 + c;
|
|
589
589
|
return Array.from({ length: 12 }, (a, i) => {
|
|
590
|
-
const D = i + 1, p = D < 10 ? `0${D}` : D, x = new Date(o, i + 1, 0).getDate(), u = `${o}-${p}-${x}`,
|
|
591
|
-
return Q(u, m) || N(
|
|
590
|
+
const D = i + 1, p = D < 10 ? `0${D}` : D, x = new Date(o, i + 1, 0).getDate(), u = `${o}-${p}-${x}`, v = `${o}-${p}-01`;
|
|
591
|
+
return Q(u, m) || N(v, h) ? null : /* @__PURE__ */ f(
|
|
592
592
|
we,
|
|
593
593
|
{
|
|
594
594
|
value: `${o}. ${p}`,
|
|
@@ -601,14 +601,14 @@ const be = k.div`
|
|
|
601
601
|
})
|
|
602
602
|
}
|
|
603
603
|
),
|
|
604
|
-
/* @__PURE__ */
|
|
604
|
+
/* @__PURE__ */ R(
|
|
605
605
|
ge,
|
|
606
606
|
{
|
|
607
607
|
flexDirection: "column",
|
|
608
608
|
role: "grid",
|
|
609
|
-
"aria-label": `${
|
|
609
|
+
"aria-label": `${T}년 ${I}월 달력`,
|
|
610
610
|
children: [
|
|
611
|
-
ne && /* @__PURE__ */
|
|
611
|
+
ne && /* @__PURE__ */ R(ke, { id: "date-picker-week-head", role: "row", edgeSpacing: gt, children: [
|
|
612
612
|
/* @__PURE__ */ f("span", { role: "columnheader", children: "일" }),
|
|
613
613
|
/* @__PURE__ */ f("span", { role: "columnheader", children: "월" }),
|
|
614
614
|
/* @__PURE__ */ f("span", { role: "columnheader", children: "화" }),
|
|
@@ -617,7 +617,7 @@ const be = k.div`
|
|
|
617
617
|
/* @__PURE__ */ f("span", { role: "columnheader", children: "금" }),
|
|
618
618
|
/* @__PURE__ */ f("span", { role: "columnheader", children: "토" })
|
|
619
619
|
] }),
|
|
620
|
-
/* @__PURE__ */ f(Ae, { ref: et, role: "presentation", children: /* @__PURE__ */
|
|
620
|
+
/* @__PURE__ */ f(Ae, { ref: et, role: "presentation", children: /* @__PURE__ */ R(
|
|
621
621
|
Me,
|
|
622
622
|
{
|
|
623
623
|
role: "presentation",
|
|
@@ -639,20 +639,20 @@ const be = k.div`
|
|
|
639
639
|
Vt,
|
|
640
640
|
{
|
|
641
641
|
role: "rowgroup",
|
|
642
|
-
edgeSpacing:
|
|
642
|
+
edgeSpacing: gt,
|
|
643
643
|
className: a === 1 ? "week-body-current" : "",
|
|
644
644
|
children: o.map((i, D) => /* @__PURE__ */ f(
|
|
645
645
|
Jt,
|
|
646
646
|
{
|
|
647
647
|
role: "row",
|
|
648
648
|
children: i.map((p, x) => {
|
|
649
|
-
const u = `${e}-${c}-${Z(p || 0)}`,
|
|
650
|
-
return /* @__PURE__ */
|
|
649
|
+
const u = `${e}-${c}-${Z(p || 0)}`, v = !p, Y = W(u, /* @__PURE__ */ new Date()), St = Array.isArray(U) ? U.includes(u) : U === u, nt = Array.isArray(q) ? q.includes(u) : q === u, V = !p || (Array.isArray(P) ? P.includes(u) : P === u) || N(u, h) || Q(u, m), Tt = G && W(u, $), ht = G && W(u, L), de = G && N(u, $) && Q(u, L), _t = yt(u, w), me = _t && D === 0 && p === 1 || _t && nt, Bt = z == null ? void 0 : z(u);
|
|
650
|
+
return /* @__PURE__ */ R(
|
|
651
651
|
Qt,
|
|
652
652
|
{
|
|
653
653
|
as: "button",
|
|
654
654
|
role: "gridcell",
|
|
655
|
-
variant: Tt ? "start" :
|
|
655
|
+
variant: Tt ? "start" : ht ? "end" : de ? "middle" : void 0,
|
|
656
656
|
onClick: Mt(u, V),
|
|
657
657
|
today: Ht && Y,
|
|
658
658
|
holiday: St,
|
|
@@ -667,8 +667,8 @@ const be = k.div`
|
|
|
667
667
|
onKeyDown: Nt(u, V),
|
|
668
668
|
children: [
|
|
669
669
|
/* @__PURE__ */ f("div", { "aria-label": `${ee(u)}`, children: /* @__PURE__ */ f("span", { children: p }) }),
|
|
670
|
-
!
|
|
671
|
-
!
|
|
670
|
+
!v && Bt,
|
|
671
|
+
!v && At && !Bt && /* @__PURE__ */ f(Ct, {})
|
|
672
672
|
]
|
|
673
673
|
},
|
|
674
674
|
`${e}-${c}-week-row-${x}-${p ? u : `${D}-${x}`}`
|
|
@@ -681,41 +681,41 @@ const be = k.div`
|
|
|
681
681
|
`week-body-${e}-${c}`
|
|
682
682
|
)
|
|
683
683
|
),
|
|
684
|
-
!A && /* @__PURE__ */ f(Vt, { role: "rowgroup", edgeSpacing:
|
|
684
|
+
!A && /* @__PURE__ */ f(Vt, { role: "rowgroup", edgeSpacing: gt, children: It.map((e, c) => /* @__PURE__ */ f(
|
|
685
685
|
Jt,
|
|
686
686
|
{
|
|
687
687
|
role: "row",
|
|
688
688
|
children: e.map((o, a) => {
|
|
689
|
-
const i = `${
|
|
690
|
-
return /* @__PURE__ */
|
|
689
|
+
const i = `${T}-${I}-${Z(o || 0)}`, D = !o, p = W(i, /* @__PURE__ */ new Date()), x = Array.isArray(U) ? U.includes(i) : U === i, u = Array.isArray(q) ? q.includes(i) : q === i, v = !o || (Array.isArray(P) ? P.includes(i) : P === i) || N(i, h) || Q(i, m), Y = G && W(i, $), St = G && W(i, L), nt = G && N(i, $) && Q(i, L), V = yt(i, w), Tt = V && c === 0 && o === 1 || V && u, ht = z == null ? void 0 : z(i);
|
|
690
|
+
return /* @__PURE__ */ R(
|
|
691
691
|
Qt,
|
|
692
692
|
{
|
|
693
693
|
as: "button",
|
|
694
694
|
variant: Y ? "start" : St ? "end" : nt ? "middle" : void 0,
|
|
695
695
|
role: "gridcell",
|
|
696
|
-
onClick: Mt(i,
|
|
696
|
+
onClick: Mt(i, v),
|
|
697
697
|
today: Ht && p,
|
|
698
698
|
holiday: x,
|
|
699
699
|
"aria-rowindex": c + 1,
|
|
700
700
|
"aria-colindex": a + 1,
|
|
701
701
|
selected: u,
|
|
702
702
|
"aria-selected": u,
|
|
703
|
-
"aria-disabled":
|
|
703
|
+
"aria-disabled": v,
|
|
704
704
|
"aria-hidden": o === null,
|
|
705
705
|
tabIndex: Tt ? 0 : -1,
|
|
706
706
|
"data-date": i,
|
|
707
|
-
onKeyDown: Nt(i,
|
|
707
|
+
onKeyDown: Nt(i, v),
|
|
708
708
|
children: [
|
|
709
709
|
/* @__PURE__ */ f("div", { "aria-label": `${ee(i)}`, children: /* @__PURE__ */ f("span", { children: o }) }),
|
|
710
|
-
!D &&
|
|
711
|
-
!D && At && !
|
|
710
|
+
!D && ht,
|
|
711
|
+
!D && At && !ht && /* @__PURE__ */ f(Ct, {})
|
|
712
712
|
]
|
|
713
713
|
},
|
|
714
|
-
`${
|
|
714
|
+
`${T}-${I}-week-row-${e}-${o ? i : `${c}-${a}`}`
|
|
715
715
|
);
|
|
716
716
|
})
|
|
717
717
|
},
|
|
718
|
-
`${
|
|
718
|
+
`${T}-${I}-week-row-${String(e)}`
|
|
719
719
|
)) })
|
|
720
720
|
]
|
|
721
721
|
}
|
|
@@ -777,7 +777,7 @@ function Q(t, n) {
|
|
|
777
777
|
const d = s.getTime();
|
|
778
778
|
return l < d;
|
|
779
779
|
}
|
|
780
|
-
function
|
|
780
|
+
function yt(t, n) {
|
|
781
781
|
if (!t || !n)
|
|
782
782
|
return !1;
|
|
783
783
|
const r = t instanceof Date ? t : new Date(t), l = n instanceof Date ? n : new Date(n);
|
package/Tab/Tab.cjs
CHANGED
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
transition: all 0.2s ease-in-out;
|
|
16
16
|
transition-property: transform, width;
|
|
17
17
|
${({isChipped:o})=>o?{display:"none"}:{}}
|
|
18
|
-
`,S=3,
|
|
18
|
+
`,S=3,nt=i.forwardRef(function({value:l,scrollable:d=!1,disabled:_=!1,onChange:R,size:w="medium",inlineCSS:I,wrapperProps:m,children:E,...j},F){const s=i.useRef(null),f=i.useRef(),b=i.useRef(0),N=i.useRef(!0),x=i.useRef(!1),g=i.useRef(!1),u=i.useRef(!1),[H,O]=i.useState(!1),[D,P]=i.useState(0),[T,V]=i.useState(0),[L,K]=i.useState(0),$=_,W=i.Children.toArray(E).every(t=>i.isValidElement(t)&&i.Children.toArray(t.props.children).every(n=>i.isValidElement(n)&&!Array.isArray(n.props.children))),z=t=>n=>{d&&!x.current||(R(t,n.currentTarget),x.current=!1)},U=t=>{if(!s.current)return;const n=s.current.querySelectorAll('[role="tab"]:not([disabled])'),a=Array.from(n).findIndex(e=>e===document.activeElement);if(t.key==="ArrowLeft"){t.preventDefault();const e=a<=0?n.length-1:a-1,r=n[e];r&&!r.getAttribute("disabled")&&r.focus()}else if(t.key==="ArrowRight"){t.preventDefault();const e=a>=n.length-1?0:a+1,r=n[e];r&&!r.getAttribute("disabled")&&r.focus()}else if(t.key==="Home"){t.preventDefault();const e=n[0];e&&!e.getAttribute("disabled")&&e.focus()}else if(t.key==="End"){t.preventDefault();const e=n[n.length-1];e&&!e.getAttribute("disabled")&&e.focus()}else if(t.key===" "||t.key==="Enter"){t.preventDefault();const e=n[a];if(e&&!e.getAttribute("disabled")){const r=e.getAttribute("value");if(r){R(r,e);const c=s.current.querySelector(".indicator");c&&(c.style.width=`${e.clientWidth}px`,c.style.transform=`translate3d(${e.offsetLeft}px, 0px, 0px)`,g.current?c.style.transition="all 0.2s ease-in-out":(c.style.transition="unset",g.current=!0))}}}},Y=(t,n)=>{P(t),V(n),K(b.current)},X=(t,n)=>{if(!u.current)return;u.current=!1;const a=D-t,e=T-n;t&&Math.abs(a)<S&&Math.abs(e)<S*2&&(x.current=!0),f.current&&(cancelAnimationFrame(f.current),f.current=void 0)},G=t=>{d&&(u.current=!0,Y(t.clientX,t.clientY))},J=t=>{d&&Y(t.touches[0].clientX,t.touches[0].clientY)},k=t=>X(t.changedTouches[0].clientX,t.changedTouches[0].clientY),q=t=>X(t.clientX,t.clientY);return i.useEffect(()=>{const t=()=>{var n;if(s.current){const a=s.current.querySelector(".indicator"),e=(n=s.current)==null?void 0:n.querySelectorAll('[role="tab"][data-selected="true"]')[0];if(e&&a&&(a.style.width=`${e.clientWidth}px`,a.style.transform=`translate3d(${e.offsetLeft}px, 0px, 0px)`,g.current?a.style.transition="all 0.2s ease-in-out":(a.style.transition="unset",g.current=!0),O(e.getAttribute("data-disabled")==="true")),e&&d){const r=e.offsetLeft,c=e.offsetLeft+e.clientWidth,p=b.current,y=b.current+s.current.clientWidth;if(r<p||c>y){const v=Math.min(r,Math.max(s.current.scrollWidth-s.current.clientWidth,s.current.scrollWidth-y));s.current.style.transition="all 0.2s ease-in-out",s.current.style.transform=`translate3d(-${v}px, 0px, 0px)`,b.current=v}}}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[d,l,w]),i.useEffect(()=>{const t=s.current,n=(r,c,p)=>{if(!s.current)return;const y=D-r,v=T-c;if(u.current=u.current||Math.abs(y)>S&&Math.abs(v)<S*2,u.current&&p.cancelable&&(p.preventDefault(),p.stopPropagation()),u.current){let h=L+y;const C=s.current.scrollWidth-s.current.clientWidth;h<0?h=0:h>C&&(h=C),s.current&&(f.current&&cancelAnimationFrame(f.current),f.current=requestAnimationFrame(()=>{s.current&&(s.current.style.transition="unset",s.current.style.transform=`translate3d(-${h}px, 0px, 0px)`,b.current=h,N.current=!1)}))}},a=r=>{u.current&&n(r.clientX,r.clientY,r)},e=r=>{n(r.touches[0].clientX,r.touches[0].clientY,r)};return t==null||t.addEventListener("mousemove",a),t==null||t.addEventListener("touchmove",e),()=>{t==null||t.removeEventListener("mousemove",a),t==null||t.removeEventListener("touchmove",e)}},[D,T,L]),A.jsx(B,{className:"tab-wrapper",ref:F,scrollable:d,...m,css:m==null?void 0:m.inlineCSS,children:A.jsxs(tt,{className:"tab-list",role:"tablist",ref:s,isChipped:W,css:I,...j,onMouseDown:G,onMouseUp:q,onMouseLeave:q,onTouchStart:J,onTouchEnd:k,onTouchCancel:k,children:[i.Children.map(E,(t,n)=>{var r,c;if(!i.isValidElement(t))return null;const a=l===t.props.value,e=$||((r=t.props)==null?void 0:r.disabled);return i.cloneElement(t,{...t.props,className:`tab-block-${n}`,selected:a,"aria-selected":a,tabIndex:a?0:-1,onClick:(c=t.props)!=null&&c.disabled?void 0:z(t.props.value),onKeyDown:U,disabled:e,size:w})}),A.jsx(et,{className:"indicator",disabled:$||H,isChipped:W})]})})});exports.default=nt;
|
package/Tab/Tab.es.js
CHANGED
|
@@ -26,7 +26,7 @@ const st = L.div`
|
|
|
26
26
|
} : {}}
|
|
27
27
|
`, S = 3, ut = rt(function({
|
|
28
28
|
value: u,
|
|
29
|
-
scrollable:
|
|
29
|
+
scrollable: d = !1,
|
|
30
30
|
disabled: j = !1,
|
|
31
31
|
onChange: E,
|
|
32
32
|
size: $ = "medium",
|
|
@@ -35,10 +35,10 @@ const st = L.div`
|
|
|
35
35
|
children: R,
|
|
36
36
|
...O
|
|
37
37
|
}, P) {
|
|
38
|
-
const s = l(null),
|
|
38
|
+
const s = l(null), f = l(), p = l(0), z = l(!0), D = l(!1), g = l(!1), c = l(!1), [U, V] = x(!1), [T, _] = x(0), [A, G] = x(0), [W, J] = x(0), Y = j, X = w.toArray(R).every((t) => M(t) && w.toArray(t.props.children).every(
|
|
39
39
|
(r) => M(r) && !Array.isArray(r.props.children)
|
|
40
40
|
)), Q = (t) => (r) => {
|
|
41
|
-
D.current
|
|
41
|
+
d && !D.current || (E(t, r.currentTarget), D.current = !1);
|
|
42
42
|
}, Z = (t) => {
|
|
43
43
|
if (!s.current) return;
|
|
44
44
|
const r = s.current.querySelectorAll(
|
|
@@ -78,11 +78,11 @@ const st = L.div`
|
|
|
78
78
|
if (!c.current) return;
|
|
79
79
|
c.current = !1;
|
|
80
80
|
const i = T - t, e = A - r;
|
|
81
|
-
t && Math.abs(i) < S && Math.abs(e) < S * 2 && (D.current = !0),
|
|
81
|
+
t && Math.abs(i) < S && Math.abs(e) < S * 2 && (D.current = !0), f.current && (cancelAnimationFrame(f.current), f.current = void 0);
|
|
82
82
|
}, B = (t) => {
|
|
83
|
-
|
|
83
|
+
d && (c.current = !0, k(t.clientX, t.clientY));
|
|
84
84
|
}, tt = (t) => {
|
|
85
|
-
|
|
85
|
+
d && k(t.touches[0].clientX, t.touches[0].clientY);
|
|
86
86
|
}, C = (t) => I(t.changedTouches[0].clientX, t.changedTouches[0].clientY), q = (t) => I(t.clientX, t.clientY);
|
|
87
87
|
return H(() => {
|
|
88
88
|
const t = () => {
|
|
@@ -91,7 +91,7 @@ const st = L.div`
|
|
|
91
91
|
const i = s.current.querySelector(".indicator"), e = (r = s.current) == null ? void 0 : r.querySelectorAll(
|
|
92
92
|
'[role="tab"][data-selected="true"]'
|
|
93
93
|
)[0];
|
|
94
|
-
if (e && i && (i.style.width = `${e.clientWidth}px`, i.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, g.current ? i.style.transition = "all 0.2s ease-in-out" : (i.style.transition = "unset", g.current = !0), V(e.getAttribute("data-disabled") === "true")), e &&
|
|
94
|
+
if (e && i && (i.style.width = `${e.clientWidth}px`, i.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, g.current ? i.style.transition = "all 0.2s ease-in-out" : (i.style.transition = "unset", g.current = !0), V(e.getAttribute("data-disabled") === "true")), e && d) {
|
|
95
95
|
const n = e.offsetLeft, a = e.offsetLeft + e.clientWidth, b = p.current, y = p.current + s.current.clientWidth;
|
|
96
96
|
if (n < b || a > y) {
|
|
97
97
|
const v = Math.min(
|
|
@@ -109,15 +109,15 @@ const st = L.div`
|
|
|
109
109
|
return t(), window.addEventListener("resize", t), () => {
|
|
110
110
|
window.removeEventListener("resize", t);
|
|
111
111
|
};
|
|
112
|
-
}, [
|
|
112
|
+
}, [d, u, $]), H(() => {
|
|
113
113
|
const t = s.current, r = (n, a, b) => {
|
|
114
114
|
if (!s.current) return;
|
|
115
115
|
const y = T - n, v = A - a;
|
|
116
116
|
if (c.current = c.current || Math.abs(y) > S && Math.abs(v) < S * 2, c.current && b.cancelable && (b.preventDefault(), b.stopPropagation()), c.current) {
|
|
117
|
-
let
|
|
117
|
+
let h = W + y;
|
|
118
118
|
const F = s.current.scrollWidth - s.current.clientWidth;
|
|
119
|
-
|
|
120
|
-
s.current && (s.current.style.transition = "unset", s.current.style.transform = `translate3d(-${
|
|
119
|
+
h < 0 ? h = 0 : h > F && (h = F), s.current && (f.current && cancelAnimationFrame(f.current), f.current = requestAnimationFrame(() => {
|
|
120
|
+
s.current && (s.current.style.transition = "unset", s.current.style.transform = `translate3d(-${h}px, 0px, 0px)`, p.current = h, z.current = !1);
|
|
121
121
|
}));
|
|
122
122
|
}
|
|
123
123
|
}, i = (n) => {
|
|
@@ -133,7 +133,7 @@ const st = L.div`
|
|
|
133
133
|
{
|
|
134
134
|
className: "tab-wrapper",
|
|
135
135
|
ref: P,
|
|
136
|
-
scrollable:
|
|
136
|
+
scrollable: d,
|
|
137
137
|
...m,
|
|
138
138
|
css: m == null ? void 0 : m.inlineCSS,
|
|
139
139
|
children: /* @__PURE__ */ et(
|