Merge pull request #1553 from mozzius/refreshed-web-repost-dropdown

Use refreshed dropdown style for repost/quote post dropdown

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(
+  const dropdownItems: NativeDropdownItem[] = [
-    () => [
+    {
-      {
+      label: isReposted ? 'Undo repost' : 'Repost',
-        label: isReposted ? 'Undo repost' : 'Repost',
+      testID: 'repostDropdownRepostBtn',
-        icon: 'retweet' as const,
+      icon: {
-        onPress: onRepost,
+        ios: {name: 'repeat'},
+        android: '',
+        web: 'retweet',
       },
-      {label: 'Quote post', icon: 'quote-left' as const, onPress: onQuote},
+      onPress: onRepost,
-    ],
+    },
-    [isReposted, onRepost, onQuote],
+    {
-  )
+      label: 'Quote post',
+      testID: 'repostDropdownQuoteBtn',
+      icon: {
+        ios: {name: 'quote.bubble'},
+        android: '',
+        web: 'quote-left',
+      },
+      onPress: onQuote,
+    },
+  ]
 
   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,
+            !big && styles.controlPad,
-          !big && styles.controlPad,
+            (isReposted
-          (isReposted
+              ? styles.reposted
-            ? styles.reposted
+              : defaultControlColor) as StyleProp<ViewStyle>,
-            : defaultControlColor) as StyleProp<ViewStyle>,
+          ]}>
-        ]}>
+          <RepostIcon strokeWidth={2.2} size={big ? 24 : 20} />
-        <RepostIcon strokeWidth={2.4} size={big ? 24 : 20} />
+          {typeof repostCount !== 'undefined' ? (
-        {typeof repostCount !== 'undefined' ? (
+            <Text
-          <Text
+              testID="repostCount"
-            testID="repostCount"
+              type={isReposted ? 'md-bold' : 'md'}
-            type={isReposted ? 'md-bold' : 'md'}
+              style={styles.repostCount}>
-            style={styles.repostCount}>
+              {repostCount ?? 0}
-            {repostCount ?? 0}
+            </Text>
-          </Text>
+          ) : undefined}
-        ) : undefined}
+        </View>
-      </View>
+      </NativeDropdown>
-    </DropdownButton>
+    </EventStopper>
   )
 }