diff --git a/src/languages/en.js b/src/languages/en.js index ee62e18f63c6..62110ce7014f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -188,9 +188,7 @@ export default { beginningOfChatHistoryPolicyExpenseChatPartTwo: ' and ', beginningOfChatHistoryPolicyExpenseChatPartThree: ' starts here! 🎉 This is the place to chat, request money and settle up.', }, - reportActionsViewMarkerBadge: { - newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`, - }, + newMessageCount: ({count}) => `${count} new message${count > 1 ? 's' : ''}`, reportTypingIndicator: { isTyping: 'is typing...', areTyping: 'are typing...', diff --git a/src/languages/es.js b/src/languages/es.js index 80604a90c16e..145b326ca8c1 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -188,9 +188,7 @@ export default { beginningOfChatHistoryPolicyExpenseChatPartTwo: ' y ', beginningOfChatHistoryPolicyExpenseChatPartThree: ' empieza aquí! :tada: Este es el lugar donde chatear, pedir dinero y pagar.', }, - reportActionsViewMarkerBadge: { - newMsg: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`, - }, + newMessageCount: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`, reportTypingIndicator: { isTyping: 'está escribiendo...', areTyping: 'están escribiendo...', diff --git a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/markerBadgeContainerPropTypes.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/floatingMessageCounterContainerPropTypes.js similarity index 100% rename from src/pages/home/report/MarkerBadge/MarkerBadgeContainer/markerBadgeContainerPropTypes.js rename to src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/floatingMessageCounterContainerPropTypes.js diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js new file mode 100644 index 000000000000..3ef849d61a00 --- /dev/null +++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js @@ -0,0 +1,17 @@ +import React from 'react'; +import {View, Animated} from 'react-native'; +import styles from '../../../../../styles/styles'; +import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes'; + +const FloatingMessageCounterContainer = props => ( + + + {props.children} + + +); + +FloatingMessageCounterContainer.propTypes = floatingMessageCounterContainerPropTypes; +FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer'; + +export default FloatingMessageCounterContainer; diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js new file mode 100644 index 000000000000..c5a9ed5078eb --- /dev/null +++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import {Animated} from 'react-native'; +import styles from '../../../../../styles/styles'; +import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes'; + +const FloatingMessageCounterContainer = props => ( + + {props.children} + +); + +FloatingMessageCounterContainer.propTypes = floatingMessageCounterContainerPropTypes; +FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer'; + +export default FloatingMessageCounterContainer; diff --git a/src/pages/home/report/MarkerBadge/MarkerBadge.js b/src/pages/home/report/FloatingMessageCounter/index.js similarity index 86% rename from src/pages/home/report/MarkerBadge/MarkerBadge.js rename to src/pages/home/report/FloatingMessageCounter/index.js index 6cf4d32b070f..fb9dfba7c362 100644 --- a/src/pages/home/report/MarkerBadge/MarkerBadge.js +++ b/src/pages/home/report/FloatingMessageCounter/index.js @@ -8,7 +8,7 @@ import Icon from '../../../../components/Icon'; import * as Expensicons from '../../../../components/Icon/Expensicons'; import themeColors from '../../../../styles/themes/default'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; -import MarkerBadgeContainer from './MarkerBadgeContainer'; +import FloatingMessageCounterContainer from './FloatingMessageCounterContainer'; const propTypes = { /** Count of new messages to show in the badge */ @@ -36,7 +36,7 @@ const defaultProps = { const MARKER_INACTIVE_TRANSLATE_Y = -30; const MARKER_ACTIVE_TRANSLATE_Y = 10; -class MarkerBadge extends PureComponent { +class FloatingMessageCounter extends PureComponent { constructor(props) { super(props); this.translateY = new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y); @@ -70,8 +70,8 @@ class MarkerBadge extends PureComponent { render() { return ( - - + + {this.props.translate( - 'reportActionsViewMarkerBadge.newMsg', + 'newMessageCount', {count: this.props.count}, )} @@ -114,12 +114,12 @@ class MarkerBadge extends PureComponent { /> - + ); } } -MarkerBadge.propTypes = propTypes; -MarkerBadge.defaultProps = defaultProps; +FloatingMessageCounter.propTypes = propTypes; +FloatingMessageCounter.defaultProps = defaultProps; -export default withLocalize(MarkerBadge); +export default withLocalize(FloatingMessageCounter); diff --git a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.android.js b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.android.js deleted file mode 100644 index f975b698bf99..000000000000 --- a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.android.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import {View, Animated} from 'react-native'; -import styles from '../../../../../styles/styles'; -import propTypes from './markerBadgeContainerPropTypes'; - -const MarkerBadgeContainer = props => ( - - - {props.children} - - -); - -MarkerBadgeContainer.propTypes = propTypes; -MarkerBadgeContainer.displayName = 'MarkerBadgeContainer'; - -export default MarkerBadgeContainer; diff --git a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.js b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.js deleted file mode 100644 index 12b690a5ef14..000000000000 --- a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import {Animated} from 'react-native'; -import styles from '../../../../../styles/styles'; -import propTypes from './markerBadgeContainerPropTypes'; - -const MarkerBadgeContainer = props => ( - - {props.children} - -); - -MarkerBadgeContainer.propTypes = propTypes; -MarkerBadgeContainer.displayName = 'MarkerBadgeContainer'; - -export default MarkerBadgeContainer; diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 641748b5bed4..fe4efdf97c1a 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -31,7 +31,6 @@ import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFo import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu'; import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionContextMenu'; import variables from '../../../styles/variables'; -import MarkerBadge from './MarkerBadge/MarkerBadge'; import Performance from '../../../libs/Performance'; import * as ReportUtils from '../../../libs/reportUtils'; import ONYXKEYS from '../../../ONYXKEYS'; @@ -39,6 +38,7 @@ import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider import participantPropTypes from '../../../components/participantPropTypes'; import EmojiPicker from '../../../components/EmojiPicker'; import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; +import FloatingMessageCounter from './FloatingMessageCounter'; import networkPropTypes from '../../../components/networkPropTypes'; const propTypes = { @@ -117,8 +117,8 @@ class ReportActionsView extends React.Component { this.didLayout = false; this.state = { - isMarkerActive: false, - localUnreadActionCount: this.props.report.unreadActionCount, + isFloatingMessageCounterVisible: false, + messageCounterCount: this.props.report.unreadActionCount, }; this.currentScrollOffset = 0; @@ -126,11 +126,11 @@ class ReportActionsView extends React.Component { this.updateMostRecentIOUReportActionNumber(props.reportActions); this.keyExtractor = this.keyExtractor.bind(this); this.trackScroll = this.trackScroll.bind(this); - this.showMarker = this.showMarker.bind(this); - this.hideMarker = this.hideMarker.bind(this); - this.toggleMarker = this.toggleMarker.bind(this); - this.updateUnreadIndicatorPosition = this.updateUnreadIndicatorPosition.bind(this); - this.updateLocalUnreadActionCount = this.updateLocalUnreadActionCount.bind(this); + this.showFloatingMessageCounter = this.showFloatingMessageCounter.bind(this); + this.hideFloatingMessageCounter = this.hideFloatingMessageCounter.bind(this); + this.toggleFloatingMessageCounter = this.toggleFloatingMessageCounter.bind(this); + this.updateNewMarkerPosition = this.updateNewMarkerPosition.bind(this); + this.updateMessageCounterCount = this.updateMessageCounterCount.bind(this); this.updateNewMarkerAndMarkReadOnce = _.once(this.updateNewMarkerAndMarkRead.bind(this)); } @@ -190,11 +190,11 @@ class ReportActionsView extends React.Component { return true; } - if (nextState.isMarkerActive !== this.state.isMarkerActive) { + if (nextState.isFloatingMessageCounterVisible !== this.state.isFloatingMessageCounterVisible) { return true; } - if (nextState.localUnreadActionCount !== this.state.localUnreadActionCount) { + if (nextState.messageCounterCount !== this.state.messageCounterCount) { return true; } @@ -241,18 +241,18 @@ class ReportActionsView extends React.Component { } if (lodashGet(lastAction, 'actorEmail', '') !== lodashGet(this.props.session, 'email', '')) { - // Only update the unread count when MarkerBadge is visible - // Otherwise marker will be shown on scrolling up from the bottom even if user have read those messages - if (this.state.isMarkerActive) { - this.updateLocalUnreadActionCount(!shouldRecordMaxAction); + // Only update the unread count when the floating message counter is visible + // Otherwise counter will be shown on scrolling up from the bottom even if user have read those messages + if (this.state.isFloatingMessageCounterVisible) { + this.updateMessageCounterCount(!shouldRecordMaxAction); } - // show new MarkerBadge when there is a new message - this.toggleMarker(); + // show new floating message counter when there is a new message + this.toggleFloatingMessageCounter(); } // When the last action changes, record the max action - // This will make the unread indicator go away if you receive comments in the same chat you're looking at + // This will make the NEW marker line go away if you receive comments in the same chat you're looking at if (shouldRecordMaxAction) { Report.updateLastReadActionID(this.props.reportID); } @@ -260,7 +260,7 @@ class ReportActionsView extends React.Component { prevProps.isDrawerOpen !== this.props.isDrawerOpen || prevProps.isSmallScreenWidth !== this.props.isSmallScreenWidth )) { - this.updateUnreadIndicatorPosition(this.props.report.unreadActionCount); + this.updateNewMarkerPosition(this.props.report.unreadActionCount); Report.updateLastReadActionID(this.props.reportID); } } @@ -430,7 +430,7 @@ class ReportActionsView extends React.Component { * Updates NEW marker position * @param {Number} unreadActionCount */ - updateUnreadIndicatorPosition(unreadActionCount) { + updateNewMarkerPosition(unreadActionCount) { // Since we want the New marker to remain in place even if newer messages come in, we set it once on mount. // We determine the last read action by deducting the number of unread actions from the total number. // Then, we add 1 because we want the New marker displayed over the oldest unread sequence. @@ -439,31 +439,31 @@ class ReportActionsView extends React.Component { } /** - * Show/hide the new MarkerBadge when user is scrolling back/forth in the history of messages. + * Show/hide the new floating message counter when user is scrolling back/forth in the history of messages. */ - toggleMarker() { - // Update the unread message count before MarkerBadge is about to show - if (this.currentScrollOffset < -200 && !this.state.isMarkerActive) { - this.updateLocalUnreadActionCount(); - this.showMarker(); + toggleFloatingMessageCounter() { + // Update the message counter count before counter is about to show + if (this.currentScrollOffset < -200 && !this.state.isFloatingMessageCounterVisible) { + this.updateMessageCounterCount(); + this.showFloatingMessageCounter(); } - if (this.currentScrollOffset > -200 && this.state.isMarkerActive) { - this.hideMarker(); + if (this.currentScrollOffset > -200 && this.state.isFloatingMessageCounterVisible) { + this.hideFloatingMessageCounter(); } } /** - * Update the unread messages count to show in the MarkerBadge + * Update the message counter count to show in the floating message counter * @param {Boolean} [shouldResetLocalCount=false] Whether count should increment or reset */ - updateLocalUnreadActionCount(shouldResetLocalCount = false) { + updateMessageCounterCount(shouldResetLocalCount = false) { this.setState((prevState) => { - const localUnreadActionCount = shouldResetLocalCount + const messageCounterCount = shouldResetLocalCount ? this.props.report.unreadActionCount - : prevState.localUnreadActionCount + this.props.report.unreadActionCount; - this.updateUnreadIndicatorPosition(localUnreadActionCount); - return {localUnreadActionCount}; + : prevState.messageCounterCount + this.props.report.unreadActionCount; + this.updateNewMarkerPosition(messageCounterCount); + return {messageCounterCount}; }); } @@ -471,7 +471,7 @@ class ReportActionsView extends React.Component { * Update NEW marker and mark report as read */ updateNewMarkerAndMarkRead() { - this.updateUnreadIndicatorPosition(this.props.report.unreadActionCount); + this.updateNewMarkerPosition(this.props.report.unreadActionCount); // Only mark as read if the report is open if (!this.props.isDrawerOpen) { @@ -480,19 +480,19 @@ class ReportActionsView extends React.Component { } /** - * Show the new MarkerBadge + * Show the new floating message counter */ - showMarker() { - this.setState({isMarkerActive: true}); + showFloatingMessageCounter() { + this.setState({isFloatingMessageCounterVisible: true}); } /** - * Hide the new MarkerBadge + * Hide the new floating message counter */ - hideMarker() { + hideFloatingMessageCounter() { this.setState({ - isMarkerActive: false, - localUnreadActionCount: 0, + isFloatingMessageCounterVisible: false, + messageCounterCount: 0, }); } @@ -503,7 +503,7 @@ class ReportActionsView extends React.Component { */ trackScroll({nativeEvent}) { this.currentScrollOffset = -nativeEvent.contentOffset.y; - this.toggleMarker(); + this.toggleFloatingMessageCounter(); } /** @@ -589,11 +589,11 @@ class ReportActionsView extends React.Component { return ( <> - ({ + floatingMessageCounterTransformation: translateY => ({ transform: [ {translateY}, ],