react-month-picker-dropdown
Version:
This is a slim library for month picker as dropdown menu for React Project
3 lines (2 loc) • 5.67 kB
JavaScript
var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var a=["January","February","March","April","May","June","July","August","September","October","November","December"],l=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"],o=function(e,t){return new Date(e,t+1,0)},i=function(e,t){return e.filter(function(e){return e.id===t})};exports.MonthPickerDropdown=function(e){var c=function(e){var t=e.startYear,n=e.startMonth,r=e.endYear,a=e.endMonth;if(null!=t&&null!=r&&t>r)return{errorMessage:"Invalid Start & End Year combination"};if(null!=t&&null!=r&&null!=n&&null!=a&&t===r&&n>a)return{errorMessage:"Invalid Start & End Month combination"};var l=(new Date).getFullYear(),o={startYear:l,startMonth:0,endYear:l,endMonth:11};return null!=t&&(o.startYear=t),null!=n&&(o.startMonth=n>1?n-1:0),null!=r&&(o.endYear=r),null!=a&&(o.endMonth=a>1?a-1:0),{monthsAndYears:o,errorMessage:""}}(e),d=c.monthsAndYears,s=c.errorMessage;if(s)return n.createElement("div",{className:"month-picker-dropdown"},n.createElement("span",{className:"error"},s));var u=function(e){for(var t=e.startMonth,n=e.endMonth,r=e.displayShortMonthName,i=e.displayShortYearName,c=[],d=function(e,t){for(var n=[],r=new Date(e),a=new Date(t),l=r.getFullYear();l<=a.getFullYear();l++)n.push(l);return n}("1 "+a[t]+" "+e.startYear,"1 "+a[n]+" "+e.endYear),s=0,u=0;u<d.length;u++){var h=d[u],f=null,M=null;1===d.length?(f=t,M=n+1):0===u?(f=t,M=12):u===d.length-1?(f=0,M=n+1):(f=0,M=12);for(var m=f;m<M;m++){var v=new Date(h,m,1),D=o(h,m);c.push({id:s,title:(r?l[m]:a[m])+" "+(i?h.toString().substr(-2):h),startDate:v,endDate:D,month:m+1,year:h,selected:!1}),s+=1}}return c}(r({},e,d)),h=t.useState(u),f=h[0],M=h[1],m=t.useState({firstSelectedMonthID:null,lastSelectedMonthID:null}),v=m[0],D=m[1],p=t.useState("visibility-hidden"),I=p[0],S=p[1];t.useEffect(function(){null!==v.firstSelectedMonthID&&null!==v.lastSelectedMonthID&&(e.displayOkAndCancelButton||g())},[v]);var b=function(){S("visibility-hidden")},y=function(e){var t=!1;if(null!==v.firstSelectedMonthID&&(t=v.firstSelectedMonthID>e.id),null===v.firstSelectedMonthID||null!==v.firstSelectedMonthID&&null!==v.lastSelectedMonthID){var n=f.map(function(t){return t.hovered=!1,t.selected=t.id===e.id,t});M(n),D({firstSelectedMonthID:e.id,lastSelectedMonthID:null})}else{if(e.id===v.firstSelectedMonthID)return D({firstSelectedMonthID:null,lastSelectedMonthID:null}),void M(u);var r=f.map(function(n){return(v.firstSelectedMonthID>n.id&&e.id<=n.id&&t||v.firstSelectedMonthID<n.id&&e.id>=n.id)&&(n.selected=!0),n});M(r),D({firstSelectedMonthID:v.firstSelectedMonthID,lastSelectedMonthID:e.id})}},k=function(){var e=f.map(function(e){return e.hovered=!1,e});M(e)},g=function(){var t=function(e,t,n){var r=null,a=null,l=null,o=null,c=i(e,t),d=i(e,n);return c.length>0&&d.length>0&&(c[0].id>d[0].id?(r=d[0].year,a=d[0].month,l=c[0].year,o=c[0].month):(r=c[0].year,a=c[0].month,l=d[0].year,o=d[0].month)),{startYear:r,startMonth:a,endYear:l,endMonth:o}}(f,v.firstSelectedMonthID,v.lastSelectedMonthID);t&&e.onChange({startMonth:t.startMonth,startYear:t.startYear,endMonth:t.endMonth,endYear:t.endYear})};return n.createElement("div",{tabIndex:e.CTabIndex?e.CTabIndex:0,className:"month-picker-dropdown",onFocus:b,onBlur:function(){return setTimeout(b,200)}},n.createElement("div",{className:"select-months",onClick:function(){S("visibility-hidden"===I?"visibility-shown":"visibility-hidden")}},function(e,t,n){var r=e.firstSelectedMonthID,a=e.lastSelectedMonthID;if(null===r&&null===a)return t.label?t.label:"Select Months";var l="",o=t.separatorText?t.separatorText:"→",c=i(n,r),d=i(n,a);return c.length>0&&0===d.length&&(l=c[0].title+" "+o+" ____"),c.length>0&&d.length>0&&(l=c[0].id>d[0].id?d[0].title+" "+o+" "+c[0].title:c[0].title+" "+o+" "+d[0].title),l}(v,e,f)),function(e,t){return n.createElement("div",{className:"select-picker "+I},n.createElement("div",{className:"select-picker-options",onMouseLeave:k},t.map(function(t){return n.createElement("div",{onClick:function(){y(t)},onMouseEnter:function(){!function(e){var t=!1;if(!(null!==v.firstSelectedMonthID&&null!==v.lastSelectedMonthID||null===v.firstSelectedMonthID&&null===v.lastSelectedMonthID)){null!==v.firstSelectedMonthID&&(t=v.firstSelectedMonthID>e.id);var n=f.map(function(n){return n.hovered=!!(v.firstSelectedMonthID>n.id&&e.id<=n.id&&t)||v.firstSelectedMonthID<n.id&&e.id>=n.id,n});M(n)}}(t)},className:"options "+(a=t,a.selected?"selected-month-background-color":a.hovered?"hovered-month-background-color":""),key:t.id},n.createElement("input",{readOnly:!0,className:"option-checkbox "+(r=e.hideCheckBox,"boolean"==typeof r&&r?"hide-me":""),type:"checkbox",tabIndex:-1,checked:t.selected||!1}),n.createElement("span",{className:"option-title"},t.title));var r,a})),e.displayOkAndCancelButton&&function(e){return n.createElement("div",{className:"okay-and-cancel"},e.markUpForOkButton?n.createElement("div",{className:"okay-and-cancel-container",onMouseDown:g},e.markUpForOkButton()):n.createElement("button",{tabIndex:e.CTabIndex?e.CTabIndex:0,className:"okay-and-cancel-container-button",onMouseDown:g},"Select"),e.markUpForCancelButton?n.createElement("div",{className:"okay-and-cancel-container",onMouseDown:b},e.markUpForCancelButton()):n.createElement("button",{tabIndex:e.CTabIndex?e.CTabIndex:0,className:"okay-and-cancel-container-button",onMouseDown:b},"Cancel"))}(e))}(e,f))};
//# sourceMappingURL=index.js.map