[IMPROVEMENT] Support badge number on header buttons

app/constants/colors.js

@@ -12,6 +12,7 @@ export const SWITCH_TRACK_COLOR = {
 
 const mentions = {
 	unreadBackground: '#6C727A',
+	tunreadBackground: '#1d74f5',
 	mentionMeColor: '#DB0C27',
 	mentionMeBackground: '#F5455C',
 	mentionGroupColor: '#E26D0E',

app/containers/Header/index.js

@@ -5,6 +5,7 @@ import { View, StyleSheet } from 'react-native';
 import { themes } from '../../constants/colors';
 import { themedHeader } from '../../utils/navigation';
 import { isIOS, isTablet } from '../../utils/deviceInfo';
+import { withTheme } from '../../theme';
 
 // Get from https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderSegment.tsx#L69
 export const headerHeight = isIOS ? 44 : 56;
@@ -53,4 +54,4 @@ Header.propTypes = {
 	headerRight: PropTypes.element
 };
 
-export default Header;
+export default withTheme(Header);

app/containers/HeaderButton/Common.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { isIOS } from '../../utils/deviceInfo';
+import I18n from '../../i18n';
+import Container from './HeaderButtonContainer';
+import Item from './HeaderButtonItem';
+
+// Left
+export const Drawer = React.memo(({ navigation, testID, ...props }) => (
+	<Container left>
+		<Item iconName='hamburguer' onPress={() => navigation.toggleDrawer()} testID={testID} {...props} />
+	</Container>
+));
+
+export const CloseModal = React.memo(({
+	navigation, testID, onPress = () => navigation.pop(), ...props
+}) => (
+	<Container left>
+		<Item iconName='close' onPress={onPress} testID={testID} {...props} />
+	</Container>
+));
+
+export const CancelModal = React.memo(({ onPress, testID }) => (
+	<Container left>
+		{isIOS
+			? <Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
+			: <Item iconName='close' onPress={onPress} testID={testID} />
+		}
+	</Container>
+));
+
+// Right
+export const More = React.memo(({ onPress, testID }) => (
+	<Container>
+		<Item iconName='kebab' onPress={onPress} testID={testID} />
+	</Container>
+));
+
+export const Download = React.memo(({ onPress, testID, ...props }) => (
+	<Container>
+		<Item iconName='download' onPress={onPress} testID={testID} {...props} />
+	</Container>
+));
+
+export const Preferences = React.memo(({ onPress, testID, ...props }) => (
+	<Container>
+		<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
+	</Container>
+));
+
+export const Legal = React.memo(({ navigation, testID }) => (
+	<More onPress={() => navigation.navigate('LegalView')} testID={testID} />
+));
+
+Drawer.propTypes = {
+	navigation: PropTypes.object.isRequired,
+	testID: PropTypes.string.isRequired
+};
+CloseModal.propTypes = {
+	navigation: PropTypes.object.isRequired,
+	testID: PropTypes.string.isRequired,
+	onPress: PropTypes.func
+};
+CancelModal.propTypes = {
+	onPress: PropTypes.func.isRequired,
+	testID: PropTypes.string.isRequired
+};
+More.propTypes = {
+	onPress: PropTypes.func.isRequired,
+	testID: PropTypes.string.isRequired
+};
+Download.propTypes = {
+	onPress: PropTypes.func.isRequired,
+	testID: PropTypes.string.isRequired
+};
+Preferences.propTypes = {
+	onPress: PropTypes.func.isRequired,
+	testID: PropTypes.string.isRequired
+};
+Legal.propTypes = {
+	navigation: PropTypes.object.isRequired,
+	testID: PropTypes.string.isRequired
+};

app/containers/HeaderButton/HeaderButtonContainer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	left: {
+		marginLeft: 5
+	},
+	right: {
+		marginRight: 5
+	}
+});
+
+const Container = ({ children, left }) => (
+	<View style={[styles.container, left ? styles.left : styles.right]}>
+		{children}
+	</View>
+);
+
+Container.propTypes = {
+	children: PropTypes.arrayOf(PropTypes.element),
+	left: PropTypes.bool
+};
+
+Container.defaultProps = {
+	left: false
+};
+
+Container.displayName = 'HeaderButton.Container';
+
+export default Container;

app/containers/HeaderButton/HeaderButtonItem.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Text, StyleSheet, Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import Touchable from 'react-native-platform-touchable';
+
+import { CustomIcon } from '../../lib/Icons';
+import { withTheme } from '../../theme';
+import { themes } from '../../constants/colors';
+import sharedStyles from '../../views/Styles';
+
+export const BUTTON_HIT_SLOP = {
+	top: 5, right: 5, bottom: 5, left: 5
+};
+
+const styles = StyleSheet.create({
+	container: {
+		marginHorizontal: 6
+	},
+	title: {
+		...Platform.select({
+			android: {
+				fontSize: 14
+			},
+			default: {
+				fontSize: 17
+			}
+		}),
+		...sharedStyles.textRegular
+	}
+});
+
+const Item = ({
+	title, iconName, onPress, testID, theme, badge
+}) => (
+	<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
+		<>
+			{
+				iconName
+					? <CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
+					: <Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
+			}
+			{badge ? badge() : null}
+		</>
+	</Touchable>
+);
+
+Item.propTypes = {
+	onPress: PropTypes.func.isRequired,
+	title: PropTypes.string,
+	iconName: PropTypes.string,
+	testID: PropTypes.string,
+	theme: PropTypes.string,
+	badge: PropTypes.func
+};
+
+Item.displayName = 'HeaderButton.Item';
+
+export default withTheme(Item);

app/containers/HeaderButton/HeaderButtonItemBadge.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import UnreadBadge from '../../presentation/UnreadBadge';
+
+const styles = StyleSheet.create({
+	badgeContainer: {
+		padding: 2,
+		position: 'absolute',
+		right: -3,
+		top: -3,
+		borderRadius: 10,
+		alignItems: 'center',
+		justifyContent: 'center'
+	}
+});
+
+export const Badge = ({ ...props }) => (
+	<UnreadBadge
+		{...props}
+		style={styles.badgeContainer}
+		small
+	/>
+);
+
+export default Badge;

app/containers/HeaderButton/index.js

@@ -0,0 +1,4 @@
+export { default as Container } from './HeaderButtonContainer';
+export { default as Item } from './HeaderButtonItem';
+export { default as Badge } from './HeaderButtonItemBadge';
+export * from './Common';

app/ee/omnichannel/views/QueueListView.js

@@ -15,7 +15,7 @@ import SafeAreaView from '../../../containers/SafeAreaView';
 import { themes } from '../../../constants/colors';
 import StatusBar from '../../../containers/StatusBar';
 import { goRoom } from '../../../utils/goRoom';
-import { CloseModalButton } from '../../../containers/HeaderButton';
+import * as HeaderButton from '../../../containers/HeaderButton';
 import RocketChat from '../../../lib/rocketchat';
 import { logEvent, events } from '../../../utils/log';
 import { getInquiryQueueSelector } from '../selectors/inquiry';
@@ -34,7 +34,7 @@ class QueueListView extends React.Component {
 			title: I18n.t('Queued_chats')
 		};
 		if (isMasterDetail) {
-			options.headerLeft = () => <CloseModalButton navigation={navigation} testID='directory-view-close' />;
+			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} testID='directory-view-close' />;
 		}
 		return options;
 	}

app/presentation/RoomItem/RoomItem.js

@@ -37,6 +37,7 @@ const RoomItem = ({
 	alert,
 	hideUnreadStatus,
 	unread,
+	tunread,
 	userMentions,
 	groupMentions,
 	roomUpdatedAt,
@@ -112,6 +113,7 @@ const RoomItem = ({
 							/>
 							<UnreadBadge
 								unread={unread}
+								tunread={tunread}
 								userMentions={userMentions}
 								groupMentions={groupMentions}
 								theme={theme}
@@ -136,6 +138,7 @@ const RoomItem = ({
 						/>
 						<UnreadBadge
 							unread={unread}
+							tunread={tunread}
 							userMentions={userMentions}
 							groupMentions={groupMentions}
 							theme={theme}
@@ -174,6 +177,7 @@ RoomItem.propTypes = {
 	alert: PropTypes.bool,
 	hideUnreadStatus: PropTypes.bool,
 	unread: PropTypes.number,
+	tunread: PropTypes.array,
 	userMentions: PropTypes.number,
 	groupMentions: PropTypes.number,
 	roomUpdatedAt: PropTypes.instanceOf(Date),