1import { Color, Image, List, Navigation, NavigationStack, Script, ScrollView, Section, Text, useState, VStack } from "scripting"
2
3function TapGestureExample() {
4 const [
5 firstViewTapped,
6 setFirstViewTapped
7 ] = useState(false)
8
9 return <Section>
10 <Text
11 onTapGesture={() => {
12 setFirstViewTapped(true)
13 }}
14 >
15 {firstViewTapped
16 ? "Tapped"
17 : "Tap on me"}
18 </Text>
19 </Section>
20}
21
22function LongPressGestureExample() {
23 const [isPopoverPresented, setIsPopoverPresented] = useState(false)
24
25 return <Section>
26 <Text
27 onLongPressGesture={() => {
28 setIsPopoverPresented(true)
29 }}
30 popover={{
31 isPresented: isPopoverPresented,
32 onChanged: setIsPopoverPresented,
33 presentationCompactAdaptation: "popover",
34 content: <Text
35 font={"headline"}
36 padding
37 >The popover content</Text>
38 }}
39 >Long press and show a pop-over view</Text>
40 </Section>
41}
42
43function DoubleTapGestureExample() {
44 const [color, setColor] = useState<Color>("gray")
45 const colors: Color[] = ["systemBlue", "systemRed", "systemOrange", "systemYellow", "systemPurple"]
46
47 return <Section>
48 <VStack
49 alignment={"center"}
50 >
51 <Image
52 systemName={"heart.fill"}
53 resizable
54 frame={{
55 width: 100,
56 height: 100,
57 }}
58 foregroundStyle={color}
59 onTapGesture={{
60 count: 2,
61 perform: () => {
62 const index = Math.floor(Math.random() * colors.length)
63 setColor(colors[index])
64 }
65 }}
66 />
67 <Text>Double tap on the Image</Text>
68 </VStack>
69 </Section>
70}
71
72function Example() {
73
74 return <NavigationStack>
75 <List
76 navigationTitle={"Gestures"}
77 navigationBarTitleDisplayMode={"inline"}
78 >
79 <TapGestureExample />
80 <DoubleTapGestureExample />
81 <LongPressGestureExample />
82 </List>
83 </NavigationStack>
84}
85
86async function run() {
87 await Navigation.present({
88 element: <Example />
89 })
90
91 Script.exit()
92}
93
94run()
