1import { HStack, Label, List, Navigation, NavigationSplitView, Script, Section, Text, useState, VStack } from "scripting"
2
3type Department = {
4 name: string
5 staff: Person[]
6}
7
8type Company = {
9 name: string
10 departments: Department[]
11}
12
13type Person = {
14 name: string
15 phoneNumber: string
16}
17
18const companyA: Company = {
19 name: "Company A",
20 departments: [
21 {
22 name: "Sales",
23 staff: [
24 {
25 name: "Juan Chavez",
26 phoneNumber: "(408) 555-4301",
27 },
28 {
29 name: "Mei Chen",
30 phoneNumber: "(919) 555-2481",
31 }
32 ]
33 },
34 {
35 name: "Engineering",
36 staff: [
37 {
38 name: "Bill James",
39 phoneNumber: "(408) 555-4450"
40 },
41 {
42 name: "Anne Johnson",
43 phoneNumber: "(417) 555-9311"
44 }
45 ]
46 }
47 ]
48}
49
50const companies: Company[] = [
51 {
52 name: "Company A",
53 departments: [
54 {
55 name: "Sales",
56 staff: [
57 {
58 name: "Juan Chavez",
59 phoneNumber: "(408) 555-4301",
60 },
61 {
62 name: "Mei Chen",
63 phoneNumber: "(919) 555-2481",
64 }
65 ]
66 },
67 {
68 name: "Engineering",
69 staff: [
70 {
71 name: "Bill James",
72 phoneNumber: "(408) 555-4450"
73 },
74 {
75 name: "Anne Johnson",
76 phoneNumber: "(417) 555-9311"
77 }
78 ]
79 }
80 ]
81 },
82 {
83 name: "Company B",
84 departments: [
85 {
86 name: "Human resources",
87 staff: [
88 {
89 name: "Lily",
90 phoneNumber: "(111) 555-5552"
91 },
92 {
93 name: "Ross",
94 phoneNumber: "(222) 666-8888"
95 }
96 ]
97 },
98 {
99 name: "Sales",
100 staff: [
101 {
102 name: "John",
103 phoneNumber: "(1) 888-4444"
104 }
105 ]
106 }
107 ]
108 }
109]
110
111function PersonRowView({
112 person
113}: {
114 person: Person
115}) {
116 return <VStack
117 alignment={"leading"}
118 spacing={3}
119 >
120 <Text
121 foregroundStyle={"label"}
122 font={"headline"}
123 >{person.name}</Text>
124 <HStack
125 spacing={3}
126 foregroundStyle={"secondaryLabel"}
127 font={"subheadline"}
128 >
129 <Label
130 title={person.phoneNumber}
131 systemImage={"phone"}
132 />
133 </HStack>
134 </VStack>
135}
136
137function PersonDetailView({
138 person
139}: {
140 person: Person
141}) {
142
143 return <VStack>
144 <Text
145 font={"title"}
146 foregroundStyle={"label"}
147 >{person.name}</Text>
148 <HStack
149 foregroundStyle={"secondaryLabel"}
150 >
151 <Label
152 title={person.phoneNumber}
153 systemImage={"phone"}
154 />
155 </HStack>
156 </VStack>
157}
158
159function Example() {
160 const [selectedCompany, setSelectedCompany] = useState<Company>()
161 const [selectedPerson, setSelectedPerson] = useState<Person>()
162
163 return <NavigationSplitView
164 sidebar={
165 <List>
166 {companies.map(company =>
167 <Text
168 onTapGesture={() => {
169 setSelectedCompany(company)
170 }}
171 >{company.name}</Text>
172 )}
173 </List>
174 }
175 content={
176 selectedCompany != null
177 ? <List>
178 {selectedCompany.departments.map(department =>
179 <Section
180 header={<Text>{department.name}</Text>}
181 >
182 {department.staff.map(person =>
183 <PersonRowView
184 person={person}
185 contentShape={"rect"}
186 onTapGesture={() => {
187 setSelectedPerson(person)
188 }}
189 />
190 )}
191 </Section>
192 )}
193 </List>
194 : <Text>Select a company</Text>
195 }
196 >
197 {selectedPerson != null
198 ? <PersonDetailView
199 person={selectedPerson}
200 /> :
201 <Text>Select a person</Text>}
202 </NavigationSplitView>
203}
204
205async function run() {
206 await Navigation.present({
207 element: <Example />
208 })
209
210 Script.exit()
211}
212
213run()
