[BUG] App isn't showing message for PDF/file uploads (#2584)
* Fixed the issue #2531 In app/containers/message/Reply.js added a View Contaier around the Attachment Touchable and Added a Markdown attribute with msg set to description of attachment to display the message if any. * Added the condition to check if File Description Exists Added an if statement to check if file description exists and if yes then add a markdown with value msg equal to the description. Also tested using 'yarn test -u' to add/update the tests. * Made the requested Changes Removed the condition to check for attachment description. Added the `markdown` inside the touchable and wrapped `attachmentContainer` and the `markdown` inside a `<>` component * Added file not showing message issue code in this branch * Fixed the mistake in return * fix * Add tests Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Saket Mahajan
GitHub
parent
080b8cc3fc
commit
8bc32a3e77
|
|
@ -27479,7 +27479,7 @@ exports[`Storyshots Message list message 1`] = `
|
|||
resizeMode="cover"
|
||||
source={
|
||||
Object {
|
||||
"uri": "https://open.rocket.chat/file-upload/2ZrxuwcGeTrsoh376/Clipboard%252520-%252520September%2525205,%2525202018%2525204:10%252520PM?rc_uid=&rc_token=",
|
||||
"uri": "https://open.rocket.chat/dummypath?rc_uid=&rc_token=",
|
||||
}
|
||||
}
|
||||
style={
|
||||
|
|
@ -27785,7 +27785,7 @@ exports[`Storyshots Message list message 1`] = `
|
|||
resizeMode="cover"
|
||||
source={
|
||||
Object {
|
||||
"uri": "https://open.rocket.chat/file-upload/sxLXBzjwuqxMnebyP/Clipboard%252520-%25252029%252520de%252520Agosto%252520de%2525202018%252520%2525C3%2525A0s%25252018:10?rc_uid=&rc_token=",
|
||||
"uri": "https://open.rocket.chat/dummypath?rc_uid=&rc_token=",
|
||||
}
|
||||
}
|
||||
style={
|
||||
|
|
@ -29517,6 +29517,564 @@ exports[`Storyshots Message list message 1`] = `
|
|||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"fontSize": 20,
|
||||
"fontWeight": "300",
|
||||
"marginLeft": 10,
|
||||
"marginVertical": 30,
|
||||
},
|
||||
Object {
|
||||
"color": "#0d0e12",
|
||||
},
|
||||
Object {
|
||||
"marginBottom": 0,
|
||||
"marginTop": 30,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
With file
|
||||
</Text>
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flexDirection": "column",
|
||||
"paddingHorizontal": 14,
|
||||
"paddingVertical": 4,
|
||||
"width": "100%",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"borderRadius": 4,
|
||||
"height": 36,
|
||||
"width": 36,
|
||||
},
|
||||
Object {
|
||||
"marginTop": 4,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"overflow": "hidden",
|
||||
},
|
||||
Object {
|
||||
"borderRadius": 4,
|
||||
"height": 36,
|
||||
"width": 36,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<FastImageView
|
||||
resizeMode="cover"
|
||||
source={
|
||||
Object {
|
||||
"headers": undefined,
|
||||
"priority": "high",
|
||||
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=100",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"marginLeft": 46,
|
||||
},
|
||||
Object {
|
||||
"marginLeft": 10,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"lineHeight": 22,
|
||||
},
|
||||
Object {
|
||||
"color": "#0d0e12",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
diego.mello
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "400",
|
||||
"paddingLeft": 8,
|
||||
},
|
||||
Object {
|
||||
"color": "#9ca2a8",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
10:00 AM
|
||||
</Text>
|
||||
</View>
|
||||
<View />
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"alignSelf": "flex-start",
|
||||
"backgroundColor": "#f3f4f5",
|
||||
"borderColor": "#e1e5e8",
|
||||
"borderRadius": 4,
|
||||
"borderWidth": 1,
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"marginBottom": 4,
|
||||
"marginTop": 6,
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"borderRadius": 4,
|
||||
"flex": 1,
|
||||
"flexDirection": "column",
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="File.pdf"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
File.pdf
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="This is a description "
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
This is a description
|
||||
</Text>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"overflow": "hidden",
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"height": 20,
|
||||
"width": 20,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
<FastImageView
|
||||
resizeMode="contain"
|
||||
source={
|
||||
Object {
|
||||
"priority": "high",
|
||||
"uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flexDirection": "column",
|
||||
"paddingHorizontal": 14,
|
||||
"paddingVertical": 4,
|
||||
"width": "100%",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"marginLeft": 46,
|
||||
},
|
||||
false,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View />
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"alignSelf": "flex-start",
|
||||
"backgroundColor": "#f3f4f5",
|
||||
"borderColor": "#e1e5e8",
|
||||
"borderRadius": 4,
|
||||
"borderWidth": 1,
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"marginBottom": 4,
|
||||
"marginTop": 6,
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"borderRadius": 4,
|
||||
"flex": 1,
|
||||
"flexDirection": "column",
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="File.pdf"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
File.pdf
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="This is a description "
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
This is a description
|
||||
</Text>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"overflow": "hidden",
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"height": 20,
|
||||
"width": 20,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
<FastImageView
|
||||
resizeMode="contain"
|
||||
source={
|
||||
Object {
|
||||
"priority": "high",
|
||||
"uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
|
|
|
|||
|
|
@ -62,6 +62,9 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
marginTop: {
|
||||
marginTop: 4
|
||||
},
|
||||
marginBottom: {
|
||||
marginBottom: 4
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -147,29 +150,43 @@ const Reply = React.memo(({
|
|||
};
|
||||
|
||||
return (
|
||||
<Touchable
|
||||
onPress={onPress}
|
||||
style={[
|
||||
styles.button,
|
||||
index > 0 && styles.marginTop,
|
||||
{
|
||||
backgroundColor: themes[theme].chatComponentBackground,
|
||||
borderColor: themes[theme].borderColor
|
||||
}
|
||||
]}
|
||||
background={Touchable.Ripple(themes[theme].bannerBackground)}
|
||||
>
|
||||
<View style={styles.attachmentContainer}>
|
||||
<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
|
||||
<Description
|
||||
attachment={attachment}
|
||||
timeFormat={timeFormat}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
/>
|
||||
<Fields attachment={attachment} theme={theme} />
|
||||
</View>
|
||||
</Touchable>
|
||||
<>
|
||||
<Touchable
|
||||
onPress={onPress}
|
||||
style={[
|
||||
styles.button,
|
||||
index > 0 && styles.marginTop,
|
||||
attachment.description && styles.marginBottom,
|
||||
{
|
||||
backgroundColor: themes[theme].chatComponentBackground,
|
||||
borderColor: themes[theme].borderColor
|
||||
}
|
||||
]}
|
||||
background={Touchable.Ripple(themes[theme].bannerBackground)}
|
||||
>
|
||||
<View style={styles.attachmentContainer}>
|
||||
<Title
|
||||
attachment={attachment}
|
||||
timeFormat={timeFormat}
|
||||
theme={theme}
|
||||
/>
|
||||
<Description
|
||||
attachment={attachment}
|
||||
timeFormat={timeFormat}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
/>
|
||||
<Fields attachment={attachment} theme={theme} />
|
||||
</View>
|
||||
</Touchable>
|
||||
<Markdown
|
||||
msg={attachment.description}
|
||||
baseUrl={baseUrl}
|
||||
username={user.username}
|
||||
getCustomEmoji={getCustomEmoji}
|
||||
theme={theme}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}, (prevProps, nextProps) => isEqual(prevProps.attachment, nextProps.attachment) && prevProps.theme === nextProps.theme);
|
||||
|
||||
|
|
|
|||
|
|
@ -346,14 +346,14 @@ export default ({ theme }) => {
|
|||
attachments={[{
|
||||
title: 'This is a title',
|
||||
description: 'This is a description',
|
||||
image_url: '/file-upload/2ZrxuwcGeTrsoh376/Clipboard%20-%20September%205,%202018%204:10%20PM'
|
||||
image_url: '/dummypath'
|
||||
}]}
|
||||
/>
|
||||
<Message
|
||||
attachments={[{
|
||||
title: 'This is a title',
|
||||
description: 'This is a description :nyan_rocket:',
|
||||
image_url: '/file-upload/sxLXBzjwuqxMnebyP/Clipboard%20-%2029%20de%20Agosto%20de%202018%20%C3%A0s%2018:10'
|
||||
image_url: '/dummypath'
|
||||
}]}
|
||||
/>
|
||||
|
||||
|
|
@ -362,13 +362,13 @@ export default ({ theme }) => {
|
|||
attachments={[{
|
||||
title: 'This is a title',
|
||||
description: 'This is a description :nyan_rocket:',
|
||||
video_url: '/file-upload/cqnKqb6kdajky5Rxj/WhatsApp%20Video%202018-08-22%20at%2019.09.55.mp4'
|
||||
video_url: '/dummypath'
|
||||
}]}
|
||||
/>
|
||||
<Message
|
||||
attachments={[{
|
||||
title: 'This is a title',
|
||||
video_url: '/file-upload/cqnKqb6kdajky5Rxj/WhatsApp%20Video%202018-08-22%20at%2019.09.55.mp4'
|
||||
video_url: '/dummypath'
|
||||
}]}
|
||||
/>
|
||||
|
||||
|
|
@ -377,7 +377,7 @@ export default ({ theme }) => {
|
|||
attachments={[{
|
||||
title: 'This is a title',
|
||||
description: 'This is a description :nyan_rocket:',
|
||||
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
||||
audio_url: '/dummypath'
|
||||
}]}
|
||||
/>
|
||||
<Message msg='First message' isHeader={false} />
|
||||
|
|
@ -385,21 +385,36 @@ export default ({ theme }) => {
|
|||
attachments={[{
|
||||
title: 'This is a title',
|
||||
description: 'This is a description',
|
||||
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
||||
audio_url: '/dummypath'
|
||||
}]}
|
||||
isHeader={false}
|
||||
/>
|
||||
<Message
|
||||
attachments={[{
|
||||
title: 'This is a title',
|
||||
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
||||
audio_url: '/dummypath'
|
||||
}]}
|
||||
isHeader={false}
|
||||
/>
|
||||
<Message
|
||||
attachments={[{
|
||||
title: 'This is a title',
|
||||
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
||||
audio_url: '/dummypath'
|
||||
}]}
|
||||
isHeader={false}
|
||||
/>
|
||||
|
||||
<Separator title='With file' theme={theme} />
|
||||
<Message
|
||||
attachments={[{
|
||||
text: 'File.pdf',
|
||||
description: 'This is a description :nyan_rocket:'
|
||||
}]}
|
||||
/>
|
||||
<Message
|
||||
attachments={[{
|
||||
text: 'File.pdf',
|
||||
description: 'This is a description :nyan_rocket:'
|
||||
}]}
|
||||
isHeader={false}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue