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): disable button picker in calendar if isDisabled is true (#3358)

Browse Source 
* fix(calendar): disable button picker in calendar if `isDisabled` is true

* feat(changeset): add changeset

* feat(calendar): add test to cover showMonthAndYearPickers with isDisabled
This commit is contained in:
աӄա 2024-07-06 15:33:43 +08:00 committed by GitHub
parent 167e1977ee
commit fd4b7200dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/friendly-pumas-brush.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/calendar": patch
---
disable button picker in calendar if `isDisabled` is true (#3357)

10
packages/components/calendar/__tests__/calendar.test.tsx
View File

@ -254,6 +254,16 @@ describe("Calendar", () => {
expect(onChange).not.toHaveBeenCalled();
});
it("should not open a month & year picker if isDisabled is true", () => {
const {container} = render(
<Calendar isDisabled showMonthAndYearPickers value={new CalendarDate(2024, 6, 29)} />,
);
const headerButtonPicker = container.querySelector("[data-slot='header']");
expect(headerButtonPicker).toHaveAttribute("disabled");
});
it("should not select a date on click if isReadOnly", () => {
let onChange = jest.fn();
let {getByLabelText, getByText} = render(

4
packages/components/calendar/src/use-calendar.ts
View File

@ -8,7 +8,7 @@ import {useCalendar as useAriaCalendar} from "@react-aria/calendar";
import {useCalendarState} from "@react-stately/calendar";
import {createCalendar} from "@internationalized/date";
import {clsx} from "@nextui-org/shared-utils";
import {chain} from "@react-aria/utils";
import {chain, mergeProps} from "@react-aria/utils";
import {ContextType, useCalendarBase, UseCalendarBaseProps} from "./use-calendar-base";
import {CalendarBaseProps} from "./calendar-base";
@ -76,7 +76,7 @@ export function useCalendar<T extends DateValue>({
const baseStyles = clsx(classNames?.base, className);
const buttonPickerProps: ButtonProps = {
...buttonPickerPropsProp,
...mergeProps(buttonPickerPropsProp, {isDisabled: originalProps.isDisabled}),
onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)),
};