[React 19] Support for react 19 and refactoring

Author: onesine

src/components/Calendar/index.tsx

@@ -101,14 +101,12 @@ const Calendar = (props: Props) => {
             let newEnd = null;
 
             function chosePeriod(start: Date, end: Date) {
-                const ipt = input?.current;
-
                 changeDatepickerValue(
                     {
                         startDate: start,
                         endDate: end
                     },
-                    ipt
+                    input
                 );
 
                 hideDatepicker();

src/components/Datepicker.tsx

@@ -1,4 +1,4 @@
-import { createRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import Calendar from "../components/Calendar";
 import Footer from "../components/Footer";
@@ -93,10 +93,10 @@ const Datepicker = (props: DatepickerType) => {
     });
     const [dayHover, setDayHover] = useState<DateType>(null);
     const [inputText, setInputText] = useState<string>("");
-    const [inputRef, setInputRef] = useState(createRef<HTMLInputElement>());
+    const [input, setInput] = useState<HTMLInputElement | null>(null);
 
     // Custom Hooks use
-    useOnClickOutside(containerRef, () => {
+    useOnClickOutside(containerRef.current, () => {
         const container = containerRef.current;
         if (container) {
             hideDatepicker();
@@ -313,7 +313,8 @@ const Datepicker = (props: DatepickerType) => {
             displayFormat,
             hideDatepicker,
             i18n: i18n && i18n.length > 0 ? i18n : LANGUAGE,
-            input: inputRef,
+            input,
+            setInput: (value: HTMLInputElement | null) => setInput(value),
             inputClassName,
             inputId,
             inputName,
@@ -336,37 +337,37 @@ const Datepicker = (props: DatepickerType) => {
             value
         };
     }, [
+        minDate,
+        maxDate,
+        i18n,
         asSingle,
-        safePrimaryColor,
-        configs,
-        hideDatepicker,
-        period,
-        dayHover,
-        inputText,
         onChange,
-        showFooter,
-        placeholder,
-        separator,
-        i18n,
-        value,
-        disabled,
-        inputClassName,
+        classNames,
+        configs,
         containerClassName,
-        toggleClassName,
-        toggleIcon,
-        readOnly,
-        displayFormat,
-        minDate,
-        maxDate,
         dateLooking,
+        dayHover,
+        disabled,
         disabledDates,
+        displayFormat,
+        hideDatepicker,
+        input,
+        inputClassName,
         inputId,
         inputName,
-        startWeekOn,
-        classNames,
-        inputRef,
+        inputText,
+        period,
+        placeholder,
         popoverDirection,
+        safePrimaryColor,
+        readOnly,
         required,
+        separator,
+        showFooter,
+        startWeekOn,
+        toggleClassName,
+        toggleIcon,
+        value,
         firstGotoDate
     ]);
 
@@ -392,7 +393,7 @@ const Datepicker = (props: DatepickerType) => {
     return (
         <DatepickerContext.Provider value={contextValues}>
             <div className={containerClassNameOverload} ref={containerRef}>
-                <Input setContextRef={setInputRef} />
+                <Input />
 
                 <div className={popupClassNameOverload} ref={calendarContainerRef}>
                     <Arrow ref={arrowRef} />

src/components/Footer.tsx

@@ -7,7 +7,7 @@ import SecondaryButton from "./SecondaryButton";
 
 const Footer = () => {
     // Contexts
-    const { hideDatepicker, period, changeDatepickerValue, configs, classNames } =
+    const { hideDatepicker, period, changeDatepickerValue, configs, classNames, input } =
         useContext(DatepickerContext);
 
     // Functions
@@ -33,10 +33,13 @@ const Footer = () => {
                 <PrimaryButton
                     onClick={() => {
                         if (period.start && period.end) {
-                            changeDatepickerValue({
-                                startDate: period.start,
-                                endDate: period.end
-                            });
+                            changeDatepickerValue(
+                                {
+                                    startDate: period.start,
+                                    endDate: period.end
+                                },
+                                input
+                            );
                             hideDatepicker();
                         }
                     }}

src/components/Input.tsx

@@ -1,12 +1,4 @@
-import {
-    ChangeEvent,
-    KeyboardEvent,
-    RefObject,
-    useCallback,
-    useContext,
-    useEffect,
-    useRef
-} from "react";
+import { ChangeEvent, KeyboardEvent, useCallback, useContext, useEffect, useRef } from "react";
 
 import { BORDER_COLOR, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
@@ -15,11 +7,7 @@ import { DateType } from "../types";
 
 import ToggleButton from "./ToggleButton";
 
-type Props = {
-    setContextRef?: (ref: RefObject<HTMLInputElement>) => void;
-};
-
-const Input = (e: Props) => {
+const Input = () => {
     // Context
     const {
         primaryColor,
@@ -45,7 +33,9 @@ const Input = (e: Props) => {
         inputName,
         classNames,
         popoverDirection,
-        required
+        required,
+        input,
+        setInput
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -80,7 +70,6 @@ const Input = (e: Props) => {
             const dates: Date[] = [];
 
             if (asSingle) {
-                // const date = parseFormattedDate(inputValue, displayFormat);
                 const date = dateStringToDate(inputValue);
                 if (date) {
                     dates.push(date);
@@ -175,10 +164,10 @@ const Input = (e: Props) => {
 
     // UseEffects && UseLayoutEffect
     useEffect(() => {
-        if (inputRef && e.setContextRef && typeof e.setContextRef === "function") {
-            e.setContextRef(inputRef);
+        if (!input && inputRef?.current) {
+            setInput(inputRef.current);
         }
-    }, [e, inputRef]);
+    }, [input, inputRef, setInput]);
 
     useEffect(() => {
         const button = buttonRef?.current;

src/components/Shortcuts.tsx

@@ -21,7 +21,8 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
         dayHover,
         changeDayHover,
         hideDatepicker,
-        changeDatepickerValue
+        changeDatepickerValue,
+        input
     } = useContext(DatepickerContext);
 
     // Functions
@@ -43,10 +44,13 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
                 });
             }
             changePeriod(item);
-            changeDatepickerValue({
-                startDate: item.start,
-                endDate: item.end
-            });
+            changeDatepickerValue(
+                {
+                    startDate: item.start,
+                    endDate: item.end
+                },
+                input
+            );
 
             if (item.start) updateFirstDate(item.start);
             hideDatepicker();
@@ -57,6 +61,7 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
             changePeriod,
             dayHover,
             hideDatepicker,
+            input,
             period.end,
             period.start,
             updateFirstDate

src/contexts/DatepickerContext.ts

@@ -22,11 +22,11 @@ import {
 } from "../types";
 
 interface DatepickerStore {
-    arrowContainer: RefObject<HTMLDivElement> | null;
+    arrowContainer: RefObject<HTMLDivElement | null> | null;
     asSingle?: boolean;
 
-    calendarContainer: RefObject<HTMLDivElement> | null;
-    changeDatepickerValue: (value: DateValueType, e?: HTMLInputElement | null | undefined) => void;
+    calendarContainer: RefObject<HTMLDivElement | null> | null;
+    changeDatepickerValue: (value: DateValueType, e?: HTMLInputElement | null) => void;
     changeDayHover: (day: DateType) => void;
     changeInputText: (text: string) => void;
     changePeriod: (period: Period) => void;
@@ -43,7 +43,7 @@ interface DatepickerStore {
     hideDatepicker: () => void;
 
     i18n: string;
-    input?: RefObject<HTMLInputElement>;
+    input?: HTMLInputElement | null;
     inputClassName?: ((className: string) => string) | string | null;
     inputId?: string;
     inputName?: string;
@@ -63,6 +63,7 @@ interface DatepickerStore {
 
     showFooter?: boolean;
     startWeekOn?: WeekStringType | null;
+    setInput: (value: HTMLInputElement | null) => void;
 
     toggleClassName?: ((className: string) => string) | string | null;
     toggleIcon?: (open: boolean) => ReactNode;
@@ -115,6 +116,7 @@ const DatepickerContext = createContext<DatepickerStore>({
     separator: DEFAULT_SEPARATOR,
     showFooter: false,
     startWeekOn: START_WEEK,
+    setInput: () => {},
 
     toggleClassName: "",
     toggleIcon: undefined,

src/hooks/index.ts

@@ -1,12 +1,12 @@
-import { RefObject, useEffect } from "react";
+import { useEffect } from "react";
 
 export default function useOnClickOutside(
-    ref: RefObject<HTMLDivElement>,
+    ref: HTMLDivElement | null,
     handler: (e?: MouseEvent | TouchEvent) => void
 ) {
     useEffect(() => {
         const listener = (event: MouseEvent | TouchEvent) => {
-            if (!ref.current || ref.current.contains(event.target as Node)) {
+            if (!ref || ref.contains(event.target as Node)) {
                 return;
             }
 

src/index.tsx

@@ -1,18 +1,5 @@
 import Datepicker from "./components/Datepicker";
 
-/*export type {
-    ClassNamesTypeProp,
-    Configs,
-    ClassNameType,
-    DateLookingType,
-    DateRangeType,
-    DateType,
-    DateValueType,
-    PopoverDirectionType,
-    ColorKeys,
-    WeekStringType
-} from "./types";*/
-
 // eslint-disable-next-line react-refresh/only-export-components
 export * from "./types";
 export default Datepicker;