Merge remote-tracking branch 'origin/main' into 3p-moderators

* origin/main: Fix font styles on web (#3162) Fix `aria-label` on the Share button (#3159) Fix RSS URLs treated as internal (#3156) Poll Statsig for config changes (#3158) Fix missing check for invite code (#3157) Adjustments to ALF prompt buttons (Dialogs Pt. 2) (#3144) Make ALF prompt scrollable for accessibility (#3150) Fix reactivity of dialogs (Dialogs Pt. 1) (#3146) Refactor `PostDropdownBtn` to use new `Menu` (#3112)
2024-03-10 12:43:29 -05:00
parent 6f4556d479 1aaed1cc0d
commit 5566f586b5
27 changed files with 360 additions and 224 deletions
@@ -157,7 +157,7 @@ export function Step1({
            </View>
          )}

-          {uiState.inviteCode ? (
+          {!uiState.isInviteCodeRequired || uiState.inviteCode ? (
            <>
              <View style={s.pb20}>
                <Text
@@ -8,7 +8,14 @@ import {View, ViewStyle} from 'react-native'
 export function EventStopper({
  children,
  style,
-}: React.PropsWithChildren<{style?: ViewStyle | ViewStyle[]}>) {
+  onKeyDown = true,
+}: React.PropsWithChildren<{
+  style?: ViewStyle | ViewStyle[]
+  /**
+   * Default `true`. Set to `false` to allow onKeyDown to propagate
+   */
+  onKeyDown?: boolean
+}>) {
  const stop = (e: any) => {
    e.stopPropagation()
  }
@@ -18,7 +25,7 @@ export function EventStopper({
      onTouchEnd={stop}
      // @ts-ignore web only -prf
      onClick={stop}
-      onKeyDown={stop}
+      onKeyDown={onKeyDown ? stop : undefined}
      style={style}>
      {children}
    </View>
@@ -1,5 +1,11 @@
 import React, {memo} from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {
+  StyleProp,
+  ViewStyle,
+  Pressable,
+  View,
+  PressableProps,
+} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
@@ -12,10 +18,6 @@ import {
 import {toShareUrl} from 'lib/strings/url-helpers'
 import {useTheme} from 'lib/ThemeContext'
 import {shareUrl} from 'lib/sharing'
-import {
-  NativeDropdown,
-  DropdownItem as NativeDropdownItem,
-} from './NativeDropdown'
 import * as Toast from '../Toast'
 import {EventStopper} from '../EventStopper'
 import {useModalControls} from '#/state/modals'
@@ -35,9 +37,20 @@ import {useSession} from '#/state/session'
 import {isWeb} from '#/platform/detection'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
-import {NEW_REPORT_DIALOG_ENABLED} from '#/lib/build-flags'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'

+import {atoms as a, useTheme as useAlf, web} from '#/alf'
+import * as Menu from '#/components/Menu'
+import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
+import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
+import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
+import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
+import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
+import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
+import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
+import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
+import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
+
 let PostDropdownBtn = ({
  testID,
  postAuthor,
@@ -46,6 +59,7 @@ let PostDropdownBtn = ({
  record,
  richText,
  style,
+  hitSlop,
 }: {
  testID: string
  postAuthor: AppBskyActorDefs.ProfileViewBasic
@@ -54,9 +68,11 @@ let PostDropdownBtn = ({
  record: AppBskyFeedPost.Record
  richText: RichTextAPI
  style?: StyleProp<ViewStyle>
+  hitSlop?: PressableProps['hitSlop']
 }): React.ReactNode => {
  const {hasSession, currentAccount} = useSession()
  const theme = useTheme()
+  const alf = useAlf()
  const {_} = useLingui()
  const defaultCtrlColor = theme.palette.default.postCtrl
  const {openModal} = useModalControls()
@@ -152,149 +168,6 @@ let PostDropdownBtn = ({
    hidePost({uri: postUri})
  }, [postUri, hidePost])

-  const dropdownItems: NativeDropdownItem[] = [
-    {
-      label: _(msg`Translate`),
-      onPress() {
-        onOpenTranslate()
-      },
-      testID: 'postDropdownTranslateBtn',
-      icon: {
-        ios: {
-          name: 'character.book.closed',
-        },
-        android: 'ic_menu_sort_alphabetically',
-        web: 'language',
-      },
-    },
-    {
-      label: _(msg`Copy post text`),
-      onPress() {
-        onCopyPostText()
-      },
-      testID: 'postDropdownCopyTextBtn',
-      icon: {
-        ios: {
-          name: 'doc.on.doc',
-        },
-        android: 'ic_menu_edit',
-        web: ['far', 'paste'],
-      },
-    },
-    {
-      label: isWeb ? _(msg`Copy link to post`) : _(msg`Share`),
-      onPress() {
-        const url = toShareUrl(href)
-        shareUrl(url)
-      },
-      testID: 'postDropdownShareBtn',
-      icon: {
-        ios: {
-          name: 'square.and.arrow.up',
-        },
-        android: 'ic_menu_share',
-        web: 'share',
-      },
-    },
-    hasSession && {
-      label: 'separator',
-    },
-    hasSession && {
-      label: isThreadMuted ? _(msg`Unmute thread`) : _(msg`Mute thread`),
-      onPress() {
-        onToggleThreadMute()
-      },
-      testID: 'postDropdownMuteThreadBtn',
-      icon: {
-        ios: {
-          name: 'speaker.slash',
-        },
-        android: 'ic_lock_silent_mode',
-        web: 'comment-slash',
-      },
-    },
-    hasSession && {
-      label: _(msg`Mute words & tags`),
-      onPress() {
-        mutedWordsDialogControl.open()
-      },
-      testID: 'postDropdownMuteWordsBtn',
-      icon: {
-        ios: {
-          name: 'speaker.slash',
-        },
-        android: 'ic_lock_silent_mode',
-        web: 'filter',
-      },
-    },
-    hasSession &&
-      !isAuthor &&
-      !isPostHidden && {
-        label: _(msg`Hide post`),
-        onPress() {
-          openModal({
-            name: 'confirm',
-            title: _(msg`Hide this post?`),
-            message: _(msg`This will hide this post from your feeds.`),
-            onPressConfirm: onHidePost,
-          })
-        },
-        testID: 'postDropdownHideBtn',
-        icon: {
-          ios: {
-            name: 'eye.slash',
-          },
-          android: 'ic_menu_delete',
-          web: ['far', 'eye-slash'],
-        },
-      },
-    {
-      label: 'separator',
-    },
-    !isAuthor &&
-      hasSession && {
-        label: _(msg`Report post`),
-        onPress() {
-          if (NEW_REPORT_DIALOG_ENABLED) {
-            control.open()
-          } else {
-            openModal({
-              name: 'report',
-              uri: postUri,
-              cid: postCid,
-            })
-          }
-        },
-        testID: 'postDropdownReportBtn',
-        icon: {
-          ios: {
-            name: 'exclamationmark.triangle',
-          },
-          android: 'ic_menu_report_image',
-          web: 'circle-exclamation',
-        },
-      },
-    isAuthor && {
-      label: _(msg`Delete post`),
-      onPress() {
-        openModal({
-          name: 'confirm',
-          title: _(msg`Delete this post?`),
-          message: _(msg`Are you sure? This cannot be undone.`),
-          onPressConfirm: onDeletePost,
-        })
-      },
-      testID: 'postDropdownDeleteBtn',
-      icon: {
-        ios: {
-          name: 'trash',
-        },
-        android: 'ic_menu_delete',
-        web: ['far', 'trash-can'],
-      },
-    },
-  ].filter(Boolean) as NativeDropdownItem[]
-
  return (
    <>
      <ReportDialog
@@ -306,20 +179,168 @@ let PostDropdownBtn = ({
        }}
      />

-      <EventStopper>
-        <NativeDropdown
-          testID={testID}
-          items={dropdownItems}
-          accessibilityLabel={_(msg`More post options`)}
-          accessibilityHint="">
-          <View style={style}>
-            <FontAwesomeIcon
-              icon="ellipsis"
-              size={20}
-              color={defaultCtrlColor}
-            />
-          </View>
-        </NativeDropdown>
+      <EventStopper onKeyDown={false}>
+        <Menu.Root>
+          <Menu.Trigger label={_(msg`Open post options menu`)}>
+            {({props, state}) => {
+              const styles = [
+                style,
+                a.rounded_full,
+                (state.hovered || state.focused || state.pressed) && [
+                  web({outline: 0}),
+                  alf.atoms.bg_contrast_25,
+                ],
+              ]
+              return isWeb ? (
+                <View {...props} testID={testID} style={styles}>
+                  <FontAwesomeIcon
+                    icon="ellipsis"
+                    size={20}
+                    color={defaultCtrlColor}
+                    style={{pointerEvents: 'none'}}
+                  />
+                </View>
+              ) : (
+                <Pressable
+                  {...props}
+                  hitSlop={hitSlop}
+                  testID={testID}
+                  style={styles}>
+                  <FontAwesomeIcon
+                    icon="ellipsis"
+                    size={20}
+                    color={defaultCtrlColor}
+                    style={{pointerEvents: 'none'}}
+                  />
+                </Pressable>
+              )
+            }}
+          </Menu.Trigger>
+
+          <Menu.Outer>
+            <Menu.Group>
+              <Menu.Item
+                testID="postDropdownTranslateBtn"
+                label={_(msg`Translate`)}
+                onPress={onOpenTranslate}>
+                <Menu.ItemText>{_(msg`Translate`)}</Menu.ItemText>
+                <Menu.ItemIcon icon={Translate} position="right" />
+              </Menu.Item>
+
+              <Menu.Item
+                testID="postDropdownCopyTextBtn"
+                label={_(msg`Copy post text`)}
+                onPress={onCopyPostText}>
+                <Menu.ItemText>{_(msg`Copy post text`)}</Menu.ItemText>
+                <Menu.ItemIcon icon={ClipboardIcon} position="right" />
+              </Menu.Item>
+
+              <Menu.Item
+                testID="postDropdownShareBtn"
+                label={isWeb ? _(msg`Copy link to post`) : _(msg`Share`)}
+                onPress={() => {
+                  const url = toShareUrl(href)
+                  shareUrl(url)
+                }}>
+                <Menu.ItemText>
+                  {isWeb ? _(msg`Copy link to post`) : _(msg`Share`)}
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={Share} position="right" />
+              </Menu.Item>
+            </Menu.Group>
+
+            {hasSession && (
+              <>
+                <Menu.Divider />
+
+                <Menu.Group>
+                  <Menu.Item
+                    testID="postDropdownMuteThreadBtn"
+                    label={
+                      isThreadMuted
+                        ? _(msg`Unmute thread`)
+                        : _(msg`Mute thread`)
+                    }
+                    onPress={onToggleThreadMute}>
+                    <Menu.ItemText>
+                      {isThreadMuted
+                        ? _(msg`Unmute thread`)
+                        : _(msg`Mute thread`)}
+                    </Menu.ItemText>
+                    <Menu.ItemIcon
+                      icon={isThreadMuted ? Unmute : Mute}
+                      position="right"
+                    />
+                  </Menu.Item>
+
+                  <Menu.Item
+                    testID="postDropdownMuteWordsBtn"
+                    label={_(msg`Mute words & tags`)}
+                    onPress={() => mutedWordsDialogControl.open()}>
+                    <Menu.ItemText>{_(msg`Mute words & tags`)}</Menu.ItemText>
+                    <Menu.ItemIcon icon={Filter} position="right" />
+                  </Menu.Item>
+
+                  {!isAuthor && !isPostHidden && (
+                    <Menu.Item
+                      testID="postDropdownHideBtn"
+                      label={_(msg`Hide post`)}
+                      onPress={() => {
+                        openModal({
+                          name: 'confirm',
+                          title: _(msg`Hide this post?`),
+                          message: _(
+                            msg`This will hide this post from your feeds.`,
+                          ),
+                          onPressConfirm: onHidePost,
+                        })
+                      }}>
+                      <Menu.ItemText>{_(msg`Hide post`)}</Menu.ItemText>
+                      <Menu.ItemIcon icon={EyeSlash} position="right" />
+                    </Menu.Item>
+                  )}
+                </Menu.Group>
+              </>
+            )}
+
+            <Menu.Divider />
+
+            <Menu.Group>
+              {!isAuthor && (
+                <Menu.Item
+                  testID="postDropdownReportBtn"
+                  label={_(msg`Report post`)}
+                  onPress={() => {
+                    openModal({
+                      name: 'report',
+                      uri: postUri,
+                      cid: postCid,
+                    })
+                  }}>
+                  <Menu.ItemText>{_(msg`Report post`)}</Menu.ItemText>
+                  <Menu.ItemIcon icon={Warning} position="right" />
+                </Menu.Item>
+              )}
+
+              {isAuthor && (
+                <Menu.Item
+                  testID="postDropdownDeleteBtn"
+                  label={_(msg`Delete post`)}
+                  onPress={() => {
+                    openModal({
+                      name: 'confirm',
+                      title: _(msg`Delete this post?`),
+                      message: _(msg`Are you sure? This cannot be undone.`),
+                      onPressConfirm: onDeletePost,
+                    })
+                  }}>
+                  <Menu.ItemText>{_(msg`Delete post`)}</Menu.ItemText>
+                  <Menu.ItemIcon icon={Trash} position="right" />
+                </Menu.Item>
+              )}
+            </Menu.Group>
+          </Menu.Outer>
+        </Menu.Root>
      </EventStopper>
    </>
  )
@@ -210,9 +210,7 @@ let PostCtrls = ({
            style={[styles.btn]}
            onPress={onShare}
            accessibilityRole="button"
-            accessibilityLabel={`${
-              post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
-            } (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
+            accessibilityLabel={`${_(msg`Share`)}`}
            accessibilityHint=""
            hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
            <ArrowOutOfBox style={[defaultCtrlColor, styles.mt1]} width={22} />
@@ -228,6 +226,7 @@ let PostCtrls = ({
          record={record}
          richText={richText}
          style={styles.btnPad}
+          hitSlop={big ? HITSLOP_20 : HITSLOP_10}
        />
      </View>
    </View>
@@ -30,7 +30,8 @@ import {useCloseAnyActiveElement} from '#/state/util'
 import * as notifications from 'lib/notifications/notifications'
 import {Outlet as PortalOutlet} from '#/components/Portal'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
-import {useDialogStateContext} from '#/state/dialogs'
+import {useDialogStateContext} from 'state/dialogs'
+import Animated from 'react-native-reanimated'

 function ShellInner() {
  const isDrawerOpen = useIsDrawerOpen()
@@ -54,9 +55,9 @@ function ShellInner() {
  const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
  const {hasSession, currentAccount} = useSession()
  const closeAnyActiveElement = useCloseAnyActiveElement()
+  const {importantForAccessibility} = useDialogStateContext()
  // start undefined
  const currentAccountDid = React.useRef<string | undefined>(undefined)
-  const {openDialogs} = useDialogStateContext()

  React.useEffect(() => {
    let listener = {remove() {}}
@@ -80,19 +81,9 @@ function ShellInner() {
    }
  }, [currentAccount])

-  /**
-   * The counterpart to `accessibilityViewIsModal` for Android. This property
-   * applies to the parent of all non-modal views, and prevents TalkBack from
-   * navigating within content beneath an open dialog.
-   *
-   * @see https://reactnative.dev/docs/accessibility#importantforaccessibility-android
-   */
-  const importantForAccessibility =
-    openDialogs.length > 0 ? 'no-hide-descendants' : undefined
-
  return (
    <>
-      <View
+      <Animated.View
        style={containerPadding}
        importantForAccessibility={importantForAccessibility}>
        <ErrorBoundary>
@@ -106,7 +97,7 @@ function ShellInner() {
            <TabsNavigator />
          </Drawer>
        </ErrorBoundary>
-      </View>
+      </Animated.View>
      <Composer winHeight={winDim.height} />
      <ModalsContainer />
      <MutedWordsDialog />