opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-06 09:19:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

DashboardGrid: Add LayoutItemContext to affect zIndex from panels (#80116)

Browse Source
This commit is contained in:
Leon Sorokin
2024-01-10 12:09:54 -06:00
committed by GitHub
parent 796ef05e97
commit 31921bbb01
3 changed files with 52 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View File

@ -1,10 +1,12 @@
import classNames from 'classnames';
import React, { PureComponent, CSSProperties } from 'react';
import React, { PureComponent, CSSProperties, useRef, useCallback, useReducer, useMemo } from 'react';
import ReactGridLayout, { ItemCallback } from 'react-grid-layout';
import AutoSizer from 'react-virtualized-auto-sizer';
import { Subscription } from 'rxjs';
import { zIndex } from '@grafana/data/src/themes/zIndex';
import { config } from '@grafana/runtime';
import { LayoutItemContext } from '@grafana/ui';
import appEvents from 'app/core/app_events';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
import { contextSrv } from 'app/core/services/context_srv';
@ -383,6 +385,21 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
let width = 100;
let height = 100;
const boostedCount = useRef(0);
const [_, forceUpdate] = useReducer((x) => x + 1, 0);
const boostZIndex = useCallback(() => {
boostedCount.current += 1;
forceUpdate();
return () => {
boostedCount.current -= 1;
forceUpdate();
};
}, [forceUpdate]);
const ctxValue = useMemo(() => ({ boostZIndex }), [boostZIndex]);
const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, descendingOrderIndex, ...divProps } = props;
const style: CSSProperties = props.style ?? {};
@ -413,10 +430,17 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
// props.children[0] is our main children. RGL adds the drag handle at props.children[1]
return (
<div {...divProps} style={{ ...divProps.style, zIndex: descendingOrderIndex }} ref={ref}>
{/* Pass width and height to children as render props */}
{[props.children[0](width, height), props.children.slice(1)]}
</div>
<LayoutItemContext.Provider value={ctxValue}>
<div
{...divProps}
// .context-menu-open === $zindex-dropdown === 1030 (zIndex.ts)
style={{ ...divProps.style, zIndex: boostedCount.current === 0 ? descendingOrderIndex : zIndex.dropdown }}
ref={ref}
>
{/* Pass width and height to children as render props */}
{[props.children[0](width, height), props.children.slice(1)]}
</div>
</LayoutItemContext.Provider>
);
});