From 8159ce5507c212df44c1c4c8e9231bcfd0aec7a5 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 9 Oct 2023 08:43:02 -0400 Subject: [PATCH 1/5] fix(CalendarMonth): correct setting of initialDate * now focusing date on month change * change month and change year refactoring --- .../CalendarMonth/CalendarMonth.tsx | 67 +++++++------------ 1 file changed, 23 insertions(+), 44 deletions(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index de4cb47d7f4..249f685433d 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -154,12 +154,12 @@ export const CalendarMonth = ({ const [isSelectOpen, setIsSelectOpen] = React.useState(false); const getInitialDate = () => { - const initDate = new Date(dateProp); - if (isValidDate(initDate)) { - return initDate; - } else { - return isValidDate(rangeStart) ? rangeStart : today; + if (dateProp && isValidDate(dateProp)) { + return dateProp; + } else if (rangeStart && isValidDate(rangeStart)) { + return rangeStart; } + return today; }; const initialDate = getInitialDate(); const [focusedDate, setFocusedDate] = React.useState(initialDate); @@ -188,7 +188,7 @@ export const CalendarMonth = ({ const onMonthClick = (ev: React.MouseEvent, newDate: Date) => { setFocusedDate(newDate); setHoveredDate(newDate); - setShouldFocus(false); + setShouldFocus(true); onMonthChange(ev, newDate); }; @@ -211,43 +211,31 @@ export const CalendarMonth = ({ } }; - const changeMonth = (month: number) => { - const newDate = new Date(focusedDate); - const desiredDay = newDate.getDate(); - const monthDays = new Date(newDate.getFullYear(), (month + 1) % 12, 0).getDate(); // Setting day 0 of the next month returns the last day of current month - - if (monthDays < desiredDay) { - newDate.setDate(monthDays); - } + const changeYear = (newYear: number) => changeMonth(focusedDate.getMonth(), newYear); - newDate.setMonth(month); + const changeMonth = (newMonth: number, newYear?: number) => { + const year = newYear ?? focusedDate.getFullYear(); + const daysInNewMonth = new Date(year, (newMonth + 1) % 12, 0).getDate(); // Setting day 0 of the next month returns the last day of current month + const desiredDay = initialDate.getDate(); + const day = desiredDay <= daysInNewMonth ? desiredDay : daysInNewMonth; - if (initialDate.getDate() > desiredDay && monthDays > desiredDay) { - newDate.setDate(initialDate.getDate()); - } - - return newDate; + return new Date(year, newMonth, day); }; const addMonth = (toAdd: -1 | 1) => { - let newMonth = new Date(focusedDate).getMonth() + toAdd; + let newMonth = focusedDate.getMonth() + toAdd; + let newYear = focusedDate.getFullYear(); + if (newMonth === -1) { newMonth = 11; + newYear--; } else if (newMonth === 12) { newMonth = 0; + newYear++; } - const newDate = changeMonth(newMonth); - if (toAdd === 1 && newMonth === 0) { - newDate.setFullYear(newDate.getFullYear() + 1); - } - if (toAdd === -1 && newMonth === 11) { - newDate.setFullYear(newDate.getFullYear() - 1); - } - return newDate; - }; - const yearHasFebruary29th = (year: number) => new Date(year, 1, 29).getMonth() === 1; - const dateIsFebruary29th = (date: Date) => date.getMonth() === 1 && date.getDate() === 29; + return changeMonth(newMonth, newYear); + }; const prevMonth = addMonth(-1); const nextMonth = addMonth(1); @@ -317,7 +305,7 @@ export const CalendarMonth = ({ const newDate = changeMonth(Number(monthNum as string)); setFocusedDate(newDate); setHoveredDate(newDate); - setShouldFocus(false); + setShouldFocus(true); onMonthChange(ev, newDate); }, 0); }} @@ -340,19 +328,10 @@ export const CalendarMonth = ({ type="number" value={yearFormatted} onChange={(ev: React.FormEvent, year: string) => { - const newDate = new Date(focusedDate); - if (dateIsFebruary29th(newDate) && !yearHasFebruary29th(+year)) { - newDate.setDate(28); - newDate.setMonth(1); - } - if (dateIsFebruary29th(initialDate) && yearHasFebruary29th(+year)) { - newDate.setFullYear(+year); - newDate.setDate(29); - } - newDate.setFullYear(+year); + const newDate = changeYear(Number(year)); setFocusedDate(newDate); setHoveredDate(newDate); - setShouldFocus(false); + setShouldFocus(true); onMonthChange(ev, newDate); }} /> From 8107be76da5f4daa7df0935dcf7ca79a2646ae64 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 9 Oct 2023 15:23:21 +0200 Subject: [PATCH 2/5] fix(CalendarMonth): keep the dates unfocused on month change --- .../src/components/CalendarMonth/CalendarMonth.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index 249f685433d..2f8679f7011 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -188,7 +188,7 @@ export const CalendarMonth = ({ const onMonthClick = (ev: React.MouseEvent, newDate: Date) => { setFocusedDate(newDate); setHoveredDate(newDate); - setShouldFocus(true); + setShouldFocus(false); onMonthChange(ev, newDate); }; @@ -305,7 +305,7 @@ export const CalendarMonth = ({ const newDate = changeMonth(Number(monthNum as string)); setFocusedDate(newDate); setHoveredDate(newDate); - setShouldFocus(true); + setShouldFocus(false); onMonthChange(ev, newDate); }, 0); }} @@ -331,7 +331,7 @@ export const CalendarMonth = ({ const newDate = changeYear(Number(year)); setFocusedDate(newDate); setHoveredDate(newDate); - setShouldFocus(true); + setShouldFocus(false); onMonthChange(ev, newDate); }} /> From 0de29667732e9c2945d47d32419ca8109aa8e0e1 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 9 Oct 2023 10:56:00 -0400 Subject: [PATCH 3/5] fix(CalendarMonth): unfocus date on year change --- .../src/components/CalendarMonth/CalendarMonth.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index 2f8679f7011..3ac473ac20b 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -213,14 +213,8 @@ export const CalendarMonth = ({ const changeYear = (newYear: number) => changeMonth(focusedDate.getMonth(), newYear); - const changeMonth = (newMonth: number, newYear?: number) => { - const year = newYear ?? focusedDate.getFullYear(); - const daysInNewMonth = new Date(year, (newMonth + 1) % 12, 0).getDate(); // Setting day 0 of the next month returns the last day of current month - const desiredDay = initialDate.getDate(); - const day = desiredDay <= daysInNewMonth ? desiredDay : daysInNewMonth; - - return new Date(year, newMonth, day); - }; + const changeMonth = (newMonth: number, newYear?: number) => + new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1); const addMonth = (toAdd: -1 | 1) => { let newMonth = focusedDate.getMonth() + toAdd; @@ -332,6 +326,7 @@ export const CalendarMonth = ({ setFocusedDate(newDate); setHoveredDate(newDate); setShouldFocus(false); + focusRef.current.blur(); // will unfocus a date when changing year via up/down arrows onMonthChange(ev, newDate); }} /> From 2802604b884fc1a3e686ce4091fa566894ee165e Mon Sep 17 00:00:00 2001 From: adamviktora Date: Sun, 15 Oct 2023 15:15:40 +0200 Subject: [PATCH 4/5] fix(CalendarMonth): undefined check --- .../react-core/src/components/CalendarMonth/CalendarMonth.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index 3ac473ac20b..74ef4a39a3e 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -326,7 +326,7 @@ export const CalendarMonth = ({ setFocusedDate(newDate); setHoveredDate(newDate); setShouldFocus(false); - focusRef.current.blur(); // will unfocus a date when changing year via up/down arrows + focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows onMonthChange(ev, newDate); }} /> From 7a25128b86337805763c1071356c93a1fbf1b2be Mon Sep 17 00:00:00 2001 From: adamviktora Date: Wed, 18 Oct 2023 11:48:31 +0200 Subject: [PATCH 5/5] refactor(CalendarMonth): remove unnecessary undefined check --- .../src/components/CalendarMonth/CalendarMonth.tsx | 5 +++-- packages/react-core/src/helpers/datetimeUtils.ts | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index 74ef4a39a3e..583824c3a37 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -154,9 +154,10 @@ export const CalendarMonth = ({ const [isSelectOpen, setIsSelectOpen] = React.useState(false); const getInitialDate = () => { - if (dateProp && isValidDate(dateProp)) { + if (isValidDate(dateProp)) { return dateProp; - } else if (rangeStart && isValidDate(rangeStart)) { + } + if (isValidDate(rangeStart)) { return rangeStart; } return today; diff --git a/packages/react-core/src/helpers/datetimeUtils.ts b/packages/react-core/src/helpers/datetimeUtils.ts index 708a9e73032..0a3abc28f1a 100644 --- a/packages/react-core/src/helpers/datetimeUtils.ts +++ b/packages/react-core/src/helpers/datetimeUtils.ts @@ -1,4 +1,4 @@ /** * @param {Date} date - A date to check the validity of */ -export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any)); +export const isValidDate = (date?: Date) => Boolean(date && !isNaN(date as any));