48 lines
2.4 KiB
JavaScript
48 lines
2.4 KiB
JavaScript
// Rôle : expose les hooks réels de formulaire et déplacement sous StrictMode pour les tests navigateur.
|
|
import { createElement as h, StrictMode } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { flushSync } from "react-dom";
|
|
import { useDraftForm } from "../../website/src/hooks/useDraftForm.js";
|
|
import { usePointerReorder } from "../../website/src/hooks/usePointerReorder.js";
|
|
|
|
export function mountFormReorderProbe(element, kind) {
|
|
const events = [];
|
|
const root = createRoot(element);
|
|
function Form() {
|
|
const form = useDraftForm({ title: "Initial", detail: "Kept" });
|
|
return h("form", { onSubmit: (event) => {
|
|
form.handleSubmit(event, (values, { reset }) => {
|
|
events.push({ ...values });
|
|
if (!values.title.trim()) return "Required";
|
|
reset();
|
|
});
|
|
events.push({ prevented: event.defaultPrevented });
|
|
} },
|
|
h("input", form.getFieldProps("title", { "aria-label": "Title", onChange: () => events.push("changed") })),
|
|
h("input", form.getFieldProps("detail", { "aria-label": "Detail" })),
|
|
h("p", { role: "alert" }, form.error),
|
|
h("button", { type: "submit" }, "Submit"),
|
|
h("button", { type: "button", onClick: () => form.updateValues({ title: "Patched" }) }, "Patch"),
|
|
h("button", { type: "button", onClick: () => form.reset({ title: "Replacement", detail: "New" }) }, "Replace"));
|
|
}
|
|
function Reorder({ revision }) {
|
|
const reorder = usePointerReorder({
|
|
targetSelector: "[data-probe-item]",
|
|
getTargetId: (element) => element.dataset.probeItem,
|
|
canDropOn: (element) => element.dataset.probeItem !== "blocked",
|
|
onMove: (source, target, placement) => events.push({ source, target, placement, revision })
|
|
});
|
|
return h("section", null,
|
|
h("output", { "aria-label": "Dragging", style: { display: "block", height: 24 } }, reorder.draggingId),
|
|
...["a", "b", "blocked"].map((id) => h("div", {
|
|
key: id, "data-probe-item": id,
|
|
style: { height: 100, width: 300, border: "1px solid", margin: 10 }
|
|
}, h("button", { type: "button", onPointerDown: (event) => reorder.startDrag(event, id) }, id))));
|
|
}
|
|
const Component = kind === "form" ? Form : Reorder;
|
|
function update(revision = 0) {
|
|
flushSync(() => root.render(h(StrictMode, null, h(Component, { revision }))));
|
|
}
|
|
update();
|
|
return { events, update, unmount: () => root.unmount() };
|
|
}
|