mirror of
https://github.com/docmost/docmost.git
synced 2026-06-10 01:52:43 +08:00
feat(bases): block intra-column drops while sort is active + add hint
This commit is contained in:
@@ -248,6 +248,11 @@ export function BaseKanban({
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{sortsActive && (
|
||||
<div className={classes.sortHint}>
|
||||
{t("Sorted — cards within a column can't be reordered.")}
|
||||
</div>
|
||||
)}
|
||||
<div className={classes.board}>
|
||||
{columns.map((column) => (
|
||||
<KanbanColumn
|
||||
@@ -259,6 +264,7 @@ export function BaseKanban({
|
||||
onCardDrop={handleCardDrop}
|
||||
onColumnReorder={handleColumnReorder}
|
||||
onHide={handleHideColumn}
|
||||
sortsActive={sortsActive}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,7 @@ type KanbanCardProps = {
|
||||
primaryProperty: IBaseProperty | undefined;
|
||||
onClick: (rowId: string) => void;
|
||||
onDrop: (payload: CardDropPayload) => void;
|
||||
sortsActive: boolean;
|
||||
};
|
||||
|
||||
export function KanbanCard({
|
||||
@@ -22,12 +23,14 @@ export function KanbanCard({
|
||||
primaryProperty,
|
||||
onClick,
|
||||
onDrop,
|
||||
sortsActive,
|
||||
}: KanbanCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const { ref, isDragging, closestEdge } = useKanbanCardDrag({
|
||||
cardId: row.id,
|
||||
columnKey,
|
||||
onDrop,
|
||||
sortsActive,
|
||||
});
|
||||
|
||||
const titleValue = primaryProperty
|
||||
|
||||
@@ -16,6 +16,7 @@ type KanbanColumnProps = {
|
||||
onCardDrop: (payload: CardDropPayload) => void;
|
||||
onColumnReorder: (payload: ColumnReorderPayload) => void;
|
||||
onHide: (columnKey: string) => void;
|
||||
sortsActive: boolean;
|
||||
};
|
||||
|
||||
export function KanbanColumn({
|
||||
@@ -26,6 +27,7 @@ export function KanbanColumn({
|
||||
onCardDrop,
|
||||
onColumnReorder,
|
||||
onHide,
|
||||
sortsActive,
|
||||
}: KanbanColumnProps) {
|
||||
const { ref: bodyRef, isOver } = useKanbanColumnDrop({
|
||||
columnKey: column.key,
|
||||
@@ -56,6 +58,7 @@ export function KanbanColumn({
|
||||
primaryProperty={primaryProperty}
|
||||
onClick={onCardClick}
|
||||
onDrop={onCardDrop}
|
||||
sortsActive={sortsActive}
|
||||
/>
|
||||
))}
|
||||
<KanbanAddCardButton onClick={() => onAddCard(column.key)} />
|
||||
|
||||
@@ -28,11 +28,13 @@ export function useKanbanCardDrag({
|
||||
cardId,
|
||||
columnKey,
|
||||
onDrop,
|
||||
sortsActive,
|
||||
disabled,
|
||||
}: {
|
||||
cardId: string;
|
||||
columnKey: string;
|
||||
onDrop: (payload: CardDropPayload) => void;
|
||||
sortsActive: boolean;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
@@ -61,7 +63,12 @@ export function useKanbanCardDrag({
|
||||
element: el,
|
||||
canDrop: ({ source }) => {
|
||||
if (source.data.type !== "base-kanban-card") return false;
|
||||
return source.data.cardId !== cardId;
|
||||
if (source.data.cardId === cardId) return false;
|
||||
// Block intra-column drops when a sort is active (the slot would
|
||||
// visibly snap back to the sort's chosen position, confusing the
|
||||
// user). Cross-column drops still work and change the cell value.
|
||||
if (sortsActive && source.data.columnKey === columnKey) return false;
|
||||
return true;
|
||||
},
|
||||
getData: ({ input, element }) =>
|
||||
attachClosestEdge(
|
||||
@@ -85,7 +92,7 @@ export function useKanbanCardDrag({
|
||||
},
|
||||
}),
|
||||
);
|
||||
}, [cardId, columnKey, disabled]);
|
||||
}, [cardId, columnKey, disabled, sortsActive]);
|
||||
|
||||
return { ref, isDragging, closestEdge };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user