fix: dropdown may miss some disabled months (#2619)

gpbl · Dec 8, 2024 · 63303e7 · 63303e7
1 parent 3db609c
commit 63303e7
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 12 deletions.
diff --git 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
@@ -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);
   }