diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove card-body drag from ArrayEditor form cards

Browse Source 
Card-body drag was causing accidental drags in complex form cards
(classes, FAQ, pricing). Keep grip-icon-only drag for ArrayEditor,
card-body drag remains on team page (simple cards).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-11 19:10:42 +03:00
parent 27ef3bd694
commit 85c61cfacd
1 changed files with 0 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/admin/_components/ArrayEditor.tsx
View File

@@ -63,37 +63,6 @@ export function ArrayEditor<T>({
[startDrag]
);
const handleCardMouseDown = useCallback(
(e: React.MouseEvent, index: number) => {
// Don't drag from interactive elements
const tag = (e.target as HTMLElement).closest("input, textarea, select, button, a, [role='switch']");
if (tag) return;
e.preventDefault();
const x = e.clientX;
const y = e.clientY;
const pendingIndex = index;
function onMove(ev: MouseEvent) {
const dx = ev.clientX - x;
const dy = ev.clientY - y;
// Start drag after 8px movement
if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
cleanup();
startDrag(ev.clientX, ev.clientY, pendingIndex);
}
}
function onUp() { cleanup(); }
function cleanup() {
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseup", onUp);
}
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseup", onUp);
},
[startDrag]
);
useEffect(() => {
if (dragIndex === null) return;
@@ -156,7 +125,6 @@ export function ArrayEditor<T>({
<div
key={i}
ref={(el) => { itemRefs.current[i] = el; }}
onMouseDown={(e) => handleCardMouseDown(e, i)}
className="rounded-lg border border-white/10 bg-neutral-900/50 p-4 mb-3 hover:border-white/25 hover:bg-neutral-800/50 transition-colors"
>
<div className="flex items-start justify-between gap-2 mb-3">
@@ -207,7 +175,6 @@ export function ArrayEditor<T>({
<div
key={i}
ref={(el) => { itemRefs.current[i] = el; }}
onMouseDown={(e) => handleCardMouseDown(e, i)}
className="rounded-lg border border-white/10 bg-neutral-900/50 p-4 mb-3 hover:border-white/25 hover:bg-neutral-800/50 transition-colors"
>
<div className="flex items-start justify-between gap-2 mb-3">