c3c5cb4d1f
* unselect all cards using esc key or click * useScopedHotKeys * useListenClickByClassName * rules are rules * smoothing out || cursor-boxing-selection compliant * replenished activeCardIds * setRecoilState
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Draggable } from '@hello-pangea/dnd';
|
|
import { useSetRecoilState } from 'recoil';
|
|
|
|
import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState';
|
|
import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
|
|
|
|
import { useCurrentCardSelected } from '../hooks/useCurrentCardSelected';
|
|
import { BoardOptions } from '../types/BoardOptions';
|
|
|
|
export function EntityBoardCard({
|
|
boardOptions,
|
|
cardId,
|
|
index,
|
|
}: {
|
|
boardOptions: BoardOptions;
|
|
cardId: string;
|
|
index: number;
|
|
}) {
|
|
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
|
|
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
|
|
|
|
const { setCurrentCardSelected } = useCurrentCardSelected();
|
|
|
|
function handleContextMenu(event: React.MouseEvent) {
|
|
event.preventDefault();
|
|
setCurrentCardSelected(true);
|
|
setContextMenuPosition({
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
});
|
|
setContextMenuOpenState(true);
|
|
}
|
|
|
|
return (
|
|
<Draggable key={cardId} draggableId={cardId} index={index}>
|
|
{(draggableProvided) => (
|
|
<div
|
|
ref={draggableProvided?.innerRef}
|
|
{...draggableProvided?.dragHandleProps}
|
|
{...draggableProvided?.draggableProps}
|
|
className="entity-board-card"
|
|
data-selectable-id={cardId}
|
|
data-select-disable
|
|
onContextMenu={handleContextMenu}
|
|
>
|
|
{boardOptions.cardComponent}
|
|
</div>
|
|
)}
|
|
</Draggable>
|
|
);
|
|
}
|