@navikt/ds-react 1.3.8 → 1.3.10

package/src/date/hooks/useMonthPicker.tsx

@@ -0,0 +1,223 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { DateInputProps } from "../DateInput";
+import { MonthPickerProps } from "../monthpicker/MonthPicker";
+import {
+  formatDateForInput,
+  getLocaleFromString,
+  isMatch,
+  isValidDate,
+  parseDate,
+} from "../utils";
+
+export interface UseMonthPickerOptions
+  extends Pick<
+    MonthPickerProps,
+    "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"
+  > {
+  /**
+   * Make Date-selection required
+   */
+  required?: boolean;
+}
+
+interface UseMonthPickerValue {
+  /**
+   * Use: <MonthPicker {...monthpickerProps} />
+   */
+  monthpickerProps: MonthPickerProps;
+  /**
+   * Use: <MonthPicker.Input {...inputProps} />
+   */
+  inputProps: Pick<
+    DateInputProps,
+    "onChange" | "onFocus" | "value" | "wrapperRef"
+  >;
+  /**
+   * Currently selected Date
+   * Up to user to validate value and extract month
+   */
+  selectedMonth?: Date;
+  /**
+   * Manually set selected month if needed
+   */
+  setSelected: (date?: Date) => void;
+  /**
+   * Resets all states
+   */
+  reset: () => void;
+}
+
+export const useMonthPicker = (
+  opt: UseMonthPickerOptions = {}
+): UseMonthPickerValue => {
+  const {
+    locale: _locale = "nb",
+    defaultSelected,
+    fromDate,
+    toDate,
+    disabled,
+    required,
+  } = opt;
+
+  const today = new Date();
+  const locale = getLocaleFromString(_locale);
+
+  const inputRef = useRef<HTMLDivElement>(null);
+  const monthpickerRef = useRef<HTMLDivElement>(null);
+
+  // Initialize states
+  const [year, setYear] = useState(defaultSelected ?? today);
+  const [selectedMonth, setSelectedMonth] = useState(defaultSelected);
+  const [open, setOpen] = useState(false);
+
+  const defaultInputValue = defaultSelected
+    ? formatDateForInput(defaultSelected, locale, "month")
+    : "";
+
+  const [inputValue, setInputValue] = useState(defaultInputValue);
+
+  const handleFocusIn = useCallback(
+    (e) =>
+      ![
+        monthpickerRef.current,
+        inputRef.current,
+        inputRef.current?.nextSibling,
+      ].some((element) => element?.contains(e.target)) &&
+      open &&
+      setOpen(false),
+    [open]
+  );
+
+  useEffect(() => {
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("click", handleFocusIn);
+    return () => {
+      window?.removeEventListener?.("focusin", handleFocusIn);
+      window?.removeEventListener?.("click", handleFocusIn);
+    };
+  }, [handleFocusIn]);
+
+  const reset = () => {
+    setSelectedMonth(defaultSelected);
+    setYear(defaultSelected ?? today);
+    setInputValue(defaultInputValue ?? "");
+  };
+
+  const setSelected = (date: Date | undefined) => {
+    setSelectedMonth(date);
+    setYear(date ?? today);
+    setInputValue(date ? formatDateForInput(date, locale, "month") : "");
+  };
+
+  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    !open && setOpen(true);
+    if (!e.target.value) {
+      reset();
+      return;
+    }
+    let day = parseDate(e.target.value, today, locale, "month");
+    if (isValidDate(day)) {
+      setYear(day);
+      setInputValue(formatDateForInput(day, locale, "month"));
+    }
+  };
+
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    let day = parseDate(e.target.value, today, locale, "month");
+    isValidDate(day) && setInputValue(formatDateForInput(day, locale, "month"));
+  };
+
+  /* Only allow de-selecting if not required */
+  const handleMonthClick = (month?: Date) => {
+    if (month) {
+      setOpen(false);
+      inputRef.current && inputRef.current.focus();
+    }
+
+    if (!required && !month) {
+      setSelectedMonth(undefined);
+      setInputValue("");
+      return;
+    }
+    setSelectedMonth(month);
+    setInputValue(month ? formatDateForInput(month, locale, "month") : "");
+  };
+
+  // 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 month = parseDate(e.target.value, today, locale, "month");
+
+    if (!isValidDate(month) || (disabled && isMatch(month, disabled))) {
+      setSelectedMonth(undefined);
+      return;
+    }
+
+    const isBefore =
+      fromDate &&
+      (fromDate.getFullYear() > month.getFullYear() ||
+        (fromDate.getFullYear() === month.getFullYear() &&
+          fromDate.getMonth() > month.getMonth()));
+
+    const isAfter =
+      toDate &&
+      (toDate.getFullYear() < month.getFullYear() ||
+        (toDate.getFullYear() === month.getFullYear() &&
+          toDate.getMonth() < month.getMonth()));
+
+    if (
+      isAfter ||
+      isBefore ||
+      (fromDate && toDate && !isMatch(month, [{ from: fromDate, to: toDate }]))
+    ) {
+      setSelectedMonth(undefined);
+      return;
+    }
+    setSelectedMonth(month);
+    setYear(month);
+  };
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    inputRef.current && inputRef.current.focus();
+  }, []);
+
+  const escape = useCallback(
+    (e) => open && e.key === "Escape" && handleClose(),
+    [handleClose, open]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", escape, false);
+
+    return () => {
+      window.removeEventListener("keydown", escape, false);
+    };
+  }, [escape]);
+
+  const monthpickerProps = {
+    year,
+    onYearChange: (y?: Date) => setYear(y ?? today),
+    onMonthSelect: handleMonthClick,
+    selected: selectedMonth,
+    locale: _locale,
+    fromDate,
+    toDate,
+    open,
+    onOpenToggle: () => setOpen((x) => !x),
+    disabled,
+    ref: monthpickerRef,
+  };
+
+  const inputProps = {
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    value: inputValue,
+    ref: inputRef,
+  };
+
+  return { monthpickerProps, inputProps, reset, selectedMonth, setSelected };
+};

package/src/date/hooks/useRangeDatepicker.tsx

@@ -0,0 +1,348 @@
+import { differenceInCalendarDays, isWeekend } from "date-fns";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { DateRange, isMatch } from "react-day-picker";
+import { DateInputProps } from "../DateInput";
+import { DatePickerProps } from "../datepicker/DatePicker";
+import {
+  formatDateForInput,
+  getLocaleFromString,
+  isValidDate,
+  parseDate,
+} from "../utils";
+import { UseDatepickerOptions } from "./useDatepicker";
+
+interface UseRangeDatepickerOptions
+  extends Omit<UseDatepickerOptions, "defaultSelected"> {
+  /**
+   * The initially selected DateRange
+   */
+  defaultSelected?: DateRange;
+}
+
+interface UseRangeDatepickerValue {
+  /**
+   * Use: <DatePicker {...datepickerProps}/>
+   */
+  datepickerProps: DatePickerProps;
+  /**
+   * Use: <DatePicker.Input label="from" {...fromInputProps}/>
+   */
+  fromInputProps: Pick<
+    DateInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value"
+  >;
+  /**
+   * Use: <DatePicker.Input label="to" {...toInputProps}/>
+   */
+  toInputProps: Pick<
+    DateInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value"
+  >;
+  /**
+   * Resets all states (callback)
+   */
+  reset: () => void;
+  /**
+   * Currently selected DateRange
+   * Up to user to validate values
+   */
+  selectedRange?: DateRange;
+  /**
+   * Manually override currently selected day
+   */
+  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,
+    disabled,
+    disableWeekends,
+  } = 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, "date")
+      : ""
+  );
+
+  const [toInputValue, setToInputValue] = useState(
+    defaultSelected?.to
+      ? formatDateForInput(defaultSelected.to, locale, "date")
+      : ""
+  );
+  const [open, setOpen] = useState(false);
+
+  const handleFocusIn = useCallback(
+    (e) =>
+      ![
+        datePickerRef.current,
+        inputRefTo.current,
+        inputRefFrom.current,
+        inputRefTo.current?.nextSibling,
+        inputRefFrom.current?.nextSibling,
+      ].some((element) => element?.contains(e.target)) &&
+      open &&
+      setOpen(false),
+    [open]
+  );
+
+  useEffect(() => {
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("click", handleFocusIn);
+    return () => {
+      window?.removeEventListener?.("focusin", handleFocusIn);
+      window?.removeEventListener?.("click", handleFocusIn);
+    };
+  }, [handleFocusIn]);
+
+  const reset = () => {
+    setSelectedRange(defaultSelected);
+    setMonth(defaultSelected ? defaultSelected.from : today);
+    setFromInputValue(
+      defaultSelected?.from
+        ? formatDateForInput(defaultSelected.from, locale, "date")
+        : ""
+    );
+    setToInputValue(
+      defaultSelected?.to
+        ? formatDateForInput(defaultSelected.to, locale, "date")
+        : ""
+    );
+  };
+
+  const setSelected = (range?: DateRange) => {
+    setSelectedRange(range);
+    setFromInputValue(
+      range?.from ? formatDateForInput(range.from, locale, "date") : ""
+    );
+    setToInputValue(
+      range?.to ? formatDateForInput(range?.to, locale, "date") : ""
+    );
+  };
+
+  const handleFocus = (e, src: RangeT) => {
+    !open && setOpen(true);
+    let day = parseDate(e.target.value, today, locale, "date");
+    if (isValidDate(day)) {
+      setMonth(day);
+      src === RANGE.FROM
+        ? setFromInputValue(formatDateForInput(day, locale, "date"))
+        : setToInputValue(formatDateForInput(day, locale, "date"));
+    }
+  };
+
+  const handleInputs = (day: Date, src: RangeT) => {
+    if (src === RANGE.FROM) {
+      const isAfter =
+        toInputValue &&
+        differenceInCalendarDays(
+          day,
+          parseDate(toInputValue, today, locale, "date")
+        ) > 0;
+
+      if (isAfter) {
+        setFromInputValue(
+          formatDateForInput(
+            parseDate(toInputValue, today, locale, "date"),
+            locale,
+            "date"
+          )
+        );
+        setToInputValue(formatDateForInput(day, locale, "date"));
+      } else {
+        setFromInputValue(formatDateForInput(day, locale, "date"));
+      }
+    } else if (src === RANGE.TO) {
+      const isBefore =
+        fromInputValue &&
+        differenceInCalendarDays(
+          parseDate(fromInputValue, today, locale, "date"),
+          day
+        ) > 0;
+
+      if (isBefore) {
+        setToInputValue(
+          formatDateForInput(
+            parseDate(fromInputValue, today, locale, "date"),
+            locale,
+            "date"
+          )
+        );
+        setFromInputValue(formatDateForInput(day, locale, "date"));
+      } else {
+        setToInputValue(formatDateForInput(day, locale, "date"));
+      }
+    }
+  };
+
+  const handleBlur = (e, src: RangeT) => {
+    let day = parseDate(e.target.value, today, locale, "date");
+    if (!isValidDate(day)) {
+      return;
+    }
+
+    handleInputs(day, src);
+  };
+
+  const handleSelect = (range) => {
+    if (range.from && range.to) {
+      setOpen(false);
+      // TODO: fokus på en av input-feltene?
+    }
+    const prevToRange =
+      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
+
+    range?.from
+      ? setFromInputValue(formatDateForInput(range?.from, locale, "date"))
+      : setFromInputValue("");
+    prevToRange
+      ? setToInputValue(formatDateForInput(prevToRange, locale, "date"))
+      : 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, "date");
+
+    if (
+      !isValidDate(day) ||
+      (disabled &&
+        ((disableWeekends && isWeekend(day)) || isMatch(day, disabled)))
+    ) {
+      setSelectedRange((x) =>
+        src === RANGE.FROM
+          ? { ...x, from: undefined }
+          : { from: x?.from, to: undefined }
+      );
+      return;
+    }
+
+    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
+    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
+    if (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 handleClose = useCallback(() => {
+    setOpen(false);
+    if (selectedRange?.from && !selectedRange?.to) {
+      inputRefTo?.current?.focus();
+    } else {
+      console.log(inputRefFrom);
+      inputRefFrom?.current?.focus();
+    }
+  }, [selectedRange]);
+
+  const escape = useCallback(
+    (e) => open && e.key === "Escape" && handleClose(),
+    [handleClose, open]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", escape, false);
+
+    return () => {
+      window.removeEventListener("keydown", escape, false);
+    };
+  }, [escape]);
+
+  const datepickerProps = {
+    month: month,
+    onMonthChange: (month) => setMonth(month),
+    onSelect: handleSelect,
+    selected: selectedRange,
+    locale: _locale,
+    fromDate,
+    toDate,
+    today,
+    mode: "range" as const,
+    open,
+    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,
+    ref: inputRefFrom,
+  };
+
+  const toInputProps = {
+    onChange: (e) => handleChange(e, RANGE.TO),
+    onFocus: (e) => handleFocus(e, RANGE.TO),
+    onBlur: (e) => handleBlur(e, RANGE.TO),
+    value: toInputValue,
+    ref: inputRefTo,
+  };
+
+  return {
+    datepickerProps,
+    fromInputProps,
+    toInputProps,
+    reset,
+    selectedRange,
+    setSelected,
+  };
+};

package/src/date/hooks/useSharedMonthContext.tsx

@@ -0,0 +1,68 @@
+import { setYear, startOfMonth } from "date-fns";
+import React, { createContext, useContext, useState } from "react";
+import { useDayPicker } from "react-day-picker";
+import { getInitialYear, Matcher } from "../utils";
+
+export type SharedMonthContextType = {
+  hasDropdown: boolean;
+  year: Date;
+  toYear: (date: Date) => void;
+  disabled: Matcher[];
+  selected?: Date;
+  onSelect: (v?: Date) => void;
+};
+
+export const SharedMonthContext = createContext<SharedMonthContextType>({
+  hasDropdown: false,
+  year: new Date(),
+  toYear: () => null,
+  disabled: [],
+  onSelect: () => null,
+});
+
+export const useSharedMonthContext = () => useContext(SharedMonthContext);
+
+export const SharedMonthProvider = ({
+  children,
+  dropdownCaption,
+  disabled,
+  selected,
+  onSelect,
+  year: _year,
+  onYearChange,
+}) => {
+  const context = useDayPicker();
+
+  const [year, toYear] = useState<Date>(getInitialYear(context));
+
+  const hasDropdown = !!(dropdownCaption && context.fromDate && context.toDate);
+
+  if (
+    context.fromDate &&
+    context.toDate &&
+    context?.fromDate >= context?.toDate
+  ) {
+    console.warn("fromDate needs to be before toDate - MonthPicker");
+  }
+
+  return (
+    <SharedMonthContext.Provider
+      value={{
+        year: _year ?? year,
+        toYear: (y) => {
+          toYear(y);
+          onYearChange?.(y);
+        },
+        hasDropdown,
+        disabled,
+        selected,
+        onSelect: (v?: Date) =>
+          v
+            ? onSelect(setYear(startOfMonth(v), (_year ?? year).getFullYear()))
+            : onSelect(undefined),
+      }}
+    >
+      {children}
+    </SharedMonthContext.Provider>
+  );
+};

package/src/date/index.ts

@@ -0,0 +1,16 @@
+export { DateInputProps } from "./DateInput";
+export {
+  DatePickerProps,
+  default as UNSAFE_DatePicker,
+} from "./datepicker/DatePicker";
+export { DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
+export { MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
+export {
+  UNSAFE_useDatepicker,
+  UNSAFE_useMonthPicker,
+  UNSAFE_useRangeDatepicker,
+} from "./hooks";
+export {
+  default as UNSAFE_MonthPicker,
+  MonthPickerProps,
+} from "./monthpicker/MonthPicker";