🐛 Fix issues with change position modal

This commit is contained in:
Meierschlumpf
2023-01-07 09:19:02 +01:00
parent 48fa81aaad
commit 2da206d5b0
6 changed files with 187 additions and 158 deletions

View File

@@ -4,7 +4,7 @@ import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store';
import widgets from '../../../../widgets';
import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
import { useGridstackStore } from '../../Wrappers/gridstack/store';
import { useGridstackStore, useWrapperColumnCount } from '../../Wrappers/gridstack/store';
import { ChangePositionModal } from './ChangePositionModal';
export const ChangeWidgetPositionModal = ({
@@ -68,23 +68,30 @@ export const ChangeWidgetPositionModal = ({
};
const useWidthData = (integration: string): SelectItem[] => {
const wrapperColumnCount = useWrapperColumnCount();
const currentWidget = widgets[integration as keyof typeof widgets];
if (!currentWidget) return [];
const offset = currentWidget.gridstack.minWidth ?? 2;
const length = (currentWidget.gridstack.maxWidth ?? 12) - offset;
return Array.from({ length }, (_, i) => i + offset).map((n) => ({
const length = (currentWidget.gridstack.maxWidth > wrapperColumnCount!
? wrapperColumnCount!
: currentWidget.gridstack.maxWidth) - offset;
return Array.from({ length: length + 1 }, (_, i) => i + offset).map((n) => ({
value: n.toString(),
label: `${64 * n}px`,
// eslint-disable-next-line no-mixed-operators
label: `${(100 / wrapperColumnCount! * n).toFixed(2)}%`,
}));
};
const useHeightData = (integration: string): SelectItem[] => {
const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
const wrapperColumnCount = useWrapperColumnCount();
const currentWidget = widgets[integration as keyof typeof widgets];
if (!currentWidget) return [];
const offset = currentWidget.gridstack.minHeight ?? 2;
const length = (currentWidget.gridstack.maxHeight ?? 12) - offset;
return Array.from({ length }, (_, i) => i + offset).map((n) => ({
value: n.toString(),
label: `${64 * n}px`,
label: `${(mainAreaWidth! / wrapperColumnCount!) * n}px`,
}));
};