[WEB-5306] refactor: base layouts (#8051)

This commit is contained in:
Jayash Tripathy 2025-11-06 19:45:56 +05:30 committed by GitHub
parent c719d67f71
commit 0a738d419e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 29 additions and 15 deletions

View file

@ -20,15 +20,22 @@ export const BaseKanbanLayout = observer(<T extends IBaseLayoutsKanbanItem>(prop
showEmptyGroups = true, showEmptyGroups = true,
enableDragDrop = false, enableDragDrop = false,
loadMoreItems, loadMoreItems,
collapsedGroups: externalCollapsedGroups = [], collapsedGroups: externalCollapsedGroups,
onToggleGroup: externalOnToggleGroup = () => {}, onToggleGroup: externalOnToggleGroup,
} = props; } = props;
const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState({ const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
mode: "external", const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
externalCollapsedGroups, useExternalMode
externalOnToggleGroup, ? {
}); mode: "external",
externalCollapsedGroups,
externalOnToggleGroup,
}
: {
mode: "internal",
}
);
return ( return (
<div ref={containerRef} className={cn("relative w-full flex gap-2 p-3 h-full overflow-x-auto", className)}> <div ref={containerRef} className={cn("relative w-full flex gap-2 p-3 h-full overflow-x-auto", className)}>

View file

@ -9,7 +9,7 @@ import { BASE_LAYOUTS } from "./constants";
type Props = { type Props = {
layouts?: TBaseLayoutType[]; layouts?: TBaseLayoutType[];
onChange: (layout: TBaseLayoutType) => void; onChange: (layout: TBaseLayoutType) => void;
selectedLayout: TBaseLayoutType | undefined; selectedLayout: TBaseLayoutType;
}; };
export const LayoutSwitcher: React.FC<Props> = (props) => { export const LayoutSwitcher: React.FC<Props> = (props) => {

View file

@ -17,17 +17,24 @@ export const BaseListLayout = observer(<T extends IBaseLayoutsListItem>(props: I
onDrop, onDrop,
canDrag, canDrag,
showEmptyGroups = false, showEmptyGroups = false,
collapsedGroups: externalCollapsedGroups = [], collapsedGroups: externalCollapsedGroups,
onToggleGroup: externalOnToggleGroup = () => {}, onToggleGroup: externalOnToggleGroup,
loadMoreItems, loadMoreItems,
className, className,
} = props; } = props;
const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState({ const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
mode: "external", const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
externalCollapsedGroups, useExternalMode
externalOnToggleGroup, ? {
}); mode: "external",
externalCollapsedGroups,
externalOnToggleGroup,
}
: {
mode: "internal",
}
);
return ( return (
<div ref={containerRef} className={cn("relative size-full overflow-auto bg-custom-background-90", className)}> <div ref={containerRef} className={cn("relative size-full overflow-auto bg-custom-background-90", className)}>