Skip to content

Commit

Permalink
Merge pull request #43424 from Expensify/cmartins-updateReceiptBackgr…
Browse files Browse the repository at this point in the history 
…oundCOlor

Update receipt background color
  • Loading branch information
@srikarparsi
srikarparsi authored Jun 10, 2024
2 parents 061a7fd + 89c6483 commit 6d16563
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 90 deletions.
5 changes: 0 additions & 5 deletions src/components/ReceiptImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,6 @@ type ReceiptImageProps = (

/** The colod of the fallback icon */
fallbackIconColor?: string;

/** Whether the component is hovered */
isHovered?: boolean;
};

function ReceiptImage({
Expand All @@ -96,7 +93,6 @@ function ReceiptImage({
fallbackIconSize,
shouldUseInitialObjectPosition = false,
fallbackIconColor,
isHovered = false,
}: ReceiptImageProps) {
const styles = useThemeStyles();

Expand Down Expand Up @@ -134,7 +130,6 @@ function ReceiptImage({
fallbackIconSize={fallbackIconSize}
fallbackIconColor={fallbackIconColor}
objectPosition={shouldUseInitialObjectPosition ? CONST.IMAGE_OBJECT_POSITION.INITIAL : CONST.IMAGE_OBJECT_POSITION.TOP}
isHovered={isHovered}
/>
);
}
Expand Down
101 changes: 49 additions & 52 deletions src/components/SelectionList/Search/ReportListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,64 +146,61 @@ function ReportListItem<TItem extends ListItem>({
shouldSyncFocus={shouldSyncFocus}
hoverStyle={item.isSelected && styles.activeComponentBG}
>
{(hovered?: boolean) => (
<View style={styles.flex1}>
{!isLargeScreenWidth && (
<ExpenseItemHeaderNarrow
participantFrom={participantFrom}
participantFromDisplayName={participantFromDisplayName}
participantTo={participantTo}
participantToDisplayName={participantToDisplayName}
buttonText={translate('common.view')}
onButtonPress={handleOnButtonPress}
/>
)}
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
<View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
<View style={[styles.flexShrink1]}>
<Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>
<Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} ${translate('search.groupedExpenses')}`}</Text>
</View>
<View style={styles.flex1}>
{!isLargeScreenWidth && (
<ExpenseItemHeaderNarrow
participantFrom={participantFrom}
participantFromDisplayName={participantFromDisplayName}
participantTo={participantTo}
participantToDisplayName={participantToDisplayName}
buttonText={translate('common.view')}
onButtonPress={handleOnButtonPress}
/>
)}
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
<View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
<View style={[styles.flexShrink1]}>
<Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>
<Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} ${translate('search.groupedExpenses')}`}</Text>
</View>
<View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
<TotalCell
</View>
<View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
<TotalCell
showTooltip={showTooltip}
isLargeScreenWidth={isLargeScreenWidth}
reportItem={reportItem}
/>
</View>
</View>
{isLargeScreenWidth && (
<>
{/** We add an empty view with type style to align the total with the table header */}
<View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
<View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
<ActionCell
showTooltip={showTooltip}
isLargeScreenWidth={isLargeScreenWidth}
reportItem={reportItem}
onButtonPress={handleOnButtonPress}
/>
</View>
</View>
{isLargeScreenWidth && (
<>
{/** We add an empty view with type style to align the total with the table header */}
<View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
<View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
<ActionCell
showTooltip={showTooltip}
isLargeScreenWidth={isLargeScreenWidth}
onButtonPress={handleOnButtonPress}
/>
</View>
</>
)}
</View>
<View style={[styles.mt3, styles.reportListItemSeparator]} />
{reportItem.transactions.map((transaction) => (
<TransactionListItemRow
item={transaction}
showTooltip={showTooltip}
onButtonPress={() => {
openReportInRHP(transaction);
}}
showItemHeaderOnNarrowLayout={false}
containerStyle={styles.mt3}
isHovered={hovered}
isChildListItem
/>
))}
</>
)}
</View>
)}
<View style={[styles.mt3, styles.reportListItemSeparator]} />
{reportItem.transactions.map((transaction) => (
<TransactionListItemRow
item={transaction}
showTooltip={showTooltip}
onButtonPress={() => {
openReportInRHP(transaction);
}}
showItemHeaderOnNarrowLayout={false}
containerStyle={styles.mt3}
isChildListItem
/>
))}
</View>
</BaseListItem>
);
}
Expand Down
17 changes: 7 additions & 10 deletions src/components/SelectionList/Search/TransactionListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,13 @@ function TransactionListItem<TItem extends ListItem>({
shouldSyncFocus={shouldSyncFocus}
hoverStyle={item.isSelected && styles.activeComponentBG}
>
{(hovered?: boolean) => (
<TransactionListItemRow
item={transactionItem}
showTooltip={showTooltip}
onButtonPress={() => {
onSelectRow(item);
}}
isHovered={hovered}
/>
)}
<TransactionListItemRow
item={transactionItem}
showTooltip={showTooltip}
onButtonPress={() => {
onSelectRow(item);
}}
/>
</BaseListItem>
);
}
Expand Down
20 changes: 2 additions & 18 deletions src/components/SelectionList/Search/TransactionListItemRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@ type TransactionCellProps = {
transactionItem: TransactionListItemType;
} & CellProps;

type ReceiptCellProps = {
isHovered?: boolean;
} & TransactionCellProps;

type ActionCellProps = {
onButtonPress: () => void;
} & CellProps;
Expand All @@ -51,7 +47,6 @@ type TransactionListItemRowProps = {
onButtonPress: () => void;
showItemHeaderOnNarrowLayout?: boolean;
containerStyle?: StyleProp<ViewStyle>;
isHovered?: boolean;
isChildListItem?: boolean;
};

Expand All @@ -68,7 +63,7 @@ const getTypeIcon = (type?: SearchTransactionType) => {
}
};

function ReceiptCell({transactionItem, isHovered = false}: ReceiptCellProps) {
function ReceiptCell({transactionItem}: TransactionCellProps) {
const theme = useTheme();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
Expand All @@ -85,7 +80,6 @@ function ReceiptCell({transactionItem, isHovered = false}: ReceiptCellProps) {
fallbackIconSize={20}
fallbackIconColor={theme.icon}
iconSize="x-small"
isHovered={isHovered}
/>
</View>
);
Expand Down Expand Up @@ -209,15 +203,7 @@ function TaxCell({transactionItem, showTooltip}: TransactionCellProps) {
);
}

function TransactionListItemRow({
item,
showTooltip,
onButtonPress,
showItemHeaderOnNarrowLayout = true,
containerStyle,
isHovered = false,
isChildListItem = false,
}: TransactionListItemRowProps) {
function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeaderOnNarrowLayout = true, containerStyle, isChildListItem = false}: TransactionListItemRowProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const {isLargeScreenWidth} = useWindowDimensions();
Expand All @@ -242,7 +228,6 @@ function TransactionListItemRow({
transactionItem={item}
isLargeScreenWidth={false}
showTooltip={false}
isHovered={isHovered}
/>
<View style={[styles.flex2, styles.gap1]}>
<MerchantCell
Expand Down Expand Up @@ -296,7 +281,6 @@ function TransactionListItemRow({
transactionItem={item}
isLargeScreenWidth={false}
showTooltip={false}
isHovered={isHovered}
/>
</View>
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE)]}>
Expand Down
8 changes: 3 additions & 5 deletions src/components/ThumbnailImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useState} from 'react';
import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
import {View} from 'react-native';
import useNetwork from '@hooks/useNetwork';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useThumbnailDimensions from '@hooks/useThumbnailDimensions';
Expand Down Expand Up @@ -48,9 +49,6 @@ type ThumbnailImageProps = {

/** The object position of image */
objectPosition?: ImageObjectPosition;

/** Whether the component is hovered */
isHovered?: boolean;
};

type UpdateImageSizeParams = {
Expand All @@ -69,7 +67,6 @@ function ThumbnailImage({
fallbackIconSize = variables.iconSizeSuperLarge,
fallbackIconColor,
objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
isHovered = false,
}: ThumbnailImageProps) {
const styles = useThemeStyles();
const theme = useTheme();
Expand All @@ -78,6 +75,7 @@ function ThumbnailImage({
const cachedDimensions = shouldDynamicallyResize && typeof previewSourceURL === 'string' ? thumbnailDimensionsCache.get(previewSourceURL) : null;
const [imageDimensions, setImageDimensions] = useState({width: cachedDimensions?.width ?? imageWidth, height: cachedDimensions?.height ?? imageHeight});
const {thumbnailDimensionsStyles} = useThumbnailDimensions(imageDimensions.width, imageDimensions.height);
const StyleUtils = useStyleUtils();

useEffect(() => {
setFailedToLoad(false);
Expand Down Expand Up @@ -110,7 +108,7 @@ function ThumbnailImage({

if (failedToLoad || previewSourceURL === '') {
return (
<View style={[style, styles.overflowHidden, isHovered ? styles.activeComponentBG : styles.hoveredComponentBG]}>
<View style={[style, styles.overflowHidden, StyleUtils.getBackgroundColorStyle(theme.border)]}>
<View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
<Icon
src={isOffline ? Expensicons.OfflineCloud : fallbackIcon}
Expand Down

0 comments on commit 6d16563

Please sign in to comment.