@navikt/ds-react 2.8.13 → 2.8.15

package/src/date/monthpicker/MonthCaption.tsx

@@ -1,5 +1,4 @@
 import { Left, Right } from "@navikt/ds-icons";
-import isSameYear from "date-fns/isSameYear";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
@@ -7,7 +6,8 @@ import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Button, Select } from "../..";
 import { useSharedMonthContext } from "../context";
-import { hasNextYear, labelNextYear, labelPrevYear } from "../utils";
+import { labelNextYear, labelPrevYear } from "../utils";
+import { isAfter, isBefore } from "date-fns";
 
 export const MonthCaption = () => {
   const {
@@ -27,34 +27,38 @@ export const MonthCaption = () => {
     for (let year = fromYear; year <= toYear; year++) {
       years.push(setYear(startOfYear(new Date()), year));
     }
+
+    if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
+      years.push(setYear(startOfYear(new Date()), year.getFullYear()));
+    }
+    years.sort((a, b) => a.getFullYear() - b.getFullYear());
   }
 
   const handleYearChange = (e) =>
     toYear(setYear(startOfMonth(new Date()), Number(e.target.value)));
 
   const handleButtonClick = (val: number) => {
-    let newMonth: Date;
-    if (hasDropdown && hasNextYear(year, years, val)) {
-      newMonth = setYear(new Date(), year.getFullYear() + val);
-      toYear(newMonth);
-    } else if (!hasDropdown) {
-      const newYear = Number(year.getFullYear() + val);
-      newMonth = setYear(year, newYear);
-      toYear(newMonth);
-    }
+    const newYear = Number(year.getFullYear() + val);
+    toYear(setYear(year, newYear));
+  };
+
+  const hasPrevYear = () => {
+    return fromDate
+      ? isBefore(year?.getFullYear() - 1, fromDate?.getFullYear())
+      : true;
   };
 
-  const hasFollowingYear = (value: number) => {
-    return years.some((y) =>
-      isSameYear(y, setYear(year, Number(year.getFullYear() + value)))
-    );
+  const hasNextYear = () => {
+    return toDate
+      ? isAfter(year?.getFullYear() + 1, toDate?.getFullYear())
+      : true;
   };
 
   return (
     <div className="navds-date__caption">
       <Button
         className="navds-date__caption-button"
-        disabled={!hasDropdown ? false : !hasFollowingYear(-1)}
+        disabled={hasPrevYear()}
         onClick={() => handleButtonClick(-1)}
         aria-label={labelPrevYear(locale?.code)}
         icon={<Left aria-hidden />}
@@ -83,7 +87,7 @@ export const MonthCaption = () => {
       )}
       <Button
         className="navds-date__caption-button"
-        disabled={!hasDropdown ? false : !hasFollowingYear(1)}
+        disabled={hasNextYear()}
         onClick={() => handleButtonClick(1)}
         aria-label={labelNextYear(locale?.code)}
         icon={<Right aria-hidden />}

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -77,11 +77,13 @@ export const UseMonthpicker = () => {
   const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
     disabled: [new Date("Apr 1 2022")],
     onMonthChange: console.log,
+    fromDate: new Date("Jan 1 2022"),
+    toDate: new Date("Sep 27 2025"),
   });
 
   return (
     <div style={{ height: "20rem" }}>
-      <MonthPicker {...monthpickerProps}>
+      <MonthPicker {...monthpickerProps} dropdownCaption>
         <MonthPicker.Input
           {...inputProps}
           label="Velg måned"

package/src/date/utils/__tests__/check-dates.test.ts

@@ -1,4 +1,4 @@
-import { dateIsInCurrentMonth, hasNextYear } from "..";
+import { dateIsInCurrentMonth } from "..";
 
 const selectedDate = new Date("Feb 1 1994");
 
@@ -19,29 +19,3 @@ describe("Returns if date is in current month", () => {
     ).toBeFalsy();
   });
 });
-
-const years = [
-  new Date(),
-  new Date("Aug 5 2023"),
-  new Date("Aug 5 2024"),
-  new Date("Aug 5 2025"),
-  new Date("Aug 5 2026"),
-  new Date("Aug 5 2027"),
-  new Date("Aug 5 2028"),
-  new Date("Aug 5 2029"),
-];
-
-describe("Returns if year is at start or end of range", () => {
-  test("Should have next year (true)", () => {
-    expect(hasNextYear(new Date(), years, 1)).toBeTruthy();
-  });
-  test("Should have previous year (true)", () => {
-    expect(hasNextYear(new Date("Aug 3 2024"), years, -1)).toBeTruthy();
-  });
-  test("Should not have next year (false)", () => {
-    expect(hasNextYear(new Date("Aug 3 2029"), years, 1)).toBeFalsy();
-  });
-  test("Should not have previous year (false)", () => {
-    expect(hasNextYear(new Date(), years, -1)).toBeFalsy();
-  });
-});

package/src/date/utils/__tests__/get-dates.test.ts

@@ -57,6 +57,25 @@ describe("Extracts correct months", () => {
     };
     expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
   });
+  test("End part of 2022, including starting month (12)", () => {
+    const t = {
+      start: new Date(2019, 5, 22),
+      end: new Date(2022, 7, 22),
+      current: new Date(2022, 7, 22),
+      res: 8,
+    };
+    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+  test("Adds out of range month to list (13)", () => {
+    const t = {
+      start: new Date(2019, 5, 22),
+      end: new Date(2022, 7, 22),
+      current: new Date(2022, 9, 22),
+      res: 9,
+    };
+    console.log(getMonths(t.start, t.end, t.current));
+    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
+  });
 });
 
 describe("Extracts correct years", () => {
@@ -64,16 +83,39 @@ describe("Extracts correct years", () => {
     const t = {
       start: new Date(2019, 2, 22),
       end: new Date(2019, 9, 22),
+      current: 2019,
       res: 1,
     };
-    expect(getYears(t.start, t.end).length).toEqual(t.res);
+    expect(getYears(t.start, t.end, t.current).length).toEqual(t.res);
   });
+
   test("Multiple years (11)", () => {
     const t = {
       start: new Date(2019, 2, 22),
       end: new Date(2029, 9, 22),
+      current: 2022,
       res: 11,
     };
-    expect(getYears(t.start, t.end).length).toEqual(t.res);
+    expect(getYears(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+
+  test("Displaymonth outside range: after (11)", () => {
+    const t = {
+      start: new Date(2019, 2, 22),
+      end: new Date(2029, 9, 22),
+      current: 2040,
+      res: 12,
+    };
+    expect(getYears(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+
+  test("Displaymonth outside range: before (11)", () => {
+    const t = {
+      start: new Date(2019, 2, 22),
+      end: new Date(2029, 9, 22),
+      current: 2001,
+      res: 12,
+    };
+    expect(getYears(t.start, t.end, t.current).length).toEqual(t.res);
   });
 });

package/src/date/utils/check-dates.ts

@@ -12,7 +12,3 @@ export const dateIsInCurrentMonth = (
 export function isValidDate(day: Date): boolean {
   return day && !isNaN(day?.getTime()) && day.getFullYear() > 999;
 }
-
-export const hasNextYear = (year: Date, years: Date[], val: any): boolean => {
-  return years.some((x) => year.getFullYear() + val === x.getFullYear());
-};

package/src/date/utils/get-dates.ts

@@ -28,15 +28,31 @@ export const getMonths = (start: Date, end: Date, current: Date): Date[] => {
       dropdownMonths.push(setMonth(date, month));
     }
   }
+
+  if (!dropdownMonths.map((d) => d.getMonth()).includes(current.getMonth())) {
+    dropdownMonths.push(current);
+  }
+  dropdownMonths.sort((a, b) => a.getMonth() - b.getMonth());
+
   return dropdownMonths;
 };
 
-export const getYears = (start: Date, end: Date): Date[] => {
+export const getYears = (
+  start: Date,
+  end: Date,
+  currentYear: number
+): Date[] => {
   const years: Date[] = [];
   const fromYear = start.getFullYear();
   const toYear = end.getFullYear();
   for (let year = fromYear; year <= toYear; year++) {
     years.push(setYear(startOfYear(new Date()), year));
   }
+
+  if (fromYear > currentYear || toYear < currentYear) {
+    years.push(setYear(startOfYear(new Date()), currentYear));
+  }
+
+  years.sort((a, b) => a.getFullYear() - b.getFullYear());
   return years;
 };

package/src/date/utils/index.ts

@@ -15,7 +15,7 @@ export {
 export { getLocaleFromString } from "./locale";
 export { disableDate } from "./dates-disabled";
 
-export { dateIsInCurrentMonth, isValidDate, hasNextYear } from "./check-dates";
+export { dateIsInCurrentMonth, isValidDate } from "./check-dates";
 export { getInitialYear } from "./get-initial-year";
 export { isMatch, isDateInRange, type Matcher } from "./is-match";
 export { nextEnabled } from "./navigation";