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

Add public tags to ThemeContext hooks (#33940)

Browse Source
This commit is contained in:
Alex Khomenko 2021-05-11 19:24:47 +03:00 committed by GitHub
parent 6d4376c16d
commit 7cd4066e9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,7 @@ export const ThemeContext = React.createContext(createTheme());
ThemeContext.displayName = 'ThemeContext'; ThemeContext.displayName = 'ThemeContext';
/** @deprecated use withTheme2 */ /** @deprecated use withTheme2 */
/** @public */
export const withTheme = <P extends Themeable, S extends {} = {}>(Component: React.ComponentType<P>) => { export const withTheme = <P extends Themeable, S extends {} = {}>(Component: React.ComponentType<P>) => {
const WithTheme: React.FunctionComponent<Subtract<P, Themeable>> = (props) => { const WithTheme: React.FunctionComponent<Subtract<P, Themeable>> = (props) => {
/** /**
@ -62,10 +63,12 @@ export const withTheme2 = <P extends Themeable2, S extends {} = {}>(Component: R
}; };
/** @deprecated use useTheme2 */ /** @deprecated use useTheme2 */
/** @public */
export function useTheme(): GrafanaTheme { export function useTheme(): GrafanaTheme {
return useContext(ThemeContextMock || ThemeContext).v1; return useContext(ThemeContextMock || ThemeContext).v1;
} }
/** @public */
export function useTheme2(): GrafanaTheme2 { export function useTheme2(): GrafanaTheme2 {
return useContext(ThemeContextMock || ThemeContext); return useContext(ThemeContextMock || ThemeContext);
} }
@ -77,6 +80,7 @@ export function useTheme2(): GrafanaTheme2 {
* you pass in doesn't change, or only if it needs to. (i.e. declare * you pass in doesn't change, or only if it needs to. (i.e. declare
* your style creator outside of a function component or use `useCallback()`.) * your style creator outside of a function component or use `useCallback()`.)
* */ * */
/** @public */
export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) { export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
const theme = useTheme(); const theme = useTheme();
@ -96,6 +100,7 @@ export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
* you pass in doesn't change, or only if it needs to. (i.e. declare * you pass in doesn't change, or only if it needs to. (i.e. declare
* your style creator outside of a function component or use `useCallback()`.) * your style creator outside of a function component or use `useCallback()`.)
* */ * */
/** @public */
export function useStyles2<T>(getStyles: (theme: GrafanaTheme2) => T) { export function useStyles2<T>(getStyles: (theme: GrafanaTheme2) => T) {
const theme = useTheme2(); const theme = useTheme2();
@ -111,6 +116,7 @@ export function useStyles2<T>(getStyles: (theme: GrafanaTheme2) => T) {
/** /**
* Enables theme context mocking * Enables theme context mocking
*/ */
/** @public */
export const mockThemeContext = (theme: Partial<GrafanaTheme2>) => { export const mockThemeContext = (theme: Partial<GrafanaTheme2>) => {
ThemeContextMock = React.createContext(theme as GrafanaTheme2); ThemeContextMock = React.createContext(theme as GrafanaTheme2);

2
packages/grafana-ui/src/themes/getTheme.ts
View File

@ -2,6 +2,7 @@ import { createTheme, GrafanaTheme } from '@grafana/data';
let themeMock: ((name?: string) => GrafanaTheme) | null; let themeMock: ((name?: string) => GrafanaTheme) | null;
/** @public */
export const getTheme = (mode: 'dark' | 'light' = 'dark') => { export const getTheme = (mode: 'dark' | 'light' = 'dark') => {
if (themeMock) { if (themeMock) {
return themeMock(mode); return themeMock(mode);
@ -10,6 +11,7 @@ export const getTheme = (mode: 'dark' | 'light' = 'dark') => {
return createTheme({ colors: { mode } }).v1; return createTheme({ colors: { mode } }).v1;
}; };
/** @public */
export const mockTheme = (mock: (name?: string) => GrafanaTheme) => { export const mockTheme = (mock: (name?: string) => GrafanaTheme) => {
themeMock = mock; themeMock = mock;
return () => { return () => {