flexible-calendar-ui
Version:
Customizable React calendar components with monthly and yearly views
356 lines (331 loc) • 29.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
var dayjs_min = {exports: {}};
(function (module, exports) {
!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|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,M={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(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
} (dayjs_min));
var dayjs = dayjs_min.exports;
var DefaultContext = {
color: undefined,
size: undefined,
className: undefined,
style: undefined,
attr: undefined
};
var IconContext = React__default["default"].createContext && /*#__PURE__*/React__default["default"].createContext(DefaultContext);
var _excluded = ["attr", "size", "title"];
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function Tree2Element(tree) {
return tree && tree.map((node, i) => /*#__PURE__*/React__default["default"].createElement(node.tag, _objectSpread({
key: i
}, node.attr), Tree2Element(node.child)));
}
function GenIcon(data) {
return props => /*#__PURE__*/React__default["default"].createElement(IconBase, _extends({
attr: _objectSpread({}, data.attr)
}, props), Tree2Element(data.child));
}
function IconBase(props) {
var elem = conf => {
var {
attr,
size,
title
} = props,
svgProps = _objectWithoutProperties(props, _excluded);
var computedSize = size || conf.size || "1em";
var className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + " " : "") + props.className;
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0"
}, conf.attr, attr, svgProps, {
className: className,
style: _objectSpread(_objectSpread({
color: props.color || conf.color
}, conf.style), props.style),
height: computedSize,
width: computedSize,
xmlns: "http://www.w3.org/2000/svg"
}), title && /*#__PURE__*/React__default["default"].createElement("title", null, title), props.children);
};
return IconContext !== undefined ? /*#__PURE__*/React__default["default"].createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
}
// THIS FILE IS AUTO GENERATED
function SlArrowLeft (props) {
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 1024 1024"},"child":[{"tag":"path","attr":{"d":"M752.145 0c8.685 0 17.572 3.434 24.237 10.099 13.33 13.33 13.33 35.143 0 48.473L320.126 515.03l449.591 449.591c13.33 13.33 13.33 35.144 0 48.474-13.33 13.33-35.142 13.33-48.472 0L247.418 539.268c-13.33-13.33-13.33-35.144 0-48.474L727.91 10.1C734.575 3.435 743.46.002 752.146.002z"},"child":[]}]})(props);
}function SlArrowRight (props) {
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 1024 1024"},"child":[{"tag":"path","attr":{"d":"M271.653 1023.192c-8.685 0-17.573-3.432-24.238-10.097-13.33-13.33-13.33-35.144 0-48.474L703.67 508.163 254.08 58.573c-13.33-13.331-13.33-35.145 0-48.475 13.33-13.33 35.143-13.33 48.473 0L776.38 483.925c13.33 13.33 13.33 35.143 0 48.473l-480.492 480.694c-6.665 6.665-15.551 10.099-24.236 10.099z"},"child":[]}]})(props);
}
var defaultTheme = {
primaryColor: '#0070bf',
secondaryColor: '#00DAA7',
textColor: '#000000',
presentColor: '#00DAA7',
absentColor: '#FF6969',
leaveColor: '#FF9F68',
holidayColor: '#9B59B6',
dayOffColor: '#667797',
inactiveColor: '#f8f8f8',
headerBgColor: '#0070bf',
borderRadius: '16px',
headerTextColor: '#FFFFFF',
};
var ThemeContext = React.createContext(defaultTheme);
var ThemeProvider = function (_a) {
var children = _a.children, _b = _a.theme, theme = _b === void 0 ? {} : _b;
var mergedTheme = __assign(__assign({}, defaultTheme), theme);
// Apply CSS variables to :root for global access
React__default["default"].useEffect(function () {
var root = document.documentElement;
// Apply each theme color as a CSS variable
Object.entries(mergedTheme).forEach(function (_a) {
var key = _a[0], value = _a[1];
root.style.setProperty("--calendar-".concat(key), value);
});
// Clean up on unmount
return function () {
Object.keys(mergedTheme).forEach(function (key) {
root.style.removeProperty("--calendar-".concat(key));
});
};
}, [mergedTheme]);
return (jsxRuntime.jsx(ThemeContext.Provider, __assign({ value: mergedTheme }, { children: children })));
};
var useTheme = function () { return React.useContext(ThemeContext); };
var Calendar = function (_a) {
var _b = _a.attendance, attendance = _b === void 0 ? [] : _b, _c = _a.holidays, holidays = _c === void 0 ? {} : _c, initialDate = _a.initialDate, onDateClick = _a.onDateClick;
var _d = React.useState(initialDate ? dayjs(initialDate) : dayjs()), currentMonth = _d[0], setCurrentMonth = _d[1];
var theme = useTheme();
var daysInMonth = React.useMemo(function () {
var startOfMonth = currentMonth.startOf('month').day(1);
var endOfMonth = currentMonth.endOf('month').endOf('week');
var days = [];
var day = startOfMonth;
while (day.isBefore(endOfMonth) || day.isSame(endOfMonth)) {
days.push(day);
day = day.add(1, 'day');
}
return days;
}, [currentMonth]);
var renderedDays = React.useMemo(function () {
var today = dayjs();
return daysInMonth.map(function (day) {
var formattedDate = day.format('YYYY-MM-DD');
var isCurrentMonth = day.isSame(currentMonth, 'month');
var isFutureDate = day.isAfter(today, 'day');
var isSunday = day.day() === 6;
var statusObj = attendance.find(function (s) { return s.date === formattedDate; });
var holidayName = holidays[formattedDate];
var status = holidayName
? 'holiday'
: statusObj
? statusObj.status
: isSunday
? 'day-off'
: !isFutureDate
? 'present'
: 'inactive';
if (!isCurrentMonth)
return jsxRuntime.jsx("div", { className: "invisible" }, formattedDate);
var handleClick = function () {
if (onDateClick) {
onDateClick(formattedDate, status);
}
};
return (jsxRuntime.jsxs("div", __assign({ className: "month-calendar-day day-".concat(status), onClick: handleClick, style: { cursor: onDateClick ? 'pointer' : 'default' } }, { children: [jsxRuntime.jsx("span", __assign({ className: "month-calendar-day-number" }, { children: day.format('D') })), jsxRuntime.jsx("span", __assign({ className: "month-calendar-day-status ".concat(status === 'inactive' ? 'hidden' : ''), style: {
borderLeftColor: status === 'holiday'
? theme.holidayColor
: status === 'day-off'
? theme.dayOffColor
: status === 'present'
? theme.presentColor
: status === 'absent'
? theme.absentColor
: theme.inactiveColor
} }, { children: status === 'holiday'
? holidayName
: status === 'day-off'
? 'Day Off'
: status !== 'inactive' && status }))] }), formattedDate));
});
}, [daysInMonth, currentMonth, attendance, holidays, theme, onDateClick]);
return (jsxRuntime.jsxs("div", __assign({ className: "calendar-container" }, { children: [jsxRuntime.jsx("div", __assign({ className: "calendar-header" }, { children: jsxRuntime.jsxs("div", __assign({ className: "calendar-title-container" }, { children: [jsxRuntime.jsx("button", __assign({ className: "calendar-control-button", onClick: function () { return setCurrentMonth(currentMonth.subtract(1, 'month')); } }, { children: jsxRuntime.jsx(SlArrowLeft, {}) })), jsxRuntime.jsx("h2", __assign({ className: "calendar-title" }, { children: currentMonth.format('MMMM YYYY') })), jsxRuntime.jsx("button", __assign({ className: "calendar-control-button", onClick: function () { return setCurrentMonth(currentMonth.add(1, 'month')); } }, { children: jsxRuntime.jsx(SlArrowRight, {}) }))] })) })), jsxRuntime.jsx("div", __assign({ className: "month-calendar-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "month-calendar-grid" }, { children: [jsxRuntime.jsx("div", __assign({ className: "month-calendar-header" }, { children: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
].map(function (day) { return (jsxRuntime.jsx("div", __assign({ className: "month-calendar-day-name" }, { children: day }), day)); }) })), jsxRuntime.jsx("div", __assign({ className: "month-calendar-days" }, { children: renderedDays }))] })) }))] })));
};
var YearCalendar = function (_a) {
var _b = _a.attendance, attendance = _b === void 0 ? [] : _b, _c = _a.holidays, holidays = _c === void 0 ? {} : _c, initialYear = _a.initialYear, onDateClick = _a.onDateClick;
var _d = React.useState(initialYear ? dayjs().year(initialYear) : dayjs()), currentYear = _d[0], setCurrentYear = _d[1];
var today = dayjs();
useTheme();
var getMonthDays = function (month) {
var daysInMonth = dayjs("".concat(currentYear.year(), "-").concat(month + 1, "-01")).daysInMonth();
return Array.from({ length: daysInMonth }, function (_, i) {
return dayjs("".concat(currentYear.year(), "-").concat(month + 1, "-").concat(i + 1));
});
};
var calendarData = React.useMemo(function () {
return Array.from({ length: 12 }, function (_, month) {
var days = getMonthDays(month);
return {
month: month,
days: days,
};
});
}, [currentYear]);
var renderCalendar = function () {
return calendarData.map(function (_a) {
var month = _a.month, days = _a.days;
var totalDays = days.length;
return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", __assign({ className: "border" }, { children: month + 1 })), jsxRuntime.jsx("td", __assign({ className: "year-calendar-month-cell" }, { children: dayjs("".concat(currentYear.year(), "-").concat(month + 1, "-01")).format('MMM-YYYY') })), Array.from({ length: 31 }, function (_, index) {
if (index >= totalDays) {
return (jsxRuntime.jsx("td", __assign({ className: "year-day-inactive" }, { children: "-" }), "empty-".concat(month, "-").concat(index)));
}
var day = days[index];
var formattedDate = day.format('YYYY-MM-DD');
var statusObj = attendance.find(function (s) { return s.date === formattedDate; });
var isSunday = day.day() === 0;
var isFutureDate = day.isAfter(today, 'day');
var holidayName = holidays[formattedDate];
var status = holidayName
? 'holiday'
: statusObj
? statusObj.status
: isSunday
? 'day-off'
: !isFutureDate
? 'present'
: 'inactive';
var handleClick = function () {
if (onDateClick) {
onDateClick(formattedDate, status);
}
};
return (jsxRuntime.jsx("td", __assign({ className: "year-day-".concat(status), onClick: handleClick, style: { cursor: onDateClick ? 'pointer' : 'default' } }, { children: status === 'day-off'
? 'D'
: status === 'holiday'
? 'H'
: status !== 'inactive'
? status.charAt(0).toUpperCase()
: '-' }), formattedDate));
})] }, month));
});
};
return (jsxRuntime.jsxs("div", __assign({ className: "calendar-container" }, { children: [jsxRuntime.jsx("div", __assign({ className: "calendar-header" }, { children: jsxRuntime.jsxs("div", __assign({ className: "calendar-title-container" }, { children: [jsxRuntime.jsx("button", __assign({ className: "calendar-control-button", onClick: function () { return setCurrentYear(currentYear.subtract(1, 'year')); } }, { children: jsxRuntime.jsx(SlArrowLeft, {}) })), jsxRuntime.jsx("h2", __assign({ className: "calendar-title" }, { children: currentYear.format('YYYY') })), jsxRuntime.jsx("button", __assign({ className: "calendar-control-button", onClick: function () { return setCurrentYear(currentYear.add(1, 'year')); } }, { children: jsxRuntime.jsx(SlArrowRight, {}) }))] })) })), jsxRuntime.jsx("div", __assign({ className: "year-calendar-container" }, { children: jsxRuntime.jsxs("table", __assign({ className: "year-calendar-table" }, { children: [jsxRuntime.jsxs("thead", __assign({ className: "year-calendar-header" }, { children: [jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("th", __assign({ rowSpan: 2 }, { children: "No#" })), jsxRuntime.jsx("th", __assign({ rowSpan: 2 }, { children: "Month-Year" })), jsxRuntime.jsx("th", __assign({ colSpan: 31 }, { children: "Date" }))] }), jsxRuntime.jsx("tr", { children: Array.from({ length: 31 }, function (_, i) { return (jsxRuntime.jsx("th", { children: i + 1 }, i)); }) })] })), jsxRuntime.jsx("tbody", __assign({ className: "year-calendar-body" }, { children: renderCalendar() }))] })) }))] })));
};
// THIS FILE IS AUTO GENERATED
function IoIosArrowDown (props) {
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"},"child":[]}]})(props);
}
var ViewToggle = function (_a) {
var view = _a.view, setView = _a.setView;
var _b = React.useState(false), dropdown = _b[0], setDropdown = _b[1];
return (jsxRuntime.jsxs("div", __assign({ className: "calendar-view-toggle", onClick: function () { return setDropdown(!dropdown); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx("span", __assign({ className: "capitalize" }, { children: view })), jsxRuntime.jsx(IoIosArrowDown, { className: "text-2xl" })] })), jsxRuntime.jsxs("div", __assign({ className: "calendar-view-toggle-dropdown ".concat(dropdown ? 'block' : 'hidden') }, { children: [view === 'month' && (jsxRuntime.jsx("p", __assign({ className: "calendar-view-toggle-option", onClick: function () { return setView('year'); } }, { children: "Year" }))), view === 'year' && (jsxRuntime.jsx("p", __assign({ className: "calendar-view-toggle-option", onClick: function () { return setView('month'); } }, { children: "Month" })))] }))] })));
};
var CalendarContainer = function (_a) {
var attendance = _a.attendance, holidays = _a.holidays, initialDate = _a.initialDate, onDateClick = _a.onDateClick, theme = _a.theme, children = _a.children;
var _b = React.useState('month'), view = _b[0], setView = _b[1];
return (jsxRuntime.jsx(ThemeProvider, __assign({ theme: theme }, { children: jsxRuntime.jsxs("div", __assign({ className: "calendar-container" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "calendar-header" }, { children: [jsxRuntime.jsx("div", {}), " ", jsxRuntime.jsx(ViewToggle, { view: view, setView: setView })] })), children ? (children) : view === 'month' ? (jsxRuntime.jsx(Calendar, { attendance: attendance, holidays: holidays, initialDate: initialDate, onDateClick: onDateClick })) : (jsxRuntime.jsx(YearCalendar, { attendance: attendance, holidays: holidays, initialYear: initialDate ? new Date(initialDate).getFullYear() : undefined, onDateClick: onDateClick }))] })) })));
};
var defaultAttendanceStats = [
{
color: "#00DAA7",
name: "presents",
total: 14,
},
{
color: "#FF6969",
name: "absents",
total: 3,
},
{
color: "#FF9F68",
name: "leaves",
total: 1,
},
{
color: "#667797",
name: "Public Holidays",
total: 1,
},
{
color: "#9B9B9B",
name: "Day Off",
total: 4,
},
];
var defaultAttendanceData = [
{ date: "2024-05-10", status: "absent" },
{ date: "2024-05-15", status: "leave" },
{ date: "2024-05-22", status: "absent" },
{ date: "2024-06-05", status: "absent" },
{ date: "2024-06-12", status: "leave" },
{ date: "2024-06-19", status: "absent" },
{ date: "2024-07-03", status: "absent" },
{ date: "2024-07-10", status: "leave" },
{ date: "2024-07-17", status: "absent" },
];
var defaultHolidays = {
"2024-05-01": "Labor Day",
"2024-07-04": "Independence Day",
"2024-12-25": "Christmas",
"2025-01-01": "New Year",
};
exports.Calendar = Calendar;
exports.CalendarContainer = CalendarContainer;
exports.ThemeContext = ThemeContext;
exports.ThemeProvider = ThemeProvider;
exports.YearCalendar = YearCalendar;
exports["default"] = CalendarContainer;
exports.defaultAttendanceData = defaultAttendanceData;
exports.defaultAttendanceStats = defaultAttendanceStats;
exports.defaultHolidays = defaultHolidays;
exports.useTheme = useTheme;
//# sourceMappingURL=index.js.map