[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>
|
||||
`;
|
||||
|
||||
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`] = `
|
||||
<RCTScrollView
|
||||
style={
|
||||
|
|
@ -43674,7 +43936,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
|
|||
]
|
||||
}
|
||||
>
|
||||
Joker
|
||||
Title
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
|
|
@ -43730,7 +43992,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
|
|||
}
|
||||
>
|
||||
<Text
|
||||
accessibilityLabel="Some crazy texts"
|
||||
accessibilityLabel="Image text"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
|
|
@ -43754,7 +44016,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
|
|||
]
|
||||
}
|
||||
>
|
||||
Some crazy texts
|
||||
Image text
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,35 @@
|
|||
import React from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import { dequal } from 'dequal';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Text } from 'react-native';
|
||||
|
||||
import Image from './Image';
|
||||
import Audio from './Audio';
|
||||
import Video from './Video';
|
||||
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(({
|
||||
attachments, timeFormat, showAttachment, getCustomEmoji, theme
|
||||
|
|
@ -24,6 +48,9 @@ const Attachments = React.memo(({
|
|||
if (file.video_url) {
|
||||
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
|
||||
return <Reply key={index} index={index} attachment={file} timeFormat={timeFormat} getCustomEmoji={getCustomEmoji} theme={theme} />;
|
||||
|
|
@ -38,5 +65,12 @@ Attachments.propTypes = {
|
|||
theme: PropTypes.string
|
||||
};
|
||||
Attachments.displayName = 'MessageAttachments';
|
||||
AttachedActions.propTypes = {
|
||||
attachment: PropTypes.shape({
|
||||
actions: PropTypes.array,
|
||||
text: PropTypes.string
|
||||
}),
|
||||
theme: PropTypes.string
|
||||
};
|
||||
|
||||
export default Attachments;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ class MessageContainer extends React.Component {
|
|||
onEncryptedPress: PropTypes.func,
|
||||
onDiscussionPress: PropTypes.func,
|
||||
onThreadPress: PropTypes.func,
|
||||
onAnswerButtonPress: PropTypes.func,
|
||||
errorActionsShow: PropTypes.func,
|
||||
replyBroadcast: PropTypes.func,
|
||||
reactionInit: PropTypes.func,
|
||||
|
|
@ -64,6 +65,7 @@ class MessageContainer extends React.Component {
|
|||
onEncryptedPress: () => {},
|
||||
onDiscussionPress: () => {},
|
||||
onThreadPress: () => {},
|
||||
onAnswerButtonPress: () => {},
|
||||
errorActionsShow: () => {},
|
||||
replyBroadcast: () => {},
|
||||
reactionInit: () => {},
|
||||
|
|
@ -190,6 +192,13 @@ class MessageContainer extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
onAnswerButtonPress = (msg) => {
|
||||
const { onAnswerButtonPress } = this.props;
|
||||
if (onAnswerButtonPress) {
|
||||
onAnswerButtonPress(msg, undefined, false);
|
||||
}
|
||||
}
|
||||
|
||||
onIgnoredMessagePress = () => {
|
||||
this.setState({ isManualUnignored: true });
|
||||
}
|
||||
|
|
@ -366,6 +375,7 @@ class MessageContainer extends React.Component {
|
|||
onDiscussionPress: this.onDiscussionPress,
|
||||
onReactionLongPress: this.onReactionLongPress,
|
||||
onLinkPress: this.onLinkPress,
|
||||
onAnswerButtonPress: this.onAnswerButtonPress,
|
||||
jumpToMessage,
|
||||
threadBadgeColor,
|
||||
toggleFollowThread,
|
||||
|
|
|
|||
|
|
@ -974,6 +974,7 @@ class RoomView extends React.Component {
|
|||
onEncryptedPress={this.onEncryptedPress}
|
||||
onDiscussionPress={this.onDiscussionPress}
|
||||
onThreadPress={this.onThreadPress}
|
||||
onAnswerButtonPress={this.sendMessage}
|
||||
showAttachment={this.showAttachment}
|
||||
reactionInit={this.onReactionInit}
|
||||
replyBroadcast={this.replyBroadcast}
|
||||
|
|
|
|||
|
|
@ -855,14 +855,30 @@ stories.add('Custom style', () => (
|
|||
<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
|
||||
));
|
||||
|
||||
stories.add('Thumbnail from server', () => (
|
||||
stories.add('Show a button as attachment', () => (
|
||||
<Message
|
||||
msg='this is a thumbnail'
|
||||
attachments={[{
|
||||
text: 'Some crazy texts',
|
||||
thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
|
||||
title: 'Joker',
|
||||
title_link: 'https://www.imdb.com/title/tt7286456/'
|
||||
text: 'Test Button',
|
||||
actions: [
|
||||
{
|
||||
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