Messages Component

Messages React component represents Messages component.

Usage examples

<Messages>
  <Message name="John" text="Hello, Kate!" type="received"></Message>
  <Message name="Kate" text="Hi, John!" type="sent"></Message>
</Messages>

Renders to:

<div class="messages">
  <div class="message message-received">
    <div class="message-name">John</div>
    <div class="message-text">Hello, Kate!</div>
  </div>
  <div class="message message-sent">
    <div class="message-name">Kate</div>
    <div class="message-text">Hi, John!</div>
  </div>
</div>

With Messagebar

Here is how it can be used in React component along with Message Bar:

const MessagesPageDefaultState = {
  name: 'Vladimir',
  messages: [{
      day: 'Wendesday',
      time: '13:34'
    }, {
      name: 'Vladimir',
      text: 'How are you?',
      label: 'Sent in good mood :)',
      avatar: 'http://lorempixel.com/100/100/people/3',
      date: 'Yesterday 13:34'
    }, {
      name: 'Jane',
      text: 'I\'m good, thank you!',
      type: 'received',
      avatar: 'http://lorempixel.com/100/100/people/9',
      date: 'Yesterday at 13:50'
    }
  ]
}

class MessagesPage extends Component {
  constructor() {
    super();

    this.state = {
      name: MessagesPageDefaultState.name,
      messages: MessagesPageDefaultState.messages
    };
  }

  getMessage(props, index) {
    let messageProps = {}

    if (props) {
      messageProps = props;
    }

    return (
      <Message
        {...messageProps}
        key={index}
        onClick={this.onClick.bind(this)}
        onClickText={this.onTextClick.bind(this)}
        onClickName={this.onNameClick.bind(this)}
        onClickAvatar={this.onAvatarClick.bind(this)}>
      </Message>
    );
  }

  render() {
    return (
      <Page toolbarFixed>
        <Navbar backLink="Back" title="Messages" sliding></Navbar>
        <Subnavbar>
          <input type="text" placeholder="Your name" defaultValue={this.state.name} onChange={this.onNameChange.bind(this)}/>
        </Subnavbar>
        <Messages>
        {
          this.state.messages.map((message, index) => {
            return this.getMessage(message, index);
          })
        }
        </Messages>
        <Messagebar placeholder="Message" sendLink="Send" onSubmit={this.onSubmit.bind(this)} />
      </Page>
    );
  }

  onClick() {
    console.log('click');
  }
  
  onTextClick() {
    console.log('text click');
  }
  
  onNameClick() {
    console.log('name click');
  }
  
  onAvatarClick() {
    console.log('avatar click');
  }
      
  onSubmit(text, clear) {              
    if (text.trim().length === 0) return;

    this.setState({
      ...this.state,
      messages: [
        ...this.state.messages,
        {
          name: this.state.name,
          avatar: 'http://lorempixel.com/100/100/people/3',
          text: text,
          date: (function () {
              let now = new Date();
              let hours = now.getHours();
              let hoursString = hours < 10 ? `0${hours}` : `${hours}`; 
              let minutes = now.getMinutes();
              let minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;    
              return `${hours}:${minutesString}`;
          })()
        }]
      });

      clear();
    }
  }

  onNameChange(event) {
    this.setState({
      ...this.state,
      name: event.target.value
    });
  }                
};

Properties

Prop Type Default Description
<Messages> properties
init boolean true Initializes Messages component
autoLayout boolean true Enable Auto Layout to add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically
newMessagesFirst boolean false Enable if you want to use new messages on top, instead of having them on bottom
scrollMessages boolean true Enable/disable messages autoscrolling when adding new message
scrollMessagesOnlyOnEdge boolean false If enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view
messages array Array with initial messages. Each message in array should be presented as object with message parameters
<Message> properties
type string "sent" Message type: "sent" (default) or "received"
text string Single message text
avatar string Single message user's avatar URL
name string Single message user's name
label string Single message label
date string Single message date
day string Conversation day
time string Conversation time
first boolean true Defines that the message is first in the conversation
last boolean true Defines that the message is last in the conversation

Event Properties

Event Description
<Message> events
onClick Event will be triggered when user clicks on message bubble
onClickName Event will be triggered when user clicks on message user's name
onClickText Event will be triggered when user clicks on message text
onClickAvatar Event will be triggered when user clicks on message user's avatar