1import { List, Navigation, NavigationStack, Script, Text, useMemo, useState } from "scripting"
2
3function Example() {
4 const [searchText, setSearchText] = useState("")
5 const languages = useMemo(() => [
6 "Java",
7 "Objective-C",
8 "Swift",
9 "Python",
10 "JavaScript",
11 "C++",
12 "Ruby",
13 "Lua"
14 ], [])
15
16 const filteredLanguages = useMemo(() => {
17 if (searchText.length === 0) {
18 return languages
19 }
20
21 const text = searchText.toLowerCase()
22
23 return languages.filter(language =>
24 language.toLowerCase().includes(text)
25 )
26 }, [searchText, languages])
27
28 return <NavigationStack>
29 <List
30 navigationTitle={"Searchable List"}
31 navigationBarTitleDisplayMode={"inline"}
32 searchable={{
33 value: searchText,
34 onChanged: setSearchText,
35 }}
36 >
37 {filteredLanguages.map(language =>
38 <Text>{language}</Text>
39 )}
40 </List>
41 </NavigationStack>
42}
43
44async function run() {
45 await Navigation.present({
46 element: <Example />
47 })
48
49 Script.exit()
50}
51
52run()
