Commit ae0b027d by Johannes Schill

chore: Replace sizeMe with AutoSizer in DashboardGrid

parent 310ee567
...@@ -5,13 +5,12 @@ import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core ...@@ -5,13 +5,12 @@ import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core
import { DashboardPanel } from './DashboardPanel'; import { DashboardPanel } from './DashboardPanel';
import { DashboardModel, PanelModel } from '../state'; import { DashboardModel, PanelModel } from '../state';
import classNames from 'classnames'; import classNames from 'classnames';
import sizeMe from 'react-sizeme'; import { AutoSizer } from 'react-virtualized';
let lastGridWidth = 1200; let lastGridWidth = 1200;
let ignoreNextWidthChange = false; let ignoreNextWidthChange = false;
interface GridWrapperProps { interface SizedReactLayoutGridProps {
size: { width: number; };
layout: ReactGridLayout.Layout[]; layout: ReactGridLayout.Layout[];
onLayoutChange: (layout: ReactGridLayout.Layout[]) => void; onLayoutChange: (layout: ReactGridLayout.Layout[]) => void;
children: JSX.Element | JSX.Element[]; children: JSX.Element | JSX.Element[];
...@@ -25,8 +24,12 @@ interface GridWrapperProps { ...@@ -25,8 +24,12 @@ interface GridWrapperProps {
isFullscreen?: boolean; isFullscreen?: boolean;
} }
interface GridWrapperProps extends SizedReactLayoutGridProps {
sizedWidth: number;
}
function GridWrapper({ function GridWrapper({
size, sizedWidth,
layout, layout,
onLayoutChange, onLayoutChange,
children, children,
...@@ -39,7 +42,7 @@ function GridWrapper({ ...@@ -39,7 +42,7 @@ function GridWrapper({
isDraggable, isDraggable,
isFullscreen, isFullscreen,
}: GridWrapperProps) { }: GridWrapperProps) {
const width = size.width > 0 ? size.width : lastGridWidth; const width = sizedWidth > 0 ? sizedWidth : lastGridWidth;
// logic to ignore width changes (optimization) // logic to ignore width changes (optimization)
if (width !== lastGridWidth) { if (width !== lastGridWidth) {
...@@ -74,7 +77,16 @@ function GridWrapper({ ...@@ -74,7 +77,16 @@ function GridWrapper({
); );
} }
const SizedReactLayoutGrid = sizeMe({ monitorWidth: true })(GridWrapper); const SizedReactLayoutGrid = (props: SizedReactLayoutGridProps) => (
<AutoSizer disableHeight>
{({width}) => (
<GridWrapper
sizedWidth={width}
{...props}
/>
)}
</AutoSizer>
);
export interface DashboardGridProps { export interface DashboardGridProps {
dashboard: DashboardModel; dashboard: DashboardModel;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment