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

Grafana/ui: Wrap Box in forwardRef (#76555)

Browse Source 
* Grafana/ui: Wrap Box in forwardRef

* Destructure props
This commit is contained in:
Alex Khomenko
2023-10-13 16:40:25 +02:00
committed by GitHub
parent 40b79de0cd
commit 8bf0143908
1 changed files with 36 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
packages/grafana-ui/src/components/Layout/Box/Box.tsx
View File

@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { ElementType } from 'react';
import React, { ElementType, forwardRef, PropsWithChildren } from 'react';
import { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data';
@@ -68,34 +68,35 @@ interface BoxProps {
element?: ElementType;
}
export const Box = ({
children,
margin,
marginX,
marginY,
marginTop,
marginBottom,
marginLeft,
marginRight,
padding,
paddingX,
paddingY,
paddingTop,
paddingBottom,
paddingLeft,
paddingRight,
display,
backgroundColor,
grow,
shrink,
borderColor,
borderStyle,
borderRadius,
justifyContent,
alignItems,
boxShadow,
element,
}: React.PropsWithChildren<BoxProps>) => {
export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props, ref) => {
const {
children,
margin,
marginX,
marginY,
marginTop,
marginBottom,
marginLeft,
marginRight,
padding,
paddingX,
paddingY,
paddingTop,
paddingBottom,
paddingLeft,
paddingRight,
display,
backgroundColor,
grow,
shrink,
borderColor,
borderStyle,
borderRadius,
justifyContent,
alignItems,
boxShadow,
element,
} = props;
const styles = useStyles2(
getStyles,
margin,
@@ -125,8 +126,12 @@ export const Box = ({
);
const Element = element ?? 'div';
return <Element className={styles.root}>{children}</Element>;
};
return (
<Element ref={ref} className={styles.root}>
{children}
</Element>
);
});
Box.displayName = 'Box';