Adopt DropdownMenu to make the context menu work on Android

ephemeraHQ · Jan 16, 2025 · 8e0cba6 · 8e0cba6
1 parent dc7bd07
commit 8e0cba6
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 106 deletions.
diff --git a/design-system/Icon/Icon.tsx b/design-system/Icon/Icon.tsx
@@ -15,6 +15,7 @@ export const iconRegistry: Record<IIconName, string> = {
   link: "link",
   paperplane: "paperplane",
   account_circle: "person.circle",
+  pencil: "pencil",
   "square.and.pencil": "square.and.pencil",
   qrcode: "qrcode",
   "message.circle.fill": "message.circle.fill",
@@ -55,6 +56,7 @@ export const iconRegistry: Record<IIconName, string> = {
   "arrowshape.turn.up.left": "arrowshape.turn.up.left",
   "arrowshape.turn.up.left.fill": "arrowshape.turn.up.left.fill",
   "person.crop.circle.badge.plus": "person.crop.circle.badge.plus",
+  "person.crop.circle.badge.xmark": "person.crop.circle.badge.xmark",
   tray: "tray",
   cloud: "cloud",
   "exclamationmark.triangle": "exclamationmark.triangle",
@@ -98,8 +100,8 @@ export function Icon(props: IIconProps) {
   const iconName = icon
     ? iconRegistry[icon]
     : picto
-      ? iconRegistry[picto]
-      : null;
+    ? iconRegistry[picto]
+    : null;
 
   if (!iconName) {
     logger.warn(

diff --git a/design-system/Icon/Icon.types.ts b/design-system/Icon/Icon.types.ts
@@ -12,6 +12,7 @@ export type IIconName =
   | "link"
   | "paperplane"
   | "account_circle"
+  | "pencil"
   | "square.and.pencil"
   | "qrcode"
   | "message.circle.fill"
@@ -52,6 +53,7 @@ export type IIconName =
   | "arrowshape.turn.up.left"
   | "arrowshape.turn.up.left.fill"
   | "person.crop.circle.badge.plus"
+  | "person.crop.circle.badge.xmark"
   | "tray"
   | "cloud"
   | "exclamationmark.triangle"

diff --git a/screens/Profile.tsx b/screens/Profile.tsx
@@ -21,14 +21,15 @@ import { useHeader } from "@/navigation/use-header";
 import { HeaderAction } from "@/design-system/Header/HeaderAction";
 import { HStack } from "@/design-system/HStack";
 import { navigate } from "@/utils/navigation";
-import { ContextMenuButton } from "react-native-ios-context-menu";
 import { Haptics } from "@/utils/haptics";
 import Clipboard from "@react-native-clipboard/clipboard";
 import { StackActions } from "@react-navigation/native";
 import { useDisconnectActionSheet } from "@/hooks/useDisconnectActionSheet";
 import { getConfig } from "@/config";
 import { consentToAddressesOnProtocolByAccount } from "@utils/xmtpRN/contacts";
 import { showActionSheetWithOptions } from "@components/StateHandlers/ActionSheetStateHandler";
+import { DropdownMenu } from "@/design-system/dropdown-menu/dropdown-menu";
+import { iconRegistry } from "@/design-system/Icon/Icon";
 
 export default function ProfileScreen() {
   const [editMode, setEditMode] = useState(false);
@@ -63,6 +64,65 @@ export default function ProfileScreen() {
     (s) => s.peersStatus[peerAddress.toLowerCase()] === "blocked"
   );
 
+  const handleContextMenuAction = useCallback(
+    (actionId: string) => {
+      Haptics.selectionAsync();
+      if (actionId === "share") {
+        if (isMyProfile) {
+          navigate("ShareProfile");
+        } else {
+          const profileUrl = `https://${
+            getConfig().websiteDomain
+          }/dm/${userName}`;
+          Clipboard.setString(profileUrl);
+          Share.share({
+            message: profileUrl,
+          });
+        }
+      } else if (actionId === "edit") {
+        Alert.alert("Available soon");
+        // TODO - Profile Edit
+        // handleEditProfile();
+      } else if (actionId === "block") {
+        showActionSheetWithOptions(
+          {
+            options: [
+              isBlockedPeer ? translate("unblock") : translate("block"),
+              translate("cancel"),
+            ],
+            cancelButtonIndex: 1,
+            destructiveButtonIndex: isBlockedPeer ? undefined : 0,
+            title: isBlockedPeer
+              ? translate("if_you_unblock_contact")
+              : translate("if_you_block_contact"),
+          },
+          (selectedIndex?: number) => {
+            if (selectedIndex === 0 && peerAddress) {
+              const newStatus = isBlockedPeer ? "consented" : "blocked";
+              const consentOnProtocol = isBlockedPeer ? "allow" : "deny";
+              consentToAddressesOnProtocolByAccount({
+                account: userAddress,
+                addresses: [peerAddress],
+                consent: consentOnProtocol,
+              });
+              setPeersStatus({ [peerAddress]: newStatus });
+              router.goBack();
+            }
+          }
+        );
+      }
+    },
+    [
+      isMyProfile,
+      userName,
+      isBlockedPeer,
+      peerAddress,
+      userAddress,
+      setPeersStatus,
+      router,
+    ]
+  );
+
   // Header configuration
   useHeader(
     {
@@ -109,114 +169,46 @@ export default function ProfileScreen() {
                   onPress={handleChatPress}
                 />
               )}
-              <ContextMenuButton
+              <DropdownMenu
                 style={themed($contextMenu)}
-                isMenuPrimaryAction
-                menuConfig={{
-                  menuTitle: "",
-                  menuItems: [
-                    ...(isMyProfile
-                      ? [
-                          {
-                            actionKey: "edit",
-                            actionTitle: translate("profile.edit"),
-                            icon: {
-                              iconType: "SYSTEM" as const,
-                              iconValue: "pencil",
-                            },
-                          },
-                          {
-                            actionKey: "share",
-                            actionTitle: translate("share"),
-                            icon: {
-                              iconType: "SYSTEM" as const,
-                              iconValue: "square.and.arrow.up",
-                            },
-                          },
-                        ]
-                      : [
-                          {
-                            actionKey: "share",
-                            actionTitle: translate("share"),
-                            icon: {
-                              iconType: "SYSTEM" as const,
-                              iconValue: "square.and.arrow.up",
-                            },
-                          },
-                          {
-                            actionKey: "block",
-                            actionTitle: isBlockedPeer
-                              ? translate("unblock")
-                              : translate("block"),
-                            icon: {
-                              iconType: "SYSTEM" as const,
-                              iconValue: isBlockedPeer
-                                ? "person.crop.circle.badge.plus"
-                                : "person.crop.circle.badge.xmark",
-                            },
-                            menuAttributes: isBlockedPeer
-                              ? undefined
-                              : ["destructive" as const],
-                          },
-                        ]),
-                  ],
-                }}
-                onPressMenuItem={({ nativeEvent }) => {
-                  Haptics.selectionAsync();
-                  if (nativeEvent.actionKey === "share") {
-                    if (isMyProfile) {
-                      navigate("ShareProfile");
-                    } else {
-                      const profileUrl = `https://${
-                        getConfig().websiteDomain
-                      }/dm/${userName}`;
-                      Clipboard.setString(profileUrl);
-                      Share.share({
-                        message: profileUrl,
-                      });
-                    }
-                  } else if (nativeEvent.actionKey === "edit") {
-                    Alert.alert("Available soon");
-                    // TODO - Profile Edit
-                    // handleEditProfile();
-                  } else if (nativeEvent.actionKey === "block") {
-                    showActionSheetWithOptions(
-                      {
-                        options: [
-                          isBlockedPeer
+                onPress={handleContextMenuAction}
+                actions={[
+                  ...(isMyProfile
+                    ? [
+                        {
+                          id: "edit",
+                          title: translate("profile.edit"),
+                          image: iconRegistry["pencil"],
+                        },
+                        {
+                          id: "share",
+                          title: translate("share"),
+                          image: iconRegistry["square.and.arrow.up"],
+                        },
+                      ]
+                    : [
+                        {
+                          id: "share",
+                          title: translate("share"),
+                          image: iconRegistry["square.and.arrow.up"],
+                        },
+                        {
+                          id: "block",
+                          title: isBlockedPeer
                             ? translate("unblock")
                             : translate("block"),
-                          translate("cancel"),
-                        ],
-                        cancelButtonIndex: 1,
-                        destructiveButtonIndex: isBlockedPeer ? undefined : 0,
-                        title: isBlockedPeer
-                          ? translate("if_you_unblock_contact")
-                          : translate("if_you_block_contact"),
-                      },
-                      (selectedIndex?: number) => {
-                        if (selectedIndex === 0 && peerAddress) {
-                          const newStatus = isBlockedPeer
-                            ? "consented"
-                            : "blocked";
-                          const consentOnProtocol = isBlockedPeer
-                            ? "allow"
-                            : "deny";
-                          consentToAddressesOnProtocolByAccount({
-                            account: userAddress,
-                            addresses: [peerAddress],
-                            consent: consentOnProtocol,
-                          });
-                          setPeersStatus({ [peerAddress]: newStatus });
-                          router.goBack();
-                        }
-                      }
-                    );
-                  }
-                }}
+                          image: isBlockedPeer
+                            ? iconRegistry["person.crop.circle.badge.plus"]
+                            : iconRegistry["person.crop.circle.badge.xmark"],
+                          color: !isBlockedPeer
+                            ? theme.colors.global.caution
+                            : undefined,
+                        },
+                      ]),
+                ]}
               >
                 <HeaderAction icon="more_vert" />
-              </ContextMenuButton>
+              </DropdownMenu>
             </>
           )}
         </HStack>
@@ -230,6 +222,9 @@ export default function ProfileScreen() {
       setPeersStatus,
       handleChatPress,
       editMode,
+      handleContextMenuAction,
+      isMyProfile,
+      isBlockedPeer,
     ]
   );