refactor: simplify Datepicker refs

freenowtech · Oct 6, 2023 · 6453d08 · 6453d08
1 parent 84af4a4
commit 6453d08
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 70 deletions.
diff --git a/src/components/Datepicker/Datepicker.tsx b/src/components/Datepicker/Datepicker.tsx
@@ -1,4 +1,4 @@
-import React, { FC, RefObject } from 'react';
+import React from 'react';
 import { useDatepicker, MonthType, UseDatepickerProps } from '@datepicker-react/hooks';
 import styled from 'styled-components';
 
@@ -49,72 +49,67 @@ const Forward = styled(ChevronRightIcon)`
     }
 `;
 
-interface BaseDatepickerProps extends UseDatepickerProps {
-    forwardedRef: RefObject<HTMLDivElement>;
+interface DatepickerProps extends UseDatepickerProps {
     locale: Locale;
 }
 
-const BaseDatepicker: FC<BaseDatepickerProps> = ({ forwardedRef, focusedInput, locale, ...datepickerProps }) => {
-    const {
-        firstDayOfWeek,
-        activeMonths,
-        isDateSelected,
-        isDateHovered,
-        isFirstOrLastSelectedDate,
-        isDateBlocked,
-        isDateFocused,
-        focusedDate,
-        onDateHover,
-        onDateSelect,
-        onDateFocus,
-        goToPreviousMonths,
-        goToNextMonths
-    } = useDatepicker({
-        focusedInput,
-        ...datepickerProps
-    });
+export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>(
+    ({ focusedInput, locale, ...datepickerProps }, ref) => {
+        const {
+            firstDayOfWeek,
+            activeMonths,
+            isDateSelected,
+            isDateHovered,
+            isFirstOrLastSelectedDate,
+            isDateBlocked,
+            isDateFocused,
+            focusedDate,
+            onDateHover,
+            onDateSelect,
+            onDateFocus,
+            goToPreviousMonths,
+            goToNextMonths
+        } = useDatepicker({
+            focusedInput,
+            ...datepickerProps
+        });
 
-    return (
-        <DatepickerContext.Provider
-            value={{
-                focusedDate,
-                isDateFocused,
-                isDateSelected,
-                isDateHovered,
-                isDateBlocked,
-                isFirstOrLastSelectedDate,
-                onDateSelect,
-                onDateFocus,
-                onDateHover
-            }}
-        >
-            <DatepickerContainer
-                ref={forwardedRef}
-                onMouseDown={e => {
-                    // Prevent mousedown event on Datepicker, so everything else dont lose focus
-                    e.preventDefault();
+        return (
+            <DatepickerContext.Provider
+                value={{
+                    focusedDate,
+                    isDateFocused,
+                    isDateSelected,
+                    isDateHovered,
+                    isDateBlocked,
+                    isFirstOrLastSelectedDate,
+                    onDateSelect,
+                    onDateFocus,
+                    onDateHover
                 }}
             >
-                <Back onClick={goToPreviousMonths} />
-                <Forward onClick={goToNextMonths} />
-                <DatepickerWrapper activeMonths={activeMonths}>
-                    {activeMonths.map(monthInformation => (
-                        <Month
-                            key={`${monthInformation.year}-${monthInformation.month}`}
-                            year={monthInformation.year}
-                            month={monthInformation.month}
-                            firstDayOfWeek={firstDayOfWeek}
-                            locale={locale}
-                        />
-                    ))}
-                </DatepickerWrapper>
-            </DatepickerContainer>
-        </DatepickerContext.Provider>
-    );
-};
-
-export const Datepicker = React.forwardRef(
-    (props: Omit<BaseDatepickerProps, 'forwardedRef'>, ref: RefObject<HTMLDivElement>) => (
-        <BaseDatepicker {...props} forwardedRef={ref} />
-    )
-);
+                <DatepickerContainer
+                    ref={ref}
+                    onMouseDown={e => {
+                        // Prevent mousedown event on Datepicker, so everything else dont lose focus
+                        e.preventDefault();
+                    }}
+                >
+                    <Back onClick={goToPreviousMonths} />
+                    <Forward onClick={goToNextMonths} />
+                    <DatepickerWrapper activeMonths={activeMonths}>
+                        {activeMonths.map(monthInformation => (
+                            <Month
+                                key={`${monthInformation.year}-${monthInformation.month}`}
+                                year={monthInformation.year}
+                                month={monthInformation.month}
+                                firstDayOfWeek={firstDayOfWeek}
+                                locale={locale}
+                            />
+                        ))}
+                    </DatepickerWrapper>
+                </DatepickerContainer>
+            </DatepickerContext.Provider>
+        );
+    }
+);
diff --git a/src/components/Datepicker/DatepickerRangeInput.tsx b/src/components/Datepicker/DatepickerRangeInput.tsx
@@ -239,7 +239,7 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
     variant = 'normal',
     disabled,
     ...rest
-}: DatepickerRangeInputProps) => {
+}) => {
     const [triggerReference, setTriggerReference] = useState(undefined);
     const [contentReference, setContentReference] = useState(undefined);
     const [arrowReference, setArrowReference] = useState(undefined);
@@ -446,4 +446,4 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
     );
 };
 
-export { DatepickerRangeInput, DatepickerRangeInputProps };
+export { DatepickerRangeInput, DatepickerRangeInputProps };
diff --git a/src/components/Datepicker/DatepickerSingleInput.tsx b/src/components/Datepicker/DatepickerSingleInput.tsx
@@ -1,6 +1,6 @@
 import { FirstDayOfWeek, START_DATE } from '@datepicker-react/hooks';
 import parse from 'date-fns/parse';
-import React, { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react';
+import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';
 import { MarginProps, WidthProps } from 'styled-system';
 import { usePopper } from 'react-popper';
 import { createPortal } from 'react-dom';
@@ -94,13 +94,12 @@ const DatepickerSingleInput: FC<DatepickerSingleInputProps> = ({
     inputId,
     disabled,
     ...rest
-}: DatepickerSingleInputProps) => {
+}) => {
     const [triggerReference, setTriggerReference] = useState(undefined);
     const [contentReference, setContentReference] = useState(undefined);
     const [arrowReference, setArrowReference] = useState(undefined);
 
     const localeObject = useLocaleObject(locale);
-    const inputRef = useRef<HTMLDivElement>();
     const [isFocused, setIsFocused] = useState(false);
     const [inputText, setInputText] = useState(dateToDisplayText(localeObject, displayFormat, value));
     const [error, setError] = useState(false);
@@ -172,7 +171,6 @@ const DatepickerSingleInput: FC<DatepickerSingleInputProps> = ({
             <Input
                 ref={element => {
                     setTriggerReference(element);
-                    inputRef.current = element;
                 }}
                 id={id}
                 autoComplete="off"