@navikt/ds-react 1.2.2 → 1.3.0-alpha.0

package/src/datepicker/hooks/useDatepicker.tsx

@@ -0,0 +1,181 @@
+import { differenceInCalendarDays } from "date-fns";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { DayClickEventHandler } from "react-day-picker";
+import { DatePickerProps } from "../DatePicker";
+import { DatePickerInputProps } from "../DatePickerInput";
+import { formatDateForInput, getLocaleFromString, isValidDate } from "../utils";
+import { parseDate } from "../utils/parse-date";
+
+export interface UseDatepickerOptions
+  extends Pick<
+    DatePickerProps,
+    | "locale"
+    | "fromDate"
+    | "toDate"
+    | "today"
+    | "toDate"
+    | "fromDate"
+    | "toDate"
+  > {
+  /** The initially selected date */
+  defaultSelected?: Date;
+  /** Make the selection required. */
+  required?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
+}
+
+interface UseDatepickerValue {
+  /**
+   * Use: <DatePicker {...dayPickerProps}/>
+   */
+  dayPickerProps: DatePickerProps;
+  /**
+   * Use: <DatePicker.Input {...inputProps}/>
+   */
+  inputProps: Pick<
+    DatePickerInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value" | "wrapperRef"
+  >;
+  /**
+   * Resets all states
+   */
+  reset: () => void;
+  /**
+   * Selected Date callback
+   */
+  selectedDay?: Date;
+  /**
+   * Manually set selected day if needed
+   */
+  setSelected: (date?: Date) => void;
+}
+
+export const useDatepicker = (
+  opt: UseDatepickerOptions = {}
+): UseDatepickerValue => {
+  const {
+    locale: _locale = "nb",
+    required,
+    defaultSelected,
+    today = new Date(),
+    fromDate,
+    toDate,
+    openOnFocus = true,
+  } = opt;
+
+  const locale = getLocaleFromString(_locale);
+
+  const inputRef = useRef<HTMLDivElement>(null);
+  const daypickerRef = useRef<HTMLDivElement>(null);
+
+  // Initialize states
+  const [month, setMonth] = useState(defaultSelected ?? today);
+  const [selectedDay, setSelectedDay] = useState(defaultSelected);
+  const [open, setOpen] = useState(false);
+
+  const defaultInputValue = defaultSelected
+    ? formatDateForInput(defaultSelected, locale)
+    : "";
+  const [inputValue, setInputValue] = useState(defaultInputValue);
+
+  const handleFocusOut = useCallback(
+    (e) =>
+      ![daypickerRef.current, inputRef.current].some((element) =>
+        element?.contains(e.relatedTarget)
+      ) && setOpen(false),
+    []
+  );
+
+  useEffect(() => {
+    const el = inputRef.current;
+    el?.addEventListener("focusout", handleFocusOut);
+    return () => el?.removeEventListener?.("focusout", handleFocusOut);
+  }, [handleFocusOut]);
+
+  const reset = () => {
+    setSelectedDay(defaultSelected);
+    setMonth(defaultSelected ?? today);
+    setInputValue(defaultInputValue ?? "");
+  };
+
+  const setSelected = (date: Date | undefined) => {
+    setSelectedDay(date);
+    setMonth(date ?? today);
+    setInputValue(date ? formatDateForInput(date, locale) : "");
+  };
+
+  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    !open && openOnFocus && setOpen(true);
+    if (!e.target.value) {
+      reset();
+      return;
+    }
+    let day = parseDate(e.target.value, today, locale);
+    if (isValidDate(day)) {
+      setMonth(day);
+      setInputValue(formatDateForInput(day, locale));
+    }
+  };
+
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    let day = parseDate(e.target.value, today, locale);
+    isValidDate(day) && setInputValue(formatDateForInput(day, locale));
+  };
+
+  /* Only allow de-selecting if not required */
+  const handleDayClick: DayClickEventHandler = (day, { selected }) => {
+    if (!required && selected) {
+      setSelectedDay(undefined);
+      setInputValue("");
+      return;
+    }
+    setSelectedDay(day);
+    setInputValue(day ? formatDateForInput(day, locale) : "");
+  };
+
+  // When changing the input field, save its value in state and check if the
+  // string is a valid date. If it is a valid day, set it as selected and update
+  // the calendar’s month.
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setInputValue(e.target.value);
+    const day = parseDate(e.target.value, today, locale);
+
+    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
+    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
+    if (!isValidDate(day) || isBefore || isAfter) {
+      setSelectedDay(undefined);
+      return;
+    }
+    setSelectedDay(day);
+    setMonth(day);
+  };
+
+  const dayPickerProps = {
+    month,
+    onMonthChange: (month) => setMonth(month),
+    onDayClick: handleDayClick,
+    selected: selectedDay,
+    locale: _locale,
+    fromDate,
+    toDate,
+    today,
+    open,
+    onClose: () => setOpen(false),
+    onOpenToggle: () => setOpen((x) => !x),
+    ref: daypickerRef,
+  };
+
+  const inputProps = {
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    value: inputValue,
+    wrapperRef: inputRef,
+  };
+
+  return { dayPickerProps, inputProps, reset, selectedDay, setSelected };
+};

package/src/datepicker/hooks/useRangeDatepicker.tsx

@@ -0,0 +1,285 @@
+import { differenceInCalendarDays } from "date-fns";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { DateRange } from "react-day-picker";
+import { DatePickerProps } from "../DatePicker";
+import { DatePickerInputProps } from "../DatePickerInput";
+import {
+  formatDateForInput,
+  getLocaleFromString,
+  isValidDate,
+  parseDate,
+} from "../utils";
+import { UseDatepickerOptions } from "./useDatepicker";
+
+interface UseRangeDatepickerOptions
+  extends Omit<UseDatepickerOptions, "defaultSelected"> {
+  /** The initially selected date-range */
+  defaultSelected?: DateRange;
+}
+
+interface UseRangeDatepickerValue {
+  /**
+   * Use: <DatePicker {...dayPickerProps}/>
+   */
+  dayPickerProps: DatePickerProps;
+  /**
+   * Use: <DatePicker.Input label="from" {...fromInputProps}/>
+   */
+  fromInputProps: Pick<
+    DatePickerInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value"
+  >;
+  /**
+   * Use: <DatePicker.Input label="to" {...toInputProps}/>
+   */
+  toInputProps: Pick<
+    DatePickerInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value"
+  >;
+  /**
+   * Resets all states
+   */
+  reset: () => void;
+  /**
+   * Selected range-callback
+   */
+  selectedRange?: DateRange;
+  /**
+   * Manually set selected range if needed
+   */
+  setSelected: (date?: DateRange) => void;
+}
+
+const RANGE = {
+  FROM: "FROM",
+  TO: "TO",
+} as const;
+
+type RangeT = typeof RANGE[keyof typeof RANGE];
+
+export const useRangeDatepicker = (
+  opt: UseRangeDatepickerOptions = {}
+): UseRangeDatepickerValue => {
+  const {
+    locale: _locale = "nb",
+    defaultSelected,
+    today = new Date(),
+    fromDate,
+    toDate,
+    openOnFocus = true,
+  } = opt;
+
+  const locale = getLocaleFromString(_locale);
+
+  const inputRefTo = useRef<HTMLDivElement>(null);
+  const inputRefFrom = useRef<HTMLDivElement>(null);
+  const datePickerRef = useRef<HTMLDivElement | null>(null);
+
+  // Initialize states
+  const [month, setMonth] = useState(
+    defaultSelected ? defaultSelected.from : today
+  );
+  const [selectedRange, setSelectedRange] = useState(defaultSelected);
+
+  const [fromInputValue, setFromInputValue] = useState(
+    defaultSelected?.from
+      ? formatDateForInput(defaultSelected.from, locale)
+      : ""
+  );
+
+  const [toInputValue, setToInputValue] = useState(
+    defaultSelected?.to ? formatDateForInput(defaultSelected.to, locale) : ""
+  );
+  const [open, setOpen] = useState(false);
+
+  const handleFocusOut = useCallback(
+    (e) =>
+      ![datePickerRef.current, inputRefTo.current, inputRefFrom.current].some(
+        (element) => element?.contains(e.relatedTarget)
+      ) && setOpen(false),
+    []
+  );
+
+  useEffect(() => {
+    const from = inputRefFrom.current;
+    const to = inputRefTo.current;
+    from?.addEventListener("focusout", handleFocusOut);
+    to?.addEventListener("focusout", handleFocusOut);
+    return () => {
+      from?.removeEventListener?.("focusout", handleFocusOut);
+      to?.removeEventListener?.("focusout", handleFocusOut);
+    };
+  }, [handleFocusOut]);
+
+  const reset = () => {
+    setSelectedRange(defaultSelected);
+    setMonth(defaultSelected ? defaultSelected.from : today);
+    setFromInputValue(
+      defaultSelected?.from
+        ? formatDateForInput(defaultSelected.from, locale)
+        : ""
+    );
+    setToInputValue(
+      defaultSelected?.to ? formatDateForInput(defaultSelected.to, locale) : ""
+    );
+  };
+
+  const setSelected = (range?: DateRange) => {
+    setSelectedRange(range);
+    setFromInputValue(
+      range?.from ? formatDateForInput(range.from, locale) : ""
+    );
+    setToInputValue(range?.to ? formatDateForInput(range?.to, locale) : "");
+  };
+
+  const handleFocus = (e, src: RangeT) => {
+    !open && openOnFocus && setOpen(true);
+    let day = parseDate(e.target.value, today, locale);
+    if (isValidDate(day)) {
+      setMonth(day);
+      src === RANGE.FROM
+        ? setFromInputValue(formatDateForInput(day, locale))
+        : setToInputValue(formatDateForInput(day, locale));
+    }
+  };
+
+  const handleInputs = (day: Date, src: RangeT) => {
+    if (src === RANGE.FROM) {
+      const isAfter =
+        toInputValue &&
+        differenceInCalendarDays(day, parseDate(toInputValue, today, locale)) >
+          0;
+
+      if (isAfter) {
+        setFromInputValue(
+          formatDateForInput(parseDate(toInputValue, today, locale), locale)
+        );
+        setToInputValue(formatDateForInput(day, locale));
+      } else {
+        setFromInputValue(formatDateForInput(day, locale));
+      }
+    } else if (src === RANGE.TO) {
+      const isBefore =
+        fromInputValue &&
+        differenceInCalendarDays(
+          parseDate(fromInputValue, today, locale),
+          day
+        ) > 0;
+
+      if (isBefore) {
+        setToInputValue(
+          formatDateForInput(parseDate(fromInputValue, today, locale), locale)
+        );
+        setFromInputValue(formatDateForInput(day, locale));
+      } else {
+        setToInputValue(formatDateForInput(day, locale));
+      }
+    }
+  };
+
+  const handleBlur = (e, src: RangeT) => {
+    let day = parseDate(e.target.value, today, locale);
+    if (!isValidDate(day)) {
+      return;
+    }
+
+    handleInputs(day, src);
+  };
+
+  const handleSelect = (range) => {
+    const prevToRange =
+      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
+
+    range?.from
+      ? setFromInputValue(formatDateForInput(range?.from, locale))
+      : setFromInputValue("");
+    prevToRange
+      ? setToInputValue(formatDateForInput(prevToRange, locale))
+      : setToInputValue("");
+    setSelectedRange({ from: range?.from, to: prevToRange });
+  };
+
+  /* live-update datepicker based on changes in inputfields */
+  const handleChange = (e, src: RangeT) => {
+    src === RANGE.FROM
+      ? setFromInputValue(e.target.value)
+      : setToInputValue(e.target.value);
+    const day = parseDate(e.target.value, today, locale);
+
+    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
+    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
+    if (!isValidDate(day) || isBefore || isAfter) {
+      src === RANGE.FROM
+        ? setSelectedRange((x) => ({ ...x, from: undefined }))
+        : setSelectedRange((x) => ({ from: x?.from, to: undefined }));
+      return;
+    }
+
+    /* If to-value < from-value, switch places in state */
+    if (
+      src === RANGE.TO &&
+      selectedRange?.from &&
+      differenceInCalendarDays(selectedRange?.from, day) >= 0
+    ) {
+      setSelectedRange({ from: day, to: selectedRange?.from });
+      setMonth(day);
+      return;
+    }
+
+    /* If from-value > to-value  , switch places in state */
+    if (
+      src === RANGE.FROM &&
+      selectedRange?.to &&
+      differenceInCalendarDays(day, selectedRange?.to) >= 0
+    ) {
+      setSelectedRange({ to: day, from: selectedRange?.to });
+      setMonth(day);
+      return;
+    }
+
+    src === RANGE.FROM && setSelectedRange((x) => ({ ...x, from: day }));
+    src === RANGE.TO && setSelectedRange((x) => ({ from: x?.from, to: day }));
+    setMonth(day);
+  };
+
+  const dayPickerProps = {
+    month: month,
+    onMonthChange: (month) => setMonth(month),
+    onSelect: handleSelect,
+    selected: selectedRange,
+    locale: _locale,
+    fromDate,
+    toDate,
+    today,
+    mode: "range" as const,
+    open,
+    onClose: () => setOpen(false),
+    onOpenToggle: () => setOpen((x) => !x),
+    ref: datePickerRef,
+  };
+
+  const fromInputProps = {
+    onChange: (e) => handleChange(e, RANGE.FROM),
+    onFocus: (e) => handleFocus(e, RANGE.FROM),
+    onBlur: (e) => handleBlur(e, RANGE.FROM),
+    value: fromInputValue,
+    wrapperRef: inputRefFrom,
+  };
+
+  const toInputProps = {
+    onChange: (e) => handleChange(e, RANGE.TO),
+    onFocus: (e) => handleFocus(e, RANGE.TO),
+    onBlur: (e) => handleBlur(e, RANGE.TO),
+    value: toInputValue,
+    wrapperRef: inputRefTo,
+  };
+
+  return {
+    dayPickerProps,
+    fromInputProps,
+    toInputProps,
+    reset,
+    selectedRange,
+    setSelected,
+  };
+};

package/src/datepicker/index.ts

@@ -0,0 +1,5 @@
+export { default as DatePicker } from "./DatePicker";
+export { DatePickerProps } from "./DatePicker";
+export { DatePickerStandaloneProps } from "./DatePickerStandalone";
+export { DatePickerInputProps } from "./DatePickerInput";
+export { useDatepicker, useRangeDatepicker } from "./hooks";

package/src/datepicker/utils/__tests__/dates-disabled.test.ts

@@ -0,0 +1,48 @@
+import { disableDate } from "../dates-disabled";
+
+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/datepicker/utils/__tests__/format-dates.test.ts

@@ -0,0 +1,14 @@
+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);
+
+describe("Format date to correct output", () => {
+  test("formatDateForInput", () => {
+    expect(formatDateForInput(parse("15/05/22"), nb)).toEqual("15.05.2022");
+    expect(formatDateForInput(parse("1/5/22"), nb)).toEqual("01.05.2022");
+    expect(formatDateForInput(parse("1/05/22"), nb)).toEqual("01.05.2022");
+    expect(formatDateForInput(parse("15/5/22"), nb)).toEqual("15.05.2022");
+  });
+});

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

@@ -0,0 +1,79 @@
+import { getMonths, getYears } from "../get-dates";
+
+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/datepicker/utils/__tests__/parse-dates.test.ts

@@ -0,0 +1,81 @@
+import { parseDate } from "../parse-date";
+import { isValidDate } from "../valid-date";
+import nb from "date-fns/locale/nb";
+import { getMonth, getYear } from "date-fns";
+
+const check = (inp: string) =>
+  expect(isValidDate(parseDate(inp, new Date(), nb)));
+
+const parse = (inp: string) => parseDate(inp, new Date(), nb);
+
+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);
+  });
+});