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