Skip to content

Commit

Permalink
Merge pull request #38449 from rayane-djouah/Fix--There's-a-lot-of-ex…
Browse files Browse the repository at this point in the history 
…tra-space-above-the-report-actions

Fix: There's a lot of extra space above the report actions
  • Loading branch information
@yuwenmemon
yuwenmemon authored May 28, 2024
2 parents e9a2cd5 + dbcb442 commit 1a1ef82
Show file tree
Hide file tree
Showing 12 changed files with 175 additions and 203 deletions.
17 changes: 1 addition & 16 deletions src/CONST.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,27 +208,12 @@ const CONST = {
// Sizes needed for report empty state background image handling
EMPTY_STATE_BACKGROUND: {
ASPECT_RATIO: 3.72,
OVERLAP: 60,
SMALL_SCREEN: {
IMAGE_HEIGHT: 300,
CONTAINER_MINHEIGHT: 200,
VIEW_HEIGHT: 240,
},
WIDE_SCREEN: {
IMAGE_HEIGHT: 450,
CONTAINER_MINHEIGHT: 500,
VIEW_HEIGHT: 390,
},
MONEY_OR_TASK_REPORT: {
SMALL_SCREEN: {
IMAGE_HEIGHT: 300,
CONTAINER_MINHEIGHT: 280,
VIEW_HEIGHT: 240,
},
WIDE_SCREEN: {
IMAGE_HEIGHT: 450,
CONTAINER_MINHEIGHT: 280,
VIEW_HEIGHT: 390,
},
},
},

Expand Down
202 changes: 99 additions & 103 deletions src/components/ReportActionItem/MoneyReportView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import Navigation from '@libs/Navigation/Navigation';
import * as ReportUtils from '@libs/ReportUtils';
Expand All @@ -35,7 +34,6 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
const {isSmallScreenWidth} = useWindowDimensions();
const isSettled = ReportUtils.isSettled(report.reportID);
const isTotalUpdated = ReportUtils.hasUpdatedTotal(report, policy);

Expand All @@ -60,113 +58,111 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
}, [policy, report]);

return (
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true), styles.overflowHidden]}>
<View style={[styles.pRelative]}>
<AnimatedEmptyStateBackground />
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth, true)]}>
{!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && (
<>
{ReportUtils.reportFieldsEnabled(report) &&
sortedPolicyReportFields.map((reportField) => {
const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField);
const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue;
const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);
{!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && (
<>
{ReportUtils.reportFieldsEnabled(report) &&
sortedPolicyReportFields.map((reportField) => {
const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField);
const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue;
const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);

return (
<OfflineWithFeedback
pendingAction={report.pendingFields?.[fieldKey]}
errors={report.errorFields?.[fieldKey]}
errorRowStyles={styles.ph5}
key={`menuItem-${fieldKey}`}
onClose={() => reportActions.clearReportFieldErrors(report.reportID, reportField)}
>
<MenuItemWithTopDescription
description={Str.UCFirst(reportField.name)}
title={fieldValue}
onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))}
shouldShowRightIcon
disabled={isFieldDisabled}
wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
shouldGreyOutWhenDisabled={false}
numberOfLinesTitle={0}
interactive
shouldStackHorizontally={false}
onSecondaryInteraction={() => {}}
hoverAndPressStyle={false}
titleWithTooltips={[]}
/>
</OfflineWithFeedback>
);
})}
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('common.total')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
{isSettled && !isPartiallyPaid && (
<View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
<Icon
src={Expensicons.Checkmark}
fill={theme.success}
/>
</View>
)}
<Text
numberOfLines={1}
style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}
return (
<OfflineWithFeedback
pendingAction={report.pendingFields?.[fieldKey]}
errors={report.errorFields?.[fieldKey]}
errorRowStyles={styles.ph5}
key={`menuItem-${fieldKey}`}
onClose={() => reportActions.clearReportFieldErrors(report.reportID, reportField)}
>
{formattedTotalAmount}
</Text>
</View>
<MenuItemWithTopDescription
description={Str.UCFirst(reportField.name)}
title={fieldValue}
onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))}
shouldShowRightIcon
disabled={isFieldDisabled}
wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
shouldGreyOutWhenDisabled={false}
numberOfLinesTitle={0}
interactive
shouldStackHorizontally={false}
onSecondaryInteraction={() => {}}
hoverAndPressStyle={false}
titleWithTooltips={[]}
/>
</OfflineWithFeedback>
);
})}
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('common.total')}
</Text>
</View>
{Boolean(shouldShowBreakdown) && (
<>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('cardTransactions.outOfPocket')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedOutOfPocketAmount}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
{isSettled && !isPartiallyPaid && (
<View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
<Icon
src={Expensicons.Checkmark}
fill={theme.success}
/>
</View>
)}
<Text
numberOfLines={1}
style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}
>
{formattedTotalAmount}
</Text>
</View>
</View>
{Boolean(shouldShowBreakdown) && (
<>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('cardTransactions.outOfPocket')}
</Text>
</View>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('cardTransactions.companySpend')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedCompanySpendAmount}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedOutOfPocketAmount}
</Text>
</View>
</View>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('cardTransactions.companySpend')}
</Text>
</View>
</>
)}
</>
)}
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedCompanySpendAmount}
</Text>
</View>
</View>
</>
)}
</>
)}
</View>
);
}
Expand Down
10 changes: 3 additions & 7 deletions src/components/ReportActionItem/MoneyRequestView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,10 @@ import ViolationMessages from '@components/ViolationMessages';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import usePermissions from '@hooks/usePermissions';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useViolations from '@hooks/useViolations';
import type {ViolationField} from '@hooks/useViolations';
import useWindowDimensions from '@hooks/useWindowDimensions';
import * as CardUtils from '@libs/CardUtils';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import type {MileageRate} from '@libs/DistanceRequestUtils';
Expand Down Expand Up @@ -97,9 +95,7 @@ function MoneyRequestView({
const theme = useTheme();
const styles = useThemeStyles();
const session = useSession();
const StyleUtils = useStyleUtils();
const {isOffline} = useNetwork();
const {isSmallScreenWidth} = useWindowDimensions();
const {translate, toLocaleDigit} = useLocalize();
const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null;
const isTrackExpense = ReportUtils.isTrackExpenseReport(report);
Expand Down Expand Up @@ -323,9 +319,9 @@ function MoneyRequestView({
const shouldShowNotesViolations = !isReceiptBeingScanned && canUseViolations && ReportUtils.isPaidGroupPolicy(report);

return (
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true, shouldShowAnimatedBackground)]}>
<View style={styles.pRelative}>
{shouldShowAnimatedBackground && <AnimatedEmptyStateBackground />}
<View style={shouldShowAnimatedBackground && [StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth, true)]}>
<>
{!isInvoice && (
<ReceiptAuditHeader
notes={noticeTypeViolations}
Expand Down Expand Up @@ -553,7 +549,7 @@ function MoneyRequestView({
/>
</View>
)}
</View>
</>
</View>
);
}
Expand Down
15 changes: 8 additions & 7 deletions src/pages/home/report/AnimatedEmptyStateBackground.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import {View} from 'react-native';
import Animated, {clamp, SensorType, useAnimatedSensor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring} from 'react-native-reanimated';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeIllustrations from '@hooks/useThemeIllustrations';
Expand Down Expand Up @@ -37,18 +38,18 @@ function AnimatedEmptyStateBackground() {
xOffset.value = clamp(xOffset.value + y * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_X, IMAGE_OFFSET_X);
yOffset.value = clamp(yOffset.value - x * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_Y, IMAGE_OFFSET_Y);
return {
// On Android, scroll view sub views gets clipped beyond container bounds. Set the top position so that image wouldn't get clipped
top: IMAGE_OFFSET_Y,
transform: [{translateX: withSpring(xOffset.value)}, {translateY: withSpring(yOffset.value, {overshootClamping: true})}, {scale: 1.15}],
};
}, [isReducedMotionEnabled]);

return (
<Animated.Image
source={illustrations.EmptyStateBackgroundImage}
style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
/>
<View style={StyleUtils.getReportWelcomeBackgroundContainerStyle(isSmallScreenWidth)}>
<Animated.Image
source={illustrations.EmptyStateBackgroundImage}
style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
/>
</View>
);
}

Expand Down
Loading

0 comments on commit 1a1ef82

Please sign in to comment.