@tamagui/sheet 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/SheetScrollView.native.cjs

@@ -0,0 +1,326 @@
+"use strict";
+
+
+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 SheetScrollView_exports = {};
+__export(SheetScrollView_exports, { SheetScrollView: () => SheetScrollView });
+module.exports = __toCommonJS(SheetScrollView_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_core = require("@tamagui/core");
+var import_scroll_view = require("@tamagui/scroll-view");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_react = __toESM(require("react"), 1);
+var import_GestureSheetContext = require("./GestureSheetContext.native.js");
+var import_gestureState = require("./gestureState.native.js");
+var import_SheetContext = require("./SheetContext.native.js");
+var import_useSheetScrollViewGestures = require("./useSheetScrollViewGestures.native.js");
+var import_webViewport = require("./webViewport.native.js");
+var SHEET_SCROLL_VIEW_NAME = "SheetScrollView";
+var SheetScrollView = (0, import_core.createStyledHOC)(import_scroll_view.ScrollView, function(param, ref) {
+	var { scope, children, onScroll, scrollEnabled: scrollEnabledProp, ...props } = param;
+	var context = (0, import_SheetContext.useSheetContext)(scope);
+	var gestureContext = (0, import_GestureSheetContext.useGestureSheetContext)();
+	var { scrollBridge, setHasScrollView, hasFit, screenSize } = context;
+	var keyboardOccludedHeight = Math.max(0, context.keyboardOccludedHeight || 0);
+	var isKeyboardVisible = context.isKeyboardVisible === true || import_core.isWeb && (0, import_webViewport.getWebKeyboardResizeHeight)() >= import_webViewport.MIN_KEYBOARD_HEIGHT;
+	var [scrollEnabled] = (0, import_use_controllable_state.useControllableState)({
+		prop: scrollEnabledProp,
+		defaultProp: true
+	});
+	var scrollRef = import_react.default.useRef(null);
+	var [hasScrollableContent, setHasScrollableContent] = (0, import_react.useState)(true);
+	var parentHeight = (0, import_react.useRef)(0);
+	var contentHeight = (0, import_react.useRef)(0);
+	var frozenFrameHeight = Math.max(0, context.keyboardStableFrameHeight || 0);
+	var fitSizingStyle = hasFit ? {
+		flex: void 0,
+		height: void 0,
+		maxHeight: screenSize || void 0
+	} : { flex: 1 };
+	var contentContainerStyle = hasFit ? void 0 : { minHeight: "100%" };
+	var keyboardFrozenOverride = hasFit && isKeyboardVisible && frozenFrameHeight > 0 ? {
+		height: frozenFrameHeight,
+		maxHeight: frozenFrameHeight
+	} : null;
+	var panGestureRef = gestureContext === null || gestureContext === void 0 ? void 0 : gestureContext.panGestureRef;
+	var { ScrollView: RNGHScrollView } = (0, import_gestureState.getGestureHandlerState)();
+	var useRNGHScrollView = (0, import_gestureState.isGestureHandlerEnabled)() && RNGHScrollView && panGestureRef;
+	var currentScrollOffset = (0, import_react.useRef)(0);
+	var lastEmittedScrollOffset = (0, import_react.useRef)(0);
+	var lockedScrollY = (0, import_react.useRef)(0);
+	var focusedInputScrollFrame = (0, import_react.useRef)(0);
+	var setScrollEnabled = function(next, lockTo) {
+		if (!next) {
+			var _ref;
+			var lockY = (_ref = lockTo !== null && lockTo !== void 0 ? lockTo : scrollBridge.scrollLockY) !== null && _ref !== void 0 ? _ref : currentScrollOffset.current;
+			if (scrollBridge.enabled === false && scrollBridge.scrollLockY === lockY) {
+				return;
+			}
+			scrollBridge.enabled = false;
+			lockedScrollY.current = lockY;
+			scrollBridge.scrollLockY = lockY;
+			if (currentScrollOffset.current !== lockY) {
+				var _scrollRef_current_scrollTo, _scrollRef_current;
+				(_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : (_scrollRef_current_scrollTo = _scrollRef_current.scrollTo) === null || _scrollRef_current_scrollTo === void 0 ? void 0 : _scrollRef_current_scrollTo.call(_scrollRef_current, {
+					x: 0,
+					y: lockY,
+					animated: false
+				});
+				currentScrollOffset.current = lockY;
+			}
+		} else {
+			if (scrollBridge.enabled === true && scrollBridge.scrollLockY === void 0) {
+				return;
+			}
+			scrollBridge.enabled = true;
+			lockedScrollY.current = currentScrollOffset.current;
+			scrollBridge.scrollLockY = void 0;
+		}
+	};
+	var forceScrollTo = function(y) {
+		var _scrollRef_current_scrollTo, _scrollRef_current;
+		(_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : (_scrollRef_current_scrollTo = _scrollRef_current.scrollTo) === null || _scrollRef_current_scrollTo === void 0 ? void 0 : _scrollRef_current_scrollTo.call(_scrollRef_current, {
+			x: 0,
+			y,
+			animated: false
+		});
+		currentScrollOffset.current = y;
+	};
+	var emitManualScroll = import_react.default.useCallback(function(node, y) {
+		currentScrollOffset.current = y;
+		scrollBridge.y = y;
+		if (y > 0) scrollBridge.scrollStartY = -1;
+		lastEmittedScrollOffset.current = y;
+		onScroll === null || onScroll === void 0 ? void 0 : onScroll({
+			nativeEvent: {
+				contentOffset: {
+					x: node.scrollLeft,
+					y
+				},
+				contentSize: {
+					height: node.scrollHeight,
+					width: node.scrollWidth
+				},
+				layoutMeasurement: {
+					height: node.offsetHeight,
+					width: node.offsetWidth
+				}
+			},
+			timeStamp: Date.now()
+		});
+	}, [onScroll, scrollBridge]);
+	var scrollFocusedInputClearOfKeyboard = import_react.default.useCallback(function() {
+		var _scrollRef_current;
+		if (!import_core.isWeb || !hasFit || !isKeyboardVisible || keyboardOccludedHeight <= 0) {
+			return;
+		}
+		var node = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.getScrollableNode();
+		var active = document.activeElement;
+		if (!node || !active || !(0, import_webViewport.isEditableElement)(active) || !node.contains(active)) {
+			return;
+		}
+		var keyboardHeight = Math.max(keyboardOccludedHeight, (0, import_webViewport.getWebKeyboardBottomInset)());
+		if (keyboardHeight <= 0) return;
+		var activeRect = active.getBoundingClientRect();
+		var nodeRect = node.getBoundingClientRect();
+		var margin = 12;
+		var keyboardTop = (0, import_webViewport.getStableLayoutViewportHeight)() - keyboardHeight;
+		var visibleTop = nodeRect.top + margin;
+		var visibleBottom = Math.min(nodeRect.bottom, keyboardTop) - margin;
+		var nextScrollTop = node.scrollTop;
+		if (activeRect.bottom > visibleBottom) {
+			nextScrollTop += Math.ceil(activeRect.bottom - visibleBottom);
+		} else if (activeRect.top < visibleTop) {
+			nextScrollTop -= Math.ceil(visibleTop - activeRect.top);
+		}
+		var maxScrollTop = Math.max(0, node.scrollHeight - node.clientHeight);
+		nextScrollTop = Math.max(0, Math.min(maxScrollTop, nextScrollTop));
+		if (nextScrollTop === node.scrollTop) return;
+		node.scrollTop = nextScrollTop;
+		currentScrollOffset.current = nextScrollTop;
+		scrollBridge.y = nextScrollTop;
+		if (nextScrollTop > 0) scrollBridge.scrollStartY = -1;
+	}, [
+		hasFit,
+		isKeyboardVisible,
+		keyboardOccludedHeight,
+		scrollBridge
+	]);
+	var scheduleFocusedInputScroll = import_react.default.useCallback(function() {
+		if (!import_core.isWeb || !hasFit) return;
+		cancelAnimationFrame(focusedInputScrollFrame.current);
+		focusedInputScrollFrame.current = requestAnimationFrame(function() {
+			scrollFocusedInputClearOfKeyboard();
+			focusedInputScrollFrame.current = requestAnimationFrame(scrollFocusedInputClearOfKeyboard);
+		});
+	}, [hasFit, scrollFocusedInputClearOfKeyboard]);
+	(0, import_react.useEffect)(function() {
+		var _window_visualViewport;
+		if (!import_core.isWeb || !hasFit) return;
+		scheduleFocusedInputScroll();
+		window.addEventListener("focusin", scheduleFocusedInputScroll);
+		(_window_visualViewport = window.visualViewport) === null || _window_visualViewport === void 0 ? void 0 : _window_visualViewport.addEventListener("resize", scheduleFocusedInputScroll);
+		return function() {
+			var _window_visualViewport2;
+			cancelAnimationFrame(focusedInputScrollFrame.current);
+			window.removeEventListener("focusin", scheduleFocusedInputScroll);
+			(_window_visualViewport2 = window.visualViewport) === null || _window_visualViewport2 === void 0 ? void 0 : _window_visualViewport2.removeEventListener("resize", scheduleFocusedInputScroll);
+		};
+	}, [hasFit, scheduleFocusedInputScroll]);
+	(0, import_react.useEffect)(function() {
+		setHasScrollView(true);
+		if ((0, import_gestureState.isGestureHandlerEnabled)()) {
+			scrollBridge.setScrollEnabled = setScrollEnabled;
+			scrollBridge.forceScrollTo = forceScrollTo;
+		}
+		return function() {
+			setHasScrollView(false);
+			scrollBridge.setScrollEnabled = void 0;
+			scrollBridge.forceScrollTo = void 0;
+		};
+	}, []);
+	var updateScrollable = function() {
+		if (parentHeight.current && contentHeight.current) {
+			setHasScrollableContent(contentHeight.current > parentHeight.current);
+		}
+	};
+	var recordFitHeight = function(height) {
+		parentHeight.current = height;
+	};
+	(0, import_react.useEffect)(function() {
+		scrollBridge.hasScrollableContent = hasScrollableContent;
+	}, [hasScrollableContent]);
+	var gestureProps = (0, import_useSheetScrollViewGestures.useSheetScrollViewGestures)({
+		scrollRef,
+		scrollBridge,
+		hasScrollableContent,
+		scrollEnabled,
+		setScrollEnabled,
+		onManualScroll: emitManualScroll
+	});
+	var contentWrapper = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.View, {
+		onLayout: function(e) {
+			var height = Math.floor(e.nativeEvent.layout.height);
+			if (height !== contentHeight.current) {
+				contentHeight.current = height;
+				updateScrollable();
+				if (keyboardOccludedHeight > 0) {
+					scheduleFocusedInputScroll();
+				}
+			}
+		},
+		children: [children, keyboardOccludedHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {
+			"data-sheet-keyboard-scroll-pad": true,
+			height: keyboardOccludedHeight,
+			width: "100%"
+		})]
+	});
+	if (useRNGHScrollView && RNGHScrollView && panGestureRef) {
+		var RNGHComponent = RNGHScrollView;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RNGHComponent, {
+			ref: (0, import_compose_refs.composeRefs)(scrollRef, ref),
+			style: fitSizingStyle,
+			scrollEventThrottle: 1,
+			scrollEnabled,
+			simultaneousHandlers: [panGestureRef],
+			onLayout: function(e) {
+				recordFitHeight(Math.ceil(e.nativeEvent.layout.height));
+				updateScrollable();
+			},
+			onScroll: function(e) {
+				var { y } = e.nativeEvent.contentOffset;
+				currentScrollOffset.current = y;
+				if (scrollBridge.scrollLockY !== void 0) {
+					if (y !== scrollBridge.scrollLockY) {
+						var _scrollRef_current_scrollTo, _scrollRef_current;
+						(_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : (_scrollRef_current_scrollTo = _scrollRef_current.scrollTo) === null || _scrollRef_current_scrollTo === void 0 ? void 0 : _scrollRef_current_scrollTo.call(_scrollRef_current, {
+							x: 0,
+							y: scrollBridge.scrollLockY,
+							animated: false
+						});
+					}
+					currentScrollOffset.current = scrollBridge.scrollLockY;
+					scrollBridge.y = scrollBridge.scrollLockY;
+					if (lastEmittedScrollOffset.current !== scrollBridge.scrollLockY) {
+						lastEmittedScrollOffset.current = scrollBridge.scrollLockY;
+						onScroll === null || onScroll === void 0 ? void 0 : onScroll({
+							...e,
+							nativeEvent: {
+								...e.nativeEvent,
+								contentOffset: {
+									...e.nativeEvent.contentOffset,
+									y: scrollBridge.scrollLockY
+								}
+							}
+						});
+					}
+					return;
+				}
+				scrollBridge.y = y;
+				if (y > 0) scrollBridge.scrollStartY = -1;
+				lastEmittedScrollOffset.current = y;
+				onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
+			},
+			contentContainerStyle,
+			bounces: false,
+			keyboardShouldPersistTaps: "always",
+			keyboardDismissMode: "none",
+			...props,
+			...keyboardFrozenOverride,
+			children: contentWrapper
+		});
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_scroll_view.ScrollView, {
+		onLayout: function(e) {
+			recordFitHeight(Math.ceil(e.nativeEvent.layout.height));
+			updateScrollable();
+		},
+		ref: (0, import_compose_refs.composeRefs)(scrollRef, ref),
+		...fitSizingStyle,
+		scrollEventThrottle: 1,
+		className: "_ovs-contain",
+		scrollEnabled,
+		onScroll: function(e) {
+			var { y } = e.nativeEvent.contentOffset;
+			currentScrollOffset.current = y;
+			scrollBridge.y = y;
+			if (y > 0) scrollBridge.scrollStartY = -1;
+			lastEmittedScrollOffset.current = y;
+			onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
+		},
+		contentContainerStyle,
+		...gestureProps,
+		...props,
+		...keyboardFrozenOverride,
+		children: contentWrapper
+	});
+}, {
+	disableTheme: true,
+	displayName: SHEET_SCROLL_VIEW_NAME
+});