Merge pull request #52750 from bernhardoj/fix/52479-new-ws-member-is-…

…not-highlighted Fix new ws member isn't highlighted
Expensify · Nov 22, 2024 · 5f483dc · 5f483dc
2 parents 7cb7260 + e99ede5
commit 5f483dc
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 25 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -487,15 +487,19 @@ function BaseSelectionList<TItem extends ListItem>(
     const renderItem = ({item, index, section}: SectionListRenderItemInfo<TItem, SectionWithIndexOffset<TItem>>) => {
         const normalizedIndex = index + (section?.indexOffset ?? 0);
         const isDisabled = !!section.isDisabled || item.isDisabled;
-        const isItemFocused = (!isDisabled || item.isSelected) && (focusedIndex === normalizedIndex || itemsToHighlight?.has(item.keyForList ?? ''));
+        const isItemFocused = (!isDisabled || item.isSelected) && focusedIndex === normalizedIndex;
+        const isItemHighlighted = !!itemsToHighlight?.has(item.keyForList ?? '');
         // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
         const showTooltip = shouldShowTooltips && normalizedIndex < 10;
 
         return (
             <View onLayout={(event: LayoutChangeEvent) => onItemLayout(event, item?.keyForList)}>
                 <BaseSelectionListItemRenderer
                     ListItem={ListItem}
-                    item={item}
+                    item={{
+                        shouldAnimateInHighlight: isItemHighlighted,
+                        ...item,
+                    }}
                     index={index}
                     isFocused={isItemFocused}
                     isDisabled={isDisabled}
@@ -686,25 +690,31 @@ function BaseSelectionList<TItem extends ListItem>(
      * @param timeout - The timeout in milliseconds before removing the highlight.
      */
     const scrollAndHighlightItem = useCallback(
-        (items: string[], timeout: number) => {
+        (items: string[]) => {
             const newItemsToHighlight = new Set<string>();
             items.forEach((item) => {
                 newItemsToHighlight.add(item);
             });
             const index = flattenedSections.allOptions.findIndex((option) => newItemsToHighlight.has(option.keyForList ?? ''));
-            updateAndScrollToFocusedIndex(index);
+            scrollToIndex(index);
             setItemsToHighlight(newItemsToHighlight);
 
             if (itemFocusTimeoutRef.current) {
                 clearTimeout(itemFocusTimeoutRef.current);
             }
 
+            const duration =
+                CONST.ANIMATED_HIGHLIGHT_ENTRY_DELAY +
+                CONST.ANIMATED_HIGHLIGHT_ENTRY_DURATION +
+                CONST.ANIMATED_HIGHLIGHT_START_DELAY +
+                CONST.ANIMATED_HIGHLIGHT_START_DURATION +
+                CONST.ANIMATED_HIGHLIGHT_END_DELAY +
+                CONST.ANIMATED_HIGHLIGHT_END_DURATION;
             itemFocusTimeoutRef.current = setTimeout(() => {
-                setFocusedIndex(-1);
                 setItemsToHighlight(null);
-            }, timeout);
+            }, duration);
         },
-        [flattenedSections.allOptions, setFocusedIndex, updateAndScrollToFocusedIndex],
+        [flattenedSections.allOptions, scrollToIndex],
     );
 
     /**

diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx
@@ -5,6 +5,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MultipleAvatars from '@components/MultipleAvatars';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import TextWithTooltip from '@components/TextWithTooltip';
+import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -30,6 +31,13 @@ function TableListItem<TItem extends ListItem>({
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
 
+    const animatedHighlightStyle = useAnimatedHighlightStyle({
+        borderRadius: styles.selectionListPressableItemWrapper.borderRadius,
+        shouldHighlight: !!item.shouldAnimateInHighlight,
+        highlightColor: theme.messageHighlightBG,
+        backgroundColor: theme.highlightBG,
+    });
+
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
 
@@ -44,7 +52,17 @@ function TableListItem<TItem extends ListItem>({
     return (
         <BaseListItem
             item={item}
-            pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, item.cursorStyle]]}
+            pressableStyle={[
+                [
+                    styles.selectionListPressableItemWrapper,
+                    styles.mh0,
+                    // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle
+                    item.shouldAnimateInHighlight ? styles.bgTransparent : undefined,
+                    item.isSelected && styles.activeComponentBG,
+                    item.cursorStyle,
+                ],
+            ]}
+            pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]}
             wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
             containerStyle={styles.mb2}
             isFocused={isFocused}

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -615,7 +615,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {
-    scrollAndHighlightItem?: (items: string[], timeout: number) => void;
+    scrollAndHighlightItem?: (items: string[]) => void;
     clearInputAfterSelect?: () => void;
     scrollToIndex: (index: number, animated?: boolean) => void;
     updateAndScrollToFocusedIndex: (newFocusedIndex: number) => void;

diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx
@@ -1,4 +1,3 @@
-import {useNavigation} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {SectionListData} from 'react-native';
@@ -16,7 +15,6 @@ import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as FormActions from '@libs/actions/FormActions';
 import * as ReportActions from '@libs/actions/Report';
 import {READ_COMMANDS} from '@libs/API/types';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -49,7 +47,6 @@ type WorkspaceInvitePageProps = WithPolicyAndFullscreenLoadingProps & WithNaviga
 function WorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const navigation = useNavigation();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const [selectedOptions, setSelectedOptions] = useState<MemberForList[]>([]);
     const [personalDetails, setPersonalDetails] = useState<OptionData[]>([]);
@@ -68,15 +65,6 @@ function WorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
         shouldInitialize: didScreenTransitionEnd,
     });
 
-    useEffect(() => {
-        const unsubscribe = navigation.addListener('beforeRemove', () => {
-            Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
-            FormActions.clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM);
-        });
-
-        return unsubscribe;
-    }, [navigation, route.params.policyID]);
-
     useEffect(() => {
         Policy.clearErrors(route.params.policyID);
         openWorkspaceInvitePage();

diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -195,10 +195,16 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
         getWorkspaceMembers();
     }, [isOffline, prevIsOffline, getWorkspaceMembers]);
 
+    const clearInviteDraft = useCallback(() => {
+        Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
+        FormActions.clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM);
+    }, [route.params.policyID]);
+
     /**
      * Open the modal to invite a user
      */
     const inviteUser = () => {
+        clearInviteDraft();
         Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID));
     };
 
@@ -416,10 +422,9 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
             return;
         }
         const invitedEmails = Object.values(invitedEmailsToAccountIDsDraft).map(String);
-        selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails, 1500);
-        Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
-        FormActions.clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM);
-    }, [invitedEmailsToAccountIDsDraft, route.params.policyID, isFocused, accountIDs, prevAccountIDs]);
+        selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails);
+        clearInviteDraft();
+    }, [invitedEmailsToAccountIDsDraft, isFocused, accountIDs, prevAccountIDs, clearInviteDraft]);
 
     const getHeaderMessage = () => {
         if (isOfflineAndNoMemberDataAvailable) {