DatePicker: pass ref to main button

Samfundet · Nov 16, 2024 · 755bdd9 · 755bdd9
1 parent 7f4b8b9
commit 755bdd9
Showing 1 changed file with 44 additions and 48 deletions.
diff --git a/frontend/src/Components/DatePicker/DatePicker.tsx b/frontend/src/Components/DatePicker/DatePicker.tsx
@@ -1,10 +1,10 @@
 import { Icon } from '@iconify/react';
 import classNames from 'classnames';
 import { format } from 'date-fns';
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, MiniCalendar } from '~/Components';
+import { MiniCalendar } from '~/Components';
 import { useClickOutside } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import styles from './DatePicker.module.scss';
@@ -21,56 +21,52 @@ type DatePickerProps = {
   maxDate?: Date;
 };
 
-export function DatePicker({
-  value: initialValue,
-  onChange,
-  disabled,
-  label,
-  buttonClassName,
-  minDate,
-  maxDate,
-}: DatePickerProps) {
-  const isControlled = initialValue !== undefined;
+export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
+  ({ value: initialValue, onChange, disabled, label, buttonClassName, minDate, maxDate }, ref) => {
+    const isControlled = initialValue !== undefined;
 
-  const [date, setDate] = useState<Date | null>(null);
-  const [open, setOpen] = useState(false);
+    const [date, setDate] = useState<Date | null>(null);
+    const [open, setOpen] = useState(false);
 
-  const { t } = useTranslation();
+    const { t } = useTranslation();
 
-  const clickOutsideRef = useClickOutside<HTMLDivElement>(() => setOpen(false));
+    const clickOutsideRef = useClickOutside<HTMLDivElement>(() => setOpen(false));
 
-  const value = useMemo(() => {
-    if (isControlled) {
-      return initialValue;
-    }
-    return date;
-  }, [isControlled, initialValue, date]);
+    const value = useMemo(() => {
+      if (isControlled) {
+        return initialValue;
+      }
+      return date;
+    }, [isControlled, initialValue, date]);
 
-  function handleChange(d: Date | null) {
-    setDate(d);
-    onChange?.(d);
-  }
+    function handleChange(d: Date | null) {
+      setDate(d);
+      onChange?.(d);
+    }
 
-  return (
-    <div className={styles.container} ref={clickOutsideRef}>
-      <button
-        type="button"
-        className={classNames(styles.button, buttonClassName)}
-        onClick={() => setOpen((v) => !v)}
-        disabled={disabled}
-      >
-        <Icon icon="material-symbols:calendar-month-outline-rounded" />
-        {value ? format(value, 'PPP') : <span>{label ?? t(KEY.pick_a_date)}</span>}
-      </button>
-      <div className={classNames(styles.popover, !open && styles.hidden)}>
-        <MiniCalendar
-          baseDate={value || new Date()}
-          onChange={handleChange}
-          minDate={minDate}
-          maxDate={maxDate}
-          displayLabel
-        />
+    return (
+      <div className={styles.container} ref={clickOutsideRef}>
+        <button
+          type="button"
+          className={classNames(styles.button, buttonClassName)}
+          onClick={() => setOpen((v) => !v)}
+          disabled={disabled}
+          ref={ref}
+        >
+          <Icon icon="material-symbols:calendar-month-outline-rounded" />
+          {value ? format(value, 'PPP') : <span>{label ?? t(KEY.pick_a_date)}</span>}
+        </button>
+        <div className={classNames(styles.popover, !open && styles.hidden)}>
+          <MiniCalendar
+            baseDate={value || new Date()}
+            onChange={handleChange}
+            minDate={minDate}
+            maxDate={maxDate}
+            displayLabel
+          />
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  },
+);
+DatePicker.displayName = 'DatePicker';