@dossierhq/design
Version:
The design system for Dossier.
44 lines • 2.46 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { useIsClippedObserver } from '../../hooks/useIsClippedObserver.js';
import { toClassName } from '../../utils/ClassNameUtils.js';
export function Scrollable({ className, direction, style, shadows, scrollToId, scrollToIdSignal, scrollToTopSignal, children, }) {
const ref = useRef(null);
const isVertical = direction !== 'horizontal';
const startShadow = !shadows || shadows === 'both' || shadows === 'top';
const endShadow = !shadows || shadows === 'both' || shadows === 'bottom';
useEffect(() => {
if (scrollToTopSignal && ref.current) {
ref.current.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [scrollToTopSignal]);
useEffect(() => {
if (scrollToId && scrollToIdSignal && ref.current) {
const scrollToElement = document.getElementById(scrollToId);
if (scrollToElement) {
let top = scrollToElement.offsetTop;
const style = getComputedStyle(scrollToElement);
if (style.position === 'sticky') {
const nextElement = scrollToElement.nextElementSibling;
if (nextElement && nextElement instanceof HTMLElement) {
top = nextElement.offsetTop - scrollToElement.scrollHeight - ref.current.offsetTop;
}
}
ref.current.scrollTo({ behavior: 'smooth', top });
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [scrollToIdSignal]);
if (!isVertical) {
const realClassName = toClassName('is-overflow-x-auto is-scroll-behavior-smooth', className);
return (_jsx("div", { ref: ref, className: realClassName, style: style, children: children }));
}
const realClassName = toClassName('is-overflow-y-auto is-scroll-behavior-smooth', className);
return (_jsxs("div", { ref: ref, className: realClassName, style: style, children: [startShadow ? _jsx(StickyShadow, { className: "sticky-top-shadow is-sticky-top" }) : null, children, endShadow ? _jsx(StickyShadow, { className: "sticky-bottom-shadow is-sticky-bottom" }) : null] }));
}
function StickyShadow({ className }) {
const shadowRef = useIsClippedObserver();
return _jsx("div", { className: className, ref: shadowRef });
}
//# sourceMappingURL=Scrollable.js.map