@octane-xplat/ui 0.6.0 → 0.7.1

package/dist/native/VirtualList.tsrx.js

@@ -0,0 +1,466 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { layoutChildProps } from "./layout-child.js";
+import { VirtualListSizeIndex, createVirtualListEntries, estimateVirtualListSizes, virtualListMeasurementKey, virtualListRange } from "./virtual-list-layout.js";
+import { defineUniversalComponent, hookSlots, universalFor, universalPlan, universalProps, universalValue, useMemo, useRef, useState } from "@nativescript-community/octane";
+//#region src/VirtualList.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(20);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
+var _h$12 = /* @__PURE__ */ Symbol(_hs$ + 12);
+var _h$13 = /* @__PURE__ */ Symbol(_hs$ + 13);
+var _h$14 = /* @__PURE__ */ Symbol(_hs$ + 14);
+var _h$15 = /* @__PURE__ */ Symbol(_hs$ + 15);
+var _h$16 = /* @__PURE__ */ Symbol(_hs$ + 16);
+var _h$17 = /* @__PURE__ */ Symbol(_hs$ + 17);
+var _h$18 = /* @__PURE__ */ Symbol(_hs$ + 18);
+var _h$19 = /* @__PURE__ */ Symbol(_hs$ + 19);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "column",
+		"className": "vx-virtual-list-header",
+		"flexShrink": 0
+	},
+	"bindings": [["onLayoutChanged", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "column",
+		"className": "vx-virtual-list-empty"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "column",
+		"className": "vx-virtual-list-separator"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "column",
+		"className": "vx-virtual-list-row"
+	},
+	"bindings": [["style", 0], ["onLayoutChanged", 1]],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"flexDirection": "column",
+			"className": "vx-virtual-list-item"
+		},
+		"children": [{
+			"kind": "slot",
+			"slot": 2
+		}]
+	}, {
+		"kind": "slot",
+		"slot": 3
+	}]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": { "className": "vx-virtual-list-spacer" },
+			"bindings": [["style", 0]]
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": { "className": "vx-virtual-list-spacer" },
+			"bindings": [["style", 2]]
+		}
+	]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "column",
+		"className": "vx-virtual-list-footer",
+		"flexShrink": 0
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "scrollview",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "flexDirection": "column" },
+		"bindings": [["className", 1]],
+		"children": [
+			{
+				"kind": "slot",
+				"slot": 2
+			},
+			{
+				"kind": "slot",
+				"slot": 3
+			},
+			{
+				"kind": "slot",
+				"slot": 4
+			}
+		]
+	}]
+});
+function sameSize(a, b) {
+	return Math.abs(a - b) < .5;
+}
+var VirtualList = defineUniversalComponent("nativescript", function VirtualList(props) {
+	const entries = useMemo(() => createVirtualListEntries(props.items, props.keyExtractor, props.getItemType), [
+		props.items,
+		props.keyExtractor,
+		props.getItemType
+	], _h$0);
+	const [windowVersion, setWindowVersion] = useState(0, _h$1);
+	const sizeIndexRef = useRef(new VirtualListSizeIndex(), _h$2);
+	const sizeCacheRef = useRef(/* @__PURE__ */ new Map(), _h$3);
+	const entriesRef = useRef([], _h$4);
+	const indexByRowKeyRef = useRef(/* @__PURE__ */ new Map(), _h$5);
+	const scrollRef = useRef(null, _h$6);
+	const scrollOffsetRef = useRef(0, _h$7);
+	const viewportHeightRef = useRef(0, _h$8);
+	const viewportWidthRef = useRef(0, _h$9);
+	const headerHeightRef = useRef(0, _h$10);
+	const estimateScheduledRef = useRef(false, _h$11);
+	const estimateAnchorRef = useRef(null, _h$12);
+	const rangeRef = useRef({
+		start: -1,
+		end: -1,
+		top: -1,
+		bottom: -1
+	}, _h$13);
+	const pendingAnchorRef = useRef(null, _h$14);
+	const pendingAnchorRowsRef = useRef(/* @__PURE__ */ new Set(), _h$15);
+	const queuedAnchorRestoreRef = useRef(null, _h$16);
+	const anchorRestoreScheduledRef = useRef(false, _h$17);
+	const anchorRestoreTimerRef = useRef(null, _h$18);
+	const hasSeparator = Boolean(props.renderSeparator);
+	const hasSeparatorRef = useRef(hasSeparator, _h$19);
+	hasSeparatorRef.current = hasSeparator;
+	function rebuildLayout(nextEntries, width) {
+		entriesRef.current = nextEntries;
+		const indexByKey = /* @__PURE__ */ new Map();
+		const activeMeasurements = /* @__PURE__ */ new Set();
+		for (const entry of nextEntries) {
+			indexByKey.set(entry.rowKey, entry.index);
+			const cacheKey = virtualListMeasurementKey(entry.rowKey, hasSeparatorRef.current && entry.index < nextEntries.length - 1);
+			activeMeasurements.add(cacheKey);
+		}
+		for (const cacheKey of sizeCacheRef.current.keys()) if (!activeMeasurements.has(cacheKey)) sizeCacheRef.current.delete(cacheKey);
+		indexByRowKeyRef.current = indexByKey;
+		sizeIndexRef.current.reset(estimateVirtualListSizes(nextEntries, hasSeparatorRef.current, width, sizeCacheRef.current));
+	}
+	if (entries !== entriesRef.current) {
+		const anchor = captureCurrentAnchor();
+		const previousByKey = new Map(entriesRef.current.map((entry) => [entry.rowKey, entry]));
+		const changedRows = entries.filter((entry) => previousByKey.get(entry.rowKey)?.item !== entry.item);
+		const previousRange = rangeRef.current;
+		rebuildLayout(entries, viewportWidthRef.current);
+		const anchorIndex = anchor ? indexByRowKeyRef.current.get(anchor.rowKey) : void 0;
+		const pendingRows = new Set(changedRows.filter((entry) => anchorIndex !== void 0 && entry.index < anchorIndex && entry.index >= previousRange.start && entry.index < previousRange.end).map((entry) => entry.rowKey));
+		pendingAnchorRef.current = pendingRows.size > 0 ? anchor : null;
+		pendingAnchorRowsRef.current = pendingRows;
+		if (anchor) restoreAnchor(anchor);
+	}
+	function currentRange() {
+		const listOffset = Math.max(0, scrollOffsetRef.current - headerHeightRef.current);
+		return virtualListRange(sizeIndexRef.current, listOffset, viewportHeightRef.current, viewportHeightRef.current);
+	}
+	function refreshWindow() {
+		const next = currentRange();
+		const previous = rangeRef.current;
+		if (next.start !== previous.start || next.end !== previous.end || !sameSize(next.top, previous.top) || !sameSize(next.bottom, previous.bottom)) {
+			rangeRef.current = next;
+			setWindowVersion((version) => version + 1);
+		}
+	}
+	function captureAnchor() {
+		const listOffset = scrollOffsetRef.current - headerHeightRef.current;
+		if (listOffset < 0 || entriesRef.current.length === 0) return null;
+		const index = sizeIndexRef.current.indexAt(listOffset);
+		const entry = entriesRef.current[index];
+		if (!entry) return null;
+		return {
+			rowKey: entry.rowKey,
+			index,
+			within: listOffset - sizeIndexRef.current.prefix(index)
+		};
+	}
+	function captureCurrentAnchor() {
+		const nativeOffset = Number(scrollRef.current?.verticalOffset);
+		if (Number.isFinite(nativeOffset)) scrollOffsetRef.current = nativeOffset;
+		return captureAnchor();
+	}
+	function restoreAnchor(anchor) {
+		if (!anchor) return;
+		queuedAnchorRestoreRef.current = anchor;
+		if (anchorRestoreScheduledRef.current) return;
+		const view = scrollRef.current;
+		if (!view) return;
+		anchorRestoreScheduledRef.current = true;
+		const timer = setTimeout(() => {
+			if (anchorRestoreTimerRef.current !== timer) return;
+			anchorRestoreTimerRef.current = null;
+			anchorRestoreScheduledRef.current = false;
+			if (scrollRef.current !== view) return;
+			const queuedAnchor = queuedAnchorRestoreRef.current;
+			queuedAnchorRestoreRef.current = null;
+			if (!queuedAnchor) return;
+			const index = indexByRowKeyRef.current.get(queuedAnchor.rowKey);
+			if (index === void 0) return;
+			const nextOffset = Math.max(0, headerHeightRef.current + sizeIndexRef.current.prefix(index) + queuedAnchor.within);
+			const nativeOffset = Number(view.verticalOffset);
+			if (sameSize(nextOffset, nativeOffset)) {
+				scrollOffsetRef.current = nativeOffset;
+				return;
+			}
+			scrollOffsetRef.current = nextOffset;
+			const nativeView = view.nativeViewProtected;
+			const makePoint = globalThis.CGPointMake;
+			if (typeof nativeView?.setContentOffsetAnimated === "function" && typeof makePoint === "function") {
+				const current = nativeView.contentOffset;
+				nativeView.setContentOffsetAnimated(makePoint(current.x, nextOffset), false);
+			} else if (typeof view.scrollToVerticalOffset === "function") view.scrollToVerticalOffset(nextOffset, false);
+		}, 0);
+		anchorRestoreTimerRef.current = timer;
+	}
+	function cancelAnchorRestore() {
+		if (anchorRestoreTimerRef.current != null) clearTimeout(anchorRestoreTimerRef.current);
+		anchorRestoreTimerRef.current = null;
+		anchorRestoreScheduledRef.current = false;
+		queuedAnchorRestoreRef.current = null;
+	}
+	function scheduleEstimateRebuild(anchor) {
+		if (estimateScheduledRef.current) return;
+		estimateScheduledRef.current = true;
+		estimateAnchorRef.current = anchor;
+		Promise.resolve().then(() => {
+			estimateScheduledRef.current = false;
+			const scheduledAnchor = estimateAnchorRef.current;
+			estimateAnchorRef.current = null;
+			rebuildLayout(entriesRef.current, viewportWidthRef.current);
+			restoreAnchor(scheduledAnchor);
+			refreshWindow();
+		});
+	}
+	function recordRowSize(rowKey, width, height) {
+		if (!Number.isFinite(height) || height < 0) return;
+		const index = indexByRowKeyRef.current.get(rowKey);
+		if (index === void 0) return;
+		if (!entriesRef.current[index]) return;
+		const hasRowSeparator = hasSeparatorRef.current && index < entriesRef.current.length - 1;
+		const cacheKey = virtualListMeasurementKey(rowKey, hasRowSeparator);
+		const pendingAnchor = pendingAnchorRowsRef.current.has(rowKey) ? pendingAnchorRef.current : null;
+		const anchor = pendingAnchor ?? queuedAnchorRestoreRef.current ?? captureCurrentAnchor();
+		sizeCacheRef.current.set(cacheKey, {
+			width,
+			height
+		});
+		const delta = sizeIndexRef.current.set(index, height);
+		if (Math.abs(delta) >= .5) {
+			const anchorIndex = anchor ? indexByRowKeyRef.current.get(anchor.rowKey) : void 0;
+			if (anchor && anchorIndex !== void 0 && index < anchorIndex) restoreAnchor(anchor);
+			refreshWindow();
+			scheduleEstimateRebuild(anchor);
+		}
+		if (pendingAnchor) {
+			pendingAnchorRowsRef.current.delete(rowKey);
+			if (pendingAnchorRowsRef.current.size === 0) pendingAnchorRef.current = null;
+		}
+	}
+	function syncViewport(view = scrollRef.current) {
+		if (!view) return;
+		const size = view.getActualSize?.();
+		if (!size) return;
+		const widthChanged = !sameSize(size.width, viewportWidthRef.current);
+		viewportHeightRef.current = size.height;
+		if (widthChanged) {
+			const anchor = captureAnchor();
+			viewportWidthRef.current = size.width;
+			rebuildLayout(entriesRef.current, size.width);
+			restoreAnchor(anchor);
+		}
+		refreshWindow();
+	}
+	function onScroll(event) {
+		const view = event.object ?? scrollRef.current;
+		const nextOffset = Number(view?.verticalOffset ?? 0);
+		const queuedAnchor = queuedAnchorRestoreRef.current;
+		if (queuedAnchor && Math.abs(nextOffset - scrollOffsetRef.current) > viewportHeightRef.current) {
+			const anchorIndex = indexByRowKeyRef.current.get(queuedAnchor.rowKey);
+			const nextIndex = sizeIndexRef.current.indexAt(Math.max(0, nextOffset - headerHeightRef.current));
+			if (anchorIndex !== void 0 && Math.abs(nextIndex - anchorIndex) > 1) cancelAnchorRestore();
+		}
+		scrollOffsetRef.current = nextOffset;
+		refreshWindow();
+	}
+	function onHeaderLayout(event) {
+		const height = Number(event.object?.getActualSize?.().height ?? 0);
+		if (sameSize(height, headerHeightRef.current)) return;
+		const anchor = captureAnchor();
+		headerHeightRef.current = height;
+		restoreAnchor(anchor);
+		refreshWindow();
+	}
+	function onRowLayout(entry, event) {
+		const size = event.object?.getActualSize?.();
+		if (size) recordRowSize(entry.rowKey, size.width, size.height);
+	}
+	const range = currentRange();
+	rangeRef.current = range;
+	const visibleEntries = entries.slice(range.start, range.end);
+	const style = {
+		...props.style,
+		minHeight: props.style?.minHeight ?? 0
+	};
+	return universalValue(__octaneUniversalPlan6, [
+		universalProps([
+			[
+				"set",
+				"ref",
+				(view) => {
+					scrollRef.current = view;
+					if (view) applyEscapeProps(view, props);
+				}
+			],
+			[
+				"set",
+				"id",
+				props.id
+			],
+			["spread", layoutChildProps(props)],
+			[
+				"set",
+				"className",
+				cx("vx-virtual-list", props.className)
+			],
+			[
+				"set",
+				"style",
+				style
+			],
+			[
+				"set",
+				"orientation",
+				"vertical"
+			],
+			[
+				"set",
+				"accessible",
+				props.accessible
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				props.accessibilityLabel
+			],
+			[
+				"set",
+				"accessibilityRole",
+				nativeAccessibilityRole(props.accessibilityRole)
+			],
+			[
+				"set",
+				"accessibilityHint",
+				props.accessibilityHint
+			],
+			[
+				"set",
+				"accessibilityValue",
+				props.accessibilityValue
+			],
+			[
+				"set",
+				"accessibilityState",
+				nativeAccessibilityState(props.accessibilityState)
+			],
+			[
+				"set",
+				"accessibilityLiveRegion",
+				props.accessibilityLiveRegion
+			],
+			[
+				"set",
+				"onLoaded",
+				(event) => syncViewport(event.object)
+			],
+			[
+				"set",
+				"onLayoutChanged",
+				(event) => syncViewport(event.object)
+			],
+			[
+				"set",
+				"onScroll",
+				onScroll
+			]
+		]),
+		cx("vx-virtual-list-content"),
+		props.renderHeader ? universalValue(__octaneUniversalPlan0, [onHeaderLayout, props.renderHeader()]) : null,
+		entries.length === 0 ? props.renderEmpty ? universalValue(__octaneUniversalPlan1, [props.renderEmpty()]) : null : universalValue(__octaneUniversalPlan4, [
+			{
+				height: range.top,
+				flexShrink: 0
+			},
+			universalFor(visibleEntries, (entry, __octaneUniversalIndex) => entry.rowKey, (entry, __octaneUniversalIndex) => {
+				return universalValue(__octaneUniversalPlan3, [
+					{ flexShrink: 0 },
+					(event) => onRowLayout(entry, event),
+					props.renderItem(entry.item, entry.index),
+					hasSeparator && entry.index < entries.length - 1 ? universalValue(__octaneUniversalPlan2, [props.renderSeparator?.()]) : null
+				]);
+			}),
+			{
+				height: range.bottom,
+				flexShrink: 0
+			}
+		]),
+		props.renderFooter ? universalValue(__octaneUniversalPlan5, [props.renderFooter()]) : null
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { VirtualList };

package/dist/native/{WebView.native.tsrx.js → WebView.tsrx.js}

@@ -1,25 +1,46 @@
 import { cx } from "./cx.js";
-import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.native.js";
-import { layoutChildProps } from "./layout-child.native.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { layoutChildProps } from "./layout-child.js";
 import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 import { isAndroid, isIOS } from "@nativescript/core";
-//#region src/WebView.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
+//#region src/WebView.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(3);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "webview",
 	"propsSlot": 0
 });
+function reportContentLayout(view, props) {
+	let width = Number(view?.getActualSize?.()?.width ?? 0);
+	let height = 0;
+	if (isIOS) {
+		const size = view?.ios?.scrollView?.contentSize;
+		width = Number(size?.width ?? width);
+		height = Number(size?.height ?? 0);
+	} else if (isAndroid) height = Number(view?.android?.getContentHeight?.() ?? 0) * Number(view?.android?.getScale?.() ?? 1);
+	if (!Number.isFinite(width) || !Number.isFinite(height) || height <= 0) return;
+	props.onLayoutContent?.({
+		width,
+		height
+	});
+	if (props.matchContents) {
+		view.height = height;
+		view.style.height = height;
+	}
+}
 var WebView = defineUniversalComponent("nativescript", function WebView(props) {
 	const el = useRef(null, _h$0);
+	const loaded = useRef(false, _h$1);
 	useEffect(() => {
 		const v = el.current;
 		if (!v) return;
 		if (isIOS) v.ios.scrollView.scrollEnabled = props.scrollEnabled !== false;
 		else if (isAndroid) v.android.setOnTouchListener(props.scrollEnabled === false ? new android.view.View.OnTouchListener({ onTouch: (_view, event) => event.getActionMasked() === android.view.MotionEvent.ACTION_MOVE }) : null);
-	}, [props.scrollEnabled], _h$1);
+		if (props.matchContents && loaded.current) reportContentLayout(v, props);
+	}, [props.scrollEnabled, props.matchContents], _h$2);
 	return universalValue(__octaneUniversalPlan0, [universalProps([
 		[
 			"set",
@@ -66,7 +87,11 @@ var WebView = defineUniversalComponent("nativescript", function WebView(props) {
 					url: e.url,
 					error: e.error
 				});
-				else props.onLoad?.({ url: e.url });
+				else {
+					loaded.current = true;
+					reportContentLayout(e.object ?? el.current, props);
+					props.onLoad?.({ url: e.url });
+				}
 			}
 		],
 		[

package/dist/native/{aliases.native.tsrx.js → aliases.tsrx.js}

@@ -1,6 +1,6 @@
-import { Select } from "./Select.native.tsrx.js";
+import { Select } from "./Select.tsrx.js";
 import { defineUniversalComponent, universalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
-//#region src/aliases.native.tsrx
+//#region src/aliases.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0