2017-12-02 13:19:58 +00:00
|
|
|
import React from 'react';
|
2018-09-11 16:32:52 +00:00
|
|
|
import { View, Text, StyleSheet } from 'react-native';
|
2017-12-02 13:19:58 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import moment from 'moment';
|
2019-04-08 12:35:28 +00:00
|
|
|
import Touchable from 'react-native-platform-touchable';
|
2019-05-20 20:43:50 +00:00
|
|
|
import isEqual from 'deep-equal';
|
2017-12-02 13:19:58 +00:00
|
|
|
|
2019-09-03 19:27:57 +00:00
|
|
|
import Markdown from '../markdown';
|
2017-12-28 17:40:10 +00:00
|
|
|
import openLink from '../../utils/openLink';
|
2019-03-29 19:36:07 +00:00
|
|
|
import sharedStyles from '../../views/Styles';
|
2019-04-08 12:35:28 +00:00
|
|
|
import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER } from '../../constants/colors';
|
2017-12-02 13:19:58 +00:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
button: {
|
|
|
|
flex: 1,
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
2019-03-29 19:36:07 +00:00
|
|
|
marginTop: 6,
|
2018-09-19 14:18:32 +00:00
|
|
|
alignSelf: 'flex-end',
|
2019-03-29 19:36:07 +00:00
|
|
|
backgroundColor: COLOR_BACKGROUND_CONTAINER,
|
|
|
|
borderColor: COLOR_BORDER,
|
|
|
|
borderWidth: 1,
|
2019-03-01 16:49:11 +00:00
|
|
|
borderRadius: 4
|
2017-12-02 13:19:58 +00:00
|
|
|
},
|
|
|
|
attachmentContainer: {
|
|
|
|
flex: 1,
|
2018-09-11 16:32:52 +00:00
|
|
|
borderRadius: 4,
|
|
|
|
flexDirection: 'column',
|
|
|
|
padding: 15
|
2017-12-02 13:19:58 +00:00
|
|
|
},
|
|
|
|
authorContainer: {
|
2019-02-08 16:34:50 +00:00
|
|
|
flex: 1,
|
2017-12-02 13:19:58 +00:00
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center'
|
|
|
|
},
|
2017-12-04 15:49:15 +00:00
|
|
|
author: {
|
2019-02-08 16:34:50 +00:00
|
|
|
flex: 1,
|
2019-03-01 16:49:11 +00:00
|
|
|
fontSize: 16,
|
2019-03-29 19:36:07 +00:00
|
|
|
...sharedStyles.textColorNormal,
|
|
|
|
...sharedStyles.textMedium
|
2017-12-04 15:49:15 +00:00
|
|
|
},
|
2017-12-02 13:19:58 +00:00
|
|
|
time: {
|
2019-03-01 16:49:11 +00:00
|
|
|
fontSize: 12,
|
2019-03-29 19:36:07 +00:00
|
|
|
marginLeft: 10,
|
|
|
|
...sharedStyles.textColorDescription,
|
|
|
|
...sharedStyles.textRegular,
|
|
|
|
fontWeight: '300'
|
2017-12-02 13:19:58 +00:00
|
|
|
},
|
|
|
|
fieldsContainer: {
|
|
|
|
flex: 1,
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
flexDirection: 'row'
|
|
|
|
},
|
|
|
|
fieldContainer: {
|
|
|
|
flexDirection: 'column',
|
|
|
|
padding: 10
|
|
|
|
},
|
|
|
|
fieldTitle: {
|
2019-03-29 19:36:07 +00:00
|
|
|
fontSize: 14,
|
|
|
|
...sharedStyles.textColorNormal,
|
|
|
|
...sharedStyles.textSemibold
|
|
|
|
},
|
|
|
|
fieldValue: {
|
|
|
|
fontSize: 14,
|
|
|
|
...sharedStyles.textColorNormal,
|
|
|
|
...sharedStyles.textRegular
|
2018-09-11 16:32:52 +00:00
|
|
|
},
|
|
|
|
marginTop: {
|
|
|
|
marginTop: 4
|
2017-12-02 13:19:58 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2019-05-20 20:43:50 +00:00
|
|
|
const Title = React.memo(({ attachment, timeFormat }) => {
|
|
|
|
if (!attachment.author_name) {
|
|
|
|
return null;
|
2018-09-19 14:18:32 +00:00
|
|
|
}
|
2019-05-20 20:43:50 +00:00
|
|
|
const time = attachment.ts ? moment(attachment.ts).format(timeFormat) : null;
|
|
|
|
return (
|
|
|
|
<View style={styles.authorContainer}>
|
|
|
|
{attachment.author_name ? <Text style={styles.author}>{attachment.author_name}</Text> : null}
|
|
|
|
{time ? <Text style={styles.time}>{ time }</Text> : null}
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}, () => true);
|
2017-12-04 15:49:15 +00:00
|
|
|
|
2019-05-20 20:43:50 +00:00
|
|
|
const Description = React.memo(({
|
|
|
|
attachment, baseUrl, user, getCustomEmoji, useMarkdown
|
2018-09-11 16:32:52 +00:00
|
|
|
}) => {
|
2019-05-20 20:43:50 +00:00
|
|
|
const text = attachment.text || attachment.title;
|
|
|
|
if (!text) {
|
2017-12-02 13:19:58 +00:00
|
|
|
return null;
|
|
|
|
}
|
2019-05-20 20:43:50 +00:00
|
|
|
return (
|
|
|
|
<Markdown
|
|
|
|
msg={text}
|
|
|
|
baseUrl={baseUrl}
|
|
|
|
username={user.username}
|
|
|
|
getCustomEmoji={getCustomEmoji}
|
|
|
|
useMarkdown={useMarkdown}
|
|
|
|
/>
|
2017-12-02 13:19:58 +00:00
|
|
|
);
|
2019-05-20 20:43:50 +00:00
|
|
|
}, (prevProps, nextProps) => {
|
|
|
|
if (prevProps.attachment.text !== nextProps.attachment.text) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (prevProps.attachment.title !== nextProps.attachment.title) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
});
|
2017-12-02 13:19:58 +00:00
|
|
|
|
2019-05-20 20:43:50 +00:00
|
|
|
const Fields = React.memo(({ attachment }) => {
|
|
|
|
if (!attachment.fields) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<View style={styles.fieldsContainer}>
|
|
|
|
{attachment.fields.map(field => (
|
|
|
|
<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
|
|
|
|
<Text style={styles.fieldTitle}>{field.title}</Text>
|
|
|
|
<Text style={styles.fieldValue}>{field.value}</Text>
|
|
|
|
</View>
|
|
|
|
))}
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}, (prevProps, nextProps) => isEqual(prevProps.attachment.fields, nextProps.attachment.fields));
|
2017-12-02 13:19:58 +00:00
|
|
|
|
2019-05-20 20:43:50 +00:00
|
|
|
const Reply = React.memo(({
|
|
|
|
attachment, timeFormat, baseUrl, user, index, getCustomEmoji, useMarkdown
|
|
|
|
}) => {
|
|
|
|
if (!attachment) {
|
|
|
|
return null;
|
|
|
|
}
|
2017-12-04 15:49:15 +00:00
|
|
|
|
2019-05-20 20:43:50 +00:00
|
|
|
const onPress = () => {
|
|
|
|
let url = attachment.title_link || attachment.author_link;
|
|
|
|
if (!url) {
|
|
|
|
return;
|
2018-09-19 14:18:32 +00:00
|
|
|
}
|
2019-05-20 20:43:50 +00:00
|
|
|
if (attachment.type === 'file') {
|
|
|
|
url = `${ baseUrl }${ url }?rc_uid=${ user.id }&rc_token=${ user.token }`;
|
2017-12-02 13:19:58 +00:00
|
|
|
}
|
2019-05-20 20:43:50 +00:00
|
|
|
openLink(url);
|
2017-12-02 13:19:58 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2019-04-08 12:35:28 +00:00
|
|
|
<Touchable
|
2019-05-20 20:43:50 +00:00
|
|
|
onPress={onPress}
|
2018-09-11 16:32:52 +00:00
|
|
|
style={[styles.button, index > 0 && styles.marginTop]}
|
2019-04-08 12:35:28 +00:00
|
|
|
background={Touchable.Ripple('#fff')}
|
2017-12-02 13:19:58 +00:00
|
|
|
>
|
|
|
|
<View style={styles.attachmentContainer}>
|
2019-05-20 20:43:50 +00:00
|
|
|
<Title attachment={attachment} timeFormat={timeFormat} />
|
|
|
|
<Description
|
|
|
|
attachment={attachment}
|
|
|
|
timeFormat={timeFormat}
|
|
|
|
baseUrl={baseUrl}
|
|
|
|
user={user}
|
|
|
|
getCustomEmoji={getCustomEmoji}
|
|
|
|
useMarkdown={useMarkdown}
|
|
|
|
/>
|
|
|
|
<Fields attachment={attachment} />
|
2017-12-02 13:19:58 +00:00
|
|
|
</View>
|
2019-04-08 12:35:28 +00:00
|
|
|
</Touchable>
|
2017-12-02 13:19:58 +00:00
|
|
|
);
|
2019-05-20 20:43:50 +00:00
|
|
|
}, (prevProps, nextProps) => isEqual(prevProps.attachment, nextProps.attachment));
|
2017-12-02 13:19:58 +00:00
|
|
|
|
|
|
|
Reply.propTypes = {
|
2019-05-20 20:43:50 +00:00
|
|
|
attachment: PropTypes.object,
|
|
|
|
timeFormat: PropTypes.string,
|
|
|
|
baseUrl: PropTypes.string,
|
|
|
|
user: PropTypes.object,
|
|
|
|
index: PropTypes.number,
|
|
|
|
useMarkdown: PropTypes.bool,
|
|
|
|
getCustomEmoji: PropTypes.func
|
|
|
|
};
|
|
|
|
Reply.displayName = 'MessageReply';
|
|
|
|
|
|
|
|
Title.propTypes = {
|
|
|
|
attachment: PropTypes.object,
|
|
|
|
timeFormat: PropTypes.string
|
|
|
|
};
|
|
|
|
Title.displayName = 'MessageReplyTitle';
|
|
|
|
|
|
|
|
Description.propTypes = {
|
|
|
|
attachment: PropTypes.object,
|
|
|
|
baseUrl: PropTypes.string,
|
|
|
|
user: PropTypes.object,
|
|
|
|
useMarkdown: PropTypes.bool,
|
|
|
|
getCustomEmoji: PropTypes.func
|
|
|
|
};
|
|
|
|
Description.displayName = 'MessageReplyDescription';
|
|
|
|
|
|
|
|
Fields.propTypes = {
|
|
|
|
attachment: PropTypes.object
|
2017-12-02 13:19:58 +00:00
|
|
|
};
|
2019-05-20 20:43:50 +00:00
|
|
|
Fields.displayName = 'MessageReplyFields';
|
2017-12-02 13:19:58 +00:00
|
|
|
|
|
|
|
export default Reply;
|