@navikt/ds-react 1.3.21 → 1.3.23

package/src/date/hooks/useRangeDatepicker.tsx

@@ -13,11 +13,15 @@ import {
 import { UseDatepickerOptions } from "./useDatepicker";
 
 interface UseRangeDatepickerOptions
-  extends Omit<UseDatepickerOptions, "defaultSelected"> {
+  extends Omit<UseDatepickerOptions, "defaultSelected" | "onDateChange"> {
   /**
    * The initially selected DateRange
    */
   defaultSelected?: DateRange;
+  /**
+   * Callback for changed state
+   */
+  onRangeChange?: (val?: DateRange) => void;
 }
 
 interface UseRangeDatepickerValue {
@@ -66,12 +70,13 @@ export const useRangeDatepicker = (
 ): UseRangeDatepickerValue => {
   const {
     locale: _locale = "nb",
-    defaultSelected,
+    defaultSelected: _defaultSelected,
     today = new Date(),
     fromDate,
     toDate,
     disabled,
     disableWeekends,
+    onRangeChange,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -80,11 +85,15 @@ export const useRangeDatepicker = (
   const inputRefFrom = useRef<HTMLDivElement>(null);
   const datePickerRef = useRef<HTMLDivElement | null>(null);
 
+  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
+
   // Initialize states
   const [month, setMonth] = useState(
-    defaultSelected ? defaultSelected.from : today
+    defaultSelected ? defaultSelected?.from : today
+  );
+  const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(
+    defaultSelected ?? { from: undefined, to: undefined }
   );
-  const [selectedRange, setSelectedRange] = useState(defaultSelected);
 
   const [fromInputValue, setFromInputValue] = useState(
     defaultSelected?.from
@@ -99,6 +108,11 @@ export const useRangeDatepicker = (
   );
   const [open, setOpen] = useState(false);
 
+  const getSelectedRange = (range?: DateRange) => {
+    onRangeChange?.(range);
+    return range;
+  };
+
   const handleFocusIn = useCallback(
     (e) =>
       ![
@@ -123,8 +137,10 @@ export const useRangeDatepicker = (
   }, [handleFocusIn]);
 
   const reset = () => {
-    setSelectedRange(defaultSelected);
-    setMonth(defaultSelected ? defaultSelected.from : today);
+    setSelectedRange(
+      getSelectedRange(defaultSelected ?? { from: undefined, to: undefined })
+    );
+    setMonth(defaultSelected ? defaultSelected?.from : today);
     setFromInputValue(
       defaultSelected?.from
         ? formatDateForInput(defaultSelected.from, locale, "date")
@@ -135,10 +151,11 @@ export const useRangeDatepicker = (
         ? formatDateForInput(defaultSelected.to, locale, "date")
         : ""
     );
+    setDefaultSelected(_defaultSelected);
   };
 
   const setSelected = (range?: DateRange) => {
-    setSelectedRange(range);
+    setSelectedRange(getSelectedRange(range));
     setFromInputValue(
       range?.from ? formatDateForInput(range.from, locale, "date") : ""
     );
@@ -212,7 +229,7 @@ export const useRangeDatepicker = (
   };
 
   const handleSelect = (range) => {
-    if (range.from && range.to) {
+    if (range?.from && range?.to) {
       setOpen(false);
     }
     const prevToRange =
@@ -224,7 +241,7 @@ export const useRangeDatepicker = (
     prevToRange
       ? setToInputValue(formatDateForInput(prevToRange, locale, "date"))
       : setToInputValue("");
-    setSelectedRange({ from: range?.from, to: prevToRange });
+    setSelectedRange(getSelectedRange({ from: range?.from, to: prevToRange }));
   };
 
   /* live-update datepicker based on changes in inputfields */
@@ -240,9 +257,11 @@ export const useRangeDatepicker = (
         ((disableWeekends && isWeekend(day)) || isMatch(day, disabled)))
     ) {
       setSelectedRange((x) =>
-        src === RANGE.FROM
-          ? { ...x, from: undefined }
-          : { from: x?.from, to: undefined }
+        getSelectedRange(
+          src === RANGE.FROM
+            ? { ...x, from: undefined }
+            : { from: x?.from, to: undefined }
+        )
       );
       return;
     }
@@ -251,8 +270,10 @@ export const useRangeDatepicker = (
     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 }));
+        ? setSelectedRange((x) => getSelectedRange({ ...x, from: undefined }))
+        : setSelectedRange((x) =>
+            getSelectedRange({ from: x?.from, to: undefined })
+          );
       return;
     }
 
@@ -262,7 +283,9 @@ export const useRangeDatepicker = (
       selectedRange?.from &&
       differenceInCalendarDays(selectedRange?.from, day) >= 0
     ) {
-      setSelectedRange({ from: day, to: selectedRange?.from });
+      setSelectedRange(
+        getSelectedRange({ from: day, to: selectedRange?.from })
+      );
       setMonth(day);
       return;
     }
@@ -273,13 +296,15 @@ export const useRangeDatepicker = (
       selectedRange?.to &&
       differenceInCalendarDays(day, selectedRange?.to) >= 0
     ) {
-      setSelectedRange({ to: day, from: selectedRange?.to });
+      setSelectedRange(getSelectedRange({ 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 }));
+    src === RANGE.FROM &&
+      setSelectedRange((x) => getSelectedRange({ ...x, from: day }));
+    src === RANGE.TO &&
+      setSelectedRange((x) => getSelectedRange({ from: x?.from, to: day }));
     setMonth(day);
   };
 

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

@@ -73,9 +73,8 @@ export const Standalone = () => {
 
 export const UseMonthpicker = () => {
   const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
-    locale: "nb",
-    defaultSelected: new Date(),
     disabled: [new Date("Apr 1 2022")],
+    onMonthChange: console.log,
   });
 
   return (