@itpsolver/react-multi-date-picker
Version:
a simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple and range pickers.
2 lines (1 loc) • 4.86 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);function t(){return t=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e},t.apply(this,arguments)}function a(e,r){if(null==e)return{};var o,t,a=function(e,r){if(null==e)return{};var o,t,a={},d=Object.keys(e);for(t=0;t<d.length;t++)o=d[t],r.indexOf(o)>=0||(a[o]=e[o]);return a}(e,r);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(e);for(t=0;t<d.length;t++)o=d[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}function d(e){return Array.isArray(e)}function n(e,r){var o=[];return["left","right"].includes(e)?(r.left&&o.push("rmdp-border-left"),r.right&&o.push("rmdp-border-right")):(r.top&&o.push("rmdp-border-top"),r.bottom&&o.push("rmdp-border-bottom")),o.join(" ")}var l=["state","setState","position","registerListener","calendarProps","datePickerProps","handleChange","nodes","Calendar","DatePicker","handlePropsChange","handleFocusedDate"];!function(e,r){void 0===r&&(r={});var o=r.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".rmdp-colors{display:flex;justify-content:space-around;padding:8px 0}.rmdp-colors.left,.rmdp-colors.right{flex-direction:column;padding:0 8px}.rmdp-color{border-radius:50%;cursor:pointer;height:20px;width:20px}.left .rmdp-color,.right .rmdp-color{margin:auto}.rmdp-blue{background-color:#0074d9}.rmdp-red{background-color:#ea0034}.rmdp-green{background-color:#009688}.rmdp-yellow{background-color:#fad817}.rmdp-color.active{box-shadow:0 0 4px 1px #8798ad}.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) .highlight-blue:hover{background-color:#7ea6f0}.rmdp-day:not(.rmdp-deactive) .highlight-blue{color:#4ca6f5}.rmdp-day.rmdp-deactive .highlight-blue{color:#7b98ce}.rmdp-day.rmdp-selected .highlight-blue{background-color:#0074d9;color:#fff}.rmdp-day.rmdp-deactive.rmdp-selected .highlight-blue{background-color:#aec0e0;color:#fff}.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) .highlight-yellow:hover{background-color:#ffeb3b}.rmdp-day:not(.rmdp-deactive) .highlight-yellow{color:#f7da37}.rmdp-day.rmdp-deactive .highlight-yellow{color:#c0b025}.rmdp-day.rmdp-selected .highlight-yellow{background-color:#fad817;color:#fff}.rmdp-day.rmdp-deactive.rmdp-selected .highlight-yellow{background-color:#dfdd61;color:#fff}.hover-red:hover{background-color:#ff6687!important}.hover-green:hover{background-color:#4db6ac!important}.hover-yellow:hover{background-color:#ffeb3b!important}");var c=["colors","defaultColor","position"],i=["state","position","colors","defaultColor","nodes","calendarProps","registerListener","className","handlePropsChange"];function s(r){var c,s=r.state,p=r.position,h=r.colors,u=void 0===h?["blue","red","green","yellow"]:h,f=r.defaultColor,m=void 0===f?u[0]:f,g=r.nodes,v=r.calendarProps.activeColor,b=r.registerListener,y=r.className,C=void 0===y?"":y,k=r.handlePropsChange,P=a(r,i),x=["rmdp-colors",p,n(p,g)];return b("change",(function(e){if(d(e))for(var r=0;r<e.length;r++)e[r].color||(e[r].color=v);else e&&(e.color=v)})),e.useEffect((function(){v||k({activeColor:m})}),[v,m,k]),o.default.createElement("div",t({className:"".concat(x.join(" ")," ").concat(C)},((c=P).state,c.setState,c.position,c.registerListener,c.calendarProps,c.datePickerProps,c.handleChange,c.nodes,c.Calendar,c.DatePicker,c.handlePropsChange,c.handleFocusedDate,a(c,l))),u.map((function(e,r){return o.default.createElement("div",{key:r,className:"rmdp-color rmdp-".concat(e," ").concat(v===e?"active":""),onClick:function(){return function(e){var r=s.selectedDate;r&&!d(r)&&(r.color=e);k({activeColor:e,value:r})}(e)}})})))}function p(e){var r=e.state,o=r.selectedDate,t=r.range,a=e.calendarProps.activeColor,n={};if(d(o))for(var l=0;l<o.length;l++){var c=o[l],i=c.color||a;o[l].color=i,n["".concat(c.year).concat(c.month).concat(c.day)]=i}return function(e){var r,l=e.date;if(!t)return o&&!d(o)&&l.format()===o.format()&&(r=a),d(o)&&(r=n["".concat(l.year).concat(l.month).concat(l.day)]),{className:r?"highlight highlight-".concat(r):"hover-".concat(a)}}}exports.default=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.colors,d=void 0===r?["blue","red","green","yellow"]:r,n=e.defaultColor,l=void 0===n?d[0]:n,i=e.position,h=void 0===i?"bottom":i,u=a(e,c);return[{type:"mapDays",fn:p},o.default.createElement(s,t({colors:d,defaultColor:l,position:h},u))]};