mirror of
https://github.com/docmost/docmost.git
synced 2026-06-10 01:52:43 +08:00
fix(bases): axis-aware kanban auto-scroll overflow matches reference example
This commit is contained in:
@@ -71,7 +71,7 @@ export function BaseKanban({
|
||||
source.data.type === "base-kanban-column",
|
||||
[],
|
||||
);
|
||||
useKanbanAutoScroll(boardRef, canScrollBoard);
|
||||
useKanbanAutoScroll(boardRef, "horizontal", canScrollBoard);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasNextPage || isFetchingNextPage) return;
|
||||
|
||||
@@ -40,7 +40,7 @@ export function KanbanColumn({
|
||||
source.data.type === "base-kanban-card",
|
||||
[],
|
||||
);
|
||||
useKanbanAutoScroll(bodyRef, canScrollColumn);
|
||||
useKanbanAutoScroll(bodyRef, "vertical", canScrollColumn);
|
||||
|
||||
return (
|
||||
<div className={classes.column} data-column-key={column.key}>
|
||||
|
||||
@@ -7,18 +7,32 @@ type CanScrollArgs = {
|
||||
source: { data: Record<string, unknown> };
|
||||
};
|
||||
|
||||
// How far past each edge the cursor can roam and still drive scroll.
|
||||
// 120px gives users a generous "drag past the column" affordance before
|
||||
// scrolling stops — matches what other kanbans (Linear, Notion) do.
|
||||
const OVERFLOW_PX = 120;
|
||||
const OVERFLOW_PX = 6000;
|
||||
|
||||
type Axis = "horizontal" | "vertical";
|
||||
|
||||
export function useKanbanAutoScroll(
|
||||
ref: RefObject<HTMLElement | null>,
|
||||
axis: Axis,
|
||||
canScroll: (args: CanScrollArgs) => boolean = () => true,
|
||||
) {
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const overflow =
|
||||
axis === "vertical"
|
||||
? {
|
||||
forTopEdge: { top: OVERFLOW_PX, right: 0, left: 0 },
|
||||
forBottomEdge: { bottom: OVERFLOW_PX, right: 0, left: 0 },
|
||||
forLeftEdge: { left: 0, top: 0, bottom: 0 },
|
||||
forRightEdge: { right: 0, top: 0, bottom: 0 },
|
||||
}
|
||||
: {
|
||||
forTopEdge: { top: 0, right: 0, left: 0 },
|
||||
forBottomEdge: { bottom: 0, right: 0, left: 0 },
|
||||
forLeftEdge: { left: OVERFLOW_PX, top: 0, bottom: 0 },
|
||||
forRightEdge: { right: OVERFLOW_PX, top: 0, bottom: 0 },
|
||||
};
|
||||
return combine(
|
||||
autoScrollForElements({
|
||||
element: el,
|
||||
@@ -29,13 +43,8 @@ export function useKanbanAutoScroll(
|
||||
element: el,
|
||||
canScroll,
|
||||
getConfiguration: () => ({ maxScrollSpeed: "fast" }),
|
||||
getOverflow: () => ({
|
||||
forTopEdge: { top: OVERFLOW_PX },
|
||||
forBottomEdge: { bottom: OVERFLOW_PX },
|
||||
forLeftEdge: { left: OVERFLOW_PX },
|
||||
forRightEdge: { right: OVERFLOW_PX },
|
||||
}),
|
||||
getOverflow: () => overflow,
|
||||
}),
|
||||
);
|
||||
}, [ref, canScroll]);
|
||||
}, [ref, axis, canScroll]);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user