@octane-xplat/ui 0.5.0 → 0.6.0

package/dist/native/android/BottomNavigationView.android.tsrx.js

@@ -0,0 +1,171 @@
+import { cx } from "../cx.js";
+import "../Text.native.tsrx.js";
+import "../Pressable.native.tsrx.js";
+import { getIcon } from "../icons.js";
+import "../Icon.native.tsrx.js";
+import { registerStack } from "../stacks.native.js";
+import "../RouteHost.native.tsrx.js";
+import "../route.native.js";
+import { createNativeScriptRoot, defineUniversalComponent, markWarm, memo, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
+import { Frame, GridLayout, Page, TabViewItem } from "@nativescript/core";
+//#region src/android/BottomNavigationView.android.tsrx
+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 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();
+var iconWarned = /* @__PURE__ */ new Set();
+function applyIcon(item, name) {
+	const glyph = getIcon(name);
+	if (!glyph) {
+		warnIconOnce(name, `tab icon '${name}' isn't registered — call registerIcons() at boot.`);
+		return;
+	}
+	if (glyph.src) item.iconSource = glyph.src;
+	else if (glyph.font) {
+		item.iconSource = "font://" + glyph.font.glyph;
+		item.iconFontFamily = glyph.font.family;
+	} else if (glyph.text) item.iconSource = "font://" + glyph.text;
+	else warnIconOnce(name, `tab icon '${name}' has no src/font/text representation — the platform tab bar can't render svg/markup glyphs.`);
+}
+function warnIconOnce(name, msg) {
+	if (iconWarned.has(name)) return;
+	iconWarned.add(name);
+	console.warn("[octane-xplat] " + msg);
+}
+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.icon) applyIcon(item, t.icon);
+		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 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 });
+	}
+}
+var NavInner = defineUniversalComponent("nativescript", function NavInner(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 MemoNav = memo(NavInner, (a, b) => a.tabs === b.tabs && a.selectedIndex === b.selectedIndex);
+var BottomNavigationView = defineUniversalComponent("nativescript", markWarm(function BottomNavigationView(props) {
+	useBatch([], () => {
+		warmChild(MemoNav, {
+			id: props.id,
+			className: props.className,
+			style: props.style,
+			tabs: props.tabs,
+			selectedIndex: props.selectedIndex,
+			onSelectedIndexChanged: props.onSelectedIndexChanged
+		});
+	});
+	return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", MemoNav, 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
+		]
+	]))]);
+}, (__wp) => {
+	const props = __wp;
+	warmChild(MemoNav, {
+		id: props.id,
+		className: props.className,
+		style: props.style,
+		tabs: props.tabs,
+		selectedIndex: props.selectedIndex,
+		onSelectedIndexChanged: props.onSelectedIndexChanged
+	});
+}), { "module": "@nativescript-community/octane" });
+//#endregion
+export { BottomNavigationView };

package/dist/native/android/CircularProgressIndicator.android.tsrx.js

@@ -0,0 +1,27 @@
+import { cx } from "../cx.js";
+import { applyNativeProps } from "../platformProps.native.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/android/CircularProgressIndicator.android.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "activityindicator",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["busy", 3],
+		["ref", 4]
+	]
+});
+var CircularProgressIndicator = defineUniversalComponent("nativescript", function CircularProgressIndicator(props) {
+	if (props.busy === false) return null;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx(props.className),
+		props.style,
+		props.busy ?? true,
+		(el) => applyNativeProps(el, props)
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { CircularProgressIndicator };

package/dist/native/{ui51.js → android/DrawerLayout.android.tsrx.js}

@@ -1,8 +1,7 @@
-import { cx } from "./ui2.js";
+import { cx } from "../cx.js";
 import { defineUniversalComponent, hookSlots, registerElement, universalIf, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
-import { Application } from "@nativescript/core";
 import { Drawer, install } from "@nativescript-community/ui-drawer";
-//#region src/Drawer.native.tsrx
+//#region src/android/DrawerLayout.android.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(2);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
@@ -39,9 +38,8 @@ var __octaneUniversalPlan1 = universalPlan("nativescript", {
 });
 install();
 registerElement("drawer", Drawer);
-var Drawer$1 = defineUniversalComponent("nativescript", function Drawer(props) {
+var DrawerLayout = defineUniversalComponent("nativescript", function DrawerLayout(props) {
 	const host = useRef(null, _h$0);
-	const platformProps = Application.ios != null ? props.ios : props.android;
 	useEffect(() => {
 		const d = host.current;
 		if (!d) return;
@@ -52,7 +50,7 @@ var Drawer$1 = defineUniversalComponent("nativescript", function Drawer(props) {
 		props.id,
 		(d) => {
 			host.current = d;
-			if (d && platformProps) Object.assign(d, platformProps);
+			if (d && props.android) Object.assign(d, props.android);
 		},
 		cx("vx-drawer", props.className),
 		props.style,
@@ -63,4 +61,4 @@ var Drawer$1 = defineUniversalComponent("nativescript", function Drawer(props) {
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Drawer$1 as Drawer };
+export { DrawerLayout };

package/dist/native/android/MaterialDialog.android.tsrx.js

@@ -0,0 +1,62 @@
+import { applyThemeClasses } from "../theme/theme-scheme.js";
+import { modalPresenter } from "../modal-presenter.native.js";
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { Frame, GridLayout } from "@nativescript/core";
+//#region src/android/MaterialDialog.android.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": []
+});
+var Panel = defineUniversalComponent("nativescript", function Panel(props) {
+	return universalValue(__octaneUniversalPlan0, [props.children]);
+}, { "module": "@nativescript-community/octane" });
+var MaterialDialog = defineUniversalComponent("nativescript", function MaterialDialog(props) {
+	const shown = useRef(null, _h$0);
+	useEffect(() => {
+		if (props.open && !shown.current) {
+			const presenter = modalPresenter(Frame.topmost());
+			if (!presenter) {
+				console.warn("[Modal] open dropped — no live presenter (currentPage mid-navigation or no active frame).");
+				return;
+			}
+			const host = new GridLayout();
+			const unbindTheme = applyThemeClasses(host, "vx-modal-host");
+			const root = createNativeScriptRoot(host);
+			shown.current = {
+				host,
+				root,
+				unbindTheme
+			};
+			if (props.component) root.render(props.component, props.params ?? {});
+			else root.render(Panel, { children: props.children });
+			const fullscreen = props.presentation ? props.presentation === "fullscreen" : props.fullscreen ?? true;
+			presenter.showModal(host, {
+				context: {},
+				closeCallback: (result) => {
+					shown.current?.unbindTheme?.();
+					shown.current = null;
+					props.onClose?.(result);
+				},
+				fullscreen,
+				animated: true
+			});
+		} else if (!props.open && shown.current) {
+			const { host } = shown.current;
+			shown.current = null;
+			host.closeModal();
+		}
+	}, [props.open], _h$1);
+	return universalValue(__octaneUniversalPlan1, []);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { MaterialDialog };

package/dist/native/android/MaterialSwitch.android.tsrx.js

@@ -0,0 +1,28 @@
+import { cx } from "../cx.js";
+import { applyEscapeProps } from "../escape-props.native.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/android/MaterialSwitch.android.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "switch",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["checked", 4],
+		["onCheckedChange", 5]
+	]
+});
+var MaterialSwitch = defineUniversalComponent("nativescript", function MaterialSwitch(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx(props.className),
+		props.style,
+		props.checked,
+		(e) => props.onCheckedChange?.(e.value)
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { MaterialSwitch };

package/dist/native/android/RecyclerView.android.tsrx.js

@@ -0,0 +1,248 @@
+import { cx } from "../cx.js";
+import { ActivityIndicator } from "../ActivityIndicator.native.tsrx.js";
+import { createPullToRefresh } from "../refresh.native.js";
+import { defineUniversalComponent, hookSlots, memo, universalComponent, universalIf, universalPlan, universalProps, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { ScrollView } from "@nativescript/core";
+//#region src/android/RecyclerView.android.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(7);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "listview",
+	"propsSlot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"bindings": [["className", 0], ["style", 1]],
+	"children": [{
+		"kind": "slot",
+		"slot": 2
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"className": "vx-refresh",
+			"verticalAlignment": "top"
+		},
+		"bindings": [
+			["ref", 3],
+			["height", 4],
+			["translateY", 5]
+		],
+		"children": [{
+			"kind": "slot",
+			"slot": 6
+		}]
+	}]
+});
+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": "slot",
+	"slot": 0
+});
+function rejectNestedScrollView(event) {
+	let parent = event.object?.parent;
+	while (parent) {
+		if (parent instanceof ScrollView) throw new Error("[RecyclerView] cannot be nested inside native ScrollView. Use ScrollBox so the list owns scrolling.");
+		parent = parent.parent;
+	}
+}
+var RecyclerViewInner = defineUniversalComponent("nativescript", function RecyclerViewInner(props) {
+	const lv = useRef(null, _h$0);
+	useEffect(() => {
+		const bag = props.refresh;
+		if (!bag || !lv.current) return;
+		bag.ctl.current = createPullToRefresh({
+			scroller: lv.current,
+			indicator: bag.indicator.current,
+			isAtTop: () => (lv.current?.android?.computeVerticalScrollOffset?.() ?? 0) <= 0,
+			cfg: bag.cfg
+		});
+		return () => {
+			bag.ctl.current?.detach();
+			bag.ctl.current = null;
+		};
+	}, [], _h$1);
+	return universalValue(__octaneUniversalPlan1, [universalProps([
+		[
+			"set",
+			"ref",
+			(v) => {
+				lv.current = v;
+			}
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			cx(props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"items",
+			props.items
+		],
+		[
+			"set",
+			"onLoadMoreItems",
+			props.onEndReached
+		],
+		[
+			"set",
+			"onLoaded",
+			rejectNestedScrollView
+		],
+		[
+			"set",
+			"renderItem",
+			(item, index) => universalValue(__octaneUniversalPlan0, [props.renderItem(item, index)])
+		],
+		["spread", props.android]
+	])]);
+}, { "module": "@nativescript-community/octane" });
+var MemoListView = memo(RecyclerViewInner, (a, b) => a.items === b.items && a.className === b.className && a.style === b.style && a.id === b.id && a.onEndReached === b.onEndReached && a.android === b.android && a.refresh === b.refresh);
+var RecyclerView = defineUniversalComponent("nativescript", function RecyclerView(props) {
+	const refreshCapable = props.onRefresh != null || props.refreshing != null;
+	const cfg = useRef({}, _h$2);
+	cfg.current = {
+		onRefresh: props.onRefresh,
+		refreshing: props.refreshing,
+		threshold: props.refreshThreshold
+	};
+	const indicator = useRef(null, _h$3);
+	const ctl = useRef(null, _h$4);
+	const refresh = useRef({
+		cfg,
+		indicator,
+		ctl
+	}, _h$5);
+	useEffect(() => {
+		ctl.current?.sync();
+	}, [props.refreshing], _h$6);
+	return universalValue(__octaneUniversalPlan6, [universalIf(props.items.length > 0, () => {
+		return universalValue(__octaneUniversalPlan4, [universalIf(refreshCapable, () => {
+			return universalValue(__octaneUniversalPlan2, [
+				cx("vx-refresh-wrap", props.className),
+				props.style,
+				universalComponent("nativescript", MemoListView, universalProps([
+					[
+						"set",
+						"id",
+						props.id
+					],
+					[
+						"set",
+						"items",
+						props.items
+					],
+					[
+						"set",
+						"renderItem",
+						props.renderItem
+					],
+					[
+						"set",
+						"onEndReached",
+						props.onEndReached
+					],
+					[
+						"set",
+						"android",
+						props.android
+					],
+					[
+						"set",
+						"refresh",
+						refresh.current
+					]
+				])),
+				(v) => {
+					indicator.current = v;
+				},
+				64,
+				-64,
+				universalComponent("nativescript", ActivityIndicator, universalProps([]))
+			]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", MemoListView, universalProps([
+				[
+					"set",
+					"id",
+					props.id
+				],
+				[
+					"set",
+					"items",
+					props.items
+				],
+				[
+					"set",
+					"className",
+					props.className
+				],
+				[
+					"set",
+					"style",
+					props.style
+				],
+				[
+					"set",
+					"renderItem",
+					props.renderItem
+				],
+				[
+					"set",
+					"onEndReached",
+					props.onEndReached
+				],
+				[
+					"set",
+					"android",
+					props.android
+				]
+			]))]);
+		})]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan5, [props.renderEmpty?.()]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { RecyclerView };

package/dist/native/android/SeekBar.android.tsrx.js

@@ -0,0 +1,34 @@
+import { cx } from "../cx.js";
+import { applyNativeProps } from "../platformProps.native.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/android/SeekBar.android.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "slider",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["value", 3],
+		["minValue", 4],
+		["maxValue", 5],
+		["isEnabled", 6],
+		["onValueChange", 7],
+		["ref", 8]
+	]
+});
+var SeekBar = defineUniversalComponent("nativescript", function SeekBar(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx(props.className),
+		props.style,
+		props.value,
+		props.minValue ?? 0,
+		props.maxValue ?? 100,
+		props.disabled ? false : true,
+		(e) => props.onValueChange?.(e.value),
+		(el) => applyNativeProps(el, props)
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { SeekBar };

package/dist/native/android/index.js

@@ -0,0 +1,9 @@
+import { MaterialSwitch } from "./MaterialSwitch.android.tsrx.js";
+import { SeekBar } from "./SeekBar.android.tsrx.js";
+import { CircularProgressIndicator } from "./CircularProgressIndicator.android.tsrx.js";
+import { RecyclerView } from "./RecyclerView.android.tsrx.js";
+import { BottomNavigationView } from "./BottomNavigationView.android.tsrx.js";
+import { MaterialDialog } from "./MaterialDialog.android.tsrx.js";
+import { openModal } from "./openModal.android.js";
+import { DrawerLayout } from "./DrawerLayout.android.tsrx.js";
+export { BottomNavigationView, CircularProgressIndicator, DrawerLayout, MaterialDialog, MaterialSwitch, RecyclerView, SeekBar, openModal };

package/dist/native/android/openModal.android.js

@@ -0,0 +1,39 @@
+import { applyThemeClasses } from "../theme/theme-scheme.js";
+import { modalPresenter } from "../modal-presenter.native.js";
+import { createNativeScriptRoot } from "@nativescript-community/octane";
+import { Frame, GridLayout } from "@nativescript/core";
+//#region src/android/openModal.android.ts
+/** Open a component in its own NativeScript modal root and resolve on close. */
+var openModal = (Component, params, options = {}) => new Promise((resolve, reject) => {
+	const presenter = modalPresenter(Frame.topmost());
+	if (!presenter) {
+		reject(/* @__PURE__ */ new Error("openModal dropped — no live presenter. The topmost frame has no loaded currentPage (a page mid-navigation), or no frame is active yet."));
+		return;
+	}
+	const host = new GridLayout();
+	const unbindTheme = applyThemeClasses(host, "vx-modal-host");
+	const root = createNativeScriptRoot(host);
+	let finished = false;
+	const finish = (result) => {
+		if (finished) return;
+		finished = true;
+		unbindTheme();
+		root.unmount?.();
+		host.removeChildren?.();
+		resolve(result);
+	};
+	const close = (result) => host.closeModal(result);
+	root.render(Component, {
+		params,
+		close
+	});
+	const fullscreen = options.presentation ? options.presentation === "fullscreen" : options.fullscreen ?? true;
+	presenter.showModal(host, {
+		context: {},
+		closeCallback: finish,
+		fullscreen,
+		animated: options.animated ?? true
+	});
+});
+//#endregion
+export { openModal };