import React, { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import { useFormState } from 'react-use-form-state'; import { MessageType } from './Types'; import Icon from './Icon'; import Button from './Button'; import UploadButton from './UploadButton'; export default function MessageInput({ text, data, rows, children, onSend }) { let textareaRef = useRef(); let fileinput = useRef(); let updateFocus = () => { const isDesktop = window.matchMedia('(min-width: 62.5rem)'); if (isDesktop.matches) { textareaRef.current.focus(); } }; useEffect(() => { textChanged(); updateFocus(); }, []); let handleCtrlEnter = (event) => { if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) { onSubmit({}); } }; let textChanged = (event) => { const el = textareaRef.current; const offset = el.offsetHeight - el.clientHeight; const height = el.scrollHeight + offset; el.style.height = `${height + offset}px`; }; const [attach, setAttach] = useState(''); const [formState, { textarea }] = useFormState({ body: text }); let uploadValueChanged = (attach) => { setAttach(attach); }; let onSubmit = (event) => { if (event.preventDefault) { event.preventDefault(); } const input = fileinput.current; onSend({ mid: data.mid, rid: data.rid || 0, body: formState.values.body, attach: attach ? input.files[0] : '', to: data.to || {} }); setAttach(''); formState.clearField('body'); textareaRef.current.style.height = ''; updateFocus(); }; return (