68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useRef, useState } from "react"
|
|
|
|
import BookingWidgetClient, { type BookingWidgetClientProps } from "../Client"
|
|
|
|
import styles from "./FloatingBookingWidget.module.css"
|
|
|
|
type Props = Omit<BookingWidgetClientProps, "type">
|
|
|
|
export function FloatingBookingWidgetClient(props: Props) {
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const observerRef = useRef<IntersectionObserver | null>(null)
|
|
const [stickyTop, setStickyTop] = useState(false)
|
|
|
|
useEffect(() => {
|
|
observerRef.current = new IntersectionObserver(
|
|
([entry]) => {
|
|
const hasScrolledPastTop = entry.boundingClientRect.bottom < 0
|
|
setStickyTop(hasScrolledPastTop)
|
|
},
|
|
{ threshold: 0, rootMargin: "0px 0px 0% 0px" }
|
|
)
|
|
|
|
if (containerRef.current) {
|
|
observerRef.current?.observe(containerRef.current)
|
|
}
|
|
|
|
return () => {
|
|
observerRef.current?.disconnect()
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
/*
|
|
Re-observe the element on an interval to ensure the observer is up to date
|
|
This is a workaround for the fact that the observer doesn't always trigger
|
|
when the element is scrolled out of view if you do it too fast
|
|
*/
|
|
const interval = setInterval(() => {
|
|
if (!containerRef.current || !observerRef.current) {
|
|
return
|
|
}
|
|
|
|
observerRef.current.unobserve(containerRef.current)
|
|
observerRef.current.observe(containerRef.current)
|
|
}, 500)
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
className={styles.floatingBookingWidget}
|
|
data-intersecting={stickyTop}
|
|
ref={containerRef}
|
|
>
|
|
<div className={styles.floatingBackground}>
|
|
<BookingWidgetClient
|
|
{...props}
|
|
type="compact"
|
|
isFloating={!stickyTop}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|