@daryasidorovich/modsen-datepicker 1.0.13 → 1.0.14
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/dist/index.cjs +59 -45
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +59 -45
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FIRST_DAY_OF_WEEK } from './constants/firstDayOfWeek';
|
|
2
2
|
import { MODES } from './constants/modes';
|
|
3
3
|
export { BaseCalendar } from './components/BaseCalendar';
|
|
4
|
-
export type { BaseCalendarProps, CalendarProps, } from './components/
|
|
4
|
+
export type { BaseCalendarProps, CalendarProps, } from './components/CalendarGrid/types';
|
|
5
5
|
export type { DatePickerProps } from './components/DatePicker';
|
|
6
6
|
export { DatePicker } from './components/DatePicker';
|
|
7
7
|
export type { RangePickerProps } from './components/RangePicker';
|
package/dist/index.js
CHANGED
|
@@ -320,7 +320,8 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
320
320
|
|
|
321
321
|
var e=[],t$2=[];function n$1(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t$2[u]={}),a=t$2[u]&&t$2[u][s]?t$2[u][s]:t$2[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
|
|
322
322
|
|
|
323
|
-
var css$d = ".
|
|
323
|
+
var css$d = ".styles_module_day__0d250405 {\n width: 32px;\n height: 32px;\n}\n.theme-light .styles_module_day__0d250405 {\n background-color: #ffffff;\n color: #333333;\n}\n.theme-dark .styles_module_day__0d250405 {\n background-color: #333333;\n color: #ffffff;\n}\n.styles_module_day__0d250405 {\n font-size: 13px;\n padding: 10px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n border: none;\n position: relative;\n}\n\n.theme-light .styles_module_holiday__0d250405 {\n color: #ff383c;\n}\n.theme-dark .styles_module_holiday__0d250405 {\n color: #ff383c;\n}\n\n.theme-light .styles_module_today__0d250405 {\n color: #2f80ed;\n}\n.theme-dark .styles_module_today__0d250405 {\n color: #2f80ed;\n}\n\n.theme-light .styles_module_selected__0d250405 {\n background-color: #2f80ed;\n color: #ffffff;\n}\n.theme-dark .styles_module_selected__0d250405 {\n background-color: #2f80ed;\n color: #e1e1e1;\n}\n\n.theme-light .styles_module_disabled__0d250405 {\n color: #aaaaaa;\n}\n.theme-dark .styles_module_disabled__0d250405 {\n color: #aaaaaa;\n}\n.styles_module_disabled__0d250405 {\n cursor: not-allowed;\n}\n\n.theme-light .styles_module_otherMonth__0d250405 {\n color: #aaaaaa;\n}\n.theme-dark .styles_module_otherMonth__0d250405 {\n color: #aaaaaa;\n}\n\n.theme-light .styles_module_rangeStart__0d250405 {\n color: #ffffff;\n background-color: rgba(47, 129, 237, 0.5764705882);\n}\n.theme-dark .styles_module_rangeStart__0d250405 {\n color: #e1e1e1;\n background-color: rgba(47, 129, 237, 0.5764705882);\n}\n.styles_module_rangeStart__0d250405 {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.theme-light .styles_module_rangeMiddle__0d250405 {\n background-color: rgba(47, 129, 237, 0.1647058824);\n}\n.theme-dark .styles_module_rangeMiddle__0d250405 {\n background-color: rgba(47, 129, 237, 0.1647058824);\n}\n.styles_module_rangeMiddle__0d250405 {\n border-radius: 0;\n}\n\n.theme-light .styles_module_rangeEnd__0d250405 {\n color: #ffffff;\n background-color: #2f80ed;\n}\n.theme-dark .styles_module_rangeEnd__0d250405 {\n color: #e1e1e1;\n background-color: #2f80ed;\n}\n.styles_module_rangeEnd__0d250405 {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.styles_module_hasTasks__0d250405 {\n position: relative;\n}\n.styles_module_hasTasks__0d250405::after {\n width: 4px;\n height: 4px;\n}\n.theme-light .styles_module_hasTasks__0d250405::after {\n background-color: #62d0a2;\n}\n.theme-dark .styles_module_hasTasks__0d250405::after {\n background-color: #62d0a2;\n}\n.styles_module_hasTasks__0d250405::after {\n content: \"\";\n position: absolute;\n top: 12%;\n right: 12%;\n border-radius: 100%;\n}";
|
|
324
|
+
var modules_efc4e723$d = {"day":"styles_module_day__0d250405","holiday":"styles_module_holiday__0d250405","today":"styles_module_today__0d250405","selected":"styles_module_selected__0d250405","disabled":"styles_module_disabled__0d250405","otherMonth":"styles_module_otherMonth__0d250405","rangeStart":"styles_module_rangeStart__0d250405","rangeMiddle":"styles_module_rangeMiddle__0d250405","rangeEnd":"styles_module_rangeEnd__0d250405","hasTasks":"styles_module_hasTasks__0d250405"};
|
|
324
325
|
n$1(css$d,{});
|
|
325
326
|
|
|
326
327
|
const Day = ({ date, isSelected = false, isCurrentMonth, isDisabled = false, isHoliday = false, hasTasks = false, isRangeStart = false, isRangeEnd = false, isRangeMiddle = false, onClick, onDoubleClick, onMouseEnter, onMouseLeave, }) => {
|
|
@@ -355,24 +356,25 @@ const Day = ({ date, isSelected = false, isCurrentMonth, isDisabled = false, isH
|
|
|
355
356
|
onMouseLeave();
|
|
356
357
|
}
|
|
357
358
|
};
|
|
358
|
-
return (jsx("button", { className: classNames(
|
|
359
|
-
[
|
|
360
|
-
[
|
|
361
|
-
[
|
|
362
|
-
[
|
|
363
|
-
[
|
|
364
|
-
[
|
|
365
|
-
[
|
|
366
|
-
[
|
|
367
|
-
[
|
|
368
|
-
}), onClick: handleClick, onDoubleClick: handleDoubleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, disabled: isDisabled, children: jsx("span", { className:
|
|
359
|
+
return (jsx("button", { className: classNames(modules_efc4e723$d.day, {
|
|
360
|
+
[modules_efc4e723$d.today]: isToday(date),
|
|
361
|
+
[modules_efc4e723$d.selected]: isSelected,
|
|
362
|
+
[modules_efc4e723$d.disabled]: isDisabled,
|
|
363
|
+
[modules_efc4e723$d.holiday]: isHoliday,
|
|
364
|
+
[modules_efc4e723$d.hasTasks]: hasTasks,
|
|
365
|
+
[modules_efc4e723$d.rangeStart]: isRangeStart,
|
|
366
|
+
[modules_efc4e723$d.rangeEnd]: isRangeEnd,
|
|
367
|
+
[modules_efc4e723$d.rangeMiddle]: isRangeMiddle,
|
|
368
|
+
[modules_efc4e723$d.otherMonth]: !isCurrentMonth,
|
|
369
|
+
}), onClick: handleClick, onDoubleClick: handleDoubleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, disabled: isDisabled, children: jsx("span", { className: modules_efc4e723$d.number, children: dayNumber }) }));
|
|
369
370
|
};
|
|
370
371
|
|
|
371
|
-
var css$c = ".
|
|
372
|
+
var css$c = ".styles_module_week__5d817eab {\n display: flex;\n}\n.theme-light .styles_module_week__5d817eab {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_week__5d817eab {\n background-color: #333333;\n}";
|
|
373
|
+
var modules_efc4e723$c = {"week":"styles_module_week__5d817eab"};
|
|
372
374
|
n$1(css$c,{});
|
|
373
375
|
|
|
374
376
|
const Week = ({ weekDays, selectedDate, getIsHoliday, getIsDisabled, getIsCurrentMonth, rangeStart, rangeEnd, hasTasks, onDateClick, onDateDoubleClick, onMouseEnter, onMouseLeave, }) => {
|
|
375
|
-
return (jsx("div", { className:
|
|
377
|
+
return (jsx("div", { className: modules_efc4e723$c.week, children: weekDays.map((date) => {
|
|
376
378
|
return (jsx(Day, { date: date, isSelected: isSelected(date, selectedDate), isDisabled: getIsDisabled?.(date) || false, isCurrentMonth: getIsCurrentMonth(date), isHoliday: getIsHoliday?.(date) || false, hasTasks: hasTasks?.(date) || false, isRangeStart: isRangeStart(date, rangeStart), isRangeEnd: isRangeEnd(date, rangeEnd), isRangeMiddle: isInRange(date, rangeStart, rangeEnd), onClick: getIsDisabled?.(date) ? undefined : onDateClick, onDoubleClick: getIsDisabled?.(date) ? undefined : onDateDoubleClick, onMouseEnter: getIsDisabled?.(date) ? undefined : onMouseEnter, onMouseLeave: getIsDisabled?.(date) ? undefined : onMouseLeave }, date.toISOString()));
|
|
377
379
|
}) }));
|
|
378
380
|
};
|
|
@@ -619,13 +621,14 @@ function useCalendar(props) {
|
|
|
619
621
|
return { calendar, loading, error };
|
|
620
622
|
}
|
|
621
623
|
|
|
622
|
-
var css$b = ".
|
|
624
|
+
var css$b = ".styles_module_calendar__131b64c5 {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.theme-light .styles_module_errorMessage__131b64c5 {\n color: #ff383c;\n}\n.theme-dark .styles_module_errorMessage__131b64c5 {\n color: #ff383c;\n}";
|
|
625
|
+
var modules_efc4e723$b = {"calendar":"styles_module_calendar__131b64c5","errorMessage":"styles_module_errorMessage__131b64c5"};
|
|
623
626
|
n$1(css$b,{});
|
|
624
627
|
|
|
625
628
|
const CalendarGridWithoutTasks = ({ children, ...props }) => {
|
|
626
629
|
const { calendar, loading, error } = useCalendar(props);
|
|
627
630
|
const weeks = calendar.getWeeks();
|
|
628
|
-
return (jsxs("div", { className:
|
|
631
|
+
return (jsxs("div", { className: modules_efc4e723$b.calendar, children: [weeks.map((weekDays) => (jsx(Week, { weekDays: weekDays, selectedDate: calendar.selectedDate, getIsDisabled: calendar.getIsDisabled, getIsCurrentMonth: calendar.getIsCurrentMonth, getIsHoliday: calendar.getIsHoliday, rangeStart: calendar.rangeStart, rangeEnd: calendar.rangeEnd, ...props }, weekDays[0].toISOString()))), error && jsx("p", { className: modules_efc4e723$b.errorMessage, children: error }), loading && jsx("div", { children: "Loading..." }), children] }));
|
|
629
632
|
};
|
|
630
633
|
|
|
631
634
|
const useModal = (options = {}) => {
|
|
@@ -712,7 +715,8 @@ const useLockBodyScroll = (isLocked) => {
|
|
|
712
715
|
}, [isLocked]);
|
|
713
716
|
};
|
|
714
717
|
|
|
715
|
-
var css$a = ".
|
|
718
|
+
var css$a = ".styles_module_overlay__337f9387 {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n}\n\n.theme-light .styles_module_overlayColor__337f9387 {\n background-color: rgba(44, 49, 68, 0.4);\n}\n.theme-dark .styles_module_overlayColor__337f9387 {\n background-color: rgba(44, 49, 68, 0.4);\n}\n\n.styles_module_modal__337f9387 {\n position: relative;\n}\n.theme-light .styles_module_modal__337f9387 {\n background-color: #ffffff;\n border-color: #e1e1e1;\n}\n.theme-dark .styles_module_modal__337f9387 {\n background-color: #333333;\n border-color: #aaaaaa;\n}\n.styles_module_modal__337f9387 {\n border-style: solid;\n border-width: 1px;\n border-radius: 8px;\n padding: 24px;\n}\n\n.styles_module_closeButton__337f9387 {\n border: none;\n background-color: transparent;\n position: absolute;\n right: 8px;\n top: 0;\n font-size: 24px;\n line-height: normal;\n}\n.theme-light .styles_module_closeButton__337f9387 {\n color: #333333;\n}\n.theme-dark .styles_module_closeButton__337f9387 {\n color: #ffffff;\n}";
|
|
719
|
+
var modules_efc4e723$a = {"overlay":"styles_module_overlay__337f9387","overlayColor":"styles_module_overlayColor__337f9387","modal":"styles_module_modal__337f9387","closeButton":"styles_module_closeButton__337f9387"};
|
|
716
720
|
n$1(css$a,{});
|
|
717
721
|
|
|
718
722
|
const Modal = ({ isOpen, onClose, children, showOverlay = true, showCloseButton = true, className = '', classNameOverlay = '', style = {}, }) => {
|
|
@@ -727,9 +731,9 @@ const Modal = ({ isOpen, onClose, children, showOverlay = true, showCloseButton
|
|
|
727
731
|
};
|
|
728
732
|
if (!isOpen)
|
|
729
733
|
return null;
|
|
730
|
-
const modalContent = (jsx("div", { className: classNames(
|
|
731
|
-
[
|
|
732
|
-
}), onClick: handleClick, children: jsxs("div", { ref: modalRef, className: classNames(
|
|
734
|
+
const modalContent = (jsx("div", { className: classNames(modules_efc4e723$a.overlay, classNameOverlay, {
|
|
735
|
+
[modules_efc4e723$a.overlayColor]: showOverlay,
|
|
736
|
+
}), onClick: handleClick, children: jsxs("div", { ref: modalRef, className: classNames(modules_efc4e723$a.modal, className), style: style, children: [showCloseButton && (jsx("button", { className: modules_efc4e723$a.closeButton, onClick: onClose, children: jsx("span", { children: "\u00D7" }) })), children] }) }));
|
|
733
737
|
return createPortal(modalContent, targetElement);
|
|
734
738
|
};
|
|
735
739
|
|
|
@@ -765,22 +769,24 @@ var SvgClear = function SvgClear(props) {
|
|
|
765
769
|
})));
|
|
766
770
|
};
|
|
767
771
|
|
|
768
|
-
var css$9 = "
|
|
772
|
+
var css$9 = ".theme-light .styles_module_wrapper__88f5379a {\n color: #333333;\n background-color: #ffffff;\n}\n.theme-dark .styles_module_wrapper__88f5379a {\n color: #ffffff;\n background-color: #333333;\n}\n.styles_module_wrapper__88f5379a {\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 2px;\n width: 100%;\n}\n\n.styles_module_label__88f5379a {\n font-size: 15px;\n font-weight: 600;\n margin-bottom: 8px;\n}\n\n.theme-light .styles_module_inputWrapper__88f5379a {\n color: #333333;\n background-color: #ffffff;\n border-color: #e1e1e1;\n}\n.theme-dark .styles_module_inputWrapper__88f5379a {\n color: #ffffff;\n background-color: #333333;\n border-color: #aaaaaa;\n}\n.styles_module_inputWrapper__88f5379a {\n border-style: solid;\n border-width: 1px;\n padding: 8px 15px;\n border-radius: 8px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n}\n\n.theme-light .styles_module_errorWrapper__88f5379a {\n border-color: #ff383c;\n}\n.theme-dark .styles_module_errorWrapper__88f5379a {\n border-color: #ff383c;\n}\n\n.styles_module_input__88f5379a {\n border: none;\n outline: none;\n background-color: transparent;\n width: 100%;\n}\n.theme-light .styles_module_input__88f5379a {\n color: #333333;\n}\n.theme-dark .styles_module_input__88f5379a {\n color: #ffffff;\n}\n.theme-light .styles_module_input__88f5379a::placeholder {\n color: #e1e1e1;\n}\n.theme-dark .styles_module_input__88f5379a::placeholder {\n color: #aaaaaa;\n}\n\n.styles_module_clear__88f5379a {\n border: none;\n background-color: transparent;\n width: max-content;\n padding: 0;\n}\n\n.theme-light .styles_module_icon__88f5379a {\n color: #aaaaaa;\n}\n.theme-dark .styles_module_icon__88f5379a {\n color: #aaaaaa;\n}\n\n.theme-light .styles_module_error__88f5379a {\n color: #ff383c;\n}\n.theme-dark .styles_module_error__88f5379a {\n color: #ff383c;\n}\n.styles_module_error__88f5379a {\n height: 15px;\n}";
|
|
773
|
+
var modules_efc4e723$9 = {"wrapper":"styles_module_wrapper__88f5379a","label":"styles_module_label__88f5379a","inputWrapper":"styles_module_inputWrapper__88f5379a","errorWrapper":"styles_module_errorWrapper__88f5379a","input":"styles_module_input__88f5379a","clear":"styles_module_clear__88f5379a","icon":"styles_module_icon__88f5379a","error":"styles_module_error__88f5379a"};
|
|
769
774
|
n$1(css$9,{});
|
|
770
775
|
|
|
771
776
|
const Input = ({ label, error, className = '', id, onReset, placeholder, type = 'text', isDateInput = false, ref = null, ...restProps }) => {
|
|
772
777
|
const generatedId = useId();
|
|
773
778
|
const inputId = id || `input-${generatedId}`;
|
|
774
|
-
return (jsxs("div", { className:
|
|
775
|
-
[
|
|
776
|
-
}), children: [isDateInput && jsx(SvgCalendar, { className:
|
|
779
|
+
return (jsxs("div", { className: modules_efc4e723$9.wrapper, children: [label && (jsx("label", { htmlFor: inputId, className: modules_efc4e723$9.label, children: label })), jsxs("div", { className: classNames(modules_efc4e723$9.inputWrapper, {
|
|
780
|
+
[modules_efc4e723$9.errorWrapper]: error,
|
|
781
|
+
}), children: [isDateInput && jsx(SvgCalendar, { className: modules_efc4e723$9.icon }), jsx("input", { id: inputId, type: type, ref: ref, placeholder: placeholder, className: classNames(modules_efc4e723$9.input, className), ...restProps }), isDateInput && onReset && (jsx("button", { className: modules_efc4e723$9.clear, onClick: onReset, type: "button", children: jsx(SvgClear, { className: modules_efc4e723$9.icon }) }))] }), jsx("span", { className: modules_efc4e723$9.error, children: error ?? '' })] }));
|
|
777
782
|
};
|
|
778
783
|
|
|
779
|
-
var css$8 = ".
|
|
784
|
+
var css$8 = ".styles_module_header__2145d314 {\n margin-bottom: 24px;\n margin-top: 8px;\n}\n\n.styles_module_title__2145d314 {\n font-size: 18px;\n}\n\n.styles_module_footer__2145d314 {\n display: flex;\n width: 100%;\n gap: 10px;\n justify-content: end;\n}\n\n.styles_module_children__2145d314 {\n display: flex;\n gap: 8px;\n flex-direction: column;\n min-width: 300px;\n width: fit-content;\n margin-bottom: 24px;\n}\n\n.theme-light .styles_module_modalButtons__2145d314 {\n background-color: rgba(47, 129, 237, 0.1647058824);\n border-color: #e1e1e1;\n color: #333333;\n}\n.theme-dark .styles_module_modalButtons__2145d314 {\n background-color: rgba(47, 129, 237, 0.1647058824);\n border-color: #aaaaaa;\n color: #ffffff;\n}\n.styles_module_modalButtons__2145d314 {\n border-style: solid;\n border-width: 1px;\n padding: 5px 10px;\n border-radius: 8px;\n}\n\n.theme-light .styles_module_confirm__2145d314 {\n background-color: rgba(47, 129, 237, 0.5764705882);\n border-color: #e1e1e1;\n color: #ffffff;\n}\n.theme-dark .styles_module_confirm__2145d314 {\n background-color: rgba(47, 129, 237, 0.5764705882);\n border-color: #aaaaaa;\n color: #e1e1e1;\n}";
|
|
785
|
+
var modules_efc4e723$8 = {"header":"styles_module_header__2145d314","title":"styles_module_title__2145d314","footer":"styles_module_footer__2145d314","children":"styles_module_children__2145d314","modalButtons":"styles_module_modalButtons__2145d314","confirm":"styles_module_confirm__2145d314"};
|
|
780
786
|
n$1(css$8,{});
|
|
781
787
|
|
|
782
788
|
const CrudModal = ({ isOpen, onClose, onConfirm, title, cancelText = 'No', confirmText = 'Yes', isLoading = false, children, showCloseButton = false, }) => {
|
|
783
|
-
return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, showCloseButton: showCloseButton, children: [jsx("div", { className:
|
|
789
|
+
return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, showCloseButton: showCloseButton, children: [jsx("div", { className: modules_efc4e723$8.header, children: jsx("h1", { className: modules_efc4e723$8.title, children: title }) }), children && jsx("div", { className: modules_efc4e723$8.children, children: children }), jsxs("div", { className: modules_efc4e723$8.footer, children: [jsx("button", { className: modules_efc4e723$8.modalButtons, onClick: onClose, disabled: isLoading, children: cancelText }), jsx("button", { className: classNames(modules_efc4e723$8.confirm, modules_efc4e723$8.modalButtons), onClick: onConfirm, children: confirmText })] })] }));
|
|
784
790
|
};
|
|
785
791
|
|
|
786
792
|
function getEnumValues(entries) {
|
|
@@ -6244,7 +6250,8 @@ const EditModal = ({ isOpen, onClose, id, date }) => {
|
|
|
6244
6250
|
return (jsxs(CrudModal, { isOpen: isOpen, onClose: handleClose, onConfirm: handleSubmit(onSubmit), showCloseButton: true, confirmText: "Edit", cancelText: "Cancel", title: "Edit task", children: [jsx(Input, { ...register('title'), label: "Title", placeholder: "Training name", error: errors.title?.message }), jsx(Input, { ...register('date'), label: "Date", type: "date", placeholder: "Training date", error: errors.date?.message })] }));
|
|
6245
6251
|
};
|
|
6246
6252
|
|
|
6247
|
-
var css$7 = ".
|
|
6253
|
+
var css$7 = ".styles_module_tasksManager__2b8e4ddb {\n min-width: 300px;\n width: fit-content;\n display: flex;\n flex-direction: column;\n gap: 24px;\n max-height: 70%;\n}\n\n.styles_module_tasks__2b8e4ddb {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.styles_module_task__2b8e4ddb {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n align-items: center;\n}\n\n.theme-light .styles_module_checked__2b8e4ddb {\n color: #aaaaaa;\n}\n.theme-dark .styles_module_checked__2b8e4ddb {\n color: #aaaaaa;\n}\n\n.styles_module_title__2b8e4ddb {\n margin-right: auto;\n}\n\n.styles_module_action__2b8e4ddb {\n border: none;\n background-color: transparent;\n}\n.theme-light .styles_module_action__2b8e4ddb {\n color: #333333;\n}\n.theme-dark .styles_module_action__2b8e4ddb {\n color: #ffffff;\n}\n\n.theme-light .styles_module_delete__2b8e4ddb {\n color: #ff383c;\n}\n.theme-dark .styles_module_delete__2b8e4ddb {\n color: #ff383c;\n}\n\n.theme-light .styles_module_add__2b8e4ddb {\n background-color: rgba(47, 129, 237, 0.5764705882);\n border-color: #e1e1e1;\n color: #ffffff;\n}\n.theme-dark .styles_module_add__2b8e4ddb {\n background-color: rgba(47, 129, 237, 0.5764705882);\n border-color: #aaaaaa;\n color: #e1e1e1;\n}\n.styles_module_add__2b8e4ddb {\n border-style: solid;\n border-width: 1px;\n border-radius: 8px;\n}\n\n.styles_module_header__2b8e4ddb {\n font-size: 18px;\n}";
|
|
6254
|
+
var modules_efc4e723$7 = {"tasksManager":"styles_module_tasksManager__2b8e4ddb","tasks":"styles_module_tasks__2b8e4ddb","task":"styles_module_task__2b8e4ddb","checked":"styles_module_checked__2b8e4ddb","title":"styles_module_title__2b8e4ddb","action":"styles_module_action__2b8e4ddb","delete":"styles_module_delete__2b8e4ddb","add":"styles_module_add__2b8e4ddb","header":"styles_module_header__2b8e4ddb"};
|
|
6248
6255
|
n$1(css$7,{});
|
|
6249
6256
|
|
|
6250
6257
|
const TasksManager = ({ onClose, isOpen, tasks, selectedDate, }) => {
|
|
@@ -6267,9 +6274,9 @@ const TasksManager = ({ onClose, isOpen, tasks, selectedDate, }) => {
|
|
|
6267
6274
|
const handleToggle = (id) => () => {
|
|
6268
6275
|
toggleTask(id);
|
|
6269
6276
|
};
|
|
6270
|
-
return (jsxs(Fragment, { children: [jsx(Modal, { isOpen: isOpen, onClose: onClose, children: jsxs("div", { className:
|
|
6271
|
-
[
|
|
6272
|
-
}), children: [jsx("input", { type: "checkbox", checked: completed, onChange: handleToggle(id) }), jsx("p", { className:
|
|
6277
|
+
return (jsxs(Fragment, { children: [jsx(Modal, { isOpen: isOpen, onClose: onClose, children: jsxs("div", { className: modules_efc4e723$7.tasksManager, children: [jsx("h1", { className: modules_efc4e723$7.header, children: "Tasks for the day:" }), jsx("button", { className: modules_efc4e723$7.add, onClick: handleAddTask, children: "Add task" }), jsxs("ul", { className: modules_efc4e723$7.tasks, children: [tasks.length < 1 && (jsx("li", { children: jsx("p", { children: "No tasks added" }) })), tasks.map(({ id, title, completed }) => (jsxs("li", { className: classNames(modules_efc4e723$7.task, {
|
|
6278
|
+
[modules_efc4e723$7.checked]: completed,
|
|
6279
|
+
}), children: [jsx("input", { type: "checkbox", checked: completed, onChange: handleToggle(id) }), jsx("p", { className: modules_efc4e723$7.title, children: title }), jsx("button", { onClick: handleEditTask(id), className: modules_efc4e723$7.action, children: jsx(SvgEdit, {}) }), jsx("button", { onClick: handleDeleteTask(id), className: classNames(modules_efc4e723$7.action, modules_efc4e723$7.delete), children: jsx(SvgDelete, {}) })] }, id)))] })] }) }), jsx(AddModal, { isOpen: addModal.isOpen, onClose: addModal.close, date: selectedDate }), jsx(EditModal, { isOpen: editModal.isOpen, onClose: editModal.close, id: currentTaskId, date: selectedDate }), jsx(DeleteModal, { isOpen: deleteModal.isOpen, onClose: deleteModal.close, id: currentTaskId })] }));
|
|
6273
6280
|
};
|
|
6274
6281
|
|
|
6275
6282
|
const useTooltip = () => {
|
|
@@ -6305,13 +6312,14 @@ const useTooltip = () => {
|
|
|
6305
6312
|
return { tooltip, handleDayMouseEnter, handleDayMouseLeave };
|
|
6306
6313
|
};
|
|
6307
6314
|
|
|
6308
|
-
var css$6 = "
|
|
6315
|
+
var css$6 = ".theme-light .styles_module_tooltip__ac28d9b8 {\n background-color: #e1e1e1;\n}\n.theme-dark .styles_module_tooltip__ac28d9b8 {\n background-color: #aaaaaa;\n}\n.styles_module_tooltip__ac28d9b8 {\n border-radius: 8px;\n padding: 2px 8px;\n position: absolute;\n}";
|
|
6316
|
+
var modules_efc4e723$6 = {"tooltip":"styles_module_tooltip__ac28d9b8"};
|
|
6309
6317
|
n$1(css$6,{});
|
|
6310
6318
|
|
|
6311
6319
|
const Tooltip = ({ isVisible, text, x, y }) => {
|
|
6312
6320
|
if (!isVisible)
|
|
6313
6321
|
return;
|
|
6314
|
-
const Tooltip = (jsx("div", { className:
|
|
6322
|
+
const Tooltip = (jsx("div", { className: modules_efc4e723$6.tooltip, style: {
|
|
6315
6323
|
top: y,
|
|
6316
6324
|
left: x,
|
|
6317
6325
|
}, children: jsx("p", { children: text }) }));
|
|
@@ -6388,13 +6396,14 @@ var SvgPrev = function SvgPrev(props) {
|
|
|
6388
6396
|
})));
|
|
6389
6397
|
};
|
|
6390
6398
|
|
|
6391
|
-
var css$5 = "
|
|
6399
|
+
var css$5 = ".theme-light .styles_module_month__0a69a8ca {\n color: #333333;\n background-color: #ffffff;\n}\n.theme-dark .styles_module_month__0a69a8ca {\n color: #ffffff;\n background-color: #333333;\n}\n.styles_module_month__0a69a8ca {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n padding-block: 5px;\n gap: 2px;\n font-weight: 700;\n}\n\n.theme-light .styles_module_arrow__0a69a8ca {\n color: #333333;\n}\n.theme-dark .styles_module_arrow__0a69a8ca {\n color: #ffffff;\n}\n.styles_module_arrow__0a69a8ca {\n width: max-content;\n border: none;\n background-color: transparent;\n}\n.theme-light .styles_module_arrow__0a69a8ca:hover {\n color: rgba(47, 129, 237, 0.5764705882);\n}\n.theme-dark .styles_module_arrow__0a69a8ca:hover {\n color: rgba(47, 129, 237, 0.5764705882);\n}";
|
|
6400
|
+
var modules_efc4e723$5 = {"month":"styles_module_month__0a69a8ca","arrow":"styles_module_arrow__0a69a8ca"};
|
|
6392
6401
|
n$1(css$5,{});
|
|
6393
6402
|
|
|
6394
6403
|
const Month = ({ date, onPrev, onNext }) => {
|
|
6395
6404
|
const year = date.getFullYear();
|
|
6396
6405
|
const month = MONTHS_NAMES[date.getMonth()];
|
|
6397
|
-
return (jsxs("div", { className:
|
|
6406
|
+
return (jsxs("div", { className: modules_efc4e723$5.month, children: [jsx("button", { className: modules_efc4e723$5.arrow, onClick: onPrev, type: "button", children: jsx(SvgPrev, {}) }), jsxs("p", { children: [month, " ", year] }), jsx("button", { className: modules_efc4e723$5.arrow, onClick: onNext, type: "button", children: jsx(SvgNext, {}) })] }));
|
|
6398
6407
|
};
|
|
6399
6408
|
|
|
6400
6409
|
const WEEKDAYS_NAMES = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
@@ -6408,7 +6417,8 @@ const getOrderedDays = (firstDayOfWeek) => {
|
|
|
6408
6417
|
}
|
|
6409
6418
|
};
|
|
6410
6419
|
|
|
6411
|
-
var css$4 = ".
|
|
6420
|
+
var css$4 = ".styles_module_weekDay__a9cd2130 {\n display: flex;\n}\n\n.styles_module_dayName__a9cd2130 {\n width: 32px;\n height: 32px;\n}\n.theme-light .styles_module_dayName__a9cd2130 {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_dayName__a9cd2130 {\n background-color: #333333;\n}\n.styles_module_dayName__a9cd2130 {\n font-size: 13px;\n padding: 10px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n}";
|
|
6421
|
+
var modules_efc4e723$4 = {"weekDay":"styles_module_weekDay__a9cd2130","dayName":"styles_module_dayName__a9cd2130"};
|
|
6412
6422
|
n$1(css$4,{});
|
|
6413
6423
|
|
|
6414
6424
|
const WeekDay = ({ firstDayOfWeek = 1, className = '', hideWeekends = false, }) => {
|
|
@@ -6416,12 +6426,13 @@ const WeekDay = ({ firstDayOfWeek = 1, className = '', hideWeekends = false, })
|
|
|
6416
6426
|
if (hideWeekends) {
|
|
6417
6427
|
days = days.filter((dayIndex) => dayIndex !== 0 && dayIndex !== 6);
|
|
6418
6428
|
}
|
|
6419
|
-
return (jsx("div", { className: classNames(
|
|
6420
|
-
return (jsx("span", { className:
|
|
6429
|
+
return (jsx("div", { className: classNames(modules_efc4e723$4.weekDay, className), children: days.map((index) => {
|
|
6430
|
+
return (jsx("span", { className: modules_efc4e723$4.dayName, children: WEEKDAYS_NAMES[index] }, WEEKDAYS_NAMES[index]));
|
|
6421
6431
|
}) }));
|
|
6422
6432
|
};
|
|
6423
6433
|
|
|
6424
|
-
var css$3 = ".
|
|
6434
|
+
var css$3 = ".styles_module_calendarGrid__eeb1dea8 {\n border-style: solid;\n border-width: 1px;\n}\n.theme-light .styles_module_calendarGrid__eeb1dea8 {\n border-color: #e1e1e1;\n background-color: #ffffff;\n}\n.theme-dark .styles_module_calendarGrid__eeb1dea8 {\n border-color: #aaaaaa;\n background-color: #333333;\n}\n.styles_module_calendarGrid__eeb1dea8 {\n padding: 10px;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n}";
|
|
6435
|
+
var modules_efc4e723$3 = {"calendarGrid":"styles_module_calendarGrid__eeb1dea8"};
|
|
6425
6436
|
n$1(css$3,{});
|
|
6426
6437
|
|
|
6427
6438
|
const BaseCalendar = ({ mode = MODES.MONTH, monthDate, firstDayOfWeek = 1, hideWeekends = false, ...props }) => {
|
|
@@ -6451,7 +6462,7 @@ const BaseCalendar = ({ mode = MODES.MONTH, monthDate, firstDayOfWeek = 1, hideW
|
|
|
6451
6462
|
}
|
|
6452
6463
|
setBaseDate(newDate);
|
|
6453
6464
|
};
|
|
6454
|
-
return (jsxs("div", { className:
|
|
6465
|
+
return (jsxs("div", { className: modules_efc4e723$3.calendarGrid, children: [jsx(Month, { date: baseDate, onPrev: onPrev, onNext: onNext }), jsx(WeekDay, { firstDayOfWeek: firstDayOfWeek, hideWeekends: hideWeekends }), jsx(CalendarGrid, { mode: mode, monthDate: baseDate, firstDayOfWeek: firstDayOfWeek, hideWeekends: hideWeekends, ...props })] }));
|
|
6455
6466
|
};
|
|
6456
6467
|
|
|
6457
6468
|
const DATE_MASK = {
|
|
@@ -6540,7 +6551,8 @@ function useValidate(selectedDate) {
|
|
|
6540
6551
|
};
|
|
6541
6552
|
}
|
|
6542
6553
|
|
|
6543
|
-
var css$2 = ".
|
|
6554
|
+
var css$2 = ".styles_module_datepicker__c32ee18d {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 8px;\n}\n.theme-light .styles_module_datepicker__c32ee18d {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_datepicker__c32ee18d {\n background-color: #333333;\n}";
|
|
6555
|
+
var modules_efc4e723$2 = {"datepicker":"styles_module_datepicker__c32ee18d"};
|
|
6544
6556
|
n$1(css$2,{});
|
|
6545
6557
|
|
|
6546
6558
|
const DatePicker = ({ selectedDate, monthDate = new Date(), onChange, ...props }) => {
|
|
@@ -6559,17 +6571,19 @@ const DatePicker = ({ selectedDate, monthDate = new Date(), onChange, ...props }
|
|
|
6559
6571
|
handleDateValidation(e.currentTarget.value);
|
|
6560
6572
|
}
|
|
6561
6573
|
};
|
|
6562
|
-
return (jsxs("div", { className:
|
|
6574
|
+
return (jsxs("div", { className: modules_efc4e723$2.datepicker, children: [jsx(Input, { isDateInput: true, label: "Date", value: value, ref: ref, placeholder: "dd/mm/yyyy", onBlur: handleDateChange, onReset: handleClearInput, onKeyDown: handleKeyDown, error: error }), jsx(BaseCalendar, { selectedDate: currentDate, onDateClick: handleDateSelectAndExternalUpdate, monthDate: currentDate ?? monthDate, ...props })] }));
|
|
6563
6575
|
};
|
|
6564
6576
|
|
|
6565
|
-
var css$1 = ".
|
|
6577
|
+
var css$1 = ".styles_module_clear__8e986404 {\n border-style: solid;\n border-width: 1px;\n}\n.theme-light .styles_module_clear__8e986404 {\n border-color: #e1e1e1;\n background-color: #ffffff;\n color: #333333;\n}\n.theme-dark .styles_module_clear__8e986404 {\n border-color: #aaaaaa;\n background-color: #333333;\n color: #ffffff;\n}\n.styles_module_clear__8e986404 {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n width: 100%;\n font-weight: 600;\n border-bottom-right-radius: 8px;\n border-bottom-left-radius: 8px;\n}\n.theme-light .styles_module_clear__8e986404:hover {\n background-color: rgba(47, 129, 237, 0.5764705882);\n color: #ffffff;\n}\n.theme-dark .styles_module_clear__8e986404:hover {\n background-color: #aaaaaa;\n color: #e1e1e1;\n}\n.styles_module_clear__8e986404:active {\n transform: scale(0.98);\n}\n.theme-light .styles_module_clear__8e986404:active {\n background-color: #2f80ed;\n color: #ffffff;\n}\n.theme-dark .styles_module_clear__8e986404:active {\n background-color: #2f80ed;\n color: #e1e1e1;\n}";
|
|
6578
|
+
var modules_efc4e723$1 = {"clear":"styles_module_clear__8e986404"};
|
|
6566
6579
|
n$1(css$1,{});
|
|
6567
6580
|
|
|
6568
6581
|
const Clear = ({ onClick }) => {
|
|
6569
|
-
return (jsx("button", { className:
|
|
6582
|
+
return (jsx("button", { className: modules_efc4e723$1.clear, type: "button", onClick: onClick, children: "Clear" }));
|
|
6570
6583
|
};
|
|
6571
6584
|
|
|
6572
|
-
var css = ".
|
|
6585
|
+
var css = ".styles_module_rangePicker__42a840f2 {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n.theme-light .styles_module_rangePicker__42a840f2 {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_rangePicker__42a840f2 {\n background-color: #333333;\n}\n\n.styles_module_calendar__42a840f2 {\n margin-top: 15px;\n}\n\n.styles_module_inputs__42a840f2 {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}";
|
|
6586
|
+
var modules_efc4e723 = {"rangePicker":"styles_module_rangePicker__42a840f2","calendar":"styles_module_calendar__42a840f2","inputs":"styles_module_inputs__42a840f2"};
|
|
6573
6587
|
n$1(css,{});
|
|
6574
6588
|
|
|
6575
6589
|
const RangePicker = ({ rangeStart, rangeEnd, monthDate = new Date(), onChangeStart, onChangeEnd, ...props }) => {
|
|
@@ -6633,7 +6647,7 @@ const RangePicker = ({ rangeStart, rangeEnd, monthDate = new Date(), onChangeSta
|
|
|
6633
6647
|
handleStartClearInput();
|
|
6634
6648
|
handleEndClearInput();
|
|
6635
6649
|
};
|
|
6636
|
-
return (jsxs("div", { className:
|
|
6650
|
+
return (jsxs("div", { className: modules_efc4e723.rangePicker, children: [jsxs("div", { className: modules_efc4e723.inputs, children: [jsx(Input, { isDateInput: true, label: "From", value: startValue, ref: startRef, placeholder: "dd/mm/yyyy", onBlur: handleStartChange, onReset: handleStartClearInput, onKeyDown: handleStartKeyDown, error: startError }), jsx(Input, { isDateInput: true, label: "To", value: endValue, ref: endRef, placeholder: "dd/mm/yyyy", onBlur: handleEndChange, onReset: handleEndClearInput, onKeyDown: handleEndKeyDown, error: endError })] }), jsxs("div", { className: modules_efc4e723.calendar, children: [jsx(BaseCalendar, { monthDate: monthDate, rangeStart: startDate, rangeEnd: endDate, onDateClick: handleDateSelectAndExternalUpdate, ...props }), jsx(Clear, { onClick: handleClearRange })] })] }));
|
|
6637
6651
|
};
|
|
6638
6652
|
|
|
6639
6653
|
export { BaseCalendar, DatePicker, FIRST_DAY_OF_WEEK, MODES, RangePicker };
|