[FIX] Attachment not rendering markdown (#2924)
* [FIX] Render markdown in Fields content * Added stories Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Anant Bhasin
GitHub
parent
e1a7f43552
commit
2ea7e9d3f9
|
|
@ -39301,18 +39301,45 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 1"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 1
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
|
|
@ -39351,18 +39378,45 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 2"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 2
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
|
|
@ -39401,18 +39455,45 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 3"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 3
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
|
|
@ -39451,18 +39532,45 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 4"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 4
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
|
|
@ -39501,18 +39609,45 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 5"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 5
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
|
@ -39541,7 +39676,7 @@ exports[`Storyshots Message list message 1`] = `
|
|||
]
|
||||
}
|
||||
>
|
||||
Two short custom fields
|
||||
Two short custom fields with markdown
|
||||
</Text>
|
||||
<View
|
||||
accessible={true}
|
||||
|
|
@ -39951,18 +40086,45 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 1"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 1
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
|
|
@ -40001,18 +40163,67 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
onLongPress={[Function]}
|
||||
onPress={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#1d74f5",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 2"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 2
|
||||
</Text>
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
|
@ -40191,18 +40402,45 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 1"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 1
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
|
|
@ -40241,18 +40479,48 @@ exports[`Storyshots Message list message 1`] = `
|
|||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Value 2"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
"textAlign": "left",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
Object {
|
||||
"fontWeight": "bold",
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Value 2
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -112,16 +112,24 @@ const Description = React.memo(({
|
|||
return true;
|
||||
});
|
||||
|
||||
const Fields = React.memo(({ attachment, theme }) => {
|
||||
const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
|
||||
if (!attachment.fields) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { baseUrl, user } = useContext(MessageContext);
|
||||
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, { color: themes[theme].bodyText }]}>{field.title}</Text>
|
||||
<Text style={[styles.fieldValue, { color: themes[theme].bodyText }]}>{field.value}</Text>
|
||||
<Markdown
|
||||
msg={field.value}
|
||||
baseUrl={baseUrl}
|
||||
username={user.username}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
|
@ -176,7 +184,11 @@ const Reply = React.memo(({
|
|||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
/>
|
||||
<Fields attachment={attachment} theme={theme} />
|
||||
<Fields
|
||||
attachment={attachment}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
</Touchable>
|
||||
<Markdown
|
||||
|
|
@ -215,7 +227,8 @@ Description.displayName = 'MessageReplyDescription';
|
|||
|
||||
Fields.propTypes = {
|
||||
attachment: PropTypes.object,
|
||||
theme: PropTypes.string
|
||||
theme: PropTypes.string,
|
||||
getCustomEmoji: PropTypes.func
|
||||
};
|
||||
Fields.displayName = 'MessageReplyFields';
|
||||
|
||||
|
|
|
|||
|
|
@ -706,7 +706,7 @@ export default ({ theme }) => {
|
|||
}]}
|
||||
/>
|
||||
|
||||
<Separator title='Two short custom fields' theme={theme} />
|
||||
<Separator title='Two short custom fields with markdown' theme={theme} />
|
||||
<Message
|
||||
msg='Message'
|
||||
attachments={[{
|
||||
|
|
@ -720,7 +720,7 @@ export default ({ theme }) => {
|
|||
short: true
|
||||
}, {
|
||||
title: 'Field 2',
|
||||
value: 'Value 2',
|
||||
value: '[Value 2](https://google.com/)',
|
||||
short: true
|
||||
}]
|
||||
}, {
|
||||
|
|
@ -734,7 +734,7 @@ export default ({ theme }) => {
|
|||
short: true
|
||||
}, {
|
||||
title: 'Field 2',
|
||||
value: 'Value 2',
|
||||
value: '**Value 2**',
|
||||
short: true
|
||||
}]
|
||||
}]}
|
||||
|
|
|
|||
Loading…
Reference in New Issue