Merge pull request #16818 from alexxxwork/issue-16683

Fixes multiply issues with && in JSX

src/components/AttachmentModal.js

@@ -276,7 +276,7 @@ class AttachmentModal extends PureComponent {
                                 source={this.props.source}
                                 onToggleKeyboard={this.updateConfirmButtonVisibility}
                             />
-                        ) : this.state.source && this.state.shouldLoadAttachment && (
+                        ) : Boolean(this.state.source) && this.state.shouldLoadAttachment && (
                             <AttachmentView
                                 source={source}
                                 isAuthTokenRequired={this.props.isAuthTokenRequired}
@@ -286,7 +286,7 @@ class AttachmentModal extends PureComponent {
                         )}
                     </View>
                     {/* If we have an onConfirm method show a confirmation button */}
-                    {this.props.onConfirm && (
+                    {Boolean(this.props.onConfirm) && (
                         <SafeAreaConsumer>
                             {({safeAreaPaddingBottomStyle}) => (
                                 <Animated.View style={[StyleUtils.fade(this.state.confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>

src/components/ImageView/index.native.js

@@ -175,7 +175,7 @@ class ImageView extends PureComponent {
                     });
                 }}
             >
-                {this.state.containerHeight && (
+                {Boolean(this.state.containerHeight) && (
                     <ImageZoom
                         ref={el => this.zoom = el}
                         onClick={() => this.props.onPress()}

src/components/MenuItem.js

@@ -92,7 +92,7 @@ const MenuItem = (props) => {
             {({hovered, pressed}) => (
                 <>
                     <View style={[styles.flexRow, styles.pointerEventsAuto, styles.flex1, props.disabled && styles.cursorDisabled]}>
-                        {props.icon && (
+                        {Boolean(props.icon) && (
                             <View
                                 style={[
                                     styles.popoverMenuIcon,
@@ -158,7 +158,7 @@ const MenuItem = (props) => {
                         </View>
                     </View>
                     <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
-                        {props.badgeText && (
+                        {Boolean(props.badgeText) && (
                         <Badge
                             text={props.badgeText}
                             badgeStyles={[styles.alignSelfCenter, (props.brickRoadIndicator ? styles.mr2 : undefined),

src/components/OptionRow.js

@@ -271,7 +271,7 @@ class OptionRow extends Component {
                                     {this.props.showSelectedState && <SelectCircle isChecked={this.props.isSelected} />}
                                 </View>
                             </View>
-                            {this.props.option.customIcon && (
+                            {Boolean(this.props.option.customIcon) && (
                                 <View
                                     style={[styles.flexRow, styles.alignItemsCenter]}
                                     accessible={false}

src/components/Picker/BasePicker.js

@@ -215,15 +215,15 @@ class BasePicker extends PureComponent {
         if (this.props.isDisabled) {
             return (
                 <View>
-                    {this.props.label && (
+                    {Boolean(this.props.label) && (
                         <Text style={[styles.textLabelSupporting, styles.mb1]} numberOfLines={1}>
                             {this.props.label}
                         </Text>
                     )}
                     <Text numberOfLines={1}>
                         {this.props.value}
                     </Text>
-                    {this.props.hintText
+                    {Boolean(this.props.hintText)
                     && (
                         <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
                             {this.props.hintText}
@@ -289,7 +289,7 @@ class BasePicker extends PureComponent {
                     />
                 </View>
                 <FormHelpMessage message={this.props.errorText} />
-                {this.props.hintText
+                {Boolean(this.props.hintText)
                     && (
                         <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
                             {this.props.hintText}

src/components/RadioButtonWithLabel.js

@@ -67,12 +67,12 @@ const RadioButtonWithLabel = (props) => {
                         styles.alignItemsCenter,
                     ]}
                 >
-                    {props.label && (
+                    {Boolean(props.label) && (
                         <Text style={[styles.ml1]}>
                             {props.label}
                         </Text>
                     )}
-                    {LabelComponent && (<LabelComponent />)}
+                    {Boolean(LabelComponent) && (<LabelComponent />)}
                 </TouchableOpacity>
             </View>
             <FormHelpMessage message={props.errorText} />

src/components/ReportActionItem/IOUPreview.js

@@ -101,6 +101,11 @@ const propTypes = {
     /** Pending action, if any */
     pendingAction: PropTypes.oneOf(_.values(CONST.RED_BRICK_ROAD_PENDING_ACTION)),
 
+    /** Whether or not an IOU report contains money requests in a different currency
+     * that are either created or cancelled offline, and thus haven't been converted to the report's currency yet
+    */
+    shouldShowPendingConversionMessage: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -120,6 +125,7 @@ const defaultProps = {
     session: {
         email: null,
     },
+    shouldShowPendingConversionMessage: false,
 };
 
 const IOUPreview = (props) => {

src/components/ScreenWrapper/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
     /** Array of additional styles to add */
@@ -31,6 +32,8 @@ const propTypes = {
 
     /** Whether to dismiss keyboard before leaving a screen */
     shouldDismissKeyboardBeforeClose: PropTypes.bool,
+
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {

src/components/Section.js

@@ -46,8 +46,8 @@ const Section = (props) => {
                         <Text style={[styles.textHeadline]}>{props.title}</Text>
                     </View>
                     <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd]}>
-                        {props.icon && <Icon src={props.icon} height={68} width={68} />}
-                        {IconComponent && <IconComponent />}
+                        {Boolean(props.icon) && <Icon src={props.icon} height={68} width={68} />}
+                        {Boolean(IconComponent) && <IconComponent />}
                     </View>
                 </View>
 
@@ -56,7 +56,7 @@ const Section = (props) => {
                 </View>
 
                 <View style={[styles.w100]}>
-                    {props.menuItems && <MenuItemList menuItems={props.menuItems} />}
+                    {Boolean(props.menuItems) && <MenuItemList menuItems={props.menuItems} />}
                 </View>
             </View>
 

src/components/TextInput/BaseTextInput.js

@@ -316,7 +316,7 @@ class BaseTextInput extends Component {
                                         dataSet={{submitOnEnter: this.props.multiline && this.props.submitOnEnter}}
 
                                     />
-                                    {this.props.secureTextEntry && (
+                                    {Boolean(this.props.secureTextEntry) && (
                                         <Checkbox
                                             style={styles.textInputIconContainer}
                                             onPress={this.togglePasswordVisibility}
@@ -328,7 +328,7 @@ class BaseTextInput extends Component {
                                             />
                                         </Checkbox>
                                     )}
-                                    {!this.props.secureTextEntry && this.props.icon && (
+                                    {!this.props.secureTextEntry && Boolean(this.props.icon) && (
                                         <View style={[styles.textInputIconContainer, styles.cursorPointer]}>
                                             <Icon
                                                 src={this.props.icon}

src/components/TextInput/baseTextInputPropTypes.js

@@ -77,6 +77,9 @@ const propTypes = {
     /** Indicate whether pressing Enter on multiline input is allowed to submit the form. */
     submitOnEnter: PropTypes.bool,
 
+    /** Indicate whether input is multiline */
+    multiline: PropTypes.bool,
+
     /** Set the default value to the input if there is a valid saved value */
     shouldUseDefaultValue: PropTypes.bool,
 };
@@ -113,6 +116,7 @@ const defaultProps = {
     submitOnEnter: false,
     icon: null,
     shouldUseDefaultValue: false,
+    multiline: false,
 };
 
 export {propTypes, defaultProps};

src/components/ValidateCode/ExpiredValidateCodeModal.js

@@ -92,15 +92,15 @@ class ExpiredValidateCodeModal extends PureComponent {
                                     </>
                                 )}
                         </Text>
-                        {this.shouldShowRequestCodeLink() && codeRequestedErrors
+                        {this.shouldShowRequestCodeLink() && Boolean(codeRequestedErrors)
                             && (
                                 <Text style={[styles.textDanger, styles.validateCodeMessage]}>
                                     <br />
                                     <br />
                                     {codeRequestedErrors}
                                 </Text>
                             )}
-                        {this.shouldShowRequestCodeLink() && codeRequestedMessage
+                        {this.shouldShowRequestCodeLink() && Boolean(codeRequestedMessage)
                             && (
                                 <Text style={styles.validateCodeMessage}>
                                     <br />

src/pages/DetailsPage.js

@@ -149,7 +149,7 @@ class DetailsPage extends React.PureComponent {
                                             </PressableWithoutFocus>
                                         )}
                                     </AttachmentModal>
-                                    {details.displayName && (
+                                    {Boolean(details.displayName) && (
                                         <Text style={[styles.textHeadline, styles.mb6, styles.pre]} numberOfLines={1}>
                                             {isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
                                         </Text>

src/pages/EnablePayments/TermsPage/LongTermsForm.js

@@ -65,7 +65,7 @@ const getLongTermsSections = () => _.map(termsData, (section, index) => (
             <View style={[styles.flex4]}>
                 <Text>{section.title}</Text>
                 {
-                    section.subTitle
+                    Boolean(section.subTitle)
                     && (
                         <Text style={[styles.textMicroSupporting, styles.mt1]}>
                             {section.subTitle}
@@ -78,7 +78,7 @@ const getLongTermsSections = () => _.map(termsData, (section, index) => (
                     {section.rightText}
                 </Text>
                 {
-                    section.subRightText
+                    Boolean(section.subRightText)
                     && (
                         <Text style={[styles.textMicroSupporting, styles.mt1, styles.textAlignRight]}>
                             {section.subRightText}

src/pages/ReimbursementAccount/ACHContractStep.js

@@ -218,7 +218,7 @@ class ACHContractStep extends React.Component {
                                 defaultValue={this.props.getDefaultStateForField('hasOtherBeneficialOwners', false)}
                                 shouldSaveDraft
                             />
-                            {inputValues.hasOtherBeneficialOwners && (
+                            {Boolean(inputValues.hasOtherBeneficialOwners) && (
                                 <View style={[styles.mb2]}>
                                     {_.map(this.state.beneficialOwners, (ownerKey, index) => (
                                         <View key={index} style={[styles.p5, styles.border, styles.mb2]}>

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -112,7 +112,7 @@ const BankAccountStep = (props) => {
                         <View style={[styles.mv3]}>
                             <Text>{props.translate('bankAccount.toGetStarted')}</Text>
                         </View>
-                        {plaidDesktopMessage && (
+                        {Boolean(plaidDesktopMessage) && (
                             <View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
                                 <TextLink href={bankAccountRoute}>
                                     {props.translate(plaidDesktopMessage)}
@@ -130,7 +130,7 @@ const BankAccountStep = (props) => {
                             success
                             large
                         />
-                        {props.error && (
+                        {Boolean(props.error) && (
                             <Text style={[styles.formError, styles.mh5]}>
                                 {props.error}
                             </Text>

src/pages/ReimbursementAccount/EnableStep.js

@@ -107,7 +107,7 @@ const EnableStep = (props) => {
                         wrapperStyle={[styles.cardMenuItem, styles.mv3]}
                     />
                 </Section>
-                {props.user.isCheckingDomain && (
+                {Boolean(props.user.isCheckingDomain) && (
                     <Text style={[styles.formError, styles.mh5]}>
                         {props.translate('workspace.card.checkingDomain')}
                     </Text>

src/pages/ReportSettingsPage.js

@@ -216,7 +216,7 @@ class ReportSettingsPage extends Component {
                                 </OfflineWithFeedback>
                             </View>
                         )}
-                        {linkedWorkspace && (
+                        {Boolean(linkedWorkspace) && (
                             <View style={[styles.mt4]}>
                                 <Text style={[styles.textLabelSupporting, styles.lh16, styles.mb1]} numberOfLines={1}>
                                     {this.props.translate('workspace.common.workspace')}
@@ -226,7 +226,7 @@ class ReportSettingsPage extends Component {
                                 </Text>
                             </View>
                         )}
-                        {this.props.report.visibility && (
+                        {Boolean(this.props.report.visibility) && (
                             <View style={[styles.mt4]}>
                                 <Text style={[styles.textLabelSupporting, styles.lh16, styles.mb1]} numberOfLines={1}>
                                     {this.props.translate('newRoomPage.visibility')}

src/pages/home/ReportScreen.js

@@ -281,7 +281,7 @@ class ReportScreen extends React.Component {
                                         policies={this.props.policies}
                                     />
                                 </OfflineWithFeedback>
-                                {this.props.accountManagerReportID && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
+                                {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
                                     <Banner
                                         containerStyles={[styles.mh4, styles.mt4, styles.p4, styles.bgDark]}
                                         textStyles={[styles.colorReversed]}

src/pages/home/report/ReportActionCompose.js

@@ -92,6 +92,9 @@ const propTypes = {
     /** Is composer screen focused */
     isFocused: PropTypes.bool.isRequired,
 
+    /** Is composer full size */
+    isComposerFullSize: PropTypes.bool,
+
     /** Whether user interactions should be disabled */
     disabled: PropTypes.bool,
 
@@ -127,6 +130,7 @@ const defaultProps = {
     personalDetails: {},
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
     frequentlyUsedEmojis: [],
+    isComposerFullSize: false,
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
@@ -180,6 +184,7 @@ class ReportActionCompose extends React.Component {
             textInputShouldClear: false,
             isCommentEmpty: props.comment.length === 0,
             isMenuVisible: false,
+            isDraggingOver: false,
             selection: {
                 start: props.comment.length,
                 end: props.comment.length,

src/pages/home/report/ReportActionItemFragment.js

@@ -129,7 +129,7 @@ const ReportActionItemFragment = (props) => {
                     style={[EmojiUtils.containsOnlyEmojis(text) ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}
                 >
                     {StyleUtils.convertToLTR(Str.htmlDecode(text))}
-                    {props.fragment.isEdited && (
+                    {Boolean(props.fragment.isEdited) && (
                     <Text
                         fontSize={variables.fontSizeSmall}
                         color={themeColors.textSupporting}

src/pages/home/report/reportActionFragmentPropTypes.js

@@ -1,28 +1,32 @@
 import PropTypes from 'prop-types';
 
 export default PropTypes.shape({
-    // The type of the action item fragment. Used to render a corresponding component
+    /** The type of the action item fragment. Used to render a corresponding component */
     type: PropTypes.string.isRequired,
 
-    // The text content of the fragment.
+    /** The text content of the fragment. */
     text: PropTypes.string.isRequired,
 
-    // Used to apply additional styling. Style refers to a predetermined constant and not a class name. e.g. 'normal'
-    // or 'strong'
+    /** Used to apply additional styling. Style refers to a predetermined constant and not a class name. e.g. 'normal'
+     * or 'strong'
+    */
     style: PropTypes.string,
 
-    // ID of a report
+    /** ID of a report */
     reportID: PropTypes.string,
 
-    // ID of a policy
+    /** ID of a policy */
     policyID: PropTypes.string,
 
-    // The target of a link fragment e.g. '_blank'
+    /** The target of a link fragment e.g. '_blank' */
     target: PropTypes.string,
 
-    // The destination of a link fragment e.g. 'https://www.expensify.com'
+    /** The destination of a link fragment e.g. 'https://www.expensify.com' */
     href: PropTypes.string,
 
-    // An additional avatar url - not the main avatar url but used within a message.
+    /** An additional avatar url - not the main avatar url but used within a message. */
     iconUrl: PropTypes.string,
+
+    /** Fragment edited flag */
+    isEdited: PropTypes.bool,
 });

src/pages/settings/InitialSettingsPage.js

@@ -300,7 +300,7 @@ class InitialSettingsPage extends React.Component {
                                             </Text>
                                         </Tooltip>
                                     </Pressable>
-                                    {this.props.currentUserPersonalDetails.displayName && (
+                                    {Boolean(this.props.currentUserPersonalDetails.displayName) && (
                                         <Text
                                             style={[styles.textLabelSupporting, styles.mt1]}
                                             numberOfLines={1}

src/pages/settings/userPropTypes.js

@@ -7,6 +7,9 @@ export default PropTypes.shape({
     /** Whether or not the user is on a public domain email account or not */
     isFromPublicDomain: PropTypes.bool,
 
+    /** Whever Expensify Card approval flow is ongoing - checking loginList for private domains */
+    isCheckingDomain: PropTypes.bool,
+
     /** Whether the form is being submitted */
     loading: PropTypes.bool,
 });

src/pages/signin/PasswordForm.js

@@ -215,7 +215,7 @@ class PasswordForm extends React.Component {
                     </View>
                 )}
 
-                {this.props.account && !_.isEmpty(this.props.account.errors) && (
+                {Boolean(this.props.account) && !_.isEmpty(this.props.account.errors) && (
                     <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(this.props.account)} />
                 )}
                 <View>