Merge pull request #60952 from software-mansion-labs/feature/new-modal-on-money-request-report-transaction-list

[UX Reliability] Add new modal for MoneyRequestReportTransactionList

Author: mountiny

src/components/Modal/BottomDockedModal/Backdrop/index.web.tsx

@@ -54,17 +54,19 @@ function Backdrop({
 
     if (!customBackdrop) {
         return (
-            <PressableWithoutFeedback
-                accessible
-                accessibilityLabel={translate('modal.backdropLabel')}
-                onPress={onBackdropPress}
+            <Animated.View
+                style={[styles.modalBackdrop, backdropStyle, style]}
+                entering={Entering}
+                exiting={Exiting}
             >
-                <Animated.View
-                    style={[styles.modalBackdrop, backdropStyle, style]}
-                    entering={Entering}
-                    exiting={Exiting}
-                />
-            </PressableWithoutFeedback>
+                <PressableWithoutFeedback
+                    accessible
+                    accessibilityLabel={translate('modal.backdropLabel')}
+                    onPress={onBackdropPress}
+                >
+                    <View style={[styles.modalBackdrop, backdropStyle, style]} />
+                </PressableWithoutFeedback>
+            </Animated.View>
         );
     }
 

src/components/Modal/BottomDockedModal/Container/index.web.tsx

@@ -12,9 +12,7 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on
     const isInitiated = useSharedValue(false);
 
     useEffect(
-        () => () => {
-            setTimeout(onCloseCallBack, animationOutTiming);
-        },
+        () => () => onCloseCallBack(),
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
         [],
     );
@@ -53,16 +51,12 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on
 
     return (
         <Animated.View
-            style={[style, styles.modalContainer]}
+            style={[style, styles.modalContainer, styles.modalAnimatedContainer, animatedStyles]}
+            exiting={Exiting}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
-            <Animated.View
-                style={[styles.modalAnimatedContainer, animatedStyles]}
-                exiting={Exiting}
-            >
-                {props.children}
-            </Animated.View>
+            {props.children}
         </Animated.View>
     );
 }

src/components/Modal/BottomDockedModal/index.tsx

@@ -37,7 +37,6 @@ function BottomDockedModal({
     ...props
 }: ModalProps) {
     const [isVisibleState, setIsVisibleState] = useState(isVisible);
-    const [isContainerOpen, setIsContainerOpen] = useState(false);
     const [isTransitioning, setIsTransitioning] = useState(false);
     const [deviceWidth, setDeviceWidth] = useState(() => Dimensions.get('window').width);
     const [deviceHeight, setDeviceHeight] = useState(() => Dimensions.get('window').height);
@@ -107,28 +106,27 @@ function BottomDockedModal({
             }
 
             setIsVisibleState(false);
-            setIsContainerOpen(false);
         },
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
         [],
     );
 
     useEffect(() => {
-        if (isVisible && !isContainerOpen && !isTransitioning) {
+        if (isVisible && !isVisibleState && !isTransitioning) {
             handleRef.current = InteractionManager.createInteractionHandle();
             onModalWillShow();
 
             setIsVisibleState(true);
             setIsTransitioning(true);
-        } else if (!isVisible && isContainerOpen && !isTransitioning) {
+        } else if (!isVisible && isVisibleState && !isTransitioning) {
             handleRef.current = InteractionManager.createInteractionHandle();
             onModalWillHide();
-
-            setIsVisibleState(false);
             setIsTransitioning(true);
+        } else if (!isVisible && isVisibleState && isTransitioning) {
+            setIsVisibleState(false);
         }
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [isVisible, isContainerOpen, isTransitioning]);
+    }, [isVisible, isTransitioning, isVisibleState]);
 
     const backdropStyle: ViewStyle = useMemo(() => {
         return {
@@ -140,7 +138,6 @@ function BottomDockedModal({
 
     const onOpenCallBack = useCallback(() => {
         setIsTransitioning(false);
-        setIsContainerOpen(true);
         if (handleRef.current) {
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
@@ -149,7 +146,6 @@ function BottomDockedModal({
 
     const onCloseCallBack = useCallback(() => {
         setIsTransitioning(false);
-        setIsContainerOpen(false);
         if (handleRef.current) {
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
@@ -190,12 +186,10 @@ function BottomDockedModal({
                 pointerEvents="box-none"
                 style={[styles.modalBackdrop, styles.modalContainerBox]}
             >
-                {isVisibleState && (
-                    <>
-                        {hasBackdrop && backdropView}
-                        {containerView}
-                    </>
-                )}
+                <>
+                    {hasBackdrop && backdropView}
+                    {containerView}
+                </>
             </View>
         );
     }
@@ -206,7 +200,7 @@ function BottomDockedModal({
                 transparent
                 animationType="none"
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                visible={isVisibleState || isTransitioning || isContainerOpen !== isVisibleState}
+                visible={isVisibleState || isTransitioning}
                 onRequestClose={onBackButtonPress}
                 statusBarTranslucent={statusBarTranslucent}
                 testID={testID}

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -21,7 +21,9 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
+import ControlSelection from '@libs/ControlSelection';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils';
 import {navigationRef} from '@libs/Navigation/Navigation';
 import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils';
@@ -236,6 +238,8 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
                             id={transaction.transactionID}
                             style={[pressableStyle]}
                             onMouseLeave={handleMouseLeave}
+                            onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
+                            onPressOut={() => ControlSelection.unblock()}
                             onLongPress={() => {
                                 if (!shouldUseNarrowLayout) {
                                     return;
@@ -298,6 +302,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
                 type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
                 onClose={() => setIsModalVisible(false)}
                 shouldPreventScrollOnFocus
+                shouldUseNewModal
             >
                 <MenuItem
                     title={translate('common.select')}