jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: gridstack not working (#642)

Browse Source 
* fix: gridstack not working

* chore: remove unneccessary comments
This commit is contained in:
Meier Lukas
2024-06-08 22:22:15 +02:00
committed by GitHub
parent e46ea71bc2
commit 2c1b52aff9
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,15 +54,19 @@ export const useGridstack = ({ section, mainRef }: UseGridstackProps): UseGrista
const onChange = useCallback( const onChange = useCallback(
(changedNode: GridStackNode) => { (changedNode: GridStackNode) => {
const itemId = changedNode.el?.getAttribute("data-id"); const itemId = changedNode.el?.getAttribute("data-id");
if (!itemId || !changedNode.x || !changedNode.y || !changedNode.w || !changedNode.h) return; if (!itemId) return;
// Updates the react-query state // Updates the react-query state
moveAndResizeItem({ moveAndResizeItem({
itemId, itemId,
xOffset: changedNode.x, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
yOffset: changedNode.y, xOffset: changedNode.x!,
width: changedNode.w, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
height: changedNode.h, yOffset: changedNode.y!,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
width: changedNode.w!,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
height: changedNode.h!,
}); });
}, },
[moveAndResizeItem], [moveAndResizeItem],
@@ -70,16 +74,20 @@ export const useGridstack = ({ section, mainRef }: UseGridstackProps): UseGrista
const onAdd = useCallback( const onAdd = useCallback(
(addedNode: GridStackNode) => { (addedNode: GridStackNode) => {
const itemId = addedNode.el?.getAttribute("data-id"); const itemId = addedNode.el?.getAttribute("data-id");
if (!itemId || !addedNode.x || !addedNode.y || !addedNode.w || !addedNode.h) return; if (!itemId) return;
// Updates the react-query state // Updates the react-query state
moveItemToSection({ moveItemToSection({
itemId, itemId,
sectionId: section.id, sectionId: section.id,
xOffset: addedNode.x, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
yOffset: addedNode.y, xOffset: addedNode.x!,
width: addedNode.w, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
height: addedNode.h, yOffset: addedNode.y!,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
width: addedNode.w!,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
height: addedNode.h!,
}); });
}, },
[moveItemToSection, section.id], [moveItemToSection, section.id],