Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add IOU badge to report row and header #2095

Merged
merged 6 commits into from
Mar 29, 2021
Merged

Add IOU badge to report row and header #2095

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
12ece61
add IOU badge
marcaaron Mar 26, 2021
3f2934a
only use 1 line
marcaaron Mar 26, 2021
e27326a
fix up styles
marcaaron Mar 26, 2021
2b59b24
add alignItemsCenter
marcaaron Mar 26, 2021
631fac6
fix conflict
marcaaron Mar 26, 2021
9faa2ec
fix badge styles
marcaaron Mar 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/components/IOUBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react';
import PropTypes from 'prop-types';
import {Text, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import Num from 'expensify-common/lib/Num';
import ONYXKEYS from '../ONYXKEYS';
import styles from '../styles/styles';

const propTypes = {
// IOU Report data object
iouReport: PropTypes.shape({
// The total amount in cents
total: PropTypes.number,
}),
};

const defaultProps = {
iouReport: {
total: 0,
},
};

const IOUBadge = props => (
<View
style={[styles.badge, styles.badgeSuccess, styles.ml2]}
>
<Text
style={styles.badgeText}
numberOfLines={1}
>
{`$${Num.number_format(props.iouReport.total / 100, 2)}`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB, but this looks like something we'll be reusing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Specifically, the total > dollar format

</Text>
</View>
);

IOUBadge.displayName = 'IOUBadge';
IOUBadge.propTypes = propTypes;
IOUBadge.defaultProps = defaultProps;
export default withOnyx({
iouReport: {
key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT_IOUS}${iouReportID}`,
},
})(IOUBadge);
31 changes: 0 additions & 31 deletions src/components/PillWithCancelButton.js
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions src/libs/OptionsListUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ function createOption(personalDetailList, report, draftComments, activeReportID,
&& draftComments
&& lodashGet(draftComments, `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${report.reportID}`, '').length > 0;

const hasOutstandingIOU = lodashGet(report, 'hasOutstandingIOU', false);
const lastActorDetails = report ? _.find(personalDetailList, {login: report.lastActorEmail}) : null;
const lastMessageText = report
? (hasMultipleParticipants && lastActorDetails
Expand All @@ -111,6 +112,8 @@ function createOption(personalDetailList, report, draftComments, activeReportID,
keyForList: report ? String(report.reportID) : personalDetail.login,
searchText: getSearchText(report, personalDetailList),
isPinned: lodashGet(report, 'isPinned', false),
hasOutstandingIOU,
iouReportID: lodashGet(report, 'iouReportID'),
};
}

Expand Down
8 changes: 6 additions & 2 deletions src/pages/home/HeaderView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {getReportParticipantsTitle} from '../../libs/reportUtils';
import OptionRowTitle from './sidebar/OptionRowTitle';
import {getPersonalDetailsForLogins} from '../../libs/OptionsListUtils';
import {participantPropTypes} from './sidebar/optionPropTypes';
import IOUBadge from '../../components/IOUBadge';

const propTypes = {
// Toggles the navigationMenu open and closed
Expand Down Expand Up @@ -90,12 +91,15 @@ const HeaderView = (props) => {
<OptionRowTitle
option={reportOption}
tooltipEnabled
numberOfLines={2}
numberOfLines={1}
style={[styles.headerText]}
/>
</View>
</Pressable>
<View style={[styles.reportOptions, styles.flexRow]}>
<View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
{props.report.hasOutstandingIOU && (
<IOUBadge iouReportID={props.report.iouReportID} />
)}
<Pressable
onPress={() => togglePinnedState(props.report)}
style={[styles.touchableButtonImage, styles.mr0]}
Expand Down
11 changes: 10 additions & 1 deletion src/pages/home/sidebar/OptionRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import MultipleAvatars from '../../../components/MultipleAvatars';
import themeColors from '../../../styles/themes/default';
import Hoverable from '../../../components/Hoverable';
import OptionRowTitle from './OptionRowTitle';
import IOUBadge from '../../../components/IOUBadge';

const propTypes = {
// Style for hovered state
Expand Down Expand Up @@ -116,6 +117,7 @@ const OptionRow = ({
tooltipEnabled={showTitleTooltip}
numberOfLines={1}
style={[styles.optionDisplayName, textUnreadStyle]}
reportID={option.reportID}
/>

{option.alternateText ? (
Expand All @@ -137,12 +139,15 @@ const OptionRow = ({
</View>
</View>
{!hideAdditionalOptionStates && (
<View style={[styles.flexRow, styles.pr5]}>
<View style={[styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
{option.hasDraftComment && (
<View style={styles.ml2}>
<Icon src={Pencil} />
</View>
)}
{option.hasOutstandingIOU && (
<IOUBadge iouReportID={option.iouReportID} />
)}
{option.isPinned && (
<View style={styles.ml2}>
<Icon src={PinCircle} />
Expand Down Expand Up @@ -186,6 +191,10 @@ export default memo(OptionRow, (prevProps, nextProps) => {
return false;
}

if (prevProps.option.hasOutstandingIOU !== nextProps.option.hasOutstandingIOU) {
return false;
}

if (!_.isEqual(prevProps.option.icons, nextProps.option.icons)) {
return false;
}
Expand Down
27 changes: 10 additions & 17 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,34 +225,27 @@ const styles = {
},
},

pill: {
badge: {
backgroundColor: themeColors.badgeDefaultBG,
borderRadius: 14,
backgroundColor: themeColors.pillBG,
height: variables.componentSizeSmall,
height: 26,
flexDirection: 'row',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 7,
paddingRight: 7,
paddingHorizontal: 8,
alignItems: 'center',
},

pillText: {
color: themeColors.text,
weight: '400',
badgeSuccess: {
backgroundColor: themeColors.badgeSuccessBG,
},

badgeText: {
color: themeColors.textReversed,
fontSize: variables.fontSizeSmall,
lineHeight: 16,
marginRight: 4,
userSelect: 'none',
maxWidth: 144,
...whiteSpace.noWrap,
},

pillCancelIcon: {
width: 12,
height: 12,
},

headerText: {
color: themeColors.heading,
fontFamily: fontFamily.GTA_BOLD,
Expand Down
3 changes: 2 additions & 1 deletion src/styles/themes/default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ export default {
sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
modalBackdrop: colors.gray3,
modalBackground: colors.gray2,
pillBG: colors.gray2,
badgeDefaultBG: colors.gray2,
badgeSuccessBG: colors.green,
buttonDisabledBG: colors.gray2,
buttonHoveredBG: colors.gray1,
spinner: colors.gray4,
Expand Down