From 111c21135cc526f651654169079e1800ecce3930 Mon Sep 17 00:00:00 2001 From: mukhriddin Date: Sat, 22 Feb 2025 18:42:29 +0500 Subject: [PATCH] Add appendToBody feature for flexible datepicker positioning --- app/page.tsx | 73 ++++++++++--- package.json | 1 + src/components/Datepicker.tsx | 165 ++++++++++++++++++++++-------- src/components/Input.tsx | 40 ++++---- src/contexts/DatepickerContext.ts | 3 +- src/types/index.ts | 1 + 6 files changed, 204 insertions(+), 79 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index cdcaef8..e88a677 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -11,6 +11,7 @@ import Datepicker, { PopoverDirectionType, WeekStringType } from "../src"; +import CloseIcon from "../src/components/icons/CloseIcon"; import { COLORS, DATE_LOOKING_OPTIONS } from "../src/constants"; import { dateFormat, dateIsValid } from "../src/libs/date"; @@ -45,6 +46,8 @@ export default function Playground() { const [startWeekOn, setStartWeekOn] = useState("mon"); const [required, setRequired] = useState(false); const [popoverDirection, setPopoverDirection] = useState("down"); + const [appendToBody, setAppendToBody] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); return (
@@ -58,6 +61,36 @@ export default function Playground() { PlayGround + {/* Modal */} + {isModalOpen && appendToBody && ( + <> +
+
+
+

Datepicker in Modal

+

+ Using appendToBody prevents the datepicker from being cut off by + modal overflow +

+
+ +
+ +
+
+ + )} +
{ - // if (disabled) { - // return "opacity-40"; - // } - // return `className`; - // }, - // toggleButton: () => { - // return "bg-blue-300 ease-in-out"; - // }, - // footer: () => { - // return `p-4 border-t border-gray-600 flex flex-row flex-wrap justify-end`; - // } - // }} />
@@ -244,6 +264,31 @@ export default function Playground() {
+
+
+ setAppendToBody(e.target.checked)} + /> + +
+
+ + {appendToBody && ( +
+ +
+ )}
diff --git a/package.json b/package.json index 01650e6..92df7f5 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "@tailwindcss/forms": "^0.5.7", "@types/node": "^22.3.0", "@types/react": "^19.0.8", + "@types/react-dom": "^19.0.4", "@typescript-eslint/eslint-plugin": "^8.22.0", "@typescript-eslint/parser": "^8.22.0", "autoprefixer": "^10.4.20", diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index 044bde2..e6e57aa 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { createPortal } from "react-dom"; import Calendar from "../components/Calendar"; import Footer from "../components/Footer"; @@ -74,7 +75,9 @@ const Datepicker = (props: DatepickerType) => { toggleIcon = undefined, useRange = true, - value = null + value = null, + + appendToBody = false } = props; // Refs @@ -96,11 +99,13 @@ const Datepicker = (props: DatepickerType) => { const [input, setInput] = useState(null); // Custom Hooks use - useOnClickOutside(containerRef.current, () => { + useOnClickOutside(containerRef.current, event => { const container = containerRef.current; - if (container) { - hideDatepicker(); - } + const calendar = calendarContainerRef.current; + + if (calendar && calendar.contains(event?.target as Node)) return; + + if (container) hideDatepicker(); }); // Functions @@ -334,7 +339,8 @@ const Datepicker = (props: DatepickerType) => { toggleClassName, toggleIcon, updateFirstDate: (newDate: Date) => firstGotoDate(newDate), - value + value, + appendToBody }; }, [ minDate, @@ -368,7 +374,8 @@ const Datepicker = (props: DatepickerType) => { toggleClassName, toggleIcon, value, - firstGotoDate + firstGotoDate, + appendToBody ]); const containerClassNameOverload = useMemo(() => { @@ -390,56 +397,124 @@ const Datepicker = (props: DatepickerType) => { : defaultPopupClassName; }, [popupClassName]); + const calculatePosition = useCallback(() => { + if (!appendToBody || !input) return {}; + + const inputRect = input.getBoundingClientRect(); + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; + + return { + position: "fixed" as const, + top: inputRect.bottom + scrollTop + 1, + left: inputRect.left + scrollLeft, + zIndex: 1000 + }; + }, [appendToBody, input]); + return (
-
- - -
-
- {showShortcuts && } - -
- - - {useRange && ( - <> -
- -
- + {appendToBody ? ( + createPortal( +
+ +
+
+ {showShortcuts && } + +
- - )} + + {useRange && ( + <> +
+ +
+ + + + )} +
+
+ + {showFooter &&
} +
+
, + document.body + ) + ) : ( +
+ +
+
+ {showShortcuts && } + +
+ + + {useRange && ( + <> +
+ +
+ + + + )} +
-
- {showFooter &&
} + {showFooter &&
} +
-
+ )}
); diff --git a/src/components/Input.tsx b/src/components/Input.tsx index a05a274..d03cf0d 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -35,7 +35,8 @@ const Input = () => { popoverDirection, required, input, - setInput + setInput, + appendToBody } = useContext(DatepickerContext); // UseRefs @@ -226,23 +227,24 @@ const Input = () => { div.classList.remove("hidden"); div.classList.add("block"); - // window.innerWidth === 767 - const popoverOnUp = popoverDirection == "up"; - const popoverOnDown = popoverDirection === "down"; - if ( - popoverOnUp || - (window.innerWidth > 767 && - window.screen.height - 100 < div.getBoundingClientRect().bottom && - !popoverOnDown) - ) { - div.classList.add("bottom-full"); - div.classList.add("mb-2.5"); - div.classList.remove("mt-2.5"); - arrow.classList.add("-bottom-2"); - arrow.classList.add("border-r"); - arrow.classList.add("border-b"); - arrow.classList.remove("border-l"); - arrow.classList.remove("border-t"); + if (!appendToBody) { + const popoverOnUp = popoverDirection == "up"; + const popoverOnDown = popoverDirection === "down"; + if ( + popoverOnUp || + (window.innerWidth > 767 && + window.screen.height - 100 < div.getBoundingClientRect().bottom && + !popoverOnDown) + ) { + div.classList.add("bottom-full"); + div.classList.add("mb-2.5"); + div.classList.remove("mt-2.5"); + arrow.classList.add("-bottom-2"); + arrow.classList.add("border-r"); + arrow.classList.add("border-b"); + arrow.classList.remove("border-l"); + arrow.classList.remove("border-t"); + } } setTimeout(() => { @@ -263,7 +265,7 @@ const Input = () => { input.removeEventListener("focus", showCalendarContainer); } }; - }, [calendarContainer, arrowContainer, popoverDirection]); + }, [calendarContainer, arrowContainer, popoverDirection, appendToBody]); return ( <> diff --git a/src/contexts/DatepickerContext.ts b/src/contexts/DatepickerContext.ts index 1110859..852c7f4 100644 --- a/src/contexts/DatepickerContext.ts +++ b/src/contexts/DatepickerContext.ts @@ -24,7 +24,7 @@ import { interface DatepickerStore { arrowContainer: RefObject | null; asSingle?: boolean; - + appendToBody: boolean; calendarContainer: RefObject | null; changeDatepickerValue: (value: DateValueType, e?: HTMLInputElement | null) => void; changeDayHover: (day: DateType) => void; @@ -76,6 +76,7 @@ interface DatepickerStore { const DatepickerContext = createContext({ arrowContainer: null, asSingle: false, + appendToBody: false, calendarContainer: null, changeDatepickerValue: () => {}, diff --git a/src/types/index.ts b/src/types/index.ts index cac5be8..0dc5963 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -92,6 +92,7 @@ export interface DatepickerType { startWeekOn?: WeekStringType; popoverDirection?: PopoverDirectionType; required?: boolean; + appendToBody?: boolean; } export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"