about summary refs log tree commit diff
path: root/src/view/screens/CustomFeed.tsx
diff options
context:
space:
mode:
authorAnsh <anshnanda10@gmail.com>2023-07-28 14:00:37 -0700
committerGitHub <noreply@github.com>2023-07-28 16:00:37 -0500
commit3b8b5622688807f6d04c52cbd4d6977b203b75b3 (patch)
treed14739a4cf680efead0f7dc63428f9ad88d7d5ef /src/view/screens/CustomFeed.tsx
parenteec300d77241925e6b42e5e7e51894f2cba50e18 (diff)
downloadvoidsky-3b8b5622688807f6d04c52cbd4d6977b203b75b3.tar.zst
[APP-737] Accessible native dropdown menu (#988)
* fix comments

* add zeego package

* get basic native dropdown working

* add separator and icon components

* refined native dropdown component

* add android build properties to app.json

* move `PostDropdownBtn` to its own component

* fix selectors issue

* move `PostDropdownBtn` to its own component

* fix hitslop

* fix post dropdown hitslop

* fix android dropdown icons

* move `UserAvatar.tsx` to native dropdown

* use native dropdown in `ProfileHeader.tsx`

* use native dropdown in `PostThreadItem.tsx`

* use native dropdown in `UserBanner.tsx`

* use native dropdown in `CustomFeed.tsx`

* replace `testId` with `testID` (which is what is used everywhere)

* move `Settings.tsx` to use native dropdown

* create jest mocks for zeego

* create jest mock for `zeego/dropdown-menu`

* web styles for native dropdown

* remove example native dropdown

* adjust web styles

* fix propagation

* fix pressable in `Settings.tsx`

* animate dropdown on web

* add keyboard nav and hover styles

* add hitslop to constants

* add comments to NativeDropdown component

* temporarily removed android icons

* add testID to PostDropdownBtn

* add testID back to all NativeDropdown button implementations

* add postDropdownBtn testID

* add testID to dropdown items

* remove testID from dropdown menu item

* refactor home-screen tests for native dropdown

* refactor profile-screen tests for native dropdown

* refactor thread-muting tests for native dropdown

* refactor thread-screen tests for native dropdown

* fix dropdown color for post dropdown button

* remove icons from android dropdown menu

* fix `create-account.test.ts`

* fix `invite-codes.test.ts`
Diffstat (limited to 'src/view/screens/CustomFeed.tsx')
-rw-r--r--src/view/screens/CustomFeed.tsx27
1 files changed, 17 insertions, 10 deletions
diff --git a/src/view/screens/CustomFeed.tsx b/src/view/screens/CustomFeed.tsx
index 61550c683..d5ecff042 100644
--- a/src/view/screens/CustomFeed.tsx
+++ b/src/view/screens/CustomFeed.tsx
@@ -29,10 +29,10 @@ import {Haptics} from 'lib/haptics'
 import {ComposeIcon2} from 'lib/icons'
 import {FAB} from '../com/util/fab/FAB'
 import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
-import {DropdownButton, DropdownItem} from 'view/com/util/forms/DropdownButton'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {EmptyState} from 'view/com/util/EmptyState'
 import {useAnalytics} from 'lib/analytics/analytics'
+import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown'
 import {makeProfileLink} from 'lib/routes/links'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
@@ -121,11 +121,25 @@ export const CustomFeedScreen = withAuthRequired(
           testID: 'feedHeaderDropdownRemoveBtn',
           label: 'Remove from my feeds',
           onPress: onToggleSaved,
+          icon: {
+            ios: {
+              name: 'trash',
+            },
+            android: 'ic_delete',
+            web: 'trash',
+          },
         },
         {
           testID: 'feedHeaderDropdownShareBtn',
           label: 'Share link',
           onPress: onPressShare,
+          icon: {
+            ios: {
+              name: 'square.and.arrow.up',
+            },
+            android: 'ic_menu_share',
+            web: 'share',
+          },
         },
       ]
       return items
@@ -163,17 +177,10 @@ export const CustomFeedScreen = withAuthRequired(
             </Button>
           ) : undefined}
           {currentFeed?.isSaved ? (
-            <DropdownButton
+            <NativeDropdown
               testID="feedHeaderDropdownBtn"
-              type="default-light"
               items={dropdownItems}
-              menuWidth={250}>
-              <FontAwesomeIcon
-                icon="ellipsis"
-                color={pal.colors.textLight}
-                size={18}
-              />
-            </DropdownButton>
+            />
           ) : (
             <Button
               type="default-light"