[FIX] Show button attachment on messages (#2980)
* [FIX] Show button attachment in message list fixes: #2684 * Changed the Button and theme, text theme and how to call the function * Fix the props passed in Message * Function to context * Added button attachment to stories * New snapshot Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com> Co-authored-by: Levy Costa <levycosta471@gmail.com> Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Sumukha Hegde
GitHub
parent
0d528bd9ae
commit
9bfe0e9912
|
|
@ -40334,6 +40334,268 @@ exports[`Storyshots Message Sequential thread messages following thread reply 1`
|
||||||
</RCTScrollView>
|
</RCTScrollView>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`Storyshots Message Show a button as attachment 1`] = `
|
||||||
|
<RCTScrollView
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "#ffffff",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
focusable={true}
|
||||||
|
onClick={[Function]}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": null,
|
||||||
|
"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=36",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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",
|
||||||
|
"justifyContent": "space-between",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
focusable={true}
|
||||||
|
onClick={[Function]}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"flexShrink": 1,
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"lineHeight": 22,
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"color": "#0d0e12",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
diego.mello
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 12,
|
||||||
|
"fontWeight": "400",
|
||||||
|
"marginLeft": 8,
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"color": "#9ca2a8",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
10:00 AM
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View />
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "400",
|
||||||
|
"textAlign": "left",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Test Button
|
||||||
|
</Text>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
focusable={true}
|
||||||
|
onClick={[Function]}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "#1d74f5",
|
||||||
|
"borderRadius": 2,
|
||||||
|
"height": 48,
|
||||||
|
"justifyContent": "center",
|
||||||
|
"marginBottom": 12,
|
||||||
|
"opacity": 1,
|
||||||
|
"paddingHorizontal": 14,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
accessibilityLabel="Text button"
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"textAlign": "center",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"color": "#ffffff",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Text button
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</RCTScrollView>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`Storyshots Message Static avatar 1`] = `
|
exports[`Storyshots Message Static avatar 1`] = `
|
||||||
<RCTScrollView
|
<RCTScrollView
|
||||||
style={
|
style={
|
||||||
|
|
@ -43674,7 +43936,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Joker
|
Title
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View
|
<View
|
||||||
|
|
@ -43730,7 +43992,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Text
|
<Text
|
||||||
accessibilityLabel="Some crazy texts"
|
accessibilityLabel="Image text"
|
||||||
style={
|
style={
|
||||||
Array [
|
Array [
|
||||||
Object {
|
Object {
|
||||||
|
|
@ -43754,7 +44016,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Some crazy texts
|
Image text
|
||||||
</Text>
|
</Text>
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,35 @@
|
||||||
import React from 'react';
|
import React, { useContext } from 'react';
|
||||||
import { dequal } from 'dequal';
|
import { dequal } from 'dequal';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import { Text } from 'react-native';
|
||||||
|
|
||||||
import Image from './Image';
|
import Image from './Image';
|
||||||
import Audio from './Audio';
|
import Audio from './Audio';
|
||||||
import Video from './Video';
|
import Video from './Video';
|
||||||
import Reply from './Reply';
|
import Reply from './Reply';
|
||||||
|
import Button from '../Button';
|
||||||
|
import styles from './styles';
|
||||||
|
import MessageContext from './Context';
|
||||||
|
|
||||||
|
const AttachedActions = ({
|
||||||
|
attachment, theme
|
||||||
|
}) => {
|
||||||
|
const { onAnswerButtonPress } = useContext(MessageContext);
|
||||||
|
|
||||||
|
const attachedButtons = attachment.actions.map((element) => {
|
||||||
|
if (element.type === 'button') {
|
||||||
|
return <Button theme={theme} onPress={() => onAnswerButtonPress(element.msg)} title={element.text} />;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Text style={styles.text}>{attachment.text}</Text>
|
||||||
|
{attachedButtons}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const Attachments = React.memo(({
|
const Attachments = React.memo(({
|
||||||
attachments, timeFormat, showAttachment, getCustomEmoji, theme
|
attachments, timeFormat, showAttachment, getCustomEmoji, theme
|
||||||
|
|
@ -24,6 +48,9 @@ const Attachments = React.memo(({
|
||||||
if (file.video_url) {
|
if (file.video_url) {
|
||||||
return <Video key={file.video_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
|
return <Video key={file.video_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
|
||||||
}
|
}
|
||||||
|
if (file.actions && file.actions.length > 0) {
|
||||||
|
return <AttachedActions attachment={file} theme={theme} />;
|
||||||
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line react/no-array-index-key
|
// eslint-disable-next-line react/no-array-index-key
|
||||||
return <Reply key={index} index={index} attachment={file} timeFormat={timeFormat} getCustomEmoji={getCustomEmoji} theme={theme} />;
|
return <Reply key={index} index={index} attachment={file} timeFormat={timeFormat} getCustomEmoji={getCustomEmoji} theme={theme} />;
|
||||||
|
|
@ -38,5 +65,12 @@ Attachments.propTypes = {
|
||||||
theme: PropTypes.string
|
theme: PropTypes.string
|
||||||
};
|
};
|
||||||
Attachments.displayName = 'MessageAttachments';
|
Attachments.displayName = 'MessageAttachments';
|
||||||
|
AttachedActions.propTypes = {
|
||||||
|
attachment: PropTypes.shape({
|
||||||
|
actions: PropTypes.array,
|
||||||
|
text: PropTypes.string
|
||||||
|
}),
|
||||||
|
theme: PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
export default Attachments;
|
export default Attachments;
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,7 @@ class MessageContainer extends React.Component {
|
||||||
onEncryptedPress: PropTypes.func,
|
onEncryptedPress: PropTypes.func,
|
||||||
onDiscussionPress: PropTypes.func,
|
onDiscussionPress: PropTypes.func,
|
||||||
onThreadPress: PropTypes.func,
|
onThreadPress: PropTypes.func,
|
||||||
|
onAnswerButtonPress: PropTypes.func,
|
||||||
errorActionsShow: PropTypes.func,
|
errorActionsShow: PropTypes.func,
|
||||||
replyBroadcast: PropTypes.func,
|
replyBroadcast: PropTypes.func,
|
||||||
reactionInit: PropTypes.func,
|
reactionInit: PropTypes.func,
|
||||||
|
|
@ -64,6 +65,7 @@ class MessageContainer extends React.Component {
|
||||||
onEncryptedPress: () => {},
|
onEncryptedPress: () => {},
|
||||||
onDiscussionPress: () => {},
|
onDiscussionPress: () => {},
|
||||||
onThreadPress: () => {},
|
onThreadPress: () => {},
|
||||||
|
onAnswerButtonPress: () => {},
|
||||||
errorActionsShow: () => {},
|
errorActionsShow: () => {},
|
||||||
replyBroadcast: () => {},
|
replyBroadcast: () => {},
|
||||||
reactionInit: () => {},
|
reactionInit: () => {},
|
||||||
|
|
@ -190,6 +192,13 @@ class MessageContainer extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onAnswerButtonPress = (msg) => {
|
||||||
|
const { onAnswerButtonPress } = this.props;
|
||||||
|
if (onAnswerButtonPress) {
|
||||||
|
onAnswerButtonPress(msg, undefined, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onIgnoredMessagePress = () => {
|
onIgnoredMessagePress = () => {
|
||||||
this.setState({ isManualUnignored: true });
|
this.setState({ isManualUnignored: true });
|
||||||
}
|
}
|
||||||
|
|
@ -366,6 +375,7 @@ class MessageContainer extends React.Component {
|
||||||
onDiscussionPress: this.onDiscussionPress,
|
onDiscussionPress: this.onDiscussionPress,
|
||||||
onReactionLongPress: this.onReactionLongPress,
|
onReactionLongPress: this.onReactionLongPress,
|
||||||
onLinkPress: this.onLinkPress,
|
onLinkPress: this.onLinkPress,
|
||||||
|
onAnswerButtonPress: this.onAnswerButtonPress,
|
||||||
jumpToMessage,
|
jumpToMessage,
|
||||||
threadBadgeColor,
|
threadBadgeColor,
|
||||||
toggleFollowThread,
|
toggleFollowThread,
|
||||||
|
|
|
||||||
|
|
@ -974,6 +974,7 @@ class RoomView extends React.Component {
|
||||||
onEncryptedPress={this.onEncryptedPress}
|
onEncryptedPress={this.onEncryptedPress}
|
||||||
onDiscussionPress={this.onDiscussionPress}
|
onDiscussionPress={this.onDiscussionPress}
|
||||||
onThreadPress={this.onThreadPress}
|
onThreadPress={this.onThreadPress}
|
||||||
|
onAnswerButtonPress={this.sendMessage}
|
||||||
showAttachment={this.showAttachment}
|
showAttachment={this.showAttachment}
|
||||||
reactionInit={this.onReactionInit}
|
reactionInit={this.onReactionInit}
|
||||||
replyBroadcast={this.replyBroadcast}
|
replyBroadcast={this.replyBroadcast}
|
||||||
|
|
|
||||||
|
|
@ -855,14 +855,30 @@ stories.add('Custom style', () => (
|
||||||
<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
|
<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
|
||||||
));
|
));
|
||||||
|
|
||||||
stories.add('Thumbnail from server', () => (
|
stories.add('Show a button as attachment', () => (
|
||||||
<Message
|
<Message
|
||||||
msg='this is a thumbnail'
|
|
||||||
attachments={[{
|
attachments={[{
|
||||||
text: 'Some crazy texts',
|
text: 'Test Button',
|
||||||
thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
|
actions: [
|
||||||
title: 'Joker',
|
{
|
||||||
title_link: 'https://www.imdb.com/title/tt7286456/'
|
type: 'button',
|
||||||
|
text: 'Text button',
|
||||||
|
msg: 'Response message',
|
||||||
|
msg_in_chat_window: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}]}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
stories.add('Thumbnail from server', () => (
|
||||||
|
<Message
|
||||||
|
msg='this is a thumbnail'
|
||||||
|
attachments={[{
|
||||||
|
text: 'Image text',
|
||||||
|
thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
|
||||||
|
title: 'Title',
|
||||||
|
title_link: 'https://github.com/RocketChat/Rocket.Chat.ReactNative/pull/2975'
|
||||||
}]}
|
}]}
|
||||||
/>
|
/>
|
||||||
));
|
));
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue