[FIX] UIKit crash when some app send a list (#2117)

* [FIX] StoryBook * [FIX] UIKit crash when some app send a list * [CHORE] Update snapshot * [CHORE] Remove token & id
RocketChat · May 18, 2020 · 8c5538b · 8c5538b
1 parent 5c99d8a
commit 8c5538b
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 38 deletions.
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -5161,6 +5161,25 @@ exports[`Storyshots UiKitMessage list uikitmessage 1`] = `
       >
         Section
       </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "fontSize": 20,
+              "fontWeight": "300",
+              "marginLeft": 10,
+              "marginTop": 30,
+            },
+            Object {
+              "backgroundColor": "#ffffff",
+              "color": "#0d0e12",
+            },
+            undefined,
+          ]
+        }
+      >
+        Section + Markdown List
+      </Text>
       <Text
         style={
           Array [

diff --git a/app/containers/UIKit/Section.js b/app/containers/UIKit/Section.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
 import { themes } from '../../constants/colors';
-import sharedStyles from '../../views/Styles';
 
 const styles = StyleSheet.create({
 	content: {
@@ -18,11 +17,7 @@ const styles = StyleSheet.create({
 	},
 	text: {
 		flex: 1,
-		padding: 4,
-		fontSize: 16,
-		lineHeight: 22,
-		textAlignVertical: 'center',
-		...sharedStyles.textRegular
+		padding: 4
 	},
 	field: {
 		marginVertical: 6
@@ -54,7 +49,7 @@ export const Section = ({
 			accessory && accessoriesRight.includes(accessory.type) ? styles.row : styles.column
 		]}
 	>
-		{text ? <Text style={[styles.text, { color: themes[theme].bodyText }]}>{parser.text(text)}</Text> : null}
+		{text ? <View style={styles.text}>{parser.text(text)}</View> : null}
 		{fields ? <Fields fields={fields} theme={theme} parser={parser} /> : null}
 		{accessory ? <Accessory element={{ blockId, appId, ...accessory }} parser={parser} /> : null}
 	</View>

diff --git a/app/containers/UIKit/index.js b/app/containers/UIKit/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import React, { useContext } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import {
 	uiKitMessage,
 	UiKitParserMessage,
@@ -13,8 +13,9 @@ import Markdown from '../markdown';
 import Button from '../Button';
 import TextInput from '../TextInput';
 
-import { useBlockContext } from './utils';
+import { useBlockContext, textParser } from './utils';
 import { themes } from '../../constants/colors';
+import sharedStyles from '../../views/Styles';
 
 import { Divider } from './Divider';
 import { Section } from './Section';
@@ -37,6 +38,12 @@ const styles = StyleSheet.create({
 	},
 	button: {
 		marginBottom: 16
+	},
+	text: {
+		fontSize: 16,
+		lineHeight: 22,
+		textAlignVertical: 'center',
+		...sharedStyles.textRegular
 	}
 });
 
@@ -46,7 +53,7 @@ class MessageParser extends UiKitParserMessage {
 	text({ text, type } = { text: '' }, context) {
 		const { theme } = useContext(ThemeContext);
 		if (type !== 'mrkdwn') {
-			return text;
+			return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{text}</Text>;
 		}
 
 		const isContext = context === BLOCK_CONTEXT.CONTEXT;
@@ -70,7 +77,7 @@ class MessageParser extends UiKitParserMessage {
 			<Button
 				key={actionId}
 				type={style}
-				title={this.text(text)}
+				title={textParser([text])}
 				loading={loading}
 				onPress={() => action({ value })}
 				style={styles.button}

diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
@@ -8,7 +8,6 @@ import messagesStatus from '../../app/constants/messagesStatus';
 import MessageSeparator from '../../app/views/RoomView/Separator';
 
 import { themes } from '../../app/constants/colors';
-import MessageContext from '../../app/containers/message/Context';
 
 let _theme = 'light';
 
@@ -42,32 +41,17 @@ const getCustomEmoji = (content) => {
 };
 
 const Message = props => (
-	<MessageContext.Provider
-		value={{
-			user,
-			baseUrl,
-			onPress: () => {},
-			onLongPress: () => {},
-			reactionInit: () => {},
-			onErrorPress: () => {},
-			replyBroadcast: () => {},
-			onReactionPress: () => {},
-			onDiscussionPress: () => {},
-			onReactionLongPress: () => {}
-		}}
-	>
-		<MessageComponent
-			baseUrl={baseUrl}
-			user={user}
-			author={author}
-			ts={date}
-			timeFormat='LT'
-			isHeader
-			getCustomEmoji={getCustomEmoji}
-			theme={_theme}
-			{...props}
-		/>
-	</MessageContext.Provider>
+	<MessageComponent
+		baseUrl={baseUrl}
+		user={user}
+		author={author}
+		ts={date}
+		timeFormat='LT'
+		isHeader
+		getCustomEmoji={getCustomEmoji}
+		theme={_theme}
+		{...props}
+	/>
 );
 
 // eslint-disable-next-line react/prop-types

diff --git a/storybook/stories/UiKitMessage.js b/storybook/stories/UiKitMessage.js
@@ -31,6 +31,17 @@ export default () => (
 				}])
 			}
 
+			<Separator title='Section + Markdown List' />
+			{
+				UiKitMessage([{
+					type: 'section',
+					text: {
+						type: 'mrkdwn',
+						text: '*List*:\n1. Item'
+					}
+				}])
+			}
+
 			<Separator title='Section + Overflow' />
 			{
 				UiKitMessage([

diff --git a/storybook/stories/index.js b/storybook/stories/index.js
@@ -11,6 +11,16 @@ import UiKitModal from './UiKitModal';
 import Markdown from './Markdown';
 // import RoomViewHeader from './RoomViewHeader';
 
+import MessageContext from '../../app/containers/message/Context';
+
+// MessageProvider
+const baseUrl = 'https://open.rocket.chat';
+const user = {
+	id: '',
+	username: 'diego.mello',
+	token: ''
+};
+
 // Change here to see themed storybook
 const theme = 'light';
 
@@ -26,15 +36,37 @@ const reducers = combineReducers({
 });
 const store = createStore(reducers);
 
+const messageDecorator = story => (
+	<MessageContext.Provider
+		value={{
+			user,
+			baseUrl,
+			onPress: () => {},
+			onLongPress: () => {},
+			reactionInit: () => {},
+			onErrorPress: () => {},
+			replyBroadcast: () => {},
+			onReactionPress: () => {},
+			onDiscussionPress: () => {},
+			onReactionLongPress: () => {}
+		}}
+	>
+		{story()}
+	</MessageContext.Provider>
+);
+
 storiesOf('RoomItem', module)
 	.addDecorator(story => <Provider store={store}>{story()}</Provider>)
 	.add('list roomitem', () => <RoomItem theme={theme} />);
 storiesOf('Message', module)
+	.addDecorator(messageDecorator)
 	.add('list message', () => <Message theme={theme} />);
 
 storiesOf('UiKitMessage', module)
+	.addDecorator(messageDecorator)
 	.add('list uikitmessage', () => <UiKitMessage theme={theme} />);
 storiesOf('UiKitModal', module)
+	.addDecorator(messageDecorator)
 	.add('list UiKitModal', () => <UiKitModal theme={theme} />);
 storiesOf('Markdown', module)
 	.add('list Markdown', () => <Markdown theme={theme} />);