Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-27 00:40:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: items can not be placed in newly created dynamic section without saving (#1513)

Browse Source 
* fix: items can not be placed in newly created dynamic section without saving

* docs: add comments above hooks with notice about specific order
This commit is contained in:
Meier Lukas
2024-11-20 22:35:27 +01:00
committed by GitHub
parent 563c5d8f3c
commit 73cb0b99ac
1 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
View File

@@ -71,15 +71,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
? section.width
: board.columnCount;
useCssVariableConfiguration({
columnCount,
gridRef,
wrapperRef,
width,
height,
isDynamic: section.kind === "dynamic",
});
const itemRefKeys = Object.keys(itemRefs.current);
// define items in itemRefs for easy access and reference to items
if (itemRefKeys.length !== itemIds.length) {
@@ -95,11 +86,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
});
}
// Toggle the gridstack to be static or not based on the edit mode
useEffect(() => {
gridRef.current?.setStatic(!isEditMode);
}, [isEditMode]);
const onChange = useCallback(
(changedNode: GridStackNode) => {
const id = changedNode.el?.getAttribute("data-id");
@@ -258,14 +244,40 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
};
}, [isEditMode, onAdd, onChange]);
/**
* IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
* because we need the gridstack object to add the listeners
* Toggle the gridstack to be static or not based on the edit mode
*/
useEffect(() => {
gridRef.current?.setStatic(!isEditMode);
}, [isEditMode]);
const sectionHeight = section.kind === "dynamic" && "height" in section ? (section.height as number) : null;
// We want the amount of rows in a dynamic section to be the height of the section in the outer gridstack
/**
* IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
* because we need the gridstack object to add the listeners
* We want the amount of rows in a dynamic section to be the height of the section in the outer gridstack
*/
useEffect(() => {
if (!sectionHeight) return;
gridRef.current?.row(sectionHeight);
}, [sectionHeight]);
/**
* IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
* because we need the gridstack object to add the listeners
*/
useCssVariableConfiguration({
columnCount,
gridRef,
wrapperRef,
width,
height,
isDynamic: section.kind === "dynamic",
});
return {
refs: {
items: itemRefs,