@navikt/ds-react 1.3.7 → 1.3.9

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

@@ -0,0 +1,47 @@
+import { dateIsInCurrentMonth, hasNextYear } from "..";
+
+const selectedDate = new Date("Feb 1 1994");
+
+describe("Returns if date is in current month", () => {
+  test("Date should be within current month (true)", () => {
+    expect(dateIsInCurrentMonth(new Date(), new Date())).toBeTruthy();
+  });
+
+  test("Date should not be within current month (false)", () => {
+    expect(
+      dateIsInCurrentMonth(new Date("Sep 2 2021"), selectedDate)
+    ).toBeFalsy();
+    expect(
+      dateIsInCurrentMonth(new Date("Sep 1 2021"), selectedDate)
+    ).toBeFalsy();
+    expect(
+      dateIsInCurrentMonth(new Date("Sep 30 2021"), selectedDate)
+    ).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 2023"), 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__/dates-disabled.test.ts

@@ -0,0 +1,48 @@
+import { disableDate } from "..";
+
+describe("Returns if date should be disabled", () => {
+  test("Should be disabled using Date (true)", () => {
+    const dateToDisable = new Date("Aug 3 2022");
+    expect(disableDate(dateToDisable, new Date("Aug 3 2022"))).toBe(true);
+  });
+
+  test("Should not be disabled using Date (false)", () => {
+    const dateToDisable = new Date("Aug 3 2022");
+    expect(disableDate(dateToDisable, new Date("Okt 11 2019"))).toBe(false);
+  });
+
+  test("Should be disabled using Array (true)", () => {
+    const dateToDisable = [
+      new Date("Nov 2 2019"),
+      new Date("Aug 13 2021"),
+      new Date("Jul 17 2018"),
+    ];
+    expect(disableDate(dateToDisable, new Date("Jul 17 2018"))).toBe(true);
+  });
+
+  test("Should not be disabled using Array (false)", () => {
+    const dateToDisable = [
+      new Date("Nov 2 2019"),
+      new Date("Aug 13 2021"),
+      new Date("Jul 17 2018"),
+    ];
+    expect(disableDate(dateToDisable, new Date("Jul 18 2018"))).toBe(false);
+  });
+
+  test("Should be disabled using Array with range (true)", () => {
+    const dateToDisable = [
+      { from: new Date("Jul 05 2018"), to: new Date("Sept 09 2020") },
+      { from: new Date("Sep 18 2020"), to: new Date("Des 09 2020") },
+      new Date("Nov 2 2019"),
+    ];
+    expect(disableDate(dateToDisable, new Date("Jul 18 2018"))).toBe(true);
+  });
+
+  test("Should not be disabled using Array with range (false)", () => {
+    const dateToDisable = [
+      { from: new Date("Jul 05 2018"), to: new Date("Sept 09 2020") },
+      new Date("Nov 2 2019"),
+    ];
+    expect(disableDate(dateToDisable, new Date("Jul 4 2018"))).toBe(false);
+  });
+});

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

@@ -0,0 +1,22 @@
+import { parseDate } from "../parse-date";
+import nb from "date-fns/locale/nb";
+import { formatDateForInput } from "../format-date";
+
+const parse = (inp: string) => parseDate(inp, new Date(), nb, "date");
+
+describe("Format date to correct output", () => {
+  test("formatDateForInput", () => {
+    expect(formatDateForInput(parse("15/05/22"), nb, "date")).toEqual(
+      "15.05.2022"
+    );
+    expect(formatDateForInput(parse("1/5/22"), nb, "date")).toEqual(
+      "01.05.2022"
+    );
+    expect(formatDateForInput(parse("1/05/22"), nb, "date")).toEqual(
+      "01.05.2022"
+    );
+    expect(formatDateForInput(parse("15/5/22"), nb, "date")).toEqual(
+      "15.05.2022"
+    );
+  });
+});

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

@@ -0,0 +1,79 @@
+import { getMonths, getYears } from "..";
+
+describe("Extracts correct months", () => {
+  test("March - October (8)", () => {
+    const t = {
+      start: new Date(2019, 2, 22),
+      end: new Date(2019, 9, 22),
+      current: new Date(2019, 6, 22),
+      res: 8,
+    };
+    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+
+  test("Only first 7 months", () => {
+    const t = {
+      start: new Date(2019, 0, 22),
+      end: new Date(2022, 7, 22),
+      current: new Date(2022, 6, 22),
+      res: 8,
+    };
+    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+
+  test("All of 2019 when only 2019 avaliable (12)", () => {
+    const t = {
+      start: new Date(2019, 0, 22),
+      end: new Date(2019, 11, 22),
+      current: new Date(2019, 6, 22),
+      res: 12,
+    };
+    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+  test("All of 2019 when start + current is 2019 and end is later(12)", () => {
+    const t = {
+      start: new Date(2019, 0, 22),
+      end: new Date(2022, 7, 22),
+      current: new Date(2019, 6, 22),
+      res: 12,
+    };
+    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+  test("All of 2020 when between 2019 and 2022 (12)", () => {
+    const t = {
+      start: new Date(2019, 0, 22),
+      end: new Date(2022, 7, 22),
+      current: new Date(2020, 6, 22),
+      res: 12,
+    };
+    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+  test("Tail part of 2019, including starting month (12)", () => {
+    const t = {
+      start: new Date(2019, 5, 22),
+      end: new Date(2022, 7, 22),
+      current: new Date(2019, 6, 22),
+      res: 7,
+    };
+    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
+  });
+});
+
+describe("Extracts correct years", () => {
+  test("Same year (1)", () => {
+    const t = {
+      start: new Date(2019, 2, 22),
+      end: new Date(2019, 9, 22),
+      res: 1,
+    };
+    expect(getYears(t.start, t.end).length).toEqual(t.res);
+  });
+  test("Multiple years (11)", () => {
+    const t = {
+      start: new Date(2019, 2, 22),
+      end: new Date(2029, 9, 22),
+      res: 11,
+    };
+    expect(getYears(t.start, t.end).length).toEqual(t.res);
+  });
+});

package/src/date/utils/__tests__/get-initial-year.test.ts

@@ -0,0 +1,94 @@
+import { isSameYear } from "date-fns";
+import { getInitialYear } from "..";
+
+describe("Returns initial year for monthpicker", () => {
+  test("Default selected should be valid (true)", () => {
+    expect(
+      isSameYear(
+        new Date("Oct 4 2021"),
+        getInitialYear({
+          defaultMonth: new Date("Aug 4 2021"),
+        })
+      )
+    ).toBeTruthy();
+  });
+  test("Default selected should not be valid (false)", () => {
+    expect(
+      isSameYear(
+        new Date("Oct 4 2021"),
+        getInitialYear({
+          defaultMonth: new Date("Aug 4 2020"),
+        })
+      )
+    ).toBeFalsy();
+  });
+  test("Default selected should not be valid (false)", () => {
+    expect(
+      isSameYear(
+        new Date("Oct 4 2021"),
+        getInitialYear({
+          defaultMonth: new Date("Aug 4 2020"),
+          /* toDate: new Date("Oct 4 2021"), */
+          /* fromDate: new Date("Oct 4 2021"), */
+        })
+      )
+    ).toBeFalsy();
+  });
+  test("Default selected should be valid with fromDate", () => {
+    expect(
+      isSameYear(
+        new Date("Oct 4 2021"),
+        getInitialYear({
+          defaultMonth: new Date("Aug 4 2021"),
+          /* toDate: new Date("Oct 4 2021"), */
+          fromDate: new Date("Oct 4 2021"),
+        })
+      )
+    ).toBeTruthy();
+  });
+  test("Default selected should be valid with toDate", () => {
+    expect(
+      isSameYear(
+        new Date("Oct 4 2021"),
+        getInitialYear({
+          defaultMonth: new Date("Aug 4 2021"),
+          toDate: new Date("Jun 4 2021"),
+        })
+      )
+    ).toBeTruthy();
+  });
+  test("Default selected should be moved to toDate", () => {
+    expect(
+      isSameYear(
+        new Date("Oct 4 2020"),
+        getInitialYear({
+          defaultMonth: new Date("Aug 4 2021"),
+          toDate: new Date("Jun 4 2020"),
+        })
+      )
+    ).toBeTruthy();
+  });
+  test("Default selected should be moved to fromDate", () => {
+    expect(
+      isSameYear(
+        new Date("Oct 4 2022"),
+        getInitialYear({
+          defaultMonth: new Date("Aug 4 2021"),
+          fromDate: new Date("Jun 4 2022"),
+        })
+      )
+    ).toBeTruthy();
+  });
+  test("Default selected should be moved to fromDate, not toDate", () => {
+    expect(
+      isSameYear(
+        new Date("Oct 4 2022"),
+        getInitialYear({
+          defaultMonth: new Date("Aug 4 2021"),
+          toDate: new Date("Oct 4 2023"),
+          fromDate: new Date("Jun 4 2022"),
+        })
+      )
+    ).toBeTruthy();
+  });
+});

package/src/date/utils/__tests__/is-match.test.ts

@@ -0,0 +1,42 @@
+import { isMatch } from "..";
+
+const disabled = [
+  new Date("Sep 8 2022"),
+  [new Date("Aug 4 2018"), new Date("Dec 1 2011")],
+  { from: new Date("Sep 4 2023"), to: new Date("Sep 15 2023") },
+];
+
+describe("Returns if date is disabled", () => {
+  test("Date should be disabled type Date (true)", () => {
+    expect(isMatch(new Date("Sep 4 2022"), disabled)).toBeTruthy();
+  });
+  test("Date should be disabled type Date[] (true)", () => {
+    expect(isMatch(new Date("Dec 4 2011"), disabled)).toBeTruthy();
+  });
+  test("Date should be disabled type Range (true)", () => {
+    expect(isMatch(new Date("Sep 5 2023"), disabled)).toBeTruthy();
+  });
+  test("Date should be disabled type Range (true)", () => {
+    expect(isMatch(new Date("Sep 3 2023"), disabled)).toBeTruthy();
+  });
+  test("Date should be disabled type After (true)", () => {
+    expect(
+      isMatch(new Date("Aug 5 2018"), [{ after: new Date("Aug 2 2018") }])
+    ).toBeTruthy();
+  });
+  test("Date should be disabled type After (true)", () => {
+    expect(
+      isMatch(new Date("Oct 5 2018"), [{ after: new Date("Aug 2 2018") }])
+    ).toBeTruthy();
+  });
+  test("Date should be disabled type Before (true)", () => {
+    expect(
+      isMatch(new Date("Aug 1 2018"), [{ before: new Date("Aug 2 2018") }])
+    ).toBeTruthy();
+  });
+  test("Date should be disabled type Before (true)", () => {
+    expect(
+      isMatch(new Date("Jul 1 2018"), [{ before: new Date("Aug 2 2018") }])
+    ).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,81 @@
+import { parseDate } from "..";
+import { isValidDate } from "..";
+import nb from "date-fns/locale/nb";
+import { getMonth, getYear } from "date-fns";
+
+const check = (inp: string) =>
+  expect(isValidDate(parseDate(inp, new Date(), nb, "date")));
+
+const parse = (inp: string) => parseDate(inp, new Date(), nb, "date");
+
+describe("Parse date-inputs", () => {
+  test("No spaces", () => {
+    check("150522").toBeTruthy();
+    check("11052022").toBeTruthy();
+    check("15052022").toBeTruthy();
+  });
+
+  test(". divider", () => {
+    check("1.5.22").toBeTruthy();
+    check("1.5.2022").toBeTruthy();
+    check("11.05.22").toBeTruthy();
+    check("11.05.2022").toBeTruthy();
+  });
+
+  test("/ divider", () => {
+    check("1/5/22").toBeTruthy();
+    check("10/5/22").toBeTruthy();
+    check("1/5/2022").toBeTruthy();
+    check("10/5/2022").toBeTruthy();
+    check("1/05/22").toBeTruthy();
+    check("10/05/22").toBeTruthy();
+    check("1/05/2022").toBeTruthy();
+    check("10/05/2022").toBeTruthy();
+  });
+
+  test("- divider", () => {
+    check("1-5-22").toBeTruthy();
+    check("10-5-22").toBeTruthy();
+    check("1-5-2022").toBeTruthy();
+    check("10-5-2022").toBeTruthy();
+    check("1-05-22").toBeTruthy();
+    check("10-05-22").toBeTruthy();
+    check("1-05-2022").toBeTruthy();
+    check("10-05-2022").toBeTruthy();
+  });
+});
+
+describe("Parse date-inputs to correct year", () => {
+  test("No spaces", () => {
+    expect(getYear(parse("150522"))).toEqual(2022);
+  });
+
+  test(". divider", () => {
+    expect(getYear(parse("1.05.22"))).toEqual(2022);
+    expect(getYear(parse("11.05.22"))).toEqual(2022);
+    expect(getYear(parse("1.5.22"))).toEqual(2022);
+    expect(getYear(parse("11.5.22"))).toEqual(2022);
+  });
+
+  test("/ divider", () => {
+    expect(getYear(parse("1/5/22"))).toEqual(2022);
+    expect(getYear(parse("10/5/22"))).toEqual(2022);
+    expect(getYear(parse("1/05/22"))).toEqual(2022);
+    expect(getYear(parse("10/05/22"))).toEqual(2022);
+  });
+
+  test("- divider", () => {
+    expect(getYear(parse("1-5-22"))).toEqual(2022);
+    expect(getYear(parse("10-5-22"))).toEqual(2022);
+    expect(getYear(parse("1-05-22"))).toEqual(2022);
+    expect(getYear(parse("10-05-22"))).toEqual(2022);
+  });
+});
+
+describe("Parse date-inputs to correct month", () => {
+  test("No spaces", () => {
+    expect(getMonth(parse("150522"))).toEqual(4);
+    expect(getMonth(parse("11052022"))).toEqual(4);
+    expect(getMonth(parse("15052022"))).toEqual(4);
+  });
+});

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

@@ -0,0 +1,17 @@
+import { isThisMonth, setYear } from "date-fns";
+
+export const dateIsInCurrentMonth = (
+  date: Date,
+  dateToCompare: Date
+): boolean => {
+  return isThisMonth(setYear(date, Number(dateToCompare.getFullYear())));
+};
+
+/** @private */
+export function isValidDate(day: Date): boolean {
+  return !isNaN(day.getTime());
+}
+
+export const hasNextYear = (year: Date, years: Date[], val: any): boolean => {
+  return years.some((x) => year.getFullYear() + val === x.getFullYear());
+};

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

@@ -0,0 +1,26 @@
+import { isSameDay } from "date-fns";
+import { isDateRange } from "react-day-picker";
+
+// TODO: ((date: Date) => boolean)
+export const disableDate = (
+  disabledSelection: Date | Array<any>,
+  date: Date
+): boolean => {
+  let result: boolean = false;
+  if (disabledSelection instanceof Date) {
+    return isSameDay(disabledSelection, date);
+  } else if (disabledSelection instanceof Array) {
+    for (let i = 0; i < disabledSelection.length; i++) {
+      const selection = disabledSelection[i];
+      if (isDateRange(selection)) {
+        if (selection.from && selection.to) {
+          result = date >= selection.from && date <= selection.to;
+        }
+      } else if (selection instanceof Date) {
+        result = isSameDay(selection, date);
+      }
+      if (result) break;
+    }
+  }
+  return result;
+};

package/src/date/utils/format-date.ts

@@ -0,0 +1,17 @@
+import { format } from "date-fns";
+import {
+  INPUT_DATE_STRING_FORMAT_DATE,
+  INPUT_DATE_STRING_FORMAT_MONTH,
+} from "./parse-date";
+
+export const formatDateForInput = (
+  date: Date,
+  locale: Locale,
+  type: "date" | "month"
+) => {
+  const INPUT_DATE_STRING_FORMAT =
+    type === "date"
+      ? INPUT_DATE_STRING_FORMAT_DATE
+      : INPUT_DATE_STRING_FORMAT_MONTH;
+  return format(date, INPUT_DATE_STRING_FORMAT, { locale });
+};

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

@@ -0,0 +1,44 @@
+import {
+  isSameYear,
+  setMonth,
+  setYear,
+  startOfMonth,
+  startOfYear,
+} from "date-fns";
+
+export const getMonths = (start: Date, end: Date, current: Date): Date[] => {
+  const dropdownMonths: Date[] = [];
+
+  if (isSameYear(start, end)) {
+    const date = startOfMonth(start);
+    for (let month = start.getMonth(); month <= end.getMonth(); month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  } else if (isSameYear(current, end)) {
+    const date = startOfMonth(new Date());
+    for (let month = 0; month <= end.getMonth(); month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  } else if (isSameYear(current, start)) {
+    const date = startOfMonth(start);
+    for (let month = date.getMonth(); month <= 11; month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  } else {
+    const date = startOfMonth(new Date());
+    for (let month = 0; month <= 11; month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  }
+  return dropdownMonths;
+};
+
+export const getYears = (start: Date, end: Date): 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));
+  }
+  return years;
+};

package/src/date/utils/get-initial-year.ts

@@ -0,0 +1,25 @@
+import { startOfYear } from "date-fns";
+import { DayPickerContextValue } from "react-day-picker";
+
+/**
+ *
+ */
+export function getInitialYear(context: Partial<DayPickerContextValue>): Date {
+  const { month, defaultMonth, toDate, fromDate } = context;
+
+  let initialMonth = month || defaultMonth || new Date();
+
+  const isAfter = toDate && toDate.getFullYear() < initialMonth.getFullYear();
+
+  const isBefore =
+    fromDate && fromDate.getFullYear() > initialMonth.getFullYear();
+
+  if (isAfter) {
+    initialMonth = toDate;
+  }
+  if (isBefore) {
+    initialMonth = fromDate;
+  }
+
+  return startOfYear(initialMonth);
+}

package/src/date/utils/index.ts

@@ -0,0 +1,21 @@
+export { formatDateForInput } from "./format-date";
+export { getMonths, getYears } from "./get-dates";
+export {
+  labelMonthDropdown,
+  labelYearDropdown,
+  labels,
+  labelNextYear,
+  labelPrevYear,
+} from "./labels";
+export {
+  INPUT_DATE_STRING_FORMAT_DATE,
+  INPUT_DATE_STRING_FORMAT_MONTH,
+  parseDate,
+} from "./parse-date";
+export { getLocaleFromString } from "./locale";
+export { disableDate } from "./dates-disabled";
+
+export { dateIsInCurrentMonth, isValidDate, hasNextYear } from "./check-dates";
+export { getInitialYear } from "./get-initial-year";
+export { isMatch, isDateInRange, Matcher } from "./is-match";
+export { nextEnabled } from "./navigation";

package/src/date/utils/is-match.ts

@@ -0,0 +1,88 @@
+import {
+  isDate,
+  isSameDay,
+  differenceInCalendarDays,
+  isSameMonth,
+} from "date-fns";
+import {
+  DateAfter,
+  DateBefore,
+  DateRange,
+  isDateAfterType,
+  isDateBeforeType,
+  isDateRange,
+} from "react-day-picker";
+
+export type Matcher =
+  | ((date: Date) => boolean)
+  | Date
+  | Date[]
+  | DateRange
+  | DateBefore
+  | DateAfter;
+
+function isDateType(value: unknown): value is Date {
+  return isDate(value);
+}
+
+function isArrayOfDates(value: unknown): value is Date[] {
+  return Array.isArray(value) && value.every(isDate);
+}
+
+export function isMatch(day: Date, matchers: Matcher[]): boolean {
+  return matchers.some((matcher: Matcher) => {
+    if (isDateType(matcher)) {
+      return isSameMonth(day, matcher);
+    }
+    if (isArrayOfDates(matcher)) {
+      return matcher.some((matcherDay) => {
+        return isSameMonth(matcherDay, day);
+      });
+    }
+    if (isDateRange(matcher)) {
+      return isDateInRange(day, matcher);
+    }
+    if (isDateAfterType(matcher)) {
+      return (
+        isSameMonth(day, matcher.after) ||
+        differenceInCalendarDays(day, matcher.after) > 0
+      );
+    }
+    if (isDateBeforeType(matcher)) {
+      return (
+        isSameMonth(day, matcher.before) ||
+        differenceInCalendarDays(matcher.before, day) > 0
+      );
+    }
+    if (typeof matcher === "function") {
+      return matcher(day);
+    }
+    return false;
+  });
+}
+
+export function isDateInRange(date: Date, range: DateRange): boolean {
+  let { from, to } = range;
+  if (!from) {
+    return false;
+  }
+  if (!to && isSameDay(from, date)) {
+    return true;
+  }
+  if (!to) {
+    return false;
+  }
+  const isToBeforeFrom = differenceInCalendarDays(to, from) < 0;
+  if (to && isToBeforeFrom) {
+    [from, to] = [to, from];
+  }
+
+  if (isSameMonth(from, date) || isSameMonth(to, date)) {
+    return true;
+  }
+
+  return (
+    differenceInCalendarDays(date, from) >= 0 &&
+    differenceInCalendarDays(to, date) >= 0
+  );
+}