1import { View } from "react-native";
2
3import { AppBar } from "./AppBar";
4import { NativeStackScreenOptions } from "../../native/StackHeader";
5import { Button } from "./Button";
6import { IconButton } from "./IconButton";
7import type { SheetCloseButtonProps, SheetHeaderProps } from "./SheetHeader.types";
8
9export function SheetCloseButton(props: SheetCloseButtonProps) {
10 return (
11 <IconButton
12 icon="xmark"
13 accessibilityLabel={props.accessibilityLabel ?? (props.onCancel ? "Cancel" : "Close")}
14 disabled={props.disabled}
15 tintColorClassName="accent-header-foreground"
16 onPress={props.onCancel ?? props.onClose}
17 />
18 );
19}
20
21export function SheetHeader(props: SheetHeaderProps) {
22 const confirmation = props.confirm;
23 const trailing =
24 props.trailing || confirmation ? (
25 <View className="flex-row items-center gap-2">
26 {props.trailing}
27 {confirmation ? (
28 <Button
29 label={confirmation.label}
30 tone="text"
31 loading={confirmation.loading}
32 disabled={confirmation.disabled}
33 onPress={confirmation.onPress}
34 />
35 ) : null}
36 </View>
37 ) : undefined;
38
39 return (
40 <>
41 {props.dismissDisabled === undefined ? null : (
42 // A sheet that can't be closed with its button can't be swiped away either.
43 <NativeStackScreenOptions options={{ gestureEnabled: !props.dismissDisabled }} />
44 )}
45 <AppBar
46 embedded
47 sheet={props.presentation === "inline"}
48 title={props.title}
49 subtitle={props.subtitle}
50 actions={props.actions}
51 menus={props.menus}
52 leading={
53 <SheetCloseButton
54 {...(props.onCancel ? { onCancel: props.onCancel } : { onClose: props.onClose })}
55 accessibilityLabel={props.accessibilityLabel}
56 disabled={props.dismissDisabled}
57 />
58 }
59 trailing={trailing}
60 hideBottomBorder
61 />
62 </>
63 );
64}