Permalink
Browse files

Add support for system message

  • Loading branch information...
adrianchinghc committed Oct 18, 2017
1 parent e7fdf43 commit 856514a25fab0dc477f20711812449e345765044
Showing with 170 additions and 44 deletions.
  1. +15 −1 README.md
  2. +17 −1 example/App.js
  3. +6 −0 example/data/messages.js
  4. +14 −7 example/data/old_messages.js
  5. +39 −27 example/yarn.lock
  6. +4 −0 src/GiftedChat.js
  7. +21 −7 src/Message.js
  8. +3 −1 src/MessageContainer.js
  9. +51 −0 src/SystemMessage.js
View
@@ -21,6 +21,7 @@ The most complete chat UI for React Native (formerly known as Gifted Messenger).
- Multiline TextInput
- InputToolbar avoiding keyboard
- Redux support
- System message
## Dependency
@@ -88,7 +89,7 @@ See [example/App.js](example/App.js) for a working demo!
## Message object
e.g.
e.g. Chat Message
```js
{
@@ -105,6 +106,18 @@ e.g.
}
```
e.g. System Message
```js
{
_id: 1,
text: 'This is a system message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
system: true,
// Any additional custom parameters are passed through
}
```
## Props
- **`messages`** _(Array)_ - Messages to display
@@ -127,6 +140,7 @@ e.g.
- **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped
- **`renderAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`
- **`renderBubble`** _(Function)_ - Custom message bubble
- **`renderSystemMessage`** _(Function)_ - Custom system message
- **`onLongPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
- **`renderMessage`** _(Function)_ - Custom message container
- **`renderMessageText`** _(Function)_ - Custom message text
View
@@ -6,7 +6,7 @@ import {
View,
} from 'react-native';
import {GiftedChat, Actions, Bubble} from 'react-native-gifted-chat';
import {GiftedChat, Actions, Bubble, SystemMessage} from 'react-native-gifted-chat';
import CustomActions from './CustomActions';
import CustomView from './CustomView';
@@ -25,6 +25,7 @@ export default class Example extends React.Component {
this.onReceive = this.onReceive.bind(this);
this.renderCustomActions = this.renderCustomActions.bind(this);
this.renderBubble = this.renderBubble.bind(this);
this.renderSystemMessage = this.renderSystemMessage.bind(this);
this.renderFooter = this.renderFooter.bind(this);
this.onLoadEarlier = this.onLoadEarlier.bind(this);
@@ -165,6 +166,20 @@ export default class Example extends React.Component {
);
}
renderSystemMessage(props) {
return (
<SystemMessage
{...props}
containerStyle={{
marginBottom: 15,
}}
textStyle={{
fontSize: 14,
}}
/>
);
}
renderCustomView(props) {
return (
<CustomView
@@ -201,6 +216,7 @@ export default class Example extends React.Component {
renderActions={this.renderCustomActions}
renderBubble={this.renderBubble}
renderSystemMessage={this.renderSystemMessage}
renderCustomView={this.renderCustomView}
renderFooter={this.renderFooter}
/>
View
@@ -23,4 +23,10 @@ module.exports = [
name: 'React Native',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: "You are officially rocking GiftedChat.",
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
system: true,
},
];
@@ -1,20 +1,27 @@
module.exports = [
{
_id: Math.round(Math.random() * 1000000),
text: 'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
text:
"It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/",
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
name: "Developer"
}
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
text: "React Native lets you build mobile apps using only JavaScript",
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
name: "Developer"
}
},
];
{
_id: Math.round(Math.random() * 1000000),
text: "This is a system message.",
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
system: true
}
];;
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -15,6 +15,7 @@ import * as utils from './utils';
import Actions from './Actions';
import Avatar from './Avatar';
import Bubble from './Bubble';
import SystemMessage from "./SystemMessage";;
import MessageImage from './MessageImage';
import MessageText from './MessageText';
import Composer from './Composer';
@@ -528,6 +529,7 @@ GiftedChat.defaultProps = {
onPressAvatar: null,
renderAvatarOnTop: false,
renderBubble: null,
renderSystemMessage: null,
onLongPress: null,
renderMessage: null,
renderMessageText: null,
@@ -578,6 +580,7 @@ GiftedChat.propTypes = {
onPressAvatar: PropTypes.func,
renderAvatarOnTop: PropTypes.bool,
renderBubble: PropTypes.func,
renderSystemMessage: PropTypes.func,
onLongPress: PropTypes.func,
renderMessage: PropTypes.func,
renderMessageText: PropTypes.func,
@@ -609,6 +612,7 @@ export {
Actions,
Avatar,
Bubble,
SystemMessage,
MessageImage,
MessageText,
Composer,
View
@@ -8,6 +8,7 @@ import {
import Avatar from './Avatar';
import Bubble from './Bubble';
import SystemMessage from './SystemMessage';
import Day from './Day';
import {isSameUser, isSameDay} from './utils';
@@ -42,6 +43,17 @@ export default class Message extends React.Component {
return <Bubble {...bubbleProps}/>;
}
renderSystemMessage() {
if (this.props.currentMessage.system) {
const systemMessageProps = this.getInnerComponentProps();
if (this.props.renderSystemMessage) {
return this.props.renderSystemMessage(systemMessageProps);
}
return <SystemMessage {...systemMessageProps} />;
}
return null;
}
renderAvatar() {
if (this.props.user._id === this.props.currentMessage.user._id && !this.props.showUserAvatar) {
return null;
@@ -58,13 +70,13 @@ export default class Message extends React.Component {
return (
<View>
{this.renderDay()}
<View style={[styles[this.props.position].container, {
marginBottom: isSameUser(this.props.currentMessage, this.props.nextMessage) ? 2 : 10,
}, this.props.containerStyle[this.props.position]]}>
{this.props.position === 'left' ? this.renderAvatar() : null}
{this.renderBubble()}
{this.props.position === 'right' ? this.renderAvatar() : null}
</View>
{this.props.currentMessage.system ?
this.renderSystemMessage() :
<View style={[styles[this.props.position].container, { marginBottom: isSameUser(this.props.currentMessage, this.props.nextMessage) ? 2 : 10 }, this.props.containerStyle[this.props.position]]}>
{this.props.position === "left" ? this.renderAvatar() : null}
{this.renderBubble()}
{this.props.position === "right" ? this.renderAvatar() : null}
</View>}
</View>
);
}
@@ -95,6 +107,7 @@ Message.defaultProps = {
renderAvatar: undefined,
renderBubble: null,
renderDay: null,
renderSystemMessage: null,
position: 'left',
currentMessage: {},
nextMessage: {},
@@ -108,6 +121,7 @@ Message.propTypes = {
showUserAvatar: PropTypes.bool,
renderBubble: PropTypes.func,
renderDay: PropTypes.func,
renderSystemMessage: PropTypes.func,
position: PropTypes.oneOf(['left', 'right']),
currentMessage: PropTypes.object,
nextMessage: PropTypes.object,
View
@@ -107,7 +107,9 @@ export default class MessageContainer extends React.Component {
console.warn('GiftedChat: `_id` is missing for message', JSON.stringify(message));
}
if (!message.user) {
console.warn('GiftedChat: `user` is missing for message', JSON.stringify(message));
if (!message.system) {
console.warn("GiftedChat: `user` is missing for message", JSON.stringify(message));
}
message.user = {};
}
Oops, something went wrong.

1 comment on commit 856514a

@mariyahina

This comment has been minimized.

Show comment
Hide comment
@mariyahina

mariyahina Dec 7, 2017

Kinldy Provide info can we connect php socket to send sms from web?
and after touch text message input field hide bellow the keyborad

mariyahina commented on 856514a Dec 7, 2017

Kinldy Provide info can we connect php socket to send sms from web?
and after touch text message input field hide bellow the keyborad

Please sign in to comment.