@egov3/system-design 1.3.124 → 1.3.127
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/cjs/components/Calendar/Body/CalendarBody.module.css.js +2 -2
- package/dist/cjs/components/Calendar/Body/index.js +18 -14
- package/dist/cjs/components/Calendar/Body/index.js.map +1 -1
- package/dist/cjs/components/Calendar/Calendar.module.css.js +22 -0
- package/dist/cjs/components/Calendar/Calendar.module.css.js.map +1 -0
- package/dist/cjs/components/Calendar/Header/CalendarHeader.module.css.js +2 -2
- package/dist/cjs/components/Calendar/Header/index.js +16 -11
- package/dist/cjs/components/Calendar/Header/index.js.map +1 -1
- package/dist/cjs/components/Calendar/index.js +68 -34
- package/dist/cjs/components/Calendar/index.js.map +1 -1
- package/dist/cjs/constants/i18n/Calendar.js +42 -0
- package/dist/cjs/constants/i18n/Calendar.js.map +1 -0
- package/dist/cjs/constants/i18n/index.js +2 -0
- package/dist/cjs/constants/i18n/index.js.map +1 -1
- package/dist/cjs/customHooks/useCalendar.js +47 -32
- package/dist/cjs/customHooks/useCalendar.js.map +1 -1
- package/dist/cjs/utils/calendar.js +64 -0
- package/dist/cjs/utils/calendar.js.map +1 -0
- package/dist/cjs/utils/date/getMonthNameProper.js +27 -2
- package/dist/cjs/utils/date/getMonthNameProper.js.map +1 -1
- package/dist/esm/components/Calendar/Body/CalendarBody.module.css.js +2 -2
- package/dist/esm/components/Calendar/Body/index.js +17 -13
- package/dist/esm/components/Calendar/Body/index.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.module.css.js +18 -0
- package/dist/esm/components/Calendar/Calendar.module.css.js.map +1 -0
- package/dist/esm/components/Calendar/Header/CalendarHeader.module.css.js +2 -2
- package/dist/esm/components/Calendar/Header/index.js +15 -10
- package/dist/esm/components/Calendar/Header/index.js.map +1 -1
- package/dist/esm/components/Calendar/index.js +68 -34
- package/dist/esm/components/Calendar/index.js.map +1 -1
- package/dist/esm/constants/i18n/Calendar.js +40 -0
- package/dist/esm/constants/i18n/Calendar.js.map +1 -0
- package/dist/esm/constants/i18n/index.js +2 -0
- package/dist/esm/constants/i18n/index.js.map +1 -1
- package/dist/esm/customHooks/useCalendar.js +46 -31
- package/dist/esm/customHooks/useCalendar.js.map +1 -1
- package/dist/esm/utils/calendar.js +54 -0
- package/dist/esm/utils/calendar.js.map +1 -0
- package/dist/esm/utils/date/getMonthNameProper.js +27 -2
- package/dist/esm/utils/date/getMonthNameProper.js.map +1 -1
- package/dist/types/components/Calendar/Body/index.d.ts +3 -1
- package/dist/types/components/Calendar/index.d.ts +19 -0
- package/dist/types/index.d.ts +3 -2
- package/dist/types/interfaces/Calendar.d.ts +7 -1
- package/package.json +1 -1
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var convertType = require('./date/convertType.js');
|
|
4
|
+
|
|
5
|
+
const formatCalendarDate = (date) => {
|
|
6
|
+
if (!date) {
|
|
7
|
+
return "";
|
|
8
|
+
}
|
|
9
|
+
return `${convertType.convertType.day.toString(date.getDate())}.${convertType.convertType.month.toString(date.getMonth())}.${date.getFullYear()}`;
|
|
10
|
+
};
|
|
11
|
+
const normalizeCalendarDate = (value) => {
|
|
12
|
+
if (!value) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
const normalizedDate = value instanceof Date ? value : new Date(value);
|
|
16
|
+
return Number.isNaN(normalizedDate.getTime()) ? null : normalizedDate;
|
|
17
|
+
};
|
|
18
|
+
const getCalendarDateWithoutTime = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
19
|
+
const isSameCalendarDate = (left, right) => left.getFullYear() === right.getFullYear() &&
|
|
20
|
+
left.getMonth() === right.getMonth() &&
|
|
21
|
+
left.getDate() === right.getDate();
|
|
22
|
+
const isCalendarDateAfter = (date, maxDate) => {
|
|
23
|
+
if (!date || !maxDate) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
return (getCalendarDateWithoutTime(date).getTime() >
|
|
27
|
+
getCalendarDateWithoutTime(maxDate).getTime());
|
|
28
|
+
};
|
|
29
|
+
const getPeriodDateKey = (periodKey) => `${periodKey}Date`;
|
|
30
|
+
const updateSelectedPeriod = (currentPeriod, selectedPeriodInterval, nextDate) => {
|
|
31
|
+
const periodDateKey = getPeriodDateKey(selectedPeriodInterval);
|
|
32
|
+
const currentDate = currentPeriod[periodDateKey];
|
|
33
|
+
const isSameDate = currentDate
|
|
34
|
+
? isSameCalendarDate(currentDate, nextDate)
|
|
35
|
+
: false;
|
|
36
|
+
const nextPeriod = {
|
|
37
|
+
...currentPeriod,
|
|
38
|
+
[periodDateKey]: isSameDate ? null : nextDate,
|
|
39
|
+
};
|
|
40
|
+
return {
|
|
41
|
+
...nextPeriod,
|
|
42
|
+
periodSelected: Boolean(nextPeriod.fromDate && nextPeriod.toDate),
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
const isCalendarMonthAfterDate = (month, year, date) => year > date.getFullYear() ||
|
|
46
|
+
(year === date.getFullYear() && month > date.getMonth());
|
|
47
|
+
const clampCalendarVisibleDate = (date, maxDate) => {
|
|
48
|
+
if (!maxDate ||
|
|
49
|
+
!isCalendarMonthAfterDate(date.getMonth(), date.getFullYear(), maxDate)) {
|
|
50
|
+
return date;
|
|
51
|
+
}
|
|
52
|
+
return new Date(maxDate.getFullYear(), maxDate.getMonth(), 1);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
exports.clampCalendarVisibleDate = clampCalendarVisibleDate;
|
|
56
|
+
exports.formatCalendarDate = formatCalendarDate;
|
|
57
|
+
exports.getCalendarDateWithoutTime = getCalendarDateWithoutTime;
|
|
58
|
+
exports.getPeriodDateKey = getPeriodDateKey;
|
|
59
|
+
exports.isCalendarDateAfter = isCalendarDateAfter;
|
|
60
|
+
exports.isCalendarMonthAfterDate = isCalendarMonthAfterDate;
|
|
61
|
+
exports.isSameCalendarDate = isSameCalendarDate;
|
|
62
|
+
exports.normalizeCalendarDate = normalizeCalendarDate;
|
|
63
|
+
exports.updateSelectedPeriod = updateSelectedPeriod;
|
|
64
|
+
//# sourceMappingURL=calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.js","sources":["../../../src/utils/calendar.tsx"],"sourcesContent":[null],"names":["convertType"],"mappings":"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"}
|
|
@@ -2,8 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index.js');
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
|
|
5
|
+
const localeByLang = {
|
|
6
|
+
ru: "ru-RU",
|
|
7
|
+
kk: "kk-KZ",
|
|
8
|
+
en: "en-US",
|
|
9
|
+
};
|
|
10
|
+
const monthNamesByLang = {
|
|
11
|
+
kk: [
|
|
12
|
+
"Қаңтар",
|
|
13
|
+
"Ақпан",
|
|
14
|
+
"Наурыз",
|
|
15
|
+
"Сәуір",
|
|
16
|
+
"Мамыр",
|
|
17
|
+
"Маусым",
|
|
18
|
+
"Шілде",
|
|
19
|
+
"Тамыз",
|
|
20
|
+
"Қыркүйек",
|
|
21
|
+
"Қазан",
|
|
22
|
+
"Қараша",
|
|
23
|
+
"Желтоқсан",
|
|
24
|
+
],
|
|
25
|
+
};
|
|
26
|
+
const getMonthNameProper = (month, lang) => {
|
|
27
|
+
const translatedMonthName = monthNamesByLang[lang]?.[month];
|
|
28
|
+
if (translatedMonthName) {
|
|
29
|
+
return translatedMonthName;
|
|
30
|
+
}
|
|
31
|
+
const monthName = new Date(index.currentYear, month).toLocaleString(localeByLang[lang], {
|
|
7
32
|
month: "long",
|
|
8
33
|
});
|
|
9
34
|
return monthName.charAt(0).toUpperCase() + monthName.slice(1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getMonthNameProper.js","sources":["../../../../src/utils/date/getMonthNameProper.tsx"],"sourcesContent":[null],"names":["currentYear"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"getMonthNameProper.js","sources":["../../../../src/utils/date/getMonthNameProper.tsx"],"sourcesContent":[null],"names":["currentYear"],"mappings":";;;;AAGA,MAAM,YAAY,GAAuC;AACvD,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;CACZ;AAED,MAAM,gBAAgB,GAAkD;AACtE,IAAA,EAAE,EAAE;QACF,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,OAAO;QACP,OAAO;QACP,QAAQ;QACR,OAAO;QACP,OAAO;QACP,UAAU;QACV,OAAO;QACP,QAAQ;QACR,WAAW;AACZ,KAAA;CACF;MAEY,kBAAkB,GAAG,CAChC,KAAa,EACb,IAAwB,KACd;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;AAE3D,IAAA,IAAI,mBAAmB,EAAE;AACvB,QAAA,OAAO,mBAAmB;AAC3B,IAAA;AAED,IAAA,MAAM,SAAS,GAAG,IAAI,IAAI,CAACA,iBAAW,EAAE,KAAK,CAAC,CAAC,cAAc,CAC3D,YAAY,CAAC,IAAI,CAAC,EAClB;AACE,QAAA,KAAK,EAAE,MAAM;AACd,KAAA,CACF;AACD,IAAA,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;AAC/D;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var css_248z = ".CalendarBody-module_wrapper__fd17C {\n display: flex;\n flex-direction: column;\n color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_header__33b3Q {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.CalendarBody-module_monthYear__efUvQ {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n color: var(--text-primary);\n}\n\n.CalendarBody-module_yearButton__Y76y1 {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.CalendarBody-module_navButton__cGVVz {\n padding: 0;\n cursor: pointer;\n}\n\n.CalendarBody-module_weekDays__zXG3- {\n height: 24px;\n}\n\n.CalendarBody-module_grid__HNGTZ,\n.CalendarBody-module_weekDays__zXG3- {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n column-gap: calc((100% - 7 * 28px) / 6);\n text-align: center;\n}\n\n.CalendarBody-module_weekDay__hzksZ,\n.CalendarBody-module_day__0KNDZ {\n width: 28px;\n}\n\n.CalendarBody-module_day__0KNDZ {\n cursor: pointer;\n color: var(--text-primary);\n height: 28px;\n}\n\n.CalendarBody-module_muted__8XysY {\n color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_hiddenDay__mCCeF {\n visibility: hidden;\n pointer-events: none;\n}\n\n.CalendarBody-module_disabledDay__aHTaz {\n color: var(--text-disabled-color);\n cursor: not-allowed;\n}\n\n.CalendarBody-module_selected__86UkJ {\n background-color: var(--surface-accent);\n color: var(--text-white-nonconvert-color);\n border-radius: 100px;\n}\n\n.CalendarBody-module_years__4Peqd {\n max-height: calc(5 * 24px + 4 * 6px);\n margin: 8px;\n overflow-y: auto;\n display: grid;\n grid-auto-rows: 24px;\n row-gap: 6px;\n}\n\n.CalendarBody-module_yearItem__mr9MS {\n cursor: pointer;\n color: var(--text-disabled-color);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.CalendarBody-module_yearItemSelected__HsDcR {\n color: var(--text-primary);\n}\n";
|
|
2
|
-
var styles = {"wrapper":"CalendarBody-module_wrapper__fd17C","header":"CalendarBody-module_header__33b3Q","monthYear":"CalendarBody-module_monthYear__efUvQ","yearButton":"CalendarBody-module_yearButton__Y76y1","navButton":"CalendarBody-module_navButton__cGVVz","weekDays":"CalendarBody-module_weekDays__zXG3-","grid":"CalendarBody-module_grid__HNGTZ","weekDay":"CalendarBody-module_weekDay__hzksZ","day":"CalendarBody-module_day__0KNDZ","hiddenDay":"CalendarBody-module_hiddenDay__mCCeF","disabledDay":"CalendarBody-module_disabledDay__aHTaz","selected":"CalendarBody-module_selected__86UkJ"};
|
|
1
|
+
var css_248z = ".CalendarBody-module_wrapper__fd17C {\n display: flex;\n flex-direction: column;\n color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_header__33b3Q {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.CalendarBody-module_monthYear__efUvQ {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n color: var(--text-primary);\n}\n\n.CalendarBody-module_yearButton__Y76y1 {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.CalendarBody-module_navButton__cGVVz {\n padding: 0;\n cursor: pointer;\n}\n\n.CalendarBody-module_weekDays__zXG3- {\n height: 24px;\n}\n\n.CalendarBody-module_grid__HNGTZ,\n.CalendarBody-module_weekDays__zXG3- {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n column-gap: calc((100% - 7 * 28px) / 6);\n text-align: center;\n}\n\n.CalendarBody-module_weekDay__hzksZ,\n.CalendarBody-module_day__0KNDZ {\n width: 28px;\n}\n\n.CalendarBody-module_day__0KNDZ {\n cursor: pointer;\n color: var(--text-primary);\n height: 28px;\n}\n\n.CalendarBody-module_muted__8XysY {\n color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_hiddenDay__mCCeF {\n visibility: hidden;\n pointer-events: none;\n}\n\n.CalendarBody-module_disabledDay__aHTaz {\n color: var(--text-disabled-color);\n cursor: not-allowed;\n}\n\n.CalendarBody-module_selected__86UkJ {\n background-color: var(--surface-accent);\n color: var(--text-white-nonconvert-color);\n border-radius: 100px;\n}\n\n.CalendarBody-module_today__Igk3j {\n border: 1px solid var(--surface-accent);\n border-radius: 100px;\n}\n\n.CalendarBody-module_years__4Peqd {\n max-height: calc(5 * 24px + 4 * 6px);\n margin: 8px;\n overflow-y: auto;\n display: grid;\n grid-auto-rows: 24px;\n row-gap: 6px;\n}\n\n.CalendarBody-module_yearItem__mr9MS {\n cursor: pointer;\n color: var(--text-disabled-color);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.CalendarBody-module_yearItemSelected__HsDcR {\n color: var(--text-primary);\n}\n";
|
|
2
|
+
var styles = {"wrapper":"CalendarBody-module_wrapper__fd17C","header":"CalendarBody-module_header__33b3Q","monthYear":"CalendarBody-module_monthYear__efUvQ","yearButton":"CalendarBody-module_yearButton__Y76y1","navButton":"CalendarBody-module_navButton__cGVVz","weekDays":"CalendarBody-module_weekDays__zXG3-","grid":"CalendarBody-module_grid__HNGTZ","weekDay":"CalendarBody-module_weekDay__hzksZ","day":"CalendarBody-module_day__0KNDZ","hiddenDay":"CalendarBody-module_hiddenDay__mCCeF","disabledDay":"CalendarBody-module_disabledDay__aHTaz","selected":"CalendarBody-module_selected__86UkJ","today":"CalendarBody-module_today__Igk3j","years":"CalendarBody-module_years__4Peqd","yearItem":"CalendarBody-module_yearItem__mr9MS","yearItemSelected":"CalendarBody-module_yearItemSelected__HsDcR"};
|
|
3
3
|
function styleInject(css, options) {
|
|
4
4
|
if (typeof document === 'undefined') return;
|
|
5
5
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -2,24 +2,26 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Icons } from '@egov3/graphics';
|
|
3
3
|
import { BaseComponents } from '../../../baseComponents/index.js';
|
|
4
4
|
import { PERIOD_KEYS } from '../../../constants/calendar/index.js';
|
|
5
|
+
import { i18n } from '../../../constants/i18n/index.js';
|
|
6
|
+
import { useCalendar } from '../../../customHooks/useCalendar.js';
|
|
5
7
|
import { getMonthNameProper } from '../../../utils/date/getMonthNameProper.js';
|
|
6
8
|
import { joinClasses } from '../../../utils/joinClasses.js';
|
|
7
|
-
import { useCalendar } from '../../../customHooks/useCalendar.js';
|
|
8
9
|
import styles from './CalendarBody.module.css.js';
|
|
9
10
|
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const { days, visibleMonth, visibleYear, isYearPickerOpen, setIsYearPickerOpen, changeMonth} = useCalendar({
|
|
11
|
+
const CalendarBody = ({ lang, month = new Date().getMonth(), year = new Date().getFullYear(), selectedDate = null, rangeStart = null, rangeEnd = null, maxDate = null, selectedPeriodInterval = PERIOD_KEYS.from, onDayClick, onMonthChange, }) => {
|
|
12
|
+
const { days, years, visibleMonth, visibleYear, isYearPickerOpen, isNextMonthDisabled, setIsYearPickerOpen, yearListRef, changeMonth, pickYear, } = useCalendar({
|
|
13
13
|
month,
|
|
14
14
|
year,
|
|
15
15
|
selectedDate,
|
|
16
16
|
selectedPeriodInterval,
|
|
17
17
|
rangeStart,
|
|
18
18
|
rangeEnd,
|
|
19
|
+
maxDate,
|
|
19
20
|
onMonthChange,
|
|
20
21
|
});
|
|
21
|
-
const monthName = getMonthNameProper(visibleMonth);
|
|
22
|
-
|
|
22
|
+
const monthName = getMonthNameProper(visibleMonth, lang);
|
|
23
|
+
const weekDays = i18n.Calendar.WeekDays[lang];
|
|
24
|
+
return (jsxs("div", { className: styles.wrapper, "data-testid": "CalendarBody", children: [jsxs("div", { className: styles.header, "data-testid": "CalendarBody_HEADER", children: [jsxs("div", { className: styles.monthYear, "data-testid": "Calendar_MONTH_YEAR_LABEL", children: [jsx(BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "CalendarBody_MONTH_YEAR", children: monthName }), jsxs("button", { className: styles.yearButton, type: "button", onClick: () => {
|
|
23
25
|
setIsYearPickerOpen(true);
|
|
24
26
|
}, "data-testid": "Calendar_CHOOSE_YEAR_BTN", children: [jsx(BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "Calendar_CURRENT_YEAR", children: visibleYear }), jsx(Icons.Basic.ChevronDownSmall, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" })] })] }), isYearPickerOpen ? (jsx("button", { type: "button", onClick: () => {
|
|
25
27
|
setIsYearPickerOpen(false);
|
|
@@ -27,13 +29,15 @@ const CalendarBody = ({ month = new Date().getMonth(), year = new Date().getFull
|
|
|
27
29
|
changeMonth(-1);
|
|
28
30
|
}, "data-testid": "Calendar_PREV_MONTH_BTN", children: jsx(Icons.Basic.ChevronLeft, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) }), jsx("button", { className: styles.navButton, type: "button", onClick: () => {
|
|
29
31
|
changeMonth(1);
|
|
30
|
-
}, "data-testid": "Calendar_NEXT_MONTH_BTN", children: jsx(Icons.Basic.ChevronRight, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) })] }))] }), jsx("div", { className: styles.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
}, "data-testid": "Calendar_NEXT_MONTH_BTN", disabled: isNextMonthDisabled, children: jsx(Icons.Basic.ChevronRight, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) })] }))] }), isYearPickerOpen ? (jsx("div", { ref: yearListRef, className: styles.years, "data-testid": "Calendar_YEARS_LIST", children: years.map((yearItem) => (jsx("button", { "data-testid": `CalendarBody_YEAR_${yearItem}`, "data-year": yearItem, type: "button", className: joinClasses(styles.yearItem, yearItem === visibleYear && styles.yearItemSelected), onClick: () => {
|
|
33
|
+
pickYear(yearItem);
|
|
34
|
+
}, children: jsx(BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", children: yearItem }) }, yearItem))) })) : (jsxs(Fragment, { children: [jsx("div", { className: styles.weekDays, "data-testid": "Calendar_WEEK_DAYS", children: weekDays.map((day) => (jsx(BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", className: styles.weekDay, "data-testid": `CalendarBody_WEEK_DAY_${day}`, children: day }, day))) }), jsx("div", { className: styles.grid, "data-testid": "Calendar_DAYS_GRID", children: days.map((cell) => {
|
|
35
|
+
return (jsx("button", { type: "button", className: joinClasses(styles.day, !cell.isCurrentMonth && styles.hiddenDay, cell.isDisabled && styles.disabledDay, cell.isToday && styles.today, cell.isSelected && styles.selected), onClick: () => {
|
|
36
|
+
if (cell.isCurrentMonth && !cell.isDisabled) {
|
|
37
|
+
onDayClick?.(cell.date);
|
|
38
|
+
}
|
|
39
|
+
}, disabled: !cell.isCurrentMonth || cell.isDisabled, "data-testid": `CalendarBody_DAY_${cell.date.toISOString().slice(0, 10)}`, children: cell.isCurrentMonth && (jsx(BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", "data-testid": `CalendarBody_DAY_${cell.date.toISOString().slice(0, 10)}_LABEL`, children: cell.day })) }, cell.date.toISOString()));
|
|
40
|
+
}) })] }))] }));
|
|
37
41
|
};
|
|
38
42
|
|
|
39
43
|
export { CalendarBody };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var css_248z = ".Calendar-module_wrapper__4sYTJ {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px;\n}\n";
|
|
2
|
+
var styles = {"wrapper":"Calendar-module_wrapper__4sYTJ"};
|
|
3
|
+
function styleInject(css, options) {
|
|
4
|
+
if (typeof document === 'undefined') return;
|
|
5
|
+
const head = document.head || document.getElementsByTagName('head')[0];
|
|
6
|
+
const style = document.createElement('style');
|
|
7
|
+
style.type = 'text/css';
|
|
8
|
+
if (style.styleSheet) {
|
|
9
|
+
style.styleSheet.cssText = css;
|
|
10
|
+
} else {
|
|
11
|
+
style.appendChild(document.createTextNode(css));
|
|
12
|
+
}
|
|
13
|
+
head.appendChild(style);
|
|
14
|
+
}
|
|
15
|
+
styleInject(css_248z);
|
|
16
|
+
|
|
17
|
+
export { styles as default };
|
|
18
|
+
//# sourceMappingURL=Calendar.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var css_248z = ".CalendarHeader-module_tab__-gPIw {\n width: 368px;\n display: flex;\n gap: 8px;\n}\n";
|
|
2
|
-
var styles = {"tab":"CalendarHeader-module_tab__-gPIw"};
|
|
1
|
+
var css_248z = ".CalendarHeader-module_tab__-gPIw {\n width: 368px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n flex: 1 0 0;\n}\n\n.CalendarHeader-module_titleActiv__AqXMv {\n padding: 8px 0px;\n width: 180px;\n color: var(--text-primary);\n text-align: center;\n border-bottom: 2px solid var(--icon-accent-color);\n}\n\n.CalendarHeader-module_title__P2RVF {\n width: 180px;\n padding: 8px 0px;\n color: var(--text-disabled-color);\n text-align: center;\n border-bottom: 2px solid var(--surface-surface-3-color);\n}\n\n.CalendarHeader-module_titleError__zDkX0 {\n text-align: center;\n border-bottom: 2px solid var(--text-error);\n}\n";
|
|
2
|
+
var styles = {"tab":"CalendarHeader-module_tab__-gPIw","titleActiv":"CalendarHeader-module_titleActiv__AqXMv","title":"CalendarHeader-module_title__P2RVF"};
|
|
3
3
|
function styleInject(css, options) {
|
|
4
4
|
if (typeof document === 'undefined') return;
|
|
5
5
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -1,19 +1,24 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { BaseComponents } from '../../../baseComponents/index.js';
|
|
3
3
|
import { PERIOD_KEYS } from '../../../constants/calendar/index.js';
|
|
4
|
-
import {
|
|
4
|
+
import { i18n } from '../../../constants/i18n/index.js';
|
|
5
|
+
import { formatCalendarDate, getPeriodDateKey } from '../../../utils/calendar.js';
|
|
5
6
|
import styles from './CalendarHeader.module.css.js';
|
|
6
7
|
|
|
7
|
-
const CalendarHeader = ({ setSelectedPeriodInterval, selectedPeriodInterval, selectedPeriod, }) => {
|
|
8
|
+
const CalendarHeader = ({ lang, setSelectedPeriodInterval, selectedPeriodInterval, selectedPeriod, }) => {
|
|
9
|
+
const langDic = i18n.Calendar;
|
|
8
10
|
const tabs = [
|
|
9
|
-
{ key: PERIOD_KEYS.from, label:
|
|
10
|
-
{ key: PERIOD_KEYS.to, label:
|
|
11
|
+
{ key: PERIOD_KEYS.from, label: langDic.PeriodFrom[lang] },
|
|
12
|
+
{ key: PERIOD_KEYS.to, label: langDic.PeriodTo[lang] },
|
|
11
13
|
];
|
|
12
|
-
return (jsx("div", { "data-testid": "CalendarTab_WRAP", className: styles.tab, children: tabs.map((tab) =>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
return (jsx("div", { "data-testid": "CalendarTab_WRAP", className: styles.tab, children: tabs.map((tab) => {
|
|
15
|
+
const dateLabel = formatCalendarDate(selectedPeriod[getPeriodDateKey(tab.key)]) ||
|
|
16
|
+
"...*";
|
|
17
|
+
const tabClassName = selectedPeriodInterval === tab.key ? styles.titleActiv : styles.title;
|
|
18
|
+
return (jsx("button", { type: "button", "data-testid": `CalendarTabButton_${tab.key.toUpperCase()}`, className: tabClassName, onClick: () => {
|
|
19
|
+
setSelectedPeriodInterval(tab.key);
|
|
20
|
+
}, "aria-label": `${langDic.TabButtonAria[lang]} ${tab.label}`, children: jsxs(BaseComponents.Typography, { "data-testid": `CalendarTabTitle_${tab.key.toUpperCase()}`, tag: "span", fontClass: "body1Medium", "aria-label": tab.label, children: [tab.label, " ", dateLabel] }) }, tab.key));
|
|
21
|
+
}) }));
|
|
17
22
|
};
|
|
18
23
|
|
|
19
24
|
export { CalendarHeader };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Header/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Header/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;AAcO,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,yBAAyB,EACzB,sBAAsB,EACtB,cAAc,GACD,KAAI;AACjB,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ;AAE7B,IAAA,MAAM,IAAI,GAA0C;AAClD,QAAA,EAAE,GAAG,EAAE,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;AAC1D,QAAA,EAAE,GAAG,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;KACvD;AACD,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,kBAAkB,EAAC,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA,QAAA,EACtD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AAChB,YAAA,MAAM,SAAS,GACb,kBAAkB,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7D,gBAAA,MAAM;AACR,YAAA,MAAM,YAAY,GAChB,sBAAsB,KAAK,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK;YAEvE,QACEA,gBACE,IAAI,EAAC,QAAQ,EAAA,aAAA,EAEA,CAAA,kBAAA,EAAqB,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,CAAA,CAAE,EACzD,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAK;AACZ,oBAAA,yBAAyB,CAAC,GAAG,CAAC,GAAG,CAAC;gBACpC,CAAC,EAAA,YAAA,EACW,CAAA,EAAG,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,KAAK,EAAE,EAAA,QAAA,EAEzDC,IAAA,CAAC,cAAc,CAAC,UAAU,EAAA,EAAA,aAAA,EACX,oBAAoB,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,EACxD,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,aAAa,EAAA,YAAA,EACX,GAAG,CAAC,KAAK,EAAA,QAAA,EAAA,CAEpB,GAAG,CAAC,KAAK,EAAA,GAAA,EAAG,SAAS,CAAA,EAAA,CACI,EAAA,EAfvB,GAAG,CAAC,GAAG,CAgBL;QAEb,CAAC,CAAC,EAAA,CACE;AAEV;;;;"}
|
|
@@ -1,46 +1,80 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useState
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useState } from 'react';
|
|
3
3
|
import { BaseComponents } from '../../baseComponents/index.js';
|
|
4
4
|
import { PERIOD_KEYS } from '../../constants/calendar/index.js';
|
|
5
|
-
import {
|
|
5
|
+
import { i18n } from '../../constants/i18n/index.js';
|
|
6
|
+
import { normalizeCalendarDate, isCalendarDateAfter, updateSelectedPeriod } from '../../utils/calendar.js';
|
|
6
7
|
import { CalendarBody } from './Body/index.js';
|
|
8
|
+
import styles from './Calendar.module.css.js';
|
|
7
9
|
import { CalendarHeader } from './Header/index.js';
|
|
8
10
|
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const [day, month, year] = value.split(".").map(Number);
|
|
14
|
-
return new Date(year, month - 1, day);
|
|
11
|
+
const EMPTY_PERIOD = {
|
|
12
|
+
fromDate: null,
|
|
13
|
+
toDate: null,
|
|
14
|
+
periodSelected: false,
|
|
15
15
|
};
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
16
|
+
const normalizeSelectedPeriod = (period = EMPTY_PERIOD) => {
|
|
17
|
+
const fromDate = normalizeCalendarDate(period.fromDate);
|
|
18
|
+
const toDate = normalizeCalendarDate(period.toDate);
|
|
19
|
+
return {
|
|
20
|
+
...period,
|
|
21
|
+
fromDate,
|
|
22
|
+
toDate,
|
|
23
|
+
periodSelected: Boolean(fromDate && toDate),
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
const Calendar = ({ mode = "period", isOpen = true, setIsOpen, lang, title, maxDate = null, selectedDate, selectedPeriod, defaultPeriodInterval = PERIOD_KEYS.from, onDateChange, onPeriodChange, onSave, }) => {
|
|
27
|
+
const langDic = i18n.Calendar;
|
|
28
|
+
const isPeriodMode = mode === "period";
|
|
29
|
+
const normalizedMaxDate = normalizeCalendarDate(maxDate);
|
|
30
|
+
const normalizedSelectedDate = normalizeCalendarDate(selectedDate);
|
|
31
|
+
const actualSelectedPeriod = normalizeSelectedPeriod(selectedPeriod);
|
|
32
|
+
const [selectedPeriodInterval, setSelectedPeriodInterval] = useState(defaultPeriodInterval);
|
|
33
|
+
const rangeStart = actualSelectedPeriod.fromDate ?? null;
|
|
34
|
+
const rangeEnd = actualSelectedPeriod.toDate ?? null;
|
|
35
|
+
let selectedCalendarDate = normalizedSelectedDate;
|
|
36
|
+
if (isPeriodMode) {
|
|
37
|
+
selectedCalendarDate =
|
|
38
|
+
selectedPeriodInterval === PERIOD_KEYS.from ? rangeStart : rangeEnd;
|
|
39
|
+
}
|
|
40
|
+
const visibleDate = selectedCalendarDate ?? new Date();
|
|
41
|
+
const defaultModalTitle = isPeriodMode
|
|
42
|
+
? langDic.SelectPeriodTitle[lang]
|
|
43
|
+
: langDic.SelectDateTitle[lang];
|
|
44
|
+
const modalTitle = title ?? defaultModalTitle;
|
|
45
|
+
const isSaveDisabled = isPeriodMode
|
|
46
|
+
? !actualSelectedPeriod.periodSelected ||
|
|
47
|
+
isCalendarDateAfter(rangeEnd, normalizedMaxDate)
|
|
48
|
+
: !normalizedSelectedDate ||
|
|
49
|
+
isCalendarDateAfter(normalizedSelectedDate, normalizedMaxDate);
|
|
50
|
+
const handleDateChange = (date) => {
|
|
51
|
+
const nextDate = normalizedSelectedDate?.getTime() === date.getTime() ? null : date;
|
|
52
|
+
onDateChange?.(nextDate);
|
|
53
|
+
};
|
|
54
|
+
const handlePeriodChange = (date) => {
|
|
55
|
+
const nextPeriod = updateSelectedPeriod(actualSelectedPeriod, selectedPeriodInterval, date);
|
|
56
|
+
onPeriodChange?.(nextPeriod);
|
|
57
|
+
};
|
|
27
58
|
const handleDayClick = (date) => {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
};
|
|
34
|
-
return {
|
|
35
|
-
...next,
|
|
36
|
-
periodSelected: Boolean(next.fromDate && next.toDate),
|
|
37
|
-
};
|
|
38
|
-
});
|
|
59
|
+
if (isPeriodMode) {
|
|
60
|
+
handlePeriodChange(date);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
handleDateChange(date);
|
|
39
64
|
};
|
|
40
|
-
const
|
|
41
|
-
|
|
65
|
+
const handleSave = () => {
|
|
66
|
+
onSave?.(isPeriodMode ? actualSelectedPeriod : normalizedSelectedDate);
|
|
42
67
|
};
|
|
43
|
-
return (
|
|
68
|
+
return (jsx(BaseComponents.Modal, { variant: "small", setIsOpen: setIsOpen, isOpen: isOpen, lang: lang, header: {
|
|
69
|
+
isClosable: true,
|
|
70
|
+
title: modalTitle,
|
|
71
|
+
}, footerButtons: [
|
|
72
|
+
{
|
|
73
|
+
text: langDic.SaveButton[lang],
|
|
74
|
+
onClick: handleSave,
|
|
75
|
+
isDisabled: isSaveDisabled,
|
|
76
|
+
},
|
|
77
|
+
], children: jsxs("div", { className: styles.wrapper, "data-testid": "Calendar_WRAPPER", children: [isPeriodMode && (jsx(CalendarHeader, { lang: lang, selectedPeriod: actualSelectedPeriod, selectedPeriodInterval: selectedPeriodInterval, setSelectedPeriodInterval: setSelectedPeriodInterval })), jsx(CalendarBody, { lang: lang, month: visibleDate.getMonth(), year: visibleDate.getFullYear(), selectedDate: selectedCalendarDate, selectedPeriodInterval: selectedPeriodInterval, rangeStart: rangeStart, rangeEnd: rangeEnd, maxDate: normalizedMaxDate, onDayClick: handleDayClick })] }) }));
|
|
44
78
|
};
|
|
45
79
|
|
|
46
80
|
export { Calendar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Calendar/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Calendar/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
const Calendar = {
|
|
2
|
+
SaveButton: {
|
|
3
|
+
ru: "Сохранить",
|
|
4
|
+
kk: "Сақтау",
|
|
5
|
+
en: "Save",
|
|
6
|
+
},
|
|
7
|
+
SelectDateTitle: {
|
|
8
|
+
ru: "Выберите дату",
|
|
9
|
+
kk: "Күнді таңдаңыз",
|
|
10
|
+
en: "Select date",
|
|
11
|
+
},
|
|
12
|
+
SelectPeriodTitle: {
|
|
13
|
+
ru: "Выберите период",
|
|
14
|
+
kk: "Кезеңді таңдаңыз",
|
|
15
|
+
en: "Select period",
|
|
16
|
+
},
|
|
17
|
+
PeriodFrom: {
|
|
18
|
+
ru: "Период с",
|
|
19
|
+
kk: "Кезең басы",
|
|
20
|
+
en: "Period from",
|
|
21
|
+
},
|
|
22
|
+
PeriodTo: {
|
|
23
|
+
ru: "Период до",
|
|
24
|
+
kk: "Кезең соңы",
|
|
25
|
+
en: "Period to",
|
|
26
|
+
},
|
|
27
|
+
TabButtonAria: {
|
|
28
|
+
ru: "Кнопка",
|
|
29
|
+
kk: "Батырма",
|
|
30
|
+
en: "Button",
|
|
31
|
+
},
|
|
32
|
+
WeekDays: {
|
|
33
|
+
ru: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
|
|
34
|
+
kk: ["Дс", "Сс", "Ср", "Бс", "Жм", "Сн", "Жс"],
|
|
35
|
+
en: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export { Calendar };
|
|
40
|
+
//# sourceMappingURL=Calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../../../src/constants/i18n/Calendar.tsx"],"sourcesContent":[null],"names":[],"mappings":"AAAO,MAAM,QAAQ,GAAG;AACtB,IAAA,UAAU,EAAE;AACV,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,gBAAgB;AACpB,QAAA,EAAE,EAAE,aAAa;AAClB,KAAA;AACD,IAAA,iBAAiB,EAAE;AACjB,QAAA,EAAE,EAAE,iBAAiB;AACrB,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,EAAE,EAAE,eAAe;AACpB,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,EAAE,EAAE,UAAU;AACd,QAAA,EAAE,EAAE,YAAY;AAChB,QAAA,EAAE,EAAE,aAAa;AAClB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,EAAE,EAAE,YAAY;AAChB,QAAA,EAAE,EAAE,WAAW;AAChB,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,QAAQ;AACb,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAC9C,QAAA,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAC9C,QAAA,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AACtD,KAAA;;;;;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Calendar } from './Calendar.js';
|
|
1
2
|
import { Common } from './Common.js';
|
|
2
3
|
import { ErrorModal } from './ErrorModal.js';
|
|
3
4
|
import { Agreement } from './Identity/Agreement.js';
|
|
@@ -18,6 +19,7 @@ import { Feedback } from './Services/Feedback.js';
|
|
|
18
19
|
import { FileUpload } from './Services/FileUpload.js';
|
|
19
20
|
|
|
20
21
|
const i18n = {
|
|
22
|
+
Calendar,
|
|
21
23
|
Common,
|
|
22
24
|
DocCard,
|
|
23
25
|
Feedback,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/constants/i18n/index.tsx"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/constants/i18n/index.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,IAAI,GAAG;IAClB,QAAQ;IACR,MAAM;IACN,OAAO;IACP,QAAQ;IACR,KAAK;IACL,cAAc;IACd,eAAe;IACf,UAAU;IACV,WAAW;IACX,oBAAoB;IACpB,UAAU;IACV,IAAI;IACJ,SAAS;IACT,oBAAoB;IACpB,OAAO;IACP,aAAa;IACb,kBAAkB;IAClB,UAAU;IACV,SAAS;;;;;"}
|