1import { Button, List, Navigation, NavigationStack, Script, Section, Text, useState, VStack } from "scripting"
2
3function SheetExample() {
4 const [
5 isPresented,
6 setIsPresented
7 ] = useState(false)
8
9 return <Section
10 header={
11 <Text>Showing a sheet</Text>
12 }
13 >
14 <Button
15 title={"Present"}
16 action={() => setIsPresented(true)}
17 sheet={{
18 isPresented: isPresented,
19 onChanged: setIsPresented,
20 content: <VStack
21 presentationDragIndicator={"visible"}
22 >
23 <Text
24 font={"title"}
25 padding={50}
26 >
27 Sheet content
28 </Text>
29 <Button
30 title={"Dismiss"}
31 action={() => setIsPresented(false)}
32 />
33 </VStack>
34 }}
35 />
36 </Section>
37}
38
39function PopoverExample() {
40 const [isPresented, setIsPresented] = useState(false)
41
42 return <Section
43 header={
44 <Text>Showing a popover</Text>
45 }
46 >
47 <Button
48 title={"Show Popover"}
49 action={() => {
50 setIsPresented(true)
51 }}
52 popover={{
53 isPresented: isPresented,
54 onChanged: setIsPresented,
55 presentationCompactAdaptation: "popover",
56 content: <Text padding>Popover content</Text>,
57 arrowEdge: "top",
58 }}
59 />
60 </Section>
61}
62
63function FullScreenCoverExample() {
64 const [isPresented, setIsPresented] = useState(false)
65
66 return <Section
67 header={
68 <Text>Showing a full screen cover</Text>
69 }
70 >
71 <Button
72 title={"Present"}
73 action={() => setIsPresented(true)}
74 fullScreenCover={{
75 isPresented: isPresented,
76 onChanged: setIsPresented,
77 content: <VStack
78 onTapGesture={() => setIsPresented(false)}
79 foregroundStyle={"white"}
80 frame={{
81 maxHeight: "infinity",
82 maxWidth: "infinity",
83 }}
84 background={"blue"}
85 ignoresSafeArea
86 >
87 <Text>A full-screen modal view.</Text>
88 <Text>Tap to dismiss</Text>
89 </VStack>
90 }}
91 />
92 </Section>
93}
94
95function ConfiguringSheetHeightExample() {
96 const [isPresented, setIsPresented] = useState(false)
97
98 return <Section
99 header={
100 <Text>Configuring sheet height</Text>
101 }
102 >
103 <Button
104 title={"Present"}
105 action={() => setIsPresented(true)}
106 sheet={{
107 isPresented: isPresented,
108 onChanged: setIsPresented,
109 content: <VStack
110 presentationDragIndicator={"visible"}
111 presentationDetents={[
112 200, // fixed height
113 "medium",
114 "large"
115 ]}
116 >
117 <Text
118 font={"title"}
119 padding={50}
120 >
121 Drag the indicator to resize the sheet height.
122 </Text>
123 <Button
124 title={"Dismiss"}
125 action={() => setIsPresented(false)}
126 />
127 </VStack>
128 }}
129 />
130 </Section>
131}
132
133function PresentAlertExample() {
134 const [isPresented, setIsPresented] = useState(false)
135
136 return <Section
137 header={
138 <Text>Present a alert view</Text>
139 }
140 >
141 <Button
142 title={"Present"}
143 action={() => setIsPresented(true)}
144 alert={{
145 isPresented: isPresented,
146 onChanged: setIsPresented,
147 actions: <Button
148 title={"OK"}
149 action={() => { }}
150 />,
151 title: "Alert",
152 message: <Text>Everything is OK</Text>
153 }}
154 />
155 </Section>
156}
157
158function PresentConfirmationDialogExample() {
159 const [isPresented, setIsPresented] = useState(false)
160
161 return <Section
162 header={
163 <Text>Present a confirmation dialog</Text>
164 }
165 >
166 <Button
167 title={"Present"}
168 action={() => {
169 setIsPresented(true)
170 }}
171 confirmationDialog={{
172 isPresented,
173 onChanged: setIsPresented,
174 title: "Do you want to delete this image?",
175 actions: <Button
176 title={"Delete"}
177 role={"destructive"}
178 action={() => {
179 Dialog.alert({
180 message: "The image has been deleted."
181 })
182 }}
183 />
184 }}
185 />
186 </Section>
187}
188
189function Example() {
190 return <NavigationStack>
191 <List
192 navigationTitle={"Modal presentations"}
193 navigationBarTitleDisplayMode={"inline"}
194 >
195 <SheetExample />
196 <ConfiguringSheetHeightExample />
197 <FullScreenCoverExample />
198 <PopoverExample />
199 <PresentAlertExample />
200 <PresentConfirmationDialogExample />
201 </List>
202 </NavigationStack>
203}
204
205async function run() {
206 await Navigation.present({
207 element: <Example />
208 })
209
210 Script.exit()
211}
212
213run()
