diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts index 12bafdfa1..b6e7fbf64 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts @@ -17,7 +17,6 @@ import { AreaType } from '../../../../types/area'; import { IWidget } from '../../../../widgets/widgets'; import { useEditModeStore } from '../../Views/useEditModeStore'; import { initializeGridstack } from './init-gridstack'; -import { ShapeType } from '../../../../types/shape'; interface UseGristackReturnType { apps: AppType[]; @@ -81,47 +80,51 @@ export const useGridstack = ( // change column count depending on the width and the gridRef useEffect(() => { if (areaType === 'sidebar') return; - gridRef.current?.column(isLargerThanSm || typeof isLargerThanSm === 'undefined' ? 12 : 6, (column, prevColumn, newNodes, nodes) => { - let nextRow = 0; - let available = 6; + gridRef.current?.column( + isLargerThanSm || typeof isLargerThanSm === 'undefined' ? 12 : 6, + (column, prevColumn, newNodes, nodes) => { + let nextRow = 0; + let available = 6; - if (column === prevColumn) { - newNodes.concat(nodes); - return; - } + if (column === prevColumn) { + newNodes.concat(nodes); + return; + } - nodes.reverse().forEach(node => { - const width = parseInt(node.el!.getAttribute('data-gridstack-w')!, 10); - const height = parseInt(node.el!.getAttribute('data-gridstack-h')!, 10); - const x = parseInt(node.el!.getAttribute('data-gridstack-x')!, 10); - const y = parseInt(node.el!.getAttribute('data-gridstack-y')!, 10); + nodes.reverse().forEach((node) => { + const newnode = node; + const width = parseInt(newnode.el!.getAttribute('data-gridstack-w')!, 10); + const height = parseInt(newnode.el!.getAttribute('data-gridstack-h')!, 10); + const x = parseInt(newnode.el!.getAttribute('data-gridstack-x')!, 10); + const y = parseInt(newnode.el!.getAttribute('data-gridstack-y')!, 10); - if (column === 6) { - node.x = available >= width ? 6 - available : 0; - node.y = nextRow; + if (column === 6) { + newnode.x = available >= width ? 6 - available : 0; + newnode.y = nextRow; - if (width > 6) { - node.w = 6; - nextRow += 2; - available = 6; - } else if (available >= width) { - available -= width; - if (available === 0) { + if (width > 6) { + newnode.w = 6; nextRow += 2; available = 6; + } else if (available >= width) { + available -= width; + if (available === 0) { + nextRow += 2; + available = 6; + } + } else if (available < width) { + newnode.y = newnode.y! + 2; + available = 6 - width; + nextRow += 2; } - } else if (available < width) { - node.y = node.y! + 2; - available = 6 - width; - nextRow += 2; + } else { + newnode.x = y % 2 === 1 ? x + 6 : x; + newnode.y = Math.floor(y / 2); } - } else { - node.x = y % 2 === 1 ? x + 6 : x; - node.y = Math.floor(y / 2); - } - newNodes.push(node); - }); - }); + newNodes.push(newnode); + }); + } + ); }, [isLargerThanSm]); const onChange = isEditMode diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx index 39d5f78a2..aed97282c 100644 --- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx +++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx @@ -1,6 +1,6 @@ import axios from 'axios'; import Consola from 'consola'; -import { ActionIcon, Button, Group, Paper, Popover, Space, Text } from '@mantine/core'; +import { ActionIcon, Button, Group, Popover, Text } from '@mantine/core'; import { IconEditCircle, IconEditCircleOff, IconX } from '@tabler/icons'; import { getCookie } from 'cookies-next'; import { Trans, useTranslation } from 'next-i18next'; diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 9bc6a83f2..21f0cd648 100644 --- a/src/components/layout/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -4,7 +4,6 @@ import { CURRENT_VERSION, REPO_URL } from '../../../../data/constants'; import { useConfigContext } from '../../../config/provider'; import { Logo } from '../Logo'; import { useCardStyles } from '../useCardStyles'; -import { AddElementAction } from './Actions/AddElementAction/AddElementAction'; import DockerMenuButton from './Actions/Docker/DockerModule'; import { ToggleEditModeAction } from './Actions/ToggleEditMode/ToggleEditMode'; import { Search } from './Search'; diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx index 301da2e91..8452b73f7 100644 --- a/src/components/layout/header/SettingsMenu.tsx +++ b/src/components/layout/header/SettingsMenu.tsx @@ -1,4 +1,4 @@ -import { ActionIcon, Badge, Menu, Tooltip } from '@mantine/core'; +import { ActionIcon, Badge, Menu } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; diff --git a/src/pages/login.tsx b/src/pages/login.tsx index cdaf72600..7587bbde0 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { PasswordInput, Paper, Title, Text, Container, Group, Button } from '@mantine/core'; +import { PasswordInput, Paper, Title, Text, Container, Button } from '@mantine/core'; import { setCookie } from 'cookies-next'; import { showNotification, updateNotification } from '@mantine/notifications'; import axios from 'axios';