UNPKG

@tamagui/react-native-web-lite

Version:
131 lines (130 loc) 3.59 kB
import { useMergeRefs } from "@tamagui/react-native-web-internals"; import * as React from "react"; import { View } from "../View/index.mjs"; import { jsx } from "react/jsx-runtime"; function normalizeScrollEvent(e) { return { nativeEvent: { contentOffset: { get x() { return e.target.scrollLeft; }, get y() { return e.target.scrollTop; } }, contentSize: { get height() { return e.target.scrollHeight; }, get width() { return e.target.scrollWidth; } }, layoutMeasurement: { get height() { return e.target.offsetHeight; }, get width() { return e.target.offsetWidth; } } }, timeStamp: Date.now() }; } function shouldEmitScrollEvent(lastTick, eventThrottle) { const timeSinceLastTick = Date.now() - lastTick; return eventThrottle > 0 && timeSinceLastTick >= eventThrottle; } const ScrollViewBase = React.forwardRef((props, forwardedRef) => { const { onScroll, onTouchMove, onWheel, scrollEnabled = true, scrollEventThrottle = 0, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, // strip RN-only props that shouldn't reach the DOM onMomentumScrollBegin, onMomentumScrollEnd, onScrollBeginDrag, onScrollEndDrag, ...rest } = props; const scrollState = React.useRef({ isScrolling: false, scrollLastTick: 0 }); const scrollTimeout = React.useRef(null); const scrollRef = React.useRef(null); function createPreventableScrollHandler(handler) { return e => { if (scrollEnabled) { if (handler) { handler(e); } } }; } function handleScroll(e) { e.stopPropagation(); if (e.target === scrollRef.current) { e.persist(); if (scrollTimeout.current != null) { clearTimeout(scrollTimeout.current); } scrollTimeout.current = setTimeout(() => { handleScrollEnd(e); }, 100); if (scrollState.current.isScrolling) { if (shouldEmitScrollEvent(scrollState.current.scrollLastTick, scrollEventThrottle)) { handleScrollTick(e); } } else { handleScrollStart(e); } } } function handleScrollStart(e) { scrollState.current.isScrolling = true; handleScrollTick(e); } function handleScrollTick(e) { scrollState.current.scrollLastTick = Date.now(); if (onScroll) { onScroll(normalizeScrollEvent(e)); } } function handleScrollEnd(e) { scrollState.current.isScrolling = false; if (onScroll) { onScroll(normalizeScrollEvent(e)); } } const hideHorizontalScrollbar = showsHorizontalScrollIndicator === false; const hideVerticalScrollbar = showsVerticalScrollIndicator === false; return /* @__PURE__ */jsx(View, { ...rest, className: "_dsp_contents" + (hideHorizontalScrollbar ? " _hsb-x" : "") + (hideVerticalScrollbar ? " _hsb-y" : ""), onScroll: handleScroll, onTouchMove: createPreventableScrollHandler(onTouchMove), onWheel: createPreventableScrollHandler(onWheel), ref: useMergeRefs(scrollRef, forwardedRef), style: [style, // @ts-ignore !scrollEnabled && styles.scrollDisabled] }); }); const styles = { scrollDisabled: { overflowX: "hidden", overflowY: "hidden", touchAction: "none" } }; var ScrollViewBase_default = ScrollViewBase; export { ScrollViewBase, ScrollViewBase_default as default }; //# sourceMappingURL=ScrollViewBase.mjs.map