1import { Button, ControlGroup, ControlGroupStyle, Label, List, Navigation, NavigationStack, Picker, Script, Text, useMemo, useState } from "scripting"
2
3function Example() {
4 const dismiss = Navigation.useDismiss()
5 const [style, setStyle] = useState<ControlGroupStyle>("palette")
6 const styles = useMemo<ControlGroupStyle[]>(() => [
7 'automatic',
8 'compactMenu',
9 'menu',
10 'navigation',
11 'palette'
12 ], [])
13
14 return <NavigationStack>
15 <List
16 navigationTitle={"ControlGroup"}
17 navigationBarTitleDisplayMode={"inline"}
18 toolbar={{
19 cancellationAction: <Button
20 title={"Done"}
21 action={dismiss}
22 />,
23 confirmationAction: [
24 <ControlGroup
25 label={
26 <Label
27 title={"Plus"}
28 systemImage={"plus"}
29 />
30 }
31 controlGroupStyle={style}
32 >
33 <Button
34 title={"Edit"}
35 systemImage={"pencil"}
36 action={() => { }}
37 />
38 <Button
39 title={"Delete"}
40 systemImage={"trash"}
41 role={"destructive"}
42 action={() => { }}
43 />
44 </ControlGroup>
45 ]
46 }}
47 >
48 <Picker
49 title={"Control Group Style"}
50 value={style}
51 onChanged={setStyle as any}
52 >
53 {styles.map(style =>
54 <Text tag={style}>{style}</Text>
55 )}
56 </Picker>
57 </List>
58 </NavigationStack>
59}
60
61async function run() {
62 await Navigation.present({
63 element: <Example />
64 })
65
66 Script.exit()
67}
68
69run()
