@octane-xplat/pager 0.9.0 → 0.11.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,66 @@
|
|
|
1
1
|
# `@octane-xplat/pager`
|
|
2
2
|
|
|
3
|
+
```sh
|
|
4
|
+
pnpm add @octane-xplat/pager
|
|
5
|
+
```
|
|
6
|
+
|
|
3
7
|
Paged horizontal swipe container for Octane xplat apps — onboarding flows,
|
|
4
8
|
media galleries. iOS/Android run `@nativescript-community/ui-pager`
|
|
5
9
|
(ViewPager2 on Android, a paging `UICollectionView` on iOS); web is a
|
|
6
10
|
scroll-snap scroller; a macOS entry exists.
|
|
7
11
|
|
|
8
|
-
```sh
|
|
9
|
-
pnpm add @octane-xplat/pager
|
|
10
|
-
```
|
|
11
|
-
|
|
12
12
|
```tsx
|
|
13
|
+
import { useState } from 'octane'
|
|
14
|
+
import { Text } from '@octane-xplat/ui'
|
|
13
15
|
import { Pager } from '@octane-xplat/pager'
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
export function Onboarding() {
|
|
18
|
+
const [index, setIndex] = useState(0)
|
|
19
|
+
return (
|
|
20
|
+
<Pager
|
|
21
|
+
items={['Pack', 'Travel']}
|
|
22
|
+
page={index}
|
|
23
|
+
onPageChange={setIndex}
|
|
24
|
+
renderItem={(title) => <Text>{title}</Text>}
|
|
25
|
+
renderEmpty={() => <Text>No pages</Text>}
|
|
26
|
+
/>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
21
29
|
```
|
|
22
30
|
|
|
23
31
|
It follows the platform-list contract — `items` + `renderItem`, no
|
|
24
32
|
children; each page is a full-host-size cell. `onPageChange` fires on
|
|
25
33
|
settled user swipes; programmatic `page` writes don't echo back. No page
|
|
26
|
-
indicator is built in — compose dots from `
|
|
34
|
+
indicator is built in — compose dots from `HStack` + `View` driven by the
|
|
27
35
|
`page` state. `renderEmpty` covers the empty list.
|
|
28
36
|
|
|
37
|
+
```tsx
|
|
38
|
+
import { useState } from 'octane'
|
|
39
|
+
import { HStack, Text } from '@octane-xplat/ui'
|
|
40
|
+
import { Pager } from '@octane-xplat/pager'
|
|
41
|
+
|
|
42
|
+
export function Pages() {
|
|
43
|
+
const titles = ['Pack', 'Travel']
|
|
44
|
+
const [page, setPage] = useState(0)
|
|
45
|
+
return (
|
|
46
|
+
<>
|
|
47
|
+
<Pager
|
|
48
|
+
items={titles}
|
|
49
|
+
page={page}
|
|
50
|
+
onPageChange={setPage}
|
|
51
|
+
renderItem={(title) => <Text>{title}</Text>}
|
|
52
|
+
renderEmpty={() => <Text>No pages</Text>}
|
|
53
|
+
/>
|
|
54
|
+
<HStack>
|
|
55
|
+
{titles.map((title, index) => (
|
|
56
|
+
<Text>{index === page ? '●' : '○'}</Text>
|
|
57
|
+
))}
|
|
58
|
+
</HStack>
|
|
59
|
+
</>
|
|
60
|
+
)
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
29
64
|
Per-target limits are recorded in
|
|
30
|
-
[known limits](../../docs/known-limits.md). Exercised by
|
|
65
|
+
[known limits](../../docs/verify/known-limits.md). Exercised by
|
|
31
66
|
[`PagerDemo`](../demos/src/PagerDemo.tsrx).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@octane-xplat/pager",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "Paged swipe container for Octane xplat — web scroll-snap row + @nativescript-community/ui-pager (ViewPager2 / paging UICollectionView)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"android",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@nativescript/core": "9.1.2",
|
|
53
53
|
"@octanejs/vite-plugin": "0.1.61",
|
|
54
54
|
"octane": "0.6.3",
|
|
55
|
-
"tsrx-typegen": "0.2.
|
|
55
|
+
"tsrx-typegen": "0.2.2",
|
|
56
56
|
"typescript": "5.9.3",
|
|
57
57
|
"vite": "8.3.0"
|
|
58
58
|
},
|
package/src/Pager.macos.tsrx
CHANGED