import React from 'react'; import PropTypes from 'prop-types'; import { MessageType } from './Types'; import Icon from './Icon'; import Button from './Button'; import UploadButton from './UploadButton'; export default class MessageInput extends React.Component { constructor(props) { super(props); this.textarea = React.createRef(); this.fileinput = React.createRef(); this.state = { isActive: false, mid: this.props.data.mid, rid: this.props.data.rid || 0, to: this.props.data.to || {}, body: this.props.text || '', attach: '' }; } handleCtrlEnter = (event) => { if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) { this.onSubmit({}); } } onSubmit = (event) => { if (event.preventDefault) { event.preventDefault(); } const input = this.fileinput.current; this.props.onSend({ mid: this.state.mid, rid: this.state.rid, body: this.state.body, attach: this.state.attach ? input.files[0] : '', to: this.state.to }); this.setState({ body: '', attach: '' }); this.textarea.current.style.height = ''; } componentDidMount() { const isMobile = window.matchMedia('only screen and (max-width: 850px)'); if (!isMobile.matches) { this.textarea.current.focus(); } } textChanged = (event) => { this.setState({ body: event.target.value }); const el = this.textarea.current; const offset = el.offsetHeight - el.clientHeight; const height = el.scrollHeight + offset; el.style.height = `${height + offset}px`; } uploadValueChanged = (attach) => { this.setState({ attach: attach }); } render() { return (