@victronenergy/mfd-modules 9.1.0 → 9.2.0
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/src/Modules/Theme/Theme.provider.d.ts +1 -0
- package/dist/src/Modules/Theme/Theme.provider.d.ts.map +1 -1
- package/dist/src/Modules/Theme/Theme.provider.js +2 -1
- package/dist/src/Modules/Theme/Theme.provider.js.map +1 -1
- package/dist/src/Modules/Theme/Theme.store.d.ts +9 -0
- package/dist/src/Modules/Theme/Theme.store.d.ts.map +1 -1
- package/dist/src/Modules/Theme/Theme.store.js +93 -3
- package/dist/src/Modules/Theme/Theme.store.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.provider.d.ts","sourceRoot":"/","sources":["src/Modules/Theme/Theme.provider.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"Theme.provider.d.ts","sourceRoot":"/","sources":["src/Modules/Theme/Theme.provider.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;;;CAOpB,CAAA"}
|
|
@@ -3,6 +3,7 @@ export var useTheme = function () {
|
|
|
3
3
|
var themeStore = useThemeStore();
|
|
4
4
|
var darkMode = themeStore.darkMode;
|
|
5
5
|
var nightMode = themeStore.nightMode;
|
|
6
|
-
|
|
6
|
+
var autoMode = themeStore.autoMode;
|
|
7
|
+
return { darkMode: darkMode, nightMode: nightMode, autoMode: autoMode, themeStore: themeStore };
|
|
7
8
|
};
|
|
8
9
|
//# sourceMappingURL=Theme.provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.provider.js","sourceRoot":"/","sources":["src/Modules/Theme/Theme.provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE7C,MAAM,CAAC,IAAM,QAAQ,GAAG;IACtB,IAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,IAAM,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAA;IACpC,IAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"Theme.provider.js","sourceRoot":"/","sources":["src/Modules/Theme/Theme.provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE7C,MAAM,CAAC,IAAM,QAAQ,GAAG;IACtB,IAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,IAAM,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAA;IACpC,IAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAA;IACtC,IAAM,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAA;IAEpC,OAAO,EAAE,QAAQ,UAAA,EAAE,SAAS,WAAA,EAAE,QAAQ,UAAA,EAAE,UAAU,YAAA,EAAE,CAAA;AACtD,CAAC,CAAA","sourcesContent":["import { useThemeStore } from \"./Theme.store\"\n\nexport const useTheme = () => {\n const themeStore = useThemeStore()\n const darkMode = themeStore.darkMode\n const nightMode = themeStore.nightMode\n const autoMode = themeStore.autoMode\n\n return { darkMode, nightMode, autoMode, themeStore }\n}\n"]}
|
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
export interface ThemeState {
|
|
2
2
|
darkMode: boolean;
|
|
3
3
|
nightMode: boolean;
|
|
4
|
+
autoMode: boolean;
|
|
4
5
|
}
|
|
5
6
|
export declare class ThemeStore {
|
|
6
7
|
darkMode: boolean;
|
|
7
8
|
nightMode: boolean;
|
|
9
|
+
autoMode: boolean;
|
|
10
|
+
private mediaQuery;
|
|
11
|
+
private mediaQueryCleanup;
|
|
12
|
+
initializeMediaQuery: () => void;
|
|
13
|
+
private startMediaQueryObservation;
|
|
14
|
+
private stopMediaQueryObservation;
|
|
8
15
|
constructor();
|
|
9
16
|
setDarkMode: (darkMode: boolean) => boolean;
|
|
10
17
|
setNightMode: (nightMode: boolean) => boolean;
|
|
18
|
+
setAutoMode: (autoMode: boolean) => boolean;
|
|
19
|
+
destroy: () => void;
|
|
11
20
|
}
|
|
12
21
|
export declare function useThemeStore(): ThemeStore;
|
|
13
22
|
//# sourceMappingURL=Theme.store.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.store.d.ts","sourceRoot":"/","sources":["src/Modules/Theme/Theme.store.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Theme.store.d.ts","sourceRoot":"/","sources":["src/Modules/Theme/Theme.store.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,qBAAa,UAAU;IACrB,QAAQ,EAAE,OAAO,CAAO;IACxB,SAAS,EAAE,OAAO,CAAQ;IAC1B,QAAQ,EAAE,OAAO,CAAO;IAExB,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,iBAAiB,CAA4B;IAErD,oBAAoB,aAInB;IAED,OAAO,CAAC,0BAA0B,CAoBjC;IAED,OAAO,CAAC,yBAAyB,CAKhC;;IA2BD,WAAW,GAAI,UAAU,OAAO,aAA6B;IAC7D,YAAY,GAAI,WAAW,OAAO,aAA+B;IACjE,WAAW,GAAI,UAAU,OAAO,aAA6B;IAE7D,OAAO,aAEN;CACF;AAcD,wBAAgB,aAAa,eAE5B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { action, makeAutoObservable } from "mobx";
|
|
1
|
+
import { action, makeAutoObservable, reaction } from "mobx";
|
|
2
2
|
import { makePersistable } from "mobx-persist-store";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
4
|
import { Storage } from "../../utils/storage";
|
|
@@ -18,6 +18,69 @@ var ThemeStore = /** @class */ (function () {
|
|
|
18
18
|
writable: true,
|
|
19
19
|
value: false
|
|
20
20
|
});
|
|
21
|
+
Object.defineProperty(this, "autoMode", {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
configurable: true,
|
|
24
|
+
writable: true,
|
|
25
|
+
value: true
|
|
26
|
+
});
|
|
27
|
+
Object.defineProperty(this, "mediaQuery", {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
configurable: true,
|
|
30
|
+
writable: true,
|
|
31
|
+
value: null
|
|
32
|
+
});
|
|
33
|
+
Object.defineProperty(this, "mediaQueryCleanup", {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
configurable: true,
|
|
36
|
+
writable: true,
|
|
37
|
+
value: null
|
|
38
|
+
});
|
|
39
|
+
Object.defineProperty(this, "initializeMediaQuery", {
|
|
40
|
+
enumerable: true,
|
|
41
|
+
configurable: true,
|
|
42
|
+
writable: true,
|
|
43
|
+
value: function () {
|
|
44
|
+
if (_this.autoMode) {
|
|
45
|
+
_this.startMediaQueryObservation();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
Object.defineProperty(this, "startMediaQueryObservation", {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
configurable: true,
|
|
52
|
+
writable: true,
|
|
53
|
+
value: function () {
|
|
54
|
+
if (_this.mediaQuery)
|
|
55
|
+
return;
|
|
56
|
+
_this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
57
|
+
if (_this.mediaQuery.matches !== _this.darkMode) {
|
|
58
|
+
_this.setDarkMode(_this.mediaQuery.matches);
|
|
59
|
+
}
|
|
60
|
+
var handleChange = function (e) {
|
|
61
|
+
if (_this.autoMode && e.matches !== _this.darkMode) {
|
|
62
|
+
_this.setDarkMode(e.matches);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
_this.mediaQuery.addEventListener('change', handleChange);
|
|
66
|
+
_this.mediaQueryCleanup = function () {
|
|
67
|
+
var _a;
|
|
68
|
+
(_a = _this.mediaQuery) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', handleChange);
|
|
69
|
+
_this.mediaQuery = null;
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
Object.defineProperty(this, "stopMediaQueryObservation", {
|
|
74
|
+
enumerable: true,
|
|
75
|
+
configurable: true,
|
|
76
|
+
writable: true,
|
|
77
|
+
value: function () {
|
|
78
|
+
if (_this.mediaQueryCleanup) {
|
|
79
|
+
_this.mediaQueryCleanup();
|
|
80
|
+
_this.mediaQueryCleanup = null;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
});
|
|
21
84
|
Object.defineProperty(this, "setDarkMode", {
|
|
22
85
|
enumerable: true,
|
|
23
86
|
configurable: true,
|
|
@@ -30,12 +93,38 @@ var ThemeStore = /** @class */ (function () {
|
|
|
30
93
|
writable: true,
|
|
31
94
|
value: function (nightMode) { return _this.nightMode = nightMode; }
|
|
32
95
|
});
|
|
33
|
-
|
|
96
|
+
Object.defineProperty(this, "setAutoMode", {
|
|
97
|
+
enumerable: true,
|
|
98
|
+
configurable: true,
|
|
99
|
+
writable: true,
|
|
100
|
+
value: function (autoMode) { return _this.autoMode = autoMode; }
|
|
101
|
+
});
|
|
102
|
+
Object.defineProperty(this, "destroy", {
|
|
103
|
+
enumerable: true,
|
|
104
|
+
configurable: true,
|
|
105
|
+
writable: true,
|
|
106
|
+
value: function () {
|
|
107
|
+
_this.stopMediaQueryObservation();
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
makeAutoObservable(this, {
|
|
111
|
+
setDarkMode: action,
|
|
112
|
+
setNightMode: action,
|
|
113
|
+
setAutoMode: action,
|
|
114
|
+
});
|
|
34
115
|
makePersistable(this, {
|
|
35
116
|
name: "ThemeStore",
|
|
36
|
-
properties: ["darkMode", "nightMode"],
|
|
117
|
+
properties: ["darkMode", "nightMode", "autoMode"],
|
|
37
118
|
storage: Storage,
|
|
38
119
|
});
|
|
120
|
+
reaction(function () { return _this.autoMode; }, function (autoMode) {
|
|
121
|
+
if (autoMode) {
|
|
122
|
+
_this.startMediaQueryObservation();
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
_this.stopMediaQueryObservation();
|
|
126
|
+
}
|
|
127
|
+
});
|
|
39
128
|
}
|
|
40
129
|
return ThemeStore;
|
|
41
130
|
}());
|
|
@@ -48,6 +137,7 @@ function initializeStore() {
|
|
|
48
137
|
// Create the store once in the client
|
|
49
138
|
if (!store)
|
|
50
139
|
store = _store;
|
|
140
|
+
_store.initializeMediaQuery();
|
|
51
141
|
return _store;
|
|
52
142
|
}
|
|
53
143
|
export function useThemeStore() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.store.js","sourceRoot":"/","sources":["src/Modules/Theme/Theme.store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"Theme.store.js","sourceRoot":"/","sources":["src/Modules/Theme/Theme.store.ts"],"names":[],"mappings":"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","sourcesContent":["import { action, makeAutoObservable, reaction } from \"mobx\"\nimport { makePersistable } from \"mobx-persist-store\"\nimport { useMemo } from \"react\"\nimport { Storage } from \"../../utils/storage\"\n\nlet store: ThemeStore\n\nexport interface ThemeState {\n darkMode: boolean\n nightMode: boolean\n autoMode: boolean\n}\n\nexport class ThemeStore {\n darkMode: boolean = true\n nightMode: boolean = false\n autoMode: boolean = true\n\n private mediaQuery: MediaQueryList | null = null\n private mediaQueryCleanup: (() => void) | null = null\n\n initializeMediaQuery = () => {\n if (this.autoMode) {\n this.startMediaQueryObservation()\n }\n }\n\n private startMediaQueryObservation = () => {\n if (this.mediaQuery) return\n\n this.mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\")\n\n if (this.mediaQuery.matches !== this.darkMode) {\n this.setDarkMode(this.mediaQuery.matches)\n }\n\n const handleChange = (e: MediaQueryListEvent) => {\n if (this.autoMode && e.matches !== this.darkMode) {\n this.setDarkMode(e.matches)\n }\n }\n\n this.mediaQuery.addEventListener('change', handleChange)\n this.mediaQueryCleanup = () => {\n this.mediaQuery?.removeEventListener('change', handleChange)\n this.mediaQuery = null\n }\n }\n\n private stopMediaQueryObservation = () => {\n if (this.mediaQueryCleanup) {\n this.mediaQueryCleanup()\n this.mediaQueryCleanup = null\n }\n }\n\n constructor() {\n makeAutoObservable(this, {\n setDarkMode: action,\n setNightMode: action,\n setAutoMode: action,\n })\n\n makePersistable(this, {\n name: \"ThemeStore\",\n properties: [\"darkMode\", \"nightMode\", \"autoMode\"],\n storage: Storage,\n })\n\n reaction(\n () => this.autoMode,\n (autoMode) => {\n if (autoMode) {\n this.startMediaQueryObservation()\n } else {\n this.stopMediaQueryObservation()\n }\n }\n )\n }\n\n setDarkMode = (darkMode: boolean) => this.darkMode = darkMode\n setNightMode = (nightMode: boolean) => this.nightMode = nightMode\n setAutoMode = (autoMode: boolean) => this.autoMode = autoMode\n\n destroy = () => {\n this.stopMediaQueryObservation()\n }\n}\n\nfunction initializeStore() {\n const _store = store ?? new ThemeStore()\n // For SSG and SSR always create a new store\n if (typeof window === \"undefined\") return _store\n // Create the store once in the client\n if (!store) store = _store\n\n _store.initializeMediaQuery()\n\n return _store\n}\n\nexport function useThemeStore() {\n return useMemo(() => initializeStore(), [])\n}"]}
|