@scrolia/react/dist/hooks/thumb.js

A headless scrollbar component

const require_contexts_scrollcore = require('../contexts/scrollcore.js');
const require_plugin = require('../functions/plugin.js');

const handleOnPointerDown = ({ axis, event, disabled, page, plugins, contentRef, hvTrack, hvThumb, total, view, viewOffset }) => {
	event.preventDefault();
	const pointerOffset = axis === "x" ? event.clientX : event.clientY;
	const startPos = {
		viewOffset: viewOffset.current,
		pointerOffset
	};
	for (const plugin of plugins) {
		if (!plugin.onDragStart) continue;
		require_plugin.tryPlugin(plugin, plugin.onDragStart, {
			axis,
			isDisabled: disabled,
			isPage: page,
			isDefined: hvTrack && hvThumb,
			total: total.current,
			view: view.current,
			viewOffset: viewOffset.current,
			pointerOffset
		});
	}
	const handlePointerMove = (e) => {
		const _pointerOffset = axis === "x" ? e.clientX : e.clientY;
		const _total = total.current;
		const _view = view.current;
		const delta = _pointerOffset - startPos.pointerOffset;
		const ratio = _view / _total;
		const scrollTo = startPos.viewOffset + delta / ratio;
		let result;
		for (const plugin of plugins) {
			if (!plugin.onDragMove) continue;
			result = require_plugin.tryPlugin(plugin, plugin.onDragMove, {
				axis,
				isDisabled: disabled,
				isPage: page,
				isDefined: hvTrack && hvThumb,
				total: _total,
				view: _view,
				viewOffset: viewOffset.current,
				pointerOffset: _pointerOffset,
				viewOffsetInit: startPos.viewOffset,
				pointerOffsetInit: startPos.pointerOffset,
				delta,
				ratio,
				scrollTo: result?.scrollTo ?? scrollTo
			}) ?? result;
		}
		let final;
		if (result?.scrollTo) final = result.scrollTo;
		else final = scrollTo;
		if (page) window.scrollTo({
			...axis === "x" ? { left: final } : { top: final },
			behavior: "instant"
		});
		else if (contentRef.current) contentRef.current.scrollTo({
			...axis === "x" ? { left: final } : { top: final },
			behavior: "instant"
		});
	};
	const handlePointerUp = (e) => {
		for (const plugin of plugins) {
			if (!plugin.onDragEnd) continue;
			require_plugin.tryPlugin(plugin, plugin.onDragEnd, {
				axis,
				isDisabled: disabled,
				isPage: page,
				isDefined: hvTrack && hvThumb,
				total: total.current,
				view: view.current,
				viewOffset: viewOffset.current,
				pointerOffset: axis === "x" ? e.clientX : e.clientY,
				viewOffsetInit: startPos.viewOffset,
				pointerOffsetInit: startPos.pointerOffset
			});
		}
		window.removeEventListener("pointermove", handlePointerMove);
		window.removeEventListener("pointerup", handlePointerUp);
	};
	window.addEventListener("pointermove", handlePointerMove);
	window.addEventListener("pointerup", handlePointerUp);
};
/** Hook for thumb logic. */
const useThumbXHandler = () => {
	const { options: { disabled, page, plugins }, contentRef, x: { hvTrack, hvThumb, total, view, viewOffset } } = require_contexts_scrollcore.useScrollCore();
	const onPointerDown = (event) => {
		handleOnPointerDown({
			axis: "x",
			event,
			disabled,
			page,
			plugins,
			contentRef,
			hvTrack,
			hvThumb,
			total,
			view,
			viewOffset
		});
	};
	return { onPointerDown };
};
/** Hook for thumb logic. */
const useThumbYHandler = () => {
	const { options: { disabled, page, plugins }, contentRef, y: { hvTrack, hvThumb, total, view, viewOffset } } = require_contexts_scrollcore.useScrollCore();
	const onPointerDown = (event) => {
		handleOnPointerDown({
			axis: "y",
			event,
			disabled,
			page,
			plugins,
			contentRef,
			hvTrack,
			hvThumb,
			total,
			view,
			viewOffset
		});
	};
	return { onPointerDown };
};

exports.useThumbXHandler = useThumbXHandler;
exports.useThumbYHandler = useThumbYHandler;
//# sourceMappingURL=thumb.js.map