archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(calendar): fix #2820 #2857 maximum update depth exceeded on Calendar & RangeCalendar (#2861)

Browse Source
This commit is contained in:
Junior Garcia 2024-04-24 16:17:40 -03:00 committed by GitHub
parent 1ba2d029a2
commit e9fef9bd92
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tasty-keys-cover.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/calendar": patch
---
Fix #2820 #2857 Maximum update depth exceeded on Calendar & RangeCalendar when hovering the dates.

28
packages/components/calendar/src/calendar-month.tsx
View File

@ -1,5 +1,3 @@
import type {CalendarState, RangeCalendarState} from "@react-stately/calendar";
import {CalendarDate, endOfMonth, getWeeksInMonth} from "@internationalized/date"; import {CalendarDate, endOfMonth, getWeeksInMonth} from "@internationalized/date";
import {CalendarPropsBase} from "@react-types/calendar"; import {CalendarPropsBase} from "@react-types/calendar";
import {HTMLNextUIProps} from "@nextui-org/system"; import {HTMLNextUIProps} from "@nextui-org/system";
@ -7,7 +5,6 @@ import {useLocale} from "@react-aria/i18n";
import {useCalendarGrid} from "@react-aria/calendar"; import {useCalendarGrid} from "@react-aria/calendar";
import {m} from "framer-motion"; import {m} from "framer-motion";
import {dataAttr} from "@nextui-org/shared-utils"; import {dataAttr} from "@nextui-org/shared-utils";
import {useEffect, useState} from "react";
import {CalendarCell} from "./calendar-cell"; import {CalendarCell} from "./calendar-cell";
import {slideVariants} from "./calendar-transitions"; import {slideVariants} from "./calendar-transitions";
@ -25,29 +22,8 @@ export function CalendarMonth(props: CalendarMonthProps) {
const {locale} = useLocale(); const {locale} = useLocale();
const weeksInMonth = getWeeksInMonth(startDate, locale); const weeksInMonth = getWeeksInMonth(startDate, locale);
const { const {state, slots, weekdayStyle, isHeaderExpanded, disableAnimation, classNames} =
state: stateProp, useCalendarContext();
slots,
weekdayStyle,
isHeaderExpanded,
disableAnimation,
classNames,
} = useCalendarContext();
// Self-controlled state
const [state, setState] = useState<CalendarState | RangeCalendarState>(() => stateProp);
/**
* This avoid focusing the date cell when navigating through the picker'
* months/years with the keyboard.
*/
useEffect(() => {
if (isHeaderExpanded) {
return;
}
setState(stateProp);
}, [stateProp, isHeaderExpanded]);
const {gridProps, headerProps, weekDays} = useCalendarGrid( const {gridProps, headerProps, weekDays} = useCalendarGrid(
{ {