alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 21:34:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: resizable textarea

Browse source
This commit is contained in:
Jing Hua 2023-03-04 09:56:40 +08:00
parent fb21fb0f62
commit 79c7dd2603
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/Chat/ChatContent/Message/MessageContent.tsx
View file

@ -254,15 +254,25 @@ const EditView = ({
]); ]);
const [_content, _setContent] = useState<string>(content); const [_content, _setContent] = useState<string>(content);
const textareaRef = React.createRef<HTMLTextAreaElement>();
const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
textareaRef.current.style.height = `${e.target.scrollHeight}px`;
}
};
return ( return (
<> <>
<textarea <textarea
className='m-0 resize-none border border-gray-400/30 rounded-lg bg-transparent p-1 focus:ring-0 focus-visible:ring-0' ref={textareaRef}
className='m-0 resize-none border border-gray-400/30 rounded-lg bg-transparent px-2 py-1 overflow-y-hidden focus:ring-0 focus-visible:ring-0'
onChange={(e) => { onChange={(e) => {
_setContent(e.target.value); _setContent(e.target.value);
}} }}
value={_content} value={_content}
onInput={handleInput}
rows={10} rows={10}
></textarea> ></textarea>
<div className='text-center mt-2 flex justify-center'> <div className='text-center mt-2 flex justify-center'>