zaman
Version:
React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.
304 lines (298 loc) • 34.6 kB
JavaScript
import e,{useRef as t,useEffect as n,useMemo as r,useState as o,forwardRef as a}from"react";import{createPortal as i}from"react-dom";import s from"@emotion/styled";import{keyframes as l,ThemeProvider as c}from"@emotion/react";var u="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},d=NaN,m="[object Symbol]",h=/^\s+|\s+$/g,f=/^[-+]0x[0-9a-f]+$/i,p=/^0b[01]+$/i,y=/^0o[0-7]+$/i,g=parseInt,v="object"==typeof u&&u&&u.Object===Object&&u,x="object"==typeof self&&self&&self.Object===Object&&self,b=v||x||Function("return this")(),$=Object.prototype.toString,w=Math.max,M=Math.min,k=function(){return b.Date.now()};function D(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function E(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&$.call(e)==m}(e))return d;if(D(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=D(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(h,"");var n=p.test(e);return n||y.test(e)?g(e.slice(2),n?2:8):f.test(e)?d:+e}var Y=function(e,t,n){var r,o,a,i,s,l,c=0,u=!1,d=!1,m=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(t){var n=r,a=o;return r=o=void 0,c=t,i=e.apply(a,n)}function f(e){var n=e-l;return void 0===l||n>=t||n<0||d&&e-c>=a}function p(){var e=k();if(f(e))return y(e);s=setTimeout(p,function(e){var n=t-(e-l);return d?M(n,a-(e-c)):n}(e))}function y(e){return s=void 0,m&&r?h(e):(r=o=void 0,i)}function g(){var e=k(),n=f(e);if(r=arguments,o=this,l=e,n){if(void 0===s)return function(e){return c=e,s=setTimeout(p,t),u?h(e):i}(l);if(d)return s=setTimeout(p,t),h(l)}return void 0===s&&(s=setTimeout(p,t)),i}return t=E(t)||0,D(n)&&(u=!!n.leading,a=(d="maxWait"in n)?w(E(n.maxWait)||0,t):a,m="trailing"in n?!!n.trailing:m),g.cancel=function(){void 0!==s&&clearTimeout(s),c=0,r=l=o=s=void 0},g.flush=function(){return void 0===s?i:y(k())},g};const _=320,C="cubic-bezier(0.4, 0, 0.2, 1)",S="#0D59F2",T=l`
from {
visibility: hidden;
opacity: 0;
transform: translateY(-4px);
}
to {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
`,O=l`
from {
opacity: 0;
}
to {
opacity: 1;
}
`,L=s.div`
position: absolute;
animation: ${T} 0.3s ${C} alternate;
`,N=r=>{const{children:o,destinationRef:a,position:s}=r,l=t(null),c=()=>{var e;let t=0;if(null!=a&&null!==l){const n=l.current;if(null===n)return;const{top:r,bottom:o,right:i,left:c,width:u}=null===(e=null==a?void 0:a.current)||void 0===e?void 0:e.getBoundingClientRect(),{height:d,width:m}=null==n?void 0:n.getBoundingClientRect();t=window.innerHeight-o>d?o+window.scrollY:r+window.scrollY-d-8,n.style.top=`${t+4}px`;({right:()=>{n.style.right=`${Math.abs(document.body.clientWidth-i)+16}px`},left:()=>{n.style.left=`${c}px`},center:()=>{const e=m>u?0:Math.abs(m-u)/2+16;n.style.right=`${Math.abs(document.body.clientWidth-i)+e}px`}})[s]()}};return n((()=>(c(),window.addEventListener("resize",Y(c,500)),()=>{window.removeEventListener("resize",c)})),[a]),e.createElement(e.Fragment,null,i(e.createElement(L,{ref:l},o),document.body))},I=s.div`
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 10;
.rdp__overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -10;
background-color: rgba(86, 86, 86, 0.4);
}
`,H=t=>{const{open:n,toggleOpen:r,children:o}=t;return!1===n?null:e.createElement(e.Fragment,null,i(e.createElement(I,{className:"rdp__modal"},o,e.createElement("div",{"data-testid":"overlay",className:"rdp__overlay",onClick:r})),document.body))},j=t=>{const{position:n="right"}=t;if(!t.showCalendar)return null;const{matches:r}=window.matchMedia("(min-width: 640px)");return r?e.createElement(N,{destinationRef:t.destinationRef,position:n},t.children):e.createElement(H,{toggleOpen:t.toggleOpen,open:t.showCalendar},t.children)},B={thin:{wrapper:0,calendarItem:0},x1:{wrapper:8,calendarItem:4},x2:{wrapper:16,calendarItem:8},x3:{wrapper:24,calendarItem:16},x4:{wrapper:24,calendarItem:20}},F=s.div`
overflow: hidden;
position: relative;
width: ${_}px;
height: ${372}px;
border: 1px solid ${e=>e.theme.colors.gray[40]};
background-color: #fff;
border-radius: ${e=>B[e.theme.round].wrapper}px;
`,A=s.div`
display: flex;
position: absolute;
overflow: hidden;
right: ${e=>"rtl"===e.theme.direction?"8px":"unset"};
left: ${e=>"rtl"!==e.theme.direction?"8px":"unset"};
`,W=s.div`
will-change: transform;
display: flex;
flex-direction: column;
width: ${_}px;
gap: 4px;
`,z=s.div`
display: flex;
gap: 4px;
`,P=s.div`
display: flex;
justify-content: center;
align-items: center;
margin-top: 12px;
margin-bottom: 8px;
height: 24px;
gap: 4px;
`,R=s.button`
cursor: pointer;
outline: none;
border: none;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
transition: background-color 0.2s ease-in;
color: ${e=>e.theme.colors.primary[50]};
background-color: transparent;
border-radius: ${e=>B[e.theme.round].calendarItem}px;
&:hover,
&:focus {
background-color: ${e=>e.theme.colors.primary[90]};
}
`,X={localeDefault:"en",setLocale(e){null!=e&&(this.localeDefault=e)},get locale(){return this.localeDefault}},V=()=>{if(""!==document.dir)return"rtl"===document.dir;const{body:e}=document;return"rtl"===getComputedStyle(e).direction},U=e=>{if("test"===process.env.NODE_ENV)return e;const{locale:t}=X;return Number(e).toLocaleString(t,{useGrouping:!1})},J=()=>e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-chevron-right",style:{transform:V()?"unset":"rotate(180deg)"}},e.createElement("polyline",{points:"9 18 15 12 9 6"})),Z=()=>e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-chevron-left",style:{transform:V()?"unset":"rotate(180deg)"}},e.createElement("polyline",{points:"15 18 9 12 15 6"})),q=s.div`
display: flex;
justify-content: space-between;
align-items: center;
height: 56px;
padding-right: 8px;
padding-left: 8px;
background-color: ${e=>e.theme.colors.primary[95]};
border-bottom: 2px solid ${e=>e.theme.colors.primary[85]};
`,G=s.button`
will-change: auto;
min-width: 100px;
outline: none;
border: 0;
font-family: inherit;
background-color: transparent;
cursor: pointer;
color: ${e=>e.theme.colors.primary[50]};
padding: 8px 16px;
font-weight: 500;
transition: background-color 0.2s ease-in;
border-radius: ${e=>B[e.theme.round].calendarItem}px;
&:hover,
&:focus {
background-color: ${e=>e.theme.colors.primary[90]};
}
`,Q=s.div`
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
width: 40px;
color: #8c8c8c;
`,K=t=>e.createElement(q,{className:"zm-Header"},e.createElement(R,{"aria-label":"Previous month",onClick:t.onPrevClick,className:"zm-IconPrevButton",tabIndex:0},e.createElement(J,null)),e.createElement(G,{className:"zm-MonthYearButton",role:"presentation",onClick:t.onClickOnTitle,"aria-label":"calendar view is open, switch to year and month view",tabIndex:0},t.monthName),e.createElement(R,{"aria-label":"Next month",onClick:t.onNextClick,className:"zm-IconNextButton",tabIndex:0},e.createElement(Z,null)));var ee={};({get exports(){return ee},set exports(e){ee=e}}).exports=function(){var e=1e3,t=6e4,n=36e5,r="millisecond",o="second",a="minute",i="hour",s="day",l="week",c="month",u="quarter",d="year",m="date",h="Invalid Date",f=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,p=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,y={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var t=["th","st","nd","rd"],n=e%100;return"["+e+(t[(n-20)%10]||t[n]||t[0])+"]"}},g=function(e,t,n){var r=String(e);return!r||r.length>=t?e:""+Array(t+1-r.length).join(n)+e},v={s:g,z:function(e){var t=-e.utcOffset(),n=Math.abs(t),r=Math.floor(n/60),o=n%60;return(t<=0?"+":"-")+g(r,2,"0")+":"+g(o,2,"0")},m:function e(t,n){if(t.date()<n.date())return-e(n,t);var r=12*(n.year()-t.year())+(n.month()-t.month()),o=t.clone().add(r,c),a=n-o<0,i=t.clone().add(r+(a?-1:1),c);return+(-(r+(n-o)/(a?o-i:i-o))||0)},a:function(e){return e<0?Math.ceil(e)||0:Math.floor(e)},p:function(e){return{M:c,y:d,w:l,d:s,D:m,h:i,m:a,s:o,ms:r,Q:u}[e]||String(e||"").toLowerCase().replace(/s$/,"")},u:function(e){return void 0===e}},x="en",b={};b[x]=y;var $=function(e){return e instanceof D},w=function e(t,n,r){var o;if(!t)return x;if("string"==typeof t){var a=t.toLowerCase();b[a]&&(o=a),n&&(b[a]=n,o=a);var i=t.split("-");if(!o&&i.length>1)return e(i[0])}else{var s=t.name;b[s]=t,o=s}return!r&&o&&(x=o),o||!r&&x},M=function(e,t){if($(e))return e.clone();var n="object"==typeof t?t:{};return n.date=e,n.args=arguments,new D(n)},k=v;k.l=w,k.i=$,k.w=function(e,t){return M(e,{locale:t.$L,utc:t.$u,x:t.$x,$offset:t.$offset})};var D=function(){function y(e){this.$L=w(e.locale,null,!0),this.parse(e)}var g=y.prototype;return g.parse=function(e){this.$d=function(e){var t=e.date,n=e.utc;if(null===t)return new Date(NaN);if(k.u(t))return new Date;if(t instanceof Date)return new Date(t);if("string"==typeof t&&!/Z$/i.test(t)){var r=t.match(f);if(r){var o=r[2]-1||0,a=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],o,r[3]||1,r[4]||0,r[5]||0,r[6]||0,a)):new Date(r[1],o,r[3]||1,r[4]||0,r[5]||0,r[6]||0,a)}}return new Date(t)}(e),this.$x=e.x||{},this.init()},g.init=function(){var e=this.$d;this.$y=e.getFullYear(),this.$M=e.getMonth(),this.$D=e.getDate(),this.$W=e.getDay(),this.$H=e.getHours(),this.$m=e.getMinutes(),this.$s=e.getSeconds(),this.$ms=e.getMilliseconds()},g.$utils=function(){return k},g.isValid=function(){return!(this.$d.toString()===h)},g.isSame=function(e,t){var n=M(e);return this.startOf(t)<=n&&n<=this.endOf(t)},g.isAfter=function(e,t){return M(e)<this.startOf(t)},g.isBefore=function(e,t){return this.endOf(t)<M(e)},g.$g=function(e,t,n){return k.u(e)?this[t]:this.set(n,e)},g.unix=function(){return Math.floor(this.valueOf()/1e3)},g.valueOf=function(){return this.$d.getTime()},g.startOf=function(e,t){var n=this,r=!!k.u(t)||t,u=k.p(e),h=function(e,t){var o=k.w(n.$u?Date.UTC(n.$y,t,e):new Date(n.$y,t,e),n);return r?o:o.endOf(s)},f=function(e,t){return k.w(n.toDate()[e].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(t)),n)},p=this.$W,y=this.$M,g=this.$D,v="set"+(this.$u?"UTC":"");switch(u){case d:return r?h(1,0):h(31,11);case c:return r?h(1,y):h(0,y+1);case l:var x=this.$locale().weekStart||0,b=(p<x?p+7:p)-x;return h(r?g-b:g+(6-b),y);case s:case m:return f(v+"Hours",0);case i:return f(v+"Minutes",1);case a:return f(v+"Seconds",2);case o:return f(v+"Milliseconds",3);default:return this.clone()}},g.endOf=function(e){return this.startOf(e,!1)},g.$set=function(e,t){var n,l=k.p(e),u="set"+(this.$u?"UTC":""),h=(n={},n[s]=u+"Date",n[m]=u+"Date",n[c]=u+"Month",n[d]=u+"FullYear",n[i]=u+"Hours",n[a]=u+"Minutes",n[o]=u+"Seconds",n[r]=u+"Milliseconds",n)[l],f=l===s?this.$D+(t-this.$W):t;if(l===c||l===d){var p=this.clone().set(m,1);p.$d[h](f),p.init(),this.$d=p.set(m,Math.min(this.$D,p.daysInMonth())).$d}else h&&this.$d[h](f);return this.init(),this},g.set=function(e,t){return this.clone().$set(e,t)},g.get=function(e){return this[k.p(e)]()},g.add=function(r,u){var m,h=this;r=Number(r);var f=k.p(u),p=function(e){var t=M(h);return k.w(t.date(t.date()+Math.round(e*r)),h)};if(f===c)return this.set(c,this.$M+r);if(f===d)return this.set(d,this.$y+r);if(f===s)return p(1);if(f===l)return p(7);var y=(m={},m[a]=t,m[i]=n,m[o]=e,m)[f]||1,g=this.$d.getTime()+r*y;return k.w(g,this)},g.subtract=function(e,t){return this.add(-1*e,t)},g.format=function(e){var t=this,n=this.$locale();if(!this.isValid())return n.invalidDate||h;var r=e||"YYYY-MM-DDTHH:mm:ssZ",o=k.z(this),a=this.$H,i=this.$m,s=this.$M,l=n.weekdays,c=n.months,u=function(e,n,o,a){return e&&(e[n]||e(t,r))||o[n].slice(0,a)},d=function(e){return k.s(a%12||12,e,"0")},m=n.meridiem||function(e,t,n){var r=e<12?"AM":"PM";return n?r.toLowerCase():r},f={YY:String(this.$y).slice(-2),YYYY:this.$y,M:s+1,MM:k.s(s+1,2,"0"),MMM:u(n.monthsShort,s,c,3),MMMM:u(c,s),D:this.$D,DD:k.s(this.$D,2,"0"),d:String(this.$W),dd:u(n.weekdaysMin,this.$W,l,2),ddd:u(n.weekdaysShort,this.$W,l,3),dddd:l[this.$W],H:String(a),HH:k.s(a,2,"0"),h:d(1),hh:d(2),a:m(a,i,!0),A:m(a,i,!1),m:String(i),mm:k.s(i,2,"0"),s:String(this.$s),ss:k.s(this.$s,2,"0"),SSS:k.s(this.$ms,3,"0"),Z:o};return r.replace(p,(function(e,t){return t||f[e]||o.replace(":","")}))},g.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},g.diff=function(r,m,h){var f,p=k.p(m),y=M(r),g=(y.utcOffset()-this.utcOffset())*t,v=this-y,x=k.m(this,y);return x=(f={},f[d]=x/12,f[c]=x,f[u]=x/3,f[l]=(v-g)/6048e5,f[s]=(v-g)/864e5,f[i]=v/n,f[a]=v/t,f[o]=v/e,f)[p]||v,h?x:k.a(x)},g.daysInMonth=function(){return this.endOf(c).$D},g.$locale=function(){return b[this.$L]},g.locale=function(e,t){if(!e)return this.$L;var n=this.clone(),r=w(e,t,!0);return r&&(n.$L=r),n},g.clone=function(){return k.w(this.$d,this)},g.toDate=function(){return new Date(this.valueOf())},g.toJSON=function(){return this.isValid()?this.toISOString():null},g.toISOString=function(){return this.$d.toISOString()},g.toString=function(){return this.$d.toUTCString()},y}(),E=D.prototype;return M.prototype=E,[["$ms",r],["$s",o],["$m",a],["$H",i],["$W",s],["$M",c],["$y",d],["$D",m]].forEach((function(e){E[e[1]]=function(t){return this.$g(t,e[0],e[1])}})),M.extend=function(e,t){return e.$i||(e(t,D,M),e.$i=!0),M},M.locale=w,M.isDayjs=$,M.unix=function(e){return M(1e3*e)},M.en=b[x],M.Ls=b,M.p={},M}();var te=ee,ne={};({get exports(){return ne},set exports(e){ne=e}}).exports=function(e){function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e),r={name:"fa",weekdays:"یکشنبه_دوشنبه_سهشنبه_چهارشنبه_پنجشنبه_جمعه_شنبه".split("_"),weekdaysShort:"یک_دو_سه_چه_پن_جم_شن".split("_"),weekdaysMin:"ی_د_س_چ_پ_ج_ش".split("_"),weekStart:6,months:"فروردین_اردیبهشت_خرداد_تیر_مرداد_شهریور_مهر_آبان_آذر_دی_بهمن_اسفند".split("_"),monthsShort:"فرو_ارد_خرد_تیر_مرد_شهر_مهر_آبا_آذر_دی_بهم_اسف".split("_"),ordinal:function(e){return e},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd, D MMMM YYYY HH:mm"},relativeTime:{future:"در %s",past:"%s قبل",s:"چند ثانیه",m:"یک دقیقه",mm:"%d دقیقه",h:"یک ساعت",hh:"%d ساعت",d:"یک روز",dd:"%d روز",M:"یک ماه",MM:"%d ماه",y:"یک سال",yy:"%d سال"}};return n.default.locale(r,null,!0),r}(ee);var re={};({get exports(){return re},set exports(e){re=e}}).exports=function(e,t){t.prototype.weekday=function(e){var t=this.$locale().weekStart||0,n=this.$W,r=(n<t?n+7:n)-t;return this.$utils().u(e)?r:this.subtract(r,"day").add(e,"day")}};var oe,ae=re,ie={};({get exports(){return ie},set exports(e){ie=e}}).exports=(oe={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},function(e,t,n){var r=t.prototype,o=r.format;n.en.formats=oe,r.format=function(e){void 0===e&&(e="YYYY-MM-DDTHH:mm:ssZ");var t=this.$locale().formats,n=function(e,t){return e.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(e,n,r){var o=r&&r.toUpperCase();return n||t[r]||oe[r]||t[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,n){return t||n.slice(1)}))}))}(e,void 0===t?{}:t);return o.call(this,n)}});var se=ie;const le=(e,t,n)=>{const{locale:r}=X,o=Object.assign(Object.assign({},t),null!=n&&{numberingSystem:n});return new Date(e).toLocaleString(r,o)},ce=(e,t)=>le(e,{day:"numeric"},t),ue=(e,t)=>le(e,{year:"numeric"},t),de=(e,t)=>le(e,{month:"2-digit"},t);var me={};({get exports(){return me},set exports(e){me=e}}).exports=function(e,t,n){t.prototype.isBetween=function(e,t,r,o){var a=n(e),i=n(t),s="("===(o=o||"()")[0],l=")"===o[1];return(s?this.isAfter(a,r):!this.isBefore(a,r))&&(l?this.isBefore(i,r):!this.isAfter(i,r))||(s?this.isBefore(a,r):!this.isAfter(a,r))&&(l?this.isAfter(i,r):!this.isBefore(i,r))}};var he=me;te.extend(he);const fe=(e,t)=>de(e)===de(t),pe=(e,t)=>void 0!==e&&te(e).isSame(t,"day"),ye=(e,t,n)=>null!==t&&null!==n&&te(e).isBetween(te(t),te(n)),ge={MMMM:(e,t)=>le(e,{month:"short"},t),MM:de,M:de,YYYY:ue,YY:(e,t)=>le(e,{year:"2-digit"},t),DD:ce,D:ce},ve=/\/|\s|-/,xe=(e,t,n)=>{try{(e=>{const t=e.trimStart().trimEnd().split(ve);if(""===e||""===e.trim())throw new Error("format is empty");t.forEach((e=>{if(!(e in ge))throw new Error(`format is not valid, format passed is: ${e}`)}))})(t);const r=t.trimStart().trimEnd().split(ve),o=t.match(ve),a=null!==o?o[0]:"";return r.map((t=>ge[t](e,n))).join(a)}catch(e){console.error(e)}return""};te.extend(ae),te.extend(se);const be=e=>{const{locale:t}=X;te.locale(t);const n=void 0===e?new Date:te(e).toDate(),r=(e=>parseInt(le(e,{day:"numeric"},"latn"),10))(new Date(n)),o=te(new Date(n)).subtract(r-1,"days"),a=o.weekday(),i=te(o).subtract(a,"days"),s=o.add(15,"days"),l=[];let c=te(i.format());for(let e=0;e<=5;e++){const e=[];for(let t=0;t<7;t++){const t=new Date(c.format());e.push({date:t,disabled:!fe(o.toDate(),t)}),c=c.add(1,"day")}l.push(e)}return{id:Date.now(),monthName:xe(new Date(n),"MMMM YYYY"),middleOfMonth:s.toDate(),weeks:l}},$e=()=>V()?_:-320,we=s.div`
color: inherit;
`,Me=s.button`
position: relative;
outline: none;
background-color: transparent;
display: flex;
font-family: inherit;
align-items: center;
justify-content: center;
width: ${e=>e.width}px;
height: ${e=>e.height}px;
border: 1px solid transparent;
user-select: none;
color: ${e=>e.theme.colors.gray[600]};
border-radius: ${e=>B[e.theme.round].calendarItem}px;
// pseudos
&:hover,
&:focus {
border-color: ${e=>e.theme.colors.gray[50]};
}
&:active {
background-color: ${e=>e.theme.colors.primary[40]};
border-color: transparent;
color: ${e=>e.theme.colors.gray[0]};
}
// days picker
&[data-selected='true'] {
background-color: ${e=>e.theme.colors.primary[50]};
border-color: transparent;
color: ${e=>e.theme.colors.gray[0]};
}
&[data-disabled='true'] {
border-color: transparent;
}
&[data-disabled='true'] .cl-text {
opacity: 0.5;
}
&:not([data-range='true']) {
transition: all 0.1s linear;
border-radius: ${e=>B[e.theme.round].calendarItem}px;
}
&:not([data-selected='true'])&[data-weekend='true'] {
color: #ff4d4d;
}
&:not([data-disabled='true']) {
cursor: pointer;
}
// range picker
&[data-in-range='true'] {
background-color: ${e=>e.theme.colors.primary[90]};
border-color: transparent;
}
&[data-start-range='true'] {
background-color: ${e=>e.theme.colors.primary[40]};
color: ${e=>e.theme.colors.gray[0]};
border-radius: ${e=>B[e.theme.round].calendarItem}px;
border-color: transparent;
}
&[data-end-range='true'] {
background-color: ${e=>e.theme.colors.primary[40]};
color: ${e=>e.theme.colors.gray[0]};
border-radius: ${e=>B[e.theme.round].calendarItem}px;
border-color: transparent;
}
&[data-in-range='true']:before,
&[data-end-range='true']:before {
content: ' ';
display: block;
position: absolute;
width: 40px;
height: 40px;
top: -1px;
left: ${e=>"rtl"===e.theme.direction?"20px":"unset"};
right: ${e=>"rtl"===e.theme.direction?"unset":"20px"};
background-color: ${e=>e.theme.colors.primary[90]};
z-index: -1;
}
&[data-in-range='true']:nth-of-type(1):before,
&[data-start-range='true']:before {
display: none;
}
`;Me.defaultProps={width:40,height:40};const ke={fa:{shortWeekDays:[{key:0,name:"ش"},{key:1,name:"ی"},{key:2,name:"د"},{key:3,name:"س"},{key:4,name:"چ"},{key:5,name:"پ"},{key:6,name:"ج"}],months:[{key:1,name:"فروردین"},{key:2,name:"اردیبهشت"},{key:3,name:"خرداد"},{key:4,name:"تیر"},{key:5,name:"مرداد"},{key:6,name:"شهریور"},{key:7,name:"مهر"},{key:8,name:"آبان"},{key:9,name:"آذر"},{key:10,name:"دی"},{key:11,name:"بهمن"},{key:12,name:"اسفند"}],format:"YYYY/MM/DD",am:"ق.ظ",pm:"ب.ظ"},en:{shortWeekDays:[{key:0,name:"S"},{key:1,name:"M"},{key:2,name:"T"},{key:3,name:"W"},{key:4,name:"T"},{key:5,name:"F"},{key:6,name:"S"}],months:[{key:1,name:"January"},{key:2,name:"February"},{key:3,name:"March"},{key:4,name:"April"},{key:5,name:"May"},{key:6,name:"June"},{key:7,name:"July"},{key:8,name:"August"},{key:9,name:"September"},{key:10,name:"October"},{key:11,name:"November"},{key:12,name:"December"}],format:"MM-DD-YY",am:"AM",pm:"PM"}},De=s.div`
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 4px;
height: ${_}px;
`,Ee=t=>{const{locale:n}=X,r=xe(t.value,"MM","latn");return e.createElement(De,null,ke[n].months.map((n=>e.createElement(Me,{key:n.key,className:"zm-MonthPickerButton",width:90,height:48,"data-selected":n.key===parseInt(r,10),onClick:()=>t.onMonthSelect(n.key),"aria-current":"date",type:"button",tabIndex:0},n.name))))},Ye=s.div`
display: grid;
grid-template-columns: repeat(3, 92px);
grid-template-rows: auto;
justify-content: center;
gap: 4px;
max-height: ${_}px;
overflow: auto;
padding-top: 8px;
padding-bottom: 8px;
`,_e=t=>{const n=parseInt(xe(t.value,"YYYY","latn"),10),o=r((()=>((e,t=80,n=50)=>{const r=parseInt(ue(e,"latn"),10),o=r+n,a=[];for(let e=r-t;e<=o;e++)a.push(e);return a})(t.value)),[]),a=e.useCallback((e=>{if(null===e)return;const t=e.querySelector("button[data-selected=true]");if(null!=t){const{height:n,top:r}=e.getBoundingClientRect(),{top:o}=t.getBoundingClientRect();e.scrollTop=Math.abs(r-o)-n/2}}),[]);return e.createElement(Ye,{ref:a},o.map((r=>e.createElement(Me,{className:"zm-YearPickerButton",key:r,width:90,height:48,"data-selected":n===r,"aria-selected":n===r,"aria-current":"date",type:"button",tabIndex:0,onClick:()=>t.onYearSelect(r)},U(r)))))},Ce=e=>!0===e.range,Se=e=>{const[t,n]=o(!1),[r,a]=o(void 0!==e.from?new Date(e.from):void 0),[i,s]=o(void 0!==e.to?new Date(e.to):void 0),l=(t,n)=>{"function"==typeof e.onChange&&Ce(e)&&null!=t&&null!=n&&e.onChange({from:t,to:n})};return{handlers:Object.assign({onClick:o=>!0===e.range?(e=>{const{value:o}=e.currentTarget.dataset;t||(void 0!==o&&(a(new Date(o)),s(null)),n(!0)),t&&null===i&&(void 0!==o&&(s(new Date(o)),l(r,new Date(o))),n(!1)),t&&void 0!==i&&(l(r,i),n(!1))})(o):(t=>{const{value:n,disabled:r}=t.currentTarget.dataset;if(void 0!==n&&"true"!==r)return Ce(e)||"function"!=typeof e.onChange||e.onChange({value:new Date(n)}),n})(o)},!0===e.range&&{onMouseMove:e=>{const{value:n}=e.currentTarget.dataset;t&&void 0!==n&&te(n).isAfter(te(r))&&s(new Date(n))}}),from:r,to:i}},Te=(n,a)=>{const{locale:i}=X,{defaultValue:s,weekends:l,range:c=!1}=n,u=void 0===s?new Date:s,d=r((()=>be(s)),[]),[m,h]=o([d]),[f,p]=o("days"),y=t([]),g=(({daysElementRefs:e,days:n,setDays:r})=>{const o=t(!1),a=n[0].middleOfMonth;return{slideToTheNextMonth:()=>{if(o.current)return;const t=te(a).add(1,"month"),i=be(t.toDate());r([...n,i]),requestAnimationFrame((()=>{o.current=!0;const[t,n]=e.current;t.style.transition=`transform 250ms ${C}`,t.style.transform=`translateX(${$e()}px)`,n.style.transition=`transform 250ms ${C}`,n.style.transform=`translateX(${$e()}px)`,setTimeout((()=>{r((e=>e.filter((e=>e.id===i.id)))),n.style.transition=null,n.style.transform=null,o.current=!1}),300)}))},slideToPrevMonth:()=>{if(o.current)return;const t=te(a).subtract(1,"month"),i=be(t.toDate());r([i,...n]),requestAnimationFrame((()=>{o.current=!0;const[t,n]=e.current;t.style.transform=`translateX(${$e()}px)`,n.style.transform=`translateX(${$e()}px)`,requestAnimationFrame((()=>{n.style.transition=`transform 250ms ${C}`,n.style.transform="translateX(0px)",t.style.transition=`transform 250ms ${C}`,t.style.transform="translateX(0px)",setTimeout((()=>{r((e=>e.filter((e=>e.id===i.id)))),t.style.transition=null,t.style.transform=null,o.current=!1}),300)}))}))}}})({daysElementRefs:y,days:m,setDays:h}),{from:v,to:x,handlers:b}=Se(n);return e.createElement(F,{ref:a,className:null!==n.className?n.className:""},e.createElement(K,{monthName:m[0].monthName,onNextClick:()=>{if("days"===f)return g.slideToTheNextMonth()},onPrevClick:()=>{if("days"===f)return g.slideToPrevMonth()},onClickOnTitle:()=>{p("month"!==f&&"year"!==f?"year":"days")}}),"year"===f?e.createElement(_e,{value:u,onYearSelect:e=>{const t=((e,t)=>{const n=t-parseInt(ue(e,"latn"),10);return n>0?te(e).add(n,"years").toDate():te(e).subtract(Math.abs(n),"years").toDate()})(u,e);h([be(t)]),p("month")}}):null,"month"===f?e.createElement(Ee,{value:u,onMonthSelect:e=>{const t=((e,t)=>{const n=t-parseInt(de(e,"latn"),10);return n>0?te(e).add(n,"months").toDate():te(e).subtract(Math.abs(n),"months").toDate()})(m[0].middleOfMonth,e);h([be(t)]),p("days")}}):null,"days"===f?e.createElement(e.Fragment,null,e.createElement(P,null,ke[i].shortWeekDays.map((t=>e.createElement(Q,{key:t.key},t.name)))),e.createElement(A,null,m.map(((t,r)=>e.createElement(W,{key:t.id,className:"item",ref:e=>{y.current[r]=e},role:"rowgroup"},t.weeks.map(((t,r)=>e.createElement(z,{key:r,role:"row","aria-rowindex":r+1},t.map(((t,r)=>e.createElement(Me,Object.assign({key:t.date.getTime(),className:"zm-DaysButton","data-value":t.date,"data-disabled":t.disabled,"data-range":n.range,"data-selected":!c&&pe(u,t.date),"data-start-range":null!=v&&pe(v,t.date),"data-in-range":ye(t.date,v,x),"data-end-range":null!=x&&pe(x,t.date),"data-weekend":null==l?void 0:l.some((e=>e===r)),type:"button",role:"gridcell","aria-colindex":r+1,tabIndex:0,"aria-selected":!c&&pe(u,t.date)},b),e.createElement(we,{className:"cl-text"},xe(t.date,"DD"))))))))))))):null)};Te.displayName="Calendar";var Oe=a(Te);function Le(e,t){n((()=>{function n({target:n}){null==e.current||e.current.contains(n)||t()}return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}}),[e,t])}const Ne=(e,t,n)=>`hsl(${e}deg ${t}% ${n}%)`,Ie=e=>{const{h:t,s:n,l:r}=function(e){const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(null==t)throw new Error("Could not parse Hex Color");const n=parseInt(t[1],16)/255,r=parseInt(t[2],16)/255,o=parseInt(t[3],16)/255,a=Math.max(n,r,o),i=Math.min(n,r,o);let s=(a+i)/2,l=s,c=s;if(a===i)return{h:0,s:0,l:c};const u=a-i;switch(l=c>.5?u/(2-a-i):u/(a+i),a){case n:s=(r-o)/u+(r<o?6:0);break;case r:s=(o-n)/u+2;break;case o:s=(n-r)/u+4}return s/=6,l*=100,l=Math.round(l),c*=100,c=Math.round(c),s=Math.round(360*s),{h:s,s:l,l:c}}(e),o={};return o[40]=Ne(t,n,r-10),o[50]=Ne(t,n,r),o[85]=Ne(t,n,85),o[90]=Ne(t,n,90),o[95]=Ne(t,n,95),o},He={0:"#FFFFFF",20:"#F5F5F5",30:"#EBEBEB",40:"#DEDEDE",50:"#BFBFBF",60:"#B0B0B0",70:"#575757",80:"#666666",600:"#2E2E2E"},je=t=>{const{accentColor:n=S,locale:o,round:a="thin",direction:i="rtl"}=t;r((()=>X.setLocale(o)),[o]);const s={colors:{primary:r((()=>Ie(n)),[]),gray:He},round:a,direction:i};return e.createElement(c,{theme:s},t.children)},Be=n=>{const{defaultValue:a,locale:i="fa",weekends:s=[],direction:l="rtl",accentColor:c}=n;r((()=>X.setLocale(i)),[i]);const u=t(null),d=t(null),[m,h]=o(void 0!==a?new Date(a):void 0),[f,p]=o(!0===n.range&&void 0!==n.from?new Date(n.from):void 0),[y,g]=o(!0===n.range&&void 0!==n.to?new Date(n.to):void 0),[v,x]=o(!1);Le(d,(()=>x(!1)));const b=()=>{x(!v)},$=r((()=>{var e;const t=null!==(e=null==n?void 0:n.customShowDateFormat)&&void 0!==e?e:ke[i].format;return void 0===n.range&&void 0!==m?xe(m,t):(console.log("from >>",f),void 0!==f&&void 0!==y?`\n ${xe(f,t)}\n -\n ${xe(y,t)}\n `:"")}),[m,f,y]);return e.createElement(je,{accentColor:c,round:n.round,direction:l},e.createElement("input",Object.assign({ref:u},null==n?void 0:n.inputAttributes,{onClick:b,type:"text",value:$,className:null!==n.inputClass?n.inputClass:"",readOnly:!0})),e.createElement(j,{toggleOpen:b,showCalendar:v,destinationRef:u,position:n.position},e.createElement(Oe,{defaultValue:m,ref:d,className:n.className,weekends:s,onChange:e=>{if(!0===n.range&&"function"==typeof n.onChange){const t="from"in e?e.from:new Date,r="to"in e?e.to:new Date;p(t),g(r),n.onChange({from:t,to:r})}else if((!1===n.range||void 0===n.range)&&"function"==typeof n.onChange){const t="value"in e?e.value:new Date;h(t),n.onChange({value:t})}},range:n.range,from:!0===n.range?n.from:void 0,to:!0===n.range?n.to:void 0})))},Fe=s.div`
width: 260px;
height: 260px;
position: relative;
z-index: 1;
border-radius: 50%;
background-color: ${e=>e.theme.colors.primary[95]};
`,Ae=s("div")`
left: 50%;
width: 1.5px;
bottom: 50%;
height: ${e=>e.isInsideHour?"26%":"40%"};
position: absolute;
background-color: ${e=>e.theme.colors.primary[85]};
transform-origin: center bottom 0;
transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
pointer-events: none;
${e=>e.isSelectingHour?`transform: rotateZ(${e.value/12*360}deg); `:`transform: rotateZ(${e.value/60*360}deg); `}
`,We=s("div")`
top: -22px;
right: -16px;
border: 16px solid ${e=>e.theme.colors.primary[85]};
position: absolute;
box-sizing: content-box;
border-radius: 100%;
background-color: ${e=>e.theme.colors.primary[85]};
pointer-events: none;
`,ze=s.div`
position: absolute;
top: 16px;
left: 16px;
display: flex;
align-items: center;
gap: 8px;
`,Pe=s.div`
padding: 4px 8px;
border-radius: ${e=>B[e.theme.round].calendarItem}px;
background-color: ${e=>e.theme.colors.gray[20]};
`,Re=s.div`
display: flex;
gap: 4px;
`,Xe=s.div`
cursor: pointer;
font-size: 12px;
padding: 4px;
border-radius: 4px;
&.cl_selected {
background-color: ${e=>e.theme.colors.gray[20]};
}
`;const Ve=130,Ue=130,Je=(e,t=30)=>{const{offsetX:n,offsetY:r}=(e=>{const t=e,n=e;let{offsetX:r,offsetY:o}=t.nativeEvent;if(void 0===r){const e=n.currentTarget.getBoundingClientRect();0!==n.changedTouches.length?(r=n.changedTouches[0].clientX-e.left,o=n.changedTouches[0].clientY-e.top):(r=t.clientX-e.left,o=t.clientY-e.top)}return{offsetX:r,offsetY:o}})(e),o=n-Ve,a=r-Ue,i=Math.PI-Math.atan2(o,a),s=Math.sqrt(Math.pow(o,2)+Math.pow(a,2));const l=((e,t,n)=>{const r=Math.floor(e*(1/n));return 6===n?r:Math.round(t)>85?0===r?-12:r:0===r?12:r})(57.29577951308232*i,s,t);return{value:l,delta:s}},Ze=[12,1,2,3,4,5,6,7,8,9,10,11],qe=[0,13,14,15,16,17,18,19,20,21,22,23],Ge=[0,5,10,15,20,25,30,35,40,45,50,55],Qe=s("div")`
animation: ${O} 0.7s linear alternate;
`,Ke=s.span`
left: calc(50% - 16px);
top: ${e=>e.top};
width: 32px;
height: 32px;
display: inline-flex;
position: absolute;
align-items: center;
border-radius: 32px;
justify-content: center;
user-select: none;
pointer-events: none;
color: black;
transform: ${e=>`translate(${function(e,t=130,n=20){const r=t-n;return Math.round(r*Math.sin(.5235987755982988*e))}(e.idx,e.clockHalfWidth,e.numbersPadd)}px,\n ${function(e,t=130,n=17){const r=t-n;return-Math.round(r*Math.cos(.5235987755982988*e))+t-n}(e.idx,e.clockHalfWidth,e.numbersPadd)}px)`};
`;Ke.defaultProps={clockHalfWidth:130,numbersPadd:24,top:"2%"};const et=t=>{const{insideHour:n,hourSelecting:r,clockTime:o}=t;return r?12===o?e.createElement(e.Fragment,null,Ze.map(((t,r)=>e.createElement(Ke,{key:t,idx:r,style:{opacity:n?.3:1}},U(t))))):e.createElement(e.Fragment,null,Ze.map(((t,r)=>e.createElement(Ke,{key:t,idx:r,top:"15%",clockHalfWidth:85,numbersPadd:10,style:{opacity:n?1:.3}},U(t)))),qe.map(((t,r)=>e.createElement(Ke,{key:t,idx:r,style:{opacity:n?.3:1}},U(t))))):e.createElement(Qe,null,Ge.map(((t,n)=>e.createElement(Ke,{key:t,idx:n},U(t)))))},tt=s.div`
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: ${_}px;
min-height: ${372}px;
border: 1px solid ${e=>e.theme.colors.gray[40]};
background-color: #fff;
border-radius: ${e=>B[e.theme.round].wrapper}px;
`,nt=n=>{const{defaultValue:a,onChange:i,round:s="x2",locale:l="fa",clockTime:c=24}=n;r((()=>X.setLocale(l)),[l]);const u=t(null),d=t(null),[m,h]=o(!1),[f,p]=o("am");Le(d,(()=>h(!1)));const y=()=>{h(!m)},{hour:g,minute:v,isInsideHour:x,selectingHour:b,handleMouseMove:$,handleMouseUp:w,handleSelecting:M}=(({defaultValue:e,clockTime:t,timeConvention:n,onChange:r})=>{const a=void 0!==e?te(e):te().startOf("date"),[i,s]=o(!1),[l,c]=o(!1),[u,d]=o(!1),m=24===t?"HH":"h",[h,f]=o(parseInt(a.format(m),10)),[p,y]=o(parseInt(a.format("mm"),10)),g=e=>{const{value:t}=Je(e,6);y(t)},v=e=>{const{value:n,delta:r}=Je(e);24!==t?f(n):Math.round(r)<85?(f(n),d(!0)):(f(n+12),d(!1))};return{hour:h,minute:p,isInsideHour:u,selectingHour:l,handleMouseMove:e=>{if(e.preventDefault(),i)return l?v(e):g(e)},handleMouseUp:()=>{if(l)return"function"==typeof r&&r(Object.assign({hour:h,minute:p},12===t&&{timeConvention:n})),s(!1),c(!1),void d(!1);s(!1),c(!0)},handleSelecting:e=>(s(!0),l?v(e):g(e))}})({defaultValue:a,clockTime:c,timeConvention:f,onChange:i}),k=r((()=>`${g}:${v}`),[g,v]);return e.createElement(je,{accentColor:n.accentColor,round:s},e.createElement("input",Object.assign({ref:u},null==n?void 0:n.inputAttributes,{onClick:y,type:"text",value:k,className:null!==n.inputClass?n.inputClass:"",readOnly:!0})),e.createElement(j,{toggleOpen:y,showCalendar:m,destinationRef:u},e.createElement(tt,{ref:d},e.createElement(ze,null,12===c?e.createElement(Re,null,e.createElement(Xe,{className:"am"===f?"cl_selected":"",onClick:()=>p("am")},ke[l].am),e.createElement(Xe,{className:"pm"===f?"cl_selected":"",onClick:()=>p("pm")},ke[l].pm)):null,e.createElement(Pe,null,U(g),":",U(v))),e.createElement(Fe,{onMouseMove:$,onMouseUp:w,onMouseDown:M,onTouchMove:M,onTouchEnd:w},e.createElement(Ae,{value:b?g:v,hour:g,minute:v,isSelectingHour:b,isInsideHour:x},e.createElement(We,{isSelectingHour:b})),e.createElement(et,{insideHour:x,hourSelecting:b,clockTime:c})))))};export{Oe as Calendar,je as CalendarProvider,Be as DatePicker,nt as TimePicker};