diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 723e357d4a12..cb5f0202471c 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -1161,7 +1161,6 @@ const CONST = { REPORT_PREVIEW_ACTIONS: { VIEW: 'view', ADD_EXPENSE: 'addExpense', - REVIEW: 'review', SUBMIT: 'submit', APPROVE: 'approve', PAY: 'pay', @@ -6621,7 +6620,6 @@ const CONST = { }, ACTION_TYPES: { VIEW: 'view', - REVIEW: 'review', SUBMIT: 'submit', APPROVE: 'approve', PAY: 'pay', diff --git a/src/components/AnimatedCollapsible/index.tsx b/src/components/AnimatedCollapsible/index.tsx index 83290d66ac5e..114dc045f811 100644 --- a/src/components/AnimatedCollapsible/index.tsx +++ b/src/components/AnimatedCollapsible/index.tsx @@ -5,9 +5,9 @@ import type {StyleProp, ViewStyle} from 'react-native'; import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated'; import {scheduleOnRN} from 'react-native-worklets'; import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; import {easing} from '@components/Modal/ReanimatedModal/utils'; import {PressableWithFeedback} from '@components/Pressable'; +import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; @@ -22,6 +22,9 @@ type AnimatedCollapsibleProps = { /** Header content to display above the collapsible content */ header: ReactNode; + /** Description content to display below the header */ + description?: ReactNode; + /** Duration of expansion animation */ duration?: number; @@ -54,6 +57,7 @@ function AnimatedCollapsible({ isExpanded, children, header, + description, duration = 300, style, headerStyle, @@ -66,10 +70,11 @@ function AnimatedCollapsible({ }: AnimatedCollapsibleProps) { const theme = useTheme(); const styles = useThemeStyles(); + const expensifyIcons = useMemoizedLazyExpensifyIcons(['UpArrow', 'DownArrow'] as const); const contentHeight = useSharedValue(0); + const descriptionHeight = useSharedValue(0); const hasExpanded = useSharedValue(isExpanded); const [isRendered, setIsRendered] = React.useState(isExpanded); - useEffect(() => { hasExpanded.set(isExpanded); if (isExpanded) { @@ -100,6 +105,22 @@ function AnimatedCollapsible({ return withTiming(hasExpanded.get() ? 1 : 0, {duration, easing}); }); + const descriptionOpacity = useDerivedValue(() => { + return withTiming(!hasExpanded.get() ? 1 : 0, {duration, easing}); + }); + + const descriptionAnimatedHeight = useDerivedValue(() => { + return withTiming(!isExpanded ? descriptionHeight.get() : 0, {duration, easing}); + }); + + const descriptionAnimatedStyle = useAnimatedStyle(() => { + return { + opacity: descriptionOpacity.get(), + // The row is collapsed by default, so we don't need to animate the height when it's not expanded + height: isRendered ? descriptionAnimatedHeight.get() : undefined, + }; + }, [isRendered]); + const contentAnimatedStyle = useAnimatedStyle(() => { return { height: animatedHeight.get(), @@ -121,7 +142,7 @@ function AnimatedCollapsible({ > {({hovered}) => ( )} + + {!!description && !isExpanded && ( + { + const height = e.nativeEvent.layout.height; + if (height) { + descriptionHeight.set(height); + } + }} + > + {description} + + )} + {isExpanded || isRendered ? ( ({ @@ -492,9 +490,7 @@ function MoneyRequestReportPreviewContent({ const reportPreviewAction = useMemo(() => { return getReportPreviewAction( - violations, isIouReportArchived || isChatReportArchived, - currentUserDetails.email ?? '', currentUserDetails.accountID, iouReport, policy, @@ -503,21 +499,17 @@ function MoneyRequestReportPreviewContent({ isPaidAnimationRunning, isApprovedAnimationRunning, isSubmittingAnimationRunning, - areStrictPolicyRulesEnabled, ); }, [ isPaidAnimationRunning, isApprovedAnimationRunning, isSubmittingAnimationRunning, - violations, iouReport, policy, transactions, isIouReportArchived, invoiceReceiverPolicy, isChatReportArchived, - areStrictPolicyRulesEnabled, - currentUserDetails.email, currentUserDetails.accountID, ]); @@ -596,15 +588,6 @@ function MoneyRequestReportPreviewContent({ }} /> ) : null, - [CONST.REPORT.REPORT_PREVIEW_ACTIONS.REVIEW]: ( -