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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/view/com/util/post-ctrls/RepostButton.web.tsx
View File

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