mirror of
https://github.com/zadam/trilium.git
synced 2025-10-21 15:49:00 +02:00
chore(collections/board): extract dragging to separate hook
This commit is contained in:
parent
174f796b56
commit
08dc05c504
@ -10,43 +10,123 @@ import { t } from "../../../services/i18n";
|
|||||||
import BoardApi from "./api";
|
import BoardApi from "./api";
|
||||||
import Card from "./card";
|
import Card from "./card";
|
||||||
|
|
||||||
|
interface DragContext {
|
||||||
|
api: BoardApi;
|
||||||
|
column: string;
|
||||||
|
draggedColumn: { column: string, index: number } | null;
|
||||||
|
setDraggedColumn: (column: { column: string, index: number } | null) => void;
|
||||||
|
columnIndex: number,
|
||||||
|
setDropTarget: (target: string | null) => void,
|
||||||
|
setDropPosition: (position: { column: string, index: number } | null) => void;
|
||||||
|
onCardDrop: () => void;
|
||||||
|
dropPosition: { column: string, index: number } | null;
|
||||||
|
draggedCard: { noteId: string, branchId: string, fromColumn: string, index: number } | null;
|
||||||
|
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void;
|
||||||
|
columnItems?: { note: FNote, branch: FBranch }[],
|
||||||
|
}
|
||||||
|
|
||||||
export default function Column({
|
export default function Column({
|
||||||
column,
|
column,
|
||||||
columnIndex,
|
|
||||||
columnItems,
|
columnItems,
|
||||||
statusAttribute,
|
|
||||||
draggedCard,
|
draggedCard,
|
||||||
setDraggedCard,
|
setDraggedCard,
|
||||||
dropTarget,
|
dropTarget,
|
||||||
setDropTarget,
|
|
||||||
dropPosition,
|
dropPosition,
|
||||||
setDropPosition,
|
|
||||||
onCardDrop,
|
|
||||||
draggedColumn,
|
|
||||||
setDraggedColumn,
|
|
||||||
isDraggingColumn,
|
isDraggingColumn,
|
||||||
api
|
api,
|
||||||
|
...restProps
|
||||||
}: {
|
}: {
|
||||||
column: string,
|
column: string,
|
||||||
columnIndex: number,
|
|
||||||
columnItems?: { note: FNote, branch: FBranch }[],
|
|
||||||
statusAttribute: string,
|
|
||||||
draggedCard: { noteId: string, branchId: string, fromColumn: string, index: number } | null,
|
|
||||||
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
|
|
||||||
dropTarget: string | null,
|
dropTarget: string | null,
|
||||||
setDropTarget: (target: string | null) => void,
|
|
||||||
dropPosition: { column: string, index: number } | null,
|
|
||||||
setDropPosition: (position: { column: string, index: number } | null) => void,
|
|
||||||
onCardDrop: () => void,
|
|
||||||
draggedColumn: { column: string, index: number } | null,
|
|
||||||
setDraggedColumn: (column: { column: string, index: number } | null) => void,
|
|
||||||
isDraggingColumn: boolean,
|
isDraggingColumn: boolean,
|
||||||
api: BoardApi
|
api: BoardApi
|
||||||
}) {
|
} & DragContext) {
|
||||||
const context = useContext(BoardViewContext);
|
const context = useContext(BoardViewContext);
|
||||||
const isEditing = (context.columnNameToEdit === column);
|
const isEditing = (context.columnNameToEdit === column);
|
||||||
const editorRef = useRef<HTMLInputElement>(null);
|
const editorRef = useRef<HTMLInputElement>(null);
|
||||||
|
const { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop } = useDragging({
|
||||||
|
api, column, dropPosition, draggedCard, setDraggedCard, columnItems, ...restProps
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleEdit = useCallback(() => {
|
||||||
|
context.setColumnNameToEdit?.(column);
|
||||||
|
}, [column]);
|
||||||
|
|
||||||
|
const handleContextMenu = useCallback((e: ContextMenuEvent) => {
|
||||||
|
openColumnContextMenu(api, e, column);
|
||||||
|
}, [ api, column ]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
editorRef.current?.focus();
|
||||||
|
}, [ isEditing ]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`board-column ${dropTarget === column && draggedCard?.fromColumn !== column ? 'drag-over' : ''} ${isDraggingColumn ? 'column-dragging' : ''}`}
|
||||||
|
onDragOver={handleDragOver}
|
||||||
|
onDragLeave={handleDragLeave}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className={`${isEditing ? "editing" : ""}`}
|
||||||
|
draggable="true"
|
||||||
|
onDragStart={handleColumnDragStart}
|
||||||
|
onDragEnd={handleColumnDragEnd}
|
||||||
|
onContextMenu={handleContextMenu}
|
||||||
|
>
|
||||||
|
{!isEditing ? (
|
||||||
|
<>
|
||||||
|
<span className="title">{column}</span>
|
||||||
|
<span
|
||||||
|
className="edit-icon icon bx bx-edit-alt"
|
||||||
|
title={t("board_view.edit-column-title")}
|
||||||
|
onClick={handleEdit}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<TitleEditor
|
||||||
|
currentValue={column}
|
||||||
|
save={newTitle => api.renameColumn(column, newTitle)}
|
||||||
|
dismiss={() => context.setColumnNameToEdit?.(undefined)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{(columnItems ?? []).map(({ note, branch }, index) => {
|
||||||
|
const showIndicatorBefore = dropPosition?.column === column &&
|
||||||
|
dropPosition.index === index &&
|
||||||
|
draggedCard?.noteId !== note.noteId;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{showIndicatorBefore && (
|
||||||
|
<div className="board-drop-placeholder show" />
|
||||||
|
)}
|
||||||
|
<Card
|
||||||
|
api={api}
|
||||||
|
note={note}
|
||||||
|
branch={branch}
|
||||||
|
column={column}
|
||||||
|
index={index}
|
||||||
|
setDraggedCard={setDraggedCard}
|
||||||
|
isDragging={draggedCard?.noteId === note.noteId}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && (
|
||||||
|
<div className="board-drop-placeholder show" />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="board-new-item" onClick={() => api.createNewItem(column)}>
|
||||||
|
<Icon icon="bx bx-plus" />{" "}
|
||||||
|
{t("board_view.new-item")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function useDragging({ api, column, columnIndex, draggedColumn, setDraggedColumn, setDropTarget, setDropPosition, onCardDrop, draggedCard, dropPosition, setDraggedCard, columnItems }: DragContext) {
|
||||||
const handleColumnDragStart = useCallback((e: DragEvent) => {
|
const handleColumnDragStart = useCallback((e: DragEvent) => {
|
||||||
e.dataTransfer!.effectAllowed = 'move';
|
e.dataTransfer!.effectAllowed = 'move';
|
||||||
e.dataTransfer!.setData('text/plain', column);
|
e.dataTransfer!.setData('text/plain', column);
|
||||||
@ -132,82 +212,7 @@ export default function Column({
|
|||||||
onCardDrop();
|
onCardDrop();
|
||||||
}
|
}
|
||||||
setDraggedCard(null);
|
setDraggedCard(null);
|
||||||
}, [draggedCard, draggedColumn, dropPosition, columnItems, column, statusAttribute, setDraggedCard, setDropTarget, setDropPosition, onCardDrop]);
|
}, [draggedCard, draggedColumn, dropPosition, columnItems, column, setDraggedCard, setDropTarget, setDropPosition, onCardDrop]);
|
||||||
|
|
||||||
const handleEdit = useCallback(() => {
|
return { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop };
|
||||||
context.setColumnNameToEdit?.(column);
|
|
||||||
}, [column]);
|
|
||||||
|
|
||||||
const handleContextMenu = useCallback((e: ContextMenuEvent) => {
|
|
||||||
openColumnContextMenu(api, e, column);
|
|
||||||
}, [ api, column ]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
editorRef.current?.focus();
|
|
||||||
}, [ isEditing ]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`board-column ${dropTarget === column && draggedCard?.fromColumn !== column ? 'drag-over' : ''} ${isDraggingColumn ? 'column-dragging' : ''}`}
|
|
||||||
onDragOver={handleDragOver}
|
|
||||||
onDragLeave={handleDragLeave}
|
|
||||||
onDrop={handleDrop}
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
className={`${isEditing ? "editing" : ""}`}
|
|
||||||
draggable="true"
|
|
||||||
onDragStart={handleColumnDragStart}
|
|
||||||
onDragEnd={handleColumnDragEnd}
|
|
||||||
onContextMenu={handleContextMenu}
|
|
||||||
>
|
|
||||||
{!isEditing ? (
|
|
||||||
<>
|
|
||||||
<span className="title">{column}</span>
|
|
||||||
<span
|
|
||||||
className="edit-icon icon bx bx-edit-alt"
|
|
||||||
title={t("board_view.edit-column-title")}
|
|
||||||
onClick={handleEdit}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<TitleEditor
|
|
||||||
currentValue={column}
|
|
||||||
save={newTitle => api.renameColumn(column, newTitle)}
|
|
||||||
dismiss={() => context.setColumnNameToEdit?.(undefined)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{(columnItems ?? []).map(({ note, branch }, index) => {
|
|
||||||
const showIndicatorBefore = dropPosition?.column === column &&
|
|
||||||
dropPosition.index === index &&
|
|
||||||
draggedCard?.noteId !== note.noteId;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{showIndicatorBefore && (
|
|
||||||
<div className="board-drop-placeholder show" />
|
|
||||||
)}
|
|
||||||
<Card
|
|
||||||
api={api}
|
|
||||||
note={note}
|
|
||||||
branch={branch}
|
|
||||||
column={column}
|
|
||||||
index={index}
|
|
||||||
setDraggedCard={setDraggedCard}
|
|
||||||
isDragging={draggedCard?.noteId === note.noteId}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && (
|
|
||||||
<div className="board-drop-placeholder show" />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="board-new-item" onClick={() => api.createNewItem(column)}>
|
|
||||||
<Icon icon="bx bx-plus" />{" "}
|
|
||||||
{t("board_view.new-item")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
@ -159,7 +159,6 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
|
|||||||
column={column}
|
column={column}
|
||||||
columnIndex={index}
|
columnIndex={index}
|
||||||
columnItems={byColumn.get(column)}
|
columnItems={byColumn.get(column)}
|
||||||
statusAttribute={statusAttribute ?? "status"}
|
|
||||||
draggedCard={draggedCard}
|
draggedCard={draggedCard}
|
||||||
setDraggedCard={setDraggedCard}
|
setDraggedCard={setDraggedCard}
|
||||||
dropTarget={dropTarget}
|
dropTarget={dropTarget}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user