diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 0dff86fc2a43..3f77754ebb2f 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -51,9 +51,6 @@ const propTypes = { /** Whether to show the title tooltip */ showTitleTooltip: PropTypes.bool, - /** Toggle between compact and default view */ - mode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)), - /** Whether this option should be disabled */ isDisabled: PropTypes.bool, @@ -71,7 +68,6 @@ const defaultProps = { isSelected: false, boldStyle: false, showTitleTooltip: false, - mode: 'default', onSelectRow: () => {}, isDisabled: false, optionIsFocused: false, @@ -86,22 +82,10 @@ const OptionRow = (props) => { : styles.sidebarLinkText; const textUnreadStyle = (props.boldStyle) ? [textStyle, styles.sidebarLinkTextBold] : [textStyle]; - const displayNameStyle = StyleUtils.combineStyles(props.mode === CONST.OPTION_MODE.COMPACT - ? [styles.optionDisplayName, ...textUnreadStyle, styles.optionDisplayNameCompact, styles.mr2] - : [styles.optionDisplayName, ...textUnreadStyle], props.style); - const alternateTextStyle = StyleUtils.combineStyles(props.mode === CONST.OPTION_MODE.COMPACT - ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact] - : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style); - const contentContainerStyles = props.mode === CONST.OPTION_MODE.COMPACT - ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter] - : [styles.flex1]; - const sidebarInnerRowStyle = StyleSheet.flatten(props.mode === CONST.OPTION_MODE.COMPACT ? [ - styles.chatLinkRowPressable, - styles.flexGrow1, - styles.optionItemAvatarNameWrapper, - styles.optionRowCompact, - styles.justifyContentCenter, - ] : [ + const displayNameStyle = [styles.optionDisplayName, ...textUnreadStyle, props.style]; + const alternateTextStyle = [textStyle, styles.optionAlternateText, styles.textLabelSupporting, props.style]; + const contentContainerStyles = [styles.flex1]; + const sidebarInnerRowStyle = StyleSheet.flatten([ styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, @@ -169,12 +153,12 @@ const OptionRow = (props) => { secondaryAvatar={props.option.icons[1]} mainTooltip={props.option.ownerEmail} secondaryTooltip={props.option.subtitle} - size={props.mode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT} + size={CONST.AVATAR_SIZE.DEFAULT} /> ) : ( prevProps.optionIsFocused === nextProps.optionIsFocused && prevProps.isSelected === nextProps.isSelected - && prevProps.mode === nextProps.mode && prevProps.option.alternateText === nextProps.option.alternateText && prevProps.option.descriptiveText === nextProps.option.descriptiveText && _.isEqual(prevProps.option.icons, nextProps.option.icons) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index f7b716e4f544..d1e16c6254be 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -2,7 +2,6 @@ import _ from 'underscore'; import React, {forwardRef, Component} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; -import CONST from '../../CONST'; import styles from '../../styles/styles'; import variables from '../../styles/variables'; import OptionRow from '../OptionRow'; @@ -40,7 +39,6 @@ class BaseOptionsList extends Component { this.buildFlatSectionArray = this.buildFlatSectionArray.bind(this); this.extractKey = this.extractKey.bind(this); this.onViewableItemsChanged = this.onViewableItemsChanged.bind(this); - this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 95}; this.didLayout = false; this.flattenedData = this.buildFlatSectionArray(); @@ -106,7 +104,7 @@ class BaseOptionsList extends Component { * @returns {Array} */ buildFlatSectionArray() { - const optionHeight = this.props.optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight; + const optionHeight = variables.optionRowHeight; let offset = 0; // Start with just an empty list header @@ -159,7 +157,6 @@ class BaseOptionsList extends Component { return ( diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js index ced1fb399ccb..0ca8b7a70901 100644 --- a/src/components/OptionsList/optionsListPropTypes.js +++ b/src/components/OptionsList/optionsListPropTypes.js @@ -1,9 +1,7 @@ import PropTypes from 'prop-types'; -import _ from 'underscore'; import SectionList from '../SectionList'; import styles from '../../styles/styles'; import optionPropTypes from '../optionPropTypes'; -import CONST from '../../CONST'; const propTypes = { /** option flexStyle for the options list container */ @@ -64,9 +62,6 @@ const propTypes = { /** Whether to show the title tooltip */ showTitleTooltip: PropTypes.bool, - /** Toggle between compact and default view of the option */ - optionMode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)), - /** Whether to disable the interactivity of the list's option row(s) */ isDisabled: PropTypes.bool, @@ -92,7 +87,6 @@ const defaultProps = { headerMessage: '', innerRef: null, showTitleTooltip: false, - optionMode: undefined, isDisabled: false, onLayout: undefined, shouldHaveOptionSeparator: false, diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 0942d799eda7..3efdddab24fd 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -439,7 +439,6 @@ function getOptions(reports, personalDetails, { includeMultipleParticipantReports = false, includePersonalDetails = false, includeRecentReports = false, - prioritizeDefaultRoomsInSearch = false, // When sortByReportTypeInSearch flag is true, recentReports will include the personalDetails options as well. sortByReportTypeInSearch = false, @@ -556,12 +555,6 @@ function getOptions(reports, personalDetails, { } } - // If we are prioritizing default rooms in search, do it only once we started something - if (prioritizeDefaultRoomsInSearch && searchValue !== '') { - const reportsSplitByDefaultChatRoom = _.partition(recentReportOptions, option => option.isChatRoom); - recentReportOptions = reportsSplitByDefaultChatRoom[0].concat(reportsSplitByDefaultChatRoom[1]); - } - if (includePersonalDetails) { // Next loop over all personal details removing any that are selectedUsers or recentChats _.each(allPersonalDetailsOptions, (personalDetailOption) => { @@ -649,11 +642,8 @@ function getSearchOptions( includeRecentReports: true, includeMultipleParticipantReports: true, maxRecentReportsToShow: 0, // Unlimited - prioritizePinnedReports: false, - prioritizeDefaultRoomsInSearch: false, sortByReportTypeInSearch: true, showChatPreviewLine: true, - showReportsWithNoComments: true, includePersonalDetails: true, forcePolicyNamePreview: true, }); diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index d8f6b94472fe..5231c844afd3 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -65,6 +65,10 @@ Onyx.connect({ callback: val => allReports = val, }); +function getChatType(report) { + return report ? report.chatType : ''; +} + /** * Returns the concatenated title for the PrimaryLogins of a report * @@ -150,7 +154,7 @@ function canDeleteReportAction(reportAction) { * @returns {Boolean} */ function isAdminRoom(report) { - return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS; + return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS; } /** @@ -160,7 +164,7 @@ function isAdminRoom(report) { * @returns {Boolean} */ function isAnnounceRoom(report) { - return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE; + return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE; } /** @@ -170,11 +174,11 @@ function isAnnounceRoom(report) { * @returns {Boolean} */ function isDefaultRoom(report) { - return _.contains([ + return [ CONST.REPORT.CHAT_TYPE.POLICY_ADMINS, CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE, CONST.REPORT.CHAT_TYPE.DOMAIN_ALL, - ], lodashGet(report, ['chatType'], '')); + ].indexOf(getChatType(report)) > -1; } /** @@ -184,7 +188,7 @@ function isDefaultRoom(report) { * @returns {Boolean} */ function isDomainRoom(report) { - return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.DOMAIN_ALL; + return getChatType(report) === CONST.REPORT.CHAT_TYPE.DOMAIN_ALL; } /** @@ -194,7 +198,7 @@ function isDomainRoom(report) { * @returns {Boolean} */ function isUserCreatedPolicyRoom(report) { - return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.POLICY_ROOM; + return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_ROOM; } /** @@ -204,7 +208,7 @@ function isUserCreatedPolicyRoom(report) { * @returns {Boolean} */ function isPolicyExpenseChat(report) { - return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT; + return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT; } /** @@ -301,7 +305,7 @@ function getChatRoomSubtitle(report, policiesMap) { if (!isDefaultRoom(report) && !isUserCreatedPolicyRoom(report) && !isPolicyExpenseChat(report)) { return ''; } - if (report.chatType === CONST.REPORT.CHAT_TYPE.DOMAIN_ALL) { + if (getChatType(report) === CONST.REPORT.CHAT_TYPE.DOMAIN_ALL) { // The domainAll rooms are just #domainName, so we ignore the prefix '#' to get the domainName return report.reportName.substring(1); } @@ -468,12 +472,26 @@ function getIcons(report, personalDetails, policies, defaultIcon = null) { ]; } - // Return avatar sources for Group chats - const sortedParticipants = _.map(report.participants, dmParticipant => ({ - firstName: lodashGet(personalDetails, [dmParticipant, 'firstName'], ''), - avatar: lodashGet(personalDetails, [dmParticipant, 'avatar']) || getDefaultAvatar(dmParticipant), - })).sort((first, second) => first.firstName - second.firstName); - return _.map(sortedParticipants, item => item.avatar); + const participantDetails = []; + for (let i = 0; i < report.participants.length; i++) { + const login = report.participants[i]; + participantDetails.push([ + login, + lodashGet(personalDetails, [login, 'firstName'], ''), + lodashGet(personalDetails, [login, 'avatar']) || getDefaultAvatar(login), + ]); + } + + // Sort all logins by first name (which is the second element in the array) + const sortedParticipantDetails = participantDetails.sort((a, b) => a[1] - b[1]); + + // Now that things are sorted, gather only the avatars (third element in the array) and return those + const avatars = []; + for (let i = 0; i < sortedParticipantDetails.length; i++) { + avatars.push(sortedParticipantDetails[i][2]); + } + + return avatars; } /** @@ -570,7 +588,13 @@ function getReportName(report, policies = {}) { const participants = (report && report.participants) || []; const participantsWithoutCurrentUser = _.without(participants, sessionEmail); const isMultipleParticipantReport = participantsWithoutCurrentUser.length > 1; - return _.map(participantsWithoutCurrentUser, login => getDisplayNameForParticipant(login, isMultipleParticipantReport)).join(', '); + + const displayNames = []; + for (let i = 0; i < participantsWithoutCurrentUser.length; i++) { + const login = participantsWithoutCurrentUser[i]; + displayNames.push(getDisplayNameForParticipant(login, isMultipleParticipantReport)); + } + return displayNames.join(', '); } /** diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js index 6de09a18ff7b..97a1aa2c8925 100755 --- a/src/pages/ReportParticipantsPage.js +++ b/src/pages/ReportParticipantsPage.js @@ -99,7 +99,6 @@ const ReportParticipantsPage = (props) => { hideSectionHeaders showTitleTooltip disableFocusOptions - optionMode="default" boldStyle optionHoveredStyle={styles.hoveredComponentBG} />