@scrolia/react-native/dist/hooks/thumb/functions/pan.mjs

A headless scrollbar component

import { useScrollCore } from "../../../contexts/scrollcore.mjs";
import { tryPlugin } from "../../../functions/plugin.mjs";
import { PanResponder } from "react-native";
import * as React from "react";

const onPanResponderGrant = ({ axis, event, state, startPos, isDrag, disabled, animated, plugins, hvTrack, hvThumb, total, view, viewOffset }) => {
	event.preventDefault();
	const pointerOffset = axis === "x" ? state.x0 : state.y0;
	startPos.current = {
		viewOffset: viewOffset.current,
		pointerOffset
	};
	for (const plugin of plugins) {
		if (!plugin.onDragStart) continue;
		tryPlugin(plugin, plugin.onDragStart, {
			axis,
			isDisabled: disabled,
			isAnimated: animated,
			isDefined: hvTrack && hvThumb,
			total: total.current,
			view: view.current,
			viewOffset: viewOffset.current,
			pointerOffset
		});
	}
	isDrag.current = true;
};
const onPanResponderMove = ({ axis, state, startPos, isDrag, disabled, animated, plugins, contentType, contentRef, hvTrack, hvThumb, total, view, viewOffset }) => {
	if (!isDrag.current || !contentRef.current) return void 0;
	const _startPos = startPos.current;
	const delta = axis === "x" ? state.dx : state.dy;
	const ratio = view.current / total.current;
	const scrollTo = _startPos.viewOffset + delta / ratio;
	let result;
	for (const plugin of plugins) {
		if (!plugin.onDragMove) continue;
		result = tryPlugin(plugin, plugin.onDragMove, {
			axis,
			isDisabled: disabled,
			isAnimated: animated,
			isDefined: hvTrack && hvThumb,
			total: total.current,
			view: view.current,
			viewOffset: viewOffset.current,
			pointerOffset: _startPos.pointerOffset + (axis === "x" ? state.dx : state.dy),
			viewOffsetInit: _startPos.viewOffset,
			pointerOffsetInit: _startPos.pointerOffset,
			delta,
			ratio,
			scrollTo: result?.scrollTo ?? scrollTo
		}) ?? result;
	}
	let final;
	if (result?.scrollTo) final = result.scrollTo;
	else final = scrollTo;
	switch (contentType.current) {
		case "scrollview":
			contentRef.current.scrollTo({
				...axis === "x" ? { x: final } : { y: final },
				animated: false
			});
			break;
		case "flatlist":
			contentRef.current.scrollToOffset({
				offset: final,
				animated: false
			});
			break;
	}
};
const onPanResponderRelease = ({ axis, state, startPos, isDrag, disabled, animated, plugins, hvTrack, hvThumb, total, view, viewOffset }) => {
	const _startPos = startPos.current;
	for (const plugin of plugins) {
		if (!plugin.onDragEnd) continue;
		tryPlugin(plugin, plugin.onDragEnd, {
			axis,
			isDisabled: disabled,
			isAnimated: animated,
			isDefined: hvTrack && hvThumb,
			total: total.current,
			view: view.current,
			viewOffset: viewOffset.current,
			pointerOffset: axis === "x" ? state.x0 : state.y0,
			viewOffsetInit: _startPos.viewOffset,
			pointerOffsetInit: _startPos.pointerOffset
		});
	}
	isDrag.current = false;
};
const createPanResponder = (axis) => {
	const { options: { disabled, animated, plugins }, [axis]: { contentType, contentRef, hvTrack, hvThumb, total, view, viewOffset } } = useScrollCore();
	const isDrag = React.useRef(false);
	const startPos = React.useRef({
		viewOffset: 0,
		pointerOffset: 0
	});
	return PanResponder.create({
		onStartShouldSetPanResponder: () => true,
		onMoveShouldSetPanResponder: () => true,
		onPanResponderGrant: (event, state) => {
			onPanResponderGrant({
				axis,
				event,
				state,
				startPos,
				isDrag,
				disabled,
				animated,
				plugins,
				hvTrack,
				hvThumb,
				total,
				view,
				viewOffset
			});
		},
		onPanResponderMove: (_, state) => {
			onPanResponderMove({
				axis,
				state,
				startPos,
				isDrag,
				disabled,
				animated,
				plugins,
				contentType,
				contentRef,
				hvTrack,
				hvThumb,
				total,
				view,
				viewOffset
			});
		},
		onPanResponderRelease: (_, state) => {
			onPanResponderRelease({
				axis,
				state,
				startPos,
				isDrag,
				disabled,
				animated,
				plugins,
				hvTrack,
				hvThumb,
				total,
				view,
				viewOffset
			});
		}
	});
};

export { createPanResponder };
//# sourceMappingURL=pan.mjs.map