verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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 2021-03-18 20:14:09 +05:30 committed by GitHub
parent e1a7f43552
commit 2ea7e9d3f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 307 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39301,18 +39301,45 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 1
</Text> </Text>
</Text>
</View> </View>
<View <View
style={ style={
@ -39351,18 +39378,45 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 2
</Text> </Text>
</Text>
</View> </View>
<View <View
style={ style={
@ -39401,18 +39455,45 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 3
</Text> </Text>
</Text>
</View> </View>
<View <View
style={ style={
@ -39451,18 +39532,45 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 4
</Text> </Text>
</Text>
</View> </View>
<View <View
style={ style={
@ -39501,18 +39609,45 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 5
</Text> </Text>
</Text>
</View> </View>
</View> </View>
</View> </View>
@ -39541,7 +39676,7 @@ exports[`Storyshots Message list message 1`] = `
] ]
} }
> >
Two short custom fields Two short custom fields with markdown
</Text> </Text>
<View <View
accessible={true} accessible={true}
@ -39951,18 +40086,45 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 1
</Text> </Text>
</Text>
</View> </View>
<View <View
style={ style={
@ -40001,18 +40163,67 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 2
</Text> </Text>
</Text>
</Text>
</View> </View>
</View> </View>
</View> </View>
@ -40191,18 +40402,45 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 1
</Text> </Text>
</Text>
</View> </View>
<View <View
style={ style={
@ -40241,18 +40479,48 @@ exports[`Storyshots Message list message 1`] = `
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 14, "fontSize": 16,
"fontWeight": "400", "fontWeight": "400",
"textAlign": "left", "textAlign": "left",
}, },
undefined,
Object { Object {
"color": "#2f343d", "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 Value 2
</Text> </Text>
</Text>
</View> </View>
</View> </View>
</View> </View>

21
app/containers/message/Reply.js
View File

@ -112,16 +112,24 @@ const Description = React.memo(({
return true; return true;
}); });
const Fields = React.memo(({ attachment, theme }) => { const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
if (!attachment.fields) { if (!attachment.fields) {
return null; return null;
} }
const { baseUrl, user } = useContext(MessageContext);
return ( return (
<View style={styles.fieldsContainer}> <View style={styles.fieldsContainer}>
{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>
<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>
))} ))}
</View> </View>
@ -176,7 +184,11 @@ const Reply = React.memo(({
getCustomEmoji={getCustomEmoji} getCustomEmoji={getCustomEmoji}
theme={theme} theme={theme}
/> />
<Fields attachment={attachment} theme={theme} /> <Fields
attachment={attachment}
getCustomEmoji={getCustomEmoji}
theme={theme}
/>
</View> </View>
</Touchable> </Touchable>
<Markdown <Markdown
@ -215,7 +227,8 @@ Description.displayName = 'MessageReplyDescription';
Fields.propTypes = { Fields.propTypes = {
attachment: PropTypes.object, attachment: PropTypes.object,
theme: PropTypes.string theme: PropTypes.string,
getCustomEmoji: PropTypes.func
}; };
Fields.displayName = 'MessageReplyFields'; Fields.displayName = 'MessageReplyFields';

6
storybook/stories/Message.js
View File

@ -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 <Message
msg='Message' msg='Message'
attachments={[{ attachments={[{
@ -720,7 +720,7 @@ export default ({ theme }) => {
short: true short: true
}, { }, {
title: 'Field 2', title: 'Field 2',
value: 'Value 2', value: '[Value 2](https://google.com/)',
short: true short: true
}] }]
}, { }, {
@ -734,7 +734,7 @@ export default ({ theme }) => {
short: true short: true
}, { }, {
title: 'Field 2', title: 'Field 2',
value: 'Value 2', value: '**Value 2**',
short: true short: true
}] }]
}]} }]}