Skip to content

Commit

Permalink
Merge pull request #17707 from allroundexperts/fix-17155
Browse files Browse the repository at this point in the history 
Fix: make cursor pointer for whole row
  • Loading branch information
@pecanoro
pecanoro authored Apr 24, 2023
2 parents c3ac147 + 8c24835 commit 7a16c46
Showing 1 changed file with 86 additions and 79 deletions.
165 changes: 86 additions & 79 deletions src/components/ReportActionItem/IOUPreview.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import {
View,
TouchableWithoutFeedback,
Pressable,
} from 'react-native';
import PropTypes from 'prop-types';
import Str from 'expensify-common/lib/str';
Expand Down Expand Up @@ -113,7 +113,7 @@ const defaultProps = {
iouReport: {},
shouldHidePayButton: false,
onPayButtonPressed: null,
onPreviewPressed: () => {},
onPreviewPressed: null,
action: undefined,
contextMenuAnchor: undefined,
checkIfContextMenuActive: () => {},
Expand Down Expand Up @@ -179,89 +179,96 @@ const IOUPreview = (props) => {
);
};

const childContainer = (
<View>
<OfflineWithFeedback
pendingAction={props.pendingAction}
errors={props.walletTerms.errors}
onClose={() => {
PaymentMethods.clearWalletTermsError();
Report.clearIOUError(props.chatReportID);
}}
errorRowStyles={[styles.mbn1]}
needsOffscreenAlphaCompositing
>
<View style={[styles.iouPreviewBox, ...props.containerStyles]}>
<View style={[styles.flexRow]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<Text style={styles.h1}>
{cachedTotal}
</Text>
{!props.iouReport.hasOutstandingIOU && (
<View style={styles.iouPreviewBoxCheckmark}>
<Icon src={Expensicons.Checkmark} fill={themeColors.iconSuccessFill} />
</View>
)}
</View>
<View style={styles.iouPreviewBoxAvatar}>
<MultipleAvatars
icons={[managerAvatar, ownerAvatar]}
secondAvatarStyle={[
styles.secondAvatarInline,
props.isHovered
? styles.iouPreviewBoxAvatarHover
: undefined,
]}
avatarTooltips={avatarTooltip}
/>
</View>
</View>
{isCurrentUserManager
? (
<Text>
{props.iouReport.hasOutstandingIOU
? props.translate('iou.youowe', {owner: ownerName})
: props.translate('iou.youpaid', {owner: ownerName})}
</Text>
) : (
<>
<Text>
{props.iouReport.hasOutstandingIOU
? props.translate('iou.owesyou', {manager: managerName})
: props.translate('iou.paidyou', {manager: managerName})}
</Text>
{props.shouldShowPendingConversionMessage && (
<Text style={[styles.textLabel, styles.colorMuted]}>
{props.translate('iou.pendingConversionMessage')}
</Text>
)}
</>
)}
{(isCurrentUserManager
&& !props.shouldHidePayButton
&& props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
<Button
style={styles.mt4}
onPress={props.onPayButtonPressed}
onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
onPressOut={() => ControlSelection.unblock()}
onLongPress={showContextMenu}
text={props.translate('iou.pay')}
success
medium
/>
))}
</View>
</OfflineWithFeedback>
</View>
);

if (!props.onPreviewPressed) {
return childContainer;
}

return (
<TouchableWithoutFeedback
<Pressable
onPress={props.onPreviewPressed}
onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
onPressOut={() => ControlSelection.unblock()}
onLongPress={showContextMenu}
>
<View>
<OfflineWithFeedback
pendingAction={props.pendingAction}
errors={props.walletTerms.errors}
onClose={() => {
PaymentMethods.clearWalletTermsError();
Report.clearIOUError(props.chatReportID);
}}
errorRowStyles={[styles.mbn1]}
needsOffscreenAlphaCompositing
>
<View style={[styles.iouPreviewBox, ...props.containerStyles]}>
<View style={[styles.flexRow]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<Text style={styles.h1}>
{cachedTotal}
</Text>
{!props.iouReport.hasOutstandingIOU && (
<View style={styles.iouPreviewBoxCheckmark}>
<Icon src={Expensicons.Checkmark} fill={themeColors.iconSuccessFill} />
</View>
)}
</View>
<View style={styles.iouPreviewBoxAvatar}>
<MultipleAvatars
icons={[managerAvatar, ownerAvatar]}
secondAvatarStyle={[
styles.secondAvatarInline,
props.isHovered
? styles.iouPreviewBoxAvatarHover
: undefined,
]}
avatarTooltips={avatarTooltip}
/>
</View>
</View>
{isCurrentUserManager
? (
<Text>
{props.iouReport.hasOutstandingIOU
? props.translate('iou.youowe', {owner: ownerName})
: props.translate('iou.youpaid', {owner: ownerName})}
</Text>
)
: (
<>
<Text>
{props.iouReport.hasOutstandingIOU
? props.translate('iou.owesyou', {manager: managerName})
: props.translate('iou.paidyou', {manager: managerName})}
</Text>
{props.shouldShowPendingConversionMessage && (
<Text style={[styles.textLabel, styles.colorMuted]}>
{props.translate('iou.pendingConversionMessage')}
</Text>
)}
</>
)}
{(isCurrentUserManager
&& !props.shouldHidePayButton
&& props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
<Button
style={styles.mt4}
onPress={props.onPayButtonPressed}
onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
onPressOut={() => ControlSelection.unblock()}
onLongPress={showContextMenu}
text={props.translate('iou.pay')}
success
medium
/>
))}
</View>
</OfflineWithFeedback>
</View>
</TouchableWithoutFeedback>
{childContainer}
</Pressable>
);
};

Expand Down

0 comments on commit 7a16c46

Please sign in to comment.