zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[APP-737] Accessible native dropdown menu (#988)

Browse source 
* 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`
This commit is contained in:
Ansh 2023-07-28 14:00:37 -07:00 • committed by GitHub
parent eec300d772
commit 3b8b562268
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 1093 additions and 342 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/view/com/util/UserAvatar.tsx
View file

@ -2,7 +2,6 @@ import React, {useMemo} from 'react'
import {StyleSheet, View} from 'react-native'
import Svg, {Circle, Rect, Path} from 'react-native-svg'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {IconProp} from '@fortawesome/fontawesome-svg-core'
import {HighPriorityImage} from 'view/com/util/images/Image'
import {openCamera, openCropper, openPicker} from '../../../lib/media/picker'
import {
@ -11,12 +10,12 @@ import {
} from 'lib/hooks/usePermissions'
import {useStores} from 'state/index'
import {colors} from 'lib/styles'
import {DropdownButton} from './forms/DropdownButton'
import {usePalette} from 'lib/hooks/usePalette'
import {isWeb, isAndroid} from 'platform/detection'
import {Image as RNImage} from 'react-native-image-crop-picker'
import {AvatarModeration} from 'lib/labeling/types'
import {UserPreviewLink} from './UserPreviewLink'
import {DropdownItem, NativeDropdown} from './forms/NativeDropdown'
type Type = 'user' | 'algo' | 'list'
@ -130,59 +129,81 @@ export function UserAvatar({
}, [type, size])
const dropdownItems = useMemo(
() => [
!isWeb && {
testID: 'changeAvatarCameraBtn',
label: 'Camera',
icon: 'camera' as IconProp,
onPress: async () => {
if (!(await requestCameraAccessIfNeeded())) {
return
}
() =>
[
!isWeb && {
testID: 'changeAvatarCameraBtn',
label: 'Camera',
icon: {
ios: {
name: 'camera',
},
android: 'ic_menu_camera',
web: 'camera',
},
onPress: async () => {
if (!(await requestCameraAccessIfNeeded())) {
return
}
onSelectNewAvatar?.(
await openCamera(store, {
width: 1000,
height: 1000,
onSelectNewAvatar?.(
await openCamera(store, {
width: 1000,
height: 1000,
cropperCircleOverlay: true,
}),
)
},
},
{
testID: 'changeAvatarLibraryBtn',
label: 'Library',
icon: {
ios: {
name: 'photo.on.rectangle.angled',
},
android: 'ic_menu_gallery',
web: 'gallery',
},
onPress: async () => {
if (!(await requestPhotoAccessIfNeeded())) {
return
}
const items = await openPicker({
aspect: [1, 1],
})
const item = items[0]
const croppedImage = await openCropper(store, {
mediaType: 'photo',
cropperCircleOverlay: true,
}),
)
},
},
{
testID: 'changeAvatarLibraryBtn',
label: 'Library',
icon: 'image' as IconProp,
onPress: async () => {
if (!(await requestPhotoAccessIfNeeded())) {
return
}
height: item.height,
width: item.width,
path: item.path,
})
const items = await openPicker({
aspect: [1, 1],
})
const item = items[0]
const croppedImage = await openCropper(store, {
mediaType: 'photo',
cropperCircleOverlay: true,
height: item.height,
width: item.width,
path: item.path,
})
onSelectNewAvatar?.(croppedImage)
onSelectNewAvatar?.(croppedImage)
},
},
},
!!avatar && {
testID: 'changeAvatarRemoveBtn',
label: 'Remove',
icon: ['far', 'trash-can'] as IconProp,
onPress: async () => {
onSelectNewAvatar?.(null)
!!avatar && {
label: 'separator',
},
},
],
!!avatar && {
testID: 'changeAvatarRemoveBtn',
label: 'Remove',
icon: {
ios: {
name: 'trash',
},
android: 'ic_delete',
web: 'trash',
},
onPress: async () => {
onSelectNewAvatar?.(null)
},
},
].filter(Boolean) as DropdownItem[],
[
avatar,
onSelectNewAvatar,
@ -209,14 +230,7 @@ export function UserAvatar({
// onSelectNewAvatar is only passed as prop on the EditProfile component
return onSelectNewAvatar ? (
<DropdownButton
testID="changeAvatarBtn"
type="bare"
items={dropdownItems}
openToRight
rightOffset={-10}
bottomOffset={-10}
menuWidth={170}>
<NativeDropdown testID="changeAvatarBtn" items={dropdownItems}>
{avatar ? (
<HighPriorityImage
testID="userAvatarImage"
@ -234,7 +248,7 @@ export function UserAvatar({
color={pal.text.color as string}
/>
</View>
</DropdownButton>
</NativeDropdown>
) : avatar &&
!((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
<View style={{width: size, height: size}}>