49 lines
2.8 KiB
JavaScript
49 lines
2.8 KiB
JavaScript
// Rôle : expose la politique réelle de réorganisation dans une géométrie stable sous StrictMode.
|
|
import { createElement as h, StrictMode } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { flushSync } from "react-dom";
|
|
import { useGroupedReorder } from "../../website/src/hooks/useGroupedReorder.js";
|
|
|
|
const items = [
|
|
{ id: "a", group: "A", parent: "p" }, { id: "b", group: "A", parent: "p" },
|
|
{ id: "c", group: "B", parent: "p" }, { id: "d", group: "B", parent: "q" }
|
|
];
|
|
|
|
export function mountGroupedReorderProbe(element) {
|
|
const root = createRoot(element);
|
|
const events = [];
|
|
let options = {
|
|
orientation: "vertical", hierarchy: { enabled: true, stickyParents: true },
|
|
reorderFeatures: { item: { groupChange: true }, group: { reorder: true } }, veto: false
|
|
};
|
|
function Probe({ config }) {
|
|
const reorder = useGroupedReorder({
|
|
...config, namespace: "probe", items,
|
|
getItemGroup: (item) => item.group, getParentId: (item) => item.parent,
|
|
canMoveItem: () => !config.veto, canMoveGroup: () => !config.veto,
|
|
onItemMove: (operation) => events.push(operation), onGroupMove: (operation) => events.push(operation)
|
|
});
|
|
const tile = (id, props, child) => h("div", {
|
|
...props, key: id, "data-testid": id,
|
|
style: { height: 96, width: 220, border: "1px solid" }
|
|
}, child);
|
|
return h("section", null,
|
|
h("output", { "aria-label": "Dragging", style: { display: "block", height: 24 } },
|
|
reorder.itemReorder.draggingId || reorder.groupReorder.draggingId ? "active" : ""),
|
|
h("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 222px)", gap: 12 } },
|
|
...items.map((item) => tile(item.id, reorder.getItemProps({ itemId: item.id, groupId: item.group, parentId: item.parent }),
|
|
h("button", { type: "button", onPointerDown: (event) => reorder.itemReorder.startDrag(event, item.id) }, `Item ${item.id}`))),
|
|
...["A", "B"].map((groupId) => tile(`group-${groupId}`, reorder.getGroupProps({ groupId, parentId: "p" }),
|
|
h("button", { type: "button", onPointerDown: (event) => reorder.groupReorder.startDrag(event, { groupId, parentId: "p" }) }, `Group ${groupId}`))),
|
|
tile("boundary", reorder.getGroupBoundaryProps({ groupId: "B", parentId: "p", placement: "after" }), "Boundary"),
|
|
tile("ungrouped", reorder.getUngroupedDropProps({ parentId: "p" }), "Ungrouped"),
|
|
tile("alien", { ...reorder.getItemProps({ itemId: "alien", groupId: "A", parentId: "p" }), "data-reorder-namespace": "other" }, "Other namespace")
|
|
));
|
|
}
|
|
function update(patch = {}) {
|
|
options = { ...options, ...patch };
|
|
flushSync(() => root.render(h(StrictMode, null, h(Probe, { config: options }))));
|
|
}
|
|
update();
|
|
return { events, update, unmount: () => root.unmount() };
|
|
}
|