1import { HStack, LazyVStack, Navigation, NavigationStack, Script, ScrollView, Section, Spacer, Text, useMemo } from "scripting"
2
3function Example() {
4 const groups = useMemo(() => {
5 const groups: {
6 name: string
7 items: number[]
8 }[] = []
9
10 for (let i = 1; i < 10; i++) {
11 const list: {
12 name: string
13 items: number[]
14 } = {
15 name: "Group " + i,
16 items: []
17 }
18
19 for (let j = 0; j < 10; j++) {
20 list.items.push(i * 10 + j)
21 }
22
23 groups.push(list)
24 }
25
26 return groups
27 }, [])
28
29 return <NavigationStack>
30 <ScrollView
31 navigationTitle={"LazyVStack"}
32 navigationBarTitleDisplayMode={"inline"}
33 >
34 <LazyVStack
35 alignment={"leading"}
36 spacing={10}
37 pinnedViews={"sectionHeaders"}
38 >
39 {groups.map(group =>
40 <Section
41 header={
42 <HStack
43 background={"purple"}
44 >
45 <Text>{group.name}</Text>
46 <Spacer />
47 </HStack>
48 }
49 >
50 {group.items.map(item =>
51 <Text>Row {item}</Text>
52 )}
53 </Section>
54 )}
55 </LazyVStack>
56 </ScrollView>
57 </NavigationStack>
58}
59
60async function run() {
61 await Navigation.present({
62 element: <Example />
63 })
64 Script.exit()
65}
66
67run()
