From 63303e772ad0a452a77094ebe4f50b6a753002ce Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Sun, 8 Dec 2024 17:51:30 -0500 Subject: [PATCH] fix: dropdown may miss some disabled months (#2619) --- src/helpers/getMonthOptions.test.ts | 154 ++++++++++++++++++++++++++-- src/helpers/getMonthOptions.ts | 4 +- 2 files changed, 146 insertions(+), 12 deletions(-) diff --git a/src/helpers/getMonthOptions.test.ts b/src/helpers/getMonthOptions.test.ts index 305f00436..1fedafa45 100644 --- a/src/helpers/getMonthOptions.test.ts +++ b/src/helpers/getMonthOptions.test.ts @@ -1,18 +1,12 @@ -import { type Locale, format } from "date-fns"; - import { defaultDateLib } from "../classes/DateLib"; +import * as formatters from "../formatters/index.js"; -import { getFormatters } from "./getFormatters"; import { getMonthOptions } from "./getMonthOptions"; test("return correct dropdown options", () => { - const displayMonth = new Date(2022, 0, 1); // January 2022 - const startMonth = new Date(2022, 0, 1); // January 2022 - const endMonth = new Date(2022, 11, 31); // December 2022 - const formatters = getFormatters({ - formatMonthDropdown: (month: number, locale?: Locale) => - format(new Date(2022, month), "MMMM", { locale }) - }); + const displayMonth = new Date(2022, 0, 1); + const startMonth = new Date(2022, 0, 1); + const endMonth = new Date(2022, 11, 31); const result = getMonthOptions( displayMonth, startMonth, @@ -36,3 +30,143 @@ test("return correct dropdown options", () => { { value: 11, label: "December", disabled: false } ]); }); + +test("return correct dropdown options when less than 12 months", () => { + const displayMonth = new Date(2024, 9); + const startMonth = new Date(2024, 9); + const endMonth = new Date(2025, 5); + const result = getMonthOptions( + displayMonth, + startMonth, + endMonth, + formatters, + defaultDateLib + ); + + expect(result).toEqual([ + { value: 0, label: "January", disabled: true }, + { value: 1, label: "February", disabled: true }, + { value: 2, label: "March", disabled: true }, + { value: 3, label: "April", disabled: true }, + { value: 4, label: "May", disabled: true }, + { value: 5, label: "June", disabled: true }, + { value: 6, label: "July", disabled: true }, + { value: 7, label: "August", disabled: true }, + { value: 8, label: "September", disabled: true }, + { value: 9, label: "October", disabled: false }, + { value: 10, label: "November", disabled: false }, + { value: 11, label: "December", disabled: false } + ]); +}); + +test("return undefined when navStart is undefined", () => { + const displayMonth = new Date(2022, 0, 1); + const endMonth = new Date(2022, 11, 31); + const result = getMonthOptions( + displayMonth, + undefined, + endMonth, + formatters, + defaultDateLib + ); + + expect(result).toBeUndefined(); +}); + +test("return undefined when navEnd is undefined", () => { + const displayMonth = new Date(2022, 0, 1); + const startMonth = new Date(2022, 0, 1); + const result = getMonthOptions( + displayMonth, + startMonth, + undefined, + formatters, + defaultDateLib + ); + + expect(result).toBeUndefined(); +}); + +test("return correct dropdown options when navStart is after displayMonth", () => { + const displayMonth = new Date(2022, 0, 1); + const startMonth = new Date(2022, 2, 1); + const endMonth = new Date(2022, 11, 31); + const result = getMonthOptions( + displayMonth, + startMonth, + endMonth, + formatters, + defaultDateLib + ); + + expect(result).toEqual([ + { value: 0, label: "January", disabled: true }, + { value: 1, label: "February", disabled: true }, + { value: 2, label: "March", disabled: false }, + { value: 3, label: "April", disabled: false }, + { value: 4, label: "May", disabled: false }, + { value: 5, label: "June", disabled: false }, + { value: 6, label: "July", disabled: false }, + { value: 7, label: "August", disabled: false }, + { value: 8, label: "September", disabled: false }, + { value: 9, label: "October", disabled: false }, + { value: 10, label: "November", disabled: false }, + { value: 11, label: "December", disabled: false } + ]); +}); + +test("return correct dropdown options when navEnd is before displayMonth", () => { + const displayMonth = new Date(2022, 6, 1); + const startMonth = new Date(2022, 0, 1); + const endMonth = new Date(2022, 5, 30); + const result = getMonthOptions( + displayMonth, + startMonth, + endMonth, + formatters, + defaultDateLib + ); + + expect(result).toEqual([ + { value: 0, label: "January", disabled: false }, + { value: 1, label: "February", disabled: false }, + { value: 2, label: "March", disabled: false }, + { value: 3, label: "April", disabled: false }, + { value: 4, label: "May", disabled: false }, + { value: 5, label: "June", disabled: false }, + { value: 6, label: "July", disabled: true }, + { value: 7, label: "August", disabled: true }, + { value: 8, label: "September", disabled: true }, + { value: 9, label: "October", disabled: true }, + { value: 10, label: "November", disabled: true }, + { value: 11, label: "December", disabled: true } + ]); +}); + +test("return correct dropdown options when navStart and navEnd are within the same year", () => { + const displayMonth = new Date(2022, 0, 1); + const startMonth = new Date(2022, 2, 1); + const endMonth = new Date(2022, 8, 30); + const result = getMonthOptions( + displayMonth, + startMonth, + endMonth, + formatters, + defaultDateLib + ); + + expect(result).toEqual([ + { value: 0, label: "January", disabled: true }, + { value: 1, label: "February", disabled: true }, + { value: 2, label: "March", disabled: false }, + { value: 3, label: "April", disabled: false }, + { value: 4, label: "May", disabled: false }, + { value: 5, label: "June", disabled: false }, + { value: 6, label: "July", disabled: false }, + { value: 7, label: "August", disabled: false }, + { value: 8, label: "September", disabled: false }, + { value: 9, label: "October", disabled: true }, + { value: 10, label: "November", disabled: true }, + { value: 11, label: "December", disabled: true } + ]); +}); diff --git a/src/helpers/getMonthOptions.ts b/src/helpers/getMonthOptions.ts index 1415616f8..c5739a47c 100644 --- a/src/helpers/getMonthOptions.ts +++ b/src/helpers/getMonthOptions.ts @@ -13,12 +13,12 @@ export function getMonthOptions( if (!navStart) return undefined; if (!navEnd) return undefined; - const { addMonths, startOfMonth, isBefore } = dateLib; + const { addMonths, startOfMonth } = dateLib; const year = displayMonth.getFullYear(); const months: number[] = []; let month = navStart; - while (months.length < 12 && isBefore(month, addMonths(navEnd, 1))) { + while (months.length < 12) { months.push(month.getMonth()); month = addMonths(month, 1); }