about summary refs log tree commit diff
path: root/src/view/com/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util')
-rw-r--r--src/view/com/util/forms/Button.tsx14
-rw-r--r--src/view/com/util/images/AutoSizedImage.tsx4
-rw-r--r--src/view/com/util/post-ctrls/RepostButton.web.tsx91
-rw-r--r--src/view/com/util/post-embeds/index.tsx9
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={[