55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { useState, useRef, useEffect } from "react";
|
|
import { useBoardStore } from "@/stores/board-store";
|
|
|
|
interface AddCardInputProps {
|
|
columnId: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function AddCardInput({ columnId, onClose }: AddCardInputProps) {
|
|
const [value, setValue] = useState("");
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const addCard = useBoardStore((s) => s.addCard);
|
|
|
|
useEffect(() => {
|
|
textareaRef.current?.focus();
|
|
}, []);
|
|
|
|
function handleSubmit() {
|
|
const trimmed = value.trim();
|
|
if (trimmed) {
|
|
addCard(columnId, trimmed);
|
|
setValue("");
|
|
// Keep the input open for quick multi-add
|
|
textareaRef.current?.focus();
|
|
}
|
|
}
|
|
|
|
function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSubmit();
|
|
} else if (e.key === "Escape") {
|
|
onClose();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="px-2 pb-2">
|
|
<textarea
|
|
ref={textareaRef}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
onBlur={() => {
|
|
if (!value.trim()) onClose();
|
|
}}
|
|
aria-label="Card title"
|
|
placeholder="Card title..."
|
|
rows={2}
|
|
className="w-full resize-none rounded-lg bg-pylon-surface p-3 text-sm text-pylon-text shadow-sm outline-none placeholder:text-pylon-text-secondary focus:ring-1 focus:ring-pylon-accent"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|