diff options
Diffstat (limited to 'src/view/com/util')
-rw-r--r-- | src/view/com/util/forms/Button.tsx | 14 | ||||
-rw-r--r-- | src/view/com/util/images/AutoSizedImage.tsx | 4 | ||||
-rw-r--r-- | src/view/com/util/post-ctrls/RepostButton.web.tsx | 91 | ||||
-rw-r--r-- | src/view/com/util/post-embeds/index.tsx | 9 |
4 files changed, 76 insertions, 42 deletions
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx index 076fa1baa..270d98317 100644 --- a/src/view/com/util/forms/Button.tsx +++ b/src/view/com/util/forms/Button.tsx @@ -42,6 +42,7 @@ export function Button({ type = 'primary', label, style, + labelContainerStyle, labelStyle, onPress, children, @@ -55,6 +56,7 @@ export function Button({ type?: ButtonType label?: string style?: StyleProp<ViewStyle> + labelContainerStyle?: StyleProp<ViewStyle> labelStyle?: StyleProp<TextStyle> onPress?: () => void | Promise<void> testID?: string @@ -173,7 +175,7 @@ export function Button({ } return ( - <View style={styles.labelContainer}> + <View style={[styles.labelContainer, labelContainerStyle]}> {label && withLoading && isLoading ? ( <ActivityIndicator size={12} color={typeLabelStyle.color} /> ) : null} @@ -182,7 +184,15 @@ export function Button({ </Text> </View> ) - }, [children, label, withLoading, isLoading, typeLabelStyle, labelStyle]) + }, [ + children, + label, + withLoading, + isLoading, + labelContainerStyle, + typeLabelStyle, + labelStyle, + ]) return ( <Pressable diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index da2f7ab45..035e29c25 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -11,6 +11,7 @@ const MAX_ASPECT_RATIO = 5 // 5/1 interface Props { alt?: string uri: string + dimensionsHint?: Dimensions onPress?: () => void onLongPress?: () => void onPressIn?: () => void @@ -21,6 +22,7 @@ interface Props { export function AutoSizedImage({ alt, uri, + dimensionsHint, onPress, onLongPress, onPressIn, @@ -29,7 +31,7 @@ export function AutoSizedImage({ }: Props) { const store = useStores() const [dim, setDim] = React.useState<Dimensions | undefined>( - store.imageSizes.get(uri), + dimensionsHint || store.imageSizes.get(uri), ) const [aspectRatio, setAspectRatio] = React.useState<number>( dim ? calc(dim) : 1, diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx index eab6e2fef..57f544d41 100644 --- a/src/view/com/util/post-ctrls/RepostButton.web.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx @@ -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,44 +36,55 @@ export const RepostButton = ({ [theme], ) - const items = useMemo( - () => [ - { - label: isReposted ? 'Undo repost' : 'Repost', - icon: 'retweet' as const, - onPress: onRepost, + const dropdownItems: NativeDropdownItem[] = [ + { + label: isReposted ? 'Undo repost' : 'Repost', + testID: 'repostDropdownRepostBtn', + icon: { + ios: {name: 'repeat'}, + android: '', + web: 'retweet', }, - {label: 'Quote post', icon: 'quote-left' as const, onPress: onQuote}, - ], - [isReposted, onRepost, onQuote], - ) + onPress: onRepost, + }, + { + 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}> - <View - style={[ - styles.control, - !big && styles.controlPad, - (isReposted - ? styles.reposted - : defaultControlColor) as StyleProp<ViewStyle>, - ]}> - <RepostIcon strokeWidth={2.4} size={big ? 24 : 20} /> - {typeof repostCount !== 'undefined' ? ( - <Text - testID="repostCount" - type={isReposted ? 'md-bold' : 'md'} - style={styles.repostCount}> - {repostCount ?? 0} - </Text> - ) : undefined} - </View> - </DropdownButton> + <EventStopper> + <NativeDropdown + items={dropdownItems} + accessibilityLabel="Repost or quote post" + accessibilityHint=""> + <View + style={[ + styles.control, + !big && styles.controlPad, + (isReposted + ? styles.reposted + : defaultControlColor) as StyleProp<ViewStyle>, + ]}> + <RepostIcon strokeWidth={2.2} size={big ? 24 : 20} /> + {typeof repostCount !== 'undefined' ? ( + <Text + testID="repostCount" + type={isReposted ? 'md-bold' : 'md'} + style={styles.repostCount}> + {repostCount ?? 0} + </Text> + ) : undefined} + </View> + </NativeDropdown> + </EventStopper> ) } diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index ce6da4a1b..2d79eed8f 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -93,7 +93,11 @@ export function PostEmbeds({ const {images} = embed if (images.length > 0) { - const items = embed.images.map(img => ({uri: img.fullsize, alt: img.alt})) + const items = embed.images.map(img => ({ + uri: img.fullsize, + alt: img.alt, + aspectRatio: img.aspectRatio, + })) const openLightbox = (index: number) => { store.shell.openLightbox(new ImagesLightbox(items, index)) } @@ -104,12 +108,13 @@ export function PostEmbeds({ } if (images.length === 1) { - const {alt, thumb} = images[0] + const {alt, thumb, aspectRatio} = images[0] return ( <View style={[styles.imagesContainer, style]}> <AutoSizedImage alt={alt} uri={thumb} + dimensionsHint={aspectRatio} onPress={() => openLightbox(0)} onPressIn={() => onPressIn(0)} style={[ |