You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
// frontend/components/tasks/TreeAdd.tsx — 인라인 새 프로젝트 생성
|
|
"use client";
|
|
import { useState } from "react";
|
|
import { Icon } from "@/components/Icon";
|
|
|
|
export function TreeAdd({
|
|
depth,
|
|
placeholder,
|
|
onAdd,
|
|
}: {
|
|
depth: number;
|
|
placeholder: string;
|
|
onAdd: (name: string) => void;
|
|
}) {
|
|
const [editing, setEditing] = useState(false);
|
|
const [val, setVal] = useState("");
|
|
const commit = () => {
|
|
const v = val.trim();
|
|
if (v) onAdd(v);
|
|
setVal("");
|
|
setEditing(false);
|
|
};
|
|
if (!editing) {
|
|
return (
|
|
<button
|
|
className="tree-add"
|
|
style={{ paddingLeft: 8 + depth * 15 }}
|
|
onClick={() => setEditing(true)}
|
|
>
|
|
<Icon name="plus" /> {placeholder}
|
|
</button>
|
|
);
|
|
}
|
|
return (
|
|
<div className="tree-addrow" style={{ paddingLeft: 8 + depth * 15 }}>
|
|
<input
|
|
autoFocus
|
|
value={val}
|
|
placeholder={placeholder}
|
|
onChange={(e) => setVal(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") commit();
|
|
if (e.key === "Escape") {
|
|
setVal("");
|
|
setEditing(false);
|
|
}
|
|
}}
|
|
onBlur={commit}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|