@octane-xplat/ui 0.5.0 → 0.7.0

package/dist/native/Row.tsrx.js

@@ -0,0 +1,98 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { layoutChildProps } from "./layout-child.js";
+import { usePan } from "./pan.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, withSlot } from "@nativescript-community/octane";
+//#region src/Row.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var Row = defineUniversalComponent("nativescript", function Row(props) {
+	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"ref",
+			(v) => {
+				if (v) {
+					applyEscapeProps(v, props);
+					props.bind?.(v);
+				}
+			}
+		],
+		[
+			"set",
+			"flexDirection",
+			"row"
+		],
+		[
+			"set",
+			"className",
+			cx(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
+		],
+		[
+			"set",
+			"onPan",
+			withSlot(_h$0, usePan, props.onPan)
+		],
+		[
+			"set",
+			"onSwipe",
+			props.onSwipe
+		]
+	]), props.children]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Row };

package/dist/native/{ui49.js → SafeArea.tsrx.js}

@@ -1,8 +1,8 @@
-import { cx } from "./ui2.js";
-import { useSafeAreaInsets } from "./ui48.js";
+import { cx } from "./cx.js";
+import { useSafeAreaInsets } from "./safeAreaInsets.tsrx.js";
 import { defineUniversalComponent, hookSlots, universalPlan, universalValue, withSlot } from "@nativescript-community/octane";
 import { Application } from "@nativescript/core";
-//#region src/SafeArea.native.tsrx
+//#region src/SafeArea.tsrx
 var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
@@ -19,7 +19,13 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	}]
 });
 var SafeArea = defineUniversalComponent("nativescript", function SafeArea(props) {
-	const insets = withSlot(_h$0, useSafeAreaInsets);
+	const measuredInsets = withSlot(_h$0, useSafeAreaInsets);
+	const insets = props.ignoreSafeArea ? {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	} : measuredInsets;
 	const platformProps = Application.ios != null ? props.ios : props.android;
 	return universalValue(__octaneUniversalPlan0, [
 		props.id,

package/dist/native/{ui45.js → Screen.tsrx.js}

@@ -1,8 +1,9 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
-import { registerRootLayout, unregisterRootLayout } from "./ui34.js";
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { registerRootLayout, unregisterRootLayout } from "./root-layout.mobile.js";
+import { attachTapToBlur } from "./tap-to-blur.mobile.js";
 import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/Screen.native.tsrx
+//#region src/Screen.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "rootlayout",
@@ -16,10 +17,14 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		"kind": "host",
 		"type": "flexboxlayout",
 		"props": { "flexDirection": "column" },
-		"bindings": [["className", 4], ["style", 5]],
+		"bindings": [
+			["className", 4],
+			["style", 5],
+			["ref", 6]
+		],
 		"children": [{
 			"kind": "slot",
-			"slot": 6
+			"slot": 7
 		}]
 	}]
 });
@@ -31,6 +36,9 @@ var Screen = defineUniversalComponent("nativescript", function Screen(props) {
 		(e) => unregisterRootLayout(e.object),
 		cx(props.className),
 		props.style,
+		(v) => {
+			if (v) attachTapToBlur(v);
+		},
 		props.children
 	]);
 }, { "module": "@nativescript-community/octane" });

package/dist/native/{ui26.js → ScrollBox.tsrx.js}

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

package/dist/native/ScrollView.tsrx.js

@@ -0,0 +1,233 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { layoutChildProps } from "./layout-child.js";
+import { ActivityIndicator } from "./ActivityIndicator.tsrx.js";
+import { createPullToRefresh } from "./refresh.js";
+import { defineUniversalComponent, hookSlots, markWarm, universalComponent, universalIf, universalPlan, universalProps, universalValue, useBatch, useEffect, useRef, warmChild } from "@nativescript-community/octane";
+//#region src/ScrollView.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(6);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "scrollview",
+		"props": { "className": "vx-scroll" },
+		"bindings": [
+			["ref", 1],
+			["id", 2],
+			["orientation", 3],
+			["accessible", 4],
+			["accessibilityLabel", 5],
+			["accessibilityRole", 6],
+			["accessibilityHint", 7],
+			["accessibilityValue", 8],
+			["accessibilityState", 9],
+			["accessibilityLiveRegion", 10]
+		],
+		"children": [{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"bindings": [["flexDirection", 11]],
+			"children": [{
+				"kind": "slot",
+				"slot": 12
+			}]
+		}]
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"className": "vx-refresh",
+			"verticalAlignment": "top"
+		},
+		"bindings": [
+			["ref", 13],
+			["height", 14],
+			["translateY", 15]
+		],
+		"children": [{
+			"kind": "slot",
+			"slot": 16
+		}]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "scrollview",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [["flexDirection", 1]],
+		"children": [{
+			"kind": "slot",
+			"slot": 2
+		}]
+	}]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var ScrollViewRefreshable = defineUniversalComponent("nativescript", markWarm(function ScrollViewRefreshable(props) {
+	const cfg = useRef({}, _h$0);
+	cfg.current = {
+		onRefresh: props.onRefresh,
+		refreshing: props.refreshing,
+		threshold: props.refreshThreshold
+	};
+	const ctl = useRef(null, _h$1);
+	const scroller = useRef(null, _h$2);
+	const indicator = useRef(null, _h$3);
+	useEffect(() => {
+		if (!scroller.current || !indicator.current) return;
+		ctl.current = createPullToRefresh({
+			scroller: scroller.current,
+			indicator: indicator.current,
+			isAtTop: () => scroller.current?.verticalOffset <= 0,
+			cfg
+		});
+		return () => {
+			ctl.current?.detach();
+			ctl.current = null;
+		};
+	}, [], _h$4);
+	useEffect(() => {
+		ctl.current?.sync();
+	}, [props.refreshing], _h$5);
+	useBatch([], () => {
+		warmChild(ActivityIndicator, {});
+	});
+	return universalValue(__octaneUniversalPlan0, [
+		universalProps([
+			[
+				"set",
+				"ref",
+				(v) => {
+					if (v?.ios) v.ios.clipsToBounds = true;
+				}
+			],
+			["spread", layoutChildProps(props)],
+			[
+				"set",
+				"className",
+				cx("vx-refresh-wrap", props.className)
+			],
+			[
+				"set",
+				"style",
+				props.style
+			]
+		]),
+		(v) => {
+			scroller.current = v;
+			applyEscapeProps(v, props);
+		},
+		props.id,
+		props.horizontal ? "horizontal" : "vertical",
+		props.accessible,
+		props.accessibilityLabel,
+		nativeAccessibilityRole(props.accessibilityRole),
+		props.accessibilityHint,
+		props.accessibilityValue,
+		nativeAccessibilityState(props.accessibilityState),
+		props.accessibilityLiveRegion,
+		props.horizontal ? "row" : "column",
+		props.children,
+		(v) => {
+			indicator.current = v;
+		},
+		64,
+		-64,
+		universalComponent("nativescript", ActivityIndicator, universalProps([]))
+	]);
+}, (__wp) => {
+	warmChild(ActivityIndicator, {});
+}), { "module": "@nativescript-community/octane" });
+var ScrollView = defineUniversalComponent("nativescript", function ScrollView(props) {
+	return universalValue(__octaneUniversalPlan3, [universalIf(!props.horizontal && (props.onRefresh != null || props.refreshing != null), () => {
+		return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", ScrollViewRefreshable, universalProps([["spread", props]]))]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan2, [
+			universalProps([
+				[
+					"set",
+					"ref",
+					(v) => applyEscapeProps(v, props)
+				],
+				[
+					"set",
+					"id",
+					props.id
+				],
+				["spread", layoutChildProps(props)],
+				[
+					"set",
+					"className",
+					cx(props.className)
+				],
+				[
+					"set",
+					"style",
+					props.style
+				],
+				[
+					"set",
+					"orientation",
+					props.horizontal ? "horizontal" : "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
+				]
+			]),
+			props.horizontal ? "row" : "column",
+			props.children
+		]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { ScrollView };

package/dist/native/SearchInput.tsrx.js

@@ -0,0 +1,151 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { Icon } from "./Icon.tsrx.js";
+import { writeText } from "./text-write.js";
+import { defineUniversalComponent, hookSlots, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, useEffect, useRef, useState, warmChild } from "@nativescript-community/octane";
+//#region src/SearchInput.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": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-search-clear",
+		"accessibilityLabel": "Clear search"
+	},
+	"bindings": [["onTap", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["accessibilityLabel", 4]
+	],
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 5
+		},
+		{
+			"kind": "host",
+			"type": "textfield",
+			"props": {
+				"className": "vx-search-field",
+				"returnKeyType": "search"
+			},
+			"bindings": [
+				["ref", 6],
+				["hint", 7],
+				["editable", 8],
+				["onTextChange", 9],
+				["onReturnPress", 10],
+				["onFocus", 11],
+				["onBlur", 12]
+			]
+		},
+		{
+			"kind": "slot",
+			"slot": 13
+		}
+	]
+});
+var SearchInput = defineUniversalComponent("nativescript", markWarm(function SearchInput(props) {
+	const el = useRef(null, _h$0);
+	const [internal, setInternal] = useState(props.defaultValue ?? "", _h$1);
+	const value = props.value ?? internal;
+	useEffect(() => writeText(el.current, value), [value], _h$2);
+	const setValue = (next) => {
+		if (props.value === void 0) setInternal(next);
+		props.onChange?.(next);
+	};
+	const clear = () => {
+		setValue("");
+		props.onClear?.();
+	};
+	useBatch([], () => {
+		warmChild(Icon, {
+			name: props.icon ?? "xplat-search",
+			size: 16,
+			className: "vx-search-icon"
+		});
+		warmChild(Icon, {
+			name: "xplat-clear",
+			size: 12
+		});
+	});
+	return universalValue(__octaneUniversalPlan2, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-search", props.editable === false && "vx-search--disabled", props.className),
+		props.style,
+		props.accessibilityLabel,
+		props.icon !== false ? universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Icon, universalProps([
+			[
+				"set",
+				"name",
+				props.icon ?? "xplat-search"
+			],
+			[
+				"set",
+				"size",
+				16
+			],
+			[
+				"set",
+				"className",
+				"vx-search-icon"
+			]
+		]))]) : null,
+		(v) => {
+			el.current = v;
+			if (!v) return;
+			props.bind?.({
+				focus: () => v.focus(),
+				blur: () => v.dismissSoftInput?.() ?? v.blur(),
+				native: v
+			});
+		},
+		props.placeholder,
+		props.editable ?? true,
+		(e) => setValue(e.value),
+		props.onSubmit,
+		props.onFocus,
+		props.onBlur,
+		value !== "" && props.editable !== false ? universalValue(__octaneUniversalPlan1, [clear, universalComponent("nativescript", Icon, universalProps([[
+			"set",
+			"name",
+			"xplat-clear"
+		], [
+			"set",
+			"size",
+			12
+		]]))]) : null
+	]);
+}, (__wp) => {
+	warmChild(Icon, {
+		name: __wp.icon ?? "xplat-search",
+		size: 16,
+		className: "vx-search-icon"
+	});
+	warmChild(Icon, {
+		name: "xplat-clear",
+		size: 12
+	});
+}), { "module": "@nativescript-community/octane" });
+//#endregion
+export { SearchInput };

package/dist/native/SegmentedControl.tsrx.js

@@ -0,0 +1,75 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityState } from "./escape-props.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+//#region src/SegmentedControl.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "label",
+		"props": { "className": "vx-segment-label" },
+		"bindings": [["text", 1]]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["accessibilityLabel", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var SegmentedControl = defineUniversalComponent("nativescript", function SegmentedControl(props) {
+	const [internal, setInternal] = useState(props.defaultValue, _h$0);
+	const current = props.value ?? internal;
+	const select = (value) => {
+		if (props.value === void 0) setInternal(value);
+		props.onValueChange?.(value);
+	};
+	return universalValue(__octaneUniversalPlan1, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-segmented", props.disabled && "vx-segmented--disabled", props.className),
+		props.style,
+		props.accessibilityLabel,
+		props.options.map((opt) => {
+			const selected = current === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return universalValue(__octaneUniversalPlan0, [universalProps([
+				[
+					"set",
+					"key",
+					opt.value
+				],
+				[
+					"set",
+					"className",
+					cx("vx-segment", selected && "vx-segment--on", disabled && "vx-segment--disabled")
+				],
+				[
+					"set",
+					"accessibilityState",
+					nativeAccessibilityState({ selected })
+				],
+				[
+					"set",
+					"onTap",
+					disabled ? void 0 : () => select(opt.value)
+				]
+			]), opt.label ?? opt.value]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { SegmentedControl };