@octane-xplat/ui 0.4.0 → 0.5.0

package/dist/native/ui46.js

@@ -1,35 +1,267 @@
-import { hookSlots, useEffect, useState } from "@nativescript-community/octane";
-import { Application } from "@nativescript/core";
-//#region src/safeAreaInsets.native.tsrx
+import { cx } from "./ui2.js";
+import { Text } from "./ui14.js";
+import { Pressable } from "./ui16.js";
+import { registerStack } from "./ui18.js";
+import { RouteHost } from "./ui20.js";
+import { layoutsForRoute, screenFor, useRoute } from "./ui21.js";
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, memo, universalChildren, universalComponent, universalFor, universalIf, universalPlan, universalProps, universalValue, useState, withSlot } from "@nativescript-community/octane";
+import { Application, Frame, GridLayout, Page, TabViewItem } from "@nativescript/core";
+//#region src/Tabs.native.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(2);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-function measure() {
-	const insets = (Application.ios?.rootController?.view)?.safeAreaInsets;
-	if (insets) return {
-		top: insets.top,
-		right: insets.right,
-		bottom: insets.bottom,
-		left: insets.left
-	};
-	return {
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0
-	};
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "tabview",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["items", 3],
+		["selectedIndex", 4],
+		["onSelectedIndexChanged", 5],
+		["onLoaded", 6]
+	]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "rows": "auto,*" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"props": {
+			"row": 0,
+			"className": "vx-tabbar"
+		},
+		"bindings": [["columns", 3]],
+		"children": [{
+			"kind": "slot",
+			"slot": 4
+		}]
+	}, {
+		"kind": "host",
+		"type": "gridlayout",
+		"props": { "row": 1 },
+		"bindings": [["className", 5]],
+		"children": [{
+			"kind": "slot",
+			"slot": 6
+		}]
+	}]
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan9 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var TabPane = defineUniversalComponent("nativescript", function TabPane(props) {
+	return universalValue(__octaneUniversalPlan0, [props.render()]);
+}, { "module": "@nativescript-community/octane" });
+var paneRoots = /* @__PURE__ */ new WeakMap();
+var tabsByView = /* @__PURE__ */ new WeakMap();
+var itemsCache = /* @__PURE__ */ new WeakMap();
+function itemsFor(tabs) {
+	let items = itemsCache.get(tabs);
+	if (items !== void 0) return items;
+	items = tabs.map((t) => {
+		const item = new TabViewItem();
+		item.title = t.title;
+		if (t.stack) {
+			const frame = new Frame();
+			frame.once("loaded", () => {
+				frame.navigate({ create: () => {
+					const page = new Page();
+					page.actionBarHidden = true;
+					const pane = new GridLayout();
+					page.content = pane;
+					createNativeScriptRoot(pane).render(TabPane, { render: t.render });
+					return page;
+				} });
+			});
+			registerStack(t.stack, frame);
+			item.view = frame;
+			return item;
+		}
+		const cv = new GridLayout();
+		tabsByView.set(cv, t.render);
+		item.view = cv;
+		return item;
+	});
+	itemsCache.set(tabs, items);
+	return items;
 }
-function useSafeAreaInsets() {
-	const [insets, setInsets] = useState(measure, _h$0);
-	useEffect(() => {
-		const update = () => setInsets(measure());
-		Application.on(Application.orientationChangedEvent, update);
-		update();
-		return () => {
-			Application.off(Application.orientationChangedEvent, update);
-		};
-	}, [], _h$1);
-	return insets;
+function mountPanes(e) {
+	const tv = e.object;
+	for (const item of tv.items) {
+		const cv = item.view;
+		if (!(cv instanceof GridLayout) || paneRoots.has(cv)) continue;
+		const render = tabsByView.get(cv);
+		if (!render) continue;
+		const root = createNativeScriptRoot(cv);
+		paneRoots.set(cv, root);
+		root.render(TabPane, { render });
+	}
+	console.log("[probe] tabs mounted panes=" + tv.items.length);
+}
+var TabsInner = defineUniversalComponent("nativescript", function TabsInner(props) {
+	return universalValue(__octaneUniversalPlan1, [
+		props.id,
+		cx(props.className),
+		props.style,
+		itemsFor(props.tabs),
+		props.selectedIndex,
+		(e) => props.onSelectedIndexChanged?.(e.value),
+		mountPanes
+	]);
+}, { "module": "@nativescript-community/octane" });
+var MemoTabs = memo(TabsInner, (a, b) => a.tabs === b.tabs && a.selectedIndex === b.selectedIndex);
+function screenParams(route) {
+	const params = {
+		...route.params,
+		...route.context ?? {},
+		_stack: route.stack,
+		_pushed: true
+	};
+	if (Object.prototype.hasOwnProperty.call(route, "loaderData")) params.data = route.loaderData;
+	if (Object.prototype.hasOwnProperty.call(route, "loaderError")) params.error = route.loaderError;
+	return params;
 }
+var SwapTabs = defineUniversalComponent("nativescript", function SwapTabs(props) {
+	const [internal, setInternal] = useState(0, _h$0);
+	const active = props.selectedIndex ?? internal;
+	const tab = props.tabs[active];
+	const route = withSlot(_h$1, useRoute, tab?.stack ?? "");
+	const Screen = route ? screenFor(route.name) : void 0;
+	const columns = props.tabs.map(() => "*").join(",");
+	return universalValue(__octaneUniversalPlan6, [
+		props.id,
+		cx(props.className),
+		props.style,
+		columns,
+		universalFor(props.tabs, (t, i) => t.title, (t, i) => {
+			return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Pressable, universalProps([
+				[
+					"set",
+					"col",
+					i
+				],
+				[
+					"set",
+					"className",
+					cx("vx-tab", active === i ? "active" : "")
+				],
+				[
+					"set",
+					"onPress",
+					() => {
+						setInternal(i);
+						props.onSelectedIndexChanged?.(i);
+					}
+				]
+			], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", Text, universalProps([], t.title))]);
+			})))]);
+		}),
+		cx("vx-tabpane", route?.presentation === "fade" ? "vx-route--fade" : ""),
+		universalIf(route && Screen, () => {
+			return universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", RouteHost, universalProps([
+				[
+					"set",
+					"screen",
+					Screen
+				],
+				[
+					"set",
+					"layouts",
+					layoutsForRoute(route.name)
+				],
+				[
+					"set",
+					"params",
+					screenParams(route)
+				]
+			]))]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan5, [tab?.render()]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+var Tabs = defineUniversalComponent("nativescript", function Tabs(props) {
+	return universalValue(__octaneUniversalPlan9, [universalIf(Application.android, () => {
+		return universalValue(__octaneUniversalPlan7, [universalComponent("nativescript", SwapTabs, universalProps([["spread", props]]))]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan8, [universalComponent("nativescript", MemoTabs, universalProps([
+			[
+				"set",
+				"id",
+				props.id
+			],
+			[
+				"set",
+				"className",
+				props.className
+			],
+			[
+				"set",
+				"style",
+				props.style
+			],
+			[
+				"set",
+				"tabs",
+				props.tabs
+			],
+			[
+				"set",
+				"selectedIndex",
+				props.selectedIndex
+			],
+			[
+				"set",
+				"onSelectedIndexChanged",
+				props.onSelectedIndexChanged
+			]
+		]))]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { useSafeAreaInsets };
+export { Tabs };

package/dist/native/ui47.js

@@ -1,41 +1,28 @@
 import { cx } from "./ui2.js";
-import { useSafeAreaInsets } from "./ui46.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalValue, withSlot } from "@nativescript-community/octane";
-import { Application } from "@nativescript/core";
-//#region src/SafeArea.native.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+import { applyEscapeProps } from "./ui3.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Switch.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "flexboxlayout",
+	"type": "switch",
 	"bindings": [
-		["id", 0],
-		["ref", 1],
+		["ref", 0],
+		["id", 1],
 		["className", 2],
-		["style", 3]
-	],
-	"children": [{
-		"kind": "slot",
-		"slot": 4
-	}]
+		["style", 3],
+		["checked", 4],
+		["onCheckedChange", 5]
+	]
 });
-var SafeArea = defineUniversalComponent("nativescript", function SafeArea(props) {
-	const insets = withSlot(_h$0, useSafeAreaInsets);
-	const platformProps = Application.ios != null ? props.ios : props.android;
+var Switch = defineUniversalComponent("nativescript", function Switch(props) {
 	return universalValue(__octaneUniversalPlan0, [
+		(v) => applyEscapeProps(v, props),
 		props.id,
-		(host) => {
-			if (host && platformProps) Object.assign(host, platformProps);
-		},
-		cx("vx-safe-area", props.className),
-		{
-			...props.style,
-			paddingTop: insets.top,
-			paddingRight: insets.right,
-			paddingBottom: insets.bottom,
-			paddingLeft: insets.left
-		},
-		props.children
+		cx(props.className),
+		props.style,
+		props.checked,
+		(e) => props.onCheckedChange?.(e.value)
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { SafeArea };
+export { Switch };

package/dist/native/ui48.js

@@ -1,72 +1,35 @@
-import { cx } from "./ui2.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useState, withSlot } from "@nativescript-community/octane";
+import { hookSlots, useEffect, useState } from "@nativescript-community/octane";
 import { Application } from "@nativescript/core";
-//#region src/KeyboardAvoiding.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(5);
+//#region src/safeAreaInsets.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
 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 __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "scrollview",
-	"bindings": [
-		["id", 0],
-		["className", 1],
-		["style", 2],
-		["ref", 3]
-	],
-	"children": [{
-		"kind": "host",
-		"type": "flexboxlayout",
-		"props": { "flexDirection": "column" },
-		"bindings": [["style", 4]],
-		"children": [{
-			"kind": "slot",
-			"slot": 5
-		}]
-	}]
-});
-function useKeyboardInset() {
-	const [inset, setInset] = useState(0, _h$0);
-	useEffect(() => {
-		if (!Application.ios) return;
-		const center = NSNotificationCenter.defaultCenter;
-		const token = center.addObserverForNameObjectQueueUsingBlock(UIKeyboardWillChangeFrameNotification, null, NSOperationQueue.mainQueue, (note) => {
-			const frame = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey);
-			const screenHeight = UIScreen.mainScreen.bounds.size.height;
-			setInset(Math.max(0, screenHeight - frame.origin.y));
-		});
-		return () => center.removeObserver(token);
-	}, [], _h$1);
-	return inset;
+function measure() {
+	const insets = (Application.ios?.rootController?.view)?.safeAreaInsets;
+	if (insets) return {
+		top: insets.top,
+		right: insets.right,
+		bottom: insets.bottom,
+		left: insets.left
+	};
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
 }
-function useAndroidResize() {
+function useSafeAreaInsets() {
+	const [insets, setInsets] = useState(measure, _h$0);
 	useEffect(() => {
-		const nativeWindow = Application.android?.foregroundActivity?.window;
-		if (!nativeWindow) return;
-		const params = android.view.WindowManager.LayoutParams;
-		const previous = nativeWindow.attributes.softInputMode;
-		const adjusted = previous & ~params.SOFT_INPUT_MASK_ADJUST | params.SOFT_INPUT_ADJUST_RESIZE;
-		nativeWindow.setSoftInputMode(adjusted);
-		return () => nativeWindow.setSoftInputMode(previous);
-	}, [], _h$2);
+		const update = () => setInsets(measure());
+		Application.on(Application.orientationChangedEvent, update);
+		update();
+		return () => {
+			Application.off(Application.orientationChangedEvent, update);
+		};
+	}, [], _h$1);
+	return insets;
 }
-var KeyboardAvoiding = defineUniversalComponent("nativescript", function KeyboardAvoiding(props) {
-	const keyboardInset = withSlot(_h$3, useKeyboardInset);
-	withSlot(_h$4, useAndroidResize);
-	const platformProps = Application.ios != null ? props.ios : props.android;
-	return universalValue(__octaneUniversalPlan0, [
-		props.id,
-		cx("vx-keyboard-avoiding", props.className),
-		props.style,
-		(host) => {
-			if (host && platformProps) Object.assign(host, platformProps);
-		},
-		keyboardInset ? { paddingBottom: keyboardInset } : void 0,
-		props.children
-	]);
-}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { KeyboardAvoiding };
+export { useSafeAreaInsets };

package/dist/native/ui49.js

@@ -1,23 +1,12 @@
 import { cx } from "./ui2.js";
-import { defineUniversalComponent, hookSlots, registerElement, universalIf, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { useSafeAreaInsets } from "./ui48.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, withSlot } from "@nativescript-community/octane";
 import { Application } from "@nativescript/core";
-import { Drawer, install } from "@nativescript-community/ui-drawer";
-//#region src/Drawer.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+//#region src/SafeArea.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "gridlayout",
-	"props": { "hostSlot": "leftDrawer" },
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
-});
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "drawer",
+	"type": "flexboxlayout",
 	"bindings": [
 		["id", 0],
 		["ref", 1],
@@ -25,42 +14,28 @@ var __octaneUniversalPlan1 = universalPlan("nativescript", {
 		["style", 3]
 	],
 	"children": [{
-		"kind": "host",
-		"type": "gridlayout",
-		"props": { "hostSlot": "mainContent" },
-		"children": [{
-			"kind": "slot",
-			"slot": 4
-		}]
-	}, {
 		"kind": "slot",
-		"slot": 5
+		"slot": 4
 	}]
 });
-install();
-registerElement("drawer", Drawer);
-var Drawer$1 = defineUniversalComponent("nativescript", function Drawer(props) {
-	const host = useRef(null, _h$0);
+var SafeArea = defineUniversalComponent("nativescript", function SafeArea(props) {
+	const insets = withSlot(_h$0, useSafeAreaInsets);
 	const platformProps = Application.ios != null ? props.ios : props.android;
-	useEffect(() => {
-		const d = host.current;
-		if (!d) return;
-		if (props.open && !d.isOpened("left")) d.open("left").catch(() => {});
-		else if (!props.open && d.isOpened("left")) d.close("left").catch(() => {});
-	}, [props.open], _h$1);
-	return universalValue(__octaneUniversalPlan1, [
+	return universalValue(__octaneUniversalPlan0, [
 		props.id,
-		(d) => {
-			host.current = d;
-			if (d && platformProps) Object.assign(d, platformProps);
+		(host) => {
+			if (host && platformProps) Object.assign(host, platformProps);
+		},
+		cx("vx-safe-area", props.className),
+		{
+			...props.style,
+			paddingTop: insets.top,
+			paddingRight: insets.right,
+			paddingBottom: insets.bottom,
+			paddingLeft: insets.left
 		},
-		cx("vx-drawer", props.className),
-		props.style,
-		props.main,
-		universalIf(props.drawer != null, () => {
-			return universalValue(__octaneUniversalPlan0, [props.drawer]);
-		})
+		props.children
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Drawer$1 as Drawer };
+export { SafeArea };

package/dist/native/ui50.js

@@ -1,27 +1,72 @@
 import { cx } from "./ui2.js";
-import { applyNativeProps } from "./ui36.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/ActivityIndicator.native.tsrx
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useState, withSlot } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
+//#region src/KeyboardAvoiding.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "activityindicator",
+	"type": "scrollview",
 	"bindings": [
 		["id", 0],
 		["className", 1],
 		["style", 2],
-		["busy", 3],
-		["ref", 4]
-	]
+		["ref", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "flexDirection": "column" },
+		"bindings": [["style", 4]],
+		"children": [{
+			"kind": "slot",
+			"slot": 5
+		}]
+	}]
 });
-var ActivityIndicator = defineUniversalComponent("nativescript", function ActivityIndicator(props) {
-	if (props.busy === false) return null;
+function useKeyboardInset() {
+	const [inset, setInset] = useState(0, _h$0);
+	useEffect(() => {
+		if (!Application.ios) return;
+		const center = NSNotificationCenter.defaultCenter;
+		const token = center.addObserverForNameObjectQueueUsingBlock(UIKeyboardWillChangeFrameNotification, null, NSOperationQueue.mainQueue, (note) => {
+			const frame = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey);
+			const screenHeight = UIScreen.mainScreen.bounds.size.height;
+			setInset(Math.max(0, screenHeight - frame.origin.y));
+		});
+		return () => center.removeObserver(token);
+	}, [], _h$1);
+	return inset;
+}
+function useAndroidResize() {
+	useEffect(() => {
+		const nativeWindow = Application.android?.foregroundActivity?.window;
+		if (!nativeWindow) return;
+		const params = android.view.WindowManager.LayoutParams;
+		const previous = nativeWindow.attributes.softInputMode;
+		const adjusted = previous & ~params.SOFT_INPUT_MASK_ADJUST | params.SOFT_INPUT_ADJUST_RESIZE;
+		nativeWindow.setSoftInputMode(adjusted);
+		return () => nativeWindow.setSoftInputMode(previous);
+	}, [], _h$2);
+}
+var KeyboardAvoiding = defineUniversalComponent("nativescript", function KeyboardAvoiding(props) {
+	const keyboardInset = withSlot(_h$3, useKeyboardInset);
+	withSlot(_h$4, useAndroidResize);
+	const platformProps = Application.ios != null ? props.ios : props.android;
 	return universalValue(__octaneUniversalPlan0, [
 		props.id,
-		cx(props.className),
+		cx("vx-keyboard-avoiding", props.className),
 		props.style,
-		props.busy ?? true,
-		(el) => applyNativeProps(el, props)
+		(host) => {
+			if (host && platformProps) Object.assign(host, platformProps);
+		},
+		keyboardInset ? { paddingBottom: keyboardInset } : void 0,
+		props.children
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { ActivityIndicator };
+export { KeyboardAvoiding };