@os-design/theming-tools 1.0.2 → 1.0.3
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/dist/cjs/utils/createThemeOverrider.js +7 -3
- package/dist/cjs/utils/createThemeOverrider.js.map +1 -1
- package/dist/cjs/utils/createThemeProvider.js +7 -3
- package/dist/cjs/utils/createThemeProvider.js.map +1 -1
- package/dist/esm/utils/createThemeOverrider.js +10 -8
- package/dist/esm/utils/createThemeOverrider.js.map +1 -1
- package/dist/esm/utils/createThemeProvider.js +14 -12
- package/dist/esm/utils/createThemeProvider.js.map +1 -1
- package/dist/types/utils/createThemeOverrider.d.ts.map +1 -1
- package/dist/types/utils/createThemeProvider.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -26,6 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
26
26
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
27
|
|
|
28
28
|
function createThemeOverrider(TC, useTheme) {
|
|
29
|
+
// eslint-disable-next-line func-names
|
|
29
30
|
return function (_ref) {
|
|
30
31
|
var activeTheme = _ref.activeTheme,
|
|
31
32
|
_ref$overrides = _ref.overrides,
|
|
@@ -48,13 +49,16 @@ function createThemeOverrider(TC, useTheme) {
|
|
|
48
49
|
var localTheme = (0, _react.useMemo)(function () {
|
|
49
50
|
return (0, _overrideTheme["default"])(themes[localActiveTheme], localOverrides);
|
|
50
51
|
}, [themes, localActiveTheme, localOverrides]);
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
var contextValue = (0, _react.useMemo)(function () {
|
|
53
|
+
return {
|
|
53
54
|
themes: themes,
|
|
54
55
|
overrides: localOverrides,
|
|
55
56
|
activeTheme: localActiveTheme,
|
|
56
57
|
setActiveTheme: setActiveTheme
|
|
57
|
-
}
|
|
58
|
+
};
|
|
59
|
+
}, [localActiveTheme, localOverrides, setActiveTheme, themes]);
|
|
60
|
+
return /*#__PURE__*/_react["default"].createElement(TC.Provider, {
|
|
61
|
+
value: contextValue
|
|
58
62
|
}, /*#__PURE__*/_react["default"].createElement(_react2.ThemeProvider, {
|
|
59
63
|
theme: localTheme
|
|
60
64
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","parentTheme","theme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme"],"mappings":";;;;;;;;;AAAA;;AACA;;AAGA;;;;;;;;;;;;;;AAiBA,SAASA,oBAAT,CACEC,EADF,EAEEC,QAFF,EAGqB;AACnB,SAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","parentTheme","theme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme","contextValue"],"mappings":";;;;;;;;;AAAA;;AACA;;AAGA;;;;;;;;;;;;;;AAiBA,SAASA,oBAAT,CACEC,EADF,EAEEC,QAFF,EAGqB;AACnB;AACA,SAAO,gBAAqD;AAAA,QAAzCC,WAAyC,QAAzCA,WAAyC;AAAA,8BAA5BC,SAA4B;AAAA,QAA5BA,SAA4B,+BAAhB,EAAgB;AAAA,QAAZC,QAAY,QAAZA,QAAY;;AAC1D,oBAMIH,QAAQ,EANZ;AAAA,QACEI,MADF,aACEA,MADF;AAAA,QAESC,WAFT,aAEEC,KAFF;AAAA,QAGaC,eAHb,aAGEL,SAHF;AAAA,QAIeM,iBAJf,aAIEP,WAJF;AAAA,QAKEQ,cALF,aAKEA,cALF;;AAQA,QAAMC,gBAAgB,GAAGT,WAAW,IAAIO,iBAAxC,CAT0D,CAW1D;;AACA,QAAMG,cAAc,GAAG,oBACrB;AAAA,6CACMV,WAAW,GAAG,EAAH,GAAQM,eADzB,GAEM,OAAOL,SAAP,KAAqB,UAArB,GACCA,SAAD,CAAwBG,WAAxB,CADA,GAEAH,SAJN;AAAA,KADqB,EAOrB,CAACD,WAAD,EAAcM,eAAd,EAA+BL,SAA/B,EAA0CG,WAA1C,CAPqB,CAAvB,CAZ0D,CAsB1D;;AACA,QAAMO,UAAU,GAAG,oBACjB;AAAA,aAAM,+BAAcR,MAAM,CAACM,gBAAD,CAApB,EAAwCC,cAAxC,CAAN;AAAA,KADiB,EAEjB,CAACP,MAAD,EAASM,gBAAT,EAA2BC,cAA3B,CAFiB,CAAnB;AAKA,QAAME,YAAY,GAAG,oBACnB;AAAA,aAAO;AACLT,QAAAA,MAAM,EAANA,MADK;AAELF,QAAAA,SAAS,EAAES,cAFN;AAGLV,QAAAA,WAAW,EAAES,gBAHR;AAILD,QAAAA,cAAc,EAAdA;AAJK,OAAP;AAAA,KADmB,EAOnB,CAACC,gBAAD,EAAmBC,cAAnB,EAAmCF,cAAnC,EAAmDL,MAAnD,CAPmB,CAArB;AAUA,wBACE,gCAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAES;AAApB,oBACE,gCAAC,qBAAD;AAAsB,MAAA,KAAK,EAAED;AAA7B,OACGT,QADH,CADF,CADF;AAOD,GA7CD;AA8CD;;eAEcL,oB","sourcesContent":["import React, { useMemo } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\nimport { UseTheme } from './createUseTheme';\nimport overrideTheme from './overrideTheme';\n\nexport interface ThemeOverriderProps<T> {\n /**\n * The active theme of children.\n * @default undefined\n */\n activeTheme?: keyof ThemeMap<T>;\n /**\n * Overrides the active theme parameters.\n * @default undefined\n */\n overrides?: Partial<T> | ((theme: T) => Partial<T>);\n}\n\nexport type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;\n\nfunction createThemeOverrider<T>(\n TC: ThemeContext<T>,\n useTheme: UseTheme<T>\n): ThemeOverrider<T> {\n // eslint-disable-next-line func-names\n return function ({ activeTheme, overrides = {}, children }) {\n const {\n themes,\n theme: parentTheme,\n overrides: parentOverrides,\n activeTheme: parentActiveTheme,\n setActiveTheme,\n } = useTheme();\n\n const localActiveTheme = activeTheme || parentActiveTheme;\n\n // Parents overrides are ignored if the active theme was specified\n const localOverrides = useMemo<Partial<T>>(\n () => ({\n ...(activeTheme ? {} : parentOverrides),\n ...(typeof overrides === 'function'\n ? (overrides as Function)(parentTheme)\n : overrides),\n }),\n [activeTheme, parentOverrides, overrides, parentTheme]\n );\n\n // Make the local theme\n const localTheme = useMemo<T>(\n () => overrideTheme(themes[localActiveTheme], localOverrides),\n [themes, localActiveTheme, localOverrides]\n );\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: localOverrides,\n activeTheme: localActiveTheme,\n setActiveTheme,\n }),\n [localActiveTheme, localOverrides, setActiveTheme, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={localTheme}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeOverrider;\n"],"file":"createThemeOverrider.js"}
|
|
@@ -38,6 +38,7 @@ function createThemeProvider(TC, defaultThemes) {
|
|
|
38
38
|
},
|
|
39
39
|
setItem: function setItem() {}
|
|
40
40
|
};
|
|
41
|
+
// eslint-disable-next-line func-names
|
|
41
42
|
return function (_ref) {
|
|
42
43
|
var _ref$themes = _ref.themes,
|
|
43
44
|
themes = _ref$themes === void 0 ? defaultThemes : _ref$themes,
|
|
@@ -82,8 +83,8 @@ function createThemeProvider(TC, defaultThemes) {
|
|
|
82
83
|
|
|
83
84
|
getSavedTheme();
|
|
84
85
|
}, [storageKey, themes]);
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
var contextValue = (0, _react.useMemo)(function () {
|
|
87
|
+
return {
|
|
87
88
|
themes: themes,
|
|
88
89
|
overrides: {},
|
|
89
90
|
activeTheme: activeTheme,
|
|
@@ -92,7 +93,10 @@ function createThemeProvider(TC, defaultThemes) {
|
|
|
92
93
|
|
|
93
94
|
localStorage.setItem(storageKey, name);
|
|
94
95
|
}
|
|
95
|
-
}
|
|
96
|
+
};
|
|
97
|
+
}, [activeTheme, storageKey, themes]);
|
|
98
|
+
return /*#__PURE__*/_react["default"].createElement(TC.Provider, {
|
|
99
|
+
value: contextValue
|
|
96
100
|
}, /*#__PURE__*/_react["default"].createElement(_react2.ThemeProvider, {
|
|
97
101
|
theme: themes[activeTheme]
|
|
98
102
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","overrides","name"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAASA,mBAAT,CACEC,EADF,EAEEC,aAFF,EAOoB;AAAA,MAJlBC,YAIkB,uEAJW;AAC3BC,IAAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA,KADkB;AAE3BC,IAAAA,OAAO,EAAE,mBAAM,CAAE;AAFU,GAIX;AAClB,SAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","contextValue","overrides","name"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAASA,mBAAT,CACEC,EADF,EAEEC,aAFF,EAOoB;AAAA,MAJlBC,YAIkB,uEAJW;AAC3BC,IAAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA,KADkB;AAE3BC,IAAAA,OAAO,EAAE,mBAAM,CAAE;AAFU,GAIX;AAClB;AACA,SAAO,gBAKJ;AAAA,2BAJDC,MAIC;AAAA,QAJDA,MAIC,4BAJQJ,aAIR;AAAA,iCAHDK,YAGC;AAAA,QAHDA,YAGC,kCAHc,OAGd;AAAA,+BAFDC,UAEC;AAAA,QAFDA,UAEC,gCAFY,OAEZ;AAAA,QADDC,QACC,QADDA,QACC;;AACD,oBAAsC,qBACpCH,MAAM,CAACC,YAAD,CAAN,GAAuBA,YAAvB,GAAsC,OADF,CAAtC;AAAA;AAAA,QAAOG,WAAP;AAAA,QAAoBC,eAApB;;AAIA,0BAAU,YAAM;AACd,UAAMC,aAAa;AAAA,4EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBACAT,YAAY,CAACC,OAAb,CAAqBI,UAArB,CADA;;AAAA;AACdK,kBAAAA,KADc;AAEpB,sBAAIA,KAAK,IAAIP,MAAM,CAACO,KAAD,CAAnB,EAA4BF,eAAc,CAACE,KAAD,CAAd;;AAFR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAH;;AAAA,wBAAbD,aAAa;AAAA;AAAA;AAAA,SAAnB;;AAIAA,MAAAA,aAAa;AACd,KAND,EAMG,CAACJ,UAAD,EAAaF,MAAb,CANH;AAQA,QAAMQ,YAAY,GAAG,oBACnB;AAAA,aAAO;AACLR,QAAAA,MAAM,EAANA,MADK;AAELS,QAAAA,SAAS,EAAE,EAFN;AAGLL,QAAAA,WAAW,EAAXA,WAHK;AAILC,QAAAA,cAAc,EAAE,wBAACK,IAAD,EAAU;AACxBL,UAAAA,eAAc,CAACK,IAAD,CAAd;;AACAb,UAAAA,YAAY,CAACE,OAAb,CAAqBG,UAArB,EAAiCQ,IAAjC;AACD;AAPI,OAAP;AAAA,KADmB,EAUnB,CAACN,WAAD,EAAcF,UAAd,EAA0BF,MAA1B,CAVmB,CAArB;AAaA,wBACE,gCAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAEQ;AAApB,oBACE,gCAAC,qBAAD;AAAsB,MAAA,KAAK,EAAER,MAAM,CAACI,WAAD;AAAnC,OACGD,QADH,CADF,CADF;AAOD,GAtCD;AAuCD;;eAEcT,mB","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\n\nexport interface ThemeProviderProps<T> {\n /**\n * Available themes.\n * @default undefined\n */\n themes?: ThemeMap<T>;\n /**\n * The theme used by default.\n * @default light\n */\n initialTheme?: 'light' | 'dark' | string;\n /**\n * The key in the local storage where the active theme is saved.\n * @default theme\n */\n storageKey?: string;\n}\n\nexport type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;\n\nexport interface LocalStorage {\n getItem: (key: string) => string | null | Promise<string | null>;\n setItem: (key: string, value: string) => void | Promise<void>;\n}\n\nfunction createThemeProvider<T>(\n TC: ThemeContext<T>,\n defaultThemes: ThemeMap<T>,\n localStorage: LocalStorage = {\n getItem: () => null,\n setItem: () => {},\n }\n): ThemeProvider<T> {\n // eslint-disable-next-line func-names\n return function ({\n themes = defaultThemes,\n initialTheme = 'light',\n storageKey = 'theme',\n children,\n }) {\n const [activeTheme, setActiveTheme] = useState(\n themes[initialTheme] ? initialTheme : 'light'\n );\n\n useEffect(() => {\n const getSavedTheme = async () => {\n const saved = await localStorage.getItem(storageKey);\n if (saved && themes[saved]) setActiveTheme(saved);\n };\n getSavedTheme();\n }, [storageKey, themes]);\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: {},\n activeTheme,\n setActiveTheme: (name) => {\n setActiveTheme(name);\n localStorage.setItem(storageKey, name);\n },\n }),\n [activeTheme, storageKey, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={themes[activeTheme]}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeProvider;\n"],"file":"createThemeProvider.js"}
|
|
@@ -3,11 +3,12 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
|
|
|
3
3
|
import overrideTheme from './overrideTheme';
|
|
4
4
|
|
|
5
5
|
function createThemeOverrider(TC, useTheme) {
|
|
6
|
-
|
|
6
|
+
// eslint-disable-next-line func-names
|
|
7
|
+
return function ({
|
|
7
8
|
activeTheme,
|
|
8
9
|
overrides = {},
|
|
9
10
|
children
|
|
10
|
-
})
|
|
11
|
+
}) {
|
|
11
12
|
const {
|
|
12
13
|
themes,
|
|
13
14
|
theme: parentTheme,
|
|
@@ -22,13 +23,14 @@ function createThemeOverrider(TC, useTheme) {
|
|
|
22
23
|
}), [activeTheme, parentOverrides, overrides, parentTheme]); // Make the local theme
|
|
23
24
|
|
|
24
25
|
const localTheme = useMemo(() => overrideTheme(themes[localActiveTheme], localOverrides), [themes, localActiveTheme, localOverrides]);
|
|
26
|
+
const contextValue = useMemo(() => ({
|
|
27
|
+
themes,
|
|
28
|
+
overrides: localOverrides,
|
|
29
|
+
activeTheme: localActiveTheme,
|
|
30
|
+
setActiveTheme
|
|
31
|
+
}), [localActiveTheme, localOverrides, setActiveTheme, themes]);
|
|
25
32
|
return /*#__PURE__*/React.createElement(TC.Provider, {
|
|
26
|
-
value:
|
|
27
|
-
themes,
|
|
28
|
-
overrides: localOverrides,
|
|
29
|
-
activeTheme: localActiveTheme,
|
|
30
|
-
setActiveTheme
|
|
31
|
-
}
|
|
33
|
+
value: contextValue
|
|
32
34
|
}, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
|
|
33
35
|
theme: localTheme
|
|
34
36
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["React","useMemo","ThemeProvider","EmotionThemeProvider","overrideTheme","createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","theme","parentTheme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;AAGA,OAAOC,aAAP,MAA0B,iBAA1B;;AAiBA,SAASC,oBAAT,CACEC,EADF,EAEEC,QAFF,EAGqB;AACnB,SAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["React","useMemo","ThemeProvider","EmotionThemeProvider","overrideTheme","createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","theme","parentTheme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme","contextValue"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;AAGA,OAAOC,aAAP,MAA0B,iBAA1B;;AAiBA,SAASC,oBAAT,CACEC,EADF,EAEEC,QAFF,EAGqB;AACnB;AACA,SAAO,UAAU;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,SAAS,GAAG,EAA3B;AAA+BC,IAAAA;AAA/B,GAAV,EAAqD;AAC1D,UAAM;AACJC,MAAAA,MADI;AAEJC,MAAAA,KAAK,EAAEC,WAFH;AAGJJ,MAAAA,SAAS,EAAEK,eAHP;AAIJN,MAAAA,WAAW,EAAEO,iBAJT;AAKJC,MAAAA;AALI,QAMFT,QAAQ,EANZ;AAQA,UAAMU,gBAAgB,GAAGT,WAAW,IAAIO,iBAAxC,CAT0D,CAW1D;;AACA,UAAMG,cAAc,GAAGjB,OAAO,CAC5B,OAAO,EACL,IAAIO,WAAW,GAAG,EAAH,GAAQM,eAAvB,CADK;AAEL,UAAI,OAAOL,SAAP,KAAqB,UAArB,GACCA,SAAD,CAAwBI,WAAxB,CADA,GAEAJ,SAFJ;AAFK,KAAP,CAD4B,EAO5B,CAACD,WAAD,EAAcM,eAAd,EAA+BL,SAA/B,EAA0CI,WAA1C,CAP4B,CAA9B,CAZ0D,CAsB1D;;AACA,UAAMM,UAAU,GAAGlB,OAAO,CACxB,MAAMG,aAAa,CAACO,MAAM,CAACM,gBAAD,CAAP,EAA2BC,cAA3B,CADK,EAExB,CAACP,MAAD,EAASM,gBAAT,EAA2BC,cAA3B,CAFwB,CAA1B;AAKA,UAAME,YAAY,GAAGnB,OAAO,CAC1B,OAAO;AACLU,MAAAA,MADK;AAELF,MAAAA,SAAS,EAAES,cAFN;AAGLV,MAAAA,WAAW,EAAES,gBAHR;AAILD,MAAAA;AAJK,KAAP,CAD0B,EAO1B,CAACC,gBAAD,EAAmBC,cAAnB,EAAmCF,cAAnC,EAAmDL,MAAnD,CAP0B,CAA5B;AAUA,wBACE,oBAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAES;AAApB,oBACE,oBAAC,oBAAD;AAAsB,MAAA,KAAK,EAAED;AAA7B,OACGT,QADH,CADF,CADF;AAOD,GA7CD;AA8CD;;AAED,eAAeL,oBAAf","sourcesContent":["import React, { useMemo } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\nimport { UseTheme } from './createUseTheme';\nimport overrideTheme from './overrideTheme';\n\nexport interface ThemeOverriderProps<T> {\n /**\n * The active theme of children.\n * @default undefined\n */\n activeTheme?: keyof ThemeMap<T>;\n /**\n * Overrides the active theme parameters.\n * @default undefined\n */\n overrides?: Partial<T> | ((theme: T) => Partial<T>);\n}\n\nexport type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;\n\nfunction createThemeOverrider<T>(\n TC: ThemeContext<T>,\n useTheme: UseTheme<T>\n): ThemeOverrider<T> {\n // eslint-disable-next-line func-names\n return function ({ activeTheme, overrides = {}, children }) {\n const {\n themes,\n theme: parentTheme,\n overrides: parentOverrides,\n activeTheme: parentActiveTheme,\n setActiveTheme,\n } = useTheme();\n\n const localActiveTheme = activeTheme || parentActiveTheme;\n\n // Parents overrides are ignored if the active theme was specified\n const localOverrides = useMemo<Partial<T>>(\n () => ({\n ...(activeTheme ? {} : parentOverrides),\n ...(typeof overrides === 'function'\n ? (overrides as Function)(parentTheme)\n : overrides),\n }),\n [activeTheme, parentOverrides, overrides, parentTheme]\n );\n\n // Make the local theme\n const localTheme = useMemo<T>(\n () => overrideTheme(themes[localActiveTheme], localOverrides),\n [themes, localActiveTheme, localOverrides]\n );\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: localOverrides,\n activeTheme: localActiveTheme,\n setActiveTheme,\n }),\n [localActiveTheme, localOverrides, setActiveTheme, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={localTheme}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeOverrider;\n"],"file":"createThemeOverrider.js"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import React, { useEffect, useState } from 'react';
|
|
1
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
|
|
3
3
|
|
|
4
4
|
function createThemeProvider(TC, defaultThemes, localStorage = {
|
|
5
5
|
getItem: () => null,
|
|
6
6
|
setItem: () => {}
|
|
7
7
|
}) {
|
|
8
|
-
|
|
8
|
+
// eslint-disable-next-line func-names
|
|
9
|
+
return function ({
|
|
9
10
|
themes = defaultThemes,
|
|
10
11
|
initialTheme = 'light',
|
|
11
12
|
storageKey = 'theme',
|
|
12
13
|
children
|
|
13
|
-
})
|
|
14
|
+
}) {
|
|
14
15
|
const [activeTheme, setActiveTheme] = useState(themes[initialTheme] ? initialTheme : 'light');
|
|
15
16
|
useEffect(() => {
|
|
16
17
|
const getSavedTheme = async () => {
|
|
@@ -20,16 +21,17 @@ function createThemeProvider(TC, defaultThemes, localStorage = {
|
|
|
20
21
|
|
|
21
22
|
getSavedTheme();
|
|
22
23
|
}, [storageKey, themes]);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
setActiveTheme
|
|
29
|
-
|
|
30
|
-
localStorage.setItem(storageKey, name);
|
|
31
|
-
}
|
|
24
|
+
const contextValue = useMemo(() => ({
|
|
25
|
+
themes,
|
|
26
|
+
overrides: {},
|
|
27
|
+
activeTheme,
|
|
28
|
+
setActiveTheme: name => {
|
|
29
|
+
setActiveTheme(name);
|
|
30
|
+
localStorage.setItem(storageKey, name);
|
|
32
31
|
}
|
|
32
|
+
}), [activeTheme, storageKey, themes]);
|
|
33
|
+
return /*#__PURE__*/React.createElement(TC.Provider, {
|
|
34
|
+
value: contextValue
|
|
33
35
|
}, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
|
|
34
36
|
theme: themes[activeTheme]
|
|
35
37
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["React","useEffect","useState","ThemeProvider","EmotionThemeProvider","createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","overrides","name"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["React","useEffect","useMemo","useState","ThemeProvider","EmotionThemeProvider","createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","contextValue","overrides","name"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,OAA3B,EAAoCC,QAApC,QAAoD,OAApD;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;;AA4BA,SAASC,mBAAT,CACEC,EADF,EAEEC,aAFF,EAGEC,YAA0B,GAAG;AAC3BC,EAAAA,OAAO,EAAE,MAAM,IADY;AAE3BC,EAAAA,OAAO,EAAE,MAAM,CAAE;AAFU,CAH/B,EAOoB;AAClB;AACA,SAAO,UAAU;AACfC,IAAAA,MAAM,GAAGJ,aADM;AAEfK,IAAAA,YAAY,GAAG,OAFA;AAGfC,IAAAA,UAAU,GAAG,OAHE;AAIfC,IAAAA;AAJe,GAAV,EAKJ;AACD,UAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCd,QAAQ,CAC5CS,MAAM,CAACC,YAAD,CAAN,GAAuBA,YAAvB,GAAsC,OADM,CAA9C;AAIAZ,IAAAA,SAAS,CAAC,MAAM;AACd,YAAMiB,aAAa,GAAG,YAAY;AAChC,cAAMC,KAAK,GAAG,MAAMV,YAAY,CAACC,OAAb,CAAqBI,UAArB,CAApB;AACA,YAAIK,KAAK,IAAIP,MAAM,CAACO,KAAD,CAAnB,EAA4BF,cAAc,CAACE,KAAD,CAAd;AAC7B,OAHD;;AAIAD,MAAAA,aAAa;AACd,KANQ,EAMN,CAACJ,UAAD,EAAaF,MAAb,CANM,CAAT;AAQA,UAAMQ,YAAY,GAAGlB,OAAO,CAC1B,OAAO;AACLU,MAAAA,MADK;AAELS,MAAAA,SAAS,EAAE,EAFN;AAGLL,MAAAA,WAHK;AAILC,MAAAA,cAAc,EAAGK,IAAD,IAAU;AACxBL,QAAAA,cAAc,CAACK,IAAD,CAAd;AACAb,QAAAA,YAAY,CAACE,OAAb,CAAqBG,UAArB,EAAiCQ,IAAjC;AACD;AAPI,KAAP,CAD0B,EAU1B,CAACN,WAAD,EAAcF,UAAd,EAA0BF,MAA1B,CAV0B,CAA5B;AAaA,wBACE,oBAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAEQ;AAApB,oBACE,oBAAC,oBAAD;AAAsB,MAAA,KAAK,EAAER,MAAM,CAACI,WAAD;AAAnC,OACGD,QADH,CADF,CADF;AAOD,GAtCD;AAuCD;;AAED,eAAeT,mBAAf","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\n\nexport interface ThemeProviderProps<T> {\n /**\n * Available themes.\n * @default undefined\n */\n themes?: ThemeMap<T>;\n /**\n * The theme used by default.\n * @default light\n */\n initialTheme?: 'light' | 'dark' | string;\n /**\n * The key in the local storage where the active theme is saved.\n * @default theme\n */\n storageKey?: string;\n}\n\nexport type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;\n\nexport interface LocalStorage {\n getItem: (key: string) => string | null | Promise<string | null>;\n setItem: (key: string, value: string) => void | Promise<void>;\n}\n\nfunction createThemeProvider<T>(\n TC: ThemeContext<T>,\n defaultThemes: ThemeMap<T>,\n localStorage: LocalStorage = {\n getItem: () => null,\n setItem: () => {},\n }\n): ThemeProvider<T> {\n // eslint-disable-next-line func-names\n return function ({\n themes = defaultThemes,\n initialTheme = 'light',\n storageKey = 'theme',\n children,\n }) {\n const [activeTheme, setActiveTheme] = useState(\n themes[initialTheme] ? initialTheme : 'light'\n );\n\n useEffect(() => {\n const getSavedTheme = async () => {\n const saved = await localStorage.getItem(storageKey);\n if (saved && themes[saved]) setActiveTheme(saved);\n };\n getSavedTheme();\n }, [storageKey, themes]);\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: {},\n activeTheme,\n setActiveTheme: (name) => {\n setActiveTheme(name);\n localStorage.setItem(storageKey, name);\n },\n }),\n [activeTheme, storageKey, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={themes[activeTheme]}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeProvider;\n"],"file":"createThemeProvider.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeOverrider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeOverrider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,MAAM,WAAW,mBAAmB,CAAC,CAAC;IAKpC,WAAW,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKhC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD;AAED,oBAAY,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjE,iBAAS,oBAAoB,CAAC,CAAC,EAC7B,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GACpB,cAAc,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"createThemeOverrider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeOverrider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,MAAM,WAAW,mBAAmB,CAAC,CAAC;IAKpC,WAAW,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKhC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD;AAED,oBAAY,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjE,iBAAS,oBAAoB,CAAC,CAAC,EAC7B,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GACpB,cAAc,CAAC,CAAC,CAAC,CAgDnB;AAED,eAAe,oBAAoB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"createThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,kBAAkB,CAAC,CAAC;IAKnC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKrB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAKzC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,oBAAY,aAAa,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D;AAED,iBAAS,mBAAmB,CAAC,CAAC,EAC5B,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,EACnB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,EAC1B,YAAY,GAAE,YAGb,GACA,aAAa,CAAC,CAAC,CAAC,CAyClB;AAED,eAAe,mBAAmB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/theming-tools",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"@emotion/react": ">=11",
|
|
35
35
|
"react": ">=17"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "1304a73372cdbe53ba26559e9b029a06f4702d95"
|
|
38
38
|
}
|