diff --git a/__mocks__/react-native-safe-area-context.js b/__mocks__/react-native-safe-area-context.js
index f17c34cf326e..4b4af7841c2c 100644
--- a/__mocks__/react-native-safe-area-context.js
+++ b/__mocks__/react-native-safe-area-context.js
@@ -9,15 +9,17 @@ const insets = {
};
function withSafeAreaInsets(WrappedComponent) {
- const WithSafeAreaInsets = (props) => (
-
- );
+ function WithSafeAreaInsets(props) {
+ return (
+
+ );
+ }
return forwardRef((props, ref) => (
CFBundleVersion
- 1.3.27.2
+ 1.3.27.6
ITSAppUsesNonExemptEncryption
LSApplicationQueriesSchemes
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index d592de749f1a..98de86749f65 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
CFBundleSignature
????
CFBundleVersion
- 1.3.27.2
+ 1.3.27.6
diff --git a/package-lock.json b/package-lock.json
index a5c3730edc70..e41a4b799939 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "new.expensify",
- "version": "1.3.27-2",
+ "version": "1.3.27-6",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "new.expensify",
- "version": "1.3.27-2",
+ "version": "1.3.27-6",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@@ -147,7 +147,7 @@
"electron": "22.3.7",
"electron-builder": "24.4.0",
"eslint": "^7.6.0",
- "eslint-config-expensify": "^2.0.36",
+ "eslint-config-expensify": "^2.0.38",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
@@ -22542,9 +22542,9 @@
}
},
"node_modules/eslint-config-expensify": {
- "version": "2.0.36",
- "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.36.tgz",
- "integrity": "sha512-8tQsyWhPUFRGJYCucTJd2FFVOOUQfsxGlGynVncCKgI96fmkagurhAu/zteszW0Ora6gAf7BkIuW6z6ZKKBdjg==",
+ "version": "2.0.38",
+ "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.38.tgz",
+ "integrity": "sha512-jAlrYSjkDV8YESUUPcaTjUM8Fgru+37FS+Hq6zzcRR0FbA5bLiOPguhJHo77XpYh5N+PEf4wrpgsS04sjdgDPg==",
"dev": true,
"dependencies": {
"@lwc/eslint-plugin-lwc": "^0.11.0",
@@ -58409,9 +58409,9 @@
}
},
"eslint-config-expensify": {
- "version": "2.0.36",
- "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.36.tgz",
- "integrity": "sha512-8tQsyWhPUFRGJYCucTJd2FFVOOUQfsxGlGynVncCKgI96fmkagurhAu/zteszW0Ora6gAf7BkIuW6z6ZKKBdjg==",
+ "version": "2.0.38",
+ "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.38.tgz",
+ "integrity": "sha512-jAlrYSjkDV8YESUUPcaTjUM8Fgru+37FS+Hq6zzcRR0FbA5bLiOPguhJHo77XpYh5N+PEf4wrpgsS04sjdgDPg==",
"dev": true,
"requires": {
"@lwc/eslint-plugin-lwc": "^0.11.0",
diff --git a/package.json b/package.json
index 492a1721429c..ce038ba58f04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "new.expensify",
- "version": "1.3.27-2",
+ "version": "1.3.27-6",
"author": "Expensify, Inc.",
"homepage": "https://new.expensify.com",
"description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -183,7 +183,7 @@
"electron": "22.3.7",
"electron-builder": "24.4.0",
"eslint": "^7.6.0",
- "eslint-config-expensify": "^2.0.36",
+ "eslint-config-expensify": "^2.0.38",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
diff --git a/src/App.js b/src/App.js
index 2b47d8ddcd28..af27b3a6f854 100644
--- a/src/App.js
+++ b/src/App.js
@@ -33,29 +33,31 @@ LogBox.ignoreLogs([
const fill = {flex: 1};
-const App = () => (
-
-
-
-
-
-
-
-
-);
+function App() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
App.displayName = 'App';
diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
index 2581bde85b4e..e5f6bf946f16 100644
--- a/src/components/AddPaymentMethodMenu.js
+++ b/src/components/AddPaymentMethodMenu.js
@@ -43,41 +43,43 @@ const defaultProps = {
betas: [],
};
-const AddPaymentMethodMenu = (props) => (
- {
- props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
+function AddPaymentMethodMenu(props) {
+ return (
+ {
+ props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
+ },
},
- },
- ...(Permissions.canUseWallet(props.betas)
- ? [
- {
- text: props.translate('common.debitCard'),
- icon: Expensicons.CreditCard,
- onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
- },
- ]
- : []),
- ...(props.shouldShowPaypal && !props.payPalMeData.description
- ? [
- {
- text: props.translate('common.payPalMe'),
- icon: Expensicons.PayPal,
- onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL),
- },
- ]
- : []),
- ]}
- />
-);
+ ...(Permissions.canUseWallet(props.betas)
+ ? [
+ {
+ text: props.translate('common.debitCard'),
+ icon: Expensicons.CreditCard,
+ onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
+ },
+ ]
+ : []),
+ ...(props.shouldShowPaypal && !props.payPalMeData.description
+ ? [
+ {
+ text: props.translate('common.payPalMe'),
+ icon: Expensicons.PayPal,
+ onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL),
+ },
+ ]
+ : []),
+ ]}
+ />
+ );
+}
AddPaymentMethodMenu.propTypes = propTypes;
AddPaymentMethodMenu.defaultProps = defaultProps;
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 5219c5b4855f..9699eb9aab94 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -91,7 +91,7 @@ const defaultProps = {
// Do not convert to class component! It's been tried before and presents more challenges than it's worth.
// Relevant thread: https://expensify.slack.com/archives/C03TQ48KC/p1634088400387400
// Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
-const AddressSearch = (props) => {
+function AddressSearch(props) {
const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
const containerRef = useRef();
const query = useMemo(
@@ -291,7 +291,7 @@ const AddressSearch = (props) => {
);
-};
+}
AddressSearch.propTypes = propTypes;
AddressSearch.defaultProps = defaultProps;
diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
index 03f293d12f71..f20f798768c2 100644
--- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
+++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
@@ -34,7 +34,7 @@ const defaultProps = {
...anchorForAttachmentsOnlyDefaultProps,
};
-const BaseAnchorForAttachmentsOnly = (props) => {
+function BaseAnchorForAttachmentsOnly(props) {
const sourceURL = props.source;
const sourceURLWithAuth = addEncryptedAuthTokenToURL(sourceURL);
const sourceID = (sourceURL.match(CONST.REGEX.ATTACHMENT_ID) || [])[1];
@@ -70,7 +70,7 @@ const BaseAnchorForAttachmentsOnly = (props) => {
)}
);
-};
+}
BaseAnchorForAttachmentsOnly.displayName = 'BaseAnchorForAttachmentsOnly';
BaseAnchorForAttachmentsOnly.propTypes = propTypes;
diff --git a/src/components/AnchorForAttachmentsOnly/index.js b/src/components/AnchorForAttachmentsOnly/index.js
index d4d607d3cc65..1a58aa4b3ae1 100644
--- a/src/components/AnchorForAttachmentsOnly/index.js
+++ b/src/components/AnchorForAttachmentsOnly/index.js
@@ -4,14 +4,16 @@ import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
import ControlSelection from '../../libs/ControlSelection';
-const AnchorForAttachmentsOnly = (props) => (
- DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
- onPressOut={() => ControlSelection.unblock()}
- />
-);
+function AnchorForAttachmentsOnly(props) {
+ return (
+ DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+ onPressOut={() => ControlSelection.unblock()}
+ />
+ );
+}
AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;
diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js
index 4fcdd2e6cff3..f27aad641186 100644
--- a/src/components/AnchorForAttachmentsOnly/index.native.js
+++ b/src/components/AnchorForAttachmentsOnly/index.native.js
@@ -3,13 +3,15 @@ import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPr
import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
import styles from '../../styles/styles';
-const AnchorForAttachmentsOnly = (props) => (
-
-);
+function AnchorForAttachmentsOnly(props) {
+ return (
+
+ );
+}
AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 1f95ead89a4c..191af3613e1f 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -11,7 +11,6 @@ import * as ContextMenuActions from '../../pages/home/report/ContextMenu/Context
import Tooltip from '../Tooltip';
import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
import {propTypes as anchorForCommentsOnlyPropTypes, defaultProps as anchorForCommentsOnlyDefaultProps} from './anchorForCommentsOnlyPropTypes';
@@ -39,7 +38,7 @@ const defaultProps = {
/*
* This is a default anchor component for regular links.
*/
-const BaseAnchorForCommentsOnly = (props) => {
+function BaseAnchorForCommentsOnly(props) {
let linkRef;
const rest = _.omit(props, _.keys(propTypes));
const linkProps = {};
@@ -54,7 +53,6 @@ const BaseAnchorForCommentsOnly = (props) => {
return (
{
ReportActionContextMenu.showContextMenu(
isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
@@ -87,7 +85,7 @@ const BaseAnchorForCommentsOnly = (props) => {
);
-};
+}
BaseAnchorForCommentsOnly.propTypes = propTypes;
BaseAnchorForCommentsOnly.defaultProps = defaultProps;
diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js
index 1ea73d5a648d..9ded866b7cdf 100644
--- a/src/components/AnchorForCommentsOnly/index.js
+++ b/src/components/AnchorForCommentsOnly/index.js
@@ -1,17 +1,23 @@
import React from 'react';
+import {View} from 'react-native';
import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
import ControlSelection from '../../libs/ControlSelection';
+import styles from '../../styles/styles';
-const AnchorForCommentsOnly = (props) => (
- DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
- onPressOut={() => ControlSelection.unblock()}
- />
-);
+function AnchorForCommentsOnly(props) {
+ return (
+
+ DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+ onPressOut={() => ControlSelection.unblock()}
+ />
+
+ );
+}
AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;
AnchorForCommentsOnly.defaultProps = anchorForCommentsOnlyPropTypes.defaultProps;
diff --git a/src/components/AnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/index.native.js
index 21b922f52794..69211b75e855 100644
--- a/src/components/AnchorForCommentsOnly/index.native.js
+++ b/src/components/AnchorForCommentsOnly/index.native.js
@@ -6,7 +6,7 @@ import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropType
import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
// eslint-disable-next-line react/jsx-props-no-spreading
-const AnchorForCommentsOnly = (props) => {
+function AnchorForCommentsOnly(props) {
const onPress = () => (_.isFunction(props.onPress) ? props.onPress() : Linking.openURL(props.href));
return (
@@ -16,7 +16,7 @@ const AnchorForCommentsOnly = (props) => {
onPress={onPress}
/>
);
-};
+}
AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;
AnchorForCommentsOnly.defaultProps = anchorForCommentsOnlyPropTypes.defaultProps;
diff --git a/src/components/AnimatedStep.js b/src/components/AnimatedStep.js
index 0cd7261eb501..dce06cb33760 100644
--- a/src/components/AnimatedStep.js
+++ b/src/components/AnimatedStep.js
@@ -21,7 +21,7 @@ const defaultProps = {
style: [],
};
-const AnimatedStep = (props) => {
+function AnimatedStep(props) {
function getAnimationStyle(direction) {
let animationStyle;
@@ -43,7 +43,7 @@ const AnimatedStep = (props) => {
{props.children}
);
-};
+}
AnimatedStep.propTypes = propTypes;
AnimatedStep.defaultProps = defaultProps;
diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js
index 2b92c20d127c..08a4a04e64dd 100644
--- a/src/components/AnonymousReportFooter.js
+++ b/src/components/AnonymousReportFooter.js
@@ -23,33 +23,35 @@ const defaultProps = {
report: {},
};
-const AnonymousReportFooter = (props) => (
-
-
-
-
-
-
-
-
-
- {props.translate('anonymousReportFooter.logoTagline')}
-
-
-
-);
+ );
+}
AnonymousReportFooter.propTypes = propTypes;
AnonymousReportFooter.defaultProps = defaultProps;
diff --git a/src/components/ArchivedReportFooter.js b/src/components/ArchivedReportFooter.js
index 75117cd4cb42..db8deadecd83 100644
--- a/src/components/ArchivedReportFooter.js
+++ b/src/components/ArchivedReportFooter.js
@@ -47,7 +47,7 @@ const defaultProps = {
personalDetails: {},
};
-const ArchivedReportFooter = (props) => {
+function ArchivedReportFooter(props) {
const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT);
let displayName = lodashGet(props.personalDetails, `${props.report.ownerEmail}.displayName`, props.report.ownerEmail);
@@ -71,7 +71,7 @@ const ArchivedReportFooter = (props) => {
shouldShowIcon
/>
);
-};
+}
ArchivedReportFooter.propTypes = propTypes;
ArchivedReportFooter.defaultProps = defaultProps;
diff --git a/src/components/AttachmentCarousel/CarouselActions.js b/src/components/AttachmentCarousel/CarouselActions.js
index 3946a613ee16..a33bb854d872 100644
--- a/src/components/AttachmentCarousel/CarouselActions.js
+++ b/src/components/AttachmentCarousel/CarouselActions.js
@@ -9,7 +9,7 @@ const propTypes = {
onCycleThroughAttachments: PropTypes.func.isRequired,
};
-const Carousel = (props) => {
+function Carousel(props) {
useEffect(() => {
const shortcutLeftConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT;
const unsubscribeLeftKey = KeyboardShortcut.subscribe(
@@ -49,7 +49,7 @@ const Carousel = (props) => {
}, []);
return null;
-};
+}
Carousel.propTypes = propTypes;
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index cf9814149322..e5d4fd1bf299 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -63,7 +63,7 @@ const defaultProps = {
containerStyles: [],
};
-const AttachmentView = (props) => {
+function AttachmentView(props) {
const [loadComplete, setLoadComplete] = useState(false);
const containerStyles = [styles.flex1, styles.flexRow, styles.alignSelfStretch];
@@ -155,7 +155,7 @@ const AttachmentView = (props) => {
)}
);
-};
+}
AttachmentView.propTypes = propTypes;
AttachmentView.defaultProps = defaultProps;
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
index fe0aee5ac805..65ac1dc3edfe 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
@@ -24,7 +24,7 @@ const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
return numRows * CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT;
};
-const BaseAutoCompleteSuggestions = (props) => {
+function BaseAutoCompleteSuggestions(props) {
const rowHeight = useSharedValue(0);
/**
* Render a suggestion menu item component.
@@ -73,7 +73,7 @@ const BaseAutoCompleteSuggestions = (props) => {
/>
);
-};
+}
BaseAutoCompleteSuggestions.propTypes = propTypes;
BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.js
index a04eb18b73ef..9e1951d9a1d5 100644
--- a/src/components/AutoCompleteSuggestions/index.js
+++ b/src/components/AutoCompleteSuggestions/index.js
@@ -10,7 +10,7 @@ import {propTypes} from './autoCompleteSuggestionsPropTypes';
* On the native platform, tapping on auto-complete suggestions will not blur the main input.
*/
-const AutoCompleteSuggestions = (props) => {
+function AutoCompleteSuggestions(props) {
const containerRef = React.useRef(null);
React.useEffect(() => {
const container = containerRef.current;
@@ -33,7 +33,7 @@ const AutoCompleteSuggestions = (props) => {
ref={containerRef}
/>
);
-};
+}
AutoCompleteSuggestions.propTypes = propTypes;
AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.js
index db701406092d..22af774bd4fc 100644
--- a/src/components/AutoCompleteSuggestions/index.native.js
+++ b/src/components/AutoCompleteSuggestions/index.native.js
@@ -2,10 +2,10 @@ import React from 'react';
import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
import {propTypes} from './autoCompleteSuggestionsPropTypes';
-const AutoCompleteSuggestions = (props) => (
+function AutoCompleteSuggestions(props) {
// eslint-disable-next-line react/jsx-props-no-spreading
-
-);
+ return ;
+}
AutoCompleteSuggestions.propTypes = propTypes;
AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
diff --git a/src/components/AutoEmailLink.js b/src/components/AutoEmailLink.js
index f99c8ea76f3c..9f39997bce13 100644
--- a/src/components/AutoEmailLink.js
+++ b/src/components/AutoEmailLink.js
@@ -21,32 +21,34 @@ const defaultProps = {
* - Else just render it inside `Text` component
*/
-const AutoEmailLink = (props) => (
-
- {_.map(props.text.split(CONST.REG_EXP.EXTRACT_EMAIL), (str, index) => {
- if (CONST.REG_EXP.EMAIL.test(str)) {
+function AutoEmailLink(props) {
+ return (
+
+ {_.map(props.text.split(CONST.REG_EXP.EXTRACT_EMAIL), (str, index) => {
+ if (CONST.REG_EXP.EMAIL.test(str)) {
+ return (
+
+ {str}
+
+ );
+ }
+
return (
-
{str}
-
+
);
- }
-
- return (
-
- {str}
-
- );
- })}
-
-);
+ })}
+
+ );
+}
AutoEmailLink.displayName = 'AutoEmailLink';
AutoEmailLink.propTypes = propTypes;
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index af113276a2be..55dd36bb08e1 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -58,7 +58,7 @@ const defaultProps = {
};
// This component can't be written using class since reanimated API uses hooks.
-const AvatarCropModal = (props) => {
+function AvatarCropModal(props) {
const originalImageWidth = useSharedValue(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE);
const originalImageHeight = useSharedValue(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE);
const translateY = useSharedValue(0);
@@ -433,7 +433,7 @@ const AvatarCropModal = (props) => {
/>
);
-};
+}
AvatarCropModal.displayName = 'AvatarCropModal';
AvatarCropModal.propTypes = propTypes;
diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
index 3ad72bd3d674..be19109d7379 100644
--- a/src/components/AvatarCropModal/ImageCropView.js
+++ b/src/components/AvatarCropModal/ImageCropView.js
@@ -49,7 +49,7 @@ const defaultProps = {
maskImage: Expensicons.ImageCropCircleMask,
};
-const ImageCropView = (props) => {
+function ImageCropView(props) {
const containerStyle = StyleUtils.getWidthAndHeightStyle(props.containerSize, props.containerSize);
const originalImageHeight = props.originalImageHeight;
@@ -93,7 +93,7 @@ const ImageCropView = (props) => {
);
-};
+}
ImageCropView.displayName = 'ImageCropView';
ImageCropView.propTypes = propTypes;
diff --git a/src/components/AvatarCropModal/Slider.js b/src/components/AvatarCropModal/Slider.js
index 2877b3a9c917..573ee781e5f8 100644
--- a/src/components/AvatarCropModal/Slider.js
+++ b/src/components/AvatarCropModal/Slider.js
@@ -25,7 +25,7 @@ const defaultProps = {
};
// This component can't be written using class since reanimated API uses hooks.
-const Slider = (props) => {
+function Slider(props) {
const sliderValue = props.sliderValue;
const [tooltipIsVisible, setTooltipIsVisible] = useState(true);
@@ -60,7 +60,7 @@ const Slider = (props) => {
);
-};
+}
Slider.displayName = 'Slider';
Slider.propTypes = propTypes;
diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
index 6da7f00f5637..66c2b4821b33 100644
--- a/src/components/AvatarWithDisplayName.js
+++ b/src/components/AvatarWithDisplayName.js
@@ -49,7 +49,7 @@ const defaultProps = {
size: CONST.AVATAR_SIZE.DEFAULT,
};
-const AvatarWithDisplayName = (props) => {
+function AvatarWithDisplayName(props) {
const title = props.isAnonymous ? props.report.displayName : ReportUtils.getDisplayNameForParticipant(props.report.ownerEmail, true);
const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
const isExpenseReport = ReportUtils.isExpenseReport(props.report);
@@ -101,7 +101,7 @@ const AvatarWithDisplayName = (props) => {
)}
);
-};
+}
AvatarWithDisplayName.propTypes = propTypes;
AvatarWithDisplayName.displayName = 'AvatarWithDisplayName';
AvatarWithDisplayName.defaultProps = defaultProps;
diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js
index 1835e739c25b..f59818099914 100644
--- a/src/components/AvatarWithIndicator.js
+++ b/src/components/AvatarWithIndicator.js
@@ -71,7 +71,7 @@ const defaultProps = {
loginList: {},
};
-const AvatarWithIndicator = (props) => {
+function AvatarWithIndicator(props) {
// If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and
// those should be cleaned out before doing any error checking
const cleanPolicies = _.pick(props.policies, (policy) => policy);
@@ -107,7 +107,7 @@ const AvatarWithIndicator = (props) => {
);
-};
+}
AvatarWithIndicator.defaultProps = defaultProps;
AvatarWithIndicator.propTypes = propTypes;
diff --git a/src/components/Badge.js b/src/components/Badge.js
index 01861c6c30ff..b3e0fdb88b64 100644
--- a/src/components/Badge.js
+++ b/src/components/Badge.js
@@ -44,7 +44,7 @@ const defaultProps = {
environment: CONST.ENVIRONMENT.DEV,
};
-const Badge = (props) => {
+function Badge(props) {
const textStyles = props.success || props.error ? styles.textWhite : undefined;
const Wrapper = props.pressable ? Pressable : View;
const wrapperStyles = ({pressed}) => [
@@ -67,7 +67,7 @@ const Badge = (props) => {
);
-};
+}
Badge.displayName = 'Badge';
Badge.propTypes = propTypes;
diff --git a/src/components/Banner.js b/src/components/Banner.js
index d52286bb2e4c..d89e0332331a 100644
--- a/src/components/Banner.js
+++ b/src/components/Banner.js
@@ -54,59 +54,61 @@ const defaultProps = {
textStyles: [],
};
-const Banner = (props) => (
-
- {(isHovered) => {
- const isClickable = props.onClose || props.onPress;
- const shouldHighlight = isClickable && isHovered;
- return (
-
-
- {props.shouldShowIcon && (
-
-
-
- )}
- {props.shouldRenderHTML ? (
-
- ) : (
-
- {props.text}
-
+function Banner(props) {
+ return (
+
+ {(isHovered) => {
+ const isClickable = props.onClose || props.onPress;
+ const shouldHighlight = isClickable && isHovered;
+ return (
+
+
+ {props.shouldShowIcon && (
+
+
+
+ )}
+ {props.shouldRenderHTML ? (
+
+ ) : (
+
+ {props.text}
+
+ )}
+
+ {props.shouldShowCloseButton && (
+
+
+
+
+
)}
- {props.shouldShowCloseButton && (
-
-
-
-
-
- )}
-
- );
- }}
-
-);
+ );
+ }}
+
+ );
+}
Banner.propTypes = propTypes;
Banner.defaultProps = defaultProps;
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index 47e6ab6cd7dd..67430902a947 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -46,26 +46,28 @@ const defaultProps = {
* @param {Object} props
* @returns {JSX.Element}
*/
-const BaseMiniContextMenuItem = (props) => (
-
- [
- styles.reportActionContextMenuMiniButton,
- StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
- ]}
- >
- {(pressableState) => (
-
- {_.isFunction(props.children) ? props.children(pressableState) : props.children}
-
- )}
-
-
-);
+function BaseMiniContextMenuItem(props) {
+ return (
+
+ [
+ styles.reportActionContextMenuMiniButton,
+ StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
+ ]}
+ >
+ {(pressableState) => (
+
+ {_.isFunction(props.children) ? props.children(pressableState) : props.children}
+
+ )}
+
+
+ );
+}
BaseMiniContextMenuItem.propTypes = propTypes;
BaseMiniContextMenuItem.defaultProps = defaultProps;
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index 0ac4ec4a9e13..d02fa55a6434 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -49,29 +49,31 @@ const defaultProps = {
onLinkPress: () => Navigation.dismissModal(),
};
-const BlockingView = (props) => (
-
-
- {props.title}
-
- {props.shouldShowLink ? (
-
- {props.link}
-
- ) : null}
-
-);
+function BlockingView(props) {
+ return (
+
+
+ {props.title}
+
+ {props.shouldShowLink ? (
+
+ {props.link}
+
+ ) : null}
+
+ );
+}
BlockingView.propTypes = propTypes;
BlockingView.defaultProps = defaultProps;
diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js
index d62f2c2203fb..93006fc8f170 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.js
+++ b/src/components/BlockingViews/FullPageNotFoundView.js
@@ -50,7 +50,7 @@ const defaultProps = {
};
// eslint-disable-next-line rulesdir/no-negated-variables
-const FullPageNotFoundView = (props) => {
+function FullPageNotFoundView(props) {
if (props.shouldShow) {
return (
<>
@@ -72,7 +72,7 @@ const FullPageNotFoundView = (props) => {
}
return props.children;
-};
+}
FullPageNotFoundView.propTypes = propTypes;
FullPageNotFoundView.defaultProps = defaultProps;
diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.js b/src/components/BlockingViews/FullPageOfflineBlockingView.js
index 490753c9abf4..148c7c751bee 100644
--- a/src/components/BlockingViews/FullPageOfflineBlockingView.js
+++ b/src/components/BlockingViews/FullPageOfflineBlockingView.js
@@ -18,7 +18,7 @@ const propTypes = {
network: networkPropTypes.isRequired,
};
-const FullPageOfflineBlockingView = (props) => {
+function FullPageOfflineBlockingView(props) {
if (props.network.isOffline) {
return (
{
}
return props.children;
-};
+}
FullPageOfflineBlockingView.propTypes = propTypes;
FullPageOfflineBlockingView.displayName = 'FullPageOfflineBlockingView';
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 0d7cfc570670..a16d5044ab58 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -48,7 +48,7 @@ const defaultProps = {
style: [],
};
-const ButtonWithDropdownMenu = (props) => {
+function ButtonWithDropdownMenu(props) {
const [selectedItemIndex, setSelectedItemIndex] = useState(0);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const [popoverAnchorPosition, setPopoverAnchorPosition] = useState(null);
@@ -130,7 +130,7 @@ const ButtonWithDropdownMenu = (props) => {
)}
);
-};
+}
ButtonWithDropdownMenu.propTypes = propTypes;
ButtonWithDropdownMenu.defaultProps = defaultProps;
diff --git a/src/components/CalendarPicker/ArrowIcon.js b/src/components/CalendarPicker/ArrowIcon.js
index aea61b39122e..75312c894524 100644
--- a/src/components/CalendarPicker/ArrowIcon.js
+++ b/src/components/CalendarPicker/ArrowIcon.js
@@ -20,11 +20,13 @@ const defaultProps = {
direction: CONST.DIRECTION.RIGHT,
};
-const ArrowIcon = (props) => (
-
-
-
-);
+function ArrowIcon(props) {
+ return (
+
+
+
+ );
+}
ArrowIcon.displayName = 'ArrowIcon';
ArrowIcon.propTypes = propTypes;
diff --git a/src/components/CardOverlay.js b/src/components/CardOverlay.js
index b1fb7d47eb2a..5a94b48ec9af 100644
--- a/src/components/CardOverlay.js
+++ b/src/components/CardOverlay.js
@@ -2,7 +2,9 @@ import React from 'react';
import {View} from 'react-native';
import styles from '../styles/styles';
-const CardOverlay = () => ;
+function CardOverlay() {
+ return ;
+}
CardOverlay.displayName = 'CardOverlay';
export default CardOverlay;
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index a11af52f6887..cdf3c29ac8d1 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -78,7 +78,7 @@ const defaultProps = {
forwardedRef: () => {},
};
-const CheckboxWithLabel = (props) => {
+function CheckboxWithLabel(props) {
// We need to pick the first value that is strictly a boolean
// https://github.com/Expensify/App/issues/16885#issuecomment-1520846065
const [isChecked, setIsChecked] = useState(_.find([props.value, props.defaultValue, props.isChecked], (value) => _.isBoolean(value)));
@@ -122,7 +122,7 @@ const CheckboxWithLabel = (props) => {
);
-};
+}
CheckboxWithLabel.propTypes = propTypes;
CheckboxWithLabel.defaultProps = defaultProps;
diff --git a/src/components/CheckboxWithTooltip/index.js b/src/components/CheckboxWithTooltip/index.js
index 06f958c0ee1a..12f67fcd8c8a 100644
--- a/src/components/CheckboxWithTooltip/index.js
+++ b/src/components/CheckboxWithTooltip/index.js
@@ -6,7 +6,7 @@ import {propTypes, defaultProps} from './checkboxWithTooltipPropTypes';
import Tooltip from '../Tooltip';
import withWindowDimensions from '../withWindowDimensions';
-const CheckboxWithTooltip = (props) => {
+function CheckboxWithTooltip(props) {
if (props.isSmallScreenWidth || props.isMediumScreenWidth) {
return (
{
)}
);
-};
+}
CheckboxWithTooltip.propTypes = propTypes;
CheckboxWithTooltip.defaultProps = defaultProps;
diff --git a/src/components/CheckboxWithTooltip/index.native.js b/src/components/CheckboxWithTooltip/index.native.js
index 3e007efcd3ae..56605f95ac2e 100644
--- a/src/components/CheckboxWithTooltip/index.native.js
+++ b/src/components/CheckboxWithTooltip/index.native.js
@@ -3,15 +3,17 @@ import {propTypes, defaultProps} from './checkboxWithTooltipPropTypes';
import withWindowDimensions from '../withWindowDimensions';
import CheckboxWithTooltipForMobileWebAndNative from './CheckboxWithTooltipForMobileWebAndNative';
-const CheckboxWithTooltip = (props) => (
-
-);
+function CheckboxWithTooltip(props) {
+ return (
+
+ );
+}
CheckboxWithTooltip.propTypes = propTypes;
CheckboxWithTooltip.defaultProps = defaultProps;
diff --git a/src/components/CollapsibleSection/Collapsible/index.native.js b/src/components/CollapsibleSection/Collapsible/index.native.js
index d9f2066b65c6..022d2a2a2ff9 100644
--- a/src/components/CollapsibleSection/Collapsible/index.native.js
+++ b/src/components/CollapsibleSection/Collapsible/index.native.js
@@ -14,7 +14,9 @@ const defaultProps = {
isOpened: false,
};
-const Collapsible = (props) => {props.children};
+function Collapsible(props) {
+ return {props.children};
+}
Collapsible.displayName = 'Collapsible';
Collapsible.propTypes = propTypes;
diff --git a/src/components/CommunicationsLink.js b/src/components/CommunicationsLink.js
index 1f7fe1cf5987..c8ca37f51c0f 100644
--- a/src/components/CommunicationsLink.js
+++ b/src/components/CommunicationsLink.js
@@ -25,21 +25,23 @@ const defaultProps = {
containerStyles: [],
};
-const CommunicationsLink = (props) => (
-
-
- {props.children}
- Clipboard.setString(props.value)}
- />
+function CommunicationsLink(props) {
+ return (
+
+
+ {props.children}
+ Clipboard.setString(props.value)}
+ />
+
-
-);
+ );
+}
CommunicationsLink.propTypes = propTypes;
CommunicationsLink.defaultProps = defaultProps;
diff --git a/src/components/ComposeProviders.js b/src/components/ComposeProviders.js
index 5291d4c961ce..edcc0a917c51 100644
--- a/src/components/ComposeProviders.js
+++ b/src/components/ComposeProviders.js
@@ -10,17 +10,19 @@ const propTypes = {
children: PropTypes.node.isRequired,
};
-const ComposeProviders = (props) => (
- <>
- {_.reduceRight(
- props.components,
- (memo, Component) => (
- {memo}
- ),
- props.children,
- )}
- >
-);
+function ComposeProviders(props) {
+ return (
+ <>
+ {_.reduceRight(
+ props.components,
+ (memo, Component) => (
+ {memo}
+ ),
+ props.children,
+ )}
+ >
+ );
+}
ComposeProviders.propTypes = propTypes;
ComposeProviders.displayName = 'ComposeProviders';
diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index fd0eb25b030c..346a890b6dd1 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -54,31 +54,33 @@ const defaultProps = {
contentStyles: [],
};
-const ConfirmContent = (props) => (
-
-
-
-
+function ConfirmContent(props) {
+ return (
+
+
+
+
+
+ {_.isString(props.prompt) ? {props.prompt} : props.prompt}
- {_.isString(props.prompt) ? {props.prompt} : props.prompt}
-
-
- {props.shouldShowCancelButton && (
- )}
-
-);
+ {props.shouldShowCancelButton && (
+
+ )}
+
+ );
+}
ConfirmContent.propTypes = propTypes;
ConfirmContent.defaultProps = defaultProps;
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index 91952809cc84..e9e22c0fc012 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -58,30 +58,32 @@ const defaultProps = {
onModalHide: () => {},
};
-const ConfirmModal = (props) => (
-
-
+ (props.isVisible ? props.onConfirm() : null)}
- onCancel={props.onCancel}
- confirmText={props.confirmText}
- cancelText={props.cancelText}
- prompt={props.prompt}
- success={props.success}
- danger={props.danger}
- shouldShowCancelButton={props.shouldShowCancelButton}
- />
-
-);
+ onConfirm={() => (props.isVisible ? props.onConfirm() : null)}
+ onCancel={props.onCancel}
+ confirmText={props.confirmText}
+ cancelText={props.cancelText}
+ prompt={props.prompt}
+ success={props.success}
+ danger={props.danger}
+ shouldShowCancelButton={props.shouldShowCancelButton}
+ />
+
+ );
+}
ConfirmModal.propTypes = propTypes;
ConfirmModal.defaultProps = defaultProps;
diff --git a/src/components/ConfirmPopover.js b/src/components/ConfirmPopover.js
index ab2dcbdc9c3c..88df6347f850 100644
--- a/src/components/ConfirmPopover.js
+++ b/src/components/ConfirmPopover.js
@@ -55,27 +55,29 @@ const defaultProps = {
contentStyles: [],
};
-const ConfirmPopover = (props) => (
-
-
-
-);
+ isVisible={props.isVisible}
+ anchorPosition={props.anchorPosition}
+ >
+
+
+ );
+}
ConfirmPopover.propTypes = propTypes;
ConfirmPopover.defaultProps = defaultProps;
diff --git a/src/components/ConfirmationPage.js b/src/components/ConfirmationPage.js
index 68110d6765fc..1dc56b0afa6f 100644
--- a/src/components/ConfirmationPage.js
+++ b/src/components/ConfirmationPage.js
@@ -38,31 +38,33 @@ const defaultProps = {
shouldShowButton: false,
};
-const ConfirmationPage = (props) => (
- <>
-
-
- {props.heading}
- {props.description}
-
- {props.shouldShowButton && (
-
-
+
+
-
- )}
- >
-);
+ {props.heading}
+ {props.description}
+
+ {props.shouldShowButton && (
+
+
+
+ )}
+ >
+ );
+}
ConfirmationPage.propTypes = propTypes;
ConfirmationPage.defaultProps = defaultProps;
diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.js
index 1f9affab67d4..9bf846f87108 100644
--- a/src/components/CopyTextToClipboard.js
+++ b/src/components/CopyTextToClipboard.js
@@ -20,7 +20,7 @@ const defaultProps = {
textStyles: [],
};
-const CopyTextToClipboard = (props) => {
+function CopyTextToClipboard(props) {
const copyToClipboard = useCallback(() => {
Clipboard.setString(props.text);
}, [props.text]);
@@ -35,7 +35,7 @@ const CopyTextToClipboard = (props) => {
onPress={copyToClipboard}
/>
);
-};
+}
CopyTextToClipboard.propTypes = propTypes;
CopyTextToClipboard.defaultProps = defaultProps;
diff --git a/src/components/CurrentWalletBalance.js b/src/components/CurrentWalletBalance.js
index 974e2527d0cb..642e6937f1bf 100644
--- a/src/components/CurrentWalletBalance.js
+++ b/src/components/CurrentWalletBalance.js
@@ -30,10 +30,10 @@ const defaultProps = {
balanceStyles: [],
};
-const CurrentWalletBalance = (props) => {
+function CurrentWalletBalance(props) {
const formattedBalance = CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance);
return {`${formattedBalance}`};
-};
+}
CurrentWalletBalance.propTypes = propTypes;
CurrentWalletBalance.defaultProps = defaultProps;
diff --git a/src/components/CustomDevMenu/index.native.js b/src/components/CustomDevMenu/index.native.js
index 745cd697b460..52ca0e43782c 100644
--- a/src/components/CustomDevMenu/index.native.js
+++ b/src/components/CustomDevMenu/index.native.js
@@ -2,13 +2,13 @@ import {useEffect} from 'react';
import DevMenu from 'react-native-dev-menu';
import toggleTestToolsModal from '../../libs/actions/TestTool';
-const CustomDevMenu = () => {
+function CustomDevMenu() {
useEffect(() => {
DevMenu.addItem('Open Test Preferences', toggleTestToolsModal);
}, []);
return null;
-};
+}
CustomDevMenu.displayName = 'CustomDevMenu';
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
index 7557519dce1d..3392b6c3c9d8 100644
--- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
+++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -16,34 +16,36 @@ const propTypes = {
...withLocalizePropTypes,
};
-const DeeplinkRedirectLoadingIndicator = (props) => (
-
-
-
+function DeeplinkRedirectLoadingIndicator(props) {
+ return (
+
+
+
+
+
+ {props.translate('deeplinkWrapper.launching')}
+
+ {props.translate('deeplinkWrapper.redirectedToDesktopApp')}
+
+ {props.translate('deeplinkWrapper.youCanAlso')} {props.translate('deeplinkWrapper.openLinkInBrowser')}.
+
+
+
+
- {props.translate('deeplinkWrapper.launching')}
-
- {props.translate('deeplinkWrapper.redirectedToDesktopApp')}
-
- {props.translate('deeplinkWrapper.youCanAlso')} {props.translate('deeplinkWrapper.openLinkInBrowser')}.
-
-
-
-
-
-
-);
+ );
+}
DeeplinkRedirectLoadingIndicator.propTypes = propTypes;
DeeplinkRedirectLoadingIndicator.displayName = 'DeeplinkRedirectLoadingIndicator';
diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js
index 4aea95c44ca7..458c6b0acf9b 100644
--- a/src/components/DisplayNames/index.native.js
+++ b/src/components/DisplayNames/index.native.js
@@ -3,15 +3,17 @@ import {propTypes, defaultProps} from './displayNamesPropTypes';
import Text from '../Text';
// As we don't have to show tooltips of the Native platform so we simply render the full display names list.
-const DisplayNames = (props) => (
-
- {props.fullTitle}
-
-);
+function DisplayNames(props) {
+ return (
+
+ {props.fullTitle}
+
+ );
+}
DisplayNames.propTypes = propTypes;
DisplayNames.defaultProps = defaultProps;
diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js
index 70304ac437e4..197c111c0ee3 100644
--- a/src/components/DotIndicatorMessage.js
+++ b/src/components/DotIndicatorMessage.js
@@ -32,7 +32,7 @@ const defaultProps = {
style: [],
};
-const DotIndicatorMessage = (props) => {
+function DotIndicatorMessage(props) {
if (_.isEmpty(props.messages)) {
return null;
}
@@ -72,7 +72,7 @@ const DotIndicatorMessage = (props) => {
);
-};
+}
DotIndicatorMessage.propTypes = propTypes;
DotIndicatorMessage.defaultProps = defaultProps;
diff --git a/src/components/DragAndDrop/DropZone/index.js b/src/components/DragAndDrop/DropZone/index.js
index 1fc7a921eb1d..525e5a8c1484 100644
--- a/src/components/DragAndDrop/DropZone/index.js
+++ b/src/components/DragAndDrop/DropZone/index.js
@@ -15,16 +15,18 @@ const propTypes = {
dropZoneId: PropTypes.string.isRequired,
};
-const DropZone = (props) => (
-
- {props.children}
- {/* Necessary for blocking events on content which can publish unwanted dragleave even if we are inside dropzone */}
-
-
-);
+function DropZone(props) {
+ return (
+
+ {props.children}
+ {/* Necessary for blocking events on content which can publish unwanted dragleave even if we are inside dropzone */}
+
+
+ );
+}
DropZone.displayName = 'DropZone';
DropZone.propTypes = propTypes;
diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js
index 5cb47268d7da..00fee688f986 100644
--- a/src/components/EmojiPicker/CategoryShortcutBar.js
+++ b/src/components/EmojiPicker/CategoryShortcutBar.js
@@ -19,18 +19,20 @@ const propTypes = {
).isRequired,
};
-const CategoryShortcutBar = (props) => (
-
- {_.map(props.headerEmojis, (headerEmoji, i) => (
- props.onPress(headerEmoji.index)}
- key={`categoryShortcut${i}`}
- code={headerEmoji.code}
- />
- ))}
-
-);
+function CategoryShortcutBar(props) {
+ return (
+
+ {_.map(props.headerEmojis, (headerEmoji, i) => (
+ props.onPress(headerEmoji.index)}
+ key={`categoryShortcut${i}`}
+ code={headerEmoji.code}
+ />
+ ))}
+
+ );
+}
CategoryShortcutBar.propTypes = propTypes;
CategoryShortcutBar.displayName = 'CategoryShortcutBar';
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index a6a92cf44cc4..47dc93ac138a 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -25,7 +25,7 @@ const defaultProps = {
nativeID: '',
};
-const EmojiPickerButton = (props) => {
+function EmojiPickerButton(props) {
let emojiPopoverAnchor = null;
return (
@@ -46,7 +46,7 @@ const EmojiPickerButton = (props) => {
);
-};
+}
EmojiPickerButton.propTypes = propTypes;
EmojiPickerButton.defaultProps = defaultProps;
diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js
index 2af9dfc99368..98cd871a7250 100644
--- a/src/components/EmojiSuggestions.js
+++ b/src/components/EmojiSuggestions.js
@@ -57,7 +57,7 @@ const defaultProps = {highlightedEmojiIndex: 0};
*/
const keyExtractor = (item, index) => `${item.name}+${index}}`;
-const EmojiSuggestions = (props) => {
+function EmojiSuggestions(props) {
/**
* Render an emoji suggestion menu item component.
* @param {Object} item
@@ -97,7 +97,7 @@ const EmojiSuggestions = (props) => {
accessibilityLabelExtractor={keyExtractor}
/>
);
-};
+}
EmojiSuggestions.propTypes = propTypes;
EmojiSuggestions.defaultProps = defaultProps;
diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js
index 73d97e8060cb..7602de8dbb87 100644
--- a/src/components/EnvironmentBadge.js
+++ b/src/components/EnvironmentBadge.js
@@ -13,7 +13,7 @@ const ENVIRONMENT_SHORT_FORM = {
[CONST.ENVIRONMENT.ADHOC]: 'ADHOC',
};
-const EnvironmentBadge = (props) => {
+function EnvironmentBadge(props) {
// If we are on production, don't show any badge
if (props.environment === CONST.ENVIRONMENT.PRODUCTION) {
return null;
@@ -31,7 +31,7 @@ const EnvironmentBadge = (props) => {
environment={props.environment}
/>
);
-};
+}
EnvironmentBadge.displayName = 'EnvironmentBadge';
EnvironmentBadge.propTypes = environmentPropTypes;
diff --git a/src/components/ExpensifyCashLogo.js b/src/components/ExpensifyCashLogo.js
index b7cc7da39779..8e6648407751 100644
--- a/src/components/ExpensifyCashLogo.js
+++ b/src/components/ExpensifyCashLogo.js
@@ -24,7 +24,7 @@ const logoComponents = {
[CONST.ENVIRONMENT.ADHOC]: AdhocLogo,
};
-const ExpensifyCashLogo = (props) => {
+function ExpensifyCashLogo(props) {
// PascalCase is required for React components, so capitalize the const here
const LogoComponent = logoComponents[props.environment];
return (
@@ -33,7 +33,7 @@ const ExpensifyCashLogo = (props) => {
height={props.height}
/>
);
-};
+}
ExpensifyCashLogo.displayName = 'ExpensifyCashLogo';
ExpensifyCashLogo.propTypes = propTypes;
diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js
index a2766dc0bcc4..adff27376207 100644
--- a/src/components/ExpensifyWordmark.js
+++ b/src/components/ExpensifyWordmark.js
@@ -33,7 +33,7 @@ const logoComponents = {
[CONST.ENVIRONMENT.PRODUCTION]: ProductionLogo,
};
-const ExpensifyWordmark = (props) => {
+function ExpensifyWordmark(props) {
// PascalCase is required for React components, so capitalize the const here
const LogoComponent = logoComponents[props.environment] || AdHocLogo;
return (
@@ -50,7 +50,7 @@ const ExpensifyWordmark = (props) => {
>
);
-};
+}
ExpensifyWordmark.displayName = 'ExpensifyWordmark';
ExpensifyWordmark.defaultProps = defaultProps;
diff --git a/src/components/FixedFooter.js b/src/components/FixedFooter.js
index ccff806d4508..bad2639ae7e8 100644
--- a/src/components/FixedFooter.js
+++ b/src/components/FixedFooter.js
@@ -16,7 +16,9 @@ const defaultProps = {
style: [],
};
-const FixedFooter = (props) => {props.children};
+function FixedFooter(props) {
+ return {props.children};
+}
FixedFooter.propTypes = propTypes;
FixedFooter.defaultProps = defaultProps;
diff --git a/src/components/Form.js b/src/components/Form.js
index 88a9adb3e11a..afc50d24763c 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -88,7 +88,7 @@ const defaultProps = {
validate: () => ({}),
};
-const Form = (props) => {
+function Form(props) {
const [errors, setErrors] = useState({});
const [inputValues, setInputValues] = useState({...props.draftValues});
const formRef = useRef(null);
@@ -403,7 +403,7 @@ const Form = (props) => {
}
);
-};
+}
Form.displayName = 'Form';
Form.propTypes = propTypes;
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index c64df80d433c..beb97f36c665 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -60,40 +60,42 @@ const defaultProps = {
footerContent: null,
};
-const FormAlertWithSubmitButton = (props) => (
-
- {(isOffline) => (
-
- {isOffline && !props.enabledWhenOffline ? (
-
- ) : (
-
- )}
- {props.footerContent}
-
- )}
-
-);
+function FormAlertWithSubmitButton(props) {
+ return (
+
+ {(isOffline) => (
+
+ {isOffline && !props.enabledWhenOffline ? (
+
+ ) : (
+
+ )}
+ {props.footerContent}
+
+ )}
+
+ );
+}
FormAlertWithSubmitButton.propTypes = propTypes;
FormAlertWithSubmitButton.defaultProps = defaultProps;
diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 5e98fa7f5932..704d9b5a241c 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -50,7 +50,7 @@ const defaultProps = {
//
// This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
// and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
-const FormAlertWrapper = (props) => {
+function FormAlertWrapper(props) {
let children;
if (_.isEmpty(props.message)) {
children = (
@@ -81,7 +81,7 @@ const FormAlertWrapper = (props) => {
{props.children(props.network.isOffline)}
);
-};
+}
FormAlertWrapper.propTypes = propTypes;
FormAlertWrapper.defaultProps = defaultProps;
diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js
index 1463b8ca745d..24d78267766b 100644
--- a/src/components/FormHelpMessage.js
+++ b/src/components/FormHelpMessage.js
@@ -31,7 +31,7 @@ const defaultProps = {
style: [],
};
-const FormHelpMessage = (props) => {
+function FormHelpMessage(props) {
if (_.isEmpty(props.message) && _.isEmpty(props.children)) {
return null;
}
@@ -50,7 +50,7 @@ const FormHelpMessage = (props) => {
);
-};
+}
FormHelpMessage.propTypes = propTypes;
FormHelpMessage.defaultProps = defaultProps;
diff --git a/src/components/FullscreenLoadingIndicator.js b/src/components/FullscreenLoadingIndicator.js
index 7fb23840f0f5..5c212b6dc29e 100644
--- a/src/components/FullscreenLoadingIndicator.js
+++ b/src/components/FullscreenLoadingIndicator.js
@@ -14,7 +14,7 @@ const defaultProps = {
style: [],
};
-const FullScreenLoadingIndicator = (props) => {
+function FullScreenLoadingIndicator(props) {
const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
return (
@@ -24,7 +24,7 @@ const FullScreenLoadingIndicator = (props) => {
/>
);
-};
+}
FullScreenLoadingIndicator.propTypes = propTypes;
FullScreenLoadingIndicator.defaultProps = defaultProps;
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.js
index 0b361780a619..477448ffbcdc 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.js
@@ -9,13 +9,20 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const GrowlNotificationContainer = (props) => (
-
- {props.children}
-
-);
+function GrowlNotificationContainer(props) {
+ return (
+
+ {props.children}
+
+ );
+}
GrowlNotificationContainer.propTypes = propTypes;
GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
index 536f0e9d06a5..ddc3636ed15b 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
@@ -9,15 +9,17 @@ const propTypes = {
...growlNotificationContainerPropTypes,
};
-const GrowlNotificationContainer = (props) => (
-
- {(insets) => (
-
- {props.children}
-
- )}
-
-);
+function GrowlNotificationContainer(props) {
+ return (
+
+ {(insets) => (
+
+ {props.children}
+
+ )}
+
+ );
+}
GrowlNotificationContainer.propTypes = propTypes;
GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index dd8a06927a07..5417f7af6820 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -55,7 +55,7 @@ const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]
// context to RenderHTMLSource components. See https://git.io/JRcZb
// Beware that each prop should be referentialy stable between renders to avoid
// costly invalidations and commits.
-const BaseHTMLEngineProvider = (props) => {
+function BaseHTMLEngineProvider(props) {
// We need to memoize this prop to make it referentially stable.
const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false}), [props.textSelectable]);
@@ -83,7 +83,7 @@ const BaseHTMLEngineProvider = (props) => {
);
-};
+}
BaseHTMLEngineProvider.displayName = 'BaseHTMLEngineProvider';
BaseHTMLEngineProvider.propTypes = propTypes;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
index 1933cea1e3c9..f7086486637d 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
@@ -16,7 +16,7 @@ import * as Url from '../../../libs/Url';
import ROUTES from '../../../ROUTES';
import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
-const AnchorRenderer = (props) => {
+function AnchorRenderer(props) {
const htmlAttribs = props.tnode.attributes;
// An auth token is needed to download Expensify chat attachments
@@ -104,7 +104,7 @@ const AnchorRenderer = (props) => {
);
-};
+}
AnchorRenderer.propTypes = htmlRendererPropTypes;
AnchorRenderer.displayName = 'AnchorRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
index 1a351447d4ec..b72725076953 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
@@ -5,7 +5,7 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
import * as StyleUtils from '../../../styles/StyleUtils';
import InlineCodeBlock from '../../InlineCodeBlock';
-const CodeRenderer = (props) => {
+function CodeRenderer(props) {
// We split wrapper and inner styles
// "boxModelStyle" corresponds to border, margin, padding and backgroundColor
const {boxModelStyle, otherStyle: textStyle} = splitBoxModelStyle(props.style);
@@ -37,7 +37,7 @@ const CodeRenderer = (props) => {
key={props.key}
/>
);
-};
+}
CodeRenderer.propTypes = htmlRendererPropTypes;
CodeRenderer.displayName = 'CodeRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index b79ca3f54dbf..d91510c3ec6a 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -13,7 +13,7 @@ const propTypes = {
...withLocalizePropTypes,
};
-const EditedRenderer = (props) => {
+function EditedRenderer(props) {
const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style', 'tnode']);
const isPendingDelete = Boolean(props.tnode.attributes.deleted !== undefined);
return (
@@ -34,7 +34,7 @@ const EditedRenderer = (props) => {
{props.translate('reportActionCompose.edited')}
);
-};
+}
EditedRenderer.propTypes = propTypes;
EditedRenderer.displayName = 'EditedRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index d92ca69542bf..4cbc778e40b9 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -9,7 +9,7 @@ import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContex
import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
import * as ReportUtils from '../../../libs/ReportUtils';
-const ImageRenderer = (props) => {
+function ImageRenderer(props) {
const htmlAttribs = props.tnode.attributes;
// There are two kinds of images that need to be displayed:
@@ -60,7 +60,7 @@ const ImageRenderer = (props) => {
>
{({show}) => (
showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
>
@@ -77,7 +77,7 @@ const ImageRenderer = (props) => {
)}
);
-};
+}
ImageRenderer.propTypes = htmlRendererPropTypes;
ImageRenderer.displayName = 'ImageRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index e536904e4da3..35ace6814703 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -5,17 +5,19 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
import Text from '../../Text';
import * as StyleUtils from '../../../styles/StyleUtils';
-const MentionHereRenderer = (props) => (
-
-
-
+function MentionHereRenderer(props) {
+ return (
+
+
+
+
-
-);
+ );
+}
MentionHereRenderer.propTypes = htmlRendererPropTypes;
MentionHereRenderer.displayName = 'HereMentionRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index 9feb77f88c82..a77c425c0ed2 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -27,7 +27,7 @@ const propTypes = {
* */
const showUserDetails = (email) => Navigation.navigate(ROUTES.getDetailsRoute(email));
-const MentionUserRenderer = (props) => {
+function MentionUserRenderer(props) {
const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
// We need to remove the leading @ from data as it is not part of the login
@@ -51,7 +51,7 @@ const MentionUserRenderer = (props) => {
);
-};
+}
MentionUserRenderer.propTypes = propTypes;
MentionUserRenderer.displayName = 'MentionUserRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js
index 60171f37b383..385f396de812 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js
@@ -3,10 +3,10 @@ import withLocalize from '../../../withLocalize';
import htmlRendererPropTypes from '../htmlRendererPropTypes';
import BasePreRenderer from './BasePreRenderer';
-const PreRenderer = (props) => (
+function PreRenderer(props) {
// eslint-disable-next-line react/jsx-props-no-spreading
-
-);
+ return ;
+}
PreRenderer.propTypes = htmlRendererPropTypes;
PreRenderer.displayName = 'PreRenderer';
diff --git a/src/components/HTMLEngineProvider/index.js b/src/components/HTMLEngineProvider/index.js
index dc1f39859ed4..6cb08a6dfe97 100755
--- a/src/components/HTMLEngineProvider/index.js
+++ b/src/components/HTMLEngineProvider/index.js
@@ -4,14 +4,16 @@ import {defaultProps, propTypes} from './htmlEnginePropTypes';
import withWindowDimensions from '../withWindowDimensions';
import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-const HTMLEngineProvider = (props) => (
-
- {props.children}
-
-);
+function HTMLEngineProvider(props) {
+ return (
+
+ {props.children}
+
+ );
+}
HTMLEngineProvider.displayName = 'HTMLEngineProvider';
HTMLEngineProvider.propTypes = propTypes;
diff --git a/src/components/HTMLEngineProvider/index.native.js b/src/components/HTMLEngineProvider/index.native.js
index 005001c925db..162edda66f1f 100755
--- a/src/components/HTMLEngineProvider/index.native.js
+++ b/src/components/HTMLEngineProvider/index.native.js
@@ -2,14 +2,16 @@ import React from 'react';
import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
import {propTypes, defaultProps} from './htmlEnginePropTypes';
-const HTMLEngineProvider = (props) => (
-
- {props.children}
-
-);
+function HTMLEngineProvider(props) {
+ return (
+
+ {props.children}
+
+ );
+}
HTMLEngineProvider.displayName = 'HTMLEngineProvider';
HTMLEngineProvider.propTypes = propTypes;
diff --git a/src/components/Header.js b/src/components/Header.js
index 1605231994ba..a54ef93db804 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -27,34 +27,36 @@ const defaultProps = {
textStyles: [],
shouldShowEnvironmentBadge: false,
};
-const Header = (props) => (
-
-
- {_.isString(props.title)
- ? Boolean(props.title) && (
-
- {props.title}
-
- )
- : props.title}
- {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
- {_.isString(props.subtitle)
- ? Boolean(props.subtitle) && (
-
- {props.subtitle}
-
- )
- : props.subtitle}
+function Header(props) {
+ return (
+
+
+ {_.isString(props.title)
+ ? Boolean(props.title) && (
+
+ {props.title}
+
+ )
+ : props.title}
+ {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
+ {_.isString(props.subtitle)
+ ? Boolean(props.subtitle) && (
+
+ {props.subtitle}
+
+ )
+ : props.subtitle}
+
+ {props.shouldShowEnvironmentBadge && }
- {props.shouldShowEnvironmentBadge && }
-
-);
+ );
+}
Header.displayName = 'Header';
Header.propTypes = propTypes;
diff --git a/src/components/Hoverable/index.native.js b/src/components/Hoverable/index.native.js
index e33ca3fa654f..26d1d98863d6 100644
--- a/src/components/Hoverable/index.native.js
+++ b/src/components/Hoverable/index.native.js
@@ -10,10 +10,10 @@ import {propTypes, defaultProps} from './hoverablePropTypes';
* @param {Object} props
* @returns {React.Component}
*/
-const Hoverable = (props) => {
+function Hoverable(props) {
const childrenWithHoverState = _.isFunction(props.children) ? props.children(false) : props.children;
return {childrenWithHoverState};
-};
+}
Hoverable.propTypes = propTypes;
Hoverable.defaultProps = defaultProps;
diff --git a/src/components/Image/index.native.js b/src/components/Image/index.native.js
index c7cc2e026063..e9dfe4d1a2e1 100644
--- a/src/components/Image/index.native.js
+++ b/src/components/Image/index.native.js
@@ -7,7 +7,7 @@ import ONYXKEYS from '../../ONYXKEYS';
import {defaultProps, imagePropTypes} from './imagePropTypes';
import RESIZE_MODES from './resizeModes';
-const Image = (props) => {
+function Image(props) {
// eslint-disable-next-line react/destructuring-assignment
const {source, isAuthTokenRequired, session, ...rest} = props;
@@ -31,7 +31,7 @@ const Image = (props) => {
source={imageSource}
/>
);
-};
+}
Image.propTypes = imagePropTypes;
Image.defaultProps = defaultProps;
diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js
index c13b007e0b1b..14bab44f2126 100644
--- a/src/components/InlineCodeBlock/WrappedText.js
+++ b/src/components/InlineCodeBlock/WrappedText.js
@@ -38,7 +38,7 @@ const defaultProps = {
wordStyles: [],
};
-const WrappedText = (props) => {
+function WrappedText(props) {
if (!_.isString(props.children)) {
return null;
}
@@ -67,7 +67,7 @@ const WrappedText = (props) => {
))}
>
);
-};
+}
WrappedText.propTypes = propTypes;
WrappedText.defaultProps = defaultProps;
diff --git a/src/components/InlineCodeBlock/index.js b/src/components/InlineCodeBlock/index.js
index 5f1a9c8f2ada..7610ba4fa583 100644
--- a/src/components/InlineCodeBlock/index.js
+++ b/src/components/InlineCodeBlock/index.js
@@ -1,18 +1,21 @@
import React from 'react';
+import _ from 'lodash';
import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
import Text from '../Text';
-const InlineCodeBlock = (props) => {
+function InlineCodeBlock(props) {
const TDefaultRenderer = props.TDefaultRenderer;
+ const textStyles = _.omit(props.textStyle, 'textDecorationLine');
+
return (
- {props.defaultRendererProps.tnode.data}
+ {props.defaultRendererProps.tnode.data}
);
-};
+}
InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;
InlineCodeBlock.displayName = 'InlineCodeBlock';
diff --git a/src/components/InlineCodeBlock/index.native.js b/src/components/InlineCodeBlock/index.native.js
index c8d5095ff002..2aa718832180 100644
--- a/src/components/InlineCodeBlock/index.native.js
+++ b/src/components/InlineCodeBlock/index.native.js
@@ -3,7 +3,7 @@ import styles from '../../styles/styles';
import WrappedText from './WrappedText';
import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
-const InlineCodeBlock = (props) => {
+function InlineCodeBlock(props) {
const TDefaultRenderer = props.TDefaultRenderer;
return (
{
);
-};
+}
InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;
InlineCodeBlock.displayName = 'InlineCodeBlock';
diff --git a/src/components/InlineErrorText.js b/src/components/InlineErrorText.js
index aae793f74645..ea701a3f6e8e 100644
--- a/src/components/InlineErrorText.js
+++ b/src/components/InlineErrorText.js
@@ -17,13 +17,13 @@ const defaultProps = {
styles: [],
};
-const InlineErrorText = (props) => {
+function InlineErrorText(props) {
if (_.isEmpty(props.children)) {
return null;
}
return {props.children};
-};
+}
InlineErrorText.propTypes = propTypes;
InlineErrorText.defaultProps = defaultProps;
diff --git a/src/components/InlineSystemMessage.js b/src/components/InlineSystemMessage.js
index 3d3a843b4a15..a6866fb5a887 100644
--- a/src/components/InlineSystemMessage.js
+++ b/src/components/InlineSystemMessage.js
@@ -16,7 +16,7 @@ const defaultProps = {
message: '',
};
-const InlineSystemMessage = (props) => {
+function InlineSystemMessage(props) {
if (props.message.length === 0) {
return null;
}
@@ -29,7 +29,7 @@ const InlineSystemMessage = (props) => {
{props.message}
);
-};
+}
InlineSystemMessage.propTypes = propTypes;
InlineSystemMessage.defaultProps = defaultProps;
diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
index 287a5975df9f..47d75c84cc8b 100644
--- a/src/components/InvertedFlatList/index.android.js
+++ b/src/components/InvertedFlatList/index.android.js
@@ -3,13 +3,15 @@ import {View} from 'react-native';
import BaseInvertedFlatList from './BaseInvertedFlatList';
import styles from '../../styles/styles';
-const InvertedCell = (props) => (
-
-);
+function InvertedCell(props) {
+ return (
+
+ );
+}
export default forwardRef((props, ref) => (
(
-
-);
+function KYCWall(props) {
+ return (
+
+ );
+}
KYCWall.propTypes = propTypes;
KYCWall.defaultProps = defaultProps;
diff --git a/src/components/KeyboardAvoidingView/index.ios.js b/src/components/KeyboardAvoidingView/index.ios.js
index f7b41e815858..c1ea8687f793 100644
--- a/src/components/KeyboardAvoidingView/index.ios.js
+++ b/src/components/KeyboardAvoidingView/index.ios.js
@@ -4,10 +4,10 @@
import React from 'react';
import {KeyboardAvoidingView as KeyboardAvoidingViewComponent} from 'react-native';
-const KeyboardAvoidingView = (props) => (
+function KeyboardAvoidingView(props) {
// eslint-disable-next-line react/jsx-props-no-spreading
-
-);
+ return ;
+}
KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
diff --git a/src/components/KeyboardAvoidingView/index.js b/src/components/KeyboardAvoidingView/index.js
index 94c0369c0f5c..3483b2d007ac 100644
--- a/src/components/KeyboardAvoidingView/index.js
+++ b/src/components/KeyboardAvoidingView/index.js
@@ -5,13 +5,13 @@ import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-const KeyboardAvoidingView = (props) => {
+function KeyboardAvoidingView(props) {
const viewProps = _.omit(props, ['behavior', 'contentContainerStyle', 'enabled', 'keyboardVerticalOffset']);
return (
// eslint-disable-next-line react/jsx-props-no-spreading
);
-};
+}
KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
diff --git a/src/components/KeyboardDismissingFlatList/index.native.js b/src/components/KeyboardDismissingFlatList/index.native.js
index d9d6e96953b0..97297528ac77 100644
--- a/src/components/KeyboardDismissingFlatList/index.native.js
+++ b/src/components/KeyboardDismissingFlatList/index.native.js
@@ -1,13 +1,15 @@
import React from 'react';
import {FlatList, Keyboard} from 'react-native';
-const KeyboardDismissingFlatList = (props) => (
- Keyboard.dismiss()}
- />
-);
+function KeyboardDismissingFlatList(props) {
+ return (
+ Keyboard.dismiss()}
+ />
+ );
+}
KeyboardDismissingFlatList.displayName = 'KeyboardDismissingFlatList';
diff --git a/src/components/KeyboardSpacer/index.android.js b/src/components/KeyboardSpacer/index.android.js
index 217fdbd9b18c..15755be70e31 100644
--- a/src/components/KeyboardSpacer/index.android.js
+++ b/src/components/KeyboardSpacer/index.android.js
@@ -7,13 +7,15 @@ import StatusBar from '../../libs/StatusBar';
import BaseKeyboardSpacer from './BaseKeyboardSpacer';
import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-const KeyboardSpacer = () => (
-
-);
+function KeyboardSpacer() {
+ return (
+
+ );
+}
KeyboardSpacer.propTypes = windowDimensionsPropTypes;
KeyboardSpacer.displayName = 'KeyboardSpacer';
diff --git a/src/components/KeyboardSpacer/index.ios.js b/src/components/KeyboardSpacer/index.ios.js
index 0dd50339d813..63cae305c362 100644
--- a/src/components/KeyboardSpacer/index.ios.js
+++ b/src/components/KeyboardSpacer/index.ios.js
@@ -8,13 +8,15 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDime
import * as StyleUtils from '../../styles/StyleUtils';
import CONST from '../../CONST';
-const KeyboardSpacer = (props) => (
-
-);
+function KeyboardSpacer(props) {
+ return (
+
+ );
+}
KeyboardSpacer.propTypes = windowDimensionsPropTypes;
KeyboardSpacer.displayName = 'KeyboardSpacer';
diff --git a/src/components/KeyboardSpacer/index.js b/src/components/KeyboardSpacer/index.js
index bee4d13e51e9..77e1cc978337 100644
--- a/src/components/KeyboardSpacer/index.js
+++ b/src/components/KeyboardSpacer/index.js
@@ -4,6 +4,8 @@
* @returns {null}
* @constructor
*/
-const KeyboardSpacer = () => null;
+function KeyboardSpacer() {
+ return null;
+}
export default KeyboardSpacer;
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index d5759c3f3b1c..4d5e19299e5c 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -54,7 +54,7 @@ const defaultProps = {
style: null,
};
-const OptionRowLHN = (props) => {
+function OptionRowLHN(props) {
const optionItem = SidebarUtils.getOptionData(props.reportID);
if (!optionItem) {
@@ -244,7 +244,7 @@ const OptionRowLHN = (props) => {
);
-};
+}
OptionRowLHN.propTypes = propTypes;
OptionRowLHN.defaultProps = defaultProps;
diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js
index 5e5662440147..532c29535e50 100644
--- a/src/components/LocalePicker.js
+++ b/src/components/LocalePicker.js
@@ -26,7 +26,7 @@ const defaultProps = {
size: 'normal',
};
-const LocalePicker = (props) => {
+function LocalePicker(props) {
const localesToLanguages = _.map(props.translate('languagePage.languages'), (language, key) => ({
value: key,
label: language.label,
@@ -48,7 +48,7 @@ const LocalePicker = (props) => {
backgroundColor={themeColors.signInPage}
/>
);
-};
+}
LocalePicker.defaultProps = defaultProps;
LocalePicker.propTypes = propTypes;
diff --git a/src/components/MentionSuggestions.js b/src/components/MentionSuggestions.js
index 48e1520d736a..e8fc3003bf56 100644
--- a/src/components/MentionSuggestions.js
+++ b/src/components/MentionSuggestions.js
@@ -56,7 +56,7 @@ const defaultProps = {
*/
const keyExtractor = (item) => item.alternateText;
-const MentionSuggestions = (props) => {
+function MentionSuggestions(props) {
/**
* Render a suggestion menu item component.
* @param {Object} item
@@ -120,7 +120,7 @@ const MentionSuggestions = (props) => {
accessibilityLabelExtractor={keyExtractor}
/>
);
-};
+}
MentionSuggestions.propTypes = propTypes;
MentionSuggestions.defaultProps = defaultProps;
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 635334354d67..fed55eb8b5e0 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -69,7 +69,7 @@ const defaultProps = {
furtherDetailsIcon: undefined,
};
-const MenuItem = (props) => {
+function MenuItem(props) {
const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted);
const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
const titleTextStyle = StyleUtils.combineStyles(
@@ -278,7 +278,7 @@ const MenuItem = (props) => {
)}
);
-};
+}
MenuItem.propTypes = propTypes;
MenuItem.displayName = 'MenuItem';
diff --git a/src/components/MenuItemList.js b/src/components/MenuItemList.js
index 95364c3f5d5a..90f863ba2bc7 100644
--- a/src/components/MenuItemList.js
+++ b/src/components/MenuItemList.js
@@ -14,7 +14,7 @@ const defaultProps = {
menuItems: [],
};
-const MenuItemList = (props) => {
+function MenuItemList(props) {
let popoverAnchor;
/**
@@ -45,7 +45,7 @@ const MenuItemList = (props) => {
))}
>
);
-};
+}
MenuItemList.displayName = 'MenuItemList';
MenuItemList.propTypes = propTypes;
diff --git a/src/components/MenuItemWithTopDescription.js b/src/components/MenuItemWithTopDescription.js
index 5ffc4752b02d..4bd426d80f0c 100644
--- a/src/components/MenuItemWithTopDescription.js
+++ b/src/components/MenuItemWithTopDescription.js
@@ -6,14 +6,16 @@ const propTypes = {
...menuItemPropTypes,
};
-const MenuItemWithTopDescription = (props) => (
-
-);
+function MenuItemWithTopDescription(props) {
+ return (
+
+ );
+}
MenuItemWithTopDescription.propTypes = propTypes;
MenuItemWithTopDescription.displayName = 'MenuItemWithTopDescription';
diff --git a/src/components/Modal/index.android.js b/src/components/Modal/index.android.js
index 83f3fbffdc7d..09df74329b20 100644
--- a/src/components/Modal/index.android.js
+++ b/src/components/Modal/index.android.js
@@ -5,15 +5,17 @@ import {propTypes, defaultProps} from './modalPropTypes';
// Only want to use useNativeDriver on Android. It has strange flashes issue on IOS
// https://github.com/react-native-modal/react-native-modal#the-modal-flashes-in-a-weird-way-when-animating
-const Modal = (props) => (
-
- {props.children}
-
-);
+function Modal(props) {
+ return (
+
+ {props.children}
+
+ );
+}
Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;
diff --git a/src/components/Modal/index.ios.js b/src/components/Modal/index.ios.js
index a44ae11f94ef..d8206d12532d 100644
--- a/src/components/Modal/index.ios.js
+++ b/src/components/Modal/index.ios.js
@@ -3,14 +3,16 @@ import withWindowDimensions from '../withWindowDimensions';
import BaseModal from './BaseModal';
import {propTypes, defaultProps} from './modalPropTypes';
-const Modal = (props) => (
-
- {props.children}
-
-);
+function Modal(props) {
+ return (
+
+ {props.children}
+
+ );
+}
Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;
diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js
index 00a208db4f85..7d01efd652c2 100644
--- a/src/components/Modal/index.web.js
+++ b/src/components/Modal/index.web.js
@@ -6,7 +6,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
import themeColors from '../../styles/themes/default';
import StatusBar from '../../libs/StatusBar';
-const Modal = (props) => {
+function Modal(props) {
const setStatusBarColor = (color = themeColors.appBG) => {
if (!props.fullscreen) {
return;
@@ -36,7 +36,7 @@ const Modal = (props) => {
{props.children}
);
-};
+}
Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 600a96aede18..f9d9982e3708 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -69,7 +69,7 @@ const defaultProps = {
parentReport: {},
};
-const MoneyRequestHeader = (props) => {
+function MoneyRequestHeader(props) {
// These are only used for the single transaction view and not for expense and iou reports
const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(props.parentReportAction);
const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
@@ -200,7 +200,7 @@ const MoneyRequestHeader = (props) => {
)}
);
-};
+}
MoneyRequestHeader.displayName = 'MoneyRequestHeader';
MoneyRequestHeader.propTypes = propTypes;
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index c65e6ff8ed9b..523c786f0245 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -65,7 +65,7 @@ const defaultProps = {
shouldUseCardBackground: false,
};
-const MultipleAvatars = (props) => {
+function MultipleAvatars(props) {
let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] : [styles.emptyAvatar, styles.emptyAvatarMargin];
const singleAvatarStyles = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar;
const secondAvatarStyles = [props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar, ...props.secondAvatarStyle];
@@ -227,7 +227,7 @@ const MultipleAvatars = (props) => {
)}
);
-};
+}
MultipleAvatars.defaultProps = defaultProps;
MultipleAvatars.propTypes = propTypes;
diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index bfd29d9fe362..43cd374421ea 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -38,7 +38,7 @@ const setStyles = (containerStyles, isSmallScreenWidth) => {
return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
};
-const OfflineIndicator = (props) => {
+function OfflineIndicator(props) {
if (!props.network.isOffline) {
return null;
}
@@ -53,7 +53,7 @@ const OfflineIndicator = (props) => {
{props.translate('common.youAppearToBeOffline')}
);
-};
+}
OfflineIndicator.propTypes = propTypes;
OfflineIndicator.defaultProps = defaultProps;
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index 6b95b1b36ffa..f6052f7d1dfa 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -87,7 +87,7 @@ function applyStrikeThrough(children) {
});
}
-const OfflineWithFeedback = (props) => {
+function OfflineWithFeedback(props) {
const hasErrors = !_.isEmpty(props.errors);
const isOfflinePendingAction = props.network.isOffline && props.pendingAction;
const isUpdateOrDeleteError = hasErrors && (props.pendingAction === 'delete' || props.pendingAction === 'update');
@@ -132,7 +132,7 @@ const OfflineWithFeedback = (props) => {
)}
);
-};
+}
OfflineWithFeedback.propTypes = propTypes;
OfflineWithFeedback.defaultProps = defaultProps;
diff --git a/src/components/OnyxProvider.js b/src/components/OnyxProvider.js
index 76cda71da2b2..e708ed8056b5 100644
--- a/src/components/OnyxProvider.js
+++ b/src/components/OnyxProvider.js
@@ -11,22 +11,24 @@ const [withPersonalDetails, PersonalDetailsProvider] = createOnyxContext(ONYXKEY
const [withCurrentDate, CurrentDateProvider] = createOnyxContext(ONYXKEYS.CURRENT_DATE);
const [withReportActionsDrafts, ReportActionsDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS);
const [withBlockedFromConcierge, BlockedFromConciergeProvider] = createOnyxContext(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
-const [withBetas, BetasProvider, BetasContext] = createOnyxContext(ONYXKEYS.BETAS);
+const [withBetas, BetasProvider] = createOnyxContext(ONYXKEYS.BETAS);
const propTypes = {
/** Rendered child component */
children: PropTypes.node.isRequired,
};
-const OnyxProvider = (props) => (
-
- {props.children}
-
-);
+function OnyxProvider(props) {
+ return (
+
+ {props.children}
+
+ );
+}
OnyxProvider.displayName = 'OnyxProvider';
OnyxProvider.propTypes = propTypes;
export default OnyxProvider;
-export {withNetwork, withPersonalDetails, withReportActionsDrafts, withCurrentDate, withBlockedFromConcierge, withBetas, NetworkContext, BetasContext};
+export {withNetwork, withPersonalDetails, withReportActionsDrafts, withCurrentDate, withBlockedFromConcierge, withBetas, NetworkContext};
diff --git a/src/components/OpacityView.js b/src/components/OpacityView.js
index 241d83973cf8..c36c9257b4b0 100644
--- a/src/components/OpacityView.js
+++ b/src/components/OpacityView.js
@@ -35,7 +35,7 @@ const defaultProps = {
dimmingValue: variables.hoverDimValue,
};
-const OpacityView = (props) => {
+function OpacityView(props) {
const opacity = useSharedValue(1);
const opacityStyle = useAnimatedStyle(() => ({
opacity: opacity.value,
@@ -54,7 +54,7 @@ const OpacityView = (props) => {
{props.children}
);
-};
+}
OpacityView.displayName = 'OpacityView';
OpacityView.propTypes = propTypes;
diff --git a/src/components/PDFView/PDFInfoMessage.js b/src/components/PDFView/PDFInfoMessage.js
index 60999be7099f..b3c50596bb1b 100644
--- a/src/components/PDFView/PDFInfoMessage.js
+++ b/src/components/PDFView/PDFInfoMessage.js
@@ -16,22 +16,24 @@ const propTypes = {
...withLocalizePropTypes,
};
-const PDFInfoMessage = (props) => (
-
-
- {props.translate('attachmentView.pdfPasswordForm.title')}
- {props.translate('attachmentView.pdfPasswordForm.infoText')}
-
- {props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
- {` ${props.translate('attachmentView.pdfPasswordForm.linkText')} `}
- {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
-
-
-);
+function PDFInfoMessage(props) {
+ return (
+
+
+ {props.translate('attachmentView.pdfPasswordForm.title')}
+ {props.translate('attachmentView.pdfPasswordForm.infoText')}
+
+ {props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
+ {` ${props.translate('attachmentView.pdfPasswordForm.linkText')} `}
+ {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
+
+
+ );
+}
PDFInfoMessage.propTypes = propTypes;
PDFInfoMessage.displayName = 'PDFInfoMessage';
diff --git a/src/components/PinButton.js b/src/components/PinButton.js
index 00d9ae3a6077..6292123faa39 100644
--- a/src/components/PinButton.js
+++ b/src/components/PinButton.js
@@ -20,19 +20,21 @@ const defaultProps = {
report: null,
};
-const PinButton = (props) => (
-
- Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
- style={[styles.touchableButtonImage]}
- >
-
-
-
-);
+function PinButton(props) {
+ return (
+
+ Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
+ style={[styles.touchableButtonImage]}
+ >
+
+
+
+ );
+}
PinButton.displayName = 'PinButton';
PinButton.propTypes = propTypes;
diff --git a/src/components/PlaidLink/index.js b/src/components/PlaidLink/index.js
index b399e3dd662a..f1227bd15c68 100644
--- a/src/components/PlaidLink/index.js
+++ b/src/components/PlaidLink/index.js
@@ -3,7 +3,7 @@ import {usePlaidLink} from 'react-plaid-link';
import {plaidLinkPropTypes, plaidLinkDefaultProps} from './plaidLinkPropTypes';
import Log from '../../libs/Log';
-const PlaidLink = (props) => {
+function PlaidLink(props) {
const [isPlaidLoaded, setIsPlaidLoaded] = useState(false);
const onSuccess = props.onSuccess;
const onError = props.onError;
@@ -49,7 +49,7 @@ const PlaidLink = (props) => {
}, [ready, error, isPlaidLoaded, open, onError]);
return null;
-};
+}
PlaidLink.propTypes = plaidLinkPropTypes;
PlaidLink.defaultProps = plaidLinkDefaultProps;
diff --git a/src/components/PlaidLink/index.native.js b/src/components/PlaidLink/index.native.js
index 35af8f217091..402fbe22d64c 100644
--- a/src/components/PlaidLink/index.native.js
+++ b/src/components/PlaidLink/index.native.js
@@ -4,7 +4,7 @@ import Log from '../../libs/Log';
import CONST from '../../CONST';
import {plaidLinkPropTypes, plaidLinkDefaultProps} from './plaidLinkPropTypes';
-const PlaidLink = (props) => {
+function PlaidLink(props) {
useDeepLinkRedirector();
usePlaidEmitter((event) => {
Log.info('[PlaidLink] Handled Plaid Event: ', false, event);
@@ -30,7 +30,7 @@ const PlaidLink = (props) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return null;
-};
+}
PlaidLink.propTypes = plaidLinkPropTypes;
PlaidLink.defaultProps = plaidLinkDefaultProps;
diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index 2c3adf263cc5..af0ca708f58f 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -9,7 +9,7 @@ import withWindowDimensions from '../withWindowDimensions';
* This is a convenience wrapper around the Modal component for a responsive Popover.
* On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
*/
-const Popover = (props) => {
+function Popover(props) {
if (!props.fullscreen && !props.isSmallScreenWidth) {
return createPortal(
{
onLayout={props.onLayout}
/>
);
-};
+}
Popover.propTypes = propTypes;
Popover.defaultProps = defaultProps;
diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
index 1133006b7a1a..b4ca194e7483 100644
--- a/src/components/Popover/index.native.js
+++ b/src/components/Popover/index.native.js
@@ -13,7 +13,7 @@ const propTypes = {
* This is a convenience wrapper around the Modal component for a responsive Popover.
* On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
*/
-const Popover = (props) => {
+function Popover(props) {
const propsWithoutAnimation = _.omit(props, ['animationIn', 'animationOut', 'popoverAnchorPosition', 'disableAnimation']);
return (
{
fullscreen
/>
);
-};
+}
Popover.propTypes = propTypes;
Popover.defaultProps = defaultProps;
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 330a6a8b61f5..4de4a2341283 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -38,7 +38,7 @@ const defaultProps = {
},
};
-const PopoverMenu = (props) => {
+function PopoverMenu(props) {
const {isSmallScreenWidth} = useWindowDimensions();
const [selectedItemIndex, setSelectedItemIndex] = useState(null);
@@ -97,7 +97,7 @@ const PopoverMenu = (props) => {
);
-};
+}
PopoverMenu.propTypes = propTypes;
PopoverMenu.defaultProps = defaultProps;
diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js
index 281492568867..4516a57a85d3 100644
--- a/src/components/Pressable/PressableWithFeedback.js
+++ b/src/components/Pressable/PressableWithFeedback.js
@@ -24,12 +24,17 @@ const PressableWithFeedbackPropTypes = {
* @default variables.hoverDimValue
*/
hoverDimmingValue: propTypes.number,
+ /**
+ * Used to locate this view from native classes.
+ */
+ nativeID: propTypes.string,
};
const PressableWithFeedbackDefaultProps = {
..._.omit(GenericPressablePropTypes.defaultProps, omittedProps),
pressDimmingValue: variables.pressDimValue,
hoverDimmingValue: variables.hoverDimValue,
+ nativeID: '',
wrapperStyle: [],
};
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index 9ea6b5f28739..7f43451cbadd 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -77,6 +77,7 @@ class PressableWithSecondaryInteraction extends Component {
// On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
return (
(this.pressableRef = el)}
// eslint-disable-next-line react/jsx-props-no-spreading
{...defaultPressableProps}
- style={(state) => [StyleUtils.parseStyleFromFunction(this.props.style, state), ...[this.props.inline && styles.dInline]]}
>
{this.props.children}
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js
index 7768430c363d..8a7771b00853 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.js
+++ b/src/components/PressableWithSecondaryInteraction/index.native.js
@@ -11,7 +11,7 @@ import HapticFeedback from '../../libs/HapticFeedback';
* @param {Object} props
* @returns {React.Component}
*/
-const PressableWithSecondaryInteraction = (props) => {
+function PressableWithSecondaryInteraction(props) {
// Use Text node for inline mode to prevent content overflow.
const Node = props.inline ? Text : Pressable;
return (
@@ -35,7 +35,7 @@ const PressableWithSecondaryInteraction = (props) => {
{props.children}
);
-};
+}
PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes;
PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps;
diff --git a/src/components/RNTextInput.js b/src/components/RNTextInput.js
index 4d4d54adbdc5..869ca24ae760 100644
--- a/src/components/RNTextInput.js
+++ b/src/components/RNTextInput.js
@@ -13,19 +13,21 @@ const defaultProps = {
forwardedRef: () => {},
};
-const RNTextInput = (props) => (
- {
- if (!_.isFunction(props.forwardedRef)) {
- return;
- }
- props.forwardedRef(ref);
- }}
- // eslint-disable-next-line
- {...props}
- />
-);
+function RNTextInput(props) {
+ return (
+ {
+ if (!_.isFunction(props.forwardedRef)) {
+ return;
+ }
+ props.forwardedRef(ref);
+ }}
+ // eslint-disable-next-line
+ {...props}
+ />
+ );
+}
RNTextInput.propTypes = propTypes;
RNTextInput.defaultProps = defaultProps;
diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 1111acc591be..613f3d97d747 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -28,25 +28,27 @@ const defaultProps = {
disabled: false,
};
-const RadioButton = (props) => (
-
-
-
-
-
-);
+function RadioButton(props) {
+ return (
+
+
+
+
+
+ );
+}
RadioButton.propTypes = propTypes;
RadioButton.defaultProps = defaultProps;
diff --git a/src/components/RadioButtonWithLabel.js b/src/components/RadioButtonWithLabel.js
index 7dbcb5676ce9..6175b29c01db 100644
--- a/src/components/RadioButtonWithLabel.js
+++ b/src/components/RadioButtonWithLabel.js
@@ -41,7 +41,7 @@ const defaultProps = {
const PressableWithFeedback = Pressables.PressableWithFeedback;
-const RadioButtonWithLabel = (props) => {
+function RadioButtonWithLabel(props) {
const LabelComponent = props.LabelComponent;
const defaultStyles = [styles.flexRow, styles.alignItemsCenter];
const wrapperStyles = _.isArray(props.style) ? [...defaultStyles, ...props.style] : [...defaultStyles, props.style];
@@ -75,7 +75,7 @@ const RadioButtonWithLabel = (props) => {
>
);
-};
+}
RadioButtonWithLabel.propTypes = propTypes;
RadioButtonWithLabel.defaultProps = defaultProps;
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 7704ee4c25c4..a3568d046bed 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -43,7 +43,7 @@ const defaultProps = {
onPressOpenPicker: undefined,
};
-const AddReactionBubble = (props) => {
+function AddReactionBubble(props) {
const ref = useRef();
const onPress = () => {
@@ -94,7 +94,7 @@ const AddReactionBubble = (props) => {
);
-};
+}
AddReactionBubble.propTypes = propTypes;
AddReactionBubble.defaultProps = defaultProps;
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index dc60d60c2f30..d8e8caf5847e 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -48,21 +48,23 @@ const defaultProps = {
...withCurrentUserPersonalDetailsDefaultProps,
};
-const EmojiReactionBubble = (props) => (
- [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()}
- >
- {props.emojiCodes.join('')}
- {props.count > 0 && {props.count}}
-
-);
+function EmojiReactionBubble(props) {
+ return (
+ [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()}
+ >
+ {props.emojiCodes.join('')}
+ {props.count > 0 && {props.count}}
+
+ );
+}
EmojiReactionBubble.propTypes = propTypes;
EmojiReactionBubble.defaultProps = defaultProps;
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 373444022e46..91fa8817172c 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -45,7 +45,7 @@ const defaultProps = {
* @param {Props} props
* @returns {JSX.Element}
*/
-const MiniQuickEmojiReactions = (props) => {
+function MiniQuickEmojiReactions(props) {
const ref = useRef();
const openEmojiPicker = () => {
@@ -87,7 +87,7 @@ const MiniQuickEmojiReactions = (props) => {
);
-};
+}
MiniQuickEmojiReactions.displayName = 'MiniQuickEmojiReactions';
MiniQuickEmojiReactions.propTypes = propTypes;
diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
index e5b7e062a0a9..7a0eb42a0ebd 100644
--- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
+++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
@@ -46,30 +46,32 @@ const defaultProps = {
preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
};
-const BaseQuickEmojiReactions = (props) => (
-
- {_.map(CONST.QUICK_REACTIONS, (emoji) => (
-
-
- props.onEmojiSelected(emoji))}
- />
-
-
- ))}
-
-
-);
+function BaseQuickEmojiReactions(props) {
+ return (
+
+ {_.map(CONST.QUICK_REACTIONS, (emoji) => (
+
+
+ props.onEmojiSelected(emoji))}
+ />
+
+
+ ))}
+
+
+ );
+}
BaseQuickEmojiReactions.displayName = 'BaseQuickEmojiReactions';
BaseQuickEmojiReactions.propTypes = propTypes;
diff --git a/src/components/Reactions/QuickEmojiReactions/index.js b/src/components/Reactions/QuickEmojiReactions/index.js
index fbeb0b5867d3..dd05c4f2cea3 100644
--- a/src/components/Reactions/QuickEmojiReactions/index.js
+++ b/src/components/Reactions/QuickEmojiReactions/index.js
@@ -15,7 +15,7 @@ const propTypes = {
closeContextMenu: PropTypes.func.isRequired,
};
-const QuickEmojiReactions = (props) => {
+function QuickEmojiReactions(props) {
const onPressOpenPicker = (openPicker) => {
openPicker(contextMenuRef.current.contentRef.current, {
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
@@ -31,7 +31,7 @@ const QuickEmojiReactions = (props) => {
onWillShowPicker={props.closeContextMenu}
/>
);
-};
+}
QuickEmojiReactions.displayName = 'QuickEmojiReactions';
QuickEmojiReactions.propTypes = propTypes;
diff --git a/src/components/Reactions/QuickEmojiReactions/index.native.js b/src/components/Reactions/QuickEmojiReactions/index.native.js
index aa829597d1d0..5ad8e0097e0e 100644
--- a/src/components/Reactions/QuickEmojiReactions/index.native.js
+++ b/src/components/Reactions/QuickEmojiReactions/index.native.js
@@ -14,7 +14,7 @@ const propTypes = {
closeContextMenu: PropTypes.func.isRequired,
};
-const QuickEmojiReactions = (props) => {
+function QuickEmojiReactions(props) {
const onPressOpenPicker = (openPicker) => {
// We first need to close the menu as it's a popover.
// The picker is a popover as well and on mobile there can only
@@ -34,7 +34,7 @@ const QuickEmojiReactions = (props) => {
onPressOpenPicker={onPressOpenPicker}
/>
);
-};
+}
QuickEmojiReactions.displayName = 'QuickEmojiReactions';
QuickEmojiReactions.propTypes = propTypes;
diff --git a/src/components/Reactions/ReactionTooltipContent.js b/src/components/Reactions/ReactionTooltipContent.js
index 42c2a1f0fa61..981441925906 100644
--- a/src/components/Reactions/ReactionTooltipContent.js
+++ b/src/components/Reactions/ReactionTooltipContent.js
@@ -31,7 +31,7 @@ const defaultProps = {
...withCurrentUserPersonalDetailsDefaultProps,
};
-const ReactionTooltipContent = (props) => {
+function ReactionTooltipContent(props) {
const users = useMemo(
() => PersonalDetailsUtils.getPersonalDetailsByIDs(props.accountIDs, props.currentUserPersonalDetails.accountID, true),
[props.currentUserPersonalDetails.accountID, props.accountIDs],
@@ -58,7 +58,7 @@ const ReactionTooltipContent = (props) => {
{`${props.translate('emojiReactions.reactedWith')} :${props.emojiName}:`}
);
-};
+}
ReactionTooltipContent.propTypes = propTypes;
ReactionTooltipContent.defaultProps = defaultProps;
diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js
index 053bdafc5c2b..b1194daef773 100644
--- a/src/components/Reactions/ReportActionItemReactions.js
+++ b/src/components/Reactions/ReportActionItemReactions.js
@@ -46,7 +46,7 @@ const defaultProps = {
...withCurrentUserPersonalDetailsDefaultProps,
};
-const ReportActionItemReactions = (props) => {
+function ReportActionItemReactions(props) {
const popoverReactionListAnchor = useRef(null);
const reactionsWithCount = _.filter(props.reactions, (reaction) => reaction.users.length > 0);
@@ -100,7 +100,7 @@ const ReportActionItemReactions = (props) => {
{reactionsWithCount.length > 0 && }
);
-};
+}
ReportActionItemReactions.displayName = 'ReportActionItemReactions';
ReportActionItemReactions.propTypes = propTypes;
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index a110d3c747ba..c8b12eb8592d 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -22,31 +22,33 @@ const propTypes = {
...withLocalizePropTypes,
};
-const ReimbursementAccountLoadingIndicator = (props) => (
-
-
-
- {props.isSubmittingVerificationsData ? (
-
-
-
- {props.translate('reimbursementAccountLoadingAnimation.explanationLine')}
+function ReimbursementAccountLoadingIndicator(props) {
+ return (
+
+
+
+ {props.isSubmittingVerificationsData ? (
+
+
+
+ {props.translate('reimbursementAccountLoadingAnimation.explanationLine')}
+
-
- ) : (
-
- )}
-
-
-);
+ ) : (
+
+ )}
+
+
+ );
+}
ReimbursementAccountLoadingIndicator.propTypes = propTypes;
ReimbursementAccountLoadingIndicator.displayName = 'ReimbursementAccountLoadingIndicator';
diff --git a/src/components/RenderHTML.js b/src/components/RenderHTML.js
index 203c78de4b25..d2d4f0b58e71 100644
--- a/src/components/RenderHTML.js
+++ b/src/components/RenderHTML.js
@@ -12,7 +12,7 @@ const propTypes = {
// Configuration for RenderHTML is handled in a top-level component providing
// context to RenderHTMLSource components. See https://git.io/JRcZb
// The provider is available at src/components/HTMLEngineProvider/
-const RenderHTML = (props) => {
+function RenderHTML(props) {
const {windowWidth} = useWindowDimensions();
return (
{
source={{html: props.html}}
/>
);
-};
+}
RenderHTML.displayName = 'RenderHTML';
RenderHTML.propTypes = propTypes;
diff --git a/src/components/ReportActionItem/ChronosOOOListActions.js b/src/components/ReportActionItem/ChronosOOOListActions.js
index 6cb166e4a5bd..3c9c65d8f254 100644
--- a/src/components/ReportActionItem/ChronosOOOListActions.js
+++ b/src/components/ReportActionItem/ChronosOOOListActions.js
@@ -22,7 +22,7 @@ const propTypes = {
...withLocalizePropTypes,
};
-const ChronosOOOListActions = (props) => {
+function ChronosOOOListActions(props) {
const events = lodashGet(props.action, 'originalMessage.events', []);
if (!events.length) {
@@ -70,7 +70,7 @@ const ChronosOOOListActions = (props) => {
);
-};
+}
ChronosOOOListActions.propTypes = propTypes;
ChronosOOOListActions.displayName = 'ChronosOOOListActions';
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index a4e4561bd6db..6281706da2f3 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -124,7 +124,7 @@ const defaultProps = {
shouldShowPendingConversionMessage: false,
};
-const IOUPreview = (props) => {
+function IOUPreview(props) {
if (_.isEmpty(props.iouReport) && !props.isBillSplit) {
return null;
}
@@ -257,7 +257,7 @@ const IOUPreview = (props) => {
{childContainer}
);
-};
+}
IOUPreview.propTypes = propTypes;
IOUPreview.defaultProps = defaultProps;
diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js
index 1f11eeae780e..b9bebeb94193 100644
--- a/src/components/ReportActionItem/MoneyRequestAction.js
+++ b/src/components/ReportActionItem/MoneyRequestAction.js
@@ -90,7 +90,7 @@ const defaultProps = {
style: [],
};
-const MoneyRequestAction = (props) => {
+function MoneyRequestAction(props) {
const isSplitBillAction = lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
const onIOUPreviewPressed = () => {
@@ -158,7 +158,7 @@ const MoneyRequestAction = (props) => {
/>
>
);
-};
+}
MoneyRequestAction.propTypes = propTypes;
MoneyRequestAction.defaultProps = defaultProps;
diff --git a/src/components/ReportActionItem/RenameAction.js b/src/components/ReportActionItem/RenameAction.js
index b444e705adbe..369f4da10b39 100644
--- a/src/components/ReportActionItem/RenameAction.js
+++ b/src/components/ReportActionItem/RenameAction.js
@@ -13,7 +13,7 @@ const propTypes = {
...withLocalizePropTypes,
};
-const RenameAction = (props) => {
+function RenameAction(props) {
const displayName = lodashGet(props.action, ['message', 0, 'text']);
const oldName = lodashGet(props.action, 'originalMessage.oldName', '');
const newName = lodashGet(props.action, 'originalMessage.newName', '');
@@ -24,7 +24,7 @@ const RenameAction = (props) => {
{props.translate('newRoomPage.renamedRoomAction', {oldName, newName})}
);
-};
+}
RenameAction.propTypes = propTypes;
RenameAction.displayName = 'RenameAction';
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index e7ba7fde70d5..585e91c3f559 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -94,7 +94,7 @@ const defaultProps = {
},
};
-const ReportPreview = (props) => {
+function ReportPreview(props) {
const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
const managerEmail = props.iouReport.managerEmail || '';
const managerName = ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true);
@@ -156,7 +156,7 @@ const ReportPreview = (props) => {
)}
);
-};
+}
ReportPreview.propTypes = propTypes;
ReportPreview.defaultProps = defaultProps;
diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js
index 90483e9dff3b..bdf8f374dde3 100644
--- a/src/components/ReportActionItem/TaskAction.js
+++ b/src/components/ReportActionItem/TaskAction.js
@@ -35,7 +35,7 @@ const propTypes = {
const defaultProps = {
taskReport: {},
};
-const TaskAction = (props) => {
+function TaskAction(props) {
const taskReportName = props.taskReport.reportName || '';
let messageLinkText = '';
@@ -61,7 +61,7 @@ const TaskAction = (props) => {
>
);
-};
+}
TaskAction.propTypes = propTypes;
TaskAction.defaultProps = defaultProps;
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 3f66c211d476..2ddf2def5e89 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -49,7 +49,7 @@ const defaultProps = {
isHovered: false,
};
-const TaskPreview = (props) => {
+function TaskPreview(props) {
// The reportAction might not contain details regarding the taskReport
// Only the direct parent reportAction will contain details about the taskReport
// Other linked reportActions will only contain the taskReportID and we will grab the details from there
@@ -87,7 +87,7 @@ const TaskPreview = (props) => {
/>
);
-};
+}
TaskPreview.propTypes = propTypes;
TaskPreview.defaultProps = defaultProps;
diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
index 87a06cde8552..f87ae176e3ac 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
@@ -16,49 +16,51 @@ const defaultTypes = {
shouldAnimate: true,
};
-const SkeletonViewLines = (props) => (
-
-
-
-
- {props.numberOfRows > 1 && (
+function SkeletonViewLines(props) {
+ return (
+
+
- )}
- {props.numberOfRows > 2 && (
- )}
-
-);
+ {props.numberOfRows > 1 && (
+
+ )}
+ {props.numberOfRows > 2 && (
+
+ )}
+
+ );
+}
SkeletonViewLines.displayName = 'SkeletonViewLines';
SkeletonViewLines.propTypes = propTypes;
diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js
index 7cce81ff5eae..2fe7e590afef 100644
--- a/src/components/ReportActionsSkeletonView/index.js
+++ b/src/components/ReportActionsSkeletonView/index.js
@@ -16,7 +16,7 @@ const defaultProps = {
shouldAnimate: true,
};
-const ReportActionsSkeletonView = (props) => {
+function ReportActionsSkeletonView(props) {
// Determines the number of content items based on container height
const possibleVisibleContentItems = Math.ceil(props.containerHeight / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
const skeletonViewLines = [];
@@ -52,7 +52,7 @@ const ReportActionsSkeletonView = (props) => {
}
}
return {skeletonViewLines};
-};
+}
ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView';
ReportActionsSkeletonView.propTypes = propTypes;
diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index a2f9aee5c8e4..a5d0b285ee32 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -23,47 +23,49 @@ const defaultProps = {
shouldAnimate: true,
};
-const ReportHeaderSkeletonView = (props) => (
-
-
- {props.isSmallScreenWidth && (
- {}}
- style={[styles.LHNToggle]}
- accessibilityRole="button"
- accessibilityLabel={props.translate('common.back')}
+function ReportHeaderSkeletonView(props) {
+ return (
+
+
+ {props.isSmallScreenWidth && (
+ {}}
+ style={[styles.LHNToggle]}
+ accessibilityRole="button"
+ accessibilityLabel={props.translate('common.back')}
+ >
+
+
+ )}
+
-
-
- )}
-
-
-
-
-
+
+
+
+
+
-
-);
+ );
+}
ReportHeaderSkeletonView.propTypes = propTypes;
ReportHeaderSkeletonView.defaultProps = defaultProps;
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index dc38a4560b25..0607f0713fbb 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -50,7 +50,7 @@ const defaultProps = {
betas: [],
};
-const ReportWelcomeText = (props) => {
+function ReportWelcomeText(props) {
const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
const isChatRoom = ReportUtils.isChatRoom(props.report);
const isDefault = !(isChatRoom || isPolicyExpenseChat);
@@ -121,7 +121,7 @@ const ReportWelcomeText = (props) => {
>
);
-};
+}
ReportWelcomeText.defaultProps = defaultProps;
ReportWelcomeText.propTypes = propTypes;
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index b095563785d3..6f78e6ace66d 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -18,7 +18,7 @@ const defaultProps = {
icons: [],
};
-const RoomHeaderAvatars = (props) => {
+function RoomHeaderAvatars(props) {
if (!props.icons.length) {
return null;
}
@@ -79,7 +79,7 @@ const RoomHeaderAvatars = (props) => {
);
-};
+}
RoomHeaderAvatars.defaultProps = defaultProps;
RoomHeaderAvatars.propTypes = propTypes;
diff --git a/src/components/SVGImage/index.js b/src/components/SVGImage/index.js
index a546cc4f575a..7374539509e2 100644
--- a/src/components/SVGImage/index.js
+++ b/src/components/SVGImage/index.js
@@ -3,13 +3,15 @@ import {Image} from 'react-native';
import * as StyleUtils from '../../styles/StyleUtils';
import propTypes from './propTypes';
-const SVGImage = (props) => (
-
-);
+function SVGImage(props) {
+ return (
+
+ );
+}
SVGImage.propTypes = propTypes;
SVGImage.displayName = 'SVGImage';
diff --git a/src/components/SVGImage/index.native.js b/src/components/SVGImage/index.native.js
index dbf09ef4db06..78b1f8ef7e78 100644
--- a/src/components/SVGImage/index.native.js
+++ b/src/components/SVGImage/index.native.js
@@ -2,13 +2,15 @@ import React from 'react';
import {SvgCssUri} from 'react-native-svg';
import propTypes from './propTypes';
-const SVGImage = (props) => (
-
-);
+function SVGImage(props) {
+ return (
+
+ );
+}
SVGImage.propTypes = propTypes;
SVGImage.displayName = 'SVGImage';
diff --git a/src/components/SafeArea/index.ios.js b/src/components/SafeArea/index.ios.js
index 871c761e0866..ba9b1f01e298 100644
--- a/src/components/SafeArea/index.ios.js
+++ b/src/components/SafeArea/index.ios.js
@@ -3,14 +3,16 @@ import {SafeAreaView} from 'react-native-safe-area-context';
import PropTypes from 'prop-types';
import styles from '../../styles/styles';
-const SafeArea = (props) => (
-
- {props.children}
-
-);
+function SafeArea(props) {
+ return (
+
+ {props.children}
+
+ );
+}
SafeArea.propTypes = {
/** App content */
diff --git a/src/components/SafeAreaConsumer.js b/src/components/SafeAreaConsumer.js
index c49048ad04a4..78d7426ba380 100644
--- a/src/components/SafeAreaConsumer.js
+++ b/src/components/SafeAreaConsumer.js
@@ -15,19 +15,21 @@ const propTypes = {
* @param {Object} props
* @returns {React.Component}
*/
-const SafeAreaConsumer = (props) => (
-
- {(insets) => {
- const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
- return props.children({
- paddingTop,
- paddingBottom,
- insets,
- safeAreaPaddingBottomStyle: {paddingBottom},
- });
- }}
-
-);
+function SafeAreaConsumer(props) {
+ return (
+
+ {(insets) => {
+ const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+ return props.children({
+ paddingTop,
+ paddingBottom,
+ insets,
+ safeAreaPaddingBottomStyle: {paddingBottom},
+ });
+ }}
+
+ );
+}
SafeAreaConsumer.displayName = 'SafeAreaConsumer';
SafeAreaConsumer.propTypes = propTypes;
diff --git a/src/components/Section.js b/src/components/Section.js
index 3849e50c7126..cd390be0d00b 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -41,7 +41,7 @@ const defaultProps = {
iconContainerStyles: [],
};
-const Section = (props) => {
+function Section(props) {
const IconComponent = props.IconComponent;
return (
<>
@@ -68,7 +68,7 @@ const Section = (props) => {
>
);
-};
+}
Section.displayName = 'Section';
Section.propTypes = propTypes;
diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js
index aef320dd7785..93cf285eab59 100644
--- a/src/components/SelectCircle.js
+++ b/src/components/SelectCircle.js
@@ -15,16 +15,18 @@ const defaultProps = {
isChecked: false,
};
-const SelectCircle = (props) => (
-
- {props.isChecked && (
-
- )}
-
-);
+function SelectCircle(props) {
+ return (
+
+ {props.isChecked && (
+
+ )}
+
+ );
+}
SelectCircle.propTypes = propTypes;
SelectCircle.defaultProps = defaultProps;
diff --git a/src/components/SignInPageForm/index.native.js b/src/components/SignInPageForm/index.native.js
index 115abe2b444b..acd1dfe0d197 100644
--- a/src/components/SignInPageForm/index.native.js
+++ b/src/components/SignInPageForm/index.native.js
@@ -1,8 +1,10 @@
import React from 'react';
import FormElement from '../FormElement';
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Form = (props) => ;
+function Form(props) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
Form.displayName = 'Form';
export default Form;
diff --git a/src/components/SplashScreenHider/index.js b/src/components/SplashScreenHider/index.js
index cf8745715572..a3f3647ede81 100644
--- a/src/components/SplashScreenHider/index.js
+++ b/src/components/SplashScreenHider/index.js
@@ -11,7 +11,7 @@ const defaultProps = {
onHide: () => {},
};
-const SplashScreenHider = (props) => {
+function SplashScreenHider(props) {
const {onHide} = props;
useEffect(() => {
@@ -19,7 +19,7 @@ const SplashScreenHider = (props) => {
}, [onHide]);
return null;
-};
+}
SplashScreenHider.displayName = 'SplashScreenHider';
SplashScreenHider.propTypes = propTypes;
diff --git a/src/components/SplashScreenHider/index.native.js b/src/components/SplashScreenHider/index.native.js
index 6b626ceaaf1f..ad3b97ae7c12 100644
--- a/src/components/SplashScreenHider/index.native.js
+++ b/src/components/SplashScreenHider/index.native.js
@@ -15,7 +15,7 @@ const defaultProps = {
onHide: () => {},
};
-const SplashScreenHider = (props) => {
+function SplashScreenHider(props) {
const {onHide} = props;
const opacity = useSharedValue(1);
@@ -77,7 +77,7 @@ const SplashScreenHider = (props) => {
);
-};
+}
SplashScreenHider.displayName = 'SplashScreenHider';
SplashScreenHider.propTypes = propTypes;
diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js
index 6c65bb17ce69..b94bf4dffd25 100644
--- a/src/components/SubscriptAvatar.js
+++ b/src/components/SubscriptAvatar.js
@@ -43,7 +43,7 @@ const defaultProps = {
noMargin: false,
};
-const SubscriptAvatar = (props) => {
+function SubscriptAvatar(props) {
const containerStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar;
// Default the margin style to what is normal for small or normal sized avatars
@@ -84,7 +84,7 @@ const SubscriptAvatar = (props) => {
);
-};
+}
SubscriptAvatar.displayName = 'SubscriptAvatar';
SubscriptAvatar.propTypes = propTypes;
diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.js
index 2e9c7fd4027c..474e4c9bb10c 100644
--- a/src/components/TestToolMenu.js
+++ b/src/components/TestToolMenu.js
@@ -36,65 +36,67 @@ const defaultProps = {
},
};
-const TestToolMenu = (props) => (
- <>
-
- Test Preferences
-
+function TestToolMenu(props) {
+ return (
+ <>
+
+ Test Preferences
+
- {/* Option to switch between staging and default api endpoints.
+ {/* Option to switch between staging and default api endpoints.
This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido.
This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */}
- {!CONFIG.IS_USING_LOCAL_WEB && (
-
+ {!CONFIG.IS_USING_LOCAL_WEB && (
+
+ User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
+ />
+
+ )}
+
+ {/* When toggled the app will be forced offline. */}
+
User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
+ accessibilityLabel="Force offline"
+ isOn={Boolean(props.network.shouldForceOffline)}
+ onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
/>
- )}
-
- {/* When toggled the app will be forced offline. */}
-
- Network.setShouldForceOffline(!props.network.shouldForceOffline)}
- />
-
- {/* When toggled all network requests will fail. */}
-
- Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
- />
-
+ {/* When toggled all network requests will fail. */}
+
+ Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
+ />
+
- {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */}
-
- Session.invalidateAuthToken()}
- />
-
+ {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */}
+
+ Session.invalidateAuthToken()}
+ />
+
- {/* Invalidate stored user auto-generated credentials. Useful for manually testing sign out logic. */}
-
- Session.invalidateCredentials()}
- />
-
- >
-);
+ {/* Invalidate stored user auto-generated credentials. Useful for manually testing sign out logic. */}
+
+ Session.invalidateCredentials()}
+ />
+
+ >
+ );
+}
TestToolMenu.propTypes = propTypes;
TestToolMenu.defaultProps = defaultProps;
diff --git a/src/components/TestToolRow.js b/src/components/TestToolRow.js
index b199cad3bc21..8dcd1ba35f43 100644
--- a/src/components/TestToolRow.js
+++ b/src/components/TestToolRow.js
@@ -12,14 +12,16 @@ const propTypes = {
children: PropTypes.node.isRequired,
};
-const TestToolRow = (props) => (
-
-
- {props.title}
+function TestToolRow(props) {
+ return (
+
+
+ {props.title}
+
+ {props.children}
- {props.children}
-
-);
+ );
+}
TestToolRow.propTypes = propTypes;
TestToolRow.displayName = 'TestToolRow';
diff --git a/src/components/TestToolsModal.js b/src/components/TestToolsModal.js
index 4308d0b44cc4..43a74e48df5d 100644
--- a/src/components/TestToolsModal.js
+++ b/src/components/TestToolsModal.js
@@ -25,17 +25,19 @@ const defaultProps = {
isTestToolsModalOpen: false,
};
-const TestToolsModal = (props) => (
-
-
-
-
-
-);
+function TestToolsModal(props) {
+ return (
+
+
+
+
+
+ );
+}
TestToolsModal.propTypes = propTypes;
TestToolsModal.defaultProps = defaultProps;
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index fcc37d0e9499..f498fbe16bbd 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -30,7 +30,7 @@ const defaultProps = {
onMouseDown: (event) => event.preventDefault(),
};
-const TextLink = (props) => {
+function TextLink(props) {
const rest = _.omit(props, _.keys(propTypes));
const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
@@ -71,7 +71,7 @@ const TextLink = (props) => {
{props.children}
);
-};
+}
TextLink.defaultProps = defaultProps;
TextLink.propTypes = propTypes;
diff --git a/src/components/TextPill.js b/src/components/TextPill.js
index 306d4f659185..a8a4f35b64fb 100644
--- a/src/components/TextPill.js
+++ b/src/components/TextPill.js
@@ -16,7 +16,7 @@ const defaultProps = {
style: [],
};
-const TextPill = (props) => {
+function TextPill(props) {
const propsStyle = StyleUtils.parseStyleAsArray(props.style);
return (
@@ -29,7 +29,7 @@ const TextPill = (props) => {
{props.text}
);
-};
+}
TextPill.propTypes = propTypes;
TextPill.defaultProps = defaultProps;
diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index 3fe6d6291767..1734e24b03b6 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -29,21 +29,23 @@ const defaultProps = {
wrapperStyle: {},
};
-const TextWithEllipsis = (props) => (
-
-
-
- {props.leadingText}
-
+function TextWithEllipsis(props) {
+ return (
+
+
+
+ {props.leadingText}
+
+
+
+ {props.trailingText}
+
-
- {props.trailingText}
-
-
-);
+ );
+}
TextWithEllipsis.propTypes = propTypes;
TextWithEllipsis.defaultProps = defaultProps;
diff --git a/src/components/UnorderedList.js b/src/components/UnorderedList.js
index 486fc557262e..4500d9fc3538 100644
--- a/src/components/UnorderedList.js
+++ b/src/components/UnorderedList.js
@@ -13,19 +13,21 @@ const defaultProps = {
items: [],
};
-const UnorderedList = (props) => (
- <>
- {_.map(props.items, (itemText) => (
-
- {'\u2022'}
- {itemText}
-
- ))}
- >
-);
+function UnorderedList(props) {
+ return (
+ <>
+ {_.map(props.items, (itemText) => (
+
+ {'\u2022'}
+ {itemText}
+
+ ))}
+ >
+ );
+}
UnorderedList.displayName = 'UnorderedList';
UnorderedList.propTypes = propTypes;
diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.js
index 0d45c90aa441..5273ab52ec28 100755
--- a/src/components/UnreadActionIndicator.js
+++ b/src/components/UnreadActionIndicator.js
@@ -5,17 +5,19 @@ import Text from './Text';
import CONST from '../CONST';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-const UnreadActionIndicator = (props) => (
-
-
- {props.translate('common.new')}
-
-);
+function UnreadActionIndicator(props) {
+ return (
+
+
+ {props.translate('common.new')}
+
+ );
+}
UnreadActionIndicator.propTypes = {...withLocalizePropTypes};
diff --git a/src/components/UpdateAppModal/index.desktop.js b/src/components/UpdateAppModal/index.desktop.js
index bf3af752501b..424b7a616e39 100644
--- a/src/components/UpdateAppModal/index.desktop.js
+++ b/src/components/UpdateAppModal/index.desktop.js
@@ -3,7 +3,7 @@ import BaseUpdateAppModal from './BaseUpdateAppModal';
import {propTypes} from './updateAppModalPropTypes';
import ELECTRON_EVENTS from '../../../desktop/ELECTRON_EVENTS';
-const UpdateAppModal = (props) => {
+function UpdateAppModal(props) {
const updateApp = () => {
if (props.onSubmit) {
props.onSubmit();
@@ -11,7 +11,7 @@ const UpdateAppModal = (props) => {
window.electron.send(ELECTRON_EVENTS.START_UPDATE);
};
return ;
-};
+}
UpdateAppModal.propTypes = propTypes;
UpdateAppModal.displayName = 'UpdateAppModal';
export default UpdateAppModal;
diff --git a/src/components/UpdateAppModal/index.js b/src/components/UpdateAppModal/index.js
index 271c4bcc15f3..488f69f66385 100644
--- a/src/components/UpdateAppModal/index.js
+++ b/src/components/UpdateAppModal/index.js
@@ -2,12 +2,14 @@ import React from 'react';
import BaseUpdateAppModal from './BaseUpdateAppModal';
import {propTypes} from './updateAppModalPropTypes';
-const UpdateAppModal = (props) => (
-
-);
+function UpdateAppModal(props) {
+ return (
+
+ );
+}
UpdateAppModal.propTypes = propTypes;
UpdateAppModal.displayName = 'UpdateAppModal';
export default UpdateAppModal;
diff --git a/src/components/VideoChatButtonAndMenu/index.android.js b/src/components/VideoChatButtonAndMenu/index.android.js
index 88fa5a3fc31b..53f43b73d600 100644
--- a/src/components/VideoChatButtonAndMenu/index.android.js
+++ b/src/components/VideoChatButtonAndMenu/index.android.js
@@ -6,13 +6,15 @@ import BaseVideoChatButtonAndMenu from './BaseVideoChatButtonAndMenu';
// On Android creating a new google meet meeting requires the CALL_PHONE permission in some cases
// so we're just opening the google meet app instead, more details:
// https://github.com/Expensify/App/issues/8851#issuecomment-1120236904
-const VideoChatButtonAndMenu = (props) => (
-
-);
+function VideoChatButtonAndMenu(props) {
+ return (
+
+ );
+}
VideoChatButtonAndMenu.propTypes = propTypes;
VideoChatButtonAndMenu.defaultProps = defaultProps;
diff --git a/src/components/VideoChatButtonAndMenu/index.js b/src/components/VideoChatButtonAndMenu/index.js
index 876a11df822d..bf3be904103a 100644
--- a/src/components/VideoChatButtonAndMenu/index.js
+++ b/src/components/VideoChatButtonAndMenu/index.js
@@ -3,13 +3,15 @@ import CONST from '../../CONST';
import {propTypes, defaultProps} from './videoChatButtonAndMenuPropTypes';
import BaseVideoChatButtonAndMenu from './BaseVideoChatButtonAndMenu';
-const VideoChatButtonAndMenu = (props) => (
-
-);
+function VideoChatButtonAndMenu(props) {
+ return (
+
+ );
+}
VideoChatButtonAndMenu.propTypes = propTypes;
VideoChatButtonAndMenu.defaultProps = defaultProps;
diff --git a/src/components/createOnyxContext.js b/src/components/createOnyxContext.js
index 8208dcaf56e2..3dbc07a7032e 100644
--- a/src/components/createOnyxContext.js
+++ b/src/components/createOnyxContext.js
@@ -11,7 +11,9 @@ const propTypes = {
export default (onyxKeyName, defaultValue) => {
const Context = createContext();
- const Provider = (props) => {props.children};
+ function Provider(props) {
+ return {props.children};
+ }
Provider.propTypes = propTypes;
Provider.displayName = `${Str.UCFirst(onyxKeyName)}Provider`;
diff --git a/src/components/withCurrentUserPersonalDetails.js b/src/components/withCurrentUserPersonalDetails.js
index 52a822a5096a..f46281b1dbbb 100644
--- a/src/components/withCurrentUserPersonalDetails.js
+++ b/src/components/withCurrentUserPersonalDetails.js
@@ -35,7 +35,7 @@ export default function (WrappedComponent) {
},
};
- const WithCurrentUserPersonalDetails = (props) => {
+ function WithCurrentUserPersonalDetails(props) {
const currentUserEmail = props.session.email;
const accountID = props.session.accountID;
const currentUserPersonalDetails = useMemo(() => ({...props.personalDetails[currentUserEmail], accountID}), [props.personalDetails, currentUserEmail, accountID]);
@@ -47,7 +47,7 @@ export default function (WrappedComponent) {
currentUserPersonalDetails={currentUserPersonalDetails}
/>
);
- };
+ }
WithCurrentUserPersonalDetails.displayName = `WithCurrentUserPersonalDetails(${getComponentDisplayName(WrappedComponent)})`;
WithCurrentUserPersonalDetails.propTypes = propTypes;
diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index def7110c1b40..4cbdda876231 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -179,4 +179,4 @@ export default function withLocalize(WrappedComponent) {
return WithLocalize;
}
-export {withLocalizePropTypes, Provider as LocaleContextProvider, LocaleContext};
+export {withLocalizePropTypes, Provider as LocaleContextProvider};
diff --git a/src/components/withNavigation.js b/src/components/withNavigation.js
index 609665ace05a..31e971daad7e 100644
--- a/src/components/withNavigation.js
+++ b/src/components/withNavigation.js
@@ -8,7 +8,7 @@ const withNavigationPropTypes = {
};
export default function withNavigation(WrappedComponent) {
- const WithNavigation = (props) => {
+ function WithNavigation(props) {
const navigation = useNavigation();
return (
);
- };
+ }
WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`;
WithNavigation.propTypes = {
diff --git a/src/components/withNavigationFocus.js b/src/components/withNavigationFocus.js
index 0de770c09ba6..e15f795832c6 100644
--- a/src/components/withNavigationFocus.js
+++ b/src/components/withNavigationFocus.js
@@ -8,7 +8,7 @@ const withNavigationFocusPropTypes = {
};
export default function withNavigationFocus(WrappedComponent) {
- const WithNavigationFocus = (props) => {
+ function WithNavigationFocus(props) {
const isFocused = useIsFocused();
return (
);
- };
+ }
WithNavigationFocus.displayName = `withNavigationFocus(${getComponentDisplayName(WrappedComponent)})`;
WithNavigationFocus.propTypes = {
diff --git a/src/components/withToggleVisibilityView.js b/src/components/withToggleVisibilityView.js
index 9d0620cbff1e..4537db2b7777 100644
--- a/src/components/withToggleVisibilityView.js
+++ b/src/components/withToggleVisibilityView.js
@@ -10,16 +10,18 @@ const toggleVisibilityViewPropTypes = {
};
export default function (WrappedComponent) {
- const WithToggleVisibilityView = (props) => (
-
-
-
- );
+ function WithToggleVisibilityView(props) {
+ return (
+
+
+
+ );
+ }
WithToggleVisibilityView.displayName = `WithToggleVisibilityView(${getComponentDisplayName(WrappedComponent)})`;
WithToggleVisibilityView.propTypes = {
diff --git a/src/hooks/useLocalize.js b/src/hooks/useLocalize.js
deleted file mode 100644
index 9ad5048729bd..000000000000
--- a/src/hooks/useLocalize.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {useContext} from 'react';
-import {LocaleContext} from '../components/withLocalize';
-
-export default function useLocalize() {
- return useContext(LocaleContext);
-}
diff --git a/src/hooks/usePermissions.js b/src/hooks/usePermissions.js
deleted file mode 100644
index 4ab581231489..000000000000
--- a/src/hooks/usePermissions.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import _ from 'underscore';
-import {useContext, useMemo} from 'react';
-import Permissions from '../libs/Permissions';
-import {BetasContext} from '../components/OnyxProvider';
-
-export default function usePermissions() {
- const betas = useContext(BetasContext);
- return useMemo(
- () =>
- _.reduce(
- Permissions,
- (memo, checkerFunction, beta) => {
- // eslint-disable-next-line no-param-reassign
- memo[beta] = checkerFunction(betas);
- return memo;
- },
- {},
- ),
- [betas],
- );
-}
diff --git a/src/languages/en.js b/src/languages/en.js
index 4602931ff120..ed205f6576a0 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1405,6 +1405,7 @@ export default {
lastReply: 'Last reply',
replies: 'Replies',
reply: 'Reply',
+ from: 'From',
},
qrCodes: {
copyUrlToClipboard: 'Copy URL to clipboard',
diff --git a/src/languages/es.js b/src/languages/es.js
index a787607c465d..e2a48a37f5f9 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1871,6 +1871,7 @@ export default {
lastReply: 'Última respuesta',
replies: 'Respuestas',
reply: 'Respuesta',
+ from: 'De',
},
qrCodes: {
copyUrlToClipboard: 'Copiar URL al portapapeles',
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 8539f384504c..c4a84701a083 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -19,6 +19,7 @@ import KeyboardShortcut from '../../KeyboardShortcut';
import Navigation from '../Navigation';
import * as User from '../../actions/User';
import * as Modal from '../../actions/Modal';
+import * as Report from '../../actions/Report';
import modalCardStyleInterpolator from './modalCardStyleInterpolator';
import createResponsiveStackNavigator from './createResponsiveStackNavigator';
import SCREENS from '../../../SCREENS';
@@ -85,6 +86,10 @@ const propTypes = {
session: PropTypes.shape({
email: PropTypes.string.isRequired,
}),
+
+ /** The report ID of the last opened public room as anonymous user */
+ lastOpenedPublicRoomID: PropTypes.string,
+
...windowDimensionsPropTypes,
};
@@ -92,6 +97,7 @@ const defaultProps = {
session: {
email: null,
},
+ lastOpenedPublicRoomID: null,
};
class AuthScreens extends React.Component {
@@ -115,6 +121,11 @@ class AuthScreens extends React.Component {
App.openApp();
App.setUpPoliciesAndNavigate(this.props.session);
+
+ if (this.props.lastOpenedPublicRoomID) {
+ // Re-open the last opened public room if the user logged in from a public room link
+ Report.openLastOpenedPublicRoom(this.props.lastOpenedPublicRoomID);
+ }
Download.clearDownloads();
Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);
@@ -274,5 +285,8 @@ export default compose(
session: {
key: ONYXKEYS.SESSION,
},
+ lastOpenedPublicRoomID: {
+ key: ONYXKEYS.LAST_OPENED_PUBLIC_ROOM_ID,
+ },
}),
)(AuthScreens);
diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js
index 0e84de5c4dd5..d74c4473a260 100644
--- a/src/libs/Navigation/AppNavigator/PublicScreens.js
+++ b/src/libs/Navigation/AppNavigator/PublicScreens.js
@@ -9,30 +9,32 @@ import UnlinkLoginPage from '../../../pages/UnlinkLoginPage';
const RootStack = createStackNavigator();
-const PublicScreens = () => (
-
-
-
-
-
-
-);
+function PublicScreens() {
+ return (
+
+
+
+
+
+
+ );
+}
PublicScreens.displayName = 'PublicScreens';
export default PublicScreens;
diff --git a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
index f8235a68745b..37ecc92a8f55 100644
--- a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
+++ b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
@@ -12,8 +12,6 @@ import reportPropTypes from '../../../pages/reportPropTypes';
import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
import {withNavigationPropTypes} from '../../../components/withNavigation';
import * as App from '../../actions/App';
-import * as Report from '../../actions/Report';
-import * as Session from '../../actions/Session';
const propTypes = {
/** Available reports that would be displayed in this navigator */
@@ -33,9 +31,6 @@ const propTypes = {
}),
),
- /** The report ID of the last opened public room as anonymous user */
- lastOpenedPublicRoomID: PropTypes.string,
-
isFirstTimeNewExpensifyUser: PropTypes.bool,
/** Navigation route context info provided by react navigation */
@@ -58,7 +53,6 @@ const defaultProps = {
betas: [],
policies: {},
isFirstTimeNewExpensifyUser: false,
- lastOpenedPublicRoomID: null,
};
/**
@@ -102,15 +96,6 @@ class ReportScreenWrapper extends Component {
}
}
- componentDidMount() {
- if (!this.props.lastOpenedPublicRoomID || Session.isAnonymousUser()) {
- return;
- }
- // Re-open the last opened public room if the user logged in
- Report.setLastOpenedPublicRoom('');
- Report.openReport(this.props.lastOpenedPublicRoomID);
- }
-
shouldComponentUpdate(nextProps) {
// Don't update if there is a reportID in the params already
if (lodashGet(this.props.route, 'params.reportID', null)) {
@@ -161,7 +146,4 @@ export default withOnyx({
isFirstTimeNewExpensifyUser: {
key: ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER,
},
- lastOpenedPublicRoomID: {
- key: ONYXKEYS.LAST_OPENED_PUBLIC_ROOM_ID,
- },
})(ReportScreenWrapper);
diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
index 1d03d419fdbd..d5555b83ea94 100644
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
@@ -22,7 +22,7 @@ const propTypes = {
...withNavigationPropTypes,
};
-const ThreePaneView = (props) => {
+function ThreePaneView(props) {
const lastCentralPaneIndex = _.findLastIndex(props.state.routes, {name: NAVIGATORS.CENTRAL_PANE_NAVIGATOR});
return (
@@ -80,7 +80,7 @@ const ThreePaneView = (props) => {
})}
);
-};
+}
ThreePaneView.propTypes = propTypes;
ThreePaneView.displayName = 'ThreePaneView';
diff --git a/src/libs/Navigation/AppNavigator/index.js b/src/libs/Navigation/AppNavigator/index.js
index c86f2d219455..dee8027b2f30 100644
--- a/src/libs/Navigation/AppNavigator/index.js
+++ b/src/libs/Navigation/AppNavigator/index.js
@@ -6,7 +6,7 @@ const propTypes = {
authenticated: PropTypes.bool.isRequired,
};
-const AppNavigator = (props) => {
+function AppNavigator(props) {
if (props.authenticated) {
const AuthScreens = require('./AuthScreens').default;
@@ -15,7 +15,7 @@ const AppNavigator = (props) => {
}
const PublicScreens = require('./PublicScreens').default;
return ;
-};
+}
AppNavigator.propTypes = propTypes;
AppNavigator.displayName = 'AppNavigator';
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index 5d60d1e4d2fb..f81a9fd2336d 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -51,7 +51,7 @@ function parseAndLogRoute(state) {
Navigation.setIsNavigationReady();
}
-const NavigationRoot = (props) => {
+function NavigationRoot(props) {
useFlipper(navigationRef);
const navigationStateRef = useRef(undefined);
@@ -77,7 +77,7 @@ const NavigationRoot = (props) => {
);
-};
+}
NavigationRoot.displayName = 'NavigationRoot';
NavigationRoot.propTypes = propTypes;
diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js
index c255760f5d87..7d6f4954b920 100644
--- a/src/libs/ReportActionsUtils.js
+++ b/src/libs/ReportActionsUtils.js
@@ -178,6 +178,25 @@ function getMostRecentIOURequestActionID(reportActions) {
return _.last(sortedReportActions).reportActionID;
}
+/**
+ * Returns array of links inside a given report action
+ *
+ * @param {Object} reportAction
+ * @returns {Boolean}
+ */
+function extractLinksFromMessageHtml(reportAction) {
+ const htmlContent = lodashGet(reportAction, ['message', 0, 'html']);
+
+ // Regex to get link in href prop inside of component
+ const regex = /]*?\s+)?href="([^"]*)"/gi;
+
+ if (!htmlContent) {
+ return;
+ }
+
+ return _.map([...htmlContent.matchAll(regex)], (match) => match[1]);
+}
+
/**
* Returns true when the report action immediately before the specified index is a comment made by the same actor who who is leaving a comment in the action at the specified index.
* Also checks to ensure that the comment is not too old to be shown as a grouped comment.
@@ -407,6 +426,7 @@ export {
getLastVisibleAction,
getLastVisibleMessageText,
getMostRecentIOURequestActionID,
+ extractLinksFromMessageHtml,
isDeletedAction,
shouldReportActionBeVisible,
isReportActionDeprecated,
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 4fa3d0ed2afc..0824497d9482 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -532,48 +532,6 @@ function isThreadFirstChat(reportAction, reportID) {
return !_.isUndefined(reportAction.childReportID) && reportAction.childReportID.toString() === reportID;
}
-/**
- * Get either the policyName or domainName the chat is tied to
- * @param {Object} report
- * @returns {String}
- */
-function getChatRoomSubtitle(report) {
- if (isThread(report)) {
- if (!getChatType(report)) {
- return '';
- }
-
- const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
-
- // If thread is not from a DM or group chat, the subtitle will follow the pattern 'Workspace Name • #roomName'
- const workspaceName = getPolicyName(report);
- let roomName = '';
- if (isChatRoom(report)) {
- if (parentReport) {
- roomName = lodashGet(parentReport, 'displayName', '');
- } else {
- roomName = lodashGet(report, 'displayName', '');
- }
- }
-
- return roomName ? [workspaceName, roomName].join(' • ') : workspaceName;
- }
- if (!isDefaultRoom(report) && !isUserCreatedPolicyRoom(report) && !isPolicyExpenseChat(report)) {
- return '';
- }
- 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);
- }
- if ((isPolicyExpenseChat(report) && report.isOwnPolicyExpenseChat) || isExpenseReport(report)) {
- return Localize.translateLocal('workspace.common.workspace');
- }
- if (isArchivedRoom(report)) {
- return report.oldPolicyName || '';
- }
- return getPolicyName(report);
-}
-
/**
* Get welcome message based on room type
* @param {Object} report
@@ -868,11 +826,8 @@ function getDisplayNameForParticipant(login, shouldUseShortForm = false) {
return '';
}
const personalDetails = getPersonalDetailsForLogin(login);
-
const longName = personalDetails.displayName;
-
const shortName = personalDetails.firstName || longName;
-
return shouldUseShortForm ? shortName : longName;
}
@@ -1055,6 +1010,60 @@ function getReportName(report) {
return _.map(participantsWithoutCurrentUser, (login) => getDisplayNameForParticipant(login, isMultipleParticipantReport)).join(', ');
}
+/**
+ * Recursively navigates through parent to get the root reports name only for DM reports.
+ * @param {Object} report
+ * @returns {String|*}
+ */
+function getDMRootReportName(report) {
+ if (isThread(report) && !getChatType(report)) {
+ const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
+ return getDMRootReportName(parentReport);
+ }
+
+ return getReportName(report);
+}
+
+/**
+ * Get either the policyName or domainName the chat is tied to
+ * @param {Object} report
+ * @returns {String}
+ */
+function getChatRoomSubtitle(report) {
+ if (isThread(report)) {
+ if (!getChatType(report)) {
+ return `${Localize.translateLocal('threads.from')} ${getDMRootReportName(report)}`;
+ }
+
+ let roomName = '';
+ if (isChatRoom(report)) {
+ const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
+ if (parentReport) {
+ roomName = lodashGet(parentReport, 'displayName', '');
+ } else {
+ roomName = lodashGet(report, 'displayName', '');
+ }
+ }
+
+ const workspaceName = getPolicyName(report);
+ return `${Localize.translateLocal('threads.from')} ${roomName ? [roomName, workspaceName].join(' in ') : workspaceName}`;
+ }
+ if (!isDefaultRoom(report) && !isUserCreatedPolicyRoom(report) && !isPolicyExpenseChat(report)) {
+ return '';
+ }
+ 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);
+ }
+ if ((isPolicyExpenseChat(report) && report.isOwnPolicyExpenseChat) || isExpenseReport(report)) {
+ return Localize.translateLocal('workspace.common.workspace');
+ }
+ if (isArchivedRoom(report)) {
+ return report.oldPolicyName || '';
+ }
+ return getPolicyName(report);
+}
+
/**
* Get the report for a reportID
*
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 79e2ce35a1d9..f459b7746ce8 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -586,6 +586,19 @@ function readOldestAction(reportID, reportActionID) {
);
}
+/**
+ * Gets metadata info about links in the provided report action
+ *
+ * @param {String} reportID
+ * @param {String} reportActionID
+ */
+function expandURLPreview(reportID, reportActionID) {
+ API.read('ExpandURLPreview', {
+ reportID,
+ reportActionID,
+ });
+}
+
/**
* Gets transactions and data associated with the linked report (expense or IOU report)
*
@@ -932,6 +945,7 @@ function editReportComment(reportID, originalReportAction, textForNewComment) {
// https://github.com/Expensify/App/issues/13221
const originalCommentHTML = lodashGet(originalReportAction, 'message[0].html');
const htmlForNewComment = handleUserDeletedLinksInHtml(textForNewComment, originalCommentHTML);
+ const reportComment = parser.htmlToText(htmlForNewComment);
// For comments shorter than 10k chars, convert the comment from MD into HTML because that's how it is stored in the database
// For longer comments, skip parsing and display plaintext for performance reasons. It takes over 40s to parse a 100k long string!!
@@ -963,7 +977,7 @@ function editReportComment(reportID, originalReportAction, textForNewComment) {
...originalMessage,
isEdited: true,
html: htmlForNewComment,
- text: textForNewComment,
+ text: reportComment,
},
],
},
@@ -979,7 +993,6 @@ function editReportComment(reportID, originalReportAction, textForNewComment) {
const lastVisibleAction = ReportActionsUtils.getLastVisibleAction(reportID, optimisticReportActions);
if (reportActionID === lastVisibleAction.reportActionID) {
- const reportComment = parser.htmlToText(htmlForNewComment);
const lastMessageText = ReportUtils.formatReportLastMessageText(reportComment);
const optimisticReport = {
lastMessageText,
@@ -1680,6 +1693,18 @@ function setLastOpenedPublicRoom(reportID) {
Onyx.set(ONYXKEYS.LAST_OPENED_PUBLIC_ROOM_ID, reportID);
}
+/**
+ * Navigates to the last opened public room
+ *
+ * @param {String} lastOpenedPublicRoomID
+ */
+function openLastOpenedPublicRoom(lastOpenedPublicRoomID) {
+ Navigation.isNavigationReady().then(() => {
+ setLastOpenedPublicRoom('');
+ Navigation.navigate(ROUTES.getReportRoute(lastOpenedPublicRoomID));
+ });
+}
+
/**
* Flag a comment as offensive
*
@@ -1783,6 +1808,7 @@ export {
deleteReport,
navigateToConciergeChatAndDeleteReport,
setIsComposerFullSize,
+ expandURLPreview,
markCommentAsUnread,
readNewestAction,
readOldestAction,
@@ -1804,4 +1830,5 @@ export {
leaveRoom,
setLastOpenedPublicRoom,
flagComment,
+ openLastOpenedPublicRoom,
};
diff --git a/src/pages/ConciergePage.js b/src/pages/ConciergePage.js
index d6dc48def6fe..610fa3587b7a 100644
--- a/src/pages/ConciergePage.js
+++ b/src/pages/ConciergePage.js
@@ -27,7 +27,7 @@ const defaultProps = {
* - If the user is authenticated, find their concierge chat and re-route to it
* - Else re-route to the login page
*/
-const ConciergePage = (props) => {
+function ConciergePage(props) {
useFocusEffect(() => {
if (_.has(props.session, 'authToken')) {
// Pop the concierge loading page before opening the concierge report.
@@ -39,7 +39,7 @@ const ConciergePage = (props) => {
});
return ;
-};
+}
ConciergePage.propTypes = propTypes;
ConciergePage.defaultProps = defaultProps;
diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js
index 736cdf4af059..fc772f1a4d51 100644
--- a/src/pages/EnablePayments/ActivateStep.js
+++ b/src/pages/EnablePayments/ActivateStep.js
@@ -29,7 +29,7 @@ const defaultProps = {
},
};
-const ActivateStep = (props) => {
+function ActivateStep(props) {
const isGoldWallet = props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
const animation = isGoldWallet ? FireworksAnimation : ReviewingBankInfoAnimation;
const continueButtonText = props.walletTerms.chatReportID ? props.translate('activateStep.continueToPayment') : props.translate('activateStep.continueToTransfer');
@@ -47,7 +47,7 @@ const ActivateStep = (props) => {
/>
>
);
-};
+}
ActivateStep.propTypes = propTypes;
ActivateStep.defaultProps = defaultProps;
diff --git a/src/pages/EnablePayments/FailedKYC.js b/src/pages/EnablePayments/FailedKYC.js
index a9e1e4e7779e..26b0625a780a 100644
--- a/src/pages/EnablePayments/FailedKYC.js
+++ b/src/pages/EnablePayments/FailedKYC.js
@@ -10,22 +10,24 @@ const propTypes = {
...withLocalizePropTypes,
};
-const FailedKYC = (props) => (
-
-
-
- {props.translate('additionalDetailsStep.failedKYCTextBefore')}
-
- {CONST.EMAIL.CONCIERGE}
-
- {props.translate('additionalDetailsStep.failedKYCTextAfter')}
-
+function FailedKYC(props) {
+ return (
+
+
+
+ {props.translate('additionalDetailsStep.failedKYCTextBefore')}
+
+ {CONST.EMAIL.CONCIERGE}
+
+ {props.translate('additionalDetailsStep.failedKYCTextAfter')}
+
+
-
-);
+ );
+}
FailedKYC.propTypes = propTypes;
FailedKYC.displayName = 'FailedKYC';
diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
index 45ea79ffd4c9..4b68635d8ec8 100644
--- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
@@ -76,38 +76,41 @@ const getLongTermsSections = () =>
));
-const LongTermsForm = () => (
- <>
- {getLongTermsSections()}
+function LongTermsForm() {
+ return (
+ <>
+ {getLongTermsSections()}
-
- {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {CONST.TERMS.FDIC_PREPAID} {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')}
-
- {Localize.translateLocal('termsStep.noOverdraftOrCredit')}
-
- {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments')} {CONST.EMAIL.CONCIERGE}{' '}
- {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} {CONST.NEW_EXPENSIFY_URL}.
-
-
- {Localize.translateLocal('termsStep.longTermsForm.generalInformation')} {CONST.TERMS.CFPB_PREPAID}
- {'. '}
- {Localize.translateLocal('termsStep.longTermsForm.generalInformation2')} {CONST.TERMS.CFPB_COMPLAINT}.
-
+
+ {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {CONST.TERMS.FDIC_PREPAID}{' '}
+ {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')}
+
+ {Localize.translateLocal('termsStep.noOverdraftOrCredit')}
+
+ {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments')} {CONST.EMAIL.CONCIERGE}{' '}
+ {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} {CONST.NEW_EXPENSIFY_URL}.
+
+
+ {Localize.translateLocal('termsStep.longTermsForm.generalInformation')} {CONST.TERMS.CFPB_PREPAID}
+ {'. '}
+ {Localize.translateLocal('termsStep.longTermsForm.generalInformation2')} {CONST.TERMS.CFPB_COMPLAINT}.
+
-
-
-
- {Localize.translateLocal('termsStep.longTermsForm.printerFriendlyView')}
-
-
- >
-);
+
+
+
+ {Localize.translateLocal('termsStep.longTermsForm.printerFriendlyView')}
+
+
+ >
+ );
+}
LongTermsForm.displayName = 'LongTermsForm';
export default LongTermsForm;
diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index 6e508042d9e8..cce62414d743 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -6,129 +6,131 @@ import * as Localize from '../../../libs/Localize';
import CONST from '../../../CONST';
import TextLink from '../../../components/TextLink';
-const ShortTermsForm = () => (
- <>
- {Localize.translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')}
+function ShortTermsForm() {
+ return (
+ <>
+ {Localize.translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')}
-
-
-
-
- {Localize.translateLocal('termsStep.monthlyFee')}
-
-
- {Localize.translateLocal('termsStep.feeAmountZero')}
-
-
-
+
+
- {Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}
+ {Localize.translateLocal('termsStep.monthlyFee')}
{Localize.translateLocal('termsStep.feeAmountZero')}
-
-
-
-
-
-
- {Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}
-
-
- {Localize.translateLocal('common.na')}
-
-
- {Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}
-
-
- {Localize.translateLocal('common.na')}
-
-
- {Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}
+
+
+
+ {Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}
+
+
+ {Localize.translateLocal('termsStep.feeAmountZero')}
+
+
-
+
+
- {Localize.translateLocal('termsStep.shortTermsForm.cashReload')}
+ {Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}
{Localize.translateLocal('common.na')}
+
+ {Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}
+
+
+ {Localize.translateLocal('common.na')}
+
+
+ {Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}
+
+
+
+
+
+ {Localize.translateLocal('termsStep.shortTermsForm.cashReload')}
+
+
+ {Localize.translateLocal('common.na')}
+
+
-
-
-
-
-
- {Localize.translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} {Localize.translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')}
-
-
-
- {Localize.translateLocal('common.na')}
+
+
+
+
+ {Localize.translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} {Localize.translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')}
+
+
+
+ {Localize.translateLocal('common.na')}
+
-
-
-
-
-
- {Localize.translateLocal('termsStep.shortTermsForm.customerService')} {Localize.translateLocal('termsStep.shortTermsForm.automatedOrLive')}
-
-
-
- {Localize.translateLocal('termsStep.feeAmountZero')}
+
+
+
+
+ {Localize.translateLocal('termsStep.shortTermsForm.customerService')} {Localize.translateLocal('termsStep.shortTermsForm.automatedOrLive')}
+
+
+
+ {Localize.translateLocal('termsStep.feeAmountZero')}
+
-
-
-
-
-
- {Localize.translateLocal('termsStep.inactivity')} {Localize.translateLocal('termsStep.shortTermsForm.afterTwelveMonths')}
-
-
-
- {Localize.translateLocal('termsStep.feeAmountZero')}
+
+
+
+
+ {Localize.translateLocal('termsStep.inactivity')} {Localize.translateLocal('termsStep.shortTermsForm.afterTwelveMonths')}
+
+
+
+ {Localize.translateLocal('termsStep.feeAmountZero')}
+
-
-
-
- {Localize.translateLocal('termsStep.shortTermsForm.weChargeOneFee')}
-
+
+
+ {Localize.translateLocal('termsStep.shortTermsForm.weChargeOneFee')}
+
-
-
-
+
+
+
+
+ {Localize.translateLocal('termsStep.electronicFundsWithdrawal')} {Localize.translateLocal('termsStep.shortTermsForm.instant')}
+
+
+
+ {Localize.translateLocal('termsStep.electronicFundsInstantFee')}
+ {Localize.translateLocal('termsStep.shortTermsForm.electronicFundsInstantFeeMin')}
+
+
+
+ {Localize.translateLocal('termsStep.noOverdraftOrCredit')}
+ {Localize.translateLocal('termsStep.shortTermsForm.fdicInsurance')}
+
+ {Localize.translateLocal('termsStep.shortTermsForm.generalInfo')} {CONST.TERMS.CFPB_PREPAID}.
+
- {Localize.translateLocal('termsStep.electronicFundsWithdrawal')} {Localize.translateLocal('termsStep.shortTermsForm.instant')}
+ {Localize.translateLocal('termsStep.shortTermsForm.conditionsDetails')} {CONST.TERMS.USE_EXPENSIFY_FEES}{' '}
+ {Localize.translateLocal('termsStep.shortTermsForm.conditionsPhone')}
-
- {Localize.translateLocal('termsStep.electronicFundsInstantFee')}
- {Localize.translateLocal('termsStep.shortTermsForm.electronicFundsInstantFeeMin')}
-
-
-
- {Localize.translateLocal('termsStep.noOverdraftOrCredit')}
- {Localize.translateLocal('termsStep.shortTermsForm.fdicInsurance')}
-
- {Localize.translateLocal('termsStep.shortTermsForm.generalInfo')} {CONST.TERMS.CFPB_PREPAID}.
-
-
- {Localize.translateLocal('termsStep.shortTermsForm.conditionsDetails')} {CONST.TERMS.USE_EXPENSIFY_FEES}{' '}
- {Localize.translateLocal('termsStep.shortTermsForm.conditionsPhone')}
-
-
- >
-);
+ >
+ );
+}
ShortTermsForm.displayName = 'ShortTermsForm';
diff --git a/src/pages/ErrorPage/ErrorBodyText/index.js b/src/pages/ErrorPage/ErrorBodyText/index.js
index ac789343047e..9410d5fe5c1d 100644
--- a/src/pages/ErrorPage/ErrorBodyText/index.js
+++ b/src/pages/ErrorPage/ErrorBodyText/index.js
@@ -9,17 +9,19 @@ const propTypes = {
...withLocalizePropTypes,
};
-const ErrorBodyText = (props) => (
-
- {`${props.translate('genericErrorPage.body.helpTextMobile')} `}
-
- {props.translate('genericErrorPage.body.helpTextWeb')}
-
-
-);
+function ErrorBodyText(props) {
+ return (
+
+ {`${props.translate('genericErrorPage.body.helpTextMobile')} `}
+
+ {props.translate('genericErrorPage.body.helpTextWeb')}
+
+
+ );
+}
ErrorBodyText.displayName = 'ErrorBodyText';
ErrorBodyText.propTypes = propTypes;
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index a64805ec7a48..3ff3bc686419 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -24,69 +24,71 @@ const propTypes = {
onRefresh: PropTypes.func.isRequired,
};
-const GenericErrorPage = (props) => (
-
- {({paddingBottom}) => (
-
-
-
-
-
-
-
- {props.translate('genericErrorPage.title')}
-
-
-
-
- {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
-
- {CONST.EMAIL.CONCIERGE}
-
-
-
-
-
-
- {
- Session.signOutAndRedirectToSignIn();
- props.onRefresh();
- }}
- text={props.translate('initialSettingsPage.signOut')}
+function GenericErrorPage(props) {
+ return (
+
+ {({paddingBottom}) => (
+
+
+
+
+
+
+ {props.translate('genericErrorPage.title')}
+
+
+
+
+ {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
+
+ {CONST.EMAIL.CONCIERGE}
+
+
+
+
+
+
+ {
+ Session.signOutAndRedirectToSignIn();
+ props.onRefresh();
+ }}
+ text={props.translate('initialSettingsPage.signOut')}
+ />
+
+
-
-
-
-
+
+
+
+
-
- )}
-
-);
+ )}
+
+ );
+}
GenericErrorPage.propTypes = propTypes;
GenericErrorPage.displayName = 'ErrorPage';
diff --git a/src/pages/ErrorPage/NotFoundPage.js b/src/pages/ErrorPage/NotFoundPage.js
index 3cc26896a57d..98d8d77cf821 100644
--- a/src/pages/ErrorPage/NotFoundPage.js
+++ b/src/pages/ErrorPage/NotFoundPage.js
@@ -3,14 +3,16 @@ import ScreenWrapper from '../../components/ScreenWrapper';
import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
// eslint-disable-next-line rulesdir/no-negated-variables
-const NotFoundPage = () => (
-
-
-
-);
+function NotFoundPage() {
+ return (
+
+
+
+ );
+}
NotFoundPage.displayName = 'NotFoundPage';
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index 4b4ca66a80eb..6281b8cd769f 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -43,7 +43,7 @@ const defaultProps = {
},
};
-const GetAssistancePage = (props) => {
+function GetAssistancePage(props) {
const menuItems = [
{
title: props.translate('getAssistancePage.chatWithConcierge'),
@@ -73,6 +73,7 @@ const GetAssistancePage = (props) => {
shouldShowRightIcon: true,
iconRight: Expensicons.NewWindow,
wrapperStyle: [styles.cardMenuItem],
+ link: guideCalendarLink,
});
}
@@ -95,7 +96,7 @@ const GetAssistancePage = (props) => {
);
-};
+}
GetAssistancePage.propTypes = propTypes;
GetAssistancePage.defaultProps = defaultProps;
diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index f13bce3fc4f3..4f28b7d99898 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -43,7 +43,7 @@ const defaultProps = {
isTokenValid: true,
};
-const LogInWithShortLivedAuthTokenPage = (props) => {
+function LogInWithShortLivedAuthTokenPage(props) {
useEffect(() => {
const email = lodashGet(props, 'route.params.email', '');
@@ -94,7 +94,7 @@ const LogInWithShortLivedAuthTokenPage = (props) => {
);
-};
+}
LogInWithShortLivedAuthTokenPage.propTypes = propTypes;
LogInWithShortLivedAuthTokenPage.defaultProps = defaultProps;
diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index 559214312f93..63f90016e63e 100755
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -1,13 +1,15 @@
import React from 'react';
import NewChatPage from './NewChatPage';
-const NewGroupPage = (props) => (
-
-);
+function NewGroupPage(props) {
+ return (
+
+ );
+}
NewGroupPage.displayName = 'NewGroupPage';
diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
index f36771bbc9f9..136befbe697c 100644
--- a/src/pages/ReimbursementAccount/AddressForm.js
+++ b/src/pages/ReimbursementAccount/AddressForm.js
@@ -91,58 +91,60 @@ const defaultProps = {
onFieldChange: () => {},
};
-const AddressForm = (props) => (
- <>
-
-
+
+
+
+ props.onFieldChange({city: value})}
+ errorText={props.errors.city ? props.translate('bankAccount.error.addressCity') : ''}
containerStyles={[styles.mt4]}
- value={props.values.street}
- defaultValue={props.defaultValues.street}
- onInputChange={props.onFieldChange}
- errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
- hint={props.translate('common.noPO')}
- renamedInputKeys={props.inputKeys}
- maxInputLength={CONST.FORM_CHARACTER_LIMIT}
/>
-
- props.onFieldChange({city: value})}
- errorText={props.errors.city ? props.translate('bankAccount.error.addressCity') : ''}
- containerStyles={[styles.mt4]}
- />
-
-
+ props.onFieldChange({state: value})}
+ errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
+ />
+
+ props.onFieldChange({state: value})}
- errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
+ label={props.translate('common.zip')}
+ containerStyles={[styles.mt4]}
+ keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+ value={props.values.zipCode}
+ defaultValue={props.defaultValues.zipCode}
+ onChangeText={(value) => props.onFieldChange({zipCode: value})}
+ errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
+ maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
+ hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})}
/>
-
- props.onFieldChange({zipCode: value})}
- errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
- maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
- hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})}
- />
- >
-);
+ >
+ );
+}
AddressForm.propTypes = propTypes;
AddressForm.defaultProps = defaultProps;
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 608dec2dabd1..9617fbf46419 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -58,7 +58,7 @@ const defaultProps = {
policyName: '',
};
-const BankAccountStep = (props) => {
+function BankAccountStep(props) {
let subStep = lodashGet(props.reimbursementAccount, 'achData.subStep', '');
const shouldReinitializePlaidLink = props.plaidLinkOAuthToken && props.receivedRedirectURI && subStep !== CONST.BANK_ACCOUNT.SUBSTEP.MANUAL;
if (shouldReinitializePlaidLink) {
@@ -167,7 +167,7 @@ const BankAccountStep = (props) => {
);
-};
+}
BankAccountStep.propTypes = propTypes;
BankAccountStep.defaultProps = defaultProps;
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index ca5ec39782e3..4eca196d328a 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -42,7 +42,7 @@ const propTypes = {
const defaultProps = {policyName: ''};
-const ContinueBankAccountSetup = (props) => {
+function ContinueBankAccountSetup(props) {
const errors = lodashGet(props.reimbursementAccount, 'errors', {});
const pendingAction = lodashGet(props.reimbursementAccount, 'pendingAction', null);
return (
@@ -93,7 +93,7 @@ const ContinueBankAccountSetup = (props) => {
{props.reimbursementAccount.shouldShowResetModal && }
);
-};
+}
ContinueBankAccountSetup.propTypes = propTypes;
ContinueBankAccountSetup.defaultProps = defaultProps;
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index 650cf17eb84f..e27cba2b51a0 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -13,7 +13,7 @@ import themeColors from '../../styles/themes/default';
const propTypes = {
...withLocalizePropTypes,
};
-const Enable2FAPrompt = (props) => {
+function Enable2FAPrompt(props) {
const secureYourAccountUrl = encodeURI(`settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.getBankAccountRoute()}","isFromNewDot":"true"}`);
return (
@@ -40,7 +40,7 @@ const Enable2FAPrompt = (props) => {
);
-};
+}
Enable2FAPrompt.propTypes = propTypes;
Enable2FAPrompt.displayName = 'Enable2FAPrompt';
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 5319ecec2616..977f5f3bdfdf 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -43,7 +43,7 @@ const defaultProps = {
policyName: '',
};
-const EnableStep = (props) => {
+function EnableStep(props) {
const isUsingExpensifyCard = props.user.isUsingExpensifyCard;
const achData = lodashGet(props.reimbursementAccount, 'achData') || {};
const {icon, iconSize} = getBankIcon(achData.bankName);
@@ -117,7 +117,7 @@ const EnableStep = (props) => {
{props.reimbursementAccount.shouldShowResetModal && }
);
-};
+}
EnableStep.displayName = 'EnableStep';
EnableStep.propTypes = propTypes;
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index 6c92350cc2f7..516c94c8c4bf 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -129,7 +129,7 @@ const defaultProps = {
onFieldChange: () => {},
};
-const IdentityForm = (props) => {
+function IdentityForm(props) {
// dob field has multiple validations/errors, we are handling it temporarily like this.
const dobErrorText = (props.errors.dob ? props.translate('bankAccount.error.dob') : '') || (props.errors.dobAge ? props.translate('bankAccount.error.age') : '');
const identityFormInputKeys = ['firstName', 'lastName', 'dob', 'ssnLast4'];
@@ -198,7 +198,7 @@ const IdentityForm = (props) => {
/>
);
-};
+}
IdentityForm.propTypes = propTypes;
IdentityForm.defaultProps = defaultProps;
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 98f7694533e4..28449426d922 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -2,7 +2,7 @@ import React, {useMemo} from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import {View, ScrollView, Pressable} from 'react-native';
+import {View, ScrollView} from 'react-native';
import lodashGet from 'lodash/get';
import RoomHeaderAvatars from '../components/RoomHeaderAvatars';
import compose from '../libs/compose';
@@ -27,6 +27,7 @@ import CONST from '../CONST';
import reportPropTypes from './reportPropTypes';
import withReportOrNotFound from './home/report/withReportOrNotFound';
import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
+import PressableWithoutFeedback from '../components/Pressable/PressableWithoutFeedback';
const propTypes = {
...withLocalizePropTypes,
@@ -57,7 +58,7 @@ const defaultProps = {
personalDetails: {},
};
-const ReportDetailsPage = (props) => {
+function ReportDetailsPage(props) {
const policy = useMemo(() => props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`], [props.policies, props.report.policyID]);
const isPolicyAdmin = useMemo(() => PolicyUtils.isPolicyAdmin(policy), [policy]);
const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(props.report), [props.report]);
@@ -155,13 +156,15 @@ const ReportDetailsPage = (props) => {
/>
{isPolicyAdmin ? (
- {
Navigation.navigate(ROUTES.getWorkspaceInitialRoute(props.report.policyID));
}}
>
{chatRoomSubtitleText}
-
+
) : (
chatRoomSubtitleText
)}
@@ -186,7 +189,7 @@ const ReportDetailsPage = (props) => {
);
-};
+}
ReportDetailsPage.displayName = 'ReportDetailsPage';
ReportDetailsPage.propTypes = propTypes;
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index 0f9d070aaec3..5994e3830705 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -83,7 +83,7 @@ const getAllParticipants = (report, personalDetails) => {
.value();
};
-const ReportParticipantsPage = (props) => {
+function ReportParticipantsPage(props) {
const participants = getAllParticipants(props.report, props.personalDetails);
return (
@@ -125,7 +125,7 @@ const ReportParticipantsPage = (props) => {
)}
);
-};
+}
ReportParticipantsPage.propTypes = propTypes;
ReportParticipantsPage.defaultProps = defaultProps;
diff --git a/src/pages/UnlinkLoginPage.js b/src/pages/UnlinkLoginPage.js
index ad84cf33c12f..ee77bb2d2045 100644
--- a/src/pages/UnlinkLoginPage.js
+++ b/src/pages/UnlinkLoginPage.js
@@ -15,14 +15,14 @@ const defaultProps = {
route: validateLinkDefaultProps,
};
-const UnlinkLoginPage = (props) => {
+function UnlinkLoginPage(props) {
const accountID = lodashGet(props.route.params, 'accountID', '');
const validateCode = lodashGet(props.route.params, 'validateCode', '');
Session.unlinkLogin(accountID, validateCode);
Navigation.navigate(ROUTES.HOME);
return ;
-};
+}
UnlinkLoginPage.propTypes = propTypes;
UnlinkLoginPage.defaultProps = defaultProps;
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index d834a0f7a088..1b56c40da024 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -29,6 +29,8 @@ import * as Task from '../../libs/actions/Task';
import reportActionPropTypes from './report/reportActionPropTypes';
import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback';
import PinButton from '../../components/PinButton';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
const propTypes = {
/** Toggles the navigationMenu open and closed */
@@ -68,7 +70,7 @@ const defaultProps = {
parentReport: {},
};
-const HeaderView = (props) => {
+function HeaderView(props) {
const participants = lodashGet(props.report, 'participants', []);
const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForLogins(participants, props.personalDetails);
const isMultipleParticipant = participants.length > 1;
@@ -79,7 +81,7 @@ const HeaderView = (props) => {
const isTaskReport = ReportUtils.isTaskReport(props.report);
const reportHeaderData = (isTaskReport || !isThread) && props.report.parentReportID ? props.parentReport : props.report;
const title = ReportUtils.getReportName(reportHeaderData);
- const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData, props.parentReport);
+ const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData);
const isConcierge = participants.length === 1 && _.contains(participants, CONST.EMAIL.CONCIERGE);
const isAutomatedExpensifyAccount = participants.length === 1 && ReportUtils.hasAutomatedExpensifyEmails(participants);
const guideCalendarLink = lodashGet(props.account, 'guideCalendarLink');
@@ -176,12 +178,31 @@ const HeaderView = (props) => {
shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isThread || isTaskReport}
/>
{(isChatRoom || isPolicyExpenseChat || isThread) && !_.isEmpty(subtitle) && (
-
- {subtitle}
-
+ <>
+ {isThread ? (
+ {
+ Navigation.navigate(ROUTES.getReportRoute(props.report.parentReportID));
+ }}
+ accessibilityLabel={subtitle}
+ accessibilityRole="link"
+ >
+
+ {subtitle}
+
+
+ ) : (
+
+ {subtitle}
+
+ )}
+ >
)}
{brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
@@ -213,7 +234,7 @@ const HeaderView = (props) => {
);
-};
+}
HeaderView.propTypes = propTypes;
HeaderView.displayName = 'HeaderView';
HeaderView.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
index 2c0f2ff65561..60ed7ed989b0 100644
--- a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
+++ b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
@@ -20,18 +20,20 @@ const defaultProps = {
displayAsGroup: false,
};
-const MiniReportActionContextMenu = (props) => (
-
-
-
-);
+function MiniReportActionContextMenu(props) {
+ return (
+
+
+
+ );
+}
MiniReportActionContextMenu.propTypes = propTypes;
MiniReportActionContextMenu.defaultProps = defaultProps;
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
index f7945d623bbc..c533a9ca1e3b 100644
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
+++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
@@ -3,11 +3,13 @@ import {View, Animated} from 'react-native';
import styles from '../../../../../styles/styles';
import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
-const FloatingMessageCounterContainer = (props) => (
-
- {props.children}
-
-);
+function FloatingMessageCounterContainer(props) {
+ return (
+
+ {props.children}
+
+ );
+}
FloatingMessageCounterContainer.propTypes = floatingMessageCounterContainerPropTypes;
FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer';
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
index 08ec3c6f754e..134312aa7af5 100644
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
@@ -3,14 +3,16 @@ import {Animated} from 'react-native';
import styles from '../../../../../styles/styles';
import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
-const FloatingMessageCounterContainer = (props) => (
-
- {props.children}
-
-);
+function FloatingMessageCounterContainer(props) {
+ return (
+
+ {props.children}
+
+ );
+}
FloatingMessageCounterContainer.propTypes = floatingMessageCounterContainerPropTypes;
FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer';
diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
new file mode 100644
index 000000000000..1da48efe91d1
--- /dev/null
+++ b/src/pages/home/report/LinkPreviewer.js
@@ -0,0 +1,142 @@
+import React, {useState, useEffect} from 'react';
+import {View, Image} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {uniqBy} from 'lodash';
+import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import Text from '../../../components/Text';
+import styles from '../../../styles/styles';
+import variables from '../../../styles/variables';
+import colors from '../../../styles/colors';
+
+const IMAGE_TYPES = ['jpg', 'jpeg', 'png'];
+const MAX_IMAGE_SIZE = 350;
+const SMALL_SCREEN_MAX_IMAGE_SIZE = 180;
+
+const propTypes = {
+ /** Data about links provided in message. */
+ linkMetadata: PropTypes.arrayOf(
+ PropTypes.shape({
+ /** The URL of the link. */
+ url: PropTypes.string,
+
+ /** A description of the link. */
+ description: PropTypes.string,
+
+ /** The title of the link. */
+ title: PropTypes.string,
+
+ /** The publisher of the link. */
+ publisher: PropTypes.string,
+
+ /** The image associated with the link. */
+ image: PropTypes.shape({
+ /** The height of the image. */
+ height: PropTypes.number,
+
+ /** The width of the image. */
+ width: PropTypes.number,
+
+ /** The URL of the image. */
+ url: PropTypes.string,
+ }),
+
+ /** The provider logo associated with the link. */
+ logo: PropTypes.shape({
+ /** The height of the logo. */
+ height: PropTypes.number,
+
+ /** The width of the logo. */
+ width: PropTypes.number,
+
+ /** The URL of the logo. */
+ url: PropTypes.string,
+ }),
+ }),
+ ),
+
+ /** Maximum amount of visible link previews. -1 means unlimited amount of previews */
+ maxAmountOfPreviews: PropTypes.number,
+};
+
+const defaultProps = {
+ linkMetadata: [],
+ maxAmountOfPreviews: -1,
+};
+
+function LinkPreviewer(props) {
+ const {windowHeight} = useWindowDimensions();
+ const [maxImageSize, setMaxImageSize] = useState(MAX_IMAGE_SIZE);
+
+ useEffect(() => {
+ setMaxImageSize(windowHeight / 2 < MAX_IMAGE_SIZE ? SMALL_SCREEN_MAX_IMAGE_SIZE : MAX_IMAGE_SIZE);
+ }, [windowHeight]);
+
+ return _.map(
+ _.take(uniqBy(props.linkMetadata, 'url'), props.maxAmountOfPreviews >= 0 ? Math.min(props.maxAmountOfPreviews, props.linkMetadata.length) : props.linkMetadata.length),
+ (linkData) => {
+ if (_.isArray(linkData)) {
+ return;
+ }
+ const {description, image, title, logo, publisher, url} = linkData;
+
+ return (
+ linkData && (
+
+
+ {!_.isEmpty(logo) && (
+
+ )}
+ {!_.isEmpty(publisher) && (
+
+ {publisher}
+
+ )}
+
+ {!_.isEmpty(title) && (
+
+ {title}
+
+ )}
+ {!_.isEmpty(description) && {description}}
+ {!_.isEmpty(image) && IMAGE_TYPES.includes(image.type) && (
+
+ )}
+
+ )
+ );
+ },
+ );
+}
+
+LinkPreviewer.propTypes = propTypes;
+LinkPreviewer.defaultProps = defaultProps;
+LinkPreviewer.displayName = 'ReportLinkPreview';
+
+export default LinkPreviewer;
diff --git a/src/pages/home/report/ReactionList/BaseReactionList.js b/src/pages/home/report/ReactionList/BaseReactionList.js
index 7b3453072994..56ea9b23708e 100755
--- a/src/pages/home/report/ReactionList/BaseReactionList.js
+++ b/src/pages/home/report/ReactionList/BaseReactionList.js
@@ -57,7 +57,7 @@ const getItemLayout = (_, index) => ({
offset: variables.listItemHeightNormal * index,
});
-const BaseReactionList = (props) => {
+function BaseReactionList(props) {
if (!props.isVisible) {
return null;
}
@@ -116,7 +116,7 @@ const BaseReactionList = (props) => {
/>
>
);
-};
+}
BaseReactionList.propTypes = propTypes;
BaseReactionList.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index ed6be9ab956f..aef32aa2b7e6 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -24,17 +24,19 @@ const defaultProps = {
hasUserReacted: false,
};
-const HeaderReactionList = (props) => (
-
-
-
- {props.emojiCodes.join('')}
- {props.emojiCount}
+function HeaderReactionList(props) {
+ return (
+
+
+
+ {props.emojiCodes.join('')}
+ {props.emojiCount}
+
+ {`:${props.emojiName}:`}
- {`:${props.emojiName}:`}
-
-);
+ );
+}
HeaderReactionList.propTypes = propTypes;
HeaderReactionList.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index f1f5dab5bf82..ec031fe02e32 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-// eslint-disable-next-line no-restricted-imports
-import {View, TouchableOpacity, InteractionManager, LayoutAnimation, NativeModules, findNodeHandle} from 'react-native';
+import {View, InteractionManager, LayoutAnimation, NativeModules, findNodeHandle} from 'react-native';
import _ from 'underscore';
import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
@@ -53,6 +52,7 @@ import * as Welcome from '../../../libs/actions/Welcome';
import Permissions from '../../../libs/Permissions';
import * as TaskUtils from '../../../libs/actions/Task';
import * as Browser from '../../../libs/Browser';
+import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
const propTypes = {
/** Beta features list */
@@ -954,7 +954,7 @@ class ReportActionCompose extends React.Component {
>
{this.props.isComposerFullSize && (
- {
e.preventDefault();
this.setShouldShowSuggestionMenuToFalse();
@@ -964,14 +964,16 @@ class ReportActionCompose extends React.Component {
onMouseDown={(e) => e.preventDefault()}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || this.props.disabled}
+ accessibilityRole="button"
+ accessibilityLabel={this.props.translate('reportActionCompose.collapse')}
>
-
+
)}
{!this.props.isComposerFullSize && isFullComposerAvailable && (
- {
e.preventDefault();
this.setShouldShowSuggestionMenuToFalse();
@@ -981,13 +983,15 @@ class ReportActionCompose extends React.Component {
onMouseDown={(e) => e.preventDefault()}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || this.props.disabled}
+ accessibilityRole="button"
+ accessibilityLabel={this.props.translate('reportActionCompose.expand')}
>
-
+
)}
- (this.actionButton = el)}
onPress={(e) => {
e.preventDefault();
@@ -998,9 +1002,11 @@ class ReportActionCompose extends React.Component {
}}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || this.props.disabled}
+ accessibilityRole="button"
+ accessibilityLabel={this.props.translate('reportActionCompose.addAction')}
>
-
+
e.preventDefault()}
>
-
-
+
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index e7c704fd8c8e..c0c335ca5efe 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -19,6 +19,7 @@ import UnreadActionIndicator from '../../../components/UnreadActionIndicator';
import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
import ReportActionItemCreated from './ReportActionItemCreated';
import ReportActionItemThread from './ReportActionItemThread';
+import LinkPreviewer from './LinkPreviewer';
import compose from '../../../libs/compose';
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
import ControlSelection from '../../../libs/ControlSelection';
@@ -107,6 +108,7 @@ function ReportActionItem(props) {
const [moderationDecision, setModerationDecision] = useState(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
const textInputRef = useRef();
const popoverAnchorRef = useRef();
+ const downloadedPreviews = useRef([]);
const isDraftEmpty = !props.draftMessage;
useEffect(() => {
@@ -117,6 +119,16 @@ function ReportActionItem(props) {
focusTextInputAfterAnimation(textInputRef.current, 100);
}, [isDraftEmpty]);
+ useEffect(() => {
+ const urls = ReportActionsUtils.extractLinksFromMessageHtml(props.action);
+ if (_.isEqual(downloadedPreviews.current, urls) || props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
+ return;
+ }
+
+ downloadedPreviews.current = urls;
+ Report.expandURLPreview(props.report.reportID, props.action.reportActionID);
+ }, [props.action, props.report.reportID]);
+
// Hide the message if it is being moderated for a higher offense, or is hidden by a moderator
// Removed messages should not be shown anyway and should not need this flow
useEffect(() => {
@@ -327,6 +339,11 @@ function ReportActionItem(props) {
return (
<>
{children}
+ {!_.isEmpty(props.action.linkMetadata) && (
+
+ !_.isEmpty(item))} />
+
+ )}
{hasReactions && (
{
+function ReportActionItemCreated(props) {
if (!ReportUtils.isChatReport(props.report)) {
return null;
}
@@ -75,7 +75,7 @@ const ReportActionItemCreated = (props) => {
);
-};
+}
ReportActionItemCreated.defaultProps = defaultProps;
ReportActionItemCreated.propTypes = propTypes;
diff --git a/src/pages/home/report/ReportActionItemDate.js b/src/pages/home/report/ReportActionItemDate.js
index e49445fdefaf..0e6af2e95636 100644
--- a/src/pages/home/report/ReportActionItemDate.js
+++ b/src/pages/home/report/ReportActionItemDate.js
@@ -12,7 +12,9 @@ const propTypes = {
...withLocalizePropTypes,
};
-const ReportActionItemDate = (props) => {props.datetimeToCalendarTime(props.created)};
+function ReportActionItemDate(props) {
+ return {props.datetimeToCalendarTime(props.created)};
+}
ReportActionItemDate.propTypes = propTypes;
ReportActionItemDate.displayName = 'ReportActionItemDate';
diff --git a/src/pages/home/report/ReportActionItemDraft.js b/src/pages/home/report/ReportActionItemDraft.js
index e1663ed13bc4..b3b66994fb9c 100644
--- a/src/pages/home/report/ReportActionItemDraft.js
+++ b/src/pages/home/report/ReportActionItemDraft.js
@@ -8,11 +8,13 @@ const propTypes = {
children: PropTypes.node.isRequired,
};
-const ReportActionItemDraft = (props) => (
-
- {props.children}
-
-);
+function ReportActionItemDraft(props) {
+ return (
+
+ {props.children}
+
+ );
+}
ReportActionItemDraft.propTypes = propTypes;
ReportActionItemDraft.displayName = 'ReportActionItemDraft';
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index 07b00590306e..2a5fbc880777 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -77,7 +77,7 @@ const defaultProps = {
style: [],
};
-const ReportActionItemFragment = (props) => {
+function ReportActionItemFragment(props) {
switch (props.fragment.type) {
case 'COMMENT': {
// If this is an attachment placeholder, return the placeholder component
@@ -171,7 +171,7 @@ const ReportActionItemFragment = (props) => {
default:
return props.fragment.text;
}
-};
+}
ReportActionItemFragment.propTypes = propTypes;
ReportActionItemFragment.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js
index ea8458340204..e60bf01835f8 100644
--- a/src/pages/home/report/ReportActionItemGrouped.js
+++ b/src/pages/home/report/ReportActionItemGrouped.js
@@ -16,11 +16,13 @@ const defaultProps = {
wrapperStyles: [styles.chatItem],
};
-const ReportActionItemGrouped = (props) => (
-
- {props.children}
-
-);
+function ReportActionItemGrouped(props) {
+ return (
+
+ {props.children}
+
+ );
+}
ReportActionItemGrouped.propTypes = propTypes;
ReportActionItemGrouped.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js
index fef1bb0377c9..e6bcdffe1e8d 100644
--- a/src/pages/home/report/ReportActionItemMessage.js
+++ b/src/pages/home/report/ReportActionItemMessage.js
@@ -28,28 +28,30 @@ const defaultProps = {
isHidden: false,
};
-const ReportActionItemMessage = (props) => (
-
- {!props.isHidden ? (
- _.map(_.compact(props.action.previousMessage || props.action.message), (fragment, index) => (
-
- ))
- ) : (
- {props.translate('moderation.flaggedContent')}
- )}
-
-);
+function ReportActionItemMessage(props) {
+ return (
+
+ {!props.isHidden ? (
+ _.map(_.compact(props.action.previousMessage || props.action.message), (fragment, index) => (
+
+ ))
+ ) : (
+ {props.translate('moderation.flaggedContent')}
+ )}
+
+ );
+}
ReportActionItemMessage.propTypes = propTypes;
ReportActionItemMessage.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 0e4c602e674f..d6242d3f2886 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -283,6 +283,7 @@ class ReportActionItemMessageEdit extends React.Component {
{(hovered) => (
{
+function ReportActionItemParentAction(props) {
const parentReportAction = props.parentReportActions[`${props.report.parentReportActionID}`];
// In case of transaction threads, we do not want to render the parent report action.
@@ -74,7 +74,7 @@ const ReportActionItemParentAction = (props) => {
{!props.shouldHideThreadDividerLine && }
);
-};
+}
ReportActionItemParentAction.defaultProps = defaultProps;
ReportActionItemParentAction.propTypes = propTypes;
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 84a89bf7475f..e6f7cbc95410 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -65,7 +65,7 @@ const showUserDetails = (accountID) => {
Navigation.navigate(ROUTES.getProfileRoute(accountID));
};
-const ReportActionItemSingle = (props) => {
+function ReportActionItemSingle(props) {
const actorEmail = props.action.actorEmail.replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
const {accountID, avatar, displayName, pendingFields} = props.personalDetails[actorEmail] || {};
const avatarSource = UserUtils.getAvatar(avatar, actorEmail);
@@ -138,7 +138,7 @@ const ReportActionItemSingle = (props) => {
);
-};
+}
ReportActionItemSingle.propTypes = propTypes;
ReportActionItemSingle.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemThread.js b/src/pages/home/report/ReportActionItemThread.js
index 41cbf8c96d89..835c31cf4df4 100644
--- a/src/pages/home/report/ReportActionItemThread.js
+++ b/src/pages/home/report/ReportActionItemThread.js
@@ -1,5 +1,5 @@
import React from 'react';
-import {View, Pressable, Text} from 'react-native';
+import {View, Text} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../../../styles/styles';
import * as Report from '../../../libs/actions/Report';
@@ -9,6 +9,7 @@ import CONST from '../../../CONST';
import avatarPropTypes from '../../../components/avatarPropTypes';
import MultipleAvatars from '../../../components/MultipleAvatars';
import compose from '../../../libs/compose';
+import PressableWithoutFeedback from '../../../components/Pressable/PressableWithoutFeedback';
const propTypes = {
/** List of participant icons for the thread */
@@ -30,7 +31,7 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const ReportActionItemThread = (props) => {
+function ReportActionItemThread(props) {
const numberOfRepliesText = props.numberOfReplies > CONST.MAX_THREAD_REPLIES_PREVIEW ? `${CONST.MAX_THREAD_REPLIES_PREVIEW}+` : `${props.numberOfReplies}`;
const replyText = props.numberOfReplies === 1 ? props.translate('threads.reply') : props.translate('threads.replies');
@@ -38,10 +39,12 @@ const ReportActionItemThread = (props) => {
return (
- {
Report.navigateToAndOpenChildReport(props.childReportID);
}}
+ accessibilityRole="button"
+ accessibilityLabel={`${props.numberOfReplies} ${replyText}`}
>
{
>{`${props.translate('threads.lastReply')} ${timeStamp}`}
-
+
);
-};
+}
ReportActionItemThread.propTypes = propTypes;
ReportActionItemThread.displayName = 'ReportActionItemThread';
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index edbfcc7eee47..367f81895fd0 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -77,7 +77,7 @@ function keyExtractor(item) {
return item.reportActionID;
}
-const ReportActionsList = (props) => {
+function ReportActionsList(props) {
const opacity = useSharedValue(0);
const animatedStyles = useAnimatedStyle(() => ({
opacity: opacity.value,
@@ -191,7 +191,7 @@ const ReportActionsList = (props) => {
/>
);
-};
+}
ReportActionsList.propTypes = propTypes;
ReportActionsList.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportDropUI.js b/src/pages/home/report/ReportDropUI.js
index 87e0696cb71f..f59d0a31135d 100644
--- a/src/pages/home/report/ReportDropUI.js
+++ b/src/pages/home/report/ReportDropUI.js
@@ -12,21 +12,23 @@ const propTypes = {
...withLocalizePropTypes,
};
-const ReportDropUI = (props) => (
-
-
-
-
- {props.translate('reportActionCompose.dropToUpload')}
-
-);
+function ReportDropUI(props) {
+ return (
+
+
+
+
+ {props.translate('reportActionCompose.dropToUpload')}
+
+ );
+}
ReportDropUI.displayName = 'ReportDropUI';
ReportDropUI.propTypes = propTypes;
diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js
index e93c20ad9815..20eb62d0ddd6 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.js
@@ -5,7 +5,7 @@ import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
import FreezeWrapper from '../../../../libs/Navigation/FreezeWrapper';
import withWindowDimensions from '../../../../components/withWindowDimensions';
-const SidebarScreen = (props) => {
+function SidebarScreen(props) {
const popoverModal = useRef(null);
/**
@@ -36,7 +36,7 @@ const SidebarScreen = (props) => {
);
-};
+}
SidebarScreen.propTypes = sidebarPropTypes;
SidebarScreen.displayName = 'SidebarScreen';
diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js
index 971ea8d8f816..8ed41233bdb5 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.native.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.native.js
@@ -5,16 +5,18 @@ import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
import FreezeWrapper from '../../../../libs/Navigation/FreezeWrapper';
import withWindowDimensions from '../../../../components/withWindowDimensions';
-const SidebarScreen = (props) => (
-
-
-
-
-
-);
+function SidebarScreen(props) {
+ return (
+
+
+
+
+
+ );
+}
SidebarScreen.propTypes = sidebarPropTypes;
SidebarScreen.displayName = 'SidebarScreen';
diff --git a/src/pages/iou/IOUBillPage.js b/src/pages/iou/IOUBillPage.js
index 433dd1697b0b..a3a9d4932bd4 100644
--- a/src/pages/iou/IOUBillPage.js
+++ b/src/pages/iou/IOUBillPage.js
@@ -1,12 +1,14 @@
import React from 'react';
import MoneyRequestModal from './MoneyRequestModal';
-const IOUBillPage = (props) => (
-
-);
+function IOUBillPage(props) {
+ return (
+
+ );
+}
IOUBillPage.displayName = 'IOUBillPage';
export default IOUBillPage;
diff --git a/src/pages/iou/IOURequestPage.js b/src/pages/iou/IOURequestPage.js
index 86b1e1a4dab9..8311e188c666 100644
--- a/src/pages/iou/IOURequestPage.js
+++ b/src/pages/iou/IOURequestPage.js
@@ -1,7 +1,9 @@
import React from 'react';
import MoneyRequestModal from './MoneyRequestModal';
-// eslint-disable-next-line react/jsx-props-no-spreading
-const IOURequestPage = (props) => ;
+function IOURequestPage(props) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
IOURequestPage.displayName = 'IOURequestPage';
export default IOURequestPage;
diff --git a/src/pages/iou/IOUSendPage.js b/src/pages/iou/IOUSendPage.js
index 19af6d44dea6..e53fd273a2f2 100644
--- a/src/pages/iou/IOUSendPage.js
+++ b/src/pages/iou/IOUSendPage.js
@@ -2,12 +2,14 @@ import React from 'react';
import CONST from '../../CONST';
import MoneyRequestModal from './MoneyRequestModal';
-const IOUSendPage = (props) => (
-
-);
+function IOUSendPage(props) {
+ return (
+
+ );
+}
IOUSendPage.displayName = 'IOUSendPage';
export default IOUSendPage;
diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js
index 729a4ed27227..8b08c36359b5 100644
--- a/src/pages/iou/MoneyRequestModal.js
+++ b/src/pages/iou/MoneyRequestModal.js
@@ -95,7 +95,7 @@ const Steps = {
MoneyRequestConfirm: 'moneyRequest.confirm',
};
-const MoneyRequestModal = (props) => {
+function MoneyRequestModal(props) {
// Skip MoneyRequestParticipants step if participants are passed in
const reportParticipants = lodashGet(props, 'report.participants', []);
const steps = useMemo(
@@ -394,7 +394,7 @@ const MoneyRequestModal = (props) => {
)}
);
-};
+}
MoneyRequestModal.displayName = 'MoneyRequestModal';
MoneyRequestModal.propTypes = propTypes;
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index d4e5cc85d3fb..f892e57c3e06 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -62,7 +62,7 @@ function getReportID(route) {
return route.params.reportID.toString();
}
-const SplitBillDetailsPage = (props) => {
+function SplitBillDetailsPage(props) {
const reportAction = props.reportActions[`${props.route.params.reportActionID.toString()}`];
const personalDetails = OptionsListUtils.getPersonalDetailsForLogins(reportAction.originalMessage.participants, props.personalDetails);
const participants = OptionsListUtils.getParticipantsOptions(reportAction.originalMessage, personalDetails);
@@ -97,7 +97,7 @@ const SplitBillDetailsPage = (props) => {
);
-};
+}
SplitBillDetailsPage.propTypes = propTypes;
SplitBillDetailsPage.defaultProps = defaultProps;
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index daa5af83bbd6..8ed80aab7bcd 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -54,22 +54,24 @@ const defaultProps = {
},
};
-const MoneyRequestConfirmPage = (props) => (
-
-);
+function MoneyRequestConfirmPage(props) {
+ return (
+
+ );
+}
MoneyRequestConfirmPage.displayName = 'MoneyRequestConfirmPage';
MoneyRequestConfirmPage.propTypes = propTypes;
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 8ec8ea447f0b..0b5074bfc0ce 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -28,7 +28,7 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const AboutPage = (props) => {
+function AboutPage(props) {
let popoverAnchor;
const menuItems = [
{
@@ -136,7 +136,7 @@ const AboutPage = (props) => {
)}
);
-};
+}
AboutPage.propTypes = propTypes;
AboutPage.displayName = 'AboutPage';
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 3c42e4901616..c6c8035e5477 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -21,7 +21,7 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const AppDownloadLinksPage = (props) => {
+function AppDownloadLinksPage(props) {
let popoverAnchor;
const menuItems = [
@@ -80,7 +80,7 @@ const AppDownloadLinksPage = (props) => {
);
-};
+}
AppDownloadLinksPage.propTypes = propTypes;
AppDownloadLinksPage.displayName = 'AppDownloadLinksPage';
diff --git a/src/pages/settings/NewPasswordForm.js b/src/pages/settings/NewPasswordForm.js
index a2f02972dcad..224b0d5a0892 100644
--- a/src/pages/settings/NewPasswordForm.js
+++ b/src/pages/settings/NewPasswordForm.js
@@ -21,7 +21,7 @@ const propTypes = {
...withLocalizePropTypes,
};
-const NewPasswordForm = (props) => {
+function NewPasswordForm(props) {
const [passwordHintError, setPasswordHintError] = useState(false);
const isValidPassword = () => props.password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
@@ -61,7 +61,7 @@ const NewPasswordForm = (props) => {
{props.translate('setPasswordPage.newPasswordPrompt')}
);
-};
+}
NewPasswordForm.propTypes = propTypes;
NewPasswordForm.displayName = 'NewPasswordForm';
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index cbb437ea00e6..ec5476a9162e 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -21,7 +21,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
import variables from '../../../styles/variables';
import PressableWithoutFeedback from '../../../components/Pressable/PressableWithoutFeedback';
-const AddPayPalMePage = (props) => {
+function AddPayPalMePage(props) {
const [payPalMeUsername, setPayPalMeUsername] = useState('');
const [payPalMeUsernameError, setPayPalMeUsernameError] = useState(false);
const payPalMeInput = useRef(null);
@@ -107,7 +107,7 @@ const AddPayPalMePage = (props) => {
);
-};
+}
AddPayPalMePage.propTypes = {...withLocalizePropTypes};
AddPayPalMePage.displayName = 'AddPayPalMePage';
diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js
index 224b727bf4e5..0443401a62f1 100644
--- a/src/pages/settings/Payments/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js
@@ -28,7 +28,7 @@ const defaultProps = {
walletTransfer: {},
};
-const ChooseTransferAccountPage = (props) => {
+function ChooseTransferAccountPage(props) {
/**
* Go back to transfer balance screen with the selected bank account set
* @param {Object} event Click event object
@@ -77,7 +77,7 @@ const ChooseTransferAccountPage = (props) => {
/>
);
-};
+}
ChooseTransferAccountPage.propTypes = propTypes;
ChooseTransferAccountPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Payments/PaymentsPage/index.js b/src/pages/settings/Payments/PaymentsPage/index.js
index c22511e4f160..df81f1f1b39b 100644
--- a/src/pages/settings/Payments/PaymentsPage/index.js
+++ b/src/pages/settings/Payments/PaymentsPage/index.js
@@ -1,7 +1,9 @@
import React from 'react';
import BasePaymentsPage from './BasePaymentsPage';
-const PaymentsPage = () => ;
+function PaymentsPage() {
+ return ;
+}
PaymentsPage.displayName = 'PaymentsPage';
diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js
index 23f36e6e44e3..e449b43b22b7 100644
--- a/src/pages/settings/Preferences/LanguagePage.js
+++ b/src/pages/settings/Preferences/LanguagePage.js
@@ -21,7 +21,7 @@ const propTypes = {
preferredLocale: PropTypes.string.isRequired,
};
-const LanguagePage = (props) => {
+function LanguagePage(props) {
const localesToLanguages = _.map(props.translate('languagePage.languages'), (language, key) => ({
value: key,
text: language.label,
@@ -55,7 +55,7 @@ const LanguagePage = (props) => {
/>
);
-};
+}
LanguagePage.displayName = 'LanguagePage';
LanguagePage.propTypes = propTypes;
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 8cf39f23f9f8..81b129439e96 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -42,7 +42,7 @@ const defaultProps = {
user: {},
};
-const PreferencesPage = (props) => {
+function PreferencesPage(props) {
const priorityModes = props.translate('priorityModePage.priorityModes');
const languages = props.translate('languagePage.languages');
@@ -96,7 +96,7 @@ const PreferencesPage = (props) => {
);
-};
+}
PreferencesPage.propTypes = propTypes;
PreferencesPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index e044d906e862..cf48e63d015d 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -29,7 +29,7 @@ const defaultProps = {
priorityMode: CONST.PRIORITY_MODE.DEFAULT,
};
-const PriorityModePage = (props) => {
+function PriorityModePage(props) {
const priorityModes = _.map(props.translate('priorityModePage.priorityModes'), (mode, key) => ({
value: key,
text: mode.label,
@@ -68,7 +68,7 @@ const PriorityModePage = (props) => {
/>
);
-};
+}
PriorityModePage.displayName = 'PriorityModePage';
PriorityModePage.propTypes = propTypes;
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index aa27771beeec..3100af19c4e9 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -58,7 +58,7 @@ const defaultProps = {
},
};
-const ContactMethodsPage = (props) => {
+function ContactMethodsPage(props) {
const loginNames = _.keys(props.loginList);
// Sort the login names by placing the one corresponding to the default contact method as the first item before displaying the contact methods.
@@ -139,7 +139,7 @@ const ContactMethodsPage = (props) => {
);
-};
+}
ContactMethodsPage.propTypes = propTypes;
ContactMethodsPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.android.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.android.js
index 8128b2077012..30c5517b8375 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.android.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.android.js
@@ -1,13 +1,15 @@
import React from 'react';
import BaseValidateCodeForm from './BaseValidateCodeForm';
-const ValidateCodeForm = (props) => (
-
-);
+function ValidateCodeForm(props) {
+ return (
+
+ );
+}
ValidateCodeForm.displayName = 'ValidateCodeForm';
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.js
index 80691a931185..6ef0c91b6d37 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.js
@@ -1,13 +1,15 @@
import React from 'react';
import BaseValidateCodeForm from './BaseValidateCodeForm';
-const ValidateCodeForm = (props) => (
-
-);
+function ValidateCodeForm(props) {
+ return (
+
+ );
+}
ValidateCodeForm.displayName = 'ValidateCodeForm';
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index cd1ed1ac0895..77413ae1e596 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -34,7 +34,7 @@ const defaultProps = {
},
};
-const DateOfBirthPage = ({translate, route, privatePersonalDetails}) => {
+function DateOfBirthPage({translate, route, privatePersonalDetails}) {
/**
* The year should be set on the route when navigating back from the year picker
* This lets us pass the selected year without having to overwrite the value in Onyx
@@ -93,7 +93,7 @@ const DateOfBirthPage = ({translate, route, privatePersonalDetails}) => {
);
-};
+}
DateOfBirthPage.propTypes = propTypes;
DateOfBirthPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index e8eb26e120a7..a466d2091de1 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -53,7 +53,7 @@ const defaultProps = {
},
};
-const PersonalDetailsInitialPage = (props) => {
+function PersonalDetailsInitialPage(props) {
useEffect(() => {
if (props.network.isOffline) {
return;
@@ -120,7 +120,7 @@ const PersonalDetailsInitialPage = (props) => {
);
-};
+}
PersonalDetailsInitialPage.propTypes = propTypes;
PersonalDetailsInitialPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 9d0a83855be0..562b862a7fc6 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -45,7 +45,7 @@ const defaultProps = {
...withCurrentUserPersonalDetailsDefaultProps,
};
-const ProfilePage = (props) => {
+function ProfilePage(props) {
const getPronouns = () => {
let pronounsKey = lodashGet(props.currentUserPersonalDetails, 'pronouns', '');
if (pronounsKey.startsWith(CONST.PRONOUNS.PREFIX)) {
@@ -121,7 +121,7 @@ const ProfilePage = (props) => {
);
-};
+}
ProfilePage.propTypes = propTypes;
ProfilePage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index d23131305054..7dfc9fb6f9de 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -25,7 +25,7 @@ const defaultProps = {
...withCurrentUserPersonalDetailsDefaultProps,
};
-const TimezoneInitialPage = (props) => {
+function TimezoneInitialPage(props) {
const timezone = lodashGet(props.currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
/**
@@ -69,7 +69,7 @@ const TimezoneInitialPage = (props) => {
);
-};
+}
TimezoneInitialPage.propTypes = propTypes;
TimezoneInitialPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
index 331ea4fe9988..915a32180ad8 100644
--- a/src/pages/settings/Report/NotificationPreferencePage.js
+++ b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -22,7 +22,7 @@ const propTypes = {
};
const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
-const NotificationPreferencePage = (props) => {
+function NotificationPreferencePage(props) {
const notificationPreferenceOptions = _.map(props.translate('notificationPreferencesPage.notificationPreferences'), (preference, key) => ({
value: key,
text: preference,
@@ -56,7 +56,7 @@ const NotificationPreferencePage = (props) => {
/>
);
-};
+}
NotificationPreferencePage.displayName = 'NotificationPreferencePage';
NotificationPreferencePage.propTypes = propTypes;
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index 89baaca72c79..b4bf1d0c5566 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -32,7 +32,7 @@ const defaultProps = {
reports: {},
};
-const RoomNamePage = (props) => {
+function RoomNamePage(props) {
const report = props.report;
const reports = props.reports;
const translate = props.translate;
@@ -89,7 +89,7 @@ const RoomNamePage = (props) => {
);
-};
+}
RoomNamePage.propTypes = propTypes;
RoomNamePage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js
index b71b80673da9..381d21785564 100644
--- a/src/pages/settings/Report/WriteCapabilityPage.js
+++ b/src/pages/settings/Report/WriteCapabilityPage.js
@@ -23,7 +23,7 @@ const propTypes = {
};
const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
-const WriteCapabilityPage = (props) => {
+function WriteCapabilityPage(props) {
const writeCapabilityOptions = _.map(CONST.REPORT.WRITE_CAPABILITIES, (value) => ({
value,
text: props.translate(`writeCapabilityPage.writeCapability.${value}`),
@@ -58,7 +58,7 @@ const WriteCapabilityPage = (props) => {
/>
);
-};
+}
WriteCapabilityPage.displayName = 'WriteCapabilityPage';
WriteCapabilityPage.propTypes = propTypes;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
index 925f6d429fa1..ea0d5e257e2f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
@@ -1,7 +1,9 @@
import React from 'react';
import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
-const TwoFactorAuthForm = () => ;
+function TwoFactorAuthForm() {
+ return ;
+}
TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
index c204978554ff..c52e65facd6d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
@@ -1,7 +1,9 @@
import React from 'react';
import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
-const TwoFactorAuthForm = () => ;
+function TwoFactorAuthForm() {
+ return ;
+}
TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js
index 0ea56a176af2..3419454d611b 100755
--- a/src/pages/signin/ChangeExpensifyLoginLink.js
+++ b/src/pages/signin/ChangeExpensifyLoginLink.js
@@ -29,22 +29,24 @@ const defaultProps = {
},
};
-const ChangeExpensifyLoginLink = (props) => (
-
- {!_.isEmpty(props.credentials.login) && {props.translate('loginForm.notYou', {user: props.formatPhoneNumber(props.credentials.login)})}}
-
-
- {props.translate('common.goBack')}
- {'.'}
-
-
-
-);
+function ChangeExpensifyLoginLink(props) {
+ return (
+
+ {!_.isEmpty(props.credentials.login) && {props.translate('loginForm.notYou', {user: props.formatPhoneNumber(props.credentials.login)})}}
+
+
+ {props.translate('common.goBack')}
+ {'.'}
+
+
+
+ );
+}
ChangeExpensifyLoginLink.propTypes = propTypes;
ChangeExpensifyLoginLink.defaultProps = defaultProps;
diff --git a/src/pages/signin/Licenses.js b/src/pages/signin/Licenses.js
index a734579090e4..e3f1026c1e9f 100644
--- a/src/pages/signin/Licenses.js
+++ b/src/pages/signin/Licenses.js
@@ -9,25 +9,27 @@ import LocalePicker from '../../components/LocalePicker';
const currentYear = new Date().getFullYear();
-const Licenses = (props) => (
- <>
- {`© ${currentYear} Expensify`}
-
- {props.translate('termsOfUse.phrase5')}
-
- {' '}
- {props.translate('termsOfUse.phrase6')}
-
- .
-
-
-
-
- >
-);
+function Licenses(props) {
+ return (
+ <>
+ {`© ${currentYear} Expensify`}
+
+ {props.translate('termsOfUse.phrase5')}
+
+ {' '}
+ {props.translate('termsOfUse.phrase6')}
+
+ .
+
+
+
+
+ >
+ );
+}
Licenses.propTypes = {...withLocalizePropTypes};
Licenses.displayName = 'Licenses';
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index 993ed7d76478..091e386fb100 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -49,7 +49,7 @@ const defaultProps = {
account: {},
};
-const ResendValidationForm = (props) => {
+function ResendValidationForm(props) {
const isSMSLogin = Str.isSMSLogin(props.credentials.login);
// replacing spaces with "hard spaces" to prevent breaking the number
@@ -113,7 +113,7 @@ const ResendValidationForm = (props) => {
>
);
-};
+}
ResendValidationForm.propTypes = propTypes;
ResendValidationForm.defaultProps = defaultProps;
diff --git a/src/pages/signin/SignInHeroCopy.js b/src/pages/signin/SignInHeroCopy.js
index c06985526a42..204876c25398 100644
--- a/src/pages/signin/SignInHeroCopy.js
+++ b/src/pages/signin/SignInHeroCopy.js
@@ -13,20 +13,22 @@ const propTypes = {
...withLocalizePropTypes,
};
-const SignInHeroCopy = (props) => (
-
-
- {props.translate('login.hero.header')}
-
- {props.translate('login.hero.body')}
-
-);
+function SignInHeroCopy(props) {
+ return (
+
+
+ {props.translate('login.hero.header')}
+
+ {props.translate('login.hero.body')}
+
+ );
+}
SignInHeroCopy.displayName = 'SignInHeroCopy';
SignInHeroCopy.propTypes = propTypes;
diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
index 24f1895ed5e0..9785a66a4003 100644
--- a/src/pages/signin/SignInHeroImage.js
+++ b/src/pages/signin/SignInHeroImage.js
@@ -9,7 +9,7 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const SignInHeroImage = (props) => {
+function SignInHeroImage(props) {
let imageSize;
if (props.isSmallScreenWidth) {
imageSize = {
@@ -36,7 +36,7 @@ const SignInHeroImage = (props) => {
style={[styles.alignSelfCenter, imageSize]}
/>
);
-};
+}
SignInHeroImage.displayName = 'SignInHeroImage';
SignInHeroImage.propTypes = propTypes;
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index dcfc7b67a56a..a875c25359b0 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -1,27 +1,30 @@
-import React, {useEffect} from 'react';
-import {View} from 'react-native';
+import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import lodashGet from 'lodash/get';
import Str from 'expensify-common/lib/str';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {withSafeAreaInsets} from 'react-native-safe-area-context';
import ONYXKEYS from '../../ONYXKEYS';
import styles from '../../styles/styles';
+import compose from '../../libs/compose';
import SignInPageLayout from './SignInPageLayout';
import LoginForm from './LoginForm';
import PasswordForm from './PasswordForm';
import ValidateCodeForm from './ValidateCodeForm';
import ResendValidationForm from './ResendValidationForm';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import Performance from '../../libs/Performance';
import * as App from '../../libs/actions/App';
+import Permissions from '../../libs/Permissions';
import UnlinkLoginForm from './UnlinkLoginForm';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
import * as Localize from '../../libs/Localize';
-import useLocalize from '../../hooks/useLocalize';
-import usePermissions from '../../hooks/usePermissions';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
-import Log from '../../libs/Log';
import * as StyleUtils from '../../styles/StyleUtils';
const propTypes = {
+ /* Onyx Props */
+
/** The details about the account that the user is signing in with */
account: PropTypes.shape({
/** Error to display when there is an account error returned */
@@ -32,149 +35,153 @@ const propTypes = {
/** The primaryLogin associated with the account */
primaryLogin: PropTypes.string,
-
- /** Has the user pressed the forgot password button? */
- forgotPassword: PropTypes.bool,
-
- /** Does this account require 2FA? */
- requiresTwoFactorAuth: PropTypes.bool,
}),
+ /** List of betas available to current user */
+ betas: PropTypes.arrayOf(PropTypes.string),
+
/** The credentials of the person signing in */
credentials: PropTypes.shape({
login: PropTypes.string,
password: PropTypes.string,
twoFactorAuthCode: PropTypes.string,
- validateCode: PropTypes.string,
}),
+
+ ...withLocalizePropTypes,
+
+ ...windowDimensionsPropTypes,
};
const defaultProps = {
account: {},
+ betas: [],
credentials: {},
};
-/**
- * @param {Boolean} hasLogin
- * @param {Boolean} hasPassword
- * @param {Boolean} hasValidateCode
- * @param {Boolean} isPrimaryLogin
- * @param {Boolean} isAccountValidated
- * @param {Boolean} didForgetPassword
- * @param {Boolean} canUsePasswordlessLogins
- * @returns {Object}
- */
-function getRenderOptions({hasLogin, hasPassword, hasValidateCode, isPrimaryLogin, isAccountValidated, didForgetPassword, canUsePasswordlessLogins}) {
- const shouldShowLoginForm = !hasLogin && !hasValidateCode;
- const isUnvalidatedSecondaryLogin = hasLogin && !isPrimaryLogin && !isAccountValidated;
- const shouldShowPasswordForm = hasLogin && isAccountValidated && !hasPassword && !didForgetPassword && !isUnvalidatedSecondaryLogin && !canUsePasswordlessLogins;
- const shouldShowValidateCodeForm = (hasLogin || hasValidateCode) && !isUnvalidatedSecondaryLogin && canUsePasswordlessLogins;
- const shouldShowResendValidationForm = hasLogin && (!isAccountValidated || didForgetPassword) && !isUnvalidatedSecondaryLogin && !canUsePasswordlessLogins;
- const shouldShowWelcomeHeader = shouldShowLoginForm || shouldShowPasswordForm || shouldShowValidateCodeForm || isUnvalidatedSecondaryLogin;
- const shouldShowWelcomeText = shouldShowLoginForm || shouldShowPasswordForm || shouldShowValidateCodeForm;
- return {
- shouldShowLoginForm,
- shouldShowUnlinkLoginForm: isUnvalidatedSecondaryLogin,
- shouldShowPasswordForm,
- shouldShowValidateCodeForm,
- shouldShowResendValidationForm,
- shouldShowWelcomeHeader,
- shouldShowWelcomeText,
- };
-}
-
-function SignInPage({account, credentials}) {
- const {translate, formatPhoneNumber} = useLocalize();
- const {canUsePasswordlessLogins} = usePermissions();
- const {isSmallScreenWidth} = useWindowDimensions();
- const safeAreaInsets = useSafeAreaInsets();
+class SignInPage extends Component {
+ componentDidMount() {
+ Performance.measureTTI();
- useEffect(() => Performance.measureTTI(), []);
- useEffect(() => {
App.setLocale(Localize.getDevicePreferredLocale());
- }, []);
-
- const {
- shouldShowLoginForm,
- shouldShowUnlinkLoginForm,
- shouldShowPasswordForm,
- shouldShowValidateCodeForm,
- shouldShowResendValidationForm,
- shouldShowWelcomeHeader,
- shouldShowWelcomeText,
- } = getRenderOptions({
- hasLogin: Boolean(credentials.login),
- hasPassword: Boolean(credentials.password),
- hasValidateCode: Boolean(credentials.validateCode),
- isPrimaryLogin: account.primaryLogin && account.primaryLogin === credentials.login,
- isAccountValidated: Boolean(account.validated),
- didForgetPassword: Boolean(account.forgotPassword),
- canUsePasswordlessLogins,
- });
-
- let welcomeHeader;
- let welcomeText;
- if (shouldShowValidateCodeForm) {
- if (account.requiresTwoFactorAuth) {
- // We will only know this after a user signs in successfully, without their 2FA code
- welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
- welcomeText = translate('validateCodeForm.enterAuthenticatorCode');
- } else {
- const userLogin = Str.removeSMSDomain(credentials.login || '');
-
- // replacing spaces with "hard spaces" to prevent breaking the number
- const userLoginToDisplay = Str.isSMSLogin(userLogin) ? formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin;
- if (account.validated) {
- welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
- welcomeText = isSmallScreenWidth
- ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}`
- : translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay});
+ }
+
+ render() {
+ // Show the login form if
+ // - A login has not been entered yet
+ // - AND a validateCode has not been cached with sign in link
+ const showLoginForm = !this.props.credentials.login && !this.props.credentials.validateCode;
+
+ // Show the unlink form if
+ // - A login has been entered
+ // - AND the login is not the primary login
+ // - AND the login is not validated
+ const showUnlinkLoginForm =
+ Boolean(this.props.credentials.login && this.props.account.primaryLogin) && this.props.account.primaryLogin !== this.props.credentials.login && !this.props.account.validated;
+
+ // Show the old password form if
+ // - A login has been entered
+ // - AND an account exists and is validated for this login
+ // - AND a password hasn't been entered yet
+ // - AND haven't forgotten password
+ // - AND the login isn't an unvalidated secondary login
+ // - AND the user is NOT on the passwordless beta
+ const showPasswordForm =
+ Boolean(this.props.credentials.login) &&
+ this.props.account.validated &&
+ !this.props.credentials.password &&
+ !this.props.account.forgotPassword &&
+ !showUnlinkLoginForm &&
+ !Permissions.canUsePasswordlessLogins(this.props.betas);
+
+ // Show the new magic code / validate code form if
+ // - A login has been entered or a validateCode has been cached from sign in link
+ // - AND the login isn't an unvalidated secondary login
+ // - AND the user is on the 'passwordless' beta
+ const showValidateCodeForm =
+ Boolean(this.props.credentials.login || this.props.credentials.validateCode) && !showUnlinkLoginForm && Permissions.canUsePasswordlessLogins(this.props.betas);
+
+ // Show the resend validation link form if
+ // - A login has been entered
+ // - AND is not validated or password is forgotten
+ // - AND the login isn't an unvalidated secondary login
+ // - AND user is not on 'passwordless' beta
+ const showResendValidationForm =
+ Boolean(this.props.credentials.login) &&
+ (!this.props.account.validated || this.props.account.forgotPassword) &&
+ !showUnlinkLoginForm &&
+ !Permissions.canUsePasswordlessLogins(this.props.betas);
+
+ let welcomeHeader = '';
+ let welcomeText = '';
+ if (showValidateCodeForm) {
+ if (this.props.account.requiresTwoFactorAuth) {
+ // We will only know this after a user signs in successfully, without their 2FA code
+ welcomeHeader = this.props.isSmallScreenWidth ? '' : this.props.translate('welcomeText.welcomeBack');
+ welcomeText = this.props.translate('validateCodeForm.enterAuthenticatorCode');
} else {
- welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcome');
- welcomeText = isSmallScreenWidth
- ? `${translate('welcomeText.welcome')} ${translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}`
- : translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay});
+ const userLogin = Str.removeSMSDomain(lodashGet(this.props, 'credentials.login', ''));
+
+ // replacing spaces with "hard spaces" to prevent breaking the number
+ const userLoginToDisplay = Str.isSMSLogin(userLogin) ? this.props.formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin;
+ if (this.props.account.validated) {
+ welcomeHeader = this.props.isSmallScreenWidth ? '' : this.props.translate('welcomeText.welcomeBack');
+ welcomeText = this.props.isSmallScreenWidth
+ ? `${this.props.translate('welcomeText.welcomeBack')} ${this.props.translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}`
+ : this.props.translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay});
+ } else {
+ welcomeHeader = this.props.isSmallScreenWidth ? '' : this.props.translate('welcomeText.welcome');
+ welcomeText = this.props.isSmallScreenWidth
+ ? `${this.props.translate('welcomeText.welcome')} ${this.props.translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}`
+ : this.props.translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay});
+ }
}
+ } else if (showPasswordForm) {
+ welcomeHeader = this.props.isSmallScreenWidth ? '' : this.props.translate('welcomeText.welcomeBack');
+ welcomeText = this.props.isSmallScreenWidth
+ ? `${this.props.translate('welcomeText.welcomeBack')} ${this.props.translate('welcomeText.enterPassword')}`
+ : this.props.translate('welcomeText.enterPassword');
+ } else if (showUnlinkLoginForm) {
+ welcomeHeader = this.props.isSmallScreenWidth ? this.props.translate('login.hero.header') : this.props.translate('welcomeText.welcomeBack');
+ } else if (!showResendValidationForm) {
+ welcomeHeader = this.props.isSmallScreenWidth ? this.props.translate('login.hero.header') : this.props.translate('welcomeText.getStarted');
+ welcomeText = this.props.isSmallScreenWidth ? this.props.translate('welcomeText.getStarted') : '';
}
- } else if (shouldShowPasswordForm) {
- welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
- welcomeText = isSmallScreenWidth ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.enterPassword')}` : translate('welcomeText.enterPassword');
- } else if (shouldShowUnlinkLoginForm) {
- welcomeHeader = isSmallScreenWidth ? translate('login.hero.header') : translate('welcomeText.welcomeBack');
- } else if (!shouldShowResendValidationForm) {
- welcomeHeader = isSmallScreenWidth ? translate('login.hero.header') : translate('welcomeText.getStarted');
- welcomeText = isSmallScreenWidth ? translate('welcomeText.getStarted') : '';
- } else {
- Log.warn('SignInPage in unexpected state!');
- }
- return (
-
-
- {/* LoginForm and PasswordForm must use the isVisible prop. This keeps them mounted, but visually hidden
+ return (
+ // There is an issue SafeAreaView on Android where wrong insets flicker on app start.
+ // Can be removed once https://github.com/th3rdwave/react-native-safe-area-context/issues/364 is resolved.
+
+
+ {/* LoginForm and PasswordForm must use the isVisible prop. This keeps them mounted, but visually hidden
so that password managers can access the values. Conditionally rendering these components will break this feature. */}
-
- {shouldShowValidateCodeForm ? : }
- {shouldShowResendValidationForm && }
- {shouldShowUnlinkLoginForm && }
-
-
- );
+
+ {showValidateCodeForm ? : }
+ {showResendValidationForm && }
+ {showUnlinkLoginForm && }
+
+
+ );
+ }
}
SignInPage.propTypes = propTypes;
SignInPage.defaultProps = defaultProps;
-SignInPage.displayName = 'SignInPage';
-export default withOnyx({
- account: {key: ONYXKEYS.ACCOUNT},
- credentials: {key: ONYXKEYS.CREDENTIALS},
-})(SignInPage);
+export default compose(
+ withSafeAreaInsets,
+ withLocalize,
+ withWindowDimensions,
+ withOnyx({
+ account: {key: ONYXKEYS.ACCOUNT},
+ betas: {key: ONYXKEYS.BETAS},
+ credentials: {key: ONYXKEYS.CREDENTIALS},
+ }),
+)(SignInPage);
diff --git a/src/pages/signin/SignInPageHero.js b/src/pages/signin/SignInPageHero.js
index 5475c75c36b6..3af7a8fb1a1e 100644
--- a/src/pages/signin/SignInPageHero.js
+++ b/src/pages/signin/SignInPageHero.js
@@ -11,23 +11,25 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const SignInPageHero = (props) => (
-
-
-
-
+function SignInPageHero(props) {
+ return (
+
+
+
+
+
-
-);
+ );
+}
SignInPageHero.displayName = 'SignInPageHero';
SignInPageHero.propTypes = propTypes;
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index fb58f5292dd6..a37654fe41ff 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -149,7 +149,7 @@ const columns = ({scrollPageToTop}) => [
},
];
-const Footer = (props) => {
+function Footer(props) {
const isVertical = props.isSmallScreenWidth;
const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
const imageStyle = isVertical ? styles.pr0 : styles.alignSelfCenter;
@@ -218,7 +218,7 @@ const Footer = (props) => {
);
-};
+}
Footer.propTypes = propTypes;
Footer.displayName = 'Footer';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index a1fc645fb19d..bcadeaa6558f 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -36,54 +36,56 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const SignInPageContent = (props) => (
-
-
- {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */}
-
+function SignInPageContent(props) {
+ return (
+
+
+ {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */}
+
-
-
-
-
+
+
+
+
+
+
+ {props.shouldShowWelcomeHeader && props.welcomeHeader ? (
+
+ {props.welcomeHeader}
+
+ ) : null}
+ {props.shouldShowWelcomeText && props.welcomeText ? (
+ {props.welcomeText}
+ ) : null}
+
+ {props.children}
+
+
+
-
- {props.shouldShowWelcomeHeader && props.welcomeHeader ? (
-
- {props.welcomeHeader}
-
- ) : null}
- {props.shouldShowWelcomeText && props.welcomeText ? (
- {props.welcomeText}
- ) : null}
-
- {props.children}
-
-
-
+ {props.isSmallScreenWidth ? (
+
+
+
+ ) : null}
- {props.isSmallScreenWidth ? (
-
-
-
- ) : null}
-
-
-);
+
+ );
+}
SignInPageContent.propTypes = propTypes;
SignInPageContent.displayName = 'SignInPageContent';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
index 5448b8024a7c..67f9dd62f7ec 100644
--- a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
@@ -12,22 +12,24 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const SignInPageGraphics = (props) => (
- {
- Link.openExternalLink(backgroundStyle.redirectUri);
- }}
- disabled={_.isEmpty(backgroundStyle.redirectUri)}
- >
-
-
-);
+function SignInPageGraphics(props) {
+ return (
+ {
+ Link.openExternalLink(backgroundStyle.redirectUri);
+ }}
+ disabled={_.isEmpty(backgroundStyle.redirectUri)}
+ >
+
+
+ );
+}
SignInPageGraphics.displayName = 'SignInPageGraphics';
SignInPageGraphics.propTypes = propTypes;
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 9466077f488e..954f8b2ebb8a 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -37,7 +37,7 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-const SignInPageLayout = (props) => {
+function SignInPageLayout(props) {
const scrollViewRef = useRef();
let containerStyles = [styles.flex1, styles.signInPageInner];
let contentContainerStyles = [styles.flex1, styles.flexRow];
@@ -133,7 +133,7 @@ const SignInPageLayout = (props) => {
)}
);
-};
+}
SignInPageLayout.propTypes = propTypes;
SignInPageLayout.displayName = 'SignInPageLayout';
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index 83c89e5fd617..52c21890c381 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -34,29 +34,31 @@ const socialsList = [
},
];
-const Socials = () => (
-
- {_.map(socialsList, (social) => (
-
- {(hovered) => (
-
-
-
-
-
- )}
-
- ))}
-
-);
+function Socials() {
+ return (
+
+ {_.map(socialsList, (social) => (
+
+ {(hovered) => (
+
+
+
+
+
+ )}
+
+ ))}
+
+ );
+}
Socials.displayName = 'Socials';
diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js
index 0cd23d780812..15f7c17a2889 100644
--- a/src/pages/signin/Terms.js
+++ b/src/pages/signin/Terms.js
@@ -7,27 +7,29 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
const linkStyles = [styles.textExtraSmallSupporting, styles.link];
-const Terms = (props) => (
-
- {props.translate('termsOfUse.phrase1')}
-
- {' '}
- {props.translate('termsOfUse.phrase2')}{' '}
-
- {props.translate('termsOfUse.phrase3')}
-
- {' '}
- {props.translate('termsOfUse.phrase4')}
-
- {'. '}
-
-);
+function Terms(props) {
+ return (
+
+ {props.translate('termsOfUse.phrase1')}
+
+ {' '}
+ {props.translate('termsOfUse.phrase2')}{' '}
+
+ {props.translate('termsOfUse.phrase3')}
+
+ {' '}
+ {props.translate('termsOfUse.phrase4')}
+
+ {'. '}
+
+ );
+}
Terms.propTypes = {...withLocalizePropTypes};
Terms.displayName = 'Terms';
diff --git a/src/pages/signin/UnlinkLoginForm.js b/src/pages/signin/UnlinkLoginForm.js
index adf44aeb1d8b..6807ba74c6f9 100644
--- a/src/pages/signin/UnlinkLoginForm.js
+++ b/src/pages/signin/UnlinkLoginForm.js
@@ -50,9 +50,9 @@ const defaultProps = {
credentials: {},
};
-const UnlinkLoginForm = (props) => {
- const primaryLogin = Str.isSMSLogin(props.account.primaryLogin || '') ? Str.removeSMSDomain(props.account.primaryLogin || '') : props.account.primaryLogin;
- const secondaryLogin = Str.isSMSLogin(props.credentials.login || '') ? Str.removeSMSDomain(props.credentials.login || '') : props.credentials.login;
+function UnlinkLoginForm(props) {
+ const primaryLogin = Str.isSMSLogin(props.account.primaryLogin) ? Str.removeSMSDomain(props.account.primaryLogin) : props.account.primaryLogin;
+ const secondaryLogin = Str.isSMSLogin(props.credentials.login) ? Str.removeSMSDomain(props.credentials.login) : props.credentials.login;
return (
<>
@@ -95,7 +95,7 @@ const UnlinkLoginForm = (props) => {
>
);
-};
+}
UnlinkLoginForm.propTypes = propTypes;
UnlinkLoginForm.defaultProps = defaultProps;
diff --git a/src/pages/signin/ValidateCodeForm/index.android.js b/src/pages/signin/ValidateCodeForm/index.android.js
index 4058ee49a7b9..e0258121fad0 100644
--- a/src/pages/signin/ValidateCodeForm/index.android.js
+++ b/src/pages/signin/ValidateCodeForm/index.android.js
@@ -9,12 +9,14 @@ const defaultProps = {
const propTypes = {
isVisible: PropTypes.bool,
};
-const ValidateCodeForm = (props) => (
-
-);
+function ValidateCodeForm(props) {
+ return (
+
+ );
+}
ValidateCodeForm.displayName = 'ValidateCodeForm';
ValidateCodeForm.propTypes = propTypes;
diff --git a/src/pages/signin/ValidateCodeForm/index.js b/src/pages/signin/ValidateCodeForm/index.js
index 21122d391ffa..e60c30bff359 100644
--- a/src/pages/signin/ValidateCodeForm/index.js
+++ b/src/pages/signin/ValidateCodeForm/index.js
@@ -9,12 +9,14 @@ const defaultProps = {
const propTypes = {
isVisible: PropTypes.bool,
};
-const ValidateCodeForm = (props) => (
-
-);
+function ValidateCodeForm(props) {
+ return (
+
+ );
+}
ValidateCodeForm.displayName = 'ValidateCodeForm';
ValidateCodeForm.propTypes = propTypes;
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index cb0bfd8c2871..0a1beaa5daf2 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -35,7 +35,7 @@ const defaultProps = {
},
};
-const NewTaskDescriptionPage = (props) => {
+function NewTaskDescriptionPage(props) {
const inputRef = useRef(null);
// On submit, we want to call the assignTask function and wait to validate
@@ -83,7 +83,7 @@ const NewTaskDescriptionPage = (props) => {
);
-};
+}
NewTaskDescriptionPage.displayName = 'NewTaskDescriptionPage';
NewTaskDescriptionPage.propTypes = propTypes;
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index 383134c434bb..04f7edc613b2 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -34,7 +34,7 @@ const defaultProps = {
task: {},
};
-const NewTaskPage = (props) => {
+function NewTaskPage(props) {
const inputRef = useRef();
const [taskTitle, setTaskTitle] = useState(props.task.title);
const [taskDescription, setTaskDescription] = useState(props.task.description || '');
@@ -109,7 +109,7 @@ const NewTaskPage = (props) => {
);
-};
+}
NewTaskPage.displayName = 'NewTaskPage';
NewTaskPage.propTypes = propTypes;
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 99fb6dbc5811..4a53921ce8f6 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -66,7 +66,7 @@ const defaultProps = {
session: {},
};
-const NewTaskPage = (props) => {
+function NewTaskPage(props) {
const [assignee, setAssignee] = React.useState({});
const [shareDestination, setShareDestination] = React.useState({});
const [errorMessage, setErrorMessage] = React.useState('');
@@ -184,7 +184,7 @@ const NewTaskPage = (props) => {
);
-};
+}
NewTaskPage.displayName = 'NewTaskPage';
NewTaskPage.propTypes = propTypes;
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 82e5b14a9e3e..1e232b637de3 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -36,7 +36,7 @@ const defaultProps = {
},
};
-const NewTaskTitlePage = (props) => {
+function NewTaskTitlePage(props) {
const inputRef = useRef(null);
/**
@@ -101,7 +101,7 @@ const NewTaskTitlePage = (props) => {
);
-};
+}
NewTaskTitlePage.displayName = 'NewTaskTitlePage';
NewTaskTitlePage.propTypes = propTypes;
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index e95f6143f904..e1d5a4b5a599 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -69,7 +69,7 @@ const defaultProps = {
task: {},
};
-const TaskAssigneeSelectorModal = (props) => {
+function TaskAssigneeSelectorModal(props) {
const [searchValue, setSearchValue] = useState('');
const [headerMessage, setHeaderMessage] = useState('');
const [filteredRecentReports, setFilteredRecentReports] = useState([]);
@@ -216,7 +216,7 @@ const TaskAssigneeSelectorModal = (props) => {
)}
);
-};
+}
TaskAssigneeSelectorModal.displayName = 'TaskAssigneeSelectorModal';
TaskAssigneeSelectorModal.propTypes = propTypes;
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index ed4fadd906d9..2073ca92a233 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -41,7 +41,7 @@ const defaultProps = {
reports: {},
};
-const TaskShareDestinationSelectorModal = (props) => {
+function TaskShareDestinationSelectorModal(props) {
const [searchValue, setSearchValue] = useState('');
const [headerMessage, setHeaderMessage] = useState('');
const [filteredRecentReports, setFilteredRecentReports] = useState([]);
@@ -169,7 +169,7 @@ const TaskShareDestinationSelectorModal = (props) => {
)}
);
-};
+}
TaskShareDestinationSelectorModal.displayName = 'TaskShareDestinationSelectorModal';
TaskShareDestinationSelectorModal.propTypes = propTypes;
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index e08ee256ca3c..7ced21b0e833 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -64,7 +64,7 @@ function dismissError(policyID) {
Policy.removeWorkspace(policyID);
}
-const WorkspaceInitialPage = (props) => {
+function WorkspaceInitialPage(props) {
const policy = props.policy;
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const hasPolicyCreationError = Boolean(policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && policy.errors);
@@ -256,7 +256,7 @@ const WorkspaceInitialPage = (props) => {
)}
);
-};
+}
WorkspaceInitialPage.propTypes = propTypes;
WorkspaceInitialPage.defaultProps = defaultProps;
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index eb53319ffd38..a8b88f1a3495 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import {Pressable, View} from 'react-native';
+import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import lodashGet from 'lodash/get';
@@ -24,6 +24,7 @@ import ROUTES from '../../ROUTES';
import * as Localize from '../../libs/Localize';
import Form from '../../components/Form';
import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback';
const personalDetailsPropTypes = PropTypes.shape({
/** The login of the person (either email or phone number) */
@@ -163,16 +164,17 @@ class WorkspaceInviteMessagePage extends React.Component {
submitButtonText={this.props.translate('common.invite')}
enabledWhenOffline
footerContent={
-
{this.props.translate('common.privacy')}
-
+
}
>
diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.js
index 56d1fad3b1f8..d790a2503185 100644
--- a/src/pages/workspace/WorkspaceResetBankAccountModal.js
+++ b/src/pages/workspace/WorkspaceResetBankAccountModal.js
@@ -15,7 +15,7 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceResetBankAccountModal = (props) => {
+function WorkspaceResetBankAccountModal(props) {
const achData = lodashGet(props.reimbursementAccount, 'achData') || {};
const isInOpenState = achData.state === BankAccount.STATE.OPEN;
const bankAccountID = achData.bankAccountID;
@@ -44,7 +44,7 @@ const WorkspaceResetBankAccountModal = (props) => {
isVisible
/>
);
-};
+}
WorkspaceResetBankAccountModal.displayName = 'WorkspaceResetBankAccountModal';
WorkspaceResetBankAccountModal.propTypes = propTypes;
diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
index 12cfa47aee11..b0fc0e99c8f9 100644
--- a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
+++ b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
@@ -40,7 +40,7 @@ const defaultProps = {
user: {},
};
-const WorkspaceBillsFirstSection = (props) => {
+function WorkspaceBillsFirstSection(props) {
const emailDomain = Str.extractEmailDomain(props.session.email);
const manageYourBillsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
return (
@@ -78,7 +78,7 @@ const WorkspaceBillsFirstSection = (props) => {
);
-};
+}
WorkspaceBillsFirstSection.propTypes = propTypes;
WorkspaceBillsFirstSection.defaultProps = defaultProps;
diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
index 5022eb0c170c..e99d157a4733 100644
--- a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
@@ -18,31 +18,33 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceBillsNoVBAView = (props) => (
- <>
-
+function WorkspaceBillsNoVBAView(props) {
+ return (
+ <>
+
-
-
- {props.translate('workspace.bills.unlockNoVBACopy')}
-
- ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
- icon={Expensicons.Bank}
- style={[styles.mt4]}
- iconStyles={[styles.buttonCTAIcon]}
- shouldShowRightIcon
- large
- success
- />
-
- >
-);
+
+
+ {props.translate('workspace.bills.unlockNoVBACopy')}
+
+ ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+ icon={Expensicons.Bank}
+ style={[styles.mt4]}
+ iconStyles={[styles.buttonCTAIcon]}
+ shouldShowRightIcon
+ large
+ success
+ />
+
+ >
+ );
+}
WorkspaceBillsNoVBAView.propTypes = propTypes;
WorkspaceBillsNoVBAView.displayName = 'WorkspaceBillsNoVBAView';
diff --git a/src/pages/workspace/bills/WorkspaceBillsPage.js b/src/pages/workspace/bills/WorkspaceBillsPage.js
index 713db314a2c7..5cb590895e0d 100644
--- a/src/pages/workspace/bills/WorkspaceBillsPage.js
+++ b/src/pages/workspace/bills/WorkspaceBillsPage.js
@@ -19,21 +19,23 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceBillsPage = (props) => (
-
- {(hasVBA, policyID) => (
- <>
- {!hasVBA && }
- {hasVBA && }
- >
- )}
-
-);
+function WorkspaceBillsPage(props) {
+ return (
+
+ {(hasVBA, policyID) => (
+ <>
+ {!hasVBA && }
+ {hasVBA && }
+ >
+ )}
+
+ );
+}
WorkspaceBillsPage.propTypes = propTypes;
WorkspaceBillsPage.displayName = 'WorkspaceBillsPage';
diff --git a/src/pages/workspace/bills/WorkspaceBillsVBAView.js b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
index dcb625777c7d..c35b3400e7d1 100644
--- a/src/pages/workspace/bills/WorkspaceBillsVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
@@ -17,7 +17,7 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceBillsVBAView = (props) => {
+function WorkspaceBillsVBAView(props) {
const reportsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Processing,Approved&isAdvancedFilterMode=true`;
return (
@@ -45,7 +45,7 @@ const WorkspaceBillsVBAView = (props) => {
>
);
-};
+}
WorkspaceBillsVBAView.propTypes = propTypes;
WorkspaceBillsVBAView.displayName = 'WorkspaceBillsVBAView';
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
index ed7ecea68d66..da93946a6191 100644
--- a/src/pages/workspace/card/WorkspaceCardNoVBAView.js
+++ b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
@@ -18,35 +18,37 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceCardNoVBAView = (props) => (
-
-
- {props.translate('workspace.card.noVBACopy')}
-
+function WorkspaceCardNoVBAView(props) {
+ return (
+
+
+ {props.translate('workspace.card.noVBACopy')}
+
-
- ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
- icon={Expensicons.Bank}
- style={[styles.mt6]}
- iconStyles={[styles.mr5]}
- shouldShowRightIcon
- large
- success
- />
-
-);
+
+ ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+ icon={Expensicons.Bank}
+ style={[styles.mt6]}
+ iconStyles={[styles.mr5]}
+ shouldShowRightIcon
+ large
+ success
+ />
+
+ );
+}
WorkspaceCardNoVBAView.propTypes = propTypes;
WorkspaceCardNoVBAView.displayName = 'WorkspaceCardNoVBAView';
diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js
index 1b2e0915eb56..2f5527c49cf0 100644
--- a/src/pages/workspace/card/WorkspaceCardPage.js
+++ b/src/pages/workspace/card/WorkspaceCardPage.js
@@ -20,24 +20,26 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceCardPage = (props) => (
-
- {(hasVBA, policyID, isUsingECard) => (
- <>
- {!hasVBA && }
+function WorkspaceCardPage(props) {
+ return (
+
+ {(hasVBA, policyID, isUsingECard) => (
+ <>
+ {!hasVBA && }
- {hasVBA && !isUsingECard && }
+ {hasVBA && !isUsingECard && }
- {hasVBA && isUsingECard && }
- >
- )}
-
-);
+ {hasVBA && isUsingECard && }
+ >
+ )}
+
+ );
+}
WorkspaceCardPage.propTypes = propTypes;
WorkspaceCardPage.displayName = 'WorkspaceCardPage';
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
index d68d3099fc53..5c93b8858de4 100644
--- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
@@ -26,38 +26,40 @@ const defaultProps = {
user: {},
};
-const WorkspaceCardVBANoECardView = (props) => (
- <>
-
-
-
+
+
+
+
+ {
+ Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
+ }}
+ icon={Expensicons.Mail}
+ style={[styles.mt4]}
+ iconStyles={[styles.buttonCTAIcon]}
+ shouldShowRightIcon
+ large
+ success
/>
-
- {
- Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
- }}
- icon={Expensicons.Mail}
- style={[styles.mt4]}
- iconStyles={[styles.buttonCTAIcon]}
- shouldShowRightIcon
- large
- success
- />
-
- {Boolean(props.user.isCheckingDomain) && {props.translate('workspace.card.checkingDomain')}}
- >
-);
+
+ {Boolean(props.user.isCheckingDomain) && {props.translate('workspace.card.checkingDomain')}}
+ >
+ );
+}
WorkspaceCardVBANoECardView.propTypes = propTypes;
WorkspaceCardVBANoECardView.defaultProps = defaultProps;
diff --git a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
index 4c1213800bac..7f9971f00c1b 100644
--- a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
@@ -19,7 +19,7 @@ const MENU_LINKS = {
SETTLEMENT_FREQUENCY: encodeURI('domain_companycards?param={"section":"configureSettings"}'),
};
-const WorkspaceCardVBAWithECardView = (props) => {
+function WorkspaceCardVBAWithECardView(props) {
const menuItems = [
{
title: props.translate('workspace.common.issueAndManageCards'),
@@ -72,7 +72,7 @@ const WorkspaceCardVBAWithECardView = (props) => {
);
-};
+}
WorkspaceCardVBAWithECardView.propTypes = propTypes;
WorkspaceCardVBAWithECardView.displayName = 'WorkspaceCardVBAWithECardView';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
index 45d28325d913..7c47476e1c7b 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
@@ -16,7 +16,7 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceInvoicesFirstSection = (props) => {
+function WorkspaceInvoicesFirstSection(props) {
const sendInvoiceUrl = encodeURI('reports?param={"createInvoice":true}');
const viewAllInvoicesUrl = `reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
@@ -51,7 +51,7 @@ const WorkspaceInvoicesFirstSection = (props) => {
);
-};
+}
WorkspaceInvoicesFirstSection.propTypes = propTypes;
WorkspaceInvoicesFirstSection.displayName = 'WorkspaceInvoicesFirstSection';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
index 291011f5502b..c37e739c3b97 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
@@ -18,31 +18,33 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceInvoicesNoVBAView = (props) => (
- <>
-
+function WorkspaceInvoicesNoVBAView(props) {
+ return (
+ <>
+
-
-
- {props.translate('workspace.invoices.unlockNoVBACopy')}
-
- ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
- icon={Expensicons.Bank}
- style={[styles.mt4]}
- iconStyles={[styles.buttonCTAIcon]}
- shouldShowRightIcon
- large
- success
- />
-
- >
-);
+
+
+ {props.translate('workspace.invoices.unlockNoVBACopy')}
+
+ ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+ icon={Expensicons.Bank}
+ style={[styles.mt4]}
+ iconStyles={[styles.buttonCTAIcon]}
+ shouldShowRightIcon
+ large
+ success
+ />
+
+ >
+ );
+}
WorkspaceInvoicesNoVBAView.propTypes = propTypes;
WorkspaceInvoicesNoVBAView.displayName = 'WorkspaceInvoicesNoVBAView';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
index 4273f8a6513a..bfc1988211ce 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
@@ -19,21 +19,23 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceInvoicesPage = (props) => (
-
- {(hasVBA, policyID) => (
- <>
- {!hasVBA && }
- {hasVBA && }
- >
- )}
-
-);
+function WorkspaceInvoicesPage(props) {
+ return (
+
+ {(hasVBA, policyID) => (
+ <>
+ {!hasVBA && }
+ {hasVBA && }
+ >
+ )}
+
+ );
+}
WorkspaceInvoicesPage.propTypes = propTypes;
WorkspaceInvoicesPage.displayName = 'WorkspaceInvoicesPage';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
index c4f50bb9d49d..0f7dd8b340fc 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
@@ -17,7 +17,7 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceInvoicesVBAView = (props) => {
+function WorkspaceInvoicesVBAView(props) {
const viewUnpaidInvoicesUrl = `reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Processing&isAdvancedFilterMode=true`;
return (
@@ -45,7 +45,7 @@ const WorkspaceInvoicesVBAView = (props) => {
>
);
-};
+}
WorkspaceInvoicesVBAView.propTypes = propTypes;
WorkspaceInvoicesVBAView.displayName = 'WorkspaceInvoicesVBAView';
diff --git a/src/pages/workspace/reimburse/WorkspaceReimbursePage.js b/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
index 61056569f8fa..9d1495c2a11f 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
@@ -21,17 +21,19 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceReimbursePage = (props) => (
-
- {() => }
-
-);
+function WorkspaceReimbursePage(props) {
+ return (
+
+ {() => }
+
+ );
+}
WorkspaceReimbursePage.propTypes = propTypes;
WorkspaceReimbursePage.displayName = 'WorkspaceReimbursePage';
diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
index 33758f9ecebf..8716ee930206 100644
--- a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
@@ -17,28 +17,30 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceTravelNoVBAView = (props) => (
- <>
-
-
- {props.translate('workspace.travel.noVBACopy')}
-
- ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
- icon={Expensicons.Bank}
- style={[styles.mt4]}
- iconStyles={[styles.buttonCTAIcon]}
- shouldShowRightIcon
- large
- success
- />
-
- >
-);
+function WorkspaceTravelNoVBAView(props) {
+ return (
+ <>
+
+
+ {props.translate('workspace.travel.noVBACopy')}
+
+ ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+ icon={Expensicons.Bank}
+ style={[styles.mt4]}
+ iconStyles={[styles.buttonCTAIcon]}
+ shouldShowRightIcon
+ large
+ success
+ />
+
+ >
+ );
+}
WorkspaceTravelNoVBAView.propTypes = propTypes;
WorkspaceTravelNoVBAView.displayName = 'WorkspaceTravelNoVBAView';
diff --git a/src/pages/workspace/travel/WorkspaceTravelPage.js b/src/pages/workspace/travel/WorkspaceTravelPage.js
index 1fc0e196aa20..8f8a174a5876 100644
--- a/src/pages/workspace/travel/WorkspaceTravelPage.js
+++ b/src/pages/workspace/travel/WorkspaceTravelPage.js
@@ -19,21 +19,23 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceTravelPage = (props) => (
-
- {(hasVBA, policyID) => (
- <>
- {!hasVBA && }
- {hasVBA && }
- >
- )}
-
-);
+function WorkspaceTravelPage(props) {
+ return (
+
+ {(hasVBA, policyID) => (
+ <>
+ {!hasVBA && }
+ {hasVBA && }
+ >
+ )}
+
+ );
+}
WorkspaceTravelPage.propTypes = propTypes;
WorkspaceTravelPage.displayName = 'WorkspaceTravelPage';
diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
index 527783dcb209..8156b0334b3d 100644
--- a/src/pages/workspace/travel/WorkspaceTravelVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
@@ -14,45 +14,47 @@ const propTypes = {
...withLocalizePropTypes,
};
-const WorkspaceTravelVBAView = (props) => (
- Link.openOldDotLink('domain_companycards'),
- icon: Expensicons.ExpensifyCard,
- shouldShowRightIcon: true,
- iconRight: Expensicons.NewWindow,
- wrapperStyle: [styles.cardMenuItem],
- link: () => Link.buildOldDotURL('domain_companycards'),
- },
- {
- title: props.translate('workspace.travel.bookTravelWithConcierge'),
- onPress: () => {
- Report.navigateToConciergeChat();
+function WorkspaceTravelVBAView(props) {
+ return (
+ Link.openOldDotLink('domain_companycards'),
+ icon: Expensicons.ExpensifyCard,
+ shouldShowRightIcon: true,
+ iconRight: Expensicons.NewWindow,
+ wrapperStyle: [styles.cardMenuItem],
+ link: () => Link.buildOldDotURL('domain_companycards'),
},
- icon: Expensicons.Concierge,
- shouldShowRightIcon: true,
- wrapperStyle: [styles.cardMenuItem],
- },
- {
- title: props.translate('requestorStep.learnMore'),
- onPress: () => Link.openExternalLink(CONST.CONCIERGE_TRAVEL_URL),
- icon: Expensicons.Info,
- shouldShowRightIcon: true,
- iconRight: Expensicons.NewWindow,
- wrapperStyle: [styles.cardMenuItem],
- link: CONST.CONCIERGE_TRAVEL_URL,
- },
- ]}
- >
-
- {props.translate('workspace.travel.VBACopy')}
-
-
-);
+ {
+ title: props.translate('workspace.travel.bookTravelWithConcierge'),
+ onPress: () => {
+ Report.navigateToConciergeChat();
+ },
+ icon: Expensicons.Concierge,
+ shouldShowRightIcon: true,
+ wrapperStyle: [styles.cardMenuItem],
+ },
+ {
+ title: props.translate('requestorStep.learnMore'),
+ onPress: () => Link.openExternalLink(CONST.CONCIERGE_TRAVEL_URL),
+ icon: Expensicons.Info,
+ shouldShowRightIcon: true,
+ iconRight: Expensicons.NewWindow,
+ wrapperStyle: [styles.cardMenuItem],
+ link: CONST.CONCIERGE_TRAVEL_URL,
+ },
+ ]}
+ >
+
+ {props.translate('workspace.travel.VBACopy')}
+
+
+ );
+}
WorkspaceTravelVBAView.propTypes = propTypes;
WorkspaceTravelVBAView.displayName = 'WorkspaceTravelVBAView';
diff --git a/src/pages/workspace/withPolicy.js b/src/pages/workspace/withPolicy.js
index 4458cc45ece9..17a7f0efc72d 100644
--- a/src/pages/workspace/withPolicy.js
+++ b/src/pages/workspace/withPolicy.js
@@ -84,7 +84,7 @@ export default function (WrappedComponent) {
...policyDefaultProps,
};
- const WithPolicy = (props) => {
+ function WithPolicy(props) {
const currentRoute = _.last(useNavigationState((state) => state.routes || []));
const policyID = getPolicyIDFromRoute(currentRoute);
@@ -100,7 +100,7 @@ export default function (WrappedComponent) {
ref={props.forwardedRef}
/>
);
- };
+ }
WithPolicy.propTypes = propTypes;
WithPolicy.defaultProps = defaultProps;
diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.js b/src/pages/workspace/withPolicyAndFullscreenLoading.js
index 1d5cc395c80e..29f1424a26f6 100644
--- a/src/pages/workspace/withPolicyAndFullscreenLoading.js
+++ b/src/pages/workspace/withPolicyAndFullscreenLoading.js
@@ -26,7 +26,7 @@ export default function (WrappedComponent) {
...policyDefaultProps,
};
- const WithPolicyAndFullscreenLoading = (props) => {
+ function WithPolicyAndFullscreenLoading(props) {
if (props.isLoadingReportData && _.isEmpty(props.policy)) {
return ;
}
@@ -39,7 +39,7 @@ export default function (WrappedComponent) {
ref={props.forwardedRef}
/>
);
- };
+ }
WithPolicyAndFullscreenLoading.propTypes = propTypes;
WithPolicyAndFullscreenLoading.defaultProps = defaultProps;
diff --git a/src/stories/AddressSearch.stories.js b/src/stories/AddressSearch.stories.js
index b6d8fc4e6aa3..35f7e3a07596 100644
--- a/src/stories/AddressSearch.stories.js
+++ b/src/stories/AddressSearch.stories.js
@@ -15,7 +15,7 @@ export default {
},
};
-const Template = (args) => {
+function Template(args) {
const [value, setValue] = useState('');
return (
{
{...args}
/>
);
-};
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Banner.stories.js b/src/stories/Banner.stories.js
index 82a63885ae69..c7c27cb52352 100644
--- a/src/stories/Banner.stories.js
+++ b/src/stories/Banner.stories.js
@@ -11,8 +11,10 @@ const story = {
component: Banner,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
index d1baf311c1fd..52212e673f0f 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.js
@@ -11,14 +11,16 @@ const story = {
component: Button,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Default = Template.bind({});
const Loading = Template.bind({});
-const PressOnEnter = (props) => {
+function PressOnEnter(props) {
const [text, setText] = useState('');
const onPress = useCallback(() => {
setText('Button Pressed!');
@@ -33,7 +35,7 @@ const PressOnEnter = (props) => {
onPress={onPress}
/>
);
-};
+}
Default.args = {
text: 'Save & Continue',
diff --git a/src/stories/ButtonWithDropdownMenu.stories.js b/src/stories/ButtonWithDropdownMenu.stories.js
index 54084be5b018..854483df4316 100644
--- a/src/stories/ButtonWithDropdownMenu.stories.js
+++ b/src/stories/ButtonWithDropdownMenu.stories.js
@@ -11,8 +11,10 @@ const story = {
component: ButtonWithDropdownMenu,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Checkbox.stories.js b/src/stories/Checkbox.stories.js
index 408ae6aa4548..7148281f2a7e 100644
--- a/src/stories/Checkbox.stories.js
+++ b/src/stories/Checkbox.stories.js
@@ -11,8 +11,10 @@ export default {
component: Checkbox,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/CheckboxWithLabel.stories.js b/src/stories/CheckboxWithLabel.stories.js
index 7d52d49a8b5b..61ec66a6b2f6 100644
--- a/src/stories/CheckboxWithLabel.stories.js
+++ b/src/stories/CheckboxWithLabel.stories.js
@@ -13,8 +13,10 @@ const story = {
component: CheckboxWithLabel,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 855527389e6d..3dfc5b0e3ead 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -21,7 +21,7 @@ const story = {
const parser = new ExpensiMark();
-const Default = (args) => {
+function Default(args) {
const [pastedFile, setPastedFile] = useState(null);
const [comment, setComment] = useState(args.defaultValue);
const renderedHTML = parser.replace(comment);
@@ -63,7 +63,7 @@ const Default = (args) => {
);
-};
+}
Default.args = {
autoFocus: true,
diff --git a/src/stories/Datepicker.stories.js b/src/stories/Datepicker.stories.js
index 183e488c323d..c4a002c6f88d 100644
--- a/src/stories/Datepicker.stories.js
+++ b/src/stories/Datepicker.stories.js
@@ -21,8 +21,10 @@ export default {
},
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/DragAndDrop.stories.js b/src/stories/DragAndDrop.stories.js
index fbf31a70d843..0398e5af3ac2 100644
--- a/src/stories/DragAndDrop.stories.js
+++ b/src/stories/DragAndDrop.stories.js
@@ -17,7 +17,7 @@ const story = {
component: DragAndDrop,
};
-const Default = () => {
+function Default() {
const [draggingOver, setDraggingOver] = useState(false);
const [fileUrl, setFileUrl] = useState('');
@@ -80,7 +80,7 @@ const Default = () => {
)}
);
-};
+}
export default story;
export {Default};
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index bd11b6e486b2..4e126170558e 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -30,7 +30,7 @@ const story = {
},
};
-const Template = (args) => {
+function Template(args) {
// Form consumes data from Onyx, so we initialize Onyx with the necessary data here
NetworkConnection.setOfflineStatus(false);
FormActions.setIsLoading(args.formID, args.formState.isLoading);
@@ -117,14 +117,14 @@ const Template = (args) => {
/>
);
-};
+}
/**
* Story to exhibit the native event handlers for TextInput in the Form Component
* @param {Object} args
* @returns {JSX}
*/
-const WithNativeEventHandler = (args) => {
+function WithNativeEventHandler(args) {
const [log, setLog] = useState('');
// Form consumes data from Onyx, so we initialize Onyx with the necessary data here
@@ -145,7 +145,7 @@ const WithNativeEventHandler = (args) => {
{`Entered routing number: ${log}`}
);
-};
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/FormAlertWithSubmitButton.stories.js b/src/stories/FormAlertWithSubmitButton.stories.js
index 52bacaf89aeb..5ac5404f851d 100644
--- a/src/stories/FormAlertWithSubmitButton.stories.js
+++ b/src/stories/FormAlertWithSubmitButton.stories.js
@@ -11,8 +11,10 @@ const story = {
component: FormAlertWithSubmitButton,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.js
index 1b11f9a752c1..78250fa2c35d 100644
--- a/src/stories/Header.stories.js
+++ b/src/stories/Header.stories.js
@@ -11,8 +11,10 @@ const story = {
component: Header,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/HeaderWithBackButton.stories.js b/src/stories/HeaderWithBackButton.stories.js
index 82bdccfa77ca..f7d361feb8c4 100644
--- a/src/stories/HeaderWithBackButton.stories.js
+++ b/src/stories/HeaderWithBackButton.stories.js
@@ -11,8 +11,10 @@ const story = {
component: HeaderWithBackButton,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/InlineSystemMessage.stories.js b/src/stories/InlineSystemMessage.stories.js
index 9f2679f374b0..9a4b034ae35b 100644
--- a/src/stories/InlineSystemMessage.stories.js
+++ b/src/stories/InlineSystemMessage.stories.js
@@ -11,8 +11,10 @@ const story = {
component: InlineSystemMessage,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/MagicCodeInput.stories.js b/src/stories/MagicCodeInput.stories.js
index cfcf9d9db394..7d5f26eb05d8 100644
--- a/src/stories/MagicCodeInput.stories.js
+++ b/src/stories/MagicCodeInput.stories.js
@@ -11,8 +11,10 @@ const story = {
component: MagicCodeInput,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/MenuItem.stories.js b/src/stories/MenuItem.stories.js
index 1b5b550a7e51..7046617fe2ae 100644
--- a/src/stories/MenuItem.stories.js
+++ b/src/stories/MenuItem.stories.js
@@ -13,8 +13,10 @@ const story = {
component: MenuItem,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/OptionRow.stories.js b/src/stories/OptionRow.stories.js
index 3fd02033307e..d5ad27f2d939 100644
--- a/src/stories/OptionRow.stories.js
+++ b/src/stories/OptionRow.stories.js
@@ -41,11 +41,13 @@ export default {
},
};
-const Template = (args) => (
-
-
-
-);
+function Template(args) {
+ return (
+
+
+
+ );
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Picker.stories.js b/src/stories/Picker.stories.js
index 8da92d023c84..19b04f9fa79a 100644
--- a/src/stories/Picker.stories.js
+++ b/src/stories/Picker.stories.js
@@ -12,7 +12,7 @@ const story = {
};
// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => {
+function Template(args) {
const [value, setValue] = useState('');
return (
{
{...args}
/>
);
-};
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js
index 1593638f5566..1098fa9ce226 100644
--- a/src/stories/PopoverMenu.stories.js
+++ b/src/stories/PopoverMenu.stories.js
@@ -15,7 +15,7 @@ const story = {
component: PopoverMenu,
};
-const Template = (args) => {
+function Template(args) {
const [isVisible, setIsVisible] = React.useState(false);
const toggleVisibility = () => setIsVisible(!isVisible);
return (
@@ -54,7 +54,7 @@ const Template = (args) => {
>
);
-};
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/SubscriptAvatar.stories.js b/src/stories/SubscriptAvatar.stories.js
index 32a55efa4684..08941bd9c19a 100644
--- a/src/stories/SubscriptAvatar.stories.js
+++ b/src/stories/SubscriptAvatar.stories.js
@@ -24,8 +24,10 @@ export default {
},
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/TextInput.stories.js b/src/stories/TextInput.stories.js
index 1d2947c99886..64329ffed715 100644
--- a/src/stories/TextInput.stories.js
+++ b/src/stories/TextInput.stories.js
@@ -11,8 +11,10 @@ const story = {
component: TextInput,
};
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => ;
+function Template(args) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
@@ -100,7 +102,7 @@ MaxLengthInput.args = {
maxLength: 50,
};
-const HintAndErrorInput = (args) => {
+function HintAndErrorInput(args) {
const [error, setError] = useState('');
return (
{
errorText={error}
/>
);
-};
+}
HintAndErrorInput.args = {
label: 'HintAndError input',
name: 'HintAndError',
diff --git a/src/stories/Tooltip.stories.js b/src/stories/Tooltip.stories.js
index 315b429b9ec6..e88c48fcf202 100644
--- a/src/stories/Tooltip.stories.js
+++ b/src/stories/Tooltip.stories.js
@@ -11,32 +11,34 @@ const story = {
component: Tooltip,
};
-const Template = (args) => (
-
-);
+
+ Hover me
+
+
+
+ );
+}
// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
@@ -47,7 +49,7 @@ Default.args = {
maxWidth: 0,
};
-const RenderContent = () => {
+function RenderContent() {
const [size, setSize] = React.useState(40);
const renderTooltipContent = () => (
@@ -86,7 +88,7 @@ const RenderContent = () => {
);
-};
+}
export default story;
export {Default, RenderContent};
diff --git a/src/styles/colors.js b/src/styles/colors.js
index 0fc14575ca84..06513e0f18d4 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -30,6 +30,7 @@ export default {
white: '#E7ECE9',
blueLink: '#5AB0FF',
blueLinkHover: '#B0D9FF',
+ blueLinkPreview: '#2EAAE2',
greenDefaultButton: '#184E3D',
greenDefaultButtonHover: '#2C6755',
greenDefaultButtonPressed: '#467164',
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1144e27412a8..126dc280031f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -25,6 +25,10 @@ import cursor from './utilities/cursor';
import userSelect from './utilities/userSelect';
import textUnderline from './utilities/textUnderline';
+function getTransparentColor(color, transparency = '') {
+ return `${color}${transparency}`;
+}
+
const picker = {
backgroundColor: themeColors.transparent,
color: themeColors.text,
@@ -3349,6 +3353,25 @@ const styles = {
textAlign: 'center',
},
+ linkPreviewWrapper: {
+ marginTop: 16,
+ borderLeftWidth: 4,
+ borderLeftColor: getTransparentColor(themeColors.inverse, 33),
+ paddingLeft: 12,
+ },
+
+ linkPreviewImage: {
+ flex: 1,
+ resizeMode: 'contain',
+ borderRadius: 8,
+ marginTop: 8,
+ },
+
+ linkPreviewLogoImage: {
+ height: 16,
+ width: 16,
+ },
+
validateCodeMessage: {
width: variables.modalContentMaxWidth,
textAlign: 'center',
diff --git a/tests/unit/CalendarPickerTest.js b/tests/unit/CalendarPickerTest.js
index 206783447fa5..8313f8d709d5 100644
--- a/tests/unit/CalendarPickerTest.js
+++ b/tests/unit/CalendarPickerTest.js
@@ -12,7 +12,7 @@ jest.mock('@react-navigation/native', () => ({
}));
// eslint-disable-next-line arrow-body-style
-const MockedCalendarPicker = (props) => {
+function MockedCalendarPicker(props) {
return (
{
preferredLocale={CONST.LOCALES.EN}
/>
);
-};
+}
describe('CalendarPicker', () => {
test('renders calendar component', () => {