start tweaking native dropdown
This commit is contained in:
Hailey
@@ -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",
|
||||
|
||||
@@ -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>*/}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user