shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Unify toolbox drag and drop reorder behavior
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-01 20:00:47 +02:00
parent a6d35c6e6b
commit 1879b245fb
17 changed files with 1258 additions and 929 deletions
Download patch file Download diff file Expand all files Collapse all files

14
website/src/features/toolboxes/ToolboxCard.jsx
View file

@ -20,25 +20,23 @@ export function formatDate(value) {
return new Intl.DateTimeFormat("fr-FR", { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
}
export function ToolboxCard({ toolbox, game, actions, draggingToolboxId, dropTarget, onDragStart }) {
export function ToolboxCard({ toolbox, game, actions, reorder }) {
const gameCoverImage = getGameCardCover(game);
const coverImage = gameCoverImage || toolbox.icon || DEFAULT_TOOLBOX_ICON;
const isDragging = draggingToolboxId === toolbox.id;
const isDropTarget = dropTarget.id === toolbox.id;
const className = [
"card",
"toolbox-card",
isDragging ? "is-dragging" : "",
isDropTarget ? "is-drop-target" : "",
isDropTarget && dropTarget.placement === "after" ? "drop-after" : ""
reorder.isItemDragging(toolbox.id) ? "is-dragging" : "",
reorder.isItemDropTarget(toolbox.id) ? "is-drop-target" : "",
reorder.getDropPlacement("item", toolbox.id) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return (
<article className={className} data-toolbox-id={toolbox.id}>
<article className={className} {...reorder.getItemProps({ itemId: toolbox.id })}>
<button
className="toolbox-card-drag-handle"
type="button"
onPointerDown={(event) => onDragStart(event, toolbox.id)}
onPointerDown={(event) => reorder.itemReorder.startDrag(event, toolbox.id)}
aria-label={`Déplacer ${toolbox.name}`}
title="Déplacer"
>