Extract equipment planner components

website/src/features/toolboxes/modules/EquipmentPlannerItem.jsx

@@ -0,0 +1,106 @@
+// Rôle : rend une ligne d'équipement et délègue ses panneaux d'édition spécialisés.
+import { useState } from "react";
+import { Icon } from "../../../components/Icon.jsx";
+import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
+import { DETAIL_TABS, getEquipmentTabLabel } from "./equipmentPlannerOptions.js";
+import { CharacteristicsEditor, EquipmentDisplay, MaterialsEditor, SocketItemsEditor, TabIcon } from "./EquipmentPlannerEditors.jsx";
+
+export function EquipmentItem({ equipment, reorder, textContent, onUpdate, onDelete }) {
+  const [activeTab, setActiveTab] = useState("stats");
+  const [detailEditing, setDetailEditing] = useState(false);
+  const nameEdit = useInlineEdit({
+    value: equipment.name,
+    onCommit: (name) => onUpdate((current) => ({ ...current, name: name || current.name })),
+    blurOnEscape: true
+  });
+  const obtainEdit = useInlineEdit({
+    value: equipment.obtain || "",
+    onCommit: (obtain) => onUpdate((current) => ({ ...current, obtain })),
+    commitOnEnter: false
+  });
+  const className = [
+    "equipment-planner-item",
+    equipment.active ? "is-active" : "is-inactive",
+    reorder.isItemDragging(equipment.id) ? "is-dragging" : "",
+    reorder.isItemDropTarget(equipment.id) ? "is-drop-target" : "",
+    reorder.getDropPlacement("item", equipment.id) === "after" ? "drop-after" : ""
+  ].filter(Boolean).join(" ");
+
+  return (
+    <li className={className} {...reorder.getItemProps({ itemId: equipment.id })}>
+      <div className="equipment-planner-line">
+        <button
+          className="task-planner-drag-handle"
+          type="button"
+          onPointerDown={(event) => reorder.itemReorder.startDrag(event, equipment.id)}
+          aria-label={`${textContent.reorderEquipmentTitle || "Déplacer"} ${equipment.name}`}
+          title={textContent.reorderEquipmentTitle || "Déplacer"}
+        >
+          <Icon name="drag" />
+        </button>
+        <div className="equipment-planner-identity">
+          <span className="equipment-planner-type-icon" aria-hidden="true">
+            <Icon name={equipment.icon || "shield"} />
+          </span>
+          <strong {...nameEdit.getContentEditableProps({ className: "equipment-planner-name", title: textContent.renameEquipmentTitle || "Renommer" })}>{equipment.name}</strong>
+        </div>
+        <label className="equipment-planner-include-switch">
+          <input
+            type="checkbox"
+            checked={equipment.active}
+            onChange={(event) => onUpdate((current) => ({ ...current, active: event.target.checked }))}
+          />
+          <span aria-hidden="true" />
+          <b>{textContent.includeInSummaryLabel || "Inclure dans le résumé"}</b>
+        </label>
+        <button
+          type="button"
+          className={`task-planner-settings-button equipment-planner-row-edit-button ${detailEditing ? "active" : ""}`}
+          onClick={() => setDetailEditing((value) => !value)}
+          aria-pressed={detailEditing}
+          title={detailEditing ? textContent.viewModeTitle || "Mode affichage" : textContent.editModeTitle || "Mode édition"}
+        >
+          <Icon name="edit" />
+        </button>
+        <button type="button" className="task-planner-delete-button danger" onClick={onDelete} aria-label={`${textContent.deleteEquipmentTitle || "Supprimer"} ${equipment.name}`} title={textContent.deleteEquipmentTitle || "Supprimer"}>
+          <Icon name="trash" />
+        </button>
+      </div>
+      <div className="equipment-planner-details">
+        {detailEditing ? (
+          <>
+          <div className="equipment-planner-tabs" role="tablist" aria-label={textContent.tabsLabel || "Ajout de caractéristiques"}>
+            {DETAIL_TABS.map((tab) => (
+              <button
+                key={tab}
+                className={`equipment-planner-tab ${activeTab === tab ? "active" : ""}`}
+                type="button"
+                role="tab"
+                aria-selected={activeTab === tab}
+                onClick={() => setActiveTab(tab)}
+                title={getEquipmentTabLabel(tab, textContent)}
+              >
+                <TabIcon tab={tab} />
+                <span>{getEquipmentTabLabel(tab, textContent)}</span>
+              </button>
+            ))}
+          </div>
+          {activeTab === "stats" && <CharacteristicsEditor equipment={equipment} textContent={textContent} editing onUpdate={onUpdate} />}
+          {activeTab === "sockets" && <SocketItemsEditor equipment={equipment} textContent={textContent} editing onUpdate={onUpdate} />}
+          {activeTab === "craft" && (
+            <section className="equipment-planner-craft-tab">
+              <label className="equipment-planner-field">
+                <span>{textContent.obtainLabel || "Obtention"}</span>
+                <textarea {...obtainEdit.getInputProps({ placeholder: textContent.obtainPlaceholder || "Comment obtenir ou créer cet équipement" })} />
+              </label>
+              <MaterialsEditor equipment={equipment} textContent={textContent} editing onUpdate={onUpdate} />
+            </section>
+          )}
+          </>
+        ) : (
+          <EquipmentDisplay equipment={equipment} textContent={textContent} />
+        )}
+      </div>
+    </li>
+  );
+}