@tamagui/react-native-web-lite 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/ScrollView/WebScrollView.cjs

@@ -0,0 +1,270 @@
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var WebScrollView_exports = {};
+__export(WebScrollView_exports, { WebScrollView: () => WebScrollView });
+module.exports = __toCommonJS(WebScrollView_exports);
+var React = __toESM(require("react"), 1);
+var import_View = require("../View/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const View = import_View.View;
+function mergeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) {
+			if (!ref) continue;
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		}
+	};
+}
+function normalizeScrollEvent(e) {
+	const target = e.target;
+	return {
+		nativeEvent: {
+			contentOffset: {
+				get x() {
+					return target.scrollLeft;
+				},
+				get y() {
+					return target.scrollTop;
+				}
+			},
+			contentSize: {
+				get height() {
+					return target.scrollHeight;
+				},
+				get width() {
+					return target.scrollWidth;
+				}
+			},
+			layoutMeasurement: {
+				get height() {
+					return target.offsetHeight;
+				},
+				get width() {
+					return target.offsetWidth;
+				}
+			}
+		},
+		timeStamp: Date.now()
+	};
+}
+function shouldEmitScrollEvent(lastTick, eventThrottle) {
+	const timeSinceLastTick = Date.now() - lastTick;
+	return eventThrottle > 0 && timeSinceLastTick >= eventThrottle;
+}
+function resolveStyles(...inputs) {
+	const style = {};
+	const classNames = [];
+	const walk = (s) => {
+		if (!s) return;
+		if (Array.isArray(s)) {
+			for (const item of s) walk(item);
+			return;
+		}
+		if (s.$$css) {
+			for (const k in s) {
+				if (k !== "$$css") classNames.push(s[k]);
+			}
+		} else {
+			Object.assign(style, s);
+		}
+	};
+	for (const input of inputs) walk(input);
+	return {
+		style,
+		className: classNames.join(" ")
+	};
+}
+function joinClassNames(...parts) {
+	const joined = parts.filter(Boolean).join(" ").trim();
+	return joined || void 0;
+}
+const commonStyle = {
+	flexGrow: 1,
+	flexShrink: 1
+};
+const styles = {
+	baseVertical: {
+		...commonStyle,
+		flexDirection: "column",
+		overflowX: "hidden",
+		overflowY: "auto"
+	},
+	baseHorizontal: {
+		...commonStyle,
+		flexDirection: "row",
+		overflowX: "auto",
+		overflowY: "hidden"
+	},
+	contentContainerHorizontal: { flexDirection: "row" },
+	contentContainerCenterContent: {
+		justifyContent: "center",
+		flexGrow: 1
+	},
+	stickyHeader: {
+		position: "sticky",
+		top: 0,
+		zIndex: 10
+	},
+	pagingEnabledHorizontal: { scrollSnapType: "x mandatory" },
+	pagingEnabledVertical: { scrollSnapType: "y mandatory" },
+	pagingEnabledChild: { scrollSnapAlign: "start" },
+	scrollDisabled: {
+		overflowX: "hidden",
+		overflowY: "hidden",
+		touchAction: "none"
+	}
+};
+const WebScrollView = React.forwardRef((props, forwardedRef) => {
+	const { children, contentContainerStyle, horizontal, onContentSizeChange, onScroll, refreshControl, stickyHeaderIndices, pagingEnabled, centerContent, scrollEnabled = true, scrollEventThrottle = 0, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, keyboardShouldPersistTaps, keyboardDismissMode, contentOffset, contentInset, contentInsetAdjustmentBehavior, decelerationRate, directionalLockEnabled, disableIntervalMomentum, disableScrollViewPanResponder, endFillColor, fadingEdgeLength, indicatorStyle, invertStickyHeaders, maintainVisibleContentPosition, maximumZoomScale, minimumZoomScale, nestedScrollEnabled, onScrollToTop, overScrollMode, pinchGestureEnabled, removeClippedSubviews, scrollIndicatorInsets, scrollPerfTag, scrollToOverflowEnabled, snapToAlignment, snapToEnd, snapToInterval, snapToOffsets, snapToStart, bounces, ...rest } = props;
+	const { dataSet, ...domRest } = rest;
+	const dataAttrs = {};
+	if (dataSet) {
+		for (const key in dataSet) {
+			dataAttrs[`data-${key}`] = dataSet[key];
+		}
+	}
+	const scrollNodeRef = React.useRef(null);
+	const innerViewRef = React.useRef(null);
+	const scrollState = React.useRef({
+		isScrolling: false,
+		scrollLastTick: 0
+	});
+	const scrollTimeout = React.useRef(null);
+	const scrollTo = (options) => {
+		const node = scrollNodeRef.current;
+		if (node == null) return;
+		const { x = 0, y = 0, animated = true } = options || {};
+		if (typeof node.scroll === "function") {
+			node.scroll({
+				top: y,
+				left: x,
+				behavior: animated ? "smooth" : "auto"
+			});
+		} else {
+			node.scrollLeft = x;
+			node.scrollTop = y;
+		}
+	};
+	const scrollToEnd = (options) => {
+		const node = scrollNodeRef.current;
+		if (node == null) return;
+		const animated = (options && options.animated) !== false;
+		const x = horizontal ? node.scrollWidth : 0;
+		const y = horizontal ? 0 : node.scrollHeight;
+		scrollTo({
+			x,
+			y,
+			animated
+		});
+	};
+	const setScrollNodeRef = React.useCallback((node) => {
+		scrollNodeRef.current = node;
+		if (node != null) {
+			node.getScrollResponder = () => node;
+			node.getScrollableNode = () => node;
+			node.getInnerViewNode = () => innerViewRef.current;
+			node.getInnerViewRef = () => innerViewRef.current;
+			node.getNativeScrollRef = () => node;
+			node.scrollTo = scrollTo;
+			node.scrollToEnd = scrollToEnd;
+			node.flashScrollIndicators = () => {};
+		}
+		mergeRefs(forwardedRef)(node);
+	}, [forwardedRef, horizontal]);
+	function handleScroll(e) {
+		e.stopPropagation();
+		if (e.target !== scrollNodeRef.current) return;
+		if (scrollTimeout.current != null) {
+			clearTimeout(scrollTimeout.current);
+		}
+		scrollTimeout.current = setTimeout(() => {
+			scrollState.current.isScrolling = false;
+			onScroll?.(normalizeScrollEvent(e));
+		}, 100);
+		if (scrollState.current.isScrolling) {
+			if (shouldEmitScrollEvent(scrollState.current.scrollLastTick, scrollEventThrottle)) {
+				scrollState.current.scrollLastTick = Date.now();
+				onScroll?.(normalizeScrollEvent(e));
+			}
+		} else {
+			scrollState.current.isScrolling = true;
+			scrollState.current.scrollLastTick = Date.now();
+			onScroll?.(normalizeScrollEvent(e));
+		}
+	}
+	const handleContentLayout = onContentSizeChange ? (e) => {
+		const { width, height } = e.nativeEvent.layout;
+		onContentSizeChange(width, height);
+	} : void 0;
+	const hasStickyHeaderIndices = !horizontal && Array.isArray(stickyHeaderIndices);
+	const renderedChildren = hasStickyHeaderIndices || pagingEnabled ? React.Children.map(children, (child, i) => {
+		const isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1;
+		if (child != null && (isSticky || pagingEnabled)) {
+			const resolved = resolveStyles(isSticky && styles.stickyHeader, pagingEnabled && styles.pagingEnabledChild);
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(View, {
+				style: resolved.style,
+				className: joinClassNames(resolved.className),
+				children: child
+			});
+		}
+		return child;
+	}) : children;
+	const contentResolved = resolveStyles(horizontal && styles.contentContainerHorizontal, centerContent && styles.contentContainerCenterContent, contentContainerStyle);
+	const contentContainer = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(View, {
+		ref: innerViewRef,
+		onLayout: handleContentLayout,
+		style: contentResolved.style,
+		className: joinClassNames(contentResolved.className),
+		children: renderedChildren
+	});
+	const baseStyle = horizontal ? styles.baseHorizontal : styles.baseVertical;
+	const pagingEnabledStyle = horizontal ? styles.pagingEnabledHorizontal : styles.pagingEnabledVertical;
+	const hideHorizontalScrollbar = showsHorizontalScrollIndicator === false;
+	const hideVerticalScrollbar = showsVerticalScrollIndicator === false;
+	const extraClassName = (hideHorizontalScrollbar ? " _hsb-x" : "") + (hideVerticalScrollbar ? " _hsb-y" : "");
+	const scrollResolved = resolveStyles(baseStyle, pagingEnabled && pagingEnabledStyle, style, !scrollEnabled && styles.scrollDisabled);
+	const scrollView = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(View, {
+		...domRest,
+		...dataAttrs,
+		className: joinClassNames(domRest.className, scrollResolved.className, extraClassName),
+		ref: setScrollNodeRef,
+		onScroll: handleScroll,
+		style: scrollResolved.style,
+		children: contentContainer
+	});
+	if (refreshControl) {
+		const refreshResolved = resolveStyles(baseStyle, style);
+		return React.cloneElement(refreshControl, {
+			style: refreshResolved.style,
+			className: joinClassNames(refreshResolved.className)
+		}, scrollView);
+	}
+	return scrollView;
+});
+WebScrollView.displayName = "ScrollView";