From 50ed3e6a488d3460dae710fd96d0e49b7061cf39 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 8 May 2023 10:47:48 -0600 Subject: [PATCH] Apply style changes --- src/ROUTES.js | 58 +- .../BaseAutoCompleteSuggestions.js | 27 +- .../AutoCompleteSuggestions/index.js | 7 +- .../AutoCompleteSuggestions/index.native.js | 2 +- src/components/AvatarWithDisplayName.js | 86 +- src/components/CurrentWalletBalance.js | 9 +- src/components/EmojiSuggestions.js | 34 +- src/components/HeaderWithCloseButton.js | 26 +- src/components/KeyboardShortcutsModal.js | 65 +- .../MoneyRequestConfirmationList.js | 79 +- src/components/MoneyRequestHeader.js | 51 +- src/components/OnyxProvider.js | 23 +- .../OptionsSelector/BaseOptionsSelector.js | 94 +- .../Reactions/EmojiReactionBubble.js | 43 +- .../Reactions/ReportActionItemReactions.js | 19 +- src/components/ReportActionItem/IOUAction.js | 19 +- src/components/ReportActionItem/IOUPreview.js | 65 +- src/components/ReportActionItem/IOUQuote.js | 15 +- src/components/ReportTransaction.js | 11 +- src/components/TaskSelectorLink.js | 20 +- src/components/TextInput/BaseTextInput.js | 81 +- src/libs/ComposerUtils/index.js | 7 +- src/libs/CurrencyUtils.js | 12 +- src/libs/HttpUtils.js | 4 +- src/libs/IOUUtils.js | 39 +- src/libs/Localize/index.js | 24 +- src/libs/Middleware/SaveResponseInOnyx.js | 35 +- .../AppNavigator/ModalStackNavigators.js | 364 ++-- src/libs/Network/SequentialQueue.js | 43 +- src/libs/OptionsListUtils.js | 273 ++- src/libs/Pusher/pusher.js | 9 +- src/libs/ReportActionsUtils.js | 25 +- src/libs/ReportUtils.js | 263 ++- src/libs/SidebarUtils.js | 77 +- src/libs/actions/App.js | 205 ++- src/libs/actions/BankAccounts.js | 184 +- src/libs/actions/IOU.js | 182 +- src/libs/actions/PaymentMethods.js | 116 +- src/libs/actions/PersonalDetails.js | 327 ++-- src/libs/actions/Plaid.js | 107 +- src/libs/actions/Policy.js | 623 ++++--- src/libs/actions/PushNotification.js | 39 +- src/libs/actions/QueuedOnyxUpdates.js | 8 +- src/libs/actions/Report.js | 365 ++-- src/libs/actions/Session/index.js | 504 ++--- src/libs/actions/Task.js | 19 +- src/libs/actions/User.js | 641 ++++--- src/libs/actions/Wallet.js | 266 +-- src/pages/UnlinkLoginPage.js | 5 +- .../report/ReactionList/BaseReactionList.js | 17 +- .../report/ReactionList/HeaderReactionList.js | 16 +- .../ReactionList/PopoverReactionList.js | 16 +- .../home/report/ReactionList/ReactionList.js | 24 +- .../report/ReactionList/reactionPropTypes.js | 1 - src/pages/home/report/ReportActionCompose.js | 165 +- src/pages/home/sidebar/SidebarLinks.js | 113 +- .../FloatingActionButtonAndPopover.js | 113 +- src/pages/iou/IOUTransactions.js | 21 +- src/pages/iou/MoneyRequestModal.js | 165 +- src/pages/iou/steps/MoneyRequestAmountPage.js | 36 +- src/pages/settings/InitialSettingsPage.js | 119 +- .../Payments/PaymentsPage/BasePaymentsPage.js | 114 +- .../settings/Payments/TransferBalancePage.js | 129 +- src/pages/signin/LoginForm.js | 25 +- src/pages/signin/SignInPage.js | 46 +- src/pages/signin/UnlinkLoginForm.js | 27 +- src/pages/tasks/NewTaskDescriptionPage.js | 2 +- src/pages/tasks/NewTaskDetailsPage.js | 6 +- src/pages/tasks/NewTaskPage.js | 14 +- src/pages/tasks/NewTaskTitlePage.js | 4 +- src/pages/tasks/TaskAssigneeSelectorModal.js | 14 +- src/pages/workspace/WorkspacesListPage.js | 40 +- src/stories/TextInput.stories.js | 36 +- src/styles/StyleUtils.js | 101 +- tests/actions/IOUTest.js | 1628 +++++++++-------- tests/ui/UnreadIndicatorsTest.js | 659 +++---- tests/unit/CurrencyUtilsTest.js | 41 +- tests/unit/IOUUtilsTest.js | 15 +- tests/unit/LocalizeTests.js | 63 +- tests/unit/SidebarFilterTest.js | 975 +++++----- tests/unit/SidebarTest.js | 102 +- tests/utils/LHNTestUtils.js | 33 +- tests/utils/TestHelper.js | 126 +- 83 files changed, 5345 insertions(+), 5261 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index b4ae96eb5967..584d01088bc3 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -43,7 +43,7 @@ export default { SETTINGS_ADD_DEBIT_CARD: 'settings/payments/add-debit-card', SETTINGS_ADD_BANK_ACCOUNT: 'settings/payments/add-bank-account', SETTINGS_ENABLE_PAYMENTS: 'settings/payments/enable-payments', - getSettingsAddLoginRoute: type => `settings/addlogin/${type}`, + getSettingsAddLoginRoute: (type) => `settings/addlogin/${type}`, SETTINGS_PAYMENTS_TRANSFER_BALANCE: 'settings/payments/transfer-balance', SETTINGS_PAYMENTS_CHOOSE_TRANSFER_ACCOUNT: 'settings/payments/choose-transfer-account', SETTINGS_PERSONAL_DETAILS, @@ -52,14 +52,14 @@ export default { SETTINGS_PERSONAL_DETAILS_ADDRESS: `${SETTINGS_PERSONAL_DETAILS}/address`, SETTINGS_CONTACT_METHODS, SETTINGS_CONTACT_METHOD_DETAILS: `${SETTINGS_CONTACT_METHODS}/:contactMethod/details`, - getEditContactMethodRoute: contactMethod => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`, + getEditContactMethodRoute: (contactMethod) => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`, SETTINGS_NEW_CONTACT_METHOD: `${SETTINGS_CONTACT_METHODS}/new`, NEW_GROUP: 'new/group', NEW_CHAT: 'new/chat', NEW_TASK, REPORT, REPORT_WITH_ID: 'r/:reportID', - getReportRoute: reportID => `r/${reportID}`, + getReportRoute: (reportID) => `r/${reportID}`, SELECT_YEAR: 'select-year', getYearSelectionRoute: (minYear, maxYear, currYear, backTo) => `select-year?min=${minYear}&max=${maxYear}&year=${currYear}&backTo=${backTo}`, @@ -72,9 +72,9 @@ export default { IOU_REQUEST_WITH_REPORT_ID: `${IOU_REQUEST}/:reportID?`, IOU_BILL_WITH_REPORT_ID: `${IOU_BILL}/:reportID?`, IOU_SEND_WITH_REPORT_ID: `${IOU_SEND}/:reportID?`, - getIouRequestRoute: reportID => `${IOU_REQUEST}/${reportID}`, - getIouSplitRoute: reportID => `${IOU_BILL}/${reportID}`, - getIOUSendRoute: reportID => `${IOU_SEND}/${reportID}`, + getIouRequestRoute: (reportID) => `${IOU_REQUEST}/${reportID}`, + getIouSplitRoute: (reportID) => `${IOU_BILL}/${reportID}`, + getIOUSendRoute: (reportID) => `${IOU_SEND}/${reportID}`, IOU_BILL_CURRENCY: `${IOU_BILL_CURRENCY}/:reportID?`, IOU_REQUEST_CURRENCY: `${IOU_REQUEST_CURRENCY}/:reportID?`, MONEY_REQUEST_DESCRIPTION: `${IOU_REQUEST}/description`, @@ -82,50 +82,50 @@ export default { IOU_SEND_ADD_BANK_ACCOUNT: `${IOU_SEND}/add-bank-account`, IOU_SEND_ADD_DEBIT_CARD: `${IOU_SEND}/add-debit-card`, IOU_SEND_ENABLE_PAYMENTS: `${IOU_SEND}/enable-payments`, - getIouRequestCurrencyRoute: reportID => `${IOU_REQUEST_CURRENCY}/${reportID}`, - getIouBillCurrencyRoute: reportID => `${IOU_BILL_CURRENCY}/${reportID}`, - getIouSendCurrencyRoute: reportID => `${IOU_SEND_CURRENCY}/${reportID}`, + getIouRequestCurrencyRoute: (reportID) => `${IOU_REQUEST_CURRENCY}/${reportID}`, + getIouBillCurrencyRoute: (reportID) => `${IOU_BILL_CURRENCY}/${reportID}`, + getIouSendCurrencyRoute: (reportID) => `${IOU_SEND_CURRENCY}/${reportID}`, IOU_DETAILS, IOU_DETAILS_ADD_BANK_ACCOUNT: `${IOU_DETAILS}/add-bank-account`, IOU_DETAILS_ADD_DEBIT_CARD: `${IOU_DETAILS}/add-debit-card`, IOU_DETAILS_ENABLE_PAYMENTS: `${IOU_DETAILS}/enable-payments`, IOU_DETAILS_WITH_IOU_REPORT_ID: `${IOU_DETAILS}/:chatReportID/:iouReportID/`, getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`, - getNewTaskRoute: reportID => `${NEW_TASK}/${reportID}`, + getNewTaskRoute: (reportID) => `${NEW_TASK}/${reportID}`, NEW_TASK_WITH_REPORT_ID: `${NEW_TASK}/:reportID?`, TASK_TITLE: 'r/:reportID/title', TASK_DESCRIPTION: 'r/:reportID/description', - getTaskReportTitleRoute: reportID => `r/${reportID}/title`, - getTaskReportDescriptionRoute: reportID => `r/${reportID}/description`, + getTaskReportTitleRoute: (reportID) => `r/${reportID}/title`, + getTaskReportDescriptionRoute: (reportID) => `r/${reportID}/description`, NEW_TASK_ASSIGNEE: `${NEW_TASK}/assignee`, NEW_TASK_SHARE_DESTINATION: `${NEW_TASK}/share-destination`, NEW_TASK_DETAILS: `${NEW_TASK}/details`, NEW_TASK_TITLE: `${NEW_TASK}/title`, NEW_TASK_DESCRIPTION: `${NEW_TASK}/description`, - getTaskDetailsRoute: taskID => `task/details/${taskID}`, + getTaskDetailsRoute: (taskID) => `task/details/${taskID}`, SEARCH: 'search', SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode', DETAILS: 'details', - getDetailsRoute: login => `details?login=${encodeURIComponent(login)}`, + getDetailsRoute: (login) => `details?login=${encodeURIComponent(login)}`, REPORT_PARTICIPANTS: 'r/:reportID/participants', - getReportParticipantsRoute: reportID => `r/${reportID}/participants`, + getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`, REPORT_PARTICIPANT: 'r/:reportID/participants/details', getReportParticipantRoute: (reportID, login) => `r/${reportID}/participants/details?login=${encodeURIComponent(login)}`, REPORT_WITH_ID_DETAILS: 'r/:reportID/details', - getReportDetailsRoute: reportID => `r/${reportID}/details`, + getReportDetailsRoute: (reportID) => `r/${reportID}/details`, REPORT_SETTINGS: 'r/:reportID/settings', - getReportSettingsRoute: reportID => `r/${reportID}/settings`, + getReportSettingsRoute: (reportID) => `r/${reportID}/settings`, TRANSITION_FROM_OLD_DOT: 'transition', VALIDATE_LOGIN: 'v/:accountID/:validateCode', GET_ASSISTANCE: 'get-assistance/:taskID', - getGetAssistanceRoute: taskID => `get-assistance/${taskID}`, + getGetAssistanceRoute: (taskID) => `get-assistance/${taskID}`, UNLINK_LOGIN: 'u/:accountID/:validateCode', // This is a special validation URL that will take the user to /workspace/new after validation. This is used // when linking users from e.com in order to share a session in this app. ENABLE_PAYMENTS: 'enable-payments', WALLET_STATEMENT_WITH_DATE: 'statements/:yearMonth', - getWalletStatementWithDateRoute: yearMonth => `statements/${yearMonth}`, + getWalletStatementWithDateRoute: (yearMonth) => `statements/${yearMonth}`, WORKSPACE_NEW: 'workspace/new', WORKSPACE_INITIAL: 'workspace/:policyID', WORKSPACE_INVITE: 'workspace/:policyID/invite', @@ -138,16 +138,16 @@ export default { WORKSPACE_TRAVEL: 'workspace/:policyID/travel', WORKSPACE_MEMBERS: 'workspace/:policyID/members', WORKSPACE_NEW_ROOM: 'workspace/new-room', - getWorkspaceInitialRoute: policyID => `workspace/${policyID}`, - getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`, - getWorkspaceInviteMessageRoute: policyID => `workspace/${policyID}/invite-message`, - getWorkspaceSettingsRoute: policyID => `workspace/${policyID}/settings`, - getWorkspaceCardRoute: policyID => `workspace/${policyID}/card`, - getWorkspaceReimburseRoute: policyID => `workspace/${policyID}/reimburse`, - getWorkspaceBillsRoute: policyID => `workspace/${policyID}/bills`, - getWorkspaceInvoicesRoute: policyID => `workspace/${policyID}/invoices`, - getWorkspaceTravelRoute: policyID => `workspace/${policyID}/travel`, - getWorkspaceMembersRoute: policyID => `workspace/${policyID}/members`, + getWorkspaceInitialRoute: (policyID) => `workspace/${policyID}`, + getWorkspaceInviteRoute: (policyID) => `workspace/${policyID}/invite`, + getWorkspaceInviteMessageRoute: (policyID) => `workspace/${policyID}/invite-message`, + getWorkspaceSettingsRoute: (policyID) => `workspace/${policyID}/settings`, + getWorkspaceCardRoute: (policyID) => `workspace/${policyID}/card`, + getWorkspaceReimburseRoute: (policyID) => `workspace/${policyID}/reimburse`, + getWorkspaceBillsRoute: (policyID) => `workspace/${policyID}/bills`, + getWorkspaceInvoicesRoute: (policyID) => `workspace/${policyID}/invoices`, + getWorkspaceTravelRoute: (policyID) => `workspace/${policyID}/travel`, + getWorkspaceMembersRoute: (policyID) => `workspace/${policyID}/members`, /** * @param {String} route diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js index f548303e8238..b6366316c2cb 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js @@ -34,13 +34,8 @@ const BaseAutoCompleteSuggestions = (props) => { */ const renderSuggestionMenuItem = ({item, index}) => ( StyleUtils.getAutoCompleteSuggestionItemStyle( - props.highlightedSuggestionIndex, - CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT, - hovered, - index, - )} - onMouseDown={e => e.preventDefault()} + style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(props.highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT, hovered, index)} + onMouseDown={(e) => e.preventDefault()} onPress={() => props.onSelect(index)} onLongPress={() => {}} > @@ -48,21 +43,12 @@ const BaseAutoCompleteSuggestions = (props) => { ); - const rowHeight = measureHeightOfSuggestionRows( - props.suggestions.length, - props.isSuggestionPickerLarge, - ); + const rowHeight = measureHeightOfSuggestionRows(props.suggestions.length, props.isSuggestionPickerLarge); return ( ( // eslint-disable-next-line react/jsx-props-no-spreading - + )); diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.js index a17c869f1a87..c742a1900971 100644 --- a/src/components/AutoCompleteSuggestions/index.js +++ b/src/components/AutoCompleteSuggestions/index.js @@ -23,12 +23,15 @@ const AutoCompleteSuggestions = (props) => { } e.preventDefault(); }; - return () => container.onpointerdown = null; + return () => (container.onpointerdown = null); }, []); return ( // eslint-disable-next-line react/jsx-props-no-spreading - + ); }; diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.js index 9332478a3cd9..db701406092d 100644 --- a/src/components/AutoCompleteSuggestions/index.native.js +++ b/src/components/AutoCompleteSuggestions/index.native.js @@ -2,7 +2,7 @@ import React from 'react'; import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions'; import {propTypes} from './autoCompleteSuggestionsPropTypes'; -const AutoCompleteSuggestions = props => ( +const AutoCompleteSuggestions = (props) => ( // eslint-disable-next-line react/jsx-props-no-spreading ); diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index cb56b27b482d..3be660ab09c5 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -53,54 +53,43 @@ const AvatarWithDisplayName = (props) => { return ( {Boolean(props.report && title) && ( - - {isExpenseReport ? ( - - ) : ( - - )} - - - {!_.isEmpty(subtitle) && ( - - {subtitle} - + + {isExpenseReport ? ( + + ) : ( + )} + + + {!_.isEmpty(subtitle) && ( + + {subtitle} + + )} + - )} ); @@ -109,7 +98,4 @@ AvatarWithDisplayName.propTypes = propTypes; AvatarWithDisplayName.displayName = 'AvatarWithDisplayName'; AvatarWithDisplayName.defaultProps = defaultProps; -export default compose( - withWindowDimensions, - withLocalize, -)(AvatarWithDisplayName); +export default compose(withWindowDimensions, withLocalize)(AvatarWithDisplayName); diff --git a/src/components/CurrentWalletBalance.js b/src/components/CurrentWalletBalance.js index 72f05d138939..974e2527d0cb 100644 --- a/src/components/CurrentWalletBalance.js +++ b/src/components/CurrentWalletBalance.js @@ -24,7 +24,6 @@ const propTypes = { const defaultProps = { userWallet: { - // Default to zero if userWallet and currentBalance is not set yet to avoid NaN currentBalance: 0, }, @@ -33,13 +32,7 @@ const defaultProps = { const CurrentWalletBalance = (props) => { const formattedBalance = CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance); - return ( - - {`${formattedBalance}`} - - ); + return {`${formattedBalance}`}; }; CurrentWalletBalance.propTypes = propTypes; diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js index 9f5269efe846..c098cc988b81 100644 --- a/src/components/EmojiSuggestions.js +++ b/src/components/EmojiSuggestions.js @@ -7,25 +7,26 @@ import * as StyleUtils from '../styles/StyleUtils'; import * as EmojiUtils from '../libs/EmojiUtils'; import Text from './Text'; import getStyledTextArray from '../libs/GetStyledTextArray'; -import AutoCompleteSuggestions from -'./AutoCompleteSuggestions'; +import AutoCompleteSuggestions from './AutoCompleteSuggestions'; const propTypes = { /** The index of the highlighted emoji */ highlightedEmojiIndex: PropTypes.number, /** Array of suggested emoji */ - emojis: PropTypes.arrayOf(PropTypes.shape({ - /** The emoji code */ - code: PropTypes.string.isRequired, + emojis: PropTypes.arrayOf( + PropTypes.shape({ + /** The emoji code */ + code: PropTypes.string.isRequired, - /** The name of the emoji */ - name: PropTypes.string.isRequired, + /** The name of the emoji */ + name: PropTypes.string.isRequired, - /** Array of different skin tone variants. - * If provided, it will be indexed with props.preferredSkinToneIndex */ - types: PropTypes.arrayOf(PropTypes.string.isRequired), - })).isRequired, + /** Array of different skin tone variants. + * If provided, it will be indexed with props.preferredSkinToneIndex */ + types: PropTypes.arrayOf(PropTypes.string.isRequired), + }), + ).isRequired, /** Fired when the user selects an emoji */ onSelect: PropTypes.func.isRequired, @@ -34,9 +35,9 @@ const propTypes = { prefix: PropTypes.string.isRequired, /** Show that we can use large emoji picker. Depending on available space - * and whether the input is expanded, we can have a small or large emoji - * suggester. When this value is false, the suggester will have a height of - * 2.5 items. When this value is true, the height can be up to 5 items. */ + * and whether the input is expanded, we can have a small or large emoji + * suggester. When this value is false, the suggester will have a height of + * 2.5 items. When this value is true, the height can be up to 5 items. */ isEmojiPickerLarge: PropTypes.bool.isRequired, /** Show that we should include ReportRecipientLocalTime view height */ @@ -71,7 +72,10 @@ const EmojiSuggestions = (props) => { : {_.map(styledTextArray, ({text, isColored}, i) => ( - + {text} ))} diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 221048e478f0..e1c87c0c4728 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -151,19 +151,19 @@ class HeaderWithCloseButton extends Component { {this.props.shouldShowBackButton && ( - - { - if (this.props.isKeyboardShown) { - Keyboard.dismiss(); - } - this.props.onBackButtonPress(); - }} - style={[styles.touchableButtonImage]} - > - - - + + { + if (this.props.isKeyboardShown) { + Keyboard.dismiss(); + } + this.props.onBackButtonPress(); + }} + style={[styles.touchableButtonImage]} + > + + + )} {this.props.shouldShowAvatarWithDisplay && ( { - ModalActions.close(); - KeyboardShortcutsActions.showKeyboardShortcutModal(); - }, openShortcutModalConfig.descriptionKey, openShortcutModalConfig.modifiers, true); + this.unsubscribeShortcutModal = KeyboardShortcut.subscribe( + openShortcutModalConfig.shortcutKey, + () => { + ModalActions.close(); + KeyboardShortcutsActions.showKeyboardShortcutModal(); + }, + openShortcutModalConfig.descriptionKey, + openShortcutModalConfig.modifiers, + true, + ); if (this.props.isShortcutsModalOpen) { // The modal started open, which can happen if you reload the page when the modal is open. @@ -72,32 +78,47 @@ class KeyboardShortcutsModal extends React.Component { // Both callbacks have the lowest priority (0) to ensure that they are called before any other callbacks // and configured so that event propagation is stopped after the callback is called (only when the modal is open) const closeShortcutEscapeModalConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; - this.subscribedOpenModalShortcuts.push(KeyboardShortcut.subscribe(closeShortcutEscapeModalConfig.shortcutKey, () => { - ModalActions.close(); - KeyboardShortcutsActions.hideKeyboardShortcutModal(); - }, closeShortcutEscapeModalConfig.descriptionKey, closeShortcutEscapeModalConfig.modifiers, true, true)); + this.subscribedOpenModalShortcuts.push( + KeyboardShortcut.subscribe( + closeShortcutEscapeModalConfig.shortcutKey, + () => { + ModalActions.close(); + KeyboardShortcutsActions.hideKeyboardShortcutModal(); + }, + closeShortcutEscapeModalConfig.descriptionKey, + closeShortcutEscapeModalConfig.modifiers, + true, + true, + ), + ); const closeShortcutEnterModalConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; - this.subscribedOpenModalShortcuts.push(KeyboardShortcut.subscribe(closeShortcutEnterModalConfig.shortcutKey, () => { - ModalActions.close(); - KeyboardShortcutsActions.hideKeyboardShortcutModal(); - }, closeShortcutEnterModalConfig.descriptionKey, closeShortcutEnterModalConfig.modifiers, true)); + this.subscribedOpenModalShortcuts.push( + KeyboardShortcut.subscribe( + closeShortcutEnterModalConfig.shortcutKey, + () => { + ModalActions.close(); + KeyboardShortcutsActions.hideKeyboardShortcutModal(); + }, + closeShortcutEnterModalConfig.descriptionKey, + closeShortcutEnterModalConfig.modifiers, + true, + ), + ); // Intercept arrow up and down keys to prevent scrolling ArrowKeyFocusManager while this modal is open const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP; - this.subscribedOpenModalShortcuts.push(KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => { - }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true)); + this.subscribedOpenModalShortcuts.push(KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => {}, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true)); const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN; - this.subscribedOpenModalShortcuts.push(KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => { - }, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true)); + this.subscribedOpenModalShortcuts.push(KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => {}, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true)); } /* * Unsubscribe all shortcuts that were subscribed when the modal opened */ unsubscribeOpenModalShortcuts() { - _.each(this.subscribedOpenModalShortcuts, unsubscribe => unsubscribe()); + _.each(this.subscribedOpenModalShortcuts, (unsubscribe) => unsubscribe()); this.subscribedOpenModalShortcuts = []; } @@ -110,10 +131,7 @@ class KeyboardShortcutsModal extends React.Component { renderRow(shortcut, isFirstRow) { return ( @@ -137,7 +155,10 @@ class KeyboardShortcutsModal extends React.Component { innerContainerStyle={{...styles.keyboardShortcutModalContainer, ...StyleUtils.getKeyboardShortcutsModalWidth(this.props.isSmallScreenWidth)}} onClose={KeyboardShortcutsActions.hideKeyboardShortcutModal} > - + {this.props.translate('keyboardShortcutModal.subtitle')} diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 4e56e4e64814..b122ab19f70e 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -54,7 +54,6 @@ const propTypes = { /** Holds data related to IOU view state, rather than the underlying IOU data. */ iou: PropTypes.shape({ - /** Whether or not the IOU step is loading (creating the IOU Report) */ loading: PropTypes.bool, @@ -87,8 +86,9 @@ class MoneyRequestConfirmationList extends Component { constructor(props) { super(props); - const formattedParticipants = _.map(this.getParticipantsWithAmount(props.participants), participant => ({ - ...participant, selected: true, + const formattedParticipants = _.map(this.getParticipantsWithAmount(props.participants), (participant) => ({ + ...participant, + selected: true, })); this.state = { @@ -105,13 +105,16 @@ class MoneyRequestConfirmationList extends Component { * @returns {Array} */ getSplitOrRequestOptions() { - return [{ - text: Str.recapitalize(this.props.translate( - this.props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount', - {amount: CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode)}, - )), - value: this.props.hasMultipleParticipants ? CONST.IOU.MONEY_REQUEST_TYPE.SPLIT : CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, - }]; + return [ + { + text: Str.recapitalize( + this.props.translate(this.props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount', { + amount: CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode), + }), + ), + value: this.props.hasMultipleParticipants ? CONST.IOU.MONEY_REQUEST_TYPE.SPLIT : CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, + }, + ]; } /** @@ -119,7 +122,7 @@ class MoneyRequestConfirmationList extends Component { * @returns {Array} */ getSelectedParticipants() { - return _.filter(this.state.participants, participant => participant.selected); + return _.filter(this.state.participants, (participant) => participant.selected); } /** @@ -127,7 +130,7 @@ class MoneyRequestConfirmationList extends Component { * @returns {Array} */ getUnselectedParticipants() { - return _.filter(this.state.participants, participant => !participant.selected); + return _.filter(this.state.participants, (participant) => !participant.selected); } /** @@ -137,10 +140,7 @@ class MoneyRequestConfirmationList extends Component { */ getParticipantsWithAmount(participants) { const iouAmount = IOUUtils.calculateAmount(participants, this.props.iouAmount); - return OptionsListUtils.getIOUConfirmationOptionsFromParticipants( - participants, - CurrencyUtils.convertToDisplayString(iouAmount, this.props.iou.selectedCurrencyCode), - ); + return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(participants, CurrencyUtils.convertToDisplayString(iouAmount, this.props.iou.selectedCurrencyCode)); } /** @@ -150,7 +150,7 @@ class MoneyRequestConfirmationList extends Component { * @returns {Array} */ getParticipantsWithoutAmount(participants) { - return _.map(participants, option => _.omit(option, 'descriptiveText')); + return _.map(participants, (option) => _.omit(option, 'descriptiveText')); } /** @@ -174,18 +174,21 @@ class MoneyRequestConfirmationList extends Component { CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode), ); - sections.push({ - title: this.props.translate('moneyRequestConfirmationList.whoPaid'), - data: [formattedMyPersonalDetails], - shouldShow: true, - indexOffset: 0, - isDisabled: true, - }, { - title: this.props.translate('moneyRequestConfirmationList.whoWasThere'), - data: formattedParticipants, - shouldShow: true, - indexOffset: 1, - }); + sections.push( + { + title: this.props.translate('moneyRequestConfirmationList.whoPaid'), + data: [formattedMyPersonalDetails], + shouldShow: true, + indexOffset: 0, + isDisabled: true, + }, + { + title: this.props.translate('moneyRequestConfirmationList.whoWasThere'), + data: formattedParticipants, + shouldShow: true, + indexOffset: 1, + }, + ); } else { const formattedParticipants = this.getParticipantsWithoutAmount(this.props.participants); sections.push({ @@ -207,16 +210,13 @@ class MoneyRequestConfirmationList extends Component { return []; } const selectedParticipants = this.getSelectedParticipants(); - return [ - ...selectedParticipants, - OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(this.props.currentUserPersonalDetails), - ]; + return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(this.props.currentUserPersonalDetails)]; } /** - * Toggle selected option's selected prop. - * @param {Object} option - */ + * Toggle selected option's selected prop. + * @param {Object} option + */ toggleOption(option) { // Return early if selected option is currently logged in user. if (option.login === this.props.session.email) { @@ -280,8 +280,8 @@ class MoneyRequestConfirmationList extends Component { shouldShowTextInput={false} shouldUseStyleForChildren={false} optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}} - footerContent={shouldShowSettlementButton - ? ( + footerContent={ + shouldShowSettlementButton ? ( this.confirm(value)} options={this.getSplitOrRequestOptions()} /> - )} + ) + } > { }); const isSettled = false; // TODO: use ReportUtils.isSettled(props.report.reportID) once that method is added const isExpenseReport = ReportUtils.isExpenseReport(props.report); - const payeeName = isExpenseReport - ? ReportUtils.getPolicyName(props.report, props.policies) - : ReportUtils.getDisplayNameForParticipant(props.report.managerEmail); + const payeeName = isExpenseReport ? ReportUtils.getPolicyName(props.report, props.policies) : ReportUtils.getDisplayNameForParticipant(props.report.managerEmail); const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(props.report) : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.personalDetails); return ( - + {}, - }]} + threeDotsMenuItems={[ + { + icon: Expensicons.Trashcan, + text: props.translate('common.delete'), + onSelected: () => {}, + }, + ]} threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton} report={props.report} policies={props.policies} @@ -79,19 +75,8 @@ const MoneyRequestHeader = (props) => { /> {props.translate('common.to')} - - + + { - {!props.isSingleTransactionView && ( - {formattedAmount} - )} + {!props.isSingleTransactionView && {formattedAmount}} {isSettled && ( - + )} @@ -135,7 +121,4 @@ MoneyRequestHeader.displayName = 'MoneyRequestHeader'; MoneyRequestHeader.propTypes = propTypes; MoneyRequestHeader.defaultProps = defaultProps; -export default compose( - withWindowDimensions, - withLocalize, -)(MoneyRequestHeader); +export default compose(withWindowDimensions, withLocalize)(MoneyRequestHeader); diff --git a/src/components/OnyxProvider.js b/src/components/OnyxProvider.js index 4bb2f69941e1..6cee7e5b7a62 100644 --- a/src/components/OnyxProvider.js +++ b/src/components/OnyxProvider.js @@ -18,17 +18,8 @@ const propTypes = { children: PropTypes.node.isRequired, }; -const OnyxProvider = props => ( - +const OnyxProvider = (props) => ( + {props.children} ); @@ -38,12 +29,4 @@ OnyxProvider.propTypes = propTypes; export default OnyxProvider; -export { - withNetwork, - withPersonalDetails, - withReportActionsDrafts, - withCurrentDate, - withBlockedFromConcierge, - withBetas, - NetworkContext, -}; +export {withNetwork, withPersonalDetails, withReportActionsDrafts, withCurrentDate, withBlockedFromConcierge, withBetas, NetworkContext}; diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 3d0362062f2d..2771f699efe2 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -21,10 +21,7 @@ const propTypes = { shouldDelayFocus: PropTypes.bool, /** padding bottom style of safe area */ - safeAreaPaddingBottomStyle: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.object), - PropTypes.object, - ]), + safeAreaPaddingBottomStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), ...optionsSelectorPropTypes, ...withLocalizePropTypes, @@ -117,22 +114,25 @@ class BaseOptionsSelector extends Component { const newOptions = this.flattenSections(); const newFocusedIndex = this.props.selectedOptions.length; // eslint-disable-next-line react/no-did-update-set-state - this.setState({ - allOptions: newOptions, - focusedIndex: newFocusedIndex, - }, () => { - // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top - if (this.props.selectedOptions.length !== prevProps.selectedOptions.length || this.props.value === '') { - this.scrollToIndex(0); - return; - } + this.setState( + { + allOptions: newOptions, + focusedIndex: newFocusedIndex, + }, + () => { + // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top + if (this.props.selectedOptions.length !== prevProps.selectedOptions.length || this.props.value === '') { + this.scrollToIndex(0); + return; + } - // Otherwise, scroll to the focused index (as long as it's in range) - if (this.state.allOptions.length <= this.state.focusedIndex) { - return; - } - this.scrollToIndex(this.state.focusedIndex); - }); + // Otherwise, scroll to the focused index (as long as it's in range) + if (this.state.allOptions.length <= this.state.focusedIndex) { + return; + } + this.scrollToIndex(this.state.focusedIndex); + }, + ); } componentWillUnmount() { @@ -162,7 +162,7 @@ class BaseOptionsSelector extends Component { return defaultIndex; } - const indexOfInitiallyFocusedOption = _.findIndex(allOptions, option => option.keyForList === this.props.initiallyFocusedOptionKey); + const indexOfInitiallyFocusedOption = _.findIndex(allOptions, (option) => option.keyForList === this.props.initiallyFocusedOptionKey); if (indexOfInitiallyFocusedOption >= 0) { return indexOfInitiallyFocusedOption; @@ -268,15 +268,12 @@ class BaseOptionsSelector extends Component { } render() { - const shouldShowFooter = (this.props.shouldShowConfirmButton || this.props.footerContent) - && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions)); - const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) - ? this.props.translate('common.confirm') - : this.props.confirmButtonText; + const shouldShowFooter = (this.props.shouldShowConfirmButton || this.props.footerContent) && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions)); + const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText; const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText; const textInput = ( this.textInput = el} + ref={(el) => (this.textInput = el)} value={this.props.value} label={this.props.textInputLabel} onChangeText={this.props.onChangeText} @@ -295,7 +292,7 @@ class BaseOptionsSelector extends Component { ); const optionsList = this.props.shouldShowOptions ? ( this.list = el} + ref={(el) => (this.list = el)} optionHoveredStyle={this.props.optionHoveredStyle} onSelectRow={this.selectRow} sections={this.props.sections} @@ -319,7 +316,9 @@ class BaseOptionsSelector extends Component { }} contentContainerStyles={shouldShowFooter ? undefined : [this.props.safeAreaPaddingBottomStyle]} /> - ) : ; + ) : ( + + ); return ( {} : this.updateFocusedIndex} > - { - this.props.shouldTextInputAppearBelowOptions - ? ( - <> - - {optionsList} - - - {this.props.children} - {this.props.shouldShowTextInput && textInput} - - - ) : ( - <> - - {this.props.children} - {this.props.shouldShowTextInput && textInput} - - {optionsList} - - ) - } + {this.props.shouldTextInputAppearBelowOptions ? ( + <> + {optionsList} + + {this.props.children} + {this.props.shouldShowTextInput && textInput} + + + ) : ( + <> + + {this.props.children} + {this.props.shouldShowTextInput && textInput} + + {optionsList} + + )} {shouldShowFooter && ( diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index dda149e90c21..817fdfa27951 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -48,39 +48,19 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, }; -const EmojiReactionBubble = props => ( +const EmojiReactionBubble = (props) => ( [ - styles.emojiReactionBubble, - StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu), - ]} + style={({hovered, pressed}) => [styles.emojiReactionBubble, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu)]} onPress={props.onPress} onLongPress={props.onReactionListOpen} onSecondaryInteraction={props.onReactionListOpen} ref={props.forwardedRef} enableLongPressWithHover={props.isSmallScreenWidth} - // Prevent text input blur when emoji reaction is clicked - onMouseDown={e => e.preventDefault()} + onMouseDown={(e) => e.preventDefault()} > - - {props.emojiCodes.join('')} - - {props.count > 0 && ( - - {props.count} - - )} + {props.emojiCodes.join('')} + {props.count > 0 && {props.count}} ); @@ -88,7 +68,12 @@ EmojiReactionBubble.propTypes = propTypes; EmojiReactionBubble.defaultProps = defaultProps; EmojiReactionBubble.displayName = 'EmojiReactionBubble'; -export default withWindowDimensions(React.forwardRef((props, ref) => ( - /* eslint-disable-next-line react/jsx-props-no-spreading */ - -))); +export default withWindowDimensions( + React.forwardRef((props, ref) => ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + + )), +); diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js index 2eddd6d4f1a6..f48f2d492cbf 100644 --- a/src/components/Reactions/ReportActionItemReactions.js +++ b/src/components/Reactions/ReportActionItemReactions.js @@ -66,18 +66,17 @@ const defaultProps = { const ReportActionItemReactions = (props) => { const popoverReactionListAnchor = useRef(null); - const reactionsWithCount = _.filter(props.reactions, reaction => reaction.users.length > 0); + const reactionsWithCount = _.filter(props.reactions, (reaction) => reaction.users.length > 0); return ( - {_.map(reactionsWithCount, (reaction) => { const reactionCount = reaction.users.length; - const reactionUsers = _.map(reaction.users, sender => sender.accountID.toString()); - const emoji = _.find(emojis, e => e.name === reaction.emoji); + const reactionUsers = _.map(reaction.users, (sender) => sender.accountID.toString()); + const emoji = _.find(emojis, (e) => e.name === reaction.emoji); const emojiCodes = getUniqueEmojiCodes(emoji, reaction.users); const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, reactionUsers); @@ -86,15 +85,7 @@ const ReportActionItemReactions = (props) => { }; const onReactionListOpen = (event) => { const users = PersonalDetailsUtils.getPersonalDetailsByIDs(reactionUsers); - ReactionList.showReactionList( - event, - popoverReactionListAnchor.current, - users, - reaction.emoji, - emojiCodes, - reactionCount, - hasUserReacted, - ); + ReactionList.showReactionList(event, popoverReactionListAnchor.current, users, reaction.emoji, emojiCodes, reactionCount, hasUserReacted); }; return ( @@ -118,7 +109,6 @@ const ReportActionItemReactions = (props) => { onReactionListOpen={onReactionListOpen} /> - ); })} {reactionsWithCount.length > 0 && } @@ -130,4 +120,3 @@ ReportActionItemReactions.displayName = 'ReportActionItemReactions'; ReportActionItemReactions.propTypes = propTypes; ReportActionItemReactions.defaultProps = defaultProps; export default withCurrentUserPersonalDetails(ReportActionItemReactions); - diff --git a/src/components/ReportActionItem/IOUAction.js b/src/components/ReportActionItem/IOUAction.js index a08e9535f43b..c304129517b6 100644 --- a/src/components/ReportActionItem/IOUAction.js +++ b/src/components/ReportActionItem/IOUAction.js @@ -82,12 +82,12 @@ const IOUAction = (props) => { let shouldShowPendingConversionMessage = false; if ( - !_.isEmpty(props.iouReport) - && !_.isEmpty(props.reportActions) - && props.chatReport.hasOutstandingIOU - && props.isMostRecentIOUReportAction - && props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD - && props.network.isOffline + !_.isEmpty(props.iouReport) && + !_.isEmpty(props.reportActions) && + props.chatReport.hasOutstandingIOU && + props.isMostRecentIOUReportAction && + props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && + props.network.isOffline ) { shouldShowPendingConversionMessage = IOUUtils.isIOUReportPendingCurrencyConversion(props.reportActions, props.iouReport); } @@ -113,12 +113,7 @@ const IOUAction = (props) => { shouldShowPendingConversionMessage={shouldShowPendingConversionMessage} onPayButtonPressed={onIOUPreviewPressed} onPreviewPressed={onIOUPreviewPressed} - containerStyles={[ - styles.cursorPointer, - props.isHovered - ? styles.iouPreviewBoxHover - : undefined, - ]} + containerStyles={[styles.cursorPointer, props.isHovered ? styles.iouPreviewBoxHover : undefined]} isHovered={props.isHovered} /> )} diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js index d3a43c07384e..f33c5646da01 100644 --- a/src/components/ReportActionItem/IOUPreview.js +++ b/src/components/ReportActionItem/IOUPreview.js @@ -1,8 +1,5 @@ import React from 'react'; -import { - View, - Pressable, -} from 'react-native'; +import {View, Pressable} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; @@ -99,7 +96,7 @@ const propTypes = { /** Whether or not an IOU report contains money requests in a different currency * that are either created or cancelled offline, and thus haven't been converted to the report's currency yet - */ + */ shouldShowPendingConversionMessage: PropTypes.bool, ...withLocalizePropTypes, @@ -154,13 +151,7 @@ const IOUPreview = (props) => { return; } - showContextMenuForReport( - event, - props.contextMenuAnchor, - props.chatReportID, - props.action, - props.checkIfContextMenuActive, - ); + showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive); }; const childContainer = ( @@ -176,56 +167,46 @@ const IOUPreview = (props) => { needsOffscreenAlphaCompositing > - - {props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')} - + {props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')} - - {CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)} - + {CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)} {!props.iouReport.hasOutstandingIOU && !props.isBillSplit && ( - + )} {!isCurrentUserManager && props.shouldShowPendingConversionMessage && ( - - {props.translate('iou.pendingConversionMessage')} - + {props.translate('iou.pendingConversionMessage')} )} {lodashGet(props.action, 'originalMessage.comment', '')} - {(isCurrentUserManager - && !props.shouldHidePayButton - && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && ( -