1import { Color, ForEach, HStack, KeywordPoint, Navigation, NavigationStack, Picker, RoundedRectangle, Script, ScrollView, Text, useState, VStack } from "scripting"
2
3function Example() {
4 const colors: Color[] = [
5 "systemRed",
6 "systemOrange",
7 "systemYellow",
8 "systemGreen",
9 "systemBlue",
10 "systemPurple",
11 "systemIndigo",
12 "systemPink",
13 ]
14 const [scrollAnchor, setScrollAnchor] = useState<KeywordPoint>("bottom")
15
16 return <NavigationStack>
17 <ScrollView
18 navigationTitle={"ScrollView"}
19 defaultScrollAnchor={scrollAnchor}
20 navigationBarTitleDisplayMode={"inline"}
21 key={scrollAnchor}
22 >
23 <VStack
24 spacing={16}
25 padding
26 >
27 <Picker
28 title={"Default Scroll Anchor"}
29 value={scrollAnchor}
30 onChanged={setScrollAnchor as any}
31 pickerStyle={"menu"}
32 >
33 <Text tag={"top"}>Top</Text>
34 <Text tag={"center"}>Center</Text>
35 <Text tag={"bottom"}>Bottom</Text>
36 </Picker>
37
38 <ScrollView
39 axes={"horizontal"}
40 frame={{
41 height: 64
42 }}
43 >
44 <HStack spacing={8}>
45 <ForEach
46 count={15}
47 itemBuilder={index =>
48 <RoundedRectangle
49 key={index.toString()}
50 fill={"systemIndigo"}
51 cornerRadius={6}
52 frame={{
53 width: 64,
54 height: 64,
55 }}
56 overlay={
57 <Text>{index}</Text>
58 }
59 />
60 }
61 />
62 </HStack>
63 </ScrollView>
64
65 <ForEach
66 count={colors.length}
67 itemBuilder={index => {
68 const color = colors[index]
69 return <RoundedRectangle
70 key={color}
71 fill={color}
72 cornerRadius={16}
73 frame={{
74 height: 100
75 }}
76 />
77 }}
78 />
79 </VStack>
80 </ScrollView>
81 </NavigationStack>
82}
83
84async function run() {
85 await Navigation.present({
86 element: <Example />
87 })
88
89 Script.exit()
90}
91
92run()
