1import type { MenuAction } from "@react-native-menu/menu";
2import { Pressable } from "react-native";
3
4import { useAndroidControlSizing } from "../../components/ui/useAndroidControlSizing";
5import { SymbolView } from "../../components/ui/AppSymbol";
6import { Menu } from "../../components/ui/Menu";
7
8const ATTACHMENT_MENU_ACTIONS: MenuAction[] = [
9 { id: "photos", title: "Photo Library", image: "photo" },
10 { id: "files", title: "Choose Files", image: "folder" },
11];
12
13export function ComposerAttachmentButton(props: {
14 readonly disabled?: boolean;
15 readonly size?: "regular" | "large";
16 readonly supportsFiles: boolean;
17 readonly onPickMedia: () => Promise<void>;
18 readonly onPickFiles: () => Promise<void>;
19}) {
20 const { scale } = useAndroidControlSizing();
21 const button = (
22 <Pressable
23 accessibilityLabel="Add attachment"
24 accessibilityRole="button"
25 accessibilityState={{ disabled: props.disabled }}
26 className="size-[44px] shrink-0 items-center justify-center rounded-full active:opacity-70 disabled:opacity-50"
27 disabled={props.disabled}
28 onPress={props.supportsFiles ? undefined : () => void props.onPickMedia()}
29 >
30 <SymbolView
31 name="plus"
32 size={Math.round((props.size === "large" ? 26 : 20) * scale)}
33 weight="regular"
34 tintColorClassName="accent-icon"
35 type="monochrome"
36 />
37 </Pressable>
38 );
39
40 if (props.disabled || !props.supportsFiles) {
41 return button;
42 }
43
44 return (
45 <Menu
46 accessible
47 accessibilityLabel="Add attachment"
48 accessibilityRole="button"
49 actions={ATTACHMENT_MENU_ACTIONS}
50 onPressAction={({ nativeEvent }) => {
51 if (nativeEvent.event === "photos") {
52 void props.onPickMedia();
53 } else if (nativeEvent.event === "files") {
54 void props.onPickFiles();
55 }
56 }}
57 >
58 {button}
59 </Menu>
60 );
61}