Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)
feat(SW-2879): Move BookingWidget to booking-flow package * Fix lockfile * Fix styling * a tiny little booking widget test * Tiny fixes * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Remove unused scripts * lint:fix * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Tiny lint fixes * update test * Update Input in booking-flow * Clean up comments etc * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Setup tracking context for booking-flow * Add missing use client * Fix temp tracking function * Pass booking to booking-widget * Remove comment * Add use client to booking widget tracking provider * Add use client to tracking functions * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Move debug page * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package Approved-by: Bianca Widstam
This commit is contained in:
Anton Gunnarsson
148
packages/common/hooks/useStickyPosition.ts
Normal file
148
packages/common/hooks/useStickyPosition.ts
Normal file
@@ -0,0 +1,148 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
|
||||
import useStickyPositionStore, {
|
||||
type StickyElement,
|
||||
type StickyElementNameEnum,
|
||||
} from "../stores/sticky-position"
|
||||
import { debounce } from "../utils/debounce"
|
||||
|
||||
interface UseStickyPositionProps {
|
||||
ref?: React.RefObject<HTMLElement | null>
|
||||
name?: StickyElementNameEnum
|
||||
group?: string
|
||||
}
|
||||
|
||||
// Global singleton ResizeObserver to observe the body only once
|
||||
let resizeObserver: ResizeObserver | null = null
|
||||
|
||||
/**
|
||||
* Custom hook to manage sticky positioning of elements within a page.
|
||||
* This hook registers an element as sticky, calculates its top offset based on
|
||||
* other registered sticky elements, and updates the element's position dynamically.
|
||||
*
|
||||
* @param {UseStickyPositionProps} [props] - The properties for configuring the hook.
|
||||
* @param {React.RefObject<HTMLElement>} [props.ref] - A reference to the HTML element that should be sticky. Is optional to allow for other components to only get the height of the sticky elements.
|
||||
* @param {StickyElementNameEnum} [props.name] - A unique name for the sticky element, used for tracking.
|
||||
* @param {string} [props.group] - An optional group identifier to make multiple elements share the same top offset. Defaults to the name if not provided.
|
||||
*
|
||||
* @returns {Object} An object containing information about the sticky elements.
|
||||
* @returns {number | null} [returns.currentHeight] - The current height of the registered sticky element, or `null` if not available.
|
||||
* @returns {Array<StickyElement>} [returns.allElements] - An array containing the heights, names, and groups of all registered sticky elements.
|
||||
*/
|
||||
export default function useStickyPosition({
|
||||
ref,
|
||||
name,
|
||||
group,
|
||||
}: UseStickyPositionProps = {}) {
|
||||
const {
|
||||
registerSticky,
|
||||
unregisterSticky,
|
||||
stickyElements,
|
||||
updateHeights,
|
||||
getAllElements,
|
||||
} = useStickyPositionStore()
|
||||
|
||||
/* Used for Current mobile header since that doesn't use this hook.
|
||||
*
|
||||
* Instead, calculate if the mobile header is shown and add the height of
|
||||
* that "manually" to all offsets using this hook.
|
||||
*
|
||||
* TODO: Remove this and just use 0 when the current header has been removed.
|
||||
*/
|
||||
const [baseTopOffset, setBaseTopOffset] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (ref && name) {
|
||||
// Register the sticky element with the given ref, name, and group.
|
||||
// If the group is not provided, it defaults to the value of the name.
|
||||
// This registration keeps track of the sticky element and its height.
|
||||
registerSticky(ref, name, group || name)
|
||||
|
||||
// Update the heights of all registered sticky elements.
|
||||
// This ensures that the height information is accurate and up-to-date.
|
||||
updateHeights()
|
||||
|
||||
return () => {
|
||||
unregisterSticky(ref)
|
||||
}
|
||||
}
|
||||
}, [ref, name, group, registerSticky, unregisterSticky, updateHeights])
|
||||
|
||||
/**
|
||||
* Get the top position of element at index `index`
|
||||
*
|
||||
* Calculates the total height of all sticky elements _before_ the element
|
||||
* at position `index`. If `index` is not provided all elements are included
|
||||
* in the calculation. Takes grouping into consideration (only counts one
|
||||
* element per group)
|
||||
*/
|
||||
const getTopOffset = useCallback(
|
||||
(index?: number) => {
|
||||
// Get the group name of the current sticky element.
|
||||
// This will be used to only count one element per group.
|
||||
const elementGroup = index ? stickyElements[index].group : undefined
|
||||
|
||||
return stickyElements
|
||||
.slice(0, index)
|
||||
.reduce<StickyElement[]>((acc, curr) => {
|
||||
if (
|
||||
(elementGroup && curr.group === elementGroup) ||
|
||||
acc.some((elem: StickyElement) => elem.group === curr.group)
|
||||
) {
|
||||
return acc
|
||||
}
|
||||
return [...acc, curr]
|
||||
}, [])
|
||||
.reduce((acc, el) => acc + el.height, baseTopOffset)
|
||||
},
|
||||
[baseTopOffset, stickyElements]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (ref) {
|
||||
// Find the index of the current sticky element in the array of stickyElements.
|
||||
// This helps us determine its position relative to other sticky elements.
|
||||
const index = stickyElements.findIndex((el) => el.ref === ref)
|
||||
|
||||
if (index !== -1 && ref.current) {
|
||||
const topOffset = getTopOffset(index)
|
||||
// Apply the calculated top offset to the current element's style.
|
||||
// This positions the element at the correct location within the document.
|
||||
ref.current.style.top = `${topOffset}px`
|
||||
}
|
||||
}
|
||||
}, [baseTopOffset, stickyElements, ref, getTopOffset])
|
||||
|
||||
useEffect(() => {
|
||||
if (!resizeObserver) {
|
||||
const debouncedResizeHandler = debounce(() => {
|
||||
updateHeights()
|
||||
|
||||
// Only do this special handling if we have the current header
|
||||
if (document.body.clientWidth > 950) {
|
||||
setBaseTopOffset(0)
|
||||
} else {
|
||||
setBaseTopOffset(52.41) // The height of current mobile header
|
||||
}
|
||||
}, 100)
|
||||
|
||||
resizeObserver = new ResizeObserver(debouncedResizeHandler)
|
||||
}
|
||||
|
||||
resizeObserver.observe(document.body)
|
||||
|
||||
return () => {
|
||||
if (resizeObserver) {
|
||||
resizeObserver.unobserve(document.body)
|
||||
}
|
||||
}
|
||||
}, [updateHeights])
|
||||
|
||||
return {
|
||||
currentHeight: ref?.current?.offsetHeight || null,
|
||||
allElements: getAllElements(),
|
||||
getTopOffset,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user