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

Flex: Use forwardRef and useStyles2 additional args (#75138)

Browse Source 
Refactor for forwardRef and use of new useStyles2
This commit is contained in:
Tobias Skarhed 2023-09-20 10:51:32 +02:00 committed by GitHub
parent 04775ec940
commit 95c9947af2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafana-ui/src/components/Flex/Flex.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { useCallback } from 'react'; import React from 'react';
import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data'; import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
@ -41,16 +41,17 @@ interface FlexProps {
children?: React.ReactNode; children?: React.ReactNode;
} }
export const Flex = ({ gap = 1, alignItems, justifyContent, direction, wrap, children }: FlexProps) => { export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
const styles = useStyles2( ({ gap = 1, alignItems, justifyContent, direction, wrap, children }, ref) => {
useCallback( const styles = useStyles2(getStyles, gap, alignItems, justifyContent, direction, wrap);
(theme) => getStyles(theme, gap, alignItems, justifyContent, direction, wrap),
[gap, alignItems, justifyContent, direction, wrap]
)
);
return <div className={styles.flex}>{children}</div>; return (
}; <div ref={ref} className={styles.flex}>
{children}
</div>
);
}
);
Flex.displayName = 'Flex'; Flex.displayName = 'Flex';