From 23309a57d9975a3cb5674adc7ebe922854fbddb9 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 28 Mar 2024 04:42:25 +0500 Subject: [PATCH] prettier --- src/components/MenuItem.tsx | 10 +++-- src/hooks/useAnimatedHighlightStyle.ts | 42 +++++++++++--------- src/pages/workspace/WorkspaceInitialPage.tsx | 4 +- 3 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 872cd08e0faf..66f525d17fe5 100644 --- 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>; + /** 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 index 7de7717f2f2d..1712f7c54492 100644 --- 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 index c3c7f539f50c..32a177bef1ae 100644 --- 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