[WEB-5306] refactor: base layouts (#8051)
This commit is contained in:
parent
c719d67f71
commit
0a738d419e
3 changed files with 29 additions and 15 deletions
|
|
@ -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)}>
|
||||||
|
|
|
||||||
|
|
@ -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) => {
|
||||||
|
|
|
||||||
|
|
@ -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)}>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue