acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

start tweaking native dropdown

Browse Source
This commit is contained in:
Hailey
2024-08-19 08:59:34 -07:00
parent 5e7ed41823
commit 13f95dc3c5
3 changed files with 108 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -74,6 +74,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dropdown-menu": "^2.0.6",
"@react-native-async-storage/async-storage": "1.23.1", "@react-native-async-storage/async-storage": "1.23.1",
"@react-native-masked-view/masked-view": "0.3.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-native-picker/picker": "2.7.7",
"@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/bottom-tabs": "^6.6.1",
"@react-navigation/drawer": "^6.7.2", "@react-navigation/drawer": "^6.7.2",
src/view/com/util/forms/NativeDropdown.tsx
+102 -68
View File
@@ -1,9 +1,15 @@
import React from 'react' 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 {IconProp} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import * as DropdownMenu from 'zeego/dropdown-menu' import {MenuAction, MenuView, NativeActionEvent} from '@react-native-menu/menu'
import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
import {HITSLOP_10} from 'lib/constants' import {HITSLOP_10} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
@@ -175,6 +181,33 @@ export function NativeDropdown({
const dropDownBackgroundColor = const dropDownBackgroundColor =
theme.colorScheme === 'dark' ? pal.btn : pal.viewLight 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 ( return (
<> <>
{isIOS && isOpen && ( {isIOS && isOpen && (
@@ -182,71 +215,72 @@ export function NativeDropdown({
<Backdrop /> <Backdrop />
</Portal> </Portal>
)} )}
<DropdownMenuRoot onOpenWillChange={setIsOpen}> <MenuView actions={actions} onPressAction={onPressAction} />
<DropdownMenuTrigger {/*<DropdownMenuRoot onOpenWillChange={setIsOpen}>*/}
action="press" {/* <DropdownMenuTrigger*/}
testID={testID} {/* action="press"*/}
accessibilityLabel={accessibilityLabel} {/* testID={testID}*/}
accessibilityHint={accessibilityHint}> {/* accessibilityLabel={accessibilityLabel}*/}
{children} {/* accessibilityHint={accessibilityHint}>*/}
</DropdownMenuTrigger> {/* {children}*/}
<DropdownMenuContent {/* </DropdownMenuTrigger>*/}
style={[styles.content, dropDownBackgroundColor]} {/* <DropdownMenuContent*/}
loop> {/* style={[styles.content, dropDownBackgroundColor]}*/}
{items.map((item, index) => { {/* loop>*/}
if (item.label === 'separator') { {/* {items.map((item, index) => {*/}
return ( {/* if (item.label === 'separator') {*/}
<DropdownMenuSeparator {/* return (*/}
key={getKey(item.label, index, item.testID)} {/* <DropdownMenuSeparator*/}
/> {/* key={getKey(item.label, index, item.testID)}*/}
) {/* />*/}
} {/* )*/}
if (index > 1 && items[index - 1].label === 'separator') { {/* }*/}
return ( {/* if (index > 1 && items[index - 1].label === 'separator') {*/}
<DropdownMenu.Group {/* return (*/}
key={getKey(item.label, index, item.testID)}> {/* <DropdownMenu.Group*/}
<DropdownMenuItem {/* key={getKey(item.label, index, item.testID)}>*/}
key={getKey(item.label, index, item.testID)} {/* <DropdownMenuItem*/}
onSelect={item.onPress}> {/* key={getKey(item.label, index, item.testID)}*/}
<DropdownMenuItemTitle>{item.label}</DropdownMenuItemTitle> {/* onSelect={item.onPress}>*/}
{item.icon && ( {/* <DropdownMenuItemTitle>{item.label}</DropdownMenuItemTitle>*/}
<DropdownMenuItemIcon {/* {item.icon && (*/}
ios={item.icon.ios} {/* <DropdownMenuItemIcon*/}
// 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 {/* 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} {/* <FontAwesomeIcon*/}
size={20} {/* icon={item.icon.web}*/}
style={[pal.text]} {/* size={20}*/}
/> {/* style={[pal.text]}*/}
</DropdownMenuItemIcon> {/* />*/}
)} {/* </DropdownMenuItemIcon>*/}
</DropdownMenuItem> {/* )}*/}
</DropdownMenu.Group> {/* </DropdownMenuItem>*/}
) {/* </DropdownMenu.Group>*/}
} {/* )*/}
return ( {/* }*/}
<DropdownMenuItem {/* return (*/}
key={getKey(item.label, index, item.testID)} {/* <DropdownMenuItem*/}
onSelect={item.onPress}> {/* key={getKey(item.label, index, item.testID)}*/}
<DropdownMenuItemTitle>{item.label}</DropdownMenuItemTitle> {/* onSelect={item.onPress}>*/}
{item.icon && ( {/* <DropdownMenuItemTitle>{item.label}</DropdownMenuItemTitle>*/}
<DropdownMenuItemIcon {/* {item.icon && (*/}
ios={item.icon.ios} {/* <DropdownMenuItemIcon*/}
// androidIconName={item.icon.android} {/* ios={item.icon.ios}*/}
> {/* // androidIconName={item.icon.android}*/}
<FontAwesomeIcon {/* >*/}
icon={item.icon.web} {/* <FontAwesomeIcon*/}
size={20} {/* icon={item.icon.web}*/}
style={[pal.text]} {/* size={20}*/}
/> {/* style={[pal.text]}*/}
</DropdownMenuItemIcon> {/* />*/}
)} {/* </DropdownMenuItemIcon>*/}
</DropdownMenuItem> {/* )}*/}
) {/* </DropdownMenuItem>*/}
})} {/* )*/}
</DropdownMenuContent> {/* })}*/}
</DropdownMenuRoot> {/* </DropdownMenuContent>*/}
{/*</DropdownMenuRoot>*/}
</> </>
) )
} }
yarn.lock
+5
View File
@@ -5619,6 +5619,11 @@
resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29" resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29"
integrity sha512-uVm8U6nwFIlUd1iDIB5cS+lDadApKR+l8k4k84d9hn+GN4lzAIJhUZ9syYX7c022MxNgAlbxoFLt0pqKoyaAGg== 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": "@react-native-picker/picker@2.7.7":
version "2.7.7" version "2.7.7"
resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.7.7.tgz#6e19c3a72a482be015f5194794e6c14efe8762e8" resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.7.7.tgz#6e19c3a72a482be015f5194794e6c14efe8762e8"