From 13f95dc3c5aa1d0f79d0d3ed953b586eefc714f5 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 19 Aug 2024 08:59:34 -0700
Subject: [PATCH] start tweaking native dropdown

---
 package.json                               |   1 +
 src/view/com/util/forms/NativeDropdown.tsx | 170 ++++++++++++---------
 yarn.lock                                  |   5 +
 3 files changed, 108 insertions(+), 68 deletions(-)

diff --git a/package.json b/package.json
index 8b4da4ea43..cb61dd22be 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-masked-view/masked-view": "0.3.1",
+    "@react-native-menu/menu": "^1.1.2",
     "@react-native-picker/picker": "2.7.7",
     "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/drawer": "^6.7.2",
diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx
index c8e5fb2daf..d4401d3385 100644
--- a/src/view/com/util/forms/NativeDropdown.tsx
+++ b/src/view/com/util/forms/NativeDropdown.tsx
@@ -1,9 +1,15 @@
 import React from 'react'
-import {Platform, Pressable, StyleSheet, View, ViewStyle} from 'react-native'
+import {
+  NativeSyntheticEvent,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import * as DropdownMenu from 'zeego/dropdown-menu'
-import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
+import {MenuAction, MenuView, NativeActionEvent} from '@react-native-menu/menu'
 
 import {HITSLOP_10} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -175,6 +181,33 @@ export function NativeDropdown({
   const dropDownBackgroundColor =
     theme.colorScheme === 'dark' ? pal.btn : pal.viewLight
 
+  const actions = React.useMemo(() => {
+    const _actions: MenuAction[] = []
+    let subGroup: MenuAction[] = []
+    for (const item of items) {
+      if (item.label === 'separator') {
+        if (subGroup) {
+          _actions.push({
+            title: 'Subgroup',
+            subactions: subGroup,
+            displayInline: true,
+          })
+        }
+        subGroup = []
+      } else {
+        subGroup.push({
+          title: item.label,
+        })
+      }
+    }
+    return _actions
+  }, [items])
+
+  const onPressAction = (e: NativeActionEvent) => {
+    const item = items.find(item => item.label === e.nativeEvent.event)
+    item?.onPress?.()
+  }
+
   return (
     <>
       {isIOS && isOpen && (
@@ -182,71 +215,72 @@ export function NativeDropdown({
           <Backdrop />
         </Portal>
       )}
-      <DropdownMenuRoot onOpenWillChange={setIsOpen}>
-        <DropdownMenuTrigger
-          action="press"
-          testID={testID}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}>
-          {children}
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          style={[styles.content, dropDownBackgroundColor]}
-          loop>
-          {items.map((item, index) => {
-            if (item.label === 'separator') {
-              return (
-                <DropdownMenuSeparator
-                  key={getKey(item.label, index, item.testID)}
-                />
-              )
-            }
-            if (index > 1 && items[index - 1].label === 'separator') {
-              return (
-                <DropdownMenu.Group
-                  key={getKey(item.label, index, item.testID)}>
-                  <DropdownMenuItem
-                    key={getKey(item.label, index, item.testID)}
-                    onSelect={item.onPress}>
-                    <DropdownMenuItemTitle>{item.label}</DropdownMenuItemTitle>
-                    {item.icon && (
-                      <DropdownMenuItemIcon
-                        ios={item.icon.ios}
-                        // androidIconName={item.icon.android} TODO: Add custom android icon support, because these ones are based on https://developer.android.com/reference/android/R.drawable.html and they are ugly
-                      >
-                        <FontAwesomeIcon
-                          icon={item.icon.web}
-                          size={20}
-                          style={[pal.text]}
-                        />
-                      </DropdownMenuItemIcon>
-                    )}
-                  </DropdownMenuItem>
-                </DropdownMenu.Group>
-              )
-            }
-            return (
-              <DropdownMenuItem
-                key={getKey(item.label, index, item.testID)}
-                onSelect={item.onPress}>
-                <DropdownMenuItemTitle>{item.label}</DropdownMenuItemTitle>
-                {item.icon && (
-                  <DropdownMenuItemIcon
-                    ios={item.icon.ios}
-                    // androidIconName={item.icon.android}
-                  >
-                    <FontAwesomeIcon
-                      icon={item.icon.web}
-                      size={20}
-                      style={[pal.text]}
-                    />
-                  </DropdownMenuItemIcon>
-                )}
-              </DropdownMenuItem>
-            )
-          })}
-        </DropdownMenuContent>
-      </DropdownMenuRoot>
+      <MenuView actions={actions} onPressAction={onPressAction} />
+      {/*<DropdownMenuRoot onOpenWillChange={setIsOpen}>*/}
+      {/*  <DropdownMenuTrigger*/}
+      {/*    action="press"*/}
+      {/*    testID={testID}*/}
+      {/*    accessibilityLabel={accessibilityLabel}*/}
+      {/*    accessibilityHint={accessibilityHint}>*/}
+      {/*    {children}*/}
+      {/*  </DropdownMenuTrigger>*/}
+      {/*  <DropdownMenuContent*/}
+      {/*    style={[styles.content, dropDownBackgroundColor]}*/}
+      {/*    loop>*/}
+      {/*    {items.map((item, index) => {*/}
+      {/*      if (item.label === 'separator') {*/}
+      {/*        return (*/}
+      {/*          <DropdownMenuSeparator*/}
+      {/*            key={getKey(item.label, index, item.testID)}*/}
+      {/*          />*/}
+      {/*        )*/}
+      {/*      }*/}
+      {/*      if (index > 1 && items[index - 1].label === 'separator') {*/}
+      {/*        return (*/}
+      {/*          <DropdownMenu.Group*/}
+      {/*            key={getKey(item.label, index, item.testID)}>*/}
+      {/*            <DropdownMenuItem*/}
+      {/*              key={getKey(item.label, index, item.testID)}*/}
+      {/*              onSelect={item.onPress}>*/}
+      {/*              <DropdownMenuItemTitle>{item.label}</DropdownMenuItemTitle>*/}
+      {/*              {item.icon && (*/}
+      {/*                <DropdownMenuItemIcon*/}
+      {/*                  ios={item.icon.ios}*/}
+      {/*                  // androidIconName={item.icon.android} TODO: Add custom android icon support, because these ones are based on https://developer.android.com/reference/android/R.drawable.html and they are ugly*/}
+      {/*                >*/}
+      {/*                  <FontAwesomeIcon*/}
+      {/*                    icon={item.icon.web}*/}
+      {/*                    size={20}*/}
+      {/*                    style={[pal.text]}*/}
+      {/*                  />*/}
+      {/*                </DropdownMenuItemIcon>*/}
+      {/*              )}*/}
+      {/*            </DropdownMenuItem>*/}
+      {/*          </DropdownMenu.Group>*/}
+      {/*        )*/}
+      {/*      }*/}
+      {/*      return (*/}
+      {/*        <DropdownMenuItem*/}
+      {/*          key={getKey(item.label, index, item.testID)}*/}
+      {/*          onSelect={item.onPress}>*/}
+      {/*          <DropdownMenuItemTitle>{item.label}</DropdownMenuItemTitle>*/}
+      {/*          {item.icon && (*/}
+      {/*            <DropdownMenuItemIcon*/}
+      {/*              ios={item.icon.ios}*/}
+      {/*              // androidIconName={item.icon.android}*/}
+      {/*            >*/}
+      {/*              <FontAwesomeIcon*/}
+      {/*                icon={item.icon.web}*/}
+      {/*                size={20}*/}
+      {/*                style={[pal.text]}*/}
+      {/*              />*/}
+      {/*            </DropdownMenuItemIcon>*/}
+      {/*          )}*/}
+      {/*        </DropdownMenuItem>*/}
+      {/*      )*/}
+      {/*    })}*/}
+      {/*  </DropdownMenuContent>*/}
+      {/*</DropdownMenuRoot>*/}
     </>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 08ddd5648f..1a70dba863 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5619,6 +5619,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29"
   integrity sha512-uVm8U6nwFIlUd1iDIB5cS+lDadApKR+l8k4k84d9hn+GN4lzAIJhUZ9syYX7c022MxNgAlbxoFLt0pqKoyaAGg==
 
+"@react-native-menu/menu@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-1.1.2.tgz#972406d25296a0d01614dc36fae7884c2a08dafd"
+  integrity sha512-I7JWiwmIwRp+Tee2OJHPwzVKdLjzgUkdChHQ75oyEWo1YcVsXEjLVGmxWCTA6JExzS6SQW/ACmjuXLJFTvu9Pw==
+
 "@react-native-picker/picker@2.7.7":
   version "2.7.7"
   resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.7.7.tgz#6e19c3a72a482be015f5194794e6c14efe8762e8"