IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Portal: optimizations (#37459)

Browse Source 
Co-authored-by: An Le <an.le@grafana.com>
This commit is contained in:
Leon Sorokin 2021-08-03 16:27:27 -05:00 committed by GitHub
parent d48e65bf74
commit 0b7253406b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/grafana-ui/src/components/Portal/Portal.tsx
View File

@ -1,4 +1,4 @@
import React, { PropsWithChildren, useEffect, useState } from 'react';
import React, { PropsWithChildren, useLayoutEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { useTheme2 } from '../../themes';
@ -9,25 +9,30 @@ interface Props {
}
export function Portal(props: PropsWithChildren<Props>) {
const { children, className, root = document.body, forwardedRef } = props;
const { children, className, root: portalRoot = document.body, forwardedRef } = props;
const theme = useTheme2();
const [node] = useState(document.createElement('div'));
const portalRoot = root;
if (className) {
node.classList.add(className);
const node = useRef<HTMLDivElement | null>(null);
if (!node.current) {
node.current = document.createElement('div');
if (className) {
node.current.className = className;
}
node.current.style.position = 'relative';
node.current.style.zIndex = `${theme.zIndex.portal}`;
}
node.style.position = 'relative';
node.style.zIndex = `${theme.zIndex.portal}`;
useEffect(() => {
portalRoot.appendChild(node);
useLayoutEffect(() => {
if (node.current) {
portalRoot.appendChild(node.current);
}
return () => {
portalRoot.removeChild(node);
if (node.current) {
portalRoot.removeChild(node.current);
}
};
}, [node, portalRoot]);
}, [portalRoot]);
return ReactDOM.createPortal(<div ref={forwardedRef}>{children}</div>, node);
return ReactDOM.createPortal(<div ref={forwardedRef}>{children}</div>, node.current);
}
export const RefForwardingPortal = React.forwardRef<HTMLDivElement, Props>((props, ref) => {