replace dropdown component
parent
42723dfaf6
commit
5d59ab2ac0
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue