@octane-xplat/pager 0.7.3 → 0.10.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 +66 -0
- package/dist/native/octane-client-build.json +1 -1
- package/dist/web/octane-client-build.json +1 -1
- package/package.json +17 -13
- package/src/Pager.macos.tsrx +1 -1
- package/types/index.d.ts +2 -2
- package/types/index.macos.d.ts +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# `@octane-xplat/pager`
|
|
2
|
+
|
|
3
|
+
```sh
|
|
4
|
+
pnpm add @octane-xplat/pager
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
Paged horizontal swipe container for Octane xplat apps — onboarding flows,
|
|
8
|
+
media galleries. iOS/Android run `@nativescript-community/ui-pager`
|
|
9
|
+
(ViewPager2 on Android, a paging `UICollectionView` on iOS); web is a
|
|
10
|
+
scroll-snap scroller; a macOS entry exists.
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import { useState } from 'octane'
|
|
14
|
+
import { Text } from '@octane-xplat/ui'
|
|
15
|
+
import { Pager } from '@octane-xplat/pager'
|
|
16
|
+
|
|
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
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
It follows the platform-list contract — `items` + `renderItem`, no
|
|
32
|
+
children; each page is a full-host-size cell. `onPageChange` fires on
|
|
33
|
+
settled user swipes; programmatic `page` writes don't echo back. No page
|
|
34
|
+
indicator is built in — compose dots from `HStack` + `View` driven by the
|
|
35
|
+
`page` state. `renderEmpty` covers the empty list.
|
|
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
|
+
|
|
64
|
+
Per-target limits are recorded in
|
|
65
|
+
[known limits](../../docs/verify/known-limits.md). Exercised by
|
|
66
|
+
[`PagerDemo`](../demos/src/PagerDemo.tsrx).
|
package/package.json
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@octane-xplat/pager",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.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
|
-
"
|
|
7
|
-
"
|
|
6
|
+
"android",
|
|
7
|
+
"carousel",
|
|
8
8
|
"cross-platform",
|
|
9
|
+
"ios",
|
|
10
|
+
"nativescript",
|
|
11
|
+
"octane",
|
|
9
12
|
"pager",
|
|
10
|
-
"
|
|
13
|
+
"paging",
|
|
11
14
|
"swipe",
|
|
12
15
|
"viewpager",
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"ios",
|
|
16
|
-
"android",
|
|
17
|
-
"web"
|
|
16
|
+
"web",
|
|
17
|
+
"xplat"
|
|
18
18
|
],
|
|
19
|
-
"license": "MIT",
|
|
20
19
|
"homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/pager",
|
|
20
|
+
"license": "MIT",
|
|
21
21
|
"repository": {
|
|
22
22
|
"type": "git",
|
|
23
|
-
"url": "
|
|
23
|
+
"url": "https://github.com/octane-xplat/octane-xplat",
|
|
24
24
|
"directory": "packages/pager"
|
|
25
25
|
},
|
|
26
26
|
"files": [
|
|
@@ -48,10 +48,11 @@
|
|
|
48
48
|
"@nativescript-community/ui-pager": "14.1.42"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@nativescript-community/octane": "0.2.
|
|
51
|
+
"@nativescript-community/octane": "0.2.4",
|
|
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.2",
|
|
55
56
|
"typescript": "5.9.3",
|
|
56
57
|
"vite": "8.3.0"
|
|
57
58
|
},
|
|
@@ -69,6 +70,9 @@
|
|
|
69
70
|
}
|
|
70
71
|
},
|
|
71
72
|
"scripts": {
|
|
72
|
-
"build": "vite build && vite build --mode native &&
|
|
73
|
+
"build": "vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
|
|
74
|
+
"typegen": "tsc -p tsconfig.types.json",
|
|
75
|
+
"test:packed": "node tests/packed-consumer.mjs",
|
|
76
|
+
"pack:check": "tsrx-typegen --pack-check"
|
|
73
77
|
}
|
|
74
78
|
}
|
package/src/Pager.macos.tsrx
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { UniversalComponent } from 'octane/universal'
|
|
2
|
-
import type { PagerProps } from './props'
|
|
2
|
+
import type { PagerProps } from './props.js'
|
|
3
3
|
|
|
4
4
|
export declare const Pager: UniversalComponent<PagerProps>
|
|
5
|
-
export type { PagerProps } from './props'
|
|
5
|
+
export type { PagerProps } from './props.js'
|
package/types/index.macos.d.ts
CHANGED