Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update receipt background color #43424

Merged
merged 2 commits into from
Jun 10, 2024
Merged

Update receipt background color #43424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0fb9222
update receipt background color
luacmartins Jun 10, 2024
89c6483
fix lint
luacmartins Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/components/ReceiptImage.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading