feat: add dynamic section (#842)

* chore: add parent_section_id and change position to x and y_offset for sqlite section table * chore: rename existing positions to x_offset and y_offset * chore: add related mysql migration * chore: add missing height and width to section table * fix: missing width and height in migration copy script * fix: typecheck issues * fix: test not working caused by unsimilar schemas * wip: add dynamic section * refactor: improve structure of gridstack sections * feat: add rendering of dynamic sections * feat: add saving of moved sections * wip: add static row count, restrict min-width and height * chore: address pull request feedback * fix: format issues * fix: size calculation within dynamic sections * fix: on resize not called when min width or height is reached * fix: size of items while dragging is to big * chore: temporarly remove migration files * chore: readd migrations * fix: format and deepsource issues * chore: remove db_dev.sqlite file * chore: add *.sqlite to .gitignore * chore: address pull request feedback * feat: add dynamic section actions for adding and removing them
2024-08-10 12:37:16 +02:00
1 parent a9d87e4e6b
commit 9ce172e78a
@@ -0,0 +1,62 @@
+import { useEffect } from "react";
+import type { PropsWithChildren } from "react";
+import type { BoxProps } from "@mantine/core";
+import { Box } from "@mantine/core";
+import combineClasses from "clsx";
+
+import type { SectionKind, WidgetKind } from "@homarr/definitions";
+import type { GridItemHTMLElement } from "@homarr/gridstack";
+
+interface Props extends BoxProps {
+  id: string;
+  type: "item" | "section";
+  kind: WidgetKind | SectionKind;
+  xOffset: number;
+  yOffset: number;
+  width: number;
+  height: number;
+  minWidth?: number;
+  minHeight?: number;
+  innerRef: React.RefObject<GridItemHTMLElement> | undefined;
+}
+
+export const GridStackItem = ({
+  id,
+  type,
+  kind,
+  xOffset,
+  yOffset,
+  width,
+  height,
+  minWidth = 1,
+  minHeight = 1,
+  innerRef,
+  children,
+  ...boxProps
+}: PropsWithChildren<Props>) => {
+  useEffect(() => {
+    if (!innerRef?.current?.gridstackNode) return;
+    if (type !== "section") return;
+    innerRef.current.gridstackNode.minW = minWidth;
+    innerRef.current.gridstackNode.minH = minHeight;
+  }, [minWidth, minHeight, innerRef]);
+
+  return (
+    <Box
+      {...boxProps}
+      className={combineClasses("grid-stack-item", boxProps.className)}
+      data-id={id}
+      data-type={type}
+      data-kind={kind}
+      gs-x={xOffset}
+      gs-y={yOffset}
+      gs-w={width}
+      gs-h={height}
+      gs-min-w={minWidth}
+      gs-min-h={minHeight}
+      ref={innerRef as React.RefObject<HTMLDivElement>}
+    >
+      {children}
+    </Box>
+  );
+};