106 lines
5.1 KiB
JavaScript
106 lines
5.1 KiB
JavaScript
// 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>
|
|
);
|
|
}
|