code changes based on review

DylanDylann · Apr 8, 2024 · 3932433 · 3932433
1 parent 1085811
commit 3932433
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 24 deletions.
diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx
@@ -53,7 +53,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
      *
      * Don't directly get the ref from emojiPopoverAnchorRef, instead use getEmojiPopoverAnchor()
      */
-    const getEmojiPopoverAnchor = useCallback(() => emojiPopoverAnchorRef.current ?? emojiPopoverAnchorRef, []);
+    const getEmojiPopoverAnchor = useCallback(() => emojiPopoverAnchorRef.current ?? emojiPopoverAnchorRef?.current, []);
 
     /**
      * Show the emoji picker menu.
@@ -85,7 +85,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
 
         const anchorOriginValue = anchorOrigin ?? DEFAULT_ANCHOR_ORIGIN;
 
-        calculateAnchorPosition(emojiPopoverAnchor.current as View, anchorOriginValue).then((value) => {
+        calculateAnchorPosition(emojiPopoverAnchor?.current, anchorOriginValue).then((value) => {
             onWillShow?.();
             setIsEmojiPickerVisible(true);
             setEmojiPopoverAnchorPosition({
@@ -158,14 +158,14 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
     useEffect(() => {
         const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => {
             const emojiPopoverAnchor = getEmojiPopoverAnchor();
-            if (!emojiPopoverAnchor.current) {
+            if (!emojiPopoverAnchor?.current) {
                 // In small screen width, the window size change might be due to keyboard open/hide, we should avoid hide EmojiPicker in those cases
                 if (isEmojiPickerVisible && !isSmallScreenWidth) {
                     hideEmojiPicker();
                 }
                 return;
             }
-            calculateAnchorPosition(emojiPopoverAnchor.current as View, emojiPopoverAnchorOrigin).then((value) => {
+            calculateAnchorPosition(emojiPopoverAnchor?.current, emojiPopoverAnchorOrigin).then((value) => {
                 setEmojiPopoverAnchorPosition({
                     horizontal: value.horizontal,
                     vertical: value.vertical,

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx
@@ -79,13 +79,8 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
      */
     const renderItem: ListRenderItem<EmojiUtils.EmojiPickerListItem> = useCallback(
         ({item, target}) => {
-            let code: string;
-            let types: readonly string[] | undefined;
-            if ('types' in item) {
-                ({code, types} = item);
-            } else {
-                ({code} = item);
-            }
+            const code = item.code;
+            const types = 'types' in item ? item.types : undefined;
 
             if ('spacer' in item && item.spacer) {
                 return null;

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx
@@ -149,7 +149,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
                 if (!item) {
                     return;
                 }
-                if ('types' in item) {
+                if ('types' in item || 'name' in item) {
                     const emoji = typeof preferredSkinTone === 'number' && item?.types?.[preferredSkinTone] ? item?.types?.[preferredSkinTone] : item.code;
                     onEmojiSelected(emoji, item);
                 }
@@ -239,13 +239,8 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
      */
     const renderItem: ListRenderItem<EmojiUtils.EmojiPickerListItem> = useCallback(
         ({item, index, target}) => {
-            let code: string;
-            let types: readonly string[] | undefined;
-            if ('types' in item) {
-                ({code, types} = item);
-            } else {
-                ({code} = item);
-            }
+            const code = item.code;
+            const types = 'types' in item ? item.types : undefined;
 
             if ('spacer' in item && item.spacer) {
                 return null;

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts b/src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts
@@ -2,7 +2,6 @@ import type {FlashList} from '@shopify/flash-list';
 import {useCallback, useEffect, useMemo, useState} from 'react';
 import {useAnimatedRef} from 'react-native-reanimated';
 import emojis from '@assets/emojis';
-import type {PickerEmojis} from '@assets/emojis/types';
 import {useFrequentlyUsedEmojis} from '@components/OnyxProvider';
 import useLocalize from '@hooks/useLocalize';
 import usePreferredEmojiSkinTone from '@hooks/usePreferredEmojiSkinTone';
@@ -15,7 +14,7 @@ const useEmojiPickerMenu = () => {
     const frequentlyUsedEmojis = useFrequentlyUsedEmojis();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const allEmojis = useMemo(() => EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis), [frequentlyUsedEmojis]);
-    const headerEmojis = useMemo(() => EmojiUtils.getHeaderEmojis(allEmojis as PickerEmojis), [allEmojis]);
+    const headerEmojis = useMemo(() => EmojiUtils.getHeaderEmojis(allEmojis), [allEmojis]);
     const headerRowIndices = useMemo(() => headerEmojis.map((headerEmoji) => headerEmoji.index), [headerEmojis]);
     const spacersIndexes = useMemo(() => EmojiUtils.getSpacersIndexes(allEmojis), [allEmojis]);
     const [filteredEmojis, setFilteredEmojis] = useState<EmojiUtils.EmojiPickerList>(allEmojis);

diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts
@@ -156,7 +156,7 @@ function containsOnlyEmojis(message: string): boolean {
 /**
  * Get the header emojis with their code, icon and index
  */
-function getHeaderEmojis(emojis: PickerEmojis): HeaderIndice[] {
+function getHeaderEmojis(emojis: EmojiPickerList): HeaderIndice[] {
     const headerIndices: HeaderIndice[] = [];
     emojis.forEach((emoji, index) => {
         if (!('header' in emoji)) {

diff --git a/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts b/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import type {RefObject} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import type {GestureResponderEvent, Text as RNText, View} from 'react-native';
+import type {GestureResponderEvent, Text as RNText, TextInput, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
@@ -16,7 +16,7 @@ type OnCancel = () => void;
 
 type ContextMenuType = ValueOf<typeof CONST.CONTEXT_MENU_TYPES>;
 
-type ContextMenuAnchor = View | RNText | HTMLDivElement | null | undefined;
+type ContextMenuAnchor = View | RNText | TextInput | HTMLDivElement | null | undefined;
 
 type ShowContextMenu = (
     type: ContextMenuType,