Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* DropZone — space-reserving drop target shown in design mode.
*
* - Always occupies space (prevents reflow during drag).
* - Shows the dragged item's label for ALL valid zones during a drag (not just on hover).
* - Hides (becomes invisible) when the drag type doesn't match or it's
* the same-source column/card (invalid target).
*/
import { useDndContext, useDroppable } from '@dnd-kit/core';
import { useDesignMode } from './useDesignMode.js';
export interface IDropZoneProps {
id: string;
/** What drag type this zone accepts: 'card' to receive dragged cards,
* 'field' to receive dragged field rows. */
accept: 'card' | 'field';
/**
* The "source" identifier used to reject same-origin drops:
* - For card zones: the column index (number) — reject if active.data.colIdx === sourceId.
* - For field zones: the card name (string) — reject if active.data.cardName === sourceId.
*/
sourceId?: string | number;
}
export function DropZone({id, accept, sourceId}: IDropZoneProps) {
const {active: isDesignActive} = useDesignMode();
const {active: dragging} = useDndContext();
const {isOver, setNodeRef} = useDroppable({id});
if (!isDesignActive) return null;
const dragType = dragging?.data?.current?.type as string | undefined;
const dragSourceId = dragging?.data?.current?.sourceId as string | number | undefined;
const dragLabel = dragging?.data?.current?.label as string | undefined;
// Valid when: drag type matches AND the drag source is different from this zone's source
const isValid = !!dragging && dragType === accept && dragSourceId !== sourceId;
return (
<div
ref={setNodeRef}
className={[
'blong-drop-zone',
`blong-drop-zone--${accept}`,
!dragging ? '' : isValid ? 'blong-drop-zone--valid' : 'blong-drop-zone--hidden',
isOver && isValid ? 'blong-drop-zone--over' : '',
]
.filter(Boolean)
.join(' ')}
>
{isValid && dragLabel && (
<span className="blong-drop-zone__label">+ {dragLabel}</span>
)}
</div>
);
}
|