@octane-xplat/ui 0.4.0 → 0.6.0

package/dist/native/Tree.native.tsrx.js

@@ -0,0 +1,140 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { defineUniversalComponent, hookSlots, universalComponent, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+//#region src/Tree.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-tree-node" },
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [
+			["className", 0],
+			["style", 1],
+			["onTap", 2]
+		],
+		"children": [{
+			"kind": "host",
+			"type": "label",
+			"props": { "className": "vx-tree-caret" },
+			"bindings": [["text", 3]]
+		}, {
+			"kind": "host",
+			"type": "label",
+			"props": { "className": "vx-tree-label" },
+			"bindings": [["text", 4]]
+		}]
+	}, {
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}]
+});
+var TreeRow = defineUniversalComponent("nativescript", function TreeRow(props) {
+	const node = props.node;
+	const kids = node.children ?? [];
+	const isOpen = props.open.has(node.key);
+	return universalValue(__octaneUniversalPlan1, [
+		cx("vx-tree-row", node.disabled && "vx-tree-row--disabled"),
+		{ paddingLeft: props.depth * 16 },
+		node.disabled ? void 0 : () => kids.length ? props.toggle(node) : props.onSelect?.(node),
+		kids.length ? isOpen ? "▾" : "▸" : "",
+		node.label ?? node.key,
+		isOpen && kids.map((kid) => universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", TreeRow, universalProps([
+			[
+				"set",
+				"node",
+				kid
+			],
+			[
+				"set",
+				"depth",
+				props.depth + 1
+			],
+			[
+				"set",
+				"open",
+				props.open
+			],
+			[
+				"set",
+				"toggle",
+				props.toggle
+			],
+			[
+				"set",
+				"onSelect",
+				props.onSelect
+			]
+		]))]))
+	]);
+}, { "module": "@nativescript-community/octane" });
+var Tree = defineUniversalComponent("nativescript", function Tree(props) {
+	const [open, setOpen] = useState(new Set(props.defaultExpanded ?? []), _h$0);
+	const toggle = (node) => {
+		const next = new Set(open);
+		const willOpen = !next.has(node.key);
+		if (willOpen) next.add(node.key);
+		else next.delete(node.key);
+		setOpen(next);
+		props.onToggle?.(node.key, willOpen);
+	};
+	return universalValue(__octaneUniversalPlan3, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-tree", props.className),
+		props.style,
+		props.nodes.map((node) => universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", TreeRow, universalProps([
+			[
+				"set",
+				"node",
+				node
+			],
+			[
+				"set",
+				"depth",
+				0
+			],
+			[
+				"set",
+				"open",
+				open
+			],
+			[
+				"set",
+				"toggle",
+				toggle
+			],
+			[
+				"set",
+				"onSelect",
+				props.onSelect
+			]
+		]))]))
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Tree };

package/dist/native/User.native.tsrx.js

@@ -0,0 +1,95 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { Avatar } from "./Avatar.native.tsrx.js";
+import { defineUniversalComponent, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
+//#region src/User.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-user-name" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-user-desc" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["onTap", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "className": "vx-user-body" },
+		"children": [{
+			"kind": "slot",
+			"slot": 6
+		}, {
+			"kind": "slot",
+			"slot": 7
+		}]
+	}]
+});
+var User = defineUniversalComponent("nativescript", markWarm(function User(props) {
+	useBatch([], () => {
+		warmChild(Avatar, {
+			src: props.src,
+			fallback: props.fallback,
+			alt: props.name,
+			size: props.size
+		});
+	});
+	return universalValue(__octaneUniversalPlan2, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-user", props.onSelect && "vx-user--pressable", props.className),
+		props.style,
+		props.onSelect,
+		universalComponent("nativescript", Avatar, universalProps([
+			[
+				"set",
+				"src",
+				props.src
+			],
+			[
+				"set",
+				"fallback",
+				props.fallback
+			],
+			[
+				"set",
+				"alt",
+				props.name
+			],
+			[
+				"set",
+				"size",
+				props.size
+			]
+		])),
+		props.name != null ? universalValue(__octaneUniversalPlan0, [props.name]) : null,
+		props.description != null ? universalValue(__octaneUniversalPlan1, [props.description]) : null
+	]);
+}, (__wp) => {
+	const props = __wp;
+	warmChild(Avatar, {
+		src: props.src,
+		fallback: props.fallback,
+		alt: props.name,
+		size: props.size
+	});
+}), { "module": "@nativescript-community/octane" });
+//#endregion
+export { User };

package/dist/native/Video.native.tsrx.js

@@ -0,0 +1,248 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.native.js";
+import { layoutChildProps } from "./layout-child.native.js";
+import { VideoChrome } from "./video-chrome.native.tsrx.js";
+import { defineUniversalComponent, hookSlots, registerElement, universalComponent, universalIf, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef, useState } from "@nativescript-community/octane";
+import { Video, VideoFill } from "@nstudio/nativescript-exoplayer";
+//#region src/Video.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(11);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "xplatvideo",
+		"props": { "controls": false },
+		"bindings": [
+			["ref", 1],
+			["autoplay", 2],
+			["loop", 3],
+			["muted", 4],
+			["fill", 5],
+			["observeCurrentTime", 6],
+			["onFinished", 7],
+			["onPlaybackReady", 8],
+			["onPlaybackStart", 9],
+			["onCurrentTimeUpdated", 10]
+		]
+	}, {
+		"kind": "slot",
+		"slot": 11
+	}]
+});
+registerElement("xplatvideo", Video);
+var FILLS = {
+	contain: VideoFill.aspect,
+	cover: VideoFill.aspectFill,
+	fill: VideoFill.fill
+};
+var Video$1 = defineUniversalComponent("nativescript", function Video(props) {
+	const host = useRef(null, _h$0);
+	const [playing, setPlaying] = useState(props.playing ?? props.autoPlay ?? false, _h$1);
+	const [started, setStarted] = useState(false, _h$2);
+	const [position, setPosition] = useState(0, _h$3);
+	const [duration, setDuration] = useState(0, _h$4);
+	const [internalMuted, setInternalMuted] = useState(false, _h$5);
+	const muted = props.muted ?? internalMuted;
+	const appliedSrc = useRef(void 0, _h$6);
+	const bindHost = useCallback((v) => {
+		host.current = v;
+	}, [], _h$7);
+	const drive = (v, next) => {
+		if (!v) return;
+		if (next) v.play();
+		else v.pause();
+	};
+	useEffect(() => {
+		const v = host.current;
+		if (!v) return;
+		applyEscapeProps(v, props);
+		props.bind?.(handle(v));
+	}, [], _h$8);
+	useEffect(() => {
+		const v = host.current;
+		if (!v || props.src === appliedSrc.current) return;
+		appliedSrc.current = props.src;
+		v.src = props.src;
+	}, [props.src], _h$9);
+	useEffect(() => {
+		if (props.playing === void 0) return;
+		setPlaying(props.playing);
+		drive(host.current, props.playing);
+	}, [props.playing], _h$10);
+	const togglePlay = () => {
+		const next = !playing;
+		setPlaying(next);
+		drive(host.current, next);
+		props.onPlayingChange?.(next);
+	};
+	const handle = (v) => ({
+		play: () => v.play(),
+		pause: () => v.pause(),
+		seekTo: (ms) => v.seekToTime(ms / 1e3),
+		currentTime: () => v.getCurrentTime(),
+		duration: () => v.getDuration(),
+		native: v
+	});
+	return universalValue(__octaneUniversalPlan1, [
+		universalProps([
+			[
+				"set",
+				"id",
+				props.id
+			],
+			[
+				"set",
+				"rows",
+				"*"
+			],
+			[
+				"set",
+				"columns",
+				"*"
+			],
+			[
+				"set",
+				"className",
+				cx("vx-stack", "vx-video", props.className)
+			],
+			[
+				"set",
+				"style",
+				props.style
+			],
+			["spread", layoutChildProps(props)],
+			[
+				"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
+			]
+		]),
+		bindHost,
+		props.playing ?? props.autoPlay ?? false,
+		props.loop,
+		muted,
+		FILLS[props.fit ?? "contain"],
+		props.controls !== false,
+		() => {
+			if (!props.loop) {
+				setPlaying(false);
+				props.onEnded?.();
+			}
+		},
+		() => {
+			const ms = host.current?.getDuration?.() ?? 0;
+			setDuration(ms);
+			props.onReady?.({ duration: ms });
+		},
+		() => setStarted(true),
+		(e) => setPosition(e.position ?? 0),
+		universalIf(props.controls !== false, () => {
+			return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", VideoChrome, universalProps([
+				[
+					"set",
+					"poster",
+					props.poster
+				],
+				[
+					"set",
+					"started",
+					started
+				],
+				[
+					"set",
+					"playing",
+					playing
+				],
+				[
+					"set",
+					"position",
+					position
+				],
+				[
+					"set",
+					"duration",
+					duration
+				],
+				[
+					"set",
+					"muted",
+					muted
+				],
+				[
+					"set",
+					"onTogglePlay",
+					togglePlay
+				],
+				[
+					"set",
+					"onToggleMute",
+					() => {
+						const next = !muted;
+						setInternalMuted(next);
+						if (host.current) host.current.muted = next;
+						props.onMutedChange?.(next);
+					}
+				],
+				[
+					"set",
+					"onSeek",
+					(ms) => {
+						if (host.current) {
+							host.current.seekToTime(ms / 1e3);
+							setPosition(ms);
+						}
+					}
+				]
+			]))]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Video$1 as Video };

package/dist/native/{ui6.js → View.native.tsrx.js}

@@ -1,8 +1,8 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
-import { glassClassOf, glassConfigOf } from "./ui4.js";
-import { layoutChildProps } from "./ui5.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback } from "@nativescript-community/octane";
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.native.js";
+import { layoutChildProps } from "./layout-child.native.js";
+import { usePan } from "./pan.native.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, withSlot } from "@nativescript-community/octane";
 //#region src/View.native.tsrx
 var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
@@ -14,23 +14,7 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		"slot": 1
 	}]
 });
-var PAN_STATE = [
-	"cancelled",
-	"began",
-	"moved",
-	"ended"
-];
 var View = defineUniversalComponent("nativescript", function View(props) {
-	const onPan = useCallback((e) => props.onPan?.({
-		x: e.deltaX,
-		y: e.deltaY,
-		dx: e.deltaX,
-		dy: e.deltaY,
-		vx: 0,
-		vy: 0,
-		state: PAN_STATE[e.state] ?? "moved",
-		target: e.view ?? e.object
-	}), [props.onPan], _h$0);
 	return universalValue(__octaneUniversalPlan0, [universalProps([
 		[
 			"set",
@@ -56,7 +40,7 @@ var View = defineUniversalComponent("nativescript", function View(props) {
 		[
 			"set",
 			"className",
-			cx(glassClassOf(props.glass), props.className)
+			cx(props.className)
 		],
 		[
 			"set",
@@ -65,13 +49,43 @@ var View = defineUniversalComponent("nativescript", function View(props) {
 		],
 		[
 			"set",
-			"iosGlassEffect",
-			glassConfigOf(props.glass)
+			"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",
 			"onPan",
-			props.onPan ? onPan : void 0
+			withSlot(_h$0, usePan, props.onPan)
 		],
 		[
 			"set",

package/dist/native/WebView.native.tsrx.js

@@ -0,0 +1,110 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.native.js";
+import { layoutChildProps } from "./layout-child.native.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);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "webview",
+	"propsSlot": 0
+});
+var WebView = defineUniversalComponent("nativescript", function WebView(props) {
+	const el = useRef(null, _h$0);
+	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);
+	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"ref",
+			(v) => {
+				el.current = v;
+				if (!v) return;
+				applyEscapeProps(v, props);
+				props.bind?.({
+					reload: () => v.reload(),
+					goBack: () => v.goBack(),
+					goForward: () => v.goForward(),
+					stopLoading: () => v.stopLoading(),
+					native: v
+				});
+			}
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		["spread", layoutChildProps(props)],
+		[
+			"set",
+			"className",
+			cx("vx-webview", props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"src",
+			props.html !== void 0 ? props.html : props.src
+		],
+		[
+			"set",
+			"onLoadFinished",
+			(e) => {
+				if (e.error) props.onError?.({
+					url: e.url,
+					error: e.error
+				});
+				else props.onLoad?.({ url: e.url });
+			}
+		],
+		[
+			"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
+		]
+	])]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { WebView };