Unverified Commit 7ad1a2c1 authored by Diego Mello's avatar Diego Mello Committed by GitHub

Merge branch 'develop' into fix.reply-while-editing

parents b97d86ba f3972ef4
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet, SafeAreaView
} from 'react-native'; } from 'react-native';
import FastImage from 'react-native-fast-image'; import FastImage from 'react-native-fast-image';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import ImageViewer from 'react-native-image-zoom-viewer'; import ImageViewer from 'react-native-image-zoom-viewer';
import SafeAreaView from 'react-native-safe-area-view';
import { Video } from 'expo-av'; import { Video } from 'expo-av';
import sharedStyles from '../views/Styles'; import sharedStyles from '../views/Styles';
......
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
View, PermissionsAndroid, Text View, SafeAreaView, PermissionsAndroid, Text
} from 'react-native'; } from 'react-native';
import { AudioRecorder, AudioUtils } from 'react-native-audio'; import { AudioRecorder, AudioUtils } from 'react-native-audio';
import { BorderlessButton } from 'react-native-gesture-handler'; import { BorderlessButton } from 'react-native-gesture-handler';
import SafeAreaView from 'react-native-safe-area-view';
import FileSystem from 'expo-file-system'; import FileSystem from 'expo-file-system';
import styles from './styles'; import styles from './styles';
......
...@@ -79,7 +79,7 @@ class ReplyPreview extends Component { ...@@ -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>
......
import React from 'react'; import React from 'react';
import { import {
View, Text, FlatList, StyleSheet View, Text, FlatList, StyleSheet, SafeAreaView
} from 'react-native'; } from 'react-native';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import SafeAreaView from 'react-native-safe-area-view';
import Emoji from './message/Emoji'; import Emoji from './message/Emoji';
import I18n from '../i18n'; import I18n from '../i18n';
......
...@@ -5,7 +5,7 @@ import { Text } from 'react-native'; ...@@ -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, preview, style = []
}) => { }) => {
let mentionStyle = styles.mention; let mentionStyle = styles.mention;
if (mention === 'all' || mention === 'here') { if (mention === 'all' || mention === 'here') {
...@@ -33,8 +33,8 @@ const AtMention = React.memo(({ ...@@ -33,8 +33,8 @@ const AtMention = React.memo(({
return ( return (
<Text <Text
style={mentionStyle} style={[preview ? styles.text : mentionStyle, ...style]}
onPress={handlePress} onPress={preview ? undefined : handlePress}
> >
{`@${ mention }`} {`@${ mention }`}
</Text> </Text>
...@@ -45,6 +45,8 @@ AtMention.propTypes = { ...@@ -45,6 +45,8 @@ AtMention.propTypes = {
mention: PropTypes.string, mention: PropTypes.string,
username: PropTypes.string, username: PropTypes.string,
navToRoomInfo: PropTypes.func, navToRoomInfo: PropTypes.func,
style: PropTypes.array,
preview: PropTypes.bool,
mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}; };
......
...@@ -8,11 +8,11 @@ import CustomEmoji from '../EmojiPicker/CustomEmoji'; ...@@ -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(({ ...@@ -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 = { ...@@ -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,7 +5,7 @@ import { Text } from 'react-native'; ...@@ -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, preview, style = []
}) => { }) => {
const handlePress = () => { const handlePress = () => {
const index = channels.findIndex(channel => channel.name === hashtag); const index = channels.findIndex(channel => channel.name === hashtag);
...@@ -19,8 +19,8 @@ const Hashtag = React.memo(({ ...@@ -19,8 +19,8 @@ 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={[preview ? styles.text : styles.mention, ...style]}
onPress={handlePress} onPress={preview ? undefined : handlePress}
> >
{`#${ hashtag }`} {`#${ hashtag }`}
</Text> </Text>
...@@ -32,6 +32,8 @@ const Hashtag = React.memo(({ ...@@ -32,6 +32,8 @@ const Hashtag = React.memo(({
Hashtag.propTypes = { Hashtag.propTypes = {
hashtag: PropTypes.string, hashtag: PropTypes.string,
navToRoomInfo: PropTypes.func, navToRoomInfo: PropTypes.func,
style: PropTypes.array,
preview: PropTypes.bool,
channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}; };
......
...@@ -6,7 +6,7 @@ import styles from './styles'; ...@@ -6,7 +6,7 @@ import styles from './styles';
import openLink from '../../utils/openLink'; import openLink from '../../utils/openLink';
const Link = React.memo(({ const Link = React.memo(({
children, link children, link, preview
}) => { }) => {
const handlePress = () => { const handlePress = () => {
if (!link) { if (!link) {
...@@ -20,7 +20,7 @@ const Link = React.memo(({ ...@@ -20,7 +20,7 @@ const Link = React.memo(({
// if you have a [](https://rocket.chat) render https://rocket.chat // if you have a [](https://rocket.chat) render https://rocket.chat
return ( return (
<Text <Text
onPress={handlePress} onPress={preview ? undefined : handlePress}
style={styles.link} style={styles.link}
> >
{ childLength !== 0 ? children : link } { childLength !== 0 ? children : link }
...@@ -30,7 +30,8 @@ const Link = React.memo(({ ...@@ -30,7 +30,8 @@ const Link = React.memo(({
Link.propTypes = { Link.propTypes = {
children: PropTypes.node, children: PropTypes.node,
link: PropTypes.string link: PropTypes.string,
preview: PropTypes.bool
}; };
export default Link; export default Link;
...@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; ...@@ -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(({ ...@@ -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 = { ...@@ -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 = {
......
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) => { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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,56 +169,70 @@ export default class Markdown extends PureComponent { ...@@ -157,56 +169,70 @@ 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>
); );
}; };
renderLink = ({ children, href }) => ( renderLink = ({ children, href }) => {
<MarkdownLink link={href}> const { preview } = this.props;
{children} return (
</MarkdownLink> <MarkdownLink link={href} preview={preview}>
); {children}
</MarkdownLink>
);
}
renderHashtag = ({ hashtag }) => { renderHashtag = ({ hashtag }) => {
const { channels, navToRoomInfo } = this.props; const {
channels, navToRoomInfo, style, preview
} = this.props;
return ( return (
<MarkdownHashtag <MarkdownHashtag
hashtag={hashtag} hashtag={hashtag}
channels={channels} channels={channels}
navToRoomInfo={navToRoomInfo} navToRoomInfo={navToRoomInfo}
preview={preview}
style={style}
/> />
); );
} }
renderAtMention = ({ mentionName }) => { renderAtMention = ({ mentionName }) => {
const { username, mentions, navToRoomInfo } = this.props; const {
username, mentions, navToRoomInfo, preview, style
} = this.props;
return ( return (
<MarkdownAtMention <MarkdownAtMention
mentions={mentions} mentions={mentions}
mention={mentionName} mention={mentionName}
username={username} username={username}
navToRoomInfo={navToRoomInfo} navToRoomInfo={navToRoomInfo}
preview={preview}
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 +242,10 @@ export default class Markdown extends PureComponent { ...@@ -216,9 +242,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>