replace dropdown component

zio/stable
Samuel Newman 2023-09-27 11:32:42 +01:00
parent 42723dfaf6
commit 5d59ab2ac0
1 changed files with 54 additions and 37 deletions

View File

@ -1,17 +1,23 @@
import React, {useMemo} from 'react'
import React from 'react'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {RepostIcon} from 'lib/icons'
import {DropdownButton} from '../forms/DropdownButton'
import {colors} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {Text} from '../text/Text'
import {
NativeDropdown,
DropdownItem as NativeDropdownItem,
} from '../forms/NativeDropdown'
import {EventStopper} from '../EventStopper'
interface Props {
isReposted: boolean
repostCount?: number
big?: boolean
onRepost: () => void
onQuote: () => void
style?: StyleProp<ViewStyle>
}
export const RepostButton = ({
@ -30,25 +36,35 @@ export const RepostButton = ({
[theme],
)
const items = useMemo(
() => [
const dropdownItems: NativeDropdownItem[] = [
{
label: isReposted ? 'Undo repost' : 'Repost',
icon: 'retweet' as const,
testID: 'repostDropdownRepostBtn',
icon: {
ios: {name: 'repeat'},
android: '',
web: 'retweet',
},
onPress: onRepost,
},
{label: 'Quote post', icon: 'quote-left' as const, onPress: onQuote},
],
[isReposted, onRepost, onQuote],
)
{
label: 'Quote post',
testID: 'repostDropdownQuoteBtn',
icon: {
ios: {name: 'quote.bubble'},
android: '',
web: 'quote-left',
},
onPress: onQuote,
},
]
return (
<DropdownButton
type="bare"
items={items}
bottomOffset={4}
openToRight
rightOffset={-40}>
<EventStopper>
<NativeDropdown
items={dropdownItems}
accessibilityLabel="Repost or quote post"
accessibilityHint="">
<View
style={[
styles.control,
@ -57,7 +73,7 @@ export const RepostButton = ({
? styles.reposted
: defaultControlColor) as StyleProp<ViewStyle>,
]}>
<RepostIcon strokeWidth={2.4} size={big ? 24 : 20} />
<RepostIcon strokeWidth={2.2} size={big ? 24 : 20} />
{typeof repostCount !== 'undefined' ? (
<Text
testID="repostCount"
@ -67,7 +83,8 @@ export const RepostButton = ({
</Text>
) : undefined}
</View>
</DropdownButton>
</NativeDropdown>
</EventStopper>
)
}