diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 268351699567..da2d5d0f6897 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -56,7 +56,6 @@ const defaultProps = { disabled: false, isSelected: false, subtitle: undefined, - subtitleTextStyle: {}, iconType: CONST.ICON_TYPE_ICON, onPress: () => {}, onSecondaryInteraction: undefined, @@ -76,6 +75,7 @@ const defaultProps = { title: '', numberOfLinesTitle: 1, shouldGreyOutWhenDisabled: true, + error: '', shouldRenderAsHTML: false, }; @@ -276,6 +276,11 @@ const MenuItem = React.forwardRef((props, ref) => { {props.description} )} + {props.error && ( + + {props.error} + + )} {Boolean(props.furtherDetails) && ( { {/* Since subtitle can be of type number, we should allow 0 to be shown */} {(props.subtitle || props.subtitle === 0) && ( - {props.subtitle} + {props.subtitle} )} {!_.isEmpty(props.floatRightAvatars) && ( diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index ec91fb292257..04eff0dfcea1 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -167,8 +167,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should shouldShowRightIcon={canEdit} onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} - subtitle={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''} - subtitleTextStyle={styles.textLabelError} + error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''} /> @@ -193,8 +192,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should titleStyle={styles.flex1} onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} - subtitle={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''} - subtitleTextStyle={styles.textLabelError} + error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''} /> @@ -206,8 +204,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should titleStyle={styles.flex1} onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))} brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} - subtitle={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''} - subtitleTextStyle={styles.textLabelError} + error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''} /> {shouldShowCategory && ( diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 6272a7a2ef7d..e1d10ca95971 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -88,9 +88,6 @@ const propTypes = { /** A right-aligned subtitle for this menu option */ subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - /** Style for the subtitle */ - subtitleTextStyle: stylePropTypes, - /** Flag to choose between avatar image or an icon */ iconType: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_ICON, CONST.ICON_TYPE_WORKSPACE]), @@ -145,6 +142,9 @@ const propTypes = { /** Should we grey out the menu item when it is disabled? */ shouldGreyOutWhenDisabled: PropTypes.bool, + /** Error to display below the title */ + error: PropTypes.string, + /** Should render the content in HTML format */ shouldRenderAsHTML: PropTypes.bool, };