Skip to content

[WEB-5306] refactor: base layouts #8051

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Nov 6, 2025
+29 −15
Merged

[WEB-5306] refactor: base layouts #8051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
88aa9f3
feat: add base layouts for kanban and list with drag-and-drop support
JayashTripathy Oct 28, 2025
988deb3
chore: update translations for empty states and drag-and-drop message…
JayashTripathy Oct 29, 2025
df558ee
refactor: update group header component to use new props structure an…
JayashTripathy Oct 29, 2025
ed42971
refactor: simplify onDrop prop in useGroupDropTarget and update onTog…
JayashTripathy Oct 29, 2025
77d7281
refactor: update useLayoutState hook to support external and internal…
JayashTripathy Oct 29, 2025
9b1bedc
refactor: remove redundant comment in useLayoutState hook
JayashTripathy Oct 29, 2025
dc57f78
refactor: enhance layout components to support default props for coll…
JayashTripathy Oct 29, 2025
a053ba3
refactor: update layout components to enforce required props for coll…
JayashTripathy Oct 30, 2025
77ce05f
Merge branch 'preview' of https://github.com/makeplane/plane into ref…
JayashTripathy Oct 31, 2025
0803be6
Merge branch 'preview' of https://github.com/makeplane/plane into ref…
JayashTripathy Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions apps/web/core/components/base-layouts/kanban/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,22 @@ export const BaseKanbanLayout = observer(<T extends IBaseLayoutsKanbanItem>(prop
showEmptyGroups = true,
enableDragDrop = false,
loadMoreItems,
collapsedGroups: externalCollapsedGroups = [],
onToggleGroup: externalOnToggleGroup = () => {},
collapsedGroups: externalCollapsedGroups,
onToggleGroup: externalOnToggleGroup,
} = props;

const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState({
mode: "external",
externalCollapsedGroups,
externalOnToggleGroup,
});
const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
useExternalMode
? {
mode: "external",
externalCollapsedGroups,
externalOnToggleGroup,
}
: {
mode: "internal",
}
);

return (
<div ref={containerRef} className={cn("relative w-full flex gap-2 p-3 h-full overflow-x-auto", className)}>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/base-layouts/layout-switcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { BASE_LAYOUTS } from "./constants";
type Props = {
layouts?: TBaseLayoutType[];
onChange: (layout: TBaseLayoutType) => void;
selectedLayout: TBaseLayoutType | undefined;
selectedLayout: TBaseLayoutType;
};

export const LayoutSwitcher: React.FC<Props> = (props) => {
Expand Down
21 changes: 14 additions & 7 deletions apps/web/core/components/base-layouts/list/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,24 @@ export const BaseListLayout = observer(<T extends IBaseLayoutsListItem>(props: I
onDrop,
canDrag,
showEmptyGroups = false,
collapsedGroups: externalCollapsedGroups = [],
onToggleGroup: externalOnToggleGroup = () => {},
collapsedGroups: externalCollapsedGroups,
onToggleGroup: externalOnToggleGroup,
loadMoreItems,
className,
} = props;

const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState({
mode: "external",
externalCollapsedGroups,
externalOnToggleGroup,
});
const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
useExternalMode
? {
mode: "external",
externalCollapsedGroups,
externalOnToggleGroup,
}
: {
mode: "internal",
}
);

return (
<div ref={containerRef} className={cn("relative size-full overflow-auto bg-custom-background-90", className)}>
Expand Down
Loading