59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
|
|
interface Props {
|
|
onSubmit: (body: string) => Promise<void>;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
// Composer is the inline "add a comment" box shown under a line.
|
|
export function Composer({ onSubmit, onCancel }: Props) {
|
|
const [text, setText] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
const ref = useRef<HTMLTextAreaElement>(null);
|
|
|
|
useEffect(() => {
|
|
ref.current?.focus();
|
|
}, []);
|
|
|
|
const submit = async () => {
|
|
if (!text.trim()) return;
|
|
setBusy(true);
|
|
try {
|
|
await onSubmit(text.trim());
|
|
setText('');
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="composer">
|
|
<textarea
|
|
ref={ref}
|
|
className="composer-input"
|
|
placeholder="Leave a comment on this line…"
|
|
value={text}
|
|
disabled={busy}
|
|
onChange={(e) => setText(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') submit();
|
|
if (e.key === 'Escape') onCancel();
|
|
}}
|
|
/>
|
|
<div className="composer-actions">
|
|
<span className="composer-hint">markdown · ⌘⏎ to add · esc to cancel</span>
|
|
<button className="btn-ghost" onClick={onCancel} disabled={busy}>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="btn-primary"
|
|
onClick={submit}
|
|
disabled={busy || !text.trim()}
|
|
>
|
|
Add comment
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|