@gooddata/sdk-ui-theme-provider 9.10.0-alpha.0 → 9.10.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/ThemeProvider/Context.d.ts +27 -2
- package/esm/ThemeProvider/Context.d.ts.map +1 -1
- package/esm/ThemeProvider/Context.js +25 -5
- package/esm/ThemeProvider/Context.js.map +1 -1
- package/esm/ThemeProvider/ThemeProvider.d.ts.map +1 -1
- package/esm/ThemeProvider/ThemeProvider.js +6 -2
- package/esm/ThemeProvider/ThemeProvider.js.map +1 -1
- package/esm/index.d.ts +1 -1
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +2 -2
- package/esm/index.js.map +1 -1
- package/esm/sdk-ui-theme-provider.d.ts +23 -2
- package/package.json +7 -7
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ITheme } from "@gooddata/sdk-model";
|
|
3
|
+
/**
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export type ThemeStatus = "pending" | "loading" | "success";
|
|
3
7
|
/**
|
|
4
8
|
* @public
|
|
5
9
|
*/
|
|
@@ -10,15 +14,24 @@ export interface IThemeContextProviderProps {
|
|
|
10
14
|
theme: ITheme;
|
|
11
15
|
/**
|
|
12
16
|
* Flag telling whether the theme object is being loaded or not
|
|
17
|
+
* @deprecated use themeStatus instead
|
|
18
|
+
*
|
|
13
19
|
*/
|
|
14
20
|
themeIsLoading: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Status telling whether the theme object is being loaded or not
|
|
23
|
+
* Started in pending state, then switches to loading and finally to success
|
|
24
|
+
* Can skip loading if theme does not have to be loaded from backend
|
|
25
|
+
*
|
|
26
|
+
*/
|
|
27
|
+
themeStatus?: ThemeStatus;
|
|
15
28
|
/**
|
|
16
29
|
* React children
|
|
17
30
|
*/
|
|
18
31
|
children?: React.ReactNode;
|
|
19
32
|
}
|
|
20
33
|
/**
|
|
21
|
-
* Provides the theme object
|
|
34
|
+
* Provides the theme object, themeIsLoading flag and themeStatus into context
|
|
22
35
|
*
|
|
23
36
|
* @public
|
|
24
37
|
*/
|
|
@@ -49,6 +62,12 @@ export declare const useTheme: (theme?: ITheme) => ITheme | undefined;
|
|
|
49
62
|
* @public
|
|
50
63
|
*/
|
|
51
64
|
export declare const useThemeIsLoading: () => boolean | undefined;
|
|
65
|
+
/**
|
|
66
|
+
* Hook for reaching the themeStatus from context
|
|
67
|
+
*
|
|
68
|
+
* @public
|
|
69
|
+
*/
|
|
70
|
+
export declare const useThemeStatus: () => ThemeStatus | undefined;
|
|
52
71
|
/**
|
|
53
72
|
* @internal
|
|
54
73
|
*/
|
|
@@ -62,6 +81,12 @@ export declare function withThemeObject<T extends {
|
|
|
62
81
|
export declare function withThemeIsLoading<T extends {
|
|
63
82
|
themeIsLoading?: boolean;
|
|
64
83
|
}>(Component: React.ComponentType<T>): React.ComponentType<Omit<T, "themeIsLoading">>;
|
|
84
|
+
/**
|
|
85
|
+
* @internal
|
|
86
|
+
*/
|
|
87
|
+
export declare function withThemeStatus<T extends {
|
|
88
|
+
themeStatus?: ThemeStatus;
|
|
89
|
+
}>(Component: React.ComponentType<T>): React.ComponentType<Omit<T, "themeStatus">>;
|
|
65
90
|
/**
|
|
66
91
|
* Injects both theme object and isThemeLoading flag into component as properties
|
|
67
92
|
*
|
|
@@ -70,5 +95,5 @@ export declare function withThemeIsLoading<T extends {
|
|
|
70
95
|
export declare function withTheme<T extends {
|
|
71
96
|
theme?: ITheme;
|
|
72
97
|
workspace?: string;
|
|
73
|
-
}>(Component: React.ComponentType<T>): React.ComponentType<Omit<T, "theme" | "themeIsLoading">>;
|
|
98
|
+
}>(Component: React.ComponentType<T>): React.ComponentType<Omit<T, "theme" | "themeIsLoading" | "themeStatus">>;
|
|
74
99
|
//# sourceMappingURL=Context.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/Context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/Context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAY7C;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5D;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,cAAc,EAAE,OAAO,CAAC;IAExB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAarE,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,WAAY,MAAM,KAAG,MAAM,GAAG,SAGlD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAO,OAAO,GAAG,SAE9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,QAAO,WAAW,GAAG,SAE/C,CAAC;AAEF;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,EAClF,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAClC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAUvC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS;IAAE,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,EACrE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAClC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAUhD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS;IAAE,WAAW,CAAC,EAAE,WAAW,CAAA;CAAE,EACnE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAClC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAU7C;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,EACtE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAClC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,GAAG,gBAAgB,GAAG,aAAa,CAAC,CAAC,CAO1E"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// (C) 2019-
|
|
1
|
+
// (C) 2019-2024 GoodData Corporation
|
|
2
2
|
import React from "react";
|
|
3
3
|
import compose from "lodash/flowRight.js";
|
|
4
4
|
import { wrapDisplayName } from "@gooddata/sdk-ui";
|
|
@@ -6,14 +6,17 @@ const ThemeContext = React.createContext(undefined);
|
|
|
6
6
|
ThemeContext.displayName = "ThemeContext";
|
|
7
7
|
const ThemeIsLoadingContext = React.createContext(undefined);
|
|
8
8
|
ThemeIsLoadingContext.displayName = "ThemeIsLoadingContext";
|
|
9
|
+
const ThemeStatusContext = React.createContext("pending");
|
|
10
|
+
ThemeStatusContext.displayName = "ThemeStatusContext";
|
|
9
11
|
/**
|
|
10
|
-
* Provides the theme object
|
|
12
|
+
* Provides the theme object, themeIsLoading flag and themeStatus into context
|
|
11
13
|
*
|
|
12
14
|
* @public
|
|
13
15
|
*/
|
|
14
|
-
export const ThemeContextProvider = ({ children, theme, themeIsLoading, }) => {
|
|
16
|
+
export const ThemeContextProvider = ({ children, theme, themeIsLoading, themeStatus, }) => {
|
|
15
17
|
return (React.createElement(ThemeContext.Provider, { value: theme },
|
|
16
|
-
React.createElement(ThemeIsLoadingContext.Provider, { value: themeIsLoading },
|
|
18
|
+
React.createElement(ThemeIsLoadingContext.Provider, { value: themeIsLoading },
|
|
19
|
+
React.createElement(ThemeStatusContext.Provider, { value: themeStatus }, children))));
|
|
17
20
|
};
|
|
18
21
|
/**
|
|
19
22
|
* Hook for reaching the theme from context.
|
|
@@ -46,6 +49,14 @@ export const useTheme = (theme) => {
|
|
|
46
49
|
export const useThemeIsLoading = () => {
|
|
47
50
|
return React.useContext(ThemeIsLoadingContext);
|
|
48
51
|
};
|
|
52
|
+
/**
|
|
53
|
+
* Hook for reaching the themeStatus from context
|
|
54
|
+
*
|
|
55
|
+
* @public
|
|
56
|
+
*/
|
|
57
|
+
export const useThemeStatus = () => {
|
|
58
|
+
return React.useContext(ThemeStatusContext);
|
|
59
|
+
};
|
|
49
60
|
/**
|
|
50
61
|
* @internal
|
|
51
62
|
*/
|
|
@@ -64,12 +75,21 @@ export function withThemeIsLoading(Component) {
|
|
|
64
75
|
};
|
|
65
76
|
return wrapDisplayName("withThemeIsLoading", ThemeContextProvider)(ComponentWithInjectedThemeIsLoading);
|
|
66
77
|
}
|
|
78
|
+
/**
|
|
79
|
+
* @internal
|
|
80
|
+
*/
|
|
81
|
+
export function withThemeStatus(Component) {
|
|
82
|
+
const ComponentWithInjectedThemeStatus = (props) => {
|
|
83
|
+
return (React.createElement(ThemeStatusContext.Consumer, null, (themeStatus) => React.createElement(Component, { themeStatus: themeStatus, ...props })));
|
|
84
|
+
};
|
|
85
|
+
return wrapDisplayName("withThemeStatus", ThemeContextProvider)(ComponentWithInjectedThemeStatus);
|
|
86
|
+
}
|
|
67
87
|
/**
|
|
68
88
|
* Injects both theme object and isThemeLoading flag into component as properties
|
|
69
89
|
*
|
|
70
90
|
* @public
|
|
71
91
|
*/
|
|
72
92
|
export function withTheme(Component) {
|
|
73
|
-
return compose(wrapDisplayName("withContexts"), withThemeObject, withThemeIsLoading)(Component);
|
|
93
|
+
return compose(wrapDisplayName("withContexts"), withThemeObject, withThemeIsLoading, withThemeStatus)(Component);
|
|
74
94
|
}
|
|
75
95
|
//# sourceMappingURL=Context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../src/ThemeProvider/Context.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAqB,SAAS,CAAC,CAAC;AACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,MAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAAsB,SAAS,CAAC,CAAC;AAClF,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../src/ThemeProvider/Context.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAqB,SAAS,CAAC,CAAC;AACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,MAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAAsB,SAAS,CAAC,CAAC;AAClF,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAE5D,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAA0B,SAAS,CAAC,CAAC;AACnF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAoCtD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAyC,CAAC,EACvE,QAAQ,EACR,KAAK,EACL,cAAc,EACd,WAAW,GACd,EAAE,EAAE;IACD,OAAO,CACH,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAC/B,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc;YACjD,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,IAAG,QAAQ,CAA+B,CAC5D,CACb,CAC3B,CAAC;AACN,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAc,EAAsB,EAAE;IAC3D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACxD,OAAO,KAAK,IAAI,gBAAgB,CAAC;AACrC,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAwB,EAAE;IACvD,OAAO,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAA4B,EAAE;IACxD,OAAO,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAChD,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,eAAe,CAC3B,SAAiC;IAEjC,MAAM,gCAAgC,GAAgB,CAAC,KAAK,EAAE,EAAE;QAC5D,OAAO,CACH,oBAAC,YAAY,CAAC,QAAQ,QACjB,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAC,SAAS,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,GAAI,CAC7C,CAC3B,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,eAAe,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC,gCAAgC,CAAC,CAAC;AACtG,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAC9B,SAAiC;IAEjC,MAAM,mCAAmC,GAAgB,CAAC,KAAK,EAAE,EAAE;QAC/D,OAAO,CACH,oBAAC,qBAAqB,CAAC,QAAQ,QAC1B,CAAC,cAAc,EAAE,EAAE,CAAC,oBAAC,SAAS,IAAC,cAAc,EAAE,cAAc,KAAM,KAAK,GAAI,CAChD,CACpC,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,eAAe,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC,mCAAmC,CAAC,CAAC;AAC5G,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe,CAC3B,SAAiC;IAEjC,MAAM,gCAAgC,GAAgB,CAAC,KAAK,EAAE,EAAE;QAC5D,OAAO,CACH,oBAAC,kBAAkB,CAAC,QAAQ,QACvB,CAAC,WAAW,EAAE,EAAE,CAAC,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,KAAM,KAAK,GAAI,CAC1C,CACjC,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,eAAe,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC,gCAAgC,CAAC,CAAC;AACtG,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CACrB,SAAiC;IAEjC,OAAO,OAAO,CACV,eAAe,CAAC,cAAc,CAAC,EAC/B,eAAe,EACf,kBAAkB,EAClB,eAAe,CAClB,CAAC,SAAS,CAAC,CAAC;AACjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAChC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB;;;;;;OAMG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,OAS3C,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAChC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB;;;;;;OAMG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,OAS3C,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmEvD,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// (C) 2020-
|
|
1
|
+
// (C) 2020-2024 GoodData Corporation
|
|
2
2
|
import React, { useEffect, useState, useRef } from "react";
|
|
3
3
|
import { getLuminance } from "polished";
|
|
4
4
|
import identity from "lodash/identity.js";
|
|
@@ -33,6 +33,7 @@ export const ThemeProvider = ({ children, theme: themeParam, backend: backendPar
|
|
|
33
33
|
const workspace = useWorkspace(workspaceParam);
|
|
34
34
|
const [theme, setTheme] = useState(themeParam ?? {});
|
|
35
35
|
const [isLoading, setIsLoading] = useState(false);
|
|
36
|
+
const [status, setStatus] = useState("pending");
|
|
36
37
|
const lastWorkspace = useRef();
|
|
37
38
|
lastWorkspace.current = workspace;
|
|
38
39
|
useEffect(() => {
|
|
@@ -40,6 +41,7 @@ export const ThemeProvider = ({ children, theme: themeParam, backend: backendPar
|
|
|
40
41
|
if (themeParam) {
|
|
41
42
|
const preparedTheme = prepareTheme(themeParam, enableComplementaryPalette);
|
|
42
43
|
setTheme(preparedTheme);
|
|
44
|
+
setStatus("success");
|
|
43
45
|
clearCssProperties();
|
|
44
46
|
setCssProperties(preparedTheme, isDarkTheme(preparedTheme));
|
|
45
47
|
return;
|
|
@@ -50,6 +52,7 @@ export const ThemeProvider = ({ children, theme: themeParam, backend: backendPar
|
|
|
50
52
|
return;
|
|
51
53
|
}
|
|
52
54
|
setIsLoading(true);
|
|
55
|
+
setStatus("loading");
|
|
53
56
|
const selectedTheme = await backend.workspace(workspace).styling().getTheme();
|
|
54
57
|
if (lastWorkspace.current === workspace) {
|
|
55
58
|
const modifiedTheme = modifier(selectedTheme);
|
|
@@ -58,6 +61,7 @@ export const ThemeProvider = ({ children, theme: themeParam, backend: backendPar
|
|
|
58
61
|
clearCssProperties();
|
|
59
62
|
setCssProperties(preparedTheme, isDarkTheme(preparedTheme));
|
|
60
63
|
setIsLoading(false);
|
|
64
|
+
setStatus("success");
|
|
61
65
|
}
|
|
62
66
|
};
|
|
63
67
|
fetchData();
|
|
@@ -69,6 +73,6 @@ export const ThemeProvider = ({ children, theme: themeParam, backend: backendPar
|
|
|
69
73
|
}
|
|
70
74
|
};
|
|
71
75
|
}, [removeGlobalStylesOnUnmout]);
|
|
72
|
-
return (React.createElement(ThemeContextProvider, { theme: theme, themeIsLoading: isLoading }, children));
|
|
76
|
+
return (React.createElement(ThemeContextProvider, { theme: theme, themeIsLoading: isLoading, themeStatus: status }, children));
|
|
73
77
|
};
|
|
74
78
|
//# sourceMappingURL=ThemeProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAI5D,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"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"}
|
package/esm/index.d.ts
CHANGED
|
@@ -9,5 +9,5 @@
|
|
|
9
9
|
* @packageDocumentation
|
|
10
10
|
*/
|
|
11
11
|
export { IThemeProviderProps, ThemeProvider, ThemeModifier, isDarkTheme, } from "./ThemeProvider/ThemeProvider.js";
|
|
12
|
-
export { IThemeContextProviderProps, withTheme, useTheme, useThemeIsLoading, ThemeContextProvider, } from "./ThemeProvider/Context.js";
|
|
12
|
+
export { IThemeContextProviderProps, withTheme, useTheme, useThemeIsLoading, useThemeStatus, ThemeContextProvider, ThemeStatus, } from "./ThemeProvider/Context.js";
|
|
13
13
|
//# sourceMappingURL=index.d.ts.map
|
package/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AACH,OAAO,EACH,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,WAAW,GACd,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACH,0BAA0B,EAC1B,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AACH,OAAO,EACH,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,WAAW,GACd,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACH,0BAA0B,EAC1B,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,oBAAoB,EACpB,WAAW,GACd,MAAM,4BAA4B,CAAC"}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// (C) 2020-
|
|
1
|
+
// (C) 2020-2024 GoodData Corporation
|
|
2
2
|
/**
|
|
3
3
|
* This package provides tools to make your application support themes.
|
|
4
4
|
*
|
|
@@ -10,5 +10,5 @@
|
|
|
10
10
|
* @packageDocumentation
|
|
11
11
|
*/
|
|
12
12
|
export { ThemeProvider, isDarkTheme, } from "./ThemeProvider/ThemeProvider.js";
|
|
13
|
-
export { withTheme, useTheme, useThemeIsLoading, ThemeContextProvider, } from "./ThemeProvider/Context.js";
|
|
13
|
+
export { withTheme, useTheme, useThemeIsLoading, useThemeStatus, ThemeContextProvider, } from "./ThemeProvider/Context.js";
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC;;;;;;;;;GASG;AACH,OAAO,EAEH,aAAa,EAEb,WAAW,GACd,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAEH,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC;;;;;;;;;GASG;AACH,OAAO,EAEH,aAAa,EAEb,WAAW,GACd,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAEH,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,oBAAoB,GAEvB,MAAM,4BAA4B,CAAC"}
|
|
@@ -28,8 +28,17 @@ export declare interface IThemeContextProviderProps {
|
|
|
28
28
|
theme: ITheme;
|
|
29
29
|
/**
|
|
30
30
|
* Flag telling whether the theme object is being loaded or not
|
|
31
|
+
* @deprecated use themeStatus instead
|
|
32
|
+
*
|
|
31
33
|
*/
|
|
32
34
|
themeIsLoading: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Status telling whether the theme object is being loaded or not
|
|
37
|
+
* Started in pending state, then switches to loading and finally to success
|
|
38
|
+
* Can skip loading if theme does not have to be loaded from backend
|
|
39
|
+
*
|
|
40
|
+
*/
|
|
41
|
+
themeStatus?: ThemeStatus;
|
|
33
42
|
/**
|
|
34
43
|
* React children
|
|
35
44
|
*/
|
|
@@ -90,7 +99,7 @@ export declare interface IThemeProviderProps {
|
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
/**
|
|
93
|
-
* Provides the theme object
|
|
102
|
+
* Provides the theme object, themeIsLoading flag and themeStatus into context
|
|
94
103
|
*
|
|
95
104
|
* @public
|
|
96
105
|
*/
|
|
@@ -114,6 +123,11 @@ export declare type ThemeModifier = (theme: ITheme) => ITheme;
|
|
|
114
123
|
*/
|
|
115
124
|
export declare const ThemeProvider: React_2.FC<IThemeProviderProps>;
|
|
116
125
|
|
|
126
|
+
/**
|
|
127
|
+
* @public
|
|
128
|
+
*/
|
|
129
|
+
export declare type ThemeStatus = "pending" | "loading" | "success";
|
|
130
|
+
|
|
117
131
|
/**
|
|
118
132
|
* Hook for reaching the theme from context.
|
|
119
133
|
*
|
|
@@ -142,6 +156,13 @@ export declare const useTheme: (theme?: ITheme) => ITheme | undefined;
|
|
|
142
156
|
*/
|
|
143
157
|
export declare const useThemeIsLoading: () => boolean | undefined;
|
|
144
158
|
|
|
159
|
+
/**
|
|
160
|
+
* Hook for reaching the themeStatus from context
|
|
161
|
+
*
|
|
162
|
+
* @public
|
|
163
|
+
*/
|
|
164
|
+
export declare const useThemeStatus: () => ThemeStatus | undefined;
|
|
165
|
+
|
|
145
166
|
/**
|
|
146
167
|
* Injects both theme object and isThemeLoading flag into component as properties
|
|
147
168
|
*
|
|
@@ -150,6 +171,6 @@ export declare const useThemeIsLoading: () => boolean | undefined;
|
|
|
150
171
|
export declare function withTheme<T extends {
|
|
151
172
|
theme?: ITheme;
|
|
152
173
|
workspace?: string;
|
|
153
|
-
}>(Component: React_2.ComponentType<T>): React_2.ComponentType<Omit<T, "theme" | "themeIsLoading">>;
|
|
174
|
+
}>(Component: React_2.ComponentType<T>): React_2.ComponentType<Omit<T, "theme" | "themeIsLoading" | "themeStatus">>;
|
|
154
175
|
|
|
155
176
|
export { }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gooddata/sdk-ui-theme-provider",
|
|
3
|
-
"version": "9.10.0-alpha.
|
|
3
|
+
"version": "9.10.0-alpha.10",
|
|
4
4
|
"description": "GoodData SDK - Theme provider",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"lodash": "^4.17.19",
|
|
24
24
|
"polished": "^3.6.7",
|
|
25
|
-
"ts-invariant": "^0.7.
|
|
25
|
+
"ts-invariant": "^0.7.5",
|
|
26
26
|
"tslib": "^2.5.0",
|
|
27
|
-
"@gooddata/sdk-
|
|
28
|
-
"@gooddata/sdk-
|
|
29
|
-
"@gooddata/sdk-
|
|
27
|
+
"@gooddata/sdk-model": "9.10.0-alpha.10",
|
|
28
|
+
"@gooddata/sdk-ui": "9.10.0-alpha.10",
|
|
29
|
+
"@gooddata/sdk-backend-spi": "9.10.0-alpha.10"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "^16.10.0 || ^17.0.0 || ^18.0.0",
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
"react-dom": "^18.2.0",
|
|
66
66
|
"typescript": "5.3.3",
|
|
67
67
|
"vitest": "1.0.4",
|
|
68
|
-
"@gooddata/
|
|
69
|
-
"@gooddata/
|
|
68
|
+
"@gooddata/sdk-backend-mockingbird": "9.10.0-alpha.10",
|
|
69
|
+
"@gooddata/reference-workspace": "9.10.0-alpha.10"
|
|
70
70
|
},
|
|
71
71
|
"scripts": {
|
|
72
72
|
"clean": "rm -rf ci dist esm coverage *.log tsconfig.tsbuildinfo",
|