[IMPROVE] fix the Reply message errors
This commit is contained in:
parent
2b533f86e3
commit
d3986689e5
|
@ -1,6 +1,5 @@
|
||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
import { View, Text, StyleSheet } from 'react-native';
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { transparentize } from 'color2k';
|
import { transparentize } from 'color2k';
|
||||||
import { dequal } from 'dequal';
|
import { dequal } from 'dequal';
|
||||||
|
@ -69,7 +68,49 @@ const styles = StyleSheet.create({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const Title = React.memo(({ attachment, timeFormat, theme }) => {
|
type TAttachment = {
|
||||||
|
author_name: string;
|
||||||
|
message_link: string;
|
||||||
|
ts: string;
|
||||||
|
text: string;
|
||||||
|
title: string;
|
||||||
|
short: boolean;
|
||||||
|
value: string;
|
||||||
|
title_link: string;
|
||||||
|
author_link: string;
|
||||||
|
type: string;
|
||||||
|
color: string;
|
||||||
|
description: string;
|
||||||
|
fields: TAttachment[];
|
||||||
|
}
|
||||||
|
|
||||||
|
type TMessageTitle = {
|
||||||
|
attachment: Partial<TAttachment>
|
||||||
|
timeFormat: string;
|
||||||
|
theme: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TMessageDescription = {
|
||||||
|
attachment: Partial<TAttachment>
|
||||||
|
getCustomEmoji: Function;
|
||||||
|
theme: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TMessageFields = {
|
||||||
|
attachment: Partial<TAttachment>;
|
||||||
|
theme: string;
|
||||||
|
getCustomEmoji: Function;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface IMessageReply {
|
||||||
|
attachment: Partial<TAttachment>
|
||||||
|
timeFormat: string;
|
||||||
|
index: number;
|
||||||
|
theme: string;
|
||||||
|
getCustomEmoji: Function;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Title = React.memo(({ attachment, timeFormat, theme }: TMessageTitle) => {
|
||||||
if (!attachment.author_name) {
|
if (!attachment.author_name) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -82,15 +123,14 @@ const Title = React.memo(({ attachment, timeFormat, theme }) => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
const Description = React.memo(({
|
const Description = React.memo(({ attachment, getCustomEmoji, theme }: TMessageDescription) => {
|
||||||
attachment, getCustomEmoji, theme
|
|
||||||
}) => {
|
|
||||||
const text = attachment.text || attachment.title;
|
const text = attachment.text || attachment.title;
|
||||||
if (!text) {
|
if (!text) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const { baseUrl, user } = useContext(MessageContext);
|
const { baseUrl, user } = useContext(MessageContext);
|
||||||
return (
|
return (
|
||||||
|
// @ts-ignore
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={text}
|
msg={text}
|
||||||
baseUrl={baseUrl}
|
baseUrl={baseUrl}
|
||||||
|
@ -112,7 +152,7 @@ const Description = React.memo(({
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
|
const Fields = React.memo(({ attachment, theme, getCustomEmoji }: TMessageFields) => {
|
||||||
if (!attachment.fields) {
|
if (!attachment.fields) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -123,6 +163,7 @@ const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
|
||||||
{attachment.fields.map(field => (
|
{attachment.fields.map(field => (
|
||||||
<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
|
<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
|
||||||
<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
|
<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
|
||||||
|
{/*@ts-ignore*/}
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={field.value}
|
msg={field.value}
|
||||||
baseUrl={baseUrl}
|
baseUrl={baseUrl}
|
||||||
|
@ -136,9 +177,7 @@ const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
|
||||||
);
|
);
|
||||||
}, (prevProps, nextProps) => dequal(prevProps.attachment.fields, nextProps.attachment.fields) && prevProps.theme === nextProps.theme);
|
}, (prevProps, nextProps) => dequal(prevProps.attachment.fields, nextProps.attachment.fields) && prevProps.theme === nextProps.theme);
|
||||||
|
|
||||||
const Reply = React.memo(({
|
const Reply = React.memo(({ attachment, timeFormat, index, getCustomEmoji, theme }: IMessageReply) => {
|
||||||
attachment, timeFormat, index, getCustomEmoji, theme
|
|
||||||
}) => {
|
|
||||||
if (!attachment) {
|
if (!attachment) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -203,8 +242,9 @@ const Reply = React.memo(({
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</Touchable>
|
</Touchable>
|
||||||
|
{/*@ts-ignore*/}
|
||||||
<Markdown
|
<Markdown
|
||||||
msg={attachment.description}
|
msg={attachment.description!}
|
||||||
baseUrl={baseUrl}
|
baseUrl={baseUrl}
|
||||||
username={user.username}
|
username={user.username}
|
||||||
getCustomEmoji={getCustomEmoji}
|
getCustomEmoji={getCustomEmoji}
|
||||||
|
@ -214,34 +254,9 @@ const Reply = React.memo(({
|
||||||
);
|
);
|
||||||
}, (prevProps, nextProps) => dequal(prevProps.attachment, nextProps.attachment) && prevProps.theme === nextProps.theme);
|
}, (prevProps, nextProps) => dequal(prevProps.attachment, nextProps.attachment) && prevProps.theme === nextProps.theme);
|
||||||
|
|
||||||
Reply.propTypes = {
|
|
||||||
attachment: PropTypes.object,
|
|
||||||
timeFormat: PropTypes.string,
|
|
||||||
index: PropTypes.number,
|
|
||||||
theme: PropTypes.string,
|
|
||||||
getCustomEmoji: PropTypes.func
|
|
||||||
};
|
|
||||||
Reply.displayName = 'MessageReply';
|
Reply.displayName = 'MessageReply';
|
||||||
|
|
||||||
Title.propTypes = {
|
|
||||||
attachment: PropTypes.object,
|
|
||||||
timeFormat: PropTypes.string,
|
|
||||||
theme: PropTypes.string
|
|
||||||
};
|
|
||||||
Title.displayName = 'MessageReplyTitle';
|
Title.displayName = 'MessageReplyTitle';
|
||||||
|
|
||||||
Description.propTypes = {
|
|
||||||
attachment: PropTypes.object,
|
|
||||||
getCustomEmoji: PropTypes.func,
|
|
||||||
theme: PropTypes.string
|
|
||||||
};
|
|
||||||
Description.displayName = 'MessageReplyDescription';
|
Description.displayName = 'MessageReplyDescription';
|
||||||
|
|
||||||
Fields.propTypes = {
|
|
||||||
attachment: PropTypes.object,
|
|
||||||
theme: PropTypes.string,
|
|
||||||
getCustomEmoji: PropTypes.func
|
|
||||||
};
|
|
||||||
Fields.displayName = 'MessageReplyFields';
|
Fields.displayName = 'MessageReplyFields';
|
||||||
|
|
||||||
export default Reply;
|
export default Reply;
|
||||||
|
|
Loading…
Reference in New Issue