-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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.
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
Added Balance badge to the Settings page #4220
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import React from 'react'; | ||
import {Pressable, View} from 'react-native'; | ||
import PropTypes from 'prop-types'; | ||
import styles, {getBadgeColorStyle} from '../styles/styles'; | ||
import Text from './Text'; | ||
|
||
const propTypes = { | ||
/** Is success type */ | ||
success: PropTypes.bool, | ||
|
||
/** Is success type */ | ||
error: PropTypes.bool, | ||
|
||
/** Whether badge is clickable */ | ||
pressable: PropTypes.bool, | ||
|
||
/** Text to display in the Badge */ | ||
text: PropTypes.string.isRequired, | ||
|
||
/** Styles for Badge */ | ||
badgeStyles: PropTypes.arrayOf(PropTypes.object), | ||
|
||
/** Callback to be called on onPress */ | ||
onPress: PropTypes.func, | ||
}; | ||
|
||
const defaultProps = { | ||
success: false, | ||
error: false, | ||
pressable: false, | ||
badgeStyles: [], | ||
onPress: undefined, | ||
}; | ||
|
||
const Badge = (props) => { | ||
const textStyles = props.success || props.error ? styles.textWhite : undefined; | ||
const Wrapper = props.pressable ? Pressable : View; | ||
const wrapperStyles = ({pressed}) => ([ | ||
styles.badge, | ||
styles.ml2, | ||
getBadgeColorStyle(props.success, props.error, pressed), | ||
...props.badgeStyles, | ||
]); | ||
|
||
return ( | ||
<Wrapper | ||
style={props.pressable ? wrapperStyles : wrapperStyles(false)} | ||
onPress={props.onPress} | ||
> | ||
<Text | ||
style={[styles.badgeText, textStyles]} | ||
numberOfLines={1} | ||
> | ||
{props.text} | ||
</Text> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
Badge.displayName = 'Badge'; | ||
Badge.propTypes = propTypes; | ||
Badge.defaultProps = defaultProps; | ||
export default Badge; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,8 +8,12 @@ import styles, {getButtonBackgroundColorStyle, getIconFillColor} from '../styles | |
import Icon from './Icon'; | ||
import {ArrowRight} from './Icon/Expensicons'; | ||
import getButtonState from '../libs/getButtonState'; | ||
import Badge from './Badge'; | ||
|
||
const propTypes = { | ||
// Text to be shown as badge near the right end. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This comment should use block comments per style guide |
||
badgeText: PropTypes.string, | ||
|
||
/** Any additional styles to apply */ | ||
// eslint-disable-next-line react/forbid-prop-types | ||
wrapperStyle: PropTypes.object, | ||
|
@@ -58,6 +62,7 @@ const propTypes = { | |
}; | ||
|
||
const defaultProps = { | ||
badgeText: undefined, | ||
shouldShowRightIcon: false, | ||
wrapperStyle: {}, | ||
success: false, | ||
|
@@ -74,6 +79,7 @@ const defaultProps = { | |
}; | ||
|
||
const MenuItem = ({ | ||
badgeText, | ||
onPress, | ||
icon, | ||
iconRight, | ||
|
@@ -141,6 +147,7 @@ const MenuItem = ({ | |
</View> | ||
</View> | ||
<View style={[styles.flexRow, styles.menuItemTextContainer]}> | ||
{badgeText && <Badge text={badgeText} badgeStyles={[styles.alignSelfCenter]} />} | ||
{subtitle && ( | ||
<View style={[styles.justifyContentCenter, styles.mr1]}> | ||
<Text | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -67,6 +67,12 @@ const propTypes = { | |
role: PropTypes.string, | ||
})), | ||
|
||
/** The user's wallet account */ | ||
userWallet: PropTypes.shape({ | ||
/** The user's current wallet balance */ | ||
availableBalance: PropTypes.number, | ||
}), | ||
|
||
...withLocalizePropTypes, | ||
}; | ||
|
||
|
@@ -75,6 +81,7 @@ const defaultProps = { | |
network: {}, | ||
session: {}, | ||
policies: {}, | ||
userWallet: {}, | ||
}; | ||
|
||
const defaultMenuItems = [ | ||
|
@@ -113,10 +120,17 @@ const defaultMenuItems = [ | |
const InitialSettingsPage = ({ | ||
myPersonalDetails, | ||
network, | ||
numberFormat, | ||
session, | ||
policies, | ||
translate, | ||
userWallet, | ||
}) => { | ||
const walletBalance = numberFormat( | ||
userWallet.availableBalance, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
{style: 'currency', currency: 'USD'}, | ||
); | ||
|
||
// On the very first sign in or after clearing storage these | ||
// details will not be present on the first render so we'll just | ||
// return nothing for now. | ||
|
@@ -169,6 +183,7 @@ const InitialSettingsPage = ({ | |
</View> | ||
{_.map(menuItems, (item, index) => { | ||
const keyTitle = item.translationKey ? translate(item.translationKey) : item.title; | ||
const isPaymentItem = item.translationKey === 'common.payments'; | ||
return ( | ||
<MenuItem | ||
key={`${keyTitle}_${index}`} | ||
|
@@ -178,6 +193,7 @@ const InitialSettingsPage = ({ | |
iconStyles={item.iconStyles} | ||
iconFill={item.iconFill} | ||
shouldShowRightIcon | ||
badgeText={isPaymentItem ? walletBalance : undefined} | ||
/> | ||
); | ||
})} | ||
|
@@ -206,5 +222,8 @@ export default compose( | |
policies: { | ||
key: ONYXKEYS.COLLECTION.POLICY, | ||
}, | ||
userWallet: { | ||
key: ONYXKEYS.USER_WALLET, | ||
}, | ||
}), | ||
)(InitialSettingsPage); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -366,7 +366,7 @@ const styles = { | |
}, | ||
|
||
badgeText: { | ||
color: themeColors.textReversed, | ||
color: themeColors.text, | ||
fontSize: variables.fontSizeSmall, | ||
lineHeight: 16, | ||
...whiteSpace.noWrap, | ||
|
@@ -2012,17 +2012,21 @@ function getBackgroundColorStyle(backgroundColor) { | |
} | ||
|
||
/** | ||
* Generate a style for the background color of the IOU badge | ||
* Generate a style for the background color of the Badge | ||
* | ||
* @param {Boolean} isOwner | ||
* @param {Boolean} [isPressed] | ||
* @returns {Object} | ||
* @param {*} success | ||
* @param {*} error | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These should be |
||
* @param {boolean} [isPressed=false] | ||
* @return {Object} | ||
*/ | ||
function getBadgeColorStyle(isOwner, isPressed = false) { | ||
if (isOwner) { | ||
function getBadgeColorStyle(success, error, isPressed = false) { | ||
if (success) { | ||
return isPressed ? styles.badgeSuccessPressed : styles.badgeSuccess; | ||
} | ||
return isPressed ? styles.badgeDangerPressed : styles.badgeDanger; | ||
if (error) { | ||
return isPressed ? styles.badgeDangerPressed : styles.badgeDanger; | ||
} | ||
return {}; | ||
} | ||
|
||
/** | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Error type