From 20e3c9a35f633c76b641a3eaf59cef0ee1bc6dc4 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Thu, 17 Oct 2024 15:28:24 +0200 Subject: [PATCH] feat(SW-650): added sticky position hook and store --- components/BookingWidget/Client.tsx | 15 +++- .../HotelPage/Map/MapWithCard/index.tsx | 24 +++++ .../Map/MapWithCard/mapWithCard.module.css | 12 +++ .../HotelPage/TabNavigation/index.tsx | 13 ++- .../HotelPage/hotelPage.module.css | 13 --- components/ContentType/HotelPage/index.tsx | 5 +- hooks/useStickyPosition.ts | 90 +++++++++++++++++++ stores/sticky-position.ts | 79 ++++++++++++++++ .../hotelPage/map/mapWithCardWrapper.ts | 8 ++ 9 files changed, 240 insertions(+), 19 deletions(-) create mode 100644 components/ContentType/HotelPage/Map/MapWithCard/index.tsx create mode 100644 components/ContentType/HotelPage/Map/MapWithCard/mapWithCard.module.css create mode 100644 hooks/useStickyPosition.ts create mode 100644 stores/sticky-position.ts create mode 100644 types/components/hotelPage/map/mapWithCardWrapper.ts diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx index 2acb8a397..0b30cf844 100644 --- a/components/BookingWidget/Client.tsx +++ b/components/BookingWidget/Client.tsx @@ -1,13 +1,15 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" -import { useEffect, useState } from "react" +import { useEffect, useRef, useState } from "react" import { FormProvider, useForm } from "react-hook-form" import { dt } from "@/lib/dt" +import { StickyElementNameEnum } from "@/stores/sticky-position" import Form from "@/components/Forms/BookingWidget" import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema" import { CloseLargeIcon } from "@/components/Icons" +import useStickyPosition from "@/hooks/useStickyPosition" import { debounce } from "@/utils/debounce" import { getFormattedUrlQueryParams } from "@/utils/url" @@ -28,6 +30,11 @@ export default function BookingWidgetClient({ searchParams, }: BookingWidgetClientProps) { const [isOpen, setIsOpen] = useState(false) + const bookingWidgetRef = useRef(null) + useStickyPosition({ + ref: bookingWidgetRef, + name: StickyElementNameEnum.BOOKING_WIDGET, + }) const sessionStorageSearchData = typeof window !== "undefined" @@ -139,7 +146,11 @@ export default function BookingWidgetClient({ return ( -
+