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

Jump to bottom

Add tooltips and nav to bill details #20746

Merged
merged 3 commits into from
Jun 15, 2023
Merged

Add tooltips and nav to bill details #20746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
685169c
Add tooltips and nav to bill details
esh-g Jun 14, 2023
511c200
DetailsPage -> ProfilePage
esh-g Jun 15, 2023
b100ee4
Ammend comment detail -> profile
esh-g Jun 15, 2023
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
15 changes: 14 additions & 1 deletion src/components/MoneyRequestConfirmationList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import MenuItemWithTopDescription from './MenuItemWithTopDescription';
import Navigation from '../libs/Navigation/Navigation';
import optionPropTypes from './optionPropTypes';
import * as CurrencyUtils from '../libs/CurrencyUtils';
import * as ReportUtils from '../libs/ReportUtils';

const propTypes = {
/** Callback to inform parent modal of success */
Expand Down Expand Up @@ -228,6 +229,17 @@ function MoneyRequestConfirmationList(props) {
[props.session.email],
);

/**
* Navigate to profile of selected user
* @param {Object} option
*/
const navigateToUserDetail = (option) => {
if (!option.login) {
return;
}
Navigation.navigate(ROUTES.getProfileRoute(ReportUtils.getAccountIDForLogin(option.login)));
};

/**
* @param {String} paymentMethod
*/
Expand Down Expand Up @@ -290,12 +302,13 @@ function MoneyRequestConfirmationList(props) {
<OptionsSelector
sections={optionSelectorSections}
value=""
onSelectRow={canModifyParticipants ? toggleOption : undefined}
onSelectRow={canModifyParticipants ? toggleOption : navigateToUserDetail}
onConfirmSelection={confirm}
selectedOptions={selectedOptions}
canSelectMultipleOptions={canModifyParticipants}
disableArrowKeysActions={!canModifyParticipants}
boldStyle
showTitleTooltip
shouldTextInputAppearBelowOptions
shouldShowTextInput={false}
shouldUseStyleForChildren={false}
Expand Down
5 changes: 4 additions & 1 deletion src/components/OptionRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,10 @@ class OptionRow extends Component {
const isMultipleParticipant = lodashGet(this.props.option, 'participantsList.length', 0) > 1;

// We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((this.props.option.participantsList || []).slice(0, 10), isMultipleParticipant);
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(
(this.props.option.participantsList || this.props.option.login ? [this.props.option] : []).slice(0, 10),
isMultipleParticipant,
);
let subscriptColor = themeColors.appBG;
if (this.props.optionIsFocused) {
subscriptColor = focusedBackgroundColor;
Expand Down