prettier

Expensify · Mar 27, 2024 · 23309a5 · 23309a5
1 parent e4dec8f
commit 23309a5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -6,6 +6,7 @@ import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react
 import {View} from 'react-native';
 import type {AnimatedStyle} from 'react-native-reanimated';
 import type {ValueOf} from 'type-fest';
+import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -149,8 +150,8 @@ type MenuItemBaseProps = {
     /** Whether item is focused or active */
     focused?: boolean;
 
-    /** Style for the highlighted state */
-    highlightStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
+    /** Whether item is highlighted */
+    highlighted?: boolean;
 
     /** Should we disable this menu item? */
     disabled?: boolean;
@@ -289,7 +290,7 @@ function MenuItem(
         success = false,
         focused = false,
         disabled = false,
-        highlightStyle = {},
+        highlighted = false,
         title,
         subtitle,
         shouldShowBasicTitle,
@@ -329,6 +330,7 @@ function MenuItem(
     const StyleUtils = useStyleUtils();
     const combinedStyle = [style, styles.popoverMenuItem];
     const {isSmallScreenWidth} = useWindowDimensions();
+    const animatedHighlightStyle = useAnimatedHighlightStyle({shouldHighlight: highlighted, height: 56});
     const [html, setHtml] = useState('');
     const titleRef = useRef('');
     const {isExecuting, singleExecution, waitForNavigate} = useContext(MenuItemGroupContext) ?? {};
@@ -432,7 +434,7 @@ function MenuItem(
                         onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                         onPressOut={ControlSelection.unblock}
                         onSecondaryInteraction={onSecondaryInteraction}
-                        wrapperStyle={highlightStyle}
+                        wrapperStyle={animatedHighlightStyle}
                         style={({pressed}) =>
                             [
                                 containerStyle,

diff --git a/src/hooks/useAnimatedHighlightStyle.ts b/src/hooks/useAnimatedHighlightStyle.ts
@@ -1,40 +1,44 @@
-import {useFocusEffect} from '@react-navigation/native';
 import React from 'react';
 import {InteractionManager} from 'react-native';
 import {interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming} from 'react-native-reanimated';
 import CONST from '@src/CONST';
 import useTheme from './useTheme';
 
+type Props = {
+    height: number;
+    shouldHighlight: boolean;
+    highlightDuration?: number;
+    delay?: number;
+};
+
 /**
  * Returns a highlight style that interpolates the colour, height and opacity giving a fading effect.
  */
-export default function useAnimatedHighlightStyle(shouldHighlight: boolean, highlightDuration: number = CONST.ANIMATED_TRANSITION, delay = 100) {
+export default function useAnimatedHighlightStyle({shouldHighlight, highlightDuration = CONST.ANIMATED_TRANSITION, delay = CONST.ANIMATION_IN_TIMING, height}: Props) {
     const repeatableProgress = useSharedValue(0);
     const nonRepeatableProgress = useSharedValue(0);
     const theme = useTheme();
 
     const highlightBackgroundStyle = useAnimatedStyle(() => ({
         backgroundColor: interpolateColor(repeatableProgress.value, [0, 1], ['rgba(0, 0, 0, 0)', theme.border]),
-        flex: interpolate(nonRepeatableProgress.value, [0, 1], [0, 1]),
+        height: interpolate(nonRepeatableProgress.value, [0, 1], [0, height]),
         opacity: interpolate(nonRepeatableProgress.value, [0, 1], [0, 1]),
     }));
 
-    useFocusEffect(
-        React.useCallback(() => {
-            if (!shouldHighlight) {
-                return;
-            }
+    React.useEffect(() => {
+        if (!shouldHighlight) {
+            return;
+        }
+        InteractionManager.runAfterInteractions(() => {
             nonRepeatableProgress.value = withTiming(1, {duration: highlightDuration});
-            InteractionManager.runAfterInteractions(() => {
-                repeatableProgress.value = withSequence(
-                    withDelay(delay, withTiming(0)),
-                    withTiming(1, {duration: highlightDuration}),
-                    withDelay(delay, withTiming(1)),
-                    withTiming(0, {duration: highlightDuration}),
-                );
-            });
-        }, [shouldHighlight, highlightDuration, delay, repeatableProgress, nonRepeatableProgress]),
-    );
+            repeatableProgress.value = withSequence(
+                withDelay(delay, withTiming(0)),
+                withTiming(1, {duration: highlightDuration}),
+                withDelay(delay, withTiming(1)),
+                withTiming(0, {duration: highlightDuration}),
+            );
+        });
+    }, [shouldHighlight, highlightDuration, delay, repeatableProgress, nonRepeatableProgress]);
 
-    return highlightBackgroundStyle;
+    return shouldHighlight ? highlightBackgroundStyle : null;
 }
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -14,7 +14,6 @@ import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
-import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -231,7 +230,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
     const enabledFeatureRouteName = route.params?.enabledFeatureRouteName ?? '';
 
     const enabledItem = menuItems.find((item) => item.name === enabledFeatureRouteName);
-    const animatedHighlightStyle = useAnimatedHighlightStyle(!!enabledItem, 500, 150);
 
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundPage =
@@ -292,7 +290,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
                                     onPress={item.action}
                                     brickRoadIndicator={item.brickRoadIndicator}
                                     wrapperStyle={styles.sectionMenuItem}
-                                    highlightStyle={enabledItem?.translationKey === item.translationKey ? [animatedHighlightStyle, {borderRadius: styles.border.borderRadius}] : undefined}
+                                    highlighted={enabledItem?.name === item.name}
                                     focused={!!(item.translationKey && activeRoute?.startsWith(item.name))}
                                     hoverAndPressStyle={styles.hoveredComponentBG}
                                     isPaneMenu