56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import block from 'bem-css-modules';
|
|
import React, { ReactNode, useState } from 'react';
|
|
|
|
import { PaperPlaneIcon } from './icons';
|
|
import styles from './Input.module.css';
|
|
|
|
const b = block(styles, 'Input');
|
|
|
|
interface InputProps {
|
|
disabled?: boolean;
|
|
onSend?: (text: string) => void;
|
|
}
|
|
|
|
export function Input({ disabled, onSend }: InputProps): ReactNode {
|
|
const [input, setInput] = useState('');
|
|
|
|
const handleSend = () => {
|
|
const text = input.trim();
|
|
|
|
if (!text || disabled) {
|
|
return;
|
|
}
|
|
|
|
setInput('');
|
|
onSend?.(text);
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={b()}>
|
|
<textarea
|
|
className={b('field')}
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Type your message here..."
|
|
rows={1}
|
|
disabled={disabled}
|
|
/>
|
|
<button
|
|
className={b('send')}
|
|
onClick={handleSend}
|
|
disabled={disabled || !input.trim()}
|
|
>
|
|
<PaperPlaneIcon />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|