sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FIX] Messages preview issues (#1257)

This commit is contained in:
Djorkaeff Alexandre 2019-10-02 09:41:51 -03:00 committed by Diego Mello
parent cecb05b60b
commit 67fb14fa9d
10 changed files with 3656 additions and 4057 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7546
__tests__/__snapshots__/Storyshots.test.js.snap
View File

File diff suppressed because it is too large Load Diff

2
app/containers/MessageBox/ReplyPreview.js
View File

@ -79,7 +79,7 @@ class ReplyPreview extends Component {
<Text style={styles.username}>{message.u.username}</Text> <Text style={styles.username}>{message.u.username}</Text>
<Text style={styles.time}>{time}</Text> <Text style={styles.time}>{time}</Text>
</View> </View>
<Markdown msg={message.msg} baseUrl={baseUrl} username={username} getCustomEmoji={getCustomEmoji} numberOfLines={1} useMarkdown={useMarkdown} /> <Markdown msg={message.msg} baseUrl={baseUrl} username={username} getCustomEmoji={getCustomEmoji} numberOfLines={1} useMarkdown={useMarkdown} preview />
</View> </View>
<CustomIcon name='cross' color={COLOR_TEXT_DESCRIPTION} size={20} style={styles.close} onPress={this.close} /> <CustomIcon name='cross' color={COLOR_TEXT_DESCRIPTION} size={20} style={styles.close} onPress={this.close} />
</View> </View>

5
app/containers/markdown/AtMention.js
View File

@ -5,7 +5,7 @@ import { Text } from 'react-native';
import styles from './styles'; import styles from './styles';
const AtMention = React.memo(({ const AtMention = React.memo(({
mention, mentions, username, navToRoomInfo mention, mentions, username, navToRoomInfo, style = []
}) => { }) => {
let mentionStyle = styles.mention; let mentionStyle = styles.mention;
if (mention === 'all' || mention === 'here') { if (mention === 'all' || mention === 'here') {
@ -33,7 +33,7 @@ const AtMention = React.memo(({
return ( return (
<Text <Text
style={mentionStyle} style={[mentionStyle, ...style]}
onPress={handlePress} onPress={handlePress}
> >
{`@${ mention }`} {`@${ mention }`}
@ -45,6 +45,7 @@ AtMention.propTypes = {
mention: PropTypes.string, mention: PropTypes.string,
username: PropTypes.string, username: PropTypes.string,
navToRoomInfo: PropTypes.func, navToRoomInfo: PropTypes.func,
style: PropTypes.array,
mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}; };

19
app/containers/markdown/Emoji.js
View File

@ -8,11 +8,11 @@ import CustomEmoji from '../EmojiPicker/CustomEmoji';
import styles from './styles'; import styles from './styles';
const Emoji = React.memo(({ const Emoji = React.memo(({
emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis, style = []
}) => { }) => {
const emojiUnicode = shortnameToUnicode(literal); const emojiUnicode = shortnameToUnicode(literal);
const emoji = getCustomEmoji && getCustomEmoji(emojiName); const emoji = getCustomEmoji && getCustomEmoji(emojiName);
if (emoji) { if (emoji && customEmojis) {
return ( return (
<CustomEmoji <CustomEmoji
baseUrl={baseUrl} baseUrl={baseUrl}
@ -21,7 +21,16 @@ const Emoji = React.memo(({
/> />
); );
} }
return <Text style={isMessageContainsOnlyEmoji ? styles.textBig : styles.text}>{emojiUnicode}</Text>; return (
<Text
style={[
isMessageContainsOnlyEmoji ? styles.textBig : styles.text,
...style
]}
>
{emojiUnicode}
</Text>
);
}); });
Emoji.propTypes = { Emoji.propTypes = {
@ -29,7 +38,9 @@ Emoji.propTypes = {
literal: PropTypes.string, literal: PropTypes.string,
isMessageContainsOnlyEmoji: PropTypes.bool, isMessageContainsOnlyEmoji: PropTypes.bool,
getCustomEmoji: PropTypes.func, getCustomEmoji: PropTypes.func,
baseUrl: PropTypes.string baseUrl: PropTypes.string,
customEmojis: PropTypes.bool,
style: PropTypes.array
}; };
export default Emoji; export default Emoji;

5
app/containers/markdown/Hashtag.js
View File

@ -5,7 +5,7 @@ import { Text } from 'react-native';
import styles from './styles'; import styles from './styles';
const Hashtag = React.memo(({ const Hashtag = React.memo(({
hashtag, channels, navToRoomInfo hashtag, channels, navToRoomInfo, style = []
}) => { }) => {
const handlePress = () => { const handlePress = () => {
const index = channels.findIndex(channel => channel.name === hashtag); const index = channels.findIndex(channel => channel.name === hashtag);
@ -19,7 +19,7 @@ const Hashtag = React.memo(({
if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) { if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
return ( return (
<Text <Text
style={styles.mention} style={[styles.mention, ...style]}
onPress={handlePress} onPress={handlePress}
> >
{`#${ hashtag }`} {`#${ hashtag }`}
@ -32,6 +32,7 @@ const Hashtag = React.memo(({
Hashtag.propTypes = { Hashtag.propTypes = {
hashtag: PropTypes.string, hashtag: PropTypes.string,
navToRoomInfo: PropTypes.func, navToRoomInfo: PropTypes.func,
style: PropTypes.array,
channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}; };

13
app/containers/markdown/List.js
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
const List = React.memo(({ const List = React.memo(({
children, ordered, start, tight children, ordered, start, tight, numberOfLines = 0
}) => { }) => {
let bulletWidth = 15; let bulletWidth = 15;
@ -11,7 +11,13 @@ const List = React.memo(({
bulletWidth = (9 * lastNumber.toString().length) + 7; bulletWidth = (9 * lastNumber.toString().length) + 7;
} }
const _children = React.Children.map(children, (child, index) => React.cloneElement(child, { let items = React.Children.toArray(children);
if (numberOfLines) {
items = items.slice(0, numberOfLines);
}
const _children = items.map((child, index) => React.cloneElement(child, {
bulletWidth, bulletWidth,
ordered, ordered,
tight, tight,
@ -29,7 +35,8 @@ List.propTypes = {
children: PropTypes.node, children: PropTypes.node,
ordered: PropTypes.bool, ordered: PropTypes.bool,
start: PropTypes.number, start: PropTypes.number,
tight: PropTypes.bool tight: PropTypes.bool,
numberOfLines: PropTypes.number
}; };
List.defaultProps = { List.defaultProps = {

97
app/containers/markdown/index.js
View File

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { View, Text, Image } from 'react-native'; import { Text, Image } from 'react-native';
import { Parser, Node } from 'commonmark'; import { Parser, Node } from 'commonmark';
import Renderer from 'commonmark-react-renderer'; import Renderer from 'commonmark-react-renderer';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -53,8 +53,6 @@ const emojiCount = (str) => {
return counter; return counter;
}; };
const encodeEmojis = str => toShort(shortnameToUnicode(str));
export default class Markdown extends PureComponent { export default class Markdown extends PureComponent {
static propTypes = { static propTypes = {
msg: PropTypes.string, msg: PropTypes.string,
@ -65,21 +63,24 @@ export default class Markdown extends PureComponent {
isEdited: PropTypes.bool, isEdited: PropTypes.bool,
numberOfLines: PropTypes.number, numberOfLines: PropTypes.number,
useMarkdown: PropTypes.bool, useMarkdown: PropTypes.bool,
customEmojis: PropTypes.bool,
channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
navToRoomInfo: PropTypes.func navToRoomInfo: PropTypes.func,
preview: PropTypes.bool,
style: PropTypes.array
}; };
constructor(props) { constructor(props) {
super(props); super(props);
this.parser = this.createParser(); this.parser = this.createParser();
this.renderer = this.createRenderer(); this.renderer = this.createRenderer(props.preview);
} }
createParser = () => new Parser(); createParser = () => new Parser();
createRenderer = () => new Renderer({ createRenderer = (preview = false) => new Renderer({
renderers: { renderers: {
text: this.renderText, text: this.renderText,
@ -112,7 +113,7 @@ export default class Markdown extends PureComponent {
table_row: this.renderTableRow, table_row: this.renderTableRow,
table_cell: this.renderTableCell, table_cell: this.renderTableCell,
editedIndicator: this.renderEditedIndicator editedIndicator: preview ? () => null : this.renderEditedIndicator
}, },
renderParagraphsInLists: true renderParagraphsInLists: true
}); });
@ -133,12 +134,17 @@ export default class Markdown extends PureComponent {
}; };
renderText = ({ context, literal }) => { renderText = ({ context, literal }) => {
const { numberOfLines } = this.props; const { numberOfLines, preview, style = [] } = this.props;
const defaultStyle = [
this.isMessageContainsOnlyEmoji && !preview ? styles.textBig : {},
...context.map(type => styles[type])
];
return ( return (
<Text <Text
style={[ style={[
this.isMessageContainsOnlyEmoji ? styles.textBig : styles.text, styles.text,
...context.map(type => styles[type]) !preview ? defaultStyle : {},
...style
]} ]}
numberOfLines={numberOfLines} numberOfLines={numberOfLines}
> >
@ -147,9 +153,15 @@ export default class Markdown extends PureComponent {
); );
} }
renderCodeInline = ({ literal }) => <Text style={styles.codeInline}>{literal}</Text>; renderCodeInline = ({ literal }) => {
const { preview } = this.props;
return <Text style={!preview ? styles.codeInline : {}}>{literal}</Text>;
};
renderCodeBlock = ({ literal }) => <Text style={styles.codeBlock}>{literal}</Text>; renderCodeBlock = ({ literal }) => {
const { preview } = this.props;
return <Text style={!preview ? styles.codeBlock : {}}>{literal}</Text>;
};
renderBreak = () => { renderBreak = () => {
const { tmid } = this.props; const { tmid } = this.props;
@ -157,15 +169,14 @@ export default class Markdown extends PureComponent {
} }
renderParagraph = ({ children }) => { renderParagraph = ({ children }) => {
const { numberOfLines, style } = this.props;
if (!children || children.length === 0) { if (!children || children.length === 0) {
return null; return null;
} }
return ( return (
<View style={styles.block}> <Text style={style} numberOfLines={numberOfLines}>
<Text> {children}
{children} </Text>
</Text>
</View>
); );
}; };
@ -176,37 +187,45 @@ export default class Markdown extends PureComponent {
); );
renderHashtag = ({ hashtag }) => { renderHashtag = ({ hashtag }) => {
const { channels, navToRoomInfo } = this.props; const { channels, navToRoomInfo, style } = this.props;
return ( return (
<MarkdownHashtag <MarkdownHashtag
hashtag={hashtag} hashtag={hashtag}
channels={channels} channels={channels}
navToRoomInfo={navToRoomInfo} navToRoomInfo={navToRoomInfo}
style={style}
/> />
); );
} }
renderAtMention = ({ mentionName }) => { renderAtMention = ({ mentionName }) => {
const { username, mentions, navToRoomInfo } = this.props; const {
username, mentions, navToRoomInfo, style
} = this.props;
return ( return (
<MarkdownAtMention <MarkdownAtMention
mentions={mentions} mentions={mentions}
mention={mentionName} mention={mentionName}
username={username} username={username}
navToRoomInfo={navToRoomInfo} navToRoomInfo={navToRoomInfo}
style={style}
/> />
); );
} }
renderEmoji = ({ emojiName, literal }) => { renderEmoji = ({ emojiName, literal }) => {
const { getCustomEmoji, baseUrl } = this.props; const {
getCustomEmoji, baseUrl, customEmojis = true, preview, style
} = this.props;
return ( return (
<MarkdownEmoji <MarkdownEmoji
emojiName={emojiName} emojiName={emojiName}
literal={literal} literal={literal}
isMessageContainsOnlyEmoji={this.isMessageContainsOnlyEmoji} isMessageContainsOnlyEmoji={this.isMessageContainsOnlyEmoji && !preview}
getCustomEmoji={getCustomEmoji} getCustomEmoji={getCustomEmoji}
baseUrl={baseUrl} baseUrl={baseUrl}
customEmojis={customEmojis}
style={style}
/> />
); );
} }
@ -216,9 +235,10 @@ export default class Markdown extends PureComponent {
renderEditedIndicator = () => <Text style={styles.edited}> ({I18n.t('edited')})</Text>; renderEditedIndicator = () => <Text style={styles.edited}> ({I18n.t('edited')})</Text>;
renderHeading = ({ children, level }) => { renderHeading = ({ children, level }) => {
const { numberOfLines } = this.props;
const textStyle = styles[`heading${ level }Text`]; const textStyle = styles[`heading${ level }Text`];
return ( return (
<Text style={textStyle}> <Text numberOfLines={numberOfLines} style={textStyle}>
{children} {children}
</Text> </Text>
); );
@ -226,15 +246,19 @@ export default class Markdown extends PureComponent {
renderList = ({ renderList = ({
children, start, tight, type children, start, tight, type
}) => ( }) => {
<MarkdownList const { numberOfLines } = this.props;
ordered={type !== 'bullet'} return (
start={start} <MarkdownList
tight={tight} ordered={type !== 'bullet'}
> start={start}
{children} tight={tight}
</MarkdownList> numberOfLines={numberOfLines}
); >
{children}
</MarkdownList>
);
};
renderListItem = ({ renderListItem = ({
children, context, ...otherProps children, context, ...otherProps
@ -269,7 +293,7 @@ export default class Markdown extends PureComponent {
render() { render() {
const { const {
msg, useMarkdown = true, numberOfLines msg, useMarkdown = true, numberOfLines, preview = false
} = this.props; } = this.props;
if (!msg) { if (!msg) {
@ -281,13 +305,18 @@ export default class Markdown extends PureComponent {
// Ex: '[ ](https://open.rocket.chat/group/test?msg=abcdef) Test' // Ex: '[ ](https://open.rocket.chat/group/test?msg=abcdef) Test'
// Return: 'Test' // Return: 'Test'
m = m.replace(/^\[([\s]]*)\]\(([^)]*)\)\s/, '').trim(); m = m.replace(/^\[([\s]]*)\]\(([^)]*)\)\s/, '').trim();
m = shortnameToUnicode(m);
if (!useMarkdown) { if (preview) {
m = m.split('\n').reduce((lines, line) => `${ lines } ${ line }`, '');
}
if (!useMarkdown && !preview) {
return <Text style={styles.text} numberOfLines={numberOfLines}>{m}</Text>; return <Text style={styles.text} numberOfLines={numberOfLines}>{m}</Text>;
} }
const ast = this.parser.parse(m); const ast = this.parser.parse(m);
const encodedEmojis = encodeEmojis(m); const encodedEmojis = toShort(m);
this.isMessageContainsOnlyEmoji = isOnlyEmoji(encodedEmojis) && emojiCount(encodedEmojis) <= 3; this.isMessageContainsOnlyEmoji = isOnlyEmoji(encodedEmojis) && emojiCount(encodedEmojis) <= 3;
this.editedMessage(ast); this.editedMessage(ast);

3
app/containers/markdown/styles.js
View File

@ -21,7 +21,8 @@ export default StyleSheet.create({
block: { block: {
alignItems: 'flex-start', alignItems: 'flex-start',
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap' flexWrap: 'wrap',
flex: 1
}, },
emph: { emph: {
fontStyle: 'italic' fontStyle: 'italic'

1
app/containers/message/Content.js
View File

@ -25,6 +25,7 @@ const Content = React.memo((props) => {
username={props.user.username} username={props.user.username}
isEdited={props.isEdited} isEdited={props.isEdited}
numberOfLines={(props.tmid && !props.isThreadRoom) ? 1 : 0} numberOfLines={(props.tmid && !props.isThreadRoom) ? 1 : 0}
preview={props.tmid && !props.isThreadRoom}
channels={props.channels} channels={props.channels}
mentions={props.mentions} mentions={props.mentions}
useMarkdown={props.useMarkdown && (!props.tmid || props.isThreadRoom)} useMarkdown={props.useMarkdown && (!props.tmid || props.isThreadRoom)}

12
app/presentation/RoomItem/LastMessage.js
View File

@ -1,11 +1,11 @@
import React from 'react'; import React from 'react';
import { Text } from 'react-native';
import { shortnameToUnicode } from 'emoji-toolkit'; import { shortnameToUnicode } from 'emoji-toolkit';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import _ from 'lodash'; import _ from 'lodash';
import I18n from '../../i18n'; import I18n from '../../i18n';
import styles from './styles'; import styles from './styles';
import Markdown from '../../containers/markdown';
const formatMsg = ({ const formatMsg = ({
lastMessage, type, showLastMessage, username lastMessage, type, showLastMessage, username
@ -47,11 +47,15 @@ const arePropsEqual = (oldProps, newProps) => _.isEqual(oldProps, newProps);
const LastMessage = React.memo(({ const LastMessage = React.memo(({
lastMessage, type, showLastMessage, username, alert lastMessage, type, showLastMessage, username, alert
}) => ( }) => (
<Text style={[styles.markdownText, alert && styles.markdownTextAlert]} numberOfLines={2}> <Markdown
{formatMsg({ msg={formatMsg({
lastMessage, type, showLastMessage, username lastMessage, type, showLastMessage, username
})} })}
</Text> style={[styles.markdownText, alert && styles.markdownTextAlert]}
customEmojis={false}
numberOfLines={2}
preview
/>
), arePropsEqual); ), arePropsEqual);
LastMessage.propTypes = { LastMessage.propTypes = {