UNPKG

@scrolia/react

Version:

A headless scrollbar component

110 lines (108 loc) 3.4 kB
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js'); const require_contexts_scrollcore = require('../contexts/scrollcore.js'); const require_plugin = require('../functions/plugin.js'); const react = require_rolldown_runtime.__toESM(require("react")); const handleScrollFn = ({ axis, disabled, page, plugins, contentRef, hvTrack, hvThumb, total, view, viewOffset, scrollbarOffset, setScrollbarOffset }) => { if (page) if (axis === "x") viewOffset.current = window.scrollX; else viewOffset.current = window.scrollY; else if (contentRef.current) if (axis === "x") viewOffset.current = contentRef.current.scrollLeft; else viewOffset.current = contentRef.current.scrollTop; const scrollbarOffsetNext = viewOffset.current / total.current * view.current; let result; for (const plugin of plugins) { if (!plugin.onScroll) continue; result = require_plugin.tryPlugin(plugin, plugin.onScroll, { axis, isDisabled: disabled, isPage: page, isDefined: hvTrack && hvThumb, total: total.current, view: view.current, viewOffset: viewOffset.current, scrollbarOffsetPrev: scrollbarOffset, scrollbarOffsetNext: result?.scrollbarOffset ?? scrollbarOffsetNext }) ?? result; } let offset; if (result?.scrollbarOffset) offset = result.scrollbarOffset; else offset = scrollbarOffsetNext; setScrollbarOffset(offset); }; /** Hook for handling scroll events. */ const useScrollHandler = () => { const { options: { disabled, page, plugins }, contentRef, x, y } = require_contexts_scrollcore.useScrollCore(); react.useEffect(() => { const handleScroll = () => { x.hvTrack && x.hvThumb && handleScrollFn({ axis: "x", disabled, page, plugins, contentRef, hvTrack: x.hvTrack, hvThumb: x.hvThumb, total: x.total, view: x.view, viewOffset: x.viewOffset, scrollbarOffset: x.scrollbarOffset, setScrollbarOffset: x.setScrollbarOffset }); }; if (page) window.addEventListener("scroll", handleScroll); else if (contentRef.current) contentRef.current.addEventListener("scroll", handleScroll); return () => { if (page) window.removeEventListener("scroll", handleScroll); else if (contentRef.current) contentRef.current.removeEventListener("scroll", handleScroll); }; }, [ disabled, page, plugins, contentRef, x.hvTrack, x.hvThumb, x.total, x.view, x.viewOffset, x.scrollbarOffset, x.setScrollbarOffset ]); react.useEffect(() => { const handleScroll = () => { y.hvTrack && y.hvThumb && handleScrollFn({ axis: "y", disabled, page, plugins, contentRef, hvTrack: y.hvTrack, hvThumb: y.hvThumb, total: y.total, view: y.view, viewOffset: y.viewOffset, scrollbarOffset: y.scrollbarOffset, setScrollbarOffset: y.setScrollbarOffset }); }; if (page) window.addEventListener("scroll", handleScroll); else if (contentRef.current) contentRef.current.addEventListener("scroll", handleScroll); return () => { if (page) window.removeEventListener("scroll", handleScroll); else if (contentRef.current) contentRef.current.removeEventListener("scroll", handleScroll); }; }, [ disabled, page, plugins, contentRef, y.hvTrack, y.hvThumb, y.total, y.view, y.viewOffset, y.scrollbarOffset, y.setScrollbarOffset ]); }; exports.useScrollHandler = useScrollHandler; //# sourceMappingURL=scroll.js.map