mirror of
https://github.com/grafana/grafana.git
synced 2025-08-01 07:32:12 +08:00
47f8717149
* update eslint, tsconfig + esbuild to handle new jsx transform * remove thing that breaks the new jsx transform * remove react imports * adjust grafana-icons build * is this the correct syntax? * try this * well this was much easier than expected... * change grafana-plugin-configs webpack config * fixes * fix lockfile * fix 2 more violations * use path.resolve instead of require.resolve * remove react import * fix react imports * more fixes * remove React import * remove import React from docs * remove another react import
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import { CSSProperties } from 'react';
|
|
import * as React from 'react';
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { useStyles2 } from '@grafana/ui';
|
|
|
|
export interface OverlayProps {
|
|
topRight1?: React.ReactNode[];
|
|
topRight2?: React.ReactNode[];
|
|
bottomLeft?: React.ReactNode[];
|
|
blStyle?: CSSProperties;
|
|
}
|
|
|
|
export const GeomapOverlay = ({ topRight1, topRight2, bottomLeft, blStyle }: OverlayProps) => {
|
|
const topRight1Exists = (topRight1 && topRight1.length > 0) ?? false;
|
|
const styles = useStyles2(getStyles(topRight1Exists));
|
|
return (
|
|
<div className={styles.overlay}>
|
|
{Boolean(topRight1?.length) && <div className={styles.TR1}>{topRight1}</div>}
|
|
{Boolean(topRight2?.length) && <div className={styles.TR2}>{topRight2}</div>}
|
|
{Boolean(bottomLeft?.length) && (
|
|
<div className={styles.BL} style={blStyle}>
|
|
{bottomLeft}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const getStyles = (topRight1Exists: boolean) => (theme: GrafanaTheme2) => ({
|
|
overlay: css({
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: 500,
|
|
pointerEvents: 'none',
|
|
}),
|
|
TR1: css({
|
|
right: '0.5em',
|
|
pointerEvents: 'auto',
|
|
position: 'absolute',
|
|
top: '0.5em',
|
|
}),
|
|
TR2: css({
|
|
position: 'absolute',
|
|
top: topRight1Exists ? '80px' : '8px',
|
|
right: '8px',
|
|
pointerEvents: 'auto',
|
|
}),
|
|
BL: css({
|
|
position: 'absolute',
|
|
bottom: '8px',
|
|
left: '8px',
|
|
pointerEvents: 'auto',
|
|
}),
|
|
});
|