function MainComponent() { const [requirements, setRequirements] = React.useState([]); const [newRequirement, setNewRequirement] = React.useState(''); const [inputVisible, setInputVisible] = React.useState({}); const handleAddRequirement = (parentId = null, text = newRequirement)=>{ if (text.trim() !== '') { const newReq = { id: Date.now(), text, children: [] }; if (parentId) { setRequirements((prevRequirements)=>prevRequirements.map((req)=>{ if (req.id === parentId) { return { ...req, children: [ ...req.children, newReq ] }; } return req; })); } else { setRequirements((prevRequirements)=>[ ...prevRequirements, newReq ]); } setNewRequirement(''); } }; const handleDragStart = (event, id)=>{ event.dataTransfer.setData('text/plain', id); }; const handleDragOver = (event)=>{ event.preventDefault(); }; const handleDrop = (event, parentId)=>{ const childId = parseInt(event.dataTransfer.getData('text'), 10); const childReq = requirements.find((req)=>req.id === childId); if (childReq && childId !== parentId && !isDescendant(childReq, parentId)) { const updatedRequirements = traverseAndRemove(requirements, childId); setRequirements(()=>traverseAndAdd(updatedRequirements, parentId, childReq)); } }; const isDescendant = (item, parentId)=>{ if (item.id === parentId) return true; return item.children.some((child)=>isDescendant(child, parentId)); }; const traverseAndRemove = (items, id)=>items.map((item)=>({ ...item, children: traverseAndRemove(item.children, id) })).filter((item)=>item.id !== id); const traverseAndAdd = (items, parentId, newChild)=>items.map((item)=>({ ...item, children: item.id === parentId ? [ ...item.children, newChild ] : traverseAndAdd(item.children, parentId, newChild) })); const handleRequirementChange = (id, newText)=>{ setRequirements((prevRequirements)=>prevRequirements.map((req)=>req.id === id ? { ...req, text: newText } : req)); }; const toggleInputVisibility = (id)=>{ setInputVisible((prevState)=>({ ...prevState, [id]: !prevState[id] })); }; const renderRequirement = (requirement)=>{ const isInputVisible = !!inputVisible[requirement.id]; return /*#__PURE__*/ React.createElement("li", { key: requirement.id, draggable: true, onDragStart: (event)=>handleDragStart(event, requirement.id), className: "cursor-move", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-gray-100 rounded flex items-center justify-between relative", onDragOver: handleDragOver, onDrop: (event)=>handleDrop(event, requirement.id), __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", onClick: ()=>{ const updatedText = prompt('要件を変更してください:', requirement.text); if (updatedText !== null) { handleRequirementChange(requirement.id, updatedText); } }, __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg mr-2", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "✋"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, requirement.text)), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:text-blue-600 text-xl focus:outline-none absolute right-2 top-1/2 transform -translate-y-1/2", onClick: ()=>toggleInputVisibility(requirement.id), __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "+")), isInputVisible && /*#__PURE__*/ React.createElement("div", { className: "mt-2 ml-6", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `childRequirement-${requirement.id}`, className: "border border-gray-300 rounded p-2 w-full", placeholder: "子要件を入力してください...", onKeyDown: (e)=>{ if (e.key === 'Enter') { handleAddRequirement(requirement.id, e.target.value); e.target.value = ''; toggleInputVisibility(requirement.id); } }, __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this })), requirement.children.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "ml-6 mt-2 space-y-2 border-l border-gray-200", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, requirement.children.map(renderRequirement))); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-noto-sans", __source: { fileName: "", lineNumber: 146, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 7 }, __self: this }, "要件整理システム"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "newRequirement", className: "block mb-2 font-bold", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, "新しい要件:"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "newRequirement", name: "newRequirement", className: "flex-grow border border-gray-300 rounded-l p-2", placeholder: "要件を入力してください...", value: newRequirement, onChange: (e)=>setNewRequirement(e.target.value), __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-r", onClick: ()=>handleAddRequirement(), __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "追加"))), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 170, columnNumber: 7 }, __self: this }, requirements.map(renderRequirement))); }