From 135fc122c983da09fb2f8ce65f8428cd909770bb Mon Sep 17 00:00:00 2001 From: ER1KO <enricovagnetti@gmail.com> Date: Thu, 10 Aug 2023 16:25:30 +0200 Subject: [PATCH] Possible fix for calendar position outside window --- src/components/Datepicker.tsx | 20 +------------------- src/components/Input.tsx | 25 +++++++++++++++++-------- 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index 54e90b7..6de0740 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -165,25 +165,7 @@ const Datepicker: React.FC<DatepickerType> = ({ ); /* End Second */ - // UseEffects & UseLayoutEffect - useEffect(() => { - const container = containerRef.current; - const calendarContainer = calendarContainerRef.current; - const arrow = arrowRef.current; - - if (container && calendarContainer && arrow) { - const detail = container.getBoundingClientRect(); - const screenCenter = window.innerWidth / 2; - const containerCenter = (detail.right - detail.x) / 2 + detail.x; - - if (containerCenter > screenCenter) { - arrow.classList.add("right-0"); - arrow.classList.add("mr-3.5"); - calendarContainer.classList.add("right-0"); - } - } - }, []); - + useEffect(() => { if (value && value.startDate && value.endDate) { const startDate = dayjs(value.startDate); diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 38fc856..cd2b0f8 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -223,18 +223,28 @@ const Input: React.FC<Props> = (e: Props) => { function showCalendarContainer() { if (arrow && div && div.classList.contains("hidden")) { + div.classList.remove("hidden"); div.classList.add("block"); - // window.innerWidth === 767 const popoverOnUp = popoverDirection == "up"; - const popoverOnDown = popoverDirection === "down"; - if ( - popoverOnUp || + const popoverOnDown = popoverDirection === "down"; + const calendarPosition = div.getBoundingClientRect(); + const body = document.querySelector('body')!; + const bodyPosition = body.getBoundingClientRect(); + const calcPosition = Math.ceil(calendarPosition.right - bodyPosition.right); + const finalPosition = calcPosition > 0 ? calcPosition : 0; + const leftPositionCalendar = `left:-${finalPosition}px`; + const leftPositionArrow = `left:${finalPosition}px`; + if(((calendarPosition.right > bodyPosition.right) || (calendarPosition.left < bodyPosition.left)) && window.innerWidth > 767) { + div.setAttribute("style",leftPositionCalendar); + arrow.setAttribute("style",leftPositionArrow); + } + + if (popoverOnUp || (window.innerWidth > 767 && - window.screen.height - 100 < div.getBoundingClientRect().bottom && - !popoverOnDown) - ) { + window.screen.height - 100 < calendarPosition.bottom && + !popoverOnDown)) { div.classList.add("bottom-full"); div.classList.add("mb-2.5"); div.classList.remove("mt-2.5"); @@ -244,7 +254,6 @@ const Input: React.FC<Props> = (e: Props) => { arrow.classList.remove("border-l"); arrow.classList.remove("border-t"); } - setTimeout(() => { div.classList.remove("translate-y-4"); div.classList.remove("opacity-0");