@tamagui/core 1.0.1-beta.136 → 1.0.1-beta.139
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/addTheme.js +74 -0
- package/dist/cjs/addTheme.js.map +7 -0
- package/dist/cjs/contexts/TextAncestorContext.js +44 -0
- package/dist/cjs/contexts/TextAncestorContext.js.map +7 -0
- package/dist/cjs/contexts/ThemeContext.js +30 -0
- package/dist/cjs/contexts/ThemeContext.js.map +7 -0
- package/dist/cjs/createComponent.js +10 -17
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createTamagui.js +18 -118
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/createTheme.js +2 -5
- package/dist/cjs/createTheme.js.map +2 -2
- package/dist/cjs/ensureThemeVariable.js +152 -0
- package/dist/cjs/ensureThemeVariable.js.map +7 -0
- package/dist/cjs/helpers/ThemeManager.js +209 -0
- package/dist/cjs/helpers/ThemeManager.js.map +7 -0
- package/dist/cjs/helpers/assignNativePropsToWeb.js +1 -0
- package/dist/cjs/helpers/assignNativePropsToWeb.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +2 -3
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/createTamaguiProvider.js +3 -1
- package/dist/cjs/helpers/createTamaguiProvider.js.map +2 -2
- package/dist/cjs/helpers/ensureThemeVariable.js +152 -0
- package/dist/cjs/helpers/ensureThemeVariable.js.map +7 -0
- package/dist/cjs/helpers/getSplitStyles.js +11 -2
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getThemeCSSRules.js +98 -0
- package/dist/cjs/helpers/getThemeCSSRules.js.map +7 -0
- package/dist/cjs/helpers/getThemeCSSRules.native.js +31 -0
- package/dist/cjs/helpers/getThemeCSSRules.native.js.map +7 -0
- package/dist/cjs/helpers/getVariantExtras.js +6 -6
- package/dist/cjs/helpers/getVariantExtras.js.map +2 -2
- package/dist/cjs/helpers/insertStyleRule.js +6 -1
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/mergeProps.js +18 -14
- package/dist/cjs/helpers/mergeProps.js.map +2 -2
- package/dist/cjs/helpers/themes.js +79 -0
- package/dist/cjs/helpers/themes.js.map +7 -0
- package/dist/cjs/hooks/useId.js +2 -32
- package/dist/cjs/hooks/useId.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +75 -92
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/hooks/useSafeRef.js +60 -0
- package/dist/cjs/hooks/useSafeRef.js.map +7 -0
- package/dist/cjs/hooks/useTheme.js +20 -11
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/index.js +23 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/loadTheme.js +64 -0
- package/dist/cjs/loadTheme.js.map +7 -0
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/updateTheme.js +44 -0
- package/dist/cjs/updateTheme.js.map +7 -0
- package/dist/cjs/vendor/Pressability.js +32 -0
- package/dist/cjs/vendor/Pressability.js.map +7 -0
- package/dist/cjs/vendor/Pressability.native.js +32 -0
- package/dist/cjs/vendor/Pressability.native.js.map +7 -0
- package/dist/cjs/views/Slot.js +2 -2
- package/dist/cjs/views/Slot.js.map +2 -2
- package/dist/cjs/views/Theme.js +1 -1
- package/dist/cjs/views/Theme.js.map +2 -2
- package/dist/cjs/views/ThemeProvider.js +1 -1
- package/dist/cjs/views/ThemeProvider.js.map +1 -1
- package/dist/cjs/views/ThemeReset.js +1 -1
- package/dist/cjs/views/ThemeReset.js.map +1 -1
- package/dist/esm/addTheme.js +50 -0
- package/dist/esm/addTheme.js.map +7 -0
- package/dist/esm/contexts/TextAncestorContext.js +15 -0
- package/dist/esm/contexts/TextAncestorContext.js.map +7 -0
- package/dist/esm/contexts/ThemeContext.js +6 -0
- package/dist/esm/contexts/ThemeContext.js.map +7 -0
- package/dist/esm/createComponent.js +10 -17
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js +17 -117
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/createTheme.js +1 -3
- package/dist/esm/createTheme.js.map +2 -2
- package/dist/esm/ensureThemeVariable.js +125 -0
- package/dist/esm/ensureThemeVariable.js.map +7 -0
- package/dist/esm/helpers/ThemeManager.js +183 -0
- package/dist/esm/helpers/ThemeManager.js.map +7 -0
- package/dist/esm/helpers/assignNativePropsToWeb.js +1 -0
- package/dist/esm/helpers/assignNativePropsToWeb.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +2 -3
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/createTamaguiProvider.js +3 -1
- package/dist/esm/helpers/createTamaguiProvider.js.map +2 -2
- package/dist/esm/helpers/ensureThemeVariable.js +125 -0
- package/dist/esm/helpers/ensureThemeVariable.js.map +7 -0
- package/dist/esm/helpers/getSplitStyles.js +11 -2
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getThemeCSSRules.js +74 -0
- package/dist/esm/helpers/getThemeCSSRules.js.map +7 -0
- package/dist/esm/helpers/getThemeCSSRules.native.js +7 -0
- package/dist/esm/helpers/getThemeCSSRules.native.js.map +7 -0
- package/dist/esm/helpers/getVariantExtras.js +6 -6
- package/dist/esm/helpers/getVariantExtras.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +6 -1
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/helpers/mergeProps.js +18 -14
- package/dist/esm/helpers/mergeProps.js.map +2 -2
- package/dist/esm/helpers/themes.js +54 -0
- package/dist/esm/helpers/themes.js.map +7 -0
- package/dist/esm/hooks/useId.js +1 -28
- package/dist/esm/hooks/useId.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +74 -92
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/hooks/useSafeRef.js +36 -0
- package/dist/esm/hooks/useSafeRef.js.map +7 -0
- package/dist/esm/hooks/useTheme.js +23 -11
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/index.js +23 -3
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/loadTheme.js +40 -0
- package/dist/esm/loadTheme.js.map +7 -0
- package/dist/esm/updateTheme.js +20 -0
- package/dist/esm/updateTheme.js.map +7 -0
- package/dist/esm/vendor/Pressability.js +7 -0
- package/dist/esm/vendor/Pressability.js.map +7 -0
- package/dist/esm/vendor/Pressability.native.js +7 -0
- package/dist/esm/vendor/Pressability.native.js.map +7 -0
- package/dist/esm/views/Slot.js +2 -2
- package/dist/esm/views/Slot.js.map +2 -2
- package/dist/esm/views/Theme.js +1 -1
- package/dist/esm/views/Theme.js.map +1 -1
- package/dist/esm/views/ThemeProvider.js +1 -1
- package/dist/esm/views/ThemeProvider.js.map +1 -1
- package/dist/esm/views/ThemeReset.js +1 -1
- package/dist/esm/views/ThemeReset.js.map +1 -1
- package/package.json +8 -8
- package/types/addTheme.d.ts +11 -0
- package/types/{views → contexts}/TextAncestorContext.d.ts +0 -0
- package/types/{ThemeContext.d.ts → contexts/ThemeContext.d.ts} +1 -1
- package/types/createTheme.d.ts +0 -1
- package/types/{ThemeManager.d.ts → helpers/ThemeManager.d.ts} +5 -5
- package/types/helpers/getSplitStyles.d.ts +1 -0
- package/types/helpers/getThemeCSSRules.d.ts +8 -0
- package/types/helpers/getThemeCSSRules.native.d.ts +2 -0
- package/types/helpers/mergeProps.d.ts +3 -1
- package/types/helpers/themes.d.ts +4 -0
- package/types/hooks/useId.d.ts +1 -8
- package/types/hooks/useMedia.d.ts +2 -1
- package/types/hooks/useSafeRef.d.ts +4 -0
- package/types/hooks/useTheme.d.ts +2 -1
- package/types/index.d.ts +5 -2
- package/types/types.d.ts +2 -2
- package/types/updateTheme.d.ts +9 -0
- package/types/{Pressability.d.ts → vendor/Pressability.d.ts} +0 -0
- package/types/{Pressability.native.d.ts → vendor/Pressability.native.d.ts} +0 -0
- package/types/views/Theme.d.ts +1 -1
- package/types/defaultComponentState.d.ts +0 -1
- package/types/helpers/nativeGestureHandler.native.d.ts +0 -2
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/helpers/themes.ts"],
|
|
4
|
+
"sourcesContent": ["import { createVariable, isVariable } from '../createVariable'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps } from '../types'\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n\nexport function proxyThemeToParents(\n themeName: string,\n theme: any,\n themes: CreateTamaguiProps['themes']\n) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n const hasParents = parents.length\n\n // proxy fallback values to parent theme values\n return new Proxy(theme, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (!hasParents || Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA2C;AAC3C,+BAAkC;AAK3B,6BAA6B,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM;AAClB,QAAM,WAAW;AACjB,MAAI,CAAC,sCAAW,GAAG,GAAG;AACpB,UAAM,OAAO,0CAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,OAAO,0CAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,6BACL,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,aAAa,QAAQ;AAG3B,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ,4CAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,CAAC,cAAc,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC3C,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAEA,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AAC5C,cAAM,SAAS,OAAO,QAAQ;AAC9B,YAAI,CAAC,QAAQ;AACX;AAAA,QACF;AACA,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/hooks/useId.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,41 +15,13 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
21
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
19
|
var useId_exports = {};
|
|
23
20
|
__export(useId_exports, {
|
|
24
|
-
useId: () => useId
|
|
21
|
+
useId: () => import_react.useId
|
|
25
22
|
});
|
|
26
23
|
module.exports = __toCommonJS(useId_exports);
|
|
27
|
-
var
|
|
28
|
-
var import_platform = require("../constants/platform");
|
|
29
|
-
let serverHandoffComplete = false;
|
|
30
|
-
let id = 0;
|
|
31
|
-
function genId() {
|
|
32
|
-
return ++id;
|
|
33
|
-
}
|
|
34
|
-
function useId(providedId) {
|
|
35
|
-
if (import_platform.isWeb) {
|
|
36
|
-
if (typeof React.useId === "function") {
|
|
37
|
-
let id3 = React.useId();
|
|
38
|
-
return providedId != null ? providedId : id3;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
let initialId = providedId ?? (serverHandoffComplete ? genId() : null);
|
|
42
|
-
let [id2, setId] = React.useState(initialId);
|
|
43
|
-
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
44
|
-
if (id2 === null) {
|
|
45
|
-
setId(genId());
|
|
46
|
-
}
|
|
47
|
-
}, []);
|
|
48
|
-
React.useEffect(() => {
|
|
49
|
-
if (serverHandoffComplete === false) {
|
|
50
|
-
serverHandoffComplete = true;
|
|
51
|
-
}
|
|
52
|
-
}, []);
|
|
53
|
-
return providedId ?? id2 ?? void 0;
|
|
54
|
-
}
|
|
24
|
+
var import_react = require("react");
|
|
55
25
|
// Annotate the CommonJS export names for ESM import in node:
|
|
56
26
|
0 && (module.exports = {
|
|
57
27
|
useId
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useId.tsx"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export { useId } from 'react'\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,19 +25,20 @@ __export(useMedia_exports, {
|
|
|
25
25
|
mediaQueryConfig: () => mediaQueryConfig,
|
|
26
26
|
mediaState: () => mediaState,
|
|
27
27
|
removeMediaQueryListener: () => removeMediaQueryListener,
|
|
28
|
-
useMedia: () => useMedia
|
|
28
|
+
useMedia: () => useMedia,
|
|
29
|
+
useMediaQueryListeners: () => useMediaQueryListeners
|
|
29
30
|
});
|
|
30
31
|
module.exports = __toCommonJS(useMedia_exports);
|
|
31
|
-
var import_use_force_update = require("@tamagui/use-force-update");
|
|
32
32
|
var import_react = require("react");
|
|
33
33
|
var import_platform = require("../constants/platform");
|
|
34
34
|
var import_matchMedia = require("../helpers/matchMedia");
|
|
35
|
-
var
|
|
35
|
+
var import_useSafeRef = require("./useSafeRef");
|
|
36
36
|
const mediaState = {};
|
|
37
37
|
const mediaQueryListeners = {};
|
|
38
38
|
function addMediaQueryListener(key, cb) {
|
|
39
39
|
mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
|
|
40
40
|
mediaQueryListeners[key].add(cb);
|
|
41
|
+
return () => removeMediaQueryListener(key, cb);
|
|
41
42
|
}
|
|
42
43
|
function removeMediaQueryListener(key, cb) {
|
|
43
44
|
var _a;
|
|
@@ -48,114 +49,95 @@ const getMedia = () => {
|
|
|
48
49
|
return mediaState;
|
|
49
50
|
};
|
|
50
51
|
const dispose = /* @__PURE__ */ new Set();
|
|
52
|
+
let initialMediaState;
|
|
51
53
|
const configureMedia = ({
|
|
52
54
|
queries,
|
|
53
|
-
defaultActive =
|
|
55
|
+
defaultActive = {}
|
|
54
56
|
} = {}) => {
|
|
55
57
|
if (!queries)
|
|
56
58
|
return;
|
|
57
|
-
if (
|
|
58
|
-
if (
|
|
59
|
-
|
|
59
|
+
if (initialMediaState) {
|
|
60
|
+
if (process.env.NODE_ENV === "development") {
|
|
61
|
+
if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
60
64
|
}
|
|
61
|
-
|
|
62
|
-
dispose.clear();
|
|
65
|
+
setupMediaListeners();
|
|
63
66
|
}
|
|
64
67
|
Object.assign(mediaQueryConfig, queries);
|
|
65
68
|
for (const key in queries) {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
69
|
+
mediaState[key] = defaultActive[key] || false;
|
|
70
|
+
}
|
|
71
|
+
initialMediaState = { ...mediaState };
|
|
72
|
+
};
|
|
73
|
+
function unlisten() {
|
|
74
|
+
dispose.forEach((cb) => cb());
|
|
75
|
+
dispose.clear();
|
|
76
|
+
}
|
|
77
|
+
function setupMediaListeners() {
|
|
78
|
+
unlisten();
|
|
79
|
+
for (const key in mediaQueryConfig) {
|
|
80
|
+
let update2 = function() {
|
|
81
|
+
const next = !!getMatch().matches;
|
|
82
|
+
if (next === mediaState[key])
|
|
83
|
+
return;
|
|
84
|
+
mediaState[key] = next;
|
|
85
|
+
const listeners = mediaQueryListeners[key];
|
|
86
|
+
if (listeners == null ? void 0 : listeners.size) {
|
|
87
|
+
for (const cb of [...listeners]) {
|
|
88
|
+
cb();
|
|
79
89
|
}
|
|
80
|
-
};
|
|
81
|
-
var update = update2;
|
|
82
|
-
const getMatch = () => (0, import_matchMedia.matchMedia)(str);
|
|
83
|
-
const match = getMatch();
|
|
84
|
-
if (!match || typeof match.addListener !== "function") {
|
|
85
|
-
throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
|
|
86
90
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
mediaState[propKey] = isDefaultActive;
|
|
91
|
+
};
|
|
92
|
+
var update = update2;
|
|
93
|
+
const str = mediaObjectToString(mediaQueryConfig[key]);
|
|
94
|
+
const getMatch = () => (0, import_matchMedia.matchMedia)(str);
|
|
95
|
+
const match = getMatch();
|
|
96
|
+
if (!match) {
|
|
97
|
+
throw new Error("\u26A0\uFE0F No match");
|
|
95
98
|
}
|
|
99
|
+
match.addListener(update2);
|
|
100
|
+
dispose.add(() => match.removeListener(update2));
|
|
101
|
+
update2();
|
|
96
102
|
}
|
|
97
|
-
}
|
|
103
|
+
}
|
|
104
|
+
function useMediaQueryListeners() {
|
|
105
|
+
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
106
|
+
setupMediaListeners();
|
|
107
|
+
return unlisten;
|
|
108
|
+
}, []);
|
|
109
|
+
}
|
|
98
110
|
function useMedia() {
|
|
99
|
-
const
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
111
|
+
const [state, setState] = (0, import_react.useState)(initialMediaState);
|
|
112
|
+
const keys = (0, import_useSafeRef.useSafeRef)({});
|
|
113
|
+
function updateState() {
|
|
114
|
+
setState((prev) => {
|
|
115
|
+
for (const key in keys.current) {
|
|
116
|
+
if (prev[key] !== mediaState[key]) {
|
|
117
|
+
return { ...mediaState };
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
return prev;
|
|
121
|
+
});
|
|
108
122
|
}
|
|
109
|
-
state.current.isRendering = true;
|
|
110
123
|
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
111
|
-
const
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
if (!(key in st.nextSelections)) {
|
|
115
|
-
removeMediaQueryListener(key, forceUpdate);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
for (const key in st.nextSelections) {
|
|
119
|
-
if (!(key in st.selections)) {
|
|
120
|
-
addMediaQueryListener(key, forceUpdate);
|
|
121
|
-
}
|
|
124
|
+
const listeners = [];
|
|
125
|
+
for (const key in keys.current) {
|
|
126
|
+
listeners.push(addMediaQueryListener(key, updateState));
|
|
122
127
|
}
|
|
123
|
-
|
|
124
|
-
(0, import_react.useEffect)(() => {
|
|
128
|
+
updateState();
|
|
125
129
|
return () => {
|
|
126
|
-
|
|
127
|
-
st.isUnmounted = true;
|
|
128
|
-
const allKeys = {
|
|
129
|
-
...st.selections,
|
|
130
|
-
...st.nextSelections
|
|
131
|
-
};
|
|
132
|
-
for (const key in allKeys) {
|
|
133
|
-
removeMediaQueryListener(key, forceUpdate);
|
|
134
|
-
}
|
|
130
|
+
listeners.forEach((cb) => cb());
|
|
135
131
|
};
|
|
136
|
-
}, []);
|
|
137
|
-
return (0, import_useConstant.useConstant)(() => {
|
|
138
|
-
const st = state.current;
|
|
139
|
-
return new Proxy(mediaState, {
|
|
140
|
-
get(target, key) {
|
|
141
|
-
if (key[0] !== "$") {
|
|
142
|
-
key = `$${key}`;
|
|
143
|
-
}
|
|
144
|
-
if (!(key in mediaState)) {
|
|
145
|
-
return Reflect.get(target, key);
|
|
146
|
-
}
|
|
147
|
-
if (!st.isUnmounted) {
|
|
148
|
-
if (st.isRendering) {
|
|
149
|
-
st.nextSelections[key] = true;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
if (key in mediaState) {
|
|
153
|
-
return mediaState[key];
|
|
154
|
-
}
|
|
155
|
-
return Reflect.get(mediaState, key);
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
132
|
});
|
|
133
|
+
return (0, import_react.useMemo)(() => new Proxy(state, {
|
|
134
|
+
get(_, key) {
|
|
135
|
+
if (!keys.current[key]) {
|
|
136
|
+
keys.current = { ...keys.current, [key]: true };
|
|
137
|
+
}
|
|
138
|
+
return Reflect.get(state, key);
|
|
139
|
+
}
|
|
140
|
+
}), [state, keys]);
|
|
159
141
|
}
|
|
160
142
|
function camelToHyphen(str) {
|
|
161
143
|
return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
|
|
@@ -184,6 +166,7 @@ function mediaObjectToString(query) {
|
|
|
184
166
|
mediaQueryConfig,
|
|
185
167
|
mediaState,
|
|
186
168
|
removeMediaQueryListener,
|
|
187
|
-
useMedia
|
|
169
|
+
useMedia,
|
|
170
|
+
useMediaQueryListeners
|
|
188
171
|
});
|
|
189
172
|
//# sourceMappingURL=useMedia.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useMedia.tsx"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import { useMemo, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: any) {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: any) {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\nconst dispose = new Set<Function>()\n\n// for SSR capture it at time of startup\nlet initialMediaState: MediaQueryState | null\n\nexport const configureMedia = ({\n queries,\n defaultActive = {},\n}: ConfigureMediaQueryOptions = {}) => {\n if (!queries) return\n\n // support hot reload\n if (initialMediaState) {\n if (process.env.NODE_ENV === 'development') {\n if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {\n // hmr avoid update\n return\n }\n }\n setupMediaListeners()\n }\n\n Object.assign(mediaQueryConfig, queries)\n // start in the initial state\n for (const key in queries) {\n mediaState[key] = defaultActive[key] || false\n }\n initialMediaState = { ...mediaState }\n}\n\nfunction unlisten() {\n dispose.forEach((cb) => cb())\n dispose.clear()\n}\n\nfunction setupMediaListeners() {\n // hmr, undo existing before re-binding\n unlisten()\n\n for (const key in mediaQueryConfig) {\n const str = mediaObjectToString(mediaQueryConfig[key])\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match) {\n throw new Error('\u26A0\uFE0F No match')\n }\n // react native needs these deprecated apis for now\n match.addListener(update)\n dispose.add(() => match.removeListener(update))\n update()\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n }\n }\n}\n\nexport function useMediaQueryListeners() {\n useIsomorphicLayoutEffect(() => {\n setupMediaListeners()\n return unlisten\n }, [])\n}\n\nexport function useMedia(): {\n [key in MediaQueryKey]: boolean\n} {\n const [state, setState] = useState(initialMediaState!)\n const keys = useSafeRef({} as Record<string, boolean>)\n\n function updateState() {\n setState((prev) => {\n for (const key in keys.current) {\n if (prev[key] !== mediaState[key]) {\n return { ...mediaState }\n }\n }\n return prev\n })\n }\n\n useIsomorphicLayoutEffect(() => {\n const listeners: Function[] = []\n for (const key in keys.current) {\n listeners.push(addMediaQueryListener(key, updateState))\n }\n updateState()\n return () => {\n listeners.forEach((cb) => cb())\n }\n })\n\n return useMemo(\n () =>\n new Proxy(state, {\n get(_, key: string) {\n if (!keys.current[key]) {\n keys.current = { ...keys.current, [key]: true }\n }\n return Reflect.get(state, key)\n },\n }),\n [state, keys]\n )\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var useSafeRef_exports = {};
|
|
20
|
+
__export(useSafeRef_exports, {
|
|
21
|
+
useSafeRef: () => useSafeRef
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(useSafeRef_exports);
|
|
24
|
+
var import_react = require("react");
|
|
25
|
+
var import_platform = require("../constants/platform");
|
|
26
|
+
const useSafeRef = (initialValue) => {
|
|
27
|
+
const rawRef = (0, import_react.useRef)();
|
|
28
|
+
const raw = rawRef.current ?? (rawRef.current = {
|
|
29
|
+
isRendering: true,
|
|
30
|
+
comittedValue: initialValue,
|
|
31
|
+
currentValue: initialValue,
|
|
32
|
+
ref: {
|
|
33
|
+
get current() {
|
|
34
|
+
if (raw.isRendering) {
|
|
35
|
+
return raw.currentValue;
|
|
36
|
+
} else {
|
|
37
|
+
return raw.comittedValue;
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
set current(v) {
|
|
41
|
+
if (!raw.isRendering) {
|
|
42
|
+
raw.comittedValue = v;
|
|
43
|
+
}
|
|
44
|
+
raw.currentValue = v;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
raw.isRendering = true;
|
|
49
|
+
Promise.resolve().then(() => raw.isRendering = false);
|
|
50
|
+
raw.currentValue = raw.comittedValue;
|
|
51
|
+
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
52
|
+
raw.comittedValue = raw.currentValue;
|
|
53
|
+
});
|
|
54
|
+
return raw.ref;
|
|
55
|
+
};
|
|
56
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
57
|
+
0 && (module.exports = {
|
|
58
|
+
useSafeRef
|
|
59
|
+
});
|
|
60
|
+
//# sourceMappingURL=useSafeRef.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/useSafeRef.ts"],
|
|
4
|
+
"sourcesContent": ["import { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\n\n// dai-shi \uD83D\uDE4F\n// https://dev.to/uhyo_/a-concurrent-mode-safe-version-of-useref-1325\n\ntype Raw<T> = {\n isRendering: boolean\n comittedValue: T\n currentValue: T\n ref: { current: T }\n}\n\nexport const useSafeRef = <T>(initialValue: T) => {\n const rawRef = useRef<Raw<T>>()\n\n const raw: Raw<T> =\n rawRef.current ??\n (rawRef.current = {\n isRendering: true,\n comittedValue: initialValue,\n currentValue: initialValue,\n ref: {\n get current() {\n if (raw.isRendering) {\n return raw.currentValue\n } else {\n return raw.comittedValue\n }\n },\n set current(v) {\n if (!raw.isRendering) {\n raw.comittedValue = v\n }\n raw.currentValue = v\n },\n },\n })\n\n raw.isRendering = true\n Promise.resolve().then(() => (raw.isRendering = false))\n raw.currentValue = raw.comittedValue\n\n useIsomorphicLayoutEffect(() => {\n raw.comittedValue = raw.currentValue\n })\n\n return raw.ref\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAEvB,sBAA0C;AAYnC,MAAM,aAAa,CAAI,iBAAoB;AAChD,QAAM,SAAS,yBAAe;AAE9B,QAAM,MACJ,OAAO,WACN,QAAO,UAAU;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,cAAc;AAAA,IACd,KAAK;AAAA,MACH,IAAI,UAAU;AACZ,YAAI,IAAI,aAAa;AACnB,iBAAO,IAAI;AAAA,QACb,OAAO;AACL,iBAAO,IAAI;AAAA,QACb;AAAA,MACF;AAAA,MACA,IAAI,QAAQ,GAAG;AACb,YAAI,CAAC,IAAI,aAAa;AACpB,cAAI,gBAAgB;AAAA,QACtB;AACA,YAAI,eAAe;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAEF,MAAI,cAAc;AAClB,UAAQ,QAAQ,EAAE,KAAK,MAAO,IAAI,cAAc,KAAM;AACtD,MAAI,eAAe,IAAI;AAEvB,iDAA0B,MAAM;AAC9B,QAAI,gBAAgB,IAAI;AAAA,EAC1B,CAAC;AAED,SAAO,IAAI;AACb;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var useTheme_exports = {};
|
|
20
20
|
__export(useTheme_exports, {
|
|
21
|
+
activeThemeManagers: () => activeThemeManagers,
|
|
21
22
|
getThemeManager: () => getThemeManager,
|
|
22
23
|
useChangeThemeEffect: () => useChangeThemeEffect,
|
|
23
24
|
useDefaultThemeName: () => useDefaultThemeName,
|
|
@@ -29,9 +30,9 @@ var import_use_force_update = require("@tamagui/use-force-update");
|
|
|
29
30
|
var import_react = require("react");
|
|
30
31
|
var import_conf = require("../conf");
|
|
31
32
|
var import_platform = require("../constants/platform");
|
|
33
|
+
var import_ThemeContext = require("../contexts/ThemeContext");
|
|
32
34
|
var import_areEqualSets = require("../helpers/areEqualSets");
|
|
33
|
-
var
|
|
34
|
-
var import_ThemeManager = require("../ThemeManager");
|
|
35
|
+
var import_ThemeManager = require("../helpers/ThemeManager");
|
|
35
36
|
var import_getThemeUnwrapped = require("./getThemeUnwrapped");
|
|
36
37
|
var import_useConstant = require("./useConstant");
|
|
37
38
|
const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
@@ -58,13 +59,14 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
|
58
59
|
themeManager == null ? void 0 : themeManager.track(st.uuid, st.keys);
|
|
59
60
|
}
|
|
60
61
|
});
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
return themes[(0, import_conf.getConfig)().defaultTheme || "light"];
|
|
62
|
+
const debugProp = props && props["debug"];
|
|
63
|
+
if (!theme) {
|
|
64
|
+
if (process.env.NODE_ENV === "development") {
|
|
65
|
+
console.warn("No theme with name", themeName);
|
|
67
66
|
}
|
|
67
|
+
return themes[(0, import_conf.getConfig)().defaultTheme || "light"];
|
|
68
|
+
}
|
|
69
|
+
return (0, import_react.useMemo)(() => {
|
|
68
70
|
return new Proxy(theme, {
|
|
69
71
|
has(_, key) {
|
|
70
72
|
if (typeof key === "string") {
|
|
@@ -99,14 +101,14 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
|
99
101
|
}
|
|
100
102
|
if (state.current.isRendering && !state.current.keys.has(key)) {
|
|
101
103
|
state.current.keys.add(key);
|
|
102
|
-
if (process.env.NODE_ENV === "development" &&
|
|
104
|
+
if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
|
|
103
105
|
console.log(" \u{1F538} tracking theme", key);
|
|
104
106
|
}
|
|
105
107
|
}
|
|
106
108
|
return themeManager.getValue(key);
|
|
107
109
|
}
|
|
108
110
|
});
|
|
109
|
-
}, [name, theme, className]);
|
|
111
|
+
}, [name, theme, componentName, className, debugProp]);
|
|
110
112
|
};
|
|
111
113
|
const GetThemeManager = Symbol();
|
|
112
114
|
const getThemeManager = (theme) => {
|
|
@@ -133,6 +135,7 @@ const useDefaultThemeName = () => {
|
|
|
133
135
|
var _a;
|
|
134
136
|
return (_a = (0, import_react.useContext)(import_ThemeContext.ThemeContext)) == null ? void 0 : _a.defaultTheme;
|
|
135
137
|
};
|
|
138
|
+
const activeThemeManagers = /* @__PURE__ */ new Set();
|
|
136
139
|
const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
137
140
|
const debug = props && props["debug"];
|
|
138
141
|
const parentManager = (0, import_react.useContext)(import_ThemeManager.ThemeManagerContext) || import_ThemeManager.emptyManager;
|
|
@@ -150,10 +153,11 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
150
153
|
(0, import_react.useLayoutEffect)(() => {
|
|
151
154
|
if (!themeManager)
|
|
152
155
|
return;
|
|
156
|
+
activeThemeManagers.add(themeManager);
|
|
153
157
|
if (next == null ? void 0 : next.name) {
|
|
154
158
|
themeManager.update(next);
|
|
155
159
|
}
|
|
156
|
-
|
|
160
|
+
const disposeParentOnChange = parentManager.onChangeTheme(() => {
|
|
157
161
|
const next2 = parentManager.getNextTheme(getThemeProps, debug);
|
|
158
162
|
if (!next2)
|
|
159
163
|
return;
|
|
@@ -161,6 +165,10 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
161
165
|
forceUpdate();
|
|
162
166
|
}
|
|
163
167
|
});
|
|
168
|
+
return () => {
|
|
169
|
+
activeThemeManagers.delete(themeManager);
|
|
170
|
+
disposeParentOnChange();
|
|
171
|
+
};
|
|
164
172
|
}, [themes, name, componentName, debug, next == null ? void 0 : next.name]);
|
|
165
173
|
}
|
|
166
174
|
return {
|
|
@@ -175,6 +183,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
175
183
|
};
|
|
176
184
|
// Annotate the CommonJS export names for ESM import in node:
|
|
177
185
|
0 && (module.exports = {
|
|
186
|
+
activeThemeManagers,
|
|
178
187
|
getThemeManager,
|
|
179
188
|
useChangeThemeEffect,
|
|
180
189
|
useDefaultThemeName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAA8E;AAE9E,kBAA0B;AAC1B,sBAAiD;AACjD,0BAA6B;AAC7B,0BAA6B;AAC7B,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n GetNextThemeProps,\n ThemeManager,\n ThemeManagerContext,\n emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any\n): ThemeObject => {\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 useTheme', { themeName, componentName, name, className })\n }\n }\n\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n const cur = themeManager?.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n themeManager?.track(st.uuid, st.keys)\n }\n })\n\n const debugProp = props && props['debug']\n\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('No theme with name', themeName)\n }\n return themes[getConfig().defaultTheme || 'light']\n }\n\n return useMemo(() => {\n return new Proxy(theme, {\n has(_, key) {\n if (typeof key === 'string') {\n if (key[0] === '$') {\n key = key.slice(1)\n }\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (key === GetThemeManager) {\n return themeManager\n }\n if (key === 'name') {\n return name\n }\n if (key === 'className') {\n return className\n }\n if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n return Reflect.get(_, key)\n }\n if (!themeManager) {\n console.error('No themeManager')\n return\n }\n // auto convert variables to plain\n if (key[0] === '$') {\n key = key.slice(1)\n }\n if (state.current.isRendering && !state.current.keys.has(key)) {\n state.current.keys.add(key)\n if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n console.log(' \uD83D\uDD38 tracking theme', key)\n }\n }\n return themeManager.getValue(key)\n },\n })\n }, [name, theme, componentName, className, debugProp])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n if (!theme) return\n return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent?.name || '')\n\n useIsomorphicLayoutEffect(() => {\n if (!parent) return\n return parent.onChangeTheme((next, manager) => {\n const name = opts?.parent ? manager.parentName || next : next\n if (!name) return\n setName(name)\n })\n }, [parent])\n\n return name\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n name?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdateProp?: any\n) => {\n const debug = props && props['debug']\n const parentManager = useContext(ThemeManagerContext) || emptyManager\n const { themes } = useContext(ThemeContext)!\n const reset = props?.reset || false\n const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n const next = parentManager.getNextTheme(getThemeProps, debug)\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forceUpdate = forceUpdateProp || useForceUpdate()\n\n const themeManager = useConstant<ThemeManager | null>(() => {\n if (!next) return null\n return new ThemeManager(next.name, next.theme, parentManager, reset)\n })\n\n // if not SSR\n if (!isWeb || typeof document !== 'undefined') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useLayoutEffect(() => {\n if (!themeManager) return\n\n activeThemeManagers.add(themeManager)\n\n if (next?.name) {\n themeManager.update(next)\n }\n\n const disposeParentOnChange = parentManager.onChangeTheme(() => {\n const next = parentManager.getNextTheme(getThemeProps, debug)\n if (!next) return\n if (themeManager.update(next)) {\n forceUpdate()\n }\n })\n\n return () => {\n activeThemeManagers.delete(themeManager)\n disposeParentOnChange()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [themes, name, componentName, debug, next?.name])\n }\n\n return {\n ...(parentManager && {\n name: parentManager.name,\n theme: parentManager.theme,\n }),\n ...next,\n themes,\n themeManager,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|