@egov3/system-design 1.3.122 → 1.3.123
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 +1 -1
- package/dist/cjs/components/Calendar/Body/index.js +10 -11
- package/dist/cjs/components/Calendar/Body/index.js.map +1 -1
- package/dist/cjs/customHooks/useCalendar.js +37 -6
- package/dist/cjs/customHooks/useCalendar.js.map +1 -1
- package/dist/esm/components/Calendar/Body/CalendarBody.module.css.js +1 -1
- package/dist/esm/components/Calendar/Body/index.js +12 -13
- package/dist/esm/components/Calendar/Body/index.js.map +1 -1
- package/dist/esm/customHooks/useCalendar.js +38 -7
- package/dist/esm/customHooks/useCalendar.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var css_248z = ".CalendarBody-module_wrapper__fd17C {\n display: flex;\n flex-direction: column;\n
|
|
5
|
+
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_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";
|
|
6
6
|
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","selected":"CalendarBody-module_selected__86UkJ"};
|
|
7
7
|
function styleInject(css, options) {
|
|
8
8
|
if (typeof document === 'undefined') return;
|
|
@@ -10,18 +10,17 @@ var CalendarBody_module = require('./CalendarBody.module.css.js');
|
|
|
10
10
|
|
|
11
11
|
const WEEK_DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
12
12
|
const CalendarBody = ({ month = new Date().getMonth(), year = new Date().getFullYear(), selectedDate = null, onDayClick, onMonthChange, }) => {
|
|
13
|
-
const { days, visibleMonth, visibleYear, changeMonth
|
|
14
|
-
month,
|
|
15
|
-
year,
|
|
16
|
-
selectedDate,
|
|
17
|
-
onMonthChange,
|
|
18
|
-
});
|
|
13
|
+
const { days, visibleMonth, visibleYear, isYearPickerOpen, setIsYearPickerOpen, changeMonth} = useCalendar.useCalendar({ month, year, selectedDate, onMonthChange });
|
|
19
14
|
const monthName = getMonthNameProper.getMonthNameProper(visibleMonth);
|
|
20
|
-
return (jsxRuntime.jsxs("div", { className: CalendarBody_module.default.wrapper, "data-testid": "CalendarBody", children: [jsxRuntime.jsxs("div", { className: CalendarBody_module.default.header, children: [jsxRuntime.jsxs("div", { className: CalendarBody_module.default.monthYear, "data-testid": "Calendar_MONTH_YEAR_LABEL", children: [jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "CalendarBody_MONTH_YEAR", children: monthName }), jsxRuntime.jsxs("button", { className: CalendarBody_module.default.yearButton, type: "button", onClick: () => {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, "data-testid": "
|
|
15
|
+
return (jsxRuntime.jsxs("div", { className: CalendarBody_module.default.wrapper, "data-testid": "CalendarBody", children: [jsxRuntime.jsxs("div", { className: CalendarBody_module.default.header, children: [jsxRuntime.jsxs("div", { className: CalendarBody_module.default.monthYear, "data-testid": "Calendar_MONTH_YEAR_LABEL", children: [jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "CalendarBody_MONTH_YEAR", children: monthName }), jsxRuntime.jsxs("button", { className: CalendarBody_module.default.yearButton, type: "button", onClick: () => {
|
|
16
|
+
setIsYearPickerOpen(true);
|
|
17
|
+
}, "data-testid": "Calendar_CHOOSE_YEAR_BTN", children: [jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "Calendar_CURRENT_YEAR", children: visibleYear }), jsxRuntime.jsx(graphics.Icons.Basic.ChevronDownSmall, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" })] })] }), isYearPickerOpen ? (jsxRuntime.jsx("button", { type: "button", onClick: () => {
|
|
18
|
+
setIsYearPickerOpen(false);
|
|
19
|
+
}, "data-testid": "Calendar_CLOSE_YEAR_PICKER_BTN", children: jsxRuntime.jsx(graphics.Icons.General.Close, { width: "24px", height: "24px" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: CalendarBody_module.default.navButton, type: "button", onClick: () => {
|
|
20
|
+
changeMonth(-1);
|
|
21
|
+
}, "data-testid": "Calendar_PREV_MONTH_BTN", children: jsxRuntime.jsx(graphics.Icons.Basic.ChevronLeft, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) }), jsxRuntime.jsx("button", { className: CalendarBody_module.default.navButton, type: "button", onClick: () => {
|
|
22
|
+
changeMonth(1);
|
|
23
|
+
}, "data-testid": "Calendar_NEXT_MONTH_BTN", children: jsxRuntime.jsx(graphics.Icons.Basic.ChevronRight, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) })] }))] }), jsxRuntime.jsx("div", { className: CalendarBody_module.default.weekDays, children: WEEK_DAYS.map((day) => (jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", className: CalendarBody_module.default.weekDay, children: day }, day))) }), jsxRuntime.jsx("div", { className: CalendarBody_module.default.grid, children: days.map((cell) => {
|
|
25
24
|
return (jsxRuntime.jsx("button", { type: "button", className: joinClasses.joinClasses(CalendarBody_module.default.day, !cell.isCurrentMonth && CalendarBody_module.default.hiddenDay, cell.isToday && CalendarBody_module.default.today, cell.isSelected && CalendarBody_module.default.selected), onClick: () => {
|
|
26
25
|
if (cell.isCurrentMonth) {
|
|
27
26
|
onDayClick?.(cell.date);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["useCalendar","getMonthNameProper","_jsxs","styles","_jsx","BaseComponents","Icons","joinClasses"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var getDaysInMonth = require('../utils/date/getDaysInMonth.js');
|
|
5
5
|
|
|
6
6
|
const TODAY = new Date();
|
|
7
|
+
const YEARS_BACK = 100;
|
|
7
8
|
const isSameDate = (left, right) => left.getFullYear() === right.getFullYear() &&
|
|
8
9
|
left.getMonth() === right.getMonth() &&
|
|
9
10
|
left.getDate() === right.getDate();
|
|
@@ -24,14 +25,16 @@ const buildCalendarDays = (month, year, selectedDate) => {
|
|
|
24
25
|
};
|
|
25
26
|
});
|
|
26
27
|
};
|
|
27
|
-
const
|
|
28
|
+
const useCalendar = ({ month, year, selectedDate, onMonthChange, }) => {
|
|
28
29
|
const [visibleDate, setVisibleDate] = React.useState(() => new Date(year, month, 1));
|
|
29
|
-
React.
|
|
30
|
-
|
|
31
|
-
}, [month, year]);
|
|
30
|
+
const [isYearPickerOpen, setIsYearPickerOpen] = React.useState(false);
|
|
31
|
+
const yearListRef = React.useRef(null);
|
|
32
32
|
const visibleMonth = visibleDate.getMonth();
|
|
33
33
|
const visibleYear = visibleDate.getFullYear();
|
|
34
34
|
const days = React.useMemo(() => buildCalendarDays(visibleMonth, visibleYear, selectedDate), [visibleMonth, visibleYear, selectedDate]);
|
|
35
|
+
const maxYear = TODAY.getFullYear();
|
|
36
|
+
const minYear = maxYear - YEARS_BACK;
|
|
37
|
+
const years = Array.from({ length: maxYear - minYear + 1 }, (_, index) => maxYear - index);
|
|
35
38
|
const changeMonth = (offset) => {
|
|
36
39
|
setVisibleDate((current) => {
|
|
37
40
|
const next = new Date(current.getFullYear(), current.getMonth() + offset, 1);
|
|
@@ -39,8 +42,36 @@ const useCalendarBody = ({ month, year, selectedDate, onMonthChange, }) => {
|
|
|
39
42
|
return next;
|
|
40
43
|
});
|
|
41
44
|
};
|
|
42
|
-
|
|
45
|
+
const pickYear = (pickedYear) => {
|
|
46
|
+
setVisibleDate((current) => {
|
|
47
|
+
const next = new Date(pickedYear, current.getMonth(), 1);
|
|
48
|
+
onMonthChange?.(next);
|
|
49
|
+
return next;
|
|
50
|
+
});
|
|
51
|
+
setIsYearPickerOpen(false);
|
|
52
|
+
};
|
|
53
|
+
React.useEffect(() => {
|
|
54
|
+
setVisibleDate(new Date(year, month, 1));
|
|
55
|
+
}, [month, year]);
|
|
56
|
+
React.useEffect(() => {
|
|
57
|
+
if (!isYearPickerOpen || !yearListRef.current) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
const selectedButton = yearListRef.current.querySelector(`[data-year="${visibleYear}"]`);
|
|
61
|
+
selectedButton?.scrollIntoView({ block: "center" });
|
|
62
|
+
}, [isYearPickerOpen, visibleYear]);
|
|
63
|
+
return {
|
|
64
|
+
days,
|
|
65
|
+
years,
|
|
66
|
+
visibleMonth,
|
|
67
|
+
visibleYear,
|
|
68
|
+
isYearPickerOpen,
|
|
69
|
+
setIsYearPickerOpen,
|
|
70
|
+
yearListRef,
|
|
71
|
+
changeMonth,
|
|
72
|
+
pickYear,
|
|
73
|
+
};
|
|
43
74
|
};
|
|
44
75
|
|
|
45
|
-
exports.
|
|
76
|
+
exports.useCalendar = useCalendar;
|
|
46
77
|
//# sourceMappingURL=useCalendar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCalendar.js","sources":["../../../src/customHooks/useCalendar.tsx"],"sourcesContent":[null],"names":["getDaysInMonth","useState","
|
|
1
|
+
{"version":3,"file":"useCalendar.js","sources":["../../../src/customHooks/useCalendar.tsx"],"sourcesContent":[null],"names":["getDaysInMonth","useState","useRef","useMemo","useEffect"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".CalendarBody-module_wrapper__fd17C {\n display: flex;\n flex-direction: column;\n
|
|
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_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
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","selected":"CalendarBody-module_selected__86UkJ"};
|
|
3
3
|
function styleInject(css, options) {
|
|
4
4
|
if (typeof document === 'undefined') return;
|
|
@@ -1,25 +1,24 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
1
|
+
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 { getMonthNameProper } from '../../../utils/date/getMonthNameProper.js';
|
|
5
5
|
import { joinClasses } from '../../../utils/joinClasses.js';
|
|
6
|
-
import {
|
|
6
|
+
import { useCalendar } from '../../../customHooks/useCalendar.js';
|
|
7
7
|
import styles from './CalendarBody.module.css.js';
|
|
8
8
|
|
|
9
9
|
const WEEK_DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
10
10
|
const CalendarBody = ({ month = new Date().getMonth(), year = new Date().getFullYear(), selectedDate = null, onDayClick, onMonthChange, }) => {
|
|
11
|
-
const { days, visibleMonth, visibleYear, changeMonth
|
|
12
|
-
month,
|
|
13
|
-
year,
|
|
14
|
-
selectedDate,
|
|
15
|
-
onMonthChange,
|
|
16
|
-
});
|
|
11
|
+
const { days, visibleMonth, visibleYear, isYearPickerOpen, setIsYearPickerOpen, changeMonth} = useCalendar({ month, year, selectedDate, onMonthChange });
|
|
17
12
|
const monthName = getMonthNameProper(visibleMonth);
|
|
18
|
-
return (jsxs("div", { className: styles.wrapper, "data-testid": "CalendarBody", children: [jsxs("div", { className: styles.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: () => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}, "data-testid": "
|
|
13
|
+
return (jsxs("div", { className: styles.wrapper, "data-testid": "CalendarBody", children: [jsxs("div", { className: styles.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: () => {
|
|
14
|
+
setIsYearPickerOpen(true);
|
|
15
|
+
}, "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: () => {
|
|
16
|
+
setIsYearPickerOpen(false);
|
|
17
|
+
}, "data-testid": "Calendar_CLOSE_YEAR_PICKER_BTN", children: jsx(Icons.General.Close, { width: "24px", height: "24px" }) })) : (jsxs(Fragment, { children: [jsx("button", { className: styles.navButton, type: "button", onClick: () => {
|
|
18
|
+
changeMonth(-1);
|
|
19
|
+
}, "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: () => {
|
|
20
|
+
changeMonth(1);
|
|
21
|
+
}, "data-testid": "Calendar_NEXT_MONTH_BTN", children: jsx(Icons.Basic.ChevronRight, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) })] }))] }), jsx("div", { className: styles.weekDays, children: WEEK_DAYS.map((day) => (jsx(BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", className: styles.weekDay, children: day }, day))) }), jsx("div", { className: styles.grid, children: days.map((cell) => {
|
|
23
22
|
return (jsx("button", { type: "button", className: joinClasses(styles.day, !cell.isCurrentMonth && styles.hiddenDay, cell.isToday && styles.today, cell.isSelected && styles.selected), onClick: () => {
|
|
24
23
|
if (cell.isCurrentMonth) {
|
|
25
24
|
onDayClick?.(cell.date);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOA,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AAU5D,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC,QAAQ,EAAE,EAC7B,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,EAC/B,YAAY,GAAG,IAAI,EACnB,UAAU,EACV,aAAa,GACM,KAAI;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { useState,
|
|
1
|
+
import { useState, useRef, useMemo, useEffect } from 'react';
|
|
2
2
|
import { getDaysInMonth } from '../utils/date/getDaysInMonth.js';
|
|
3
3
|
|
|
4
4
|
const TODAY = new Date();
|
|
5
|
+
const YEARS_BACK = 100;
|
|
5
6
|
const isSameDate = (left, right) => left.getFullYear() === right.getFullYear() &&
|
|
6
7
|
left.getMonth() === right.getMonth() &&
|
|
7
8
|
left.getDate() === right.getDate();
|
|
@@ -22,14 +23,16 @@ const buildCalendarDays = (month, year, selectedDate) => {
|
|
|
22
23
|
};
|
|
23
24
|
});
|
|
24
25
|
};
|
|
25
|
-
const
|
|
26
|
+
const useCalendar = ({ month, year, selectedDate, onMonthChange, }) => {
|
|
26
27
|
const [visibleDate, setVisibleDate] = useState(() => new Date(year, month, 1));
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}, [month, year]);
|
|
28
|
+
const [isYearPickerOpen, setIsYearPickerOpen] = useState(false);
|
|
29
|
+
const yearListRef = useRef(null);
|
|
30
30
|
const visibleMonth = visibleDate.getMonth();
|
|
31
31
|
const visibleYear = visibleDate.getFullYear();
|
|
32
32
|
const days = useMemo(() => buildCalendarDays(visibleMonth, visibleYear, selectedDate), [visibleMonth, visibleYear, selectedDate]);
|
|
33
|
+
const maxYear = TODAY.getFullYear();
|
|
34
|
+
const minYear = maxYear - YEARS_BACK;
|
|
35
|
+
const years = Array.from({ length: maxYear - minYear + 1 }, (_, index) => maxYear - index);
|
|
33
36
|
const changeMonth = (offset) => {
|
|
34
37
|
setVisibleDate((current) => {
|
|
35
38
|
const next = new Date(current.getFullYear(), current.getMonth() + offset, 1);
|
|
@@ -37,8 +40,36 @@ const useCalendarBody = ({ month, year, selectedDate, onMonthChange, }) => {
|
|
|
37
40
|
return next;
|
|
38
41
|
});
|
|
39
42
|
};
|
|
40
|
-
|
|
43
|
+
const pickYear = (pickedYear) => {
|
|
44
|
+
setVisibleDate((current) => {
|
|
45
|
+
const next = new Date(pickedYear, current.getMonth(), 1);
|
|
46
|
+
onMonthChange?.(next);
|
|
47
|
+
return next;
|
|
48
|
+
});
|
|
49
|
+
setIsYearPickerOpen(false);
|
|
50
|
+
};
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
setVisibleDate(new Date(year, month, 1));
|
|
53
|
+
}, [month, year]);
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
if (!isYearPickerOpen || !yearListRef.current) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
const selectedButton = yearListRef.current.querySelector(`[data-year="${visibleYear}"]`);
|
|
59
|
+
selectedButton?.scrollIntoView({ block: "center" });
|
|
60
|
+
}, [isYearPickerOpen, visibleYear]);
|
|
61
|
+
return {
|
|
62
|
+
days,
|
|
63
|
+
years,
|
|
64
|
+
visibleMonth,
|
|
65
|
+
visibleYear,
|
|
66
|
+
isYearPickerOpen,
|
|
67
|
+
setIsYearPickerOpen,
|
|
68
|
+
yearListRef,
|
|
69
|
+
changeMonth,
|
|
70
|
+
pickYear,
|
|
71
|
+
};
|
|
41
72
|
};
|
|
42
73
|
|
|
43
|
-
export {
|
|
74
|
+
export { useCalendar };
|
|
44
75
|
//# sourceMappingURL=useCalendar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCalendar.js","sources":["../../../src/customHooks/useCalendar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"useCalendar.js","sources":["../../../src/customHooks/useCalendar.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}
|