1import { useNavigation } from "@react-navigation/native";
2import type { ReactNode } from "react";
3import { View } from "react-native";
4
5import { AppBar } from "../../components/ui/AppBar";
6import type { AppBarSearch } from "../../components/ui/AppBar.types";
7import { useSearchToolbarInset, useUnadjustedBottomInset } from "../../components/ui/useBarInset";
8
9/** A searchable picker over a pull request list or a pull request. */
10export function PullRequestSearchSheet(props: {
11 readonly title: string;
12 readonly placeholder: string;
13 readonly closeAccessibilityLabel: string;
14 readonly clearAccessibilityLabel: string;
15 readonly query: string;
16 readonly onQueryChange: (query: string) => void;
17 /** Renders the list, given the bottom padding that keeps its end clear of the search bar. */
18 readonly children: (list: { readonly paddingBottom: number }) => ReactNode;
19}) {
20 const navigation = useNavigation();
21 const search: AppBarSearch = {
22 mode: "inline",
23 compactToolbar: true,
24 value: props.query,
25 onChangeText: props.onQueryChange,
26 placeholder: props.placeholder,
27 clearAccessibilityLabel: props.clearAccessibilityLabel,
28 };
29 // The compact search toolbar floats over the end of the list.
30 const searchToolbarInset = useSearchToolbarInset(search);
31 const bottomInset = useUnadjustedBottomInset();
32 return (
33 <View className="flex-1 bg-sheet" collapsable={false}>
34 <AppBar
35 title={props.title}
36 onClose={() => navigation.goBack()}
37 closeAccessibilityLabel={props.closeAccessibilityLabel}
38 hideBottomBorder
39 search={search}
40 />
41 {props.children({
42 // Android's bottom inset also covers the floating workspace tabs while Settings is open.
43 paddingBottom: bottomInset + searchToolbarInset + 16,
44 })}
45 </View>
46 );
47}