You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ChatInput.js 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. // @flow
  2. import React, { Component } from 'react';
  3. import Emoji from 'react-emoji-render';
  4. import TextareaAutosize from 'react-textarea-autosize';
  5. import type { Dispatch } from 'redux';
  6. import { translate } from '../../../base/i18n';
  7. import { Icon, IconPlane } from '../../../base/icons';
  8. import { connect } from '../../../base/redux';
  9. import SmileysPanel from './SmileysPanel';
  10. /**
  11. * The type of the React {@code Component} props of {@link ChatInput}.
  12. */
  13. type Props = {
  14. /**
  15. * Invoked to send chat messages.
  16. */
  17. dispatch: Dispatch<any>,
  18. /**
  19. * Optional callback to invoke when the chat textarea has auto-resized to
  20. * fit overflowing text.
  21. */
  22. onResize: ?Function,
  23. /**
  24. * Callback to invoke on message send.
  25. */
  26. onSend: Function,
  27. /**
  28. * Invoked to obtain translated strings.
  29. */
  30. t: Function
  31. };
  32. /**
  33. * The type of the React {@code Component} state of {@link ChatInput}.
  34. */
  35. type State = {
  36. /**
  37. * User provided nickname when the input text is provided in the view.
  38. */
  39. message: string,
  40. /**
  41. * Whether or not the smiley selector is visible.
  42. */
  43. showSmileysPanel: boolean
  44. };
  45. /**
  46. * Implements a React Component for drafting and submitting a chat message.
  47. *
  48. * @extends Component
  49. */
  50. class ChatInput extends Component<Props, State> {
  51. _textArea: ?HTMLTextAreaElement;
  52. state = {
  53. message: '',
  54. showSmileysPanel: false
  55. };
  56. /**
  57. * Initializes a new {@code ChatInput} instance.
  58. *
  59. * @param {Object} props - The read-only properties with which the new
  60. * instance is to be initialized.
  61. */
  62. constructor(props: Props) {
  63. super(props);
  64. this._textArea = null;
  65. // Bind event handlers so they are only bound once for every instance.
  66. this._onDetectSubmit = this._onDetectSubmit.bind(this);
  67. this._onMessageChange = this._onMessageChange.bind(this);
  68. this._onSmileySelect = this._onSmileySelect.bind(this);
  69. this._onSubmitMessage = this._onSubmitMessage.bind(this);
  70. this._onToggleSmileysPanel = this._onToggleSmileysPanel.bind(this);
  71. this._setTextAreaRef = this._setTextAreaRef.bind(this);
  72. }
  73. /**
  74. * Implements React's {@link Component#componentDidMount()}.
  75. *
  76. * @inheritdoc
  77. */
  78. componentDidMount() {
  79. /**
  80. * HTML Textareas do not support autofocus. Simulate autofocus by
  81. * manually focusing.
  82. */
  83. this._focus();
  84. }
  85. /**
  86. * Implements React's {@link Component#render()}.
  87. *
  88. * @inheritdoc
  89. * @returns {ReactElement}
  90. */
  91. render() {
  92. const smileysPanelClassName = `${this.state.showSmileysPanel
  93. ? 'show-smileys' : 'hide-smileys'} smileys-panel`;
  94. return (
  95. <div className = { `chat-input-container${this.state.message.trim().length ? ' populated' : ''}` }>
  96. <div id = 'chat-input' >
  97. <div className = 'smiley-input'>
  98. <div id = 'smileysarea'>
  99. <div id = 'smileys'>
  100. <Emoji
  101. onClick = { this._onToggleSmileysPanel }
  102. text = ':)' />
  103. </div>
  104. </div>
  105. <div className = { smileysPanelClassName }>
  106. <SmileysPanel
  107. onSmileySelect = { this._onSmileySelect } />
  108. </div>
  109. </div>
  110. <div className = 'usrmsg-form'>
  111. <TextareaAutosize
  112. id = 'usermsg'
  113. inputRef = { this._setTextAreaRef }
  114. maxRows = { 5 }
  115. onChange = { this._onMessageChange }
  116. onHeightChange = { this.props.onResize }
  117. onKeyDown = { this._onDetectSubmit }
  118. placeholder = { this.props.t('chat.messagebox') }
  119. value = { this.state.message } />
  120. </div>
  121. <div className = 'send-button-container'>
  122. <div
  123. className = 'send-button'
  124. onClick = { this._onSubmitMessage }>
  125. <Icon src = { IconPlane } />
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. );
  131. }
  132. /**
  133. * Place cursor focus on this component's text area.
  134. *
  135. * @private
  136. * @returns {void}
  137. */
  138. _focus() {
  139. this._textArea && this._textArea.focus();
  140. }
  141. _onSubmitMessage: () => void;
  142. /**
  143. * Submits the message to the chat window.
  144. *
  145. * @returns {void}
  146. */
  147. _onSubmitMessage() {
  148. const trimmed = this.state.message.trim();
  149. if (trimmed) {
  150. this.props.onSend(trimmed);
  151. this.setState({ message: '' });
  152. }
  153. }
  154. _onDetectSubmit: (Object) => void;
  155. /**
  156. * Detects if enter has been pressed. If so, submit the message in the chat
  157. * window.
  158. *
  159. * @param {string} event - Keyboard event.
  160. * @private
  161. * @returns {void}
  162. */
  163. _onDetectSubmit(event) {
  164. if (event.keyCode === 13
  165. && event.shiftKey === false) {
  166. event.preventDefault();
  167. this._onSubmitMessage();
  168. }
  169. }
  170. _onMessageChange: (Object) => void;
  171. /**
  172. * Updates the known message the user is drafting.
  173. *
  174. * @param {string} event - Keyboard event.
  175. * @private
  176. * @returns {void}
  177. */
  178. _onMessageChange(event) {
  179. this.setState({ message: event.target.value });
  180. }
  181. _onSmileySelect: (string) => void;
  182. /**
  183. * Appends a selected smileys to the chat message draft.
  184. *
  185. * @param {string} smileyText - The value of the smiley to append to the
  186. * chat message.
  187. * @private
  188. * @returns {void}
  189. */
  190. _onSmileySelect(smileyText) {
  191. this.setState({
  192. message: `${this.state.message} ${smileyText}`,
  193. showSmileysPanel: false
  194. });
  195. this._focus();
  196. }
  197. _onToggleSmileysPanel: () => void;
  198. /**
  199. * Callback invoked to hide or show the smileys selector.
  200. *
  201. * @private
  202. * @returns {void}
  203. */
  204. _onToggleSmileysPanel() {
  205. this.setState({ showSmileysPanel: !this.state.showSmileysPanel });
  206. this._focus();
  207. }
  208. _setTextAreaRef: (?HTMLTextAreaElement) => void;
  209. /**
  210. * Sets the reference to the HTML TextArea.
  211. *
  212. * @param {HTMLAudioElement} textAreaElement - The HTML text area element.
  213. * @private
  214. * @returns {void}
  215. */
  216. _setTextAreaRef(textAreaElement: ?HTMLTextAreaElement) {
  217. this._textArea = textAreaElement;
  218. }
  219. }
  220. export default translate(connect()(ChatInput));