Skip to content

[CP Staging] Fix action buttons in search row #61903

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

Merged
merged 11 commits into from
May 14, 2025
Merged

[CP Staging] Fix action buttons in search row #61903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f5a04a4
work in progress
sumo-slonik May 13, 2025
108f149
fix appearance of action buttons in search row
sumo-slonik May 13, 2025
1b9f8e6
clean up code
sumo-slonik May 13, 2025
20889dc
revert unnecessary changes
sumo-slonik May 13, 2025
722a2ee
fix comment
sumo-slonik May 13, 2025
a740e83
fix paddings
sumo-slonik May 13, 2025
6b1a706
fix paddings
sumo-slonik May 13, 2025
9b04533
fix background of action button
sumo-slonik May 14, 2025
fd3a63e
Merge branch 'main' into feature/kuba-nowakowski/transaction-componen…
sumo-slonik May 14, 2025
6f220d6
fix total alignment
sumo-slonik May 14, 2025
3693ab3
fix naming
sumo-slonik May 14, 2025
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
2 changes: 1 addition & 1 deletion src/components/SelectionList/Search/ActionCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ function ActionCell({
);
}

if (action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.REVIEW || shouldUseViewAction || (action === CONST.SEARCH.ACTION_TYPES.DONE && isChildListItem)) {
if (action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.REVIEW || shouldUseViewAction || isChildListItem) {
const buttonInnerStyles = isSelected ? styles.buttonDefaultSelected : {};

return isLargeScreenWidth ? (
Expand Down
31 changes: 29 additions & 2 deletions src/components/SelectionList/Search/ReportListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,12 @@ type FirstRowReportHeaderProps<TItem extends ListItem> = {

/** Whether selecting multiple transactions at once is allowed */
canSelectMultiple: boolean | undefined;

/** Callback passed as goToItem in actionCell, triggered by clicking actionButton */
handleOnButtonPress?: () => void;

/** Whether the action button should be displayed */
shouldShowAction?: boolean;
};

type ReportCellProps = {
Expand All @@ -84,7 +90,16 @@ function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProp
);
}

function FirstHeaderRow<TItem extends ListItem>({policy, report: moneyRequestReport, item, onCheckboxPress, isDisabled, canSelectMultiple}: FirstRowReportHeaderProps<TItem>) {
function FirstHeaderRow<TItem extends ListItem>({
policy,
report: moneyRequestReport,
item,
onCheckboxPress,
isDisabled,
canSelectMultiple,
handleOnButtonPress = () => {},
shouldShowAction = false,
}: FirstRowReportHeaderProps<TItem>) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const reportItem = item as unknown as ReportListItemType;
Expand Down Expand Up @@ -112,13 +127,23 @@ function FirstHeaderRow<TItem extends ListItem>({policy, report: moneyRequestRep
/>
</View>
</View>
<View style={[styles.justifyContentEnd, styles.flexShrink0]}>
<View style={[styles.flexShrink0, styles.mr3]}>
<TotalCell
showTooltip
isLargeScreenWidth={false}
reportItem={reportItem}
/>
</View>
{shouldShowAction && (
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
<ActionCell
action={reportItem.action}
goToItem={handleOnButtonPress}
isSelected={item.isSelected}
isLoading={reportItem.isActionLoading}
/>
</View>
)}
</View>
);
}
Expand Down Expand Up @@ -185,6 +210,8 @@ function ReportListItemHeader<TItem extends ListItem>({
onCheckboxPress={onCheckboxPress}
isDisabled={isDisabled}
canSelectMultiple={canSelectMultiple}
shouldShowAction
handleOnButtonPress={handleOnButtonPress}
/>
<View style={[styles.mr3, styles.ml3, styles.pv2]}>
<View style={[styles.borderBottom]} />
Expand Down
Loading