meses-messaging/src/ui/components/MessagingPopup/MessageList/MessageListFooter/index.jsx

Meses messaging SDK in JavaScript

import React from 'react'
import styles from './styles.css'
import TiChevronRight from 'react-icons/lib/ti/chevron-right'

class MessageListFooter extends React.Component {
  constructor() {
    super()
  }

  componentDidMount() { this.text.focus() }

  handleKeypress(e) {
    if (e.nativeEvent.keyCode === 13 && !e.nativeEvent.shiftKey)
      this.handleOnClickSendButton()
  }

  handleOnClickSendButton() {
    let { sendButtonOnClick } = this.props
    sendButtonOnClick(this.text.value); this.text.value = ''
    this.text.focus()
  }
  
  render() {
    return (
      <div className={ styles.messageListFooter }>
        <textarea 
          className={ styles.textArea }
          onKeyUp={ this.handleKeypress.bind(this) }
          ref={ text => this.text = text }>
        </textarea>
        <div className={ styles.btnContainer } >
          <span className={ styles.btnSend } onClick={ this.handleOnClickSendButton.bind(this) }>
            <TiChevronRight />
          </span>
        </div>
      </div>
    )
  }
}

export default MessageListFooter