Messages Component

    Messages React component represents Messages component.

    • / **F7Messages** - main Messages container
    • **Message** / **F7Message** - single message element
    • **MessagesTitle** / **F7MessagesTitle** - single messages title element

    Messages Properties

    Messages Events

    Single message React component (<Message>) has additional slots for custom elements:

    • **default** - element will be inserted as a child of <div class="message-bubble"> element in the end
    • **start** - element will be inserted in the beginning and direct child of main message element <div class="message">
    • **end** - element will be inserted in the end and direct child of main message element <div class="message">
    • **content-start** - element will be inserted in the beginning and direct child of the <div class="message-content"> element
    • **content-end** - element will be inserted in the end and direct child of the <div class="message-content"> element
    • **bubble-start** - element will be inserted in the beginning and direct child of the <div class="message-bubble"> element
    • **bubble-end** - element will be inserted in the end and direct child of the <div class="message-bubble"> element. Same as **default** slot
    • **header** - element will be inserted in message header
    • **footer** - element will be inserted in message footer
    • **text** - element will be inserted in message text
    • **name** - element will be inserted in message name
    • **image** - element will be inserted in message image (supposed tp be an <img> element)
    • **text-header** - element will be inserted in message text header
    • **text-footer** - element will be inserted in message text footer

    Access To Messages Instance

    If you use automatic initalization to init Messages (with init={true} prop) and need to use Messages API you can access its initialized instance by accessing **.f7Messages** component’s property.

    1. export default class extends React.Component {
    2.   constructor(props) {
    3.     super(props);
    5.     this.state = {
    6.       attachments: [],
    7.       sheetVisible: false,
    8.       typingMessage: null,
    9.       messagesData: [
    10.         {
    11.           type: 'sent',
    12.           text: 'Hi, Kate',
    13.         },
    14.         {
    15.           type: 'sent',
    16.           text: 'How are you?',
    17.         },
    18.         {
    19.           name: 'Kate',
    20.           type: 'received',
    21.           text: 'Hi, I am good!',
    22.           avatar: 'http://lorempixel.com/100/100/people/9',
    23.         },
    24.         {
    25.           name: 'Blue Ninja',
    26.           type: 'received',
    27.           text: 'Hi there, I am also fine, thanks! And how are you?',
    28.           avatar: 'http://lorempixel.com/100/100/people/7',
    29.         },
    30.         {
    31.           type: 'sent',
    32.           text: 'Hey, Blue Ninja! Glad to see you ;)',
    33.         },
    34.         {
    35.           type: 'sent',
    36.           text: 'Hey, look, cutest kitten ever!',
    37.         },
    38.         {
    39.           type: 'sent',
    40.           image: 'http://lorempixel.com/200/260/cats/4/',
    42.         },
    43.         {
    44.           name: 'Kate',
    45.           type: 'received',
    46.           text: 'Nice!',
    47.           avatar: 'http://lorempixel.com/100/100/people/9',
    48.         },
    49.         {
    50.           name: 'Kate',
    51.           type: 'received',
    52.           text: 'Like it very much!',
    53.           avatar: 'http://lorempixel.com/100/100/people/9',
    54.         },
    55.         {
    56.           name: 'Blue Ninja',
    57.           type: 'received',
    58.           text: 'Awesome!',
    59.           avatar: 'http://lorempixel.com/100/100/people/7',
    60.         },
    61.       ],
    62.       images: [
    63.         'http://lorempixel.com/300/300/cats/1/',
    64.         'http://lorempixel.com/200/300/cats/2/',
    65.         'http://lorempixel.com/400/300/cats/3/',
    66.         'http://lorempixel.com/300/150/cats/4/',
    67.         'http://lorempixel.com/150/300/cats/5/',
    68.         'http://lorempixel.com/300/300/cats/6/',
    69.         'http://lorempixel.com/300/300/cats/7/',
    70.         'http://lorempixel.com/200/300/cats/8/',
    71.         'http://lorempixel.com/400/300/cats/9/',
    72.         'http://lorempixel.com/300/150/cats/10/',
    73.       ],
    74.       people: [
    75.         {
    77.           avatar: 'http://lorempixel.com/100/100/people/9',
    78.         },
    79.         {
    80.           name: 'Blue Ninja',
    81.         },
    82.       ],
    83.       answers: [
    84.         'Yes!',
    85.         'No',
    86.         'Hm...',
    87.         'I am not sure',
    88.         'And what about you?',
    89.         'May be ;)',
    90.         'Lorem ipsum dolor sit amet, consectetur',
    91.         'What?',
    92.         'Are you sure?',
    93.         'Of course',
    94.         'Need to think about it',
    95.         'Amazing!!!',
    96.       ],
    97.       responseInProgress: false,
    98.     }
    99.   }
    100.   render() {
    101.     return (
    102.       <Page>
    103.         <Navbar title="Messsages"></Navbar>
    105.         <Messagebar
    106.           placeholder={this.placeholder}
    107.           ref={(el) => {this.messagebarComponent = el}}
    108.           attachmentsVisible={this.attachmentsVisible}
    109.           sheetVisible={this.state.sheetVisible}
    110.         >
    111.           <Link
    112.             iconIos="f7:camera_fill"
    113.             iconMd="material:camera_alt"
    114.             slot="inner-start"
    115.             onClick={() => {this.setState({sheetVisible: !this.state.sheetVisible})}}
    116.           ></Link>
    117.           <Link
    118.             iconIos="f7:arrow_up_fill"
    119.             iconMd="material:send"
    120.             slot="inner-end"
    121.             onClick={this.sendMessage.bind(this)}
    122.           ></Link>
    123.           <MessagebarAttachments>
    124.             {this.state.attachments.map((image, index) => (
    125.               <MessagebarAttachment
    126.                 key={index}
    127.                 image={image}
    128.                 onAttachmentDelete={() => this.deleteAttachment(image)}
    129.               ></MessagebarAttachment>
    130.             ))}
    131.           </MessagebarAttachments>
    132.           <MessagebarSheet>
    133.             {this.state.images.map((image, index) => (
    134.               <MessagebarSheetImage
    135.                 key={index}
    136.                 image={image}
    137.                 checked={this.state.attachments.indexOf(image) >= 0}
    138.                 onChange={this.handleAttachment.bind(this)}
    139.               ></MessagebarSheetImage>
    140.             ))}
    141.           </MessagebarSheet>
    142.         </Messagebar>
    144.         <Messages ref={(el) => {this.messagesComponent = el}}>
    145.           <MessagesTitle><b>Sunday, Feb 9,</b> 12:58</MessagesTitle>
    147.           {this.state.messagesData.map((message, index) => (
    148.             <Message
    149.               key={index}
    150.               type={message.type}
    151.               image={message.image}
    152.               name={message.name}
    153.               avatar={message.avatar}
    154.               first={this.isFirstMessage(message, index)}
    155.               last={this.isLastMessage(message, index)}
    156.               tail={this.isTailMessage(message, index)}
    157.             >
    158.               {message.text && (
    159.                 <span slot="text" dangerouslySetInnerHTML={{__html: message.text}} />
    160.               )}
    161.             </Message>
    162.           ))}
    163.           {this.state.typingMessage && (
    164.             <Message
    165.               type="received"
    166.               typing={true}
    167.               first={true}
    168.               last={true}
    169.               tail={true}
    170.               header={`${this.state.typingMessage.name} is typing`}
    171.               avatar={this.state.typingMessage.avatar}
    172.             ></Message>
    173.           )}
    174.         </Messages>
    175.       </Page>
    176.     )
    177.   }
    179.   get attachmentsVisible() {
    180.     const self = this;
    181.     return self.state.attachments.length > 0;
    182.   }
    183.   get placeholder() {
    184.     const self = this;
    186.   }
    187.   componentDidMount() {
    188.     self.$f7ready(() => {
    189.       self.messagebar = self.messagebarComponent.f7Messagebar;
    190.       self.messages = self.messagesComponent.f7Messages;
    191.     });
    192.   }
    193.   isFirstMessage(message, index) {
    194.     const self = this;
    195.     const previousMessage = self.state.messagesData[index - 1];
    196.     if (message.isTitle) return false;
    197.     if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
    198.     return false;
    199.   }
    200.   isLastMessage(message, index) {
    201.     const self = this;
    202.     const nextMessage = self.state.messagesData[index + 1];
    203.     if (message.isTitle) return false;
    204.     if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
    205.     return false;
    206.   }
    207.   isTailMessage(message, index) {
    208.     const self = this;
    209.     const nextMessage = self.state.messagesData[index + 1];
    210.     if (message.isTitle) return false;
    211.     if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
    212.     return false;
    213.   }
    214.   deleteAttachment(image) {
    215.     const self = this;
    216.     const attachments = self.state.attachments;
    217.     const index = attachments.indexOf(image);
    218.     attachments.splice(index, 1);
    219.     self.setState({ attachments });
    220.   }
    221.   handleAttachment(e) {
    222.     const self = this;
    223.     const attachments = self.state.attachments;
    224.     const index = self.$$(e.target).parents('label.checkbox').index();
    225.     const image = self.state.images[index];
    226.     if (e.target.checked) {
    227.       // Add to attachments
    228.       attachments.unshift(image);
    229.     } else {
    230.       // Remove from attachments
    231.       attachments.splice(attachments.indexOf(image), 1);
    232.     }
    233.     self.setState({ attachments });
    234.   }
    235.   sendMessage() {
    236.     const self = this;
    237.     const text = self.messagebar.getValue().replace(/\n/g, '<br>').trim();
    238.     const messagesToSend = [];
    239.     self.state.attachments.forEach((attachment) => {
    240.       messagesToSend.push({
    241.         image: attachment,
    242.       });
    243.     });
    244.     if (text.trim().length) {
    245.       messagesToSend.push({
    246.         text,
    247.       });
    248.     }
    249.     if (messagesToSend.length === 0) {
    250.       return;
    251.     }
    253.     self.setState({
    254.       // Reset attachments
    255.       attachments: [],
    256.       // Hide sheet
    257.       sheetVisible: false,
    258.       // Send message
    259.       messagesData: [...self.state.messagesData, ...messagesToSend],
    260.     });
    261.     self.messagebar.clear();
    263.     // Focus area
    264.     if (text.length) self.messagebar.focus();
    266.     // Mock response
    267.     if (self.state.responseInProgress) return;
    268.     self.setState({
    269.       responseInProgress: true,
    270.     })
    271.     setTimeout(() => {
    272.       const answer = self.state.answers[Math.floor(Math.random() * self.state.answers.length)];
    273.       const person = self.state.people[Math.floor(Math.random() * self.state.people.length)];
    274.       self.setState({
    275.         typingMessage: {
    276.           name: person.name,
    277.           avatar: person.avatar,
    278.         },
    279.       });
    280.       setTimeout(() => {
    281.         self.setState({
    282.           messagesData: [...self.state.messagesData, {
    283.             text: answer,
    284.             type: 'received',
    285.             name: person.name,
    286.             avatar: person.avatar,
    287.           }],
    288.           typingMessage: null,
    289.           responseInProgress: false,
    290.         });
    291.       }, 4000);
    292.     }, 1000);
    293.   }