IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-25 16:31:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

Drawer: Improve performance when resizing (#89691)

Browse Source 
apply dynamic styles as styles instead of emotion classes
This commit is contained in:
Ashley Harrison 2024-06-26 09:37:17 +01:00 committed by GitHub
parent b1ce7e8a83
commit 7b0362b228
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/grafana-ui/src/components/Drawer/Drawer.tsx
View File

@ -54,6 +54,12 @@ export interface Props {
onClose: () => void;
}
const drawerSizes = {
sm: { width: '25vw', minWidth: 384 },
md: { width: '50vw', minWidth: 568 },
lg: { width: '75vw', minWidth: 744 },
};
export function Drawer({
children,
onClose,
@ -68,7 +74,7 @@ export function Drawer({
const [drawerWidth, onMouseDown, onTouchStart] = useResizebleDrawer();
const styles = useStyles2(getStyles);
const sizeStyles = useStyles2(getSizeStyles, size, drawerWidth ?? width);
const wrapperStyles = useStyles2(getWrapperStyles, size);
const dragStyles = useStyles2(getDragStyles);
const overlayRef = React.useRef(null);
@ -85,8 +91,9 @@ export function Drawer({
// Adds body class while open so the toolbar nav can hide some actions while drawer is open
useBodyClassWhileOpen();
const rootClass = cx(styles.drawer, sizeStyles);
const content = <div className={styles.content}>{children}</div>;
const overrideWidth = drawerWidth ?? width ?? drawerSizes[size].width;
const minWidth = drawerSizes[size].minWidth;
return (
<RcDrawer
@ -95,7 +102,16 @@ export function Drawer({
placement="right"
getContainer={'.main-view'}
className={styles.drawerContent}
rootClassName={rootClass}
rootClassName={styles.drawer}
classNames={{
wrapper: wrapperStyles,
}}
styles={{
wrapper: {
width: overrideWidth,
minWidth,
},
}}
width={''}
motion={{
motionAppear: true,
@ -356,27 +372,14 @@ const getStyles = (theme: GrafanaTheme2) => {
};
};
const drawerSizes = {
sm: { width: '25vw', minWidth: 384 },
md: { width: '50vw', minWidth: 568 },
lg: { width: '75vw', minWidth: 744 },
};
function getSizeStyles(theme: GrafanaTheme2, size: 'sm' | 'md' | 'lg', overrideWidth: number | string | undefined) {
let width = overrideWidth ?? drawerSizes[size].width;
let minWidth = drawerSizes[size].minWidth;
function getWrapperStyles(theme: GrafanaTheme2, size: 'sm' | 'md' | 'lg') {
return css({
'.rc-drawer-content-wrapper': {
label: `drawer-content-wrapper-${size}`,
width: width,
minWidth: minWidth,
overflow: 'unset',
label: `drawer-content-wrapper-${size}`,
overflow: 'unset !important',
[theme.breakpoints.down('md')]: {
width: `calc(100% - ${theme.spacing(2)}) !important`,
minWidth: 0,
},
[theme.breakpoints.down('md')]: {
width: `calc(100% - ${theme.spacing(2)}) !important`,
minWidth: 0,
},
});
}