@octane-xplat/picker 0.12.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,31 +1,46 @@
|
|
|
1
1
|
# `@octane-xplat/picker`
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
Platform-native selection controls: a SwiftUI `Picker` on iOS, a Material 3
|
|
4
|
+
dropdown built with Jetpack Compose on Android, and an HTML `<select>` on web.
|
|
5
|
+
Use it when you want the OS-authentic control rather than a shared look.
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @octane-xplat/picker
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
There is no shared picker API at the package root. Each platform entry exports
|
|
12
|
+
its own component and types; import it from the platform subpath in a matching
|
|
13
|
+
platform-suffixed file:
|
|
14
|
+
|
|
15
|
+
| File suffix | Import | Component |
|
|
16
|
+
| --- | --- | --- |
|
|
17
|
+
| `*.ios.tsx` | `@octane-xplat/picker/ios` | `SwiftUIPicker` |
|
|
18
|
+
| `*.android.tsx` | `@octane-xplat/picker/android` | `MaterialDropdown` |
|
|
19
|
+
| `*.web.tsx` | `@octane-xplat/picker/web` | `Select` |
|
|
11
20
|
|
|
12
21
|
```tsx
|
|
13
22
|
/** @jsxImportSource @nativescript-community/octane */
|
|
14
|
-
//
|
|
23
|
+
// BagPicker.ios.tsx
|
|
24
|
+
import { useState } from 'octane'
|
|
15
25
|
import { SwiftUIPicker } from '@octane-xplat/picker/ios'
|
|
16
26
|
|
|
17
|
-
export function
|
|
27
|
+
export function BagPicker() {
|
|
28
|
+
const [selection, setSelection] = useState('carry')
|
|
18
29
|
return (
|
|
19
30
|
<SwiftUIPicker
|
|
20
31
|
label="Bag"
|
|
32
|
+
selection={selection}
|
|
33
|
+
onSelectionChange={setSelection}
|
|
21
34
|
options={[{ id: 'carry', title: 'Carry-on' }]}
|
|
22
|
-
defaultSelection="carry"
|
|
23
|
-
onSelectionChange={console.log}
|
|
24
35
|
/>
|
|
25
36
|
)
|
|
26
37
|
}
|
|
27
38
|
```
|
|
28
39
|
|
|
40
|
+
Each entry's props follow its own platform's selection vocabulary and option
|
|
41
|
+
shapes: iOS uses SwiftUI selection IDs, Android uses Material dropdown keys and
|
|
42
|
+
enabled states, and web follows browser select values.
|
|
43
|
+
|
|
29
44
|
```tsx
|
|
30
45
|
/** @jsxImportSource @nativescript-community/octane */
|
|
31
46
|
// MaterialDropdownExample.android.tsx
|
|
@@ -59,27 +74,5 @@ export function Picker() {
|
|
|
59
74
|
}
|
|
60
75
|
```
|
|
61
76
|
|
|
62
|
-
|
|
63
|
-
entry uses SwiftUI selection IDs, the Android entry uses Material dropdown keys
|
|
64
|
-
and enabled states, and the web entry follows browser select values. See the
|
|
65
|
-
framework guide for details and maintained examples:
|
|
77
|
+
See the framework guide for details and maintained examples:
|
|
66
78
|
[`docs/platform/native-picker.md`](../../docs/platform/native-picker.md).
|
|
67
|
-
|
|
68
|
-
```tsx
|
|
69
|
-
/** @jsxImportSource @nativescript-community/octane */
|
|
70
|
-
// BagPicker.ios.tsx
|
|
71
|
-
import { useState } from 'octane'
|
|
72
|
-
import { SwiftUIPicker } from '@octane-xplat/picker/ios'
|
|
73
|
-
|
|
74
|
-
export function BagPicker() {
|
|
75
|
-
const [selection, setSelection] = useState('carry')
|
|
76
|
-
return (
|
|
77
|
-
<SwiftUIPicker
|
|
78
|
-
label="Bag"
|
|
79
|
-
selection={selection}
|
|
80
|
-
onSelectionChange={setSelection}
|
|
81
|
-
options={[{ id: 'carry', title: 'Carry-on' }]}
|
|
82
|
-
/>
|
|
83
|
-
)
|
|
84
|
-
}
|
|
85
|
-
```
|
|
@@ -38,7 +38,7 @@ var Select = /* @__PURE__ */ __s(function Select(props, __s, __extra) {
|
|
|
38
38
|
const _el0 = child(_root);
|
|
39
39
|
const _el1 = sibling(_el0, 1);
|
|
40
40
|
setSelectValue(_el1, value);
|
|
41
|
-
setEventHandler(_el1, "
|
|
41
|
+
setEventHandler(_el1, "$ochange", (event) => {
|
|
42
42
|
const nextValue = event.target.value;
|
|
43
43
|
if (!controlled) setInternalValue(nextValue);
|
|
44
44
|
props.onChange?.(nextValue);
|
|
@@ -47,7 +47,7 @@ var Select = /* @__PURE__ */ __s(function Select(props, __s, __extra) {
|
|
|
47
47
|
_b = bag13(__s, _root, void 0, _root, void 0, void 0, _el0, void 0, _el1, void 0, void 0, void 0, _m10, null, __s);
|
|
48
48
|
} else {
|
|
49
49
|
setSelectValue(_b.g, value);
|
|
50
|
-
setEventHandler(_b.g, "
|
|
50
|
+
setEventHandler(_b.g, "$ochange", (event) => {
|
|
51
51
|
const nextValue = event.target.value;
|
|
52
52
|
if (!controlled) setInternalValue(nextValue);
|
|
53
53
|
props.onChange?.(nextValue);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@octane-xplat/picker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"description": "Select control for Octane xplat — web select + SwiftUI picker (iOS) / Material dropdown (Android)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"android",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"@nativescript-community/octane": "0.2.4",
|
|
61
61
|
"@nativescript/core": "9.1.3",
|
|
62
62
|
"@octanejs/vite-plugin": "0.1.61",
|
|
63
|
-
"octane": "0.
|
|
63
|
+
"octane": "0.11.0",
|
|
64
64
|
"tsrx-typegen": "0.2.2",
|
|
65
65
|
"typescript": "5.9.3",
|
|
66
66
|
"vite": "8.3.0"
|