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

ThemeContext: Make useStyles type-aware (#26056)

Browse Source 
PLUS:
Make it more consise
Add unit test
This commit is contained in:
Andreas Opferkuch 2020-07-06 12:16:02 +02:00 committed by GitHub
parent a2737c0896
commit 390c80d7f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/grafana-ui/src/themes/ThemeContext.test.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import { config } from '@grafana/runtime';
import { css } from 'emotion';
import { mount } from 'enzyme';
import { useStyles } from './ThemeContext';
describe('useStyles', () => {
it('passes in theme and returns style object', () => {
const Dummy: React.FC = function() {
const styles = useStyles(theme => {
expect(theme).toEqual(config.theme);
return {
someStyle: css`
color: ${theme?.palette.critical};
`,
};
});
expect(typeof styles.someStyle).toBe('string');
return <div>dummy</div>;
};
mount(<Dummy />);
});
});

9
packages/grafana-ui/src/themes/ThemeContext.tsx
View File

@ -38,12 +38,11 @@ export const withTheme = <P extends Themeable, S extends {} = {}>(Component: Rea
export function useTheme(): GrafanaTheme {
return useContext(ThemeContextMock || ThemeContext);
}
/** Hook for using memoized styles with access to the theme. */
export const useStyles = (getStyles: (theme?: GrafanaTheme) => any) => {
const currentTheme = useTheme();
const callback = stylesFactory(stylesTheme => getStyles(stylesTheme));
return callback(currentTheme);
};
export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
return stylesFactory(getStyles)(useTheme());
}
/**
* Enables theme context mocking