import React from 'react'; import PropTypes from 'prop-types'; import { MessageType } from './Types'; import Icon from './Icon'; import Button from './Button'; 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, body: '', 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] : '' }) this.setState({ body: '', attach: '' }) } componentDidMount() { 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`; } attachmentChanged = (event) => { this.setState({ attach: event.target.value }) } openfile = () => { const input = this.fileinput.current; if (this.state.attach) { this.setState({ attach: '' }) } else { input.click() } } render() { return (
e.stopPropagation()} style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach} onChange={this.attachmentChanged} />