[NEW] Basic support to Teams

app/views/ThreadMessagesView/NoDataFound.js → app/containers/BackgroundContainer/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import {
-	ImageBackground, StyleSheet, Text, View
+	ImageBackground, StyleSheet, Text, View, ActivityIndicator
 } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { withTheme } from '../../theme';
-import sharedStyles from '../Styles';
+import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
 
 const styles = StyleSheet.create({
@@ -29,15 +29,17 @@ const styles = StyleSheet.create({
 	}
 });
 
-const EmptyRoom = ({ theme, text }) => (
+const BackgroundContainer = ({ theme, text, loading }) => (
 	<View style={styles.container}>
 		<ImageBackground source={{ uri: `message_empty_${ theme }` }} style={styles.image} />
-		<Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text>
+		{text ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
+		{loading ? <ActivityIndicator style={[styles.text, { color: themes[theme].auxiliaryTintColor }]} /> : null}
 	</View>
 );
 
-EmptyRoom.propTypes = {
+BackgroundContainer.propTypes = {
 	text: PropTypes.string,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	loading: PropTypes.bool
 };
-export default withTheme(EmptyRoom);
+export default withTheme(BackgroundContainer);

app/containers/BackgroundContainer/index.stories.js

@@ -0,0 +1,49 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+
+import BackgroundContainer from '.';
+import { ThemeContext } from '../../theme';
+import { longText } from '../../../storybook/utils';
+
+const stories = storiesOf('BackgroundContainer', module);
+
+stories.add('basic', () => (
+	<BackgroundContainer />
+));
+
+stories.add('loading', () => (
+	<BackgroundContainer loading />
+));
+
+stories.add('text', () => (
+	<BackgroundContainer text='Text here' />
+));
+
+stories.add('long text', () => (
+	<BackgroundContainer text={longText} />
+));
+
+const ThemeStory = ({ theme, ...props }) => (
+	<ThemeContext.Provider
+		value={{ theme }}
+	>
+		<BackgroundContainer {...props} />
+	</ThemeContext.Provider>
+);
+
+stories.add('dark theme - loading', () => (
+	<ThemeStory theme='dark' loading />
+));
+
+stories.add('dark theme - text', () => (
+	<ThemeStory theme='dark' text={longText} />
+));
+
+stories.add('black theme - loading', () => (
+	<ThemeStory theme='black' loading />
+));
+
+stories.add('black theme - text', () => (
+	<ThemeStory theme='black' text={longText} />
+));

app/views/RoomView/Header/Header.js → app/containers/RoomHeader/RoomHeader.js

@@ -4,16 +4,21 @@ import {
 	View, Text, StyleSheet, TouchableOpacity
 } from 'react-native';
 
-import I18n from '../../../i18n';
-import sharedStyles from '../../Styles';
-import { themes } from '../../../constants/colors';
-import Markdown from '../../../containers/markdown';
-import RoomTypeIcon from '../../../containers/RoomTypeIcon';
+import I18n from '../../i18n';
+import sharedStyles from '../../views/Styles';
+import { themes } from '../../constants/colors';
+import Markdown from '../markdown';
+import RoomTypeIcon from '../RoomTypeIcon';
+import { withTheme } from '../../theme';
 
 const HIT_SLOP = {
 	top: 5, right: 5, bottom: 5, left: 5
 };
 const TITLE_SIZE = 16;
+const SUBTITLE_SIZE = 12;
+
+const getSubTitleSize = scale => SUBTITLE_SIZE * scale;
+
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
@@ -24,21 +29,22 @@ const styles = StyleSheet.create({
 		flexDirection: 'row'
 	},
 	title: {
-		...sharedStyles.textSemibold,
-		fontSize: TITLE_SIZE
+		flexShrink: 1,
+		...sharedStyles.textSemibold
 	},
 	subtitle: {
-		...sharedStyles.textRegular,
-		fontSize: 12
+		flexShrink: 1,
+		...sharedStyles.textRegular
 	},
 	typingUsers: {
 		...sharedStyles.textSemibold
 	}
 });
 
 const SubTitle = React.memo(({
-	usersTyping, subtitle, renderFunc, theme
+	usersTyping, subtitle, renderFunc, theme, scale
 }) => {
+	const fontSize = getSubTitleSize(scale);
 	// typing
 	if (usersTyping.length) {
 		let usersText;
@@ -48,7 +54,7 @@ const SubTitle = React.memo(({
 			usersText = usersTyping.join(', ');
 		}
 		return (
-			<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+			<Text style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]} numberOfLines={1}>
 				<Text style={styles.typingUsers}>{usersText} </Text>
 				{ usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing') }...
 			</Text>
@@ -66,7 +72,7 @@ const SubTitle = React.memo(({
 			<Markdown
 				preview
 				msg={subtitle}
-				style={[styles.subtitle, { color: themes[theme].auxiliaryText }]}
+				style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]}
 				numberOfLines={1}
 				theme={theme}
 			/>
@@ -80,18 +86,20 @@ SubTitle.propTypes = {
 	usersTyping: PropTypes.array,
 	theme: PropTypes.string,
 	subtitle: PropTypes.string,
-	renderFunc: PropTypes.func
+	renderFunc: PropTypes.func,
+	scale: PropTypes.number
 };
 
 const HeaderTitle = React.memo(({
-	title, tmid, prid, scale, theme
+	title, tmid, prid, scale, theme, testID
 }) => {
+	const titleStyle = { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor };
 	if (!tmid && !prid) {
 		return (
 			<Text
-				style={[styles.title, { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor }]}
+				style={[styles.title, titleStyle]}
 				numberOfLines={1}
-				testID={`room-view-title-${ title }`}
+				testID={testID}
 			>
 				{title}
 			</Text>
@@ -102,10 +110,10 @@ const HeaderTitle = React.memo(({
 		<Markdown
 			preview
 			msg={title}
-			style={[styles.title, { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor }]}
+			style={[styles.title, titleStyle]}
 			numberOfLines={1}
 			theme={theme}
-			testID={`room-view-title-${ title }`}
+			testID={testID}
 		/>
 	);
 });
@@ -115,11 +123,12 @@ HeaderTitle.propTypes = {
 	tmid: PropTypes.string,
 	prid: PropTypes.string,
 	scale: PropTypes.number,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	testID: PropTypes.string
 };
 
 const Header = React.memo(({
-	title, subtitle, parentTitle, type, status, usersTyping, width, height, prid, tmid, connecting, goRoomActionsView, theme, isGroupChat
+	title, subtitle, parentTitle, type, status, usersTyping, width, height, prid, tmid, onPress, theme, isGroupChat, teamMain, testID
 }) => {
 	const portrait = height > width;
 	let scale = 1;
@@ -130,39 +139,43 @@ const Header = React.memo(({
 		}
 	}
 
-	const onPress = () => goRoomActionsView();
-
 	let renderFunc;
 	if (tmid) {
 		renderFunc = () => (
 			<View style={styles.titleContainer}>
-				<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} />
+				<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
 				<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{parentTitle}</Text>
 			</View>
 		);
 	}
 
 	return (
 		<TouchableOpacity
-			testID='room-view-header-actions'
+			testID='room-header'
 			accessibilityLabel={title}
 			onPress={onPress}
 			style={styles.container}
 			disabled={tmid}
 			hitSlop={HIT_SLOP}
 		>
 			<View style={styles.titleContainer}>
-				{tmid ? null : <RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} />}
+				{tmid ? null : <RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />}
 				<HeaderTitle
 					title={title}
 					tmid={tmid}
 					prid={prid}
 					scale={scale}
-					connecting={connecting}
 					theme={theme}
+					testID={testID}
 				/>
 			</View>
-			<SubTitle usersTyping={tmid ? [] : usersTyping} subtitle={subtitle} theme={theme} renderFunc={renderFunc} />
+			<SubTitle
+				usersTyping={tmid ? [] : usersTyping}
+				subtitle={subtitle}
+				theme={theme}
+				renderFunc={renderFunc}
+				scale={scale}
+			/>
 		</TouchableOpacity>
 	);
 });
@@ -175,17 +188,18 @@ Header.propTypes = {
 	height: PropTypes.number.isRequired,
 	prid: PropTypes.string,
 	tmid: PropTypes.string,
+	teamMain: PropTypes.bool,
 	status: PropTypes.string,
 	theme: PropTypes.string,
 	usersTyping: PropTypes.array,
-	connecting: PropTypes.bool,
 	isGroupChat: PropTypes.bool,
 	parentTitle: PropTypes.string,
-	goRoomActionsView: PropTypes.func
+	onPress: PropTypes.func,
+	testID: PropTypes.string
 };
 
 Header.defaultProps = {
 	usersTyping: []
 };
 
-export default Header;
+export default withTheme(Header);

app/containers/RoomHeader/RoomHeader.stories.js

@@ -0,0 +1,94 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types, react/destructuring-assignment */
+import React from 'react';
+import { View, Dimensions } from 'react-native';
+import { storiesOf } from '@storybook/react-native';
+
+import RoomHeaderComponent from './RoomHeader';
+import Header from '../Header';
+import { longText } from '../../../storybook/utils';
+import { ThemeContext } from '../../theme';
+
+const stories = storiesOf('RoomHeader', module);
+
+// TODO: refactor after react-navigation v6
+const HeaderExample = ({ title }) => (
+	<Header
+		headerTitle={() => (
+			<View style={{ flex: 1, paddingHorizontal: 12 }}>
+				{title()}
+			</View>
+		)}
+	/>
+);
+
+const { width, height } = Dimensions.get('window');
+
+const RoomHeader = ({ ...props }) => (
+	<RoomHeaderComponent width={width} height={height} title='title' type='p' testID={props.title} onPress={() => alert('header pressed!')} {...props} />
+);
+
+stories.add('title and subtitle', () => (
+	<>
+		<HeaderExample title={() => <RoomHeader title='title' type='p' />} />
+		<HeaderExample title={() => <RoomHeader title={longText} type='p' />} />
+		<HeaderExample title={() => <RoomHeader subtitle='subtitle' />} />
+		<HeaderExample title={() => <RoomHeader subtitle={longText} />} />
+		<HeaderExample title={() => <RoomHeader title={longText} subtitle={longText} />} />
+	</>
+));
+
+stories.add('icons', () => (
+	<>
+		<HeaderExample title={() => <RoomHeader title='private channel' type='p' />} />
+		<HeaderExample title={() => <RoomHeader title='public channel' type='c' />} />
+		<HeaderExample title={() => <RoomHeader title='discussion' prid='asd' />} />
+		<HeaderExample title={() => <RoomHeader title='omnichannel' type='l' />} />
+		<HeaderExample title={() => <RoomHeader title='private team' type='p' teamMain />} />
+		<HeaderExample title={() => <RoomHeader title='public team' type='c' teamMain />} />
+		<HeaderExample title={() => <RoomHeader title='group dm' type='d' isGroupChat />} />
+		<HeaderExample title={() => <RoomHeader title='online dm' type='d' status='online' />} />
+		<HeaderExample title={() => <RoomHeader title='away dm' type='d' status='away' />} />
+		<HeaderExample title={() => <RoomHeader title='busy dm' type='d' status='busy' />} />
+		<HeaderExample title={() => <RoomHeader title='loading dm' type='d' status='loading' />} />
+		<HeaderExample title={() => <RoomHeader title='offline dm' type='d' />} />
+	</>
+));
+
+stories.add('typing', () => (
+	<>
+		<HeaderExample title={() => <RoomHeader usersTyping={['user 1']} />} />
+		<HeaderExample title={() => <RoomHeader usersTyping={['user 1', 'user 2']} />} />
+		<HeaderExample title={() => <RoomHeader usersTyping={['user 1', 'user 2', 'user 3', 'user 4', 'user 5']} />} />
+	</>
+));
+
+stories.add('landscape', () => (
+	<>
+		<HeaderExample title={() => <RoomHeader width={height} height={width} />} />
+		<HeaderExample title={() => <RoomHeader width={height} height={width} subtitle='subtitle' />} />
+		<HeaderExample title={() => <RoomHeader width={height} height={width} title={longText} subtitle={longText} />} />
+	</>
+));
+
+stories.add('thread', () => (
+	<>
+		<HeaderExample title={() => <RoomHeader tmid='123' parentTitle='parent title' />} />
+		<HeaderExample title={() => <RoomHeader tmid='123' title={'markdown\npreview\n#3\n4\n5'} parentTitle={longText} />} />
+	</>
+));
+
+const ThemeStory = ({ theme }) => (
+	<ThemeContext.Provider
+		value={{ theme }}
+	>
+		<HeaderExample title={() => <RoomHeader subtitle='subtitle' />} />
+	</ThemeContext.Provider>
+);
+
+stories.add('themes', () => (
+	<>
+		<ThemeStory theme='light' />
+		<ThemeStory theme='dark' />
+		<ThemeStory theme='black' />
+	</>
+));