@iobroker/adapter-react-v5 4.13.14 → 4.13.16
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/Components/ObjectBrowser.js +8 -3
- package/Components/Utils.js +1 -1
- package/GenericApp.d.ts +4 -58
- package/GenericApp.js +2 -4
- package/README.md +4 -0
- package/Theme.js +93 -161
- package/package.json +1 -1
- package/types.d.ts +53 -13
|
@@ -1785,7 +1785,12 @@ class ObjectBrowser extends react_1.Component {
|
|
|
1785
1785
|
this.objectsUpdateTimer = null;
|
|
1786
1786
|
this.filterTimer = null;
|
|
1787
1787
|
this.adapterColumns = [];
|
|
1788
|
-
this.edit = {
|
|
1788
|
+
this.edit = {
|
|
1789
|
+
id: '',
|
|
1790
|
+
val: '',
|
|
1791
|
+
q: 0,
|
|
1792
|
+
ack: false,
|
|
1793
|
+
};
|
|
1789
1794
|
this.customWidth = false;
|
|
1790
1795
|
this.resizeTimeout = null;
|
|
1791
1796
|
this.resizerNextName = null;
|
|
@@ -2433,7 +2438,7 @@ class ObjectBrowser extends react_1.Component {
|
|
|
2433
2438
|
state: 0,
|
|
2434
2439
|
file: 0,
|
|
2435
2440
|
owner: 'system.user.admin',
|
|
2436
|
-
ownerGroup: 'system.group.administrator'
|
|
2441
|
+
ownerGroup: 'system.group.administrator',
|
|
2437
2442
|
};
|
|
2438
2443
|
this.systemConfig.common.defaultNewAcl.owner =
|
|
2439
2444
|
this.systemConfig.common.defaultNewAcl.owner || 'system.user.admin';
|
|
@@ -4912,7 +4917,7 @@ class ObjectBrowser extends react_1.Component {
|
|
|
4912
4917
|
this.forceUpdate();
|
|
4913
4918
|
}
|
|
4914
4919
|
(_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate('tab-objects');
|
|
4915
|
-
} });
|
|
4920
|
+
}, systemConfig: this.systemConfig });
|
|
4916
4921
|
}
|
|
4917
4922
|
return null;
|
|
4918
4923
|
}
|
package/Components/Utils.js
CHANGED
|
@@ -111,7 +111,7 @@ class Utils {
|
|
|
111
111
|
text = id.substring(pos + 1).replace(/[_.]/g, ' ');
|
|
112
112
|
text = Utils.CapitalWords(text);
|
|
113
113
|
}
|
|
114
|
-
return text.trim();
|
|
114
|
+
return (text === null || text === void 0 ? void 0 : text.trim()) || '';
|
|
115
115
|
}
|
|
116
116
|
/**
|
|
117
117
|
* Get the name of the object from the name or description.
|
package/GenericApp.d.ts
CHANGED
|
@@ -5,11 +5,9 @@
|
|
|
5
5
|
*
|
|
6
6
|
**/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import {
|
|
9
|
-
import { type Theme } from '@mui/material';
|
|
8
|
+
import { AdminConnection } from '@iobroker/socket-client';
|
|
10
9
|
import Router from './Components/Router';
|
|
11
|
-
import
|
|
12
|
-
import { ConnectionProps, ThemeName, ThemeType, Width } from './types';
|
|
10
|
+
import { GenericAppProps, GenericAppState, GenericAppSettings, ThemeName, ThemeType, Theme, Width } from './types';
|
|
13
11
|
declare global {
|
|
14
12
|
/** If config has been changed */
|
|
15
13
|
var changed: boolean;
|
|
@@ -25,54 +23,6 @@ declare global {
|
|
|
25
23
|
};
|
|
26
24
|
}
|
|
27
25
|
}
|
|
28
|
-
interface GenericAppProps {
|
|
29
|
-
/** Adapter instance number if known, else will be determined from url */
|
|
30
|
-
instance?: number;
|
|
31
|
-
/** The name of the adapter. */
|
|
32
|
-
adapterName?: string;
|
|
33
|
-
/** Should the bottom buttons be shown (default: true). */
|
|
34
|
-
bottomButtons?: boolean;
|
|
35
|
-
/** Additional translations. */
|
|
36
|
-
translations?: {
|
|
37
|
-
[lang in ioBroker.Languages]?: Record<string, string>;
|
|
38
|
-
};
|
|
39
|
-
/** Fields that should be encrypted/decrypted. */
|
|
40
|
-
encryptedFields?: string[];
|
|
41
|
-
/** Socket.io configuration. */
|
|
42
|
-
socket?: ConnectionProps;
|
|
43
|
-
/** Desired connection object */
|
|
44
|
-
Connection?: LegacyConnection | Connection | AdminConnection;
|
|
45
|
-
/** sentry DNS */
|
|
46
|
-
sentryDSN?: string;
|
|
47
|
-
onThemeChange?: (newThemeName: ThemeName) => void;
|
|
48
|
-
classes?: Record<string, string>;
|
|
49
|
-
}
|
|
50
|
-
interface GenericAppSettings extends GenericAppProps {
|
|
51
|
-
/** Don't load all objects on start-up. */
|
|
52
|
-
doNotLoadAllObjects?: boolean;
|
|
53
|
-
}
|
|
54
|
-
interface GenericAppState {
|
|
55
|
-
loaded: boolean;
|
|
56
|
-
themeType: ThemeType;
|
|
57
|
-
themeName: ThemeName;
|
|
58
|
-
theme: Theme;
|
|
59
|
-
expertMode: boolean;
|
|
60
|
-
selectedTab: string;
|
|
61
|
-
selectedTabNum: number | undefined;
|
|
62
|
-
native: Record<string, any>;
|
|
63
|
-
errorText: string | React.JSX.Element;
|
|
64
|
-
changed: boolean;
|
|
65
|
-
connected: boolean;
|
|
66
|
-
isConfigurationError: string;
|
|
67
|
-
toast: string | React.JSX.Element;
|
|
68
|
-
bottomButtons: boolean;
|
|
69
|
-
width: Width;
|
|
70
|
-
confirmClose: boolean;
|
|
71
|
-
_alert: boolean;
|
|
72
|
-
_alertType: 'info' | 'warning' | 'error' | 'success';
|
|
73
|
-
_alertMessage: string | React.JSX.Element;
|
|
74
|
-
common?: Record<string, any>;
|
|
75
|
-
}
|
|
76
26
|
declare class GenericApp<TProps extends GenericAppProps = GenericAppProps, TState extends GenericAppState = GenericAppState> extends Router<TProps, TState> {
|
|
77
27
|
protected socket: AdminConnection;
|
|
78
28
|
protected readonly instance: number;
|
|
@@ -83,16 +33,12 @@ declare class GenericApp<TProps extends GenericAppProps = GenericAppProps, TStat
|
|
|
83
33
|
protected readonly sentryDSN: string | undefined;
|
|
84
34
|
private alertDialogRendered;
|
|
85
35
|
private _secret;
|
|
86
|
-
protected _systemConfig:
|
|
36
|
+
protected _systemConfig: ioBroker.SystemConfigCommon | undefined;
|
|
87
37
|
private savedNative;
|
|
88
38
|
private common;
|
|
89
39
|
private sentryStarted;
|
|
90
40
|
private sentryInited;
|
|
91
41
|
private resizeTimer;
|
|
92
|
-
/**
|
|
93
|
-
* @param {import('./types').GenericAppProps} props
|
|
94
|
-
* @param {import('./types').GenericAppSettings | undefined} settings
|
|
95
|
-
*/
|
|
96
42
|
constructor(props: TProps, settings?: GenericAppSettings);
|
|
97
43
|
/**
|
|
98
44
|
* Checks if this connection is running in a web adapter and not in an admin.
|
|
@@ -101,7 +47,7 @@ declare class GenericApp<TProps extends GenericAppProps = GenericAppProps, TStat
|
|
|
101
47
|
static isWeb(): boolean;
|
|
102
48
|
showAlert(message: string, type?: 'info' | 'warning' | 'error' | 'success'): void;
|
|
103
49
|
renderAlertSnackbar(): React.JSX.Element;
|
|
104
|
-
onSystemConfigChanged: (id: string, obj: ioBroker.
|
|
50
|
+
onSystemConfigChanged: (id: string, obj: ioBroker.AnyObject | null | undefined) => void;
|
|
105
51
|
/**
|
|
106
52
|
* Called immediately after a component is mounted. Setting state here will trigger re-rendering.
|
|
107
53
|
*/
|
package/GenericApp.js
CHANGED
|
@@ -98,10 +98,6 @@ body {
|
|
|
98
98
|
}
|
|
99
99
|
`;
|
|
100
100
|
class GenericApp extends Router_1.default {
|
|
101
|
-
/**
|
|
102
|
-
* @param {import('./types').GenericAppProps} props
|
|
103
|
-
* @param {import('./types').GenericAppSettings | undefined} settings
|
|
104
|
-
*/
|
|
105
101
|
constructor(props, settings) {
|
|
106
102
|
var _a, _b;
|
|
107
103
|
const ConnectionClass = (props.Connection || (settings === null || settings === void 0 ? void 0 : settings.Connection) || socket_client_1.Connection);
|
|
@@ -135,6 +131,7 @@ class GenericApp extends Router_1.default {
|
|
|
135
131
|
this.socket.systemLang = (obj === null || obj === void 0 ? void 0 : obj.common.language) || 'en';
|
|
136
132
|
i18n_1.default.setLanguage(this.socket.systemLang);
|
|
137
133
|
}
|
|
134
|
+
// @ts-expect-error will be fixed in js-controller
|
|
138
135
|
if (((_a = this._systemConfig) === null || _a === void 0 ? void 0 : _a.expertMode) !== !!((_b = obj === null || obj === void 0 ? void 0 : obj.common) === null || _b === void 0 ? void 0 : _b.expertMode)) {
|
|
139
136
|
this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
|
|
140
137
|
this.setState({ expertMode: this.getExpertMode() });
|
|
@@ -461,6 +458,7 @@ class GenericApp extends Router_1.default {
|
|
|
461
458
|
*/
|
|
462
459
|
getExpertMode() {
|
|
463
460
|
var _a;
|
|
461
|
+
// @ts-expect-error will be fixed in js-controller
|
|
464
462
|
return window.sessionStorage.getItem('App.expertMode') === 'true' || !!((_a = this._systemConfig) === null || _a === void 0 ? void 0 : _a.expertMode);
|
|
465
463
|
}
|
|
466
464
|
/**
|
package/README.md
CHANGED
|
@@ -670,6 +670,10 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
|
|
|
670
670
|
-->
|
|
671
671
|
|
|
672
672
|
## Changelog
|
|
673
|
+
### 4.13.16 (2024-05-21)
|
|
674
|
+
* (bluefox) Better types added
|
|
675
|
+
* (bluefox) updated theme definitions
|
|
676
|
+
|
|
673
677
|
### 4.13.14 (2024-05-19)
|
|
674
678
|
* (bluefox) Updated packages
|
|
675
679
|
|
package/Theme.js
CHANGED
|
@@ -64,71 +64,32 @@ overlay) {
|
|
|
64
64
|
}
|
|
65
65
|
return elevations;
|
|
66
66
|
}
|
|
67
|
-
// const buttonsPalette = () => ({
|
|
68
|
-
// palette: {
|
|
69
|
-
// // mode: "dark",
|
|
70
|
-
// grey: {
|
|
71
|
-
// main: grey[300],
|
|
72
|
-
// dark: grey[400],
|
|
73
|
-
// },
|
|
74
|
-
// },
|
|
75
|
-
// });
|
|
76
|
-
// const buttonsTheme = theme => ({
|
|
77
|
-
// components: {
|
|
78
|
-
// MuiButton: {
|
|
79
|
-
// variants: [
|
|
80
|
-
// {
|
|
81
|
-
// props: { variant: 'contained', color: 'grey' },
|
|
82
|
-
// style: {
|
|
83
|
-
// color: theme.palette.getContrastText(theme.palette.grey[300]),
|
|
84
|
-
// },
|
|
85
|
-
// },
|
|
86
|
-
// {
|
|
87
|
-
// props: { variant: 'outlined', color: 'grey' },
|
|
88
|
-
// style: {
|
|
89
|
-
// color: theme.palette.text.primary,
|
|
90
|
-
// borderColor:
|
|
91
|
-
// theme.palette.mode === 'light'
|
|
92
|
-
// ? 'rgba(0, 0, 0, 0.23)'
|
|
93
|
-
// : 'rgba(255, 255, 255, 0.23)',
|
|
94
|
-
// '&.Mui-disabled': {
|
|
95
|
-
// border: `1px solid ${theme.palette.action.disabledBackground}`,
|
|
96
|
-
// },
|
|
97
|
-
// '&:hover': {
|
|
98
|
-
// borderColor:
|
|
99
|
-
// theme.palette.mode === 'light'
|
|
100
|
-
// ? 'rgba(0, 0, 0, 0.23)'
|
|
101
|
-
// : 'rgba(255, 255, 255, 0.23)',
|
|
102
|
-
// backgroundColor: alpha(
|
|
103
|
-
// theme.palette.text.primary,
|
|
104
|
-
// theme.palette.action.hoverOpacity,
|
|
105
|
-
// ),
|
|
106
|
-
// },
|
|
107
|
-
// },
|
|
108
|
-
// },
|
|
109
|
-
// {
|
|
110
|
-
// props: { color: 'grey', variant: 'text' },
|
|
111
|
-
// style: {
|
|
112
|
-
// color: 'black',
|
|
113
|
-
// '&:hover': {
|
|
114
|
-
// backgroundColor: alpha(
|
|
115
|
-
// theme.palette.text.primary,
|
|
116
|
-
// theme.palette.action.hoverOpacity,
|
|
117
|
-
// ),
|
|
118
|
-
// },
|
|
119
|
-
// },
|
|
120
|
-
// },
|
|
121
|
-
// ],
|
|
122
|
-
// },
|
|
123
|
-
// },
|
|
124
|
-
// });
|
|
125
67
|
/**
|
|
126
68
|
* The theme creation factory function.
|
|
127
69
|
*/
|
|
128
70
|
const CustomTheme = (type) => {
|
|
129
71
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
130
72
|
let options;
|
|
73
|
+
let overrides;
|
|
131
74
|
if (type === 'dark') {
|
|
75
|
+
overrides = {
|
|
76
|
+
MuiAppBar: {
|
|
77
|
+
colorDefault: {
|
|
78
|
+
backgroundColor: '#272727',
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
MuiLink: {
|
|
82
|
+
root: {
|
|
83
|
+
textTransform: 'uppercase',
|
|
84
|
+
transition: 'color .3s ease',
|
|
85
|
+
color: colors_1.orange[200],
|
|
86
|
+
'&:hover': {
|
|
87
|
+
color: colors_1.orange[100],
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
MuiPaper: getElevations('#121212', '#fff'),
|
|
92
|
+
};
|
|
132
93
|
options = {
|
|
133
94
|
name: type,
|
|
134
95
|
palette: {
|
|
@@ -143,34 +104,32 @@ const CustomTheme = (type) => {
|
|
|
143
104
|
secondary: {
|
|
144
105
|
main: '#436a93',
|
|
145
106
|
},
|
|
146
|
-
// @ts-expect-error Custom field
|
|
147
107
|
expert: '#14bb00',
|
|
148
108
|
text: {
|
|
149
109
|
primary: '#ffffff',
|
|
150
110
|
secondary: '#ffffff',
|
|
151
111
|
},
|
|
152
112
|
},
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
else if (type === 'blue') {
|
|
116
|
+
overrides = {
|
|
117
|
+
MuiAppBar: {
|
|
118
|
+
colorDefault: {
|
|
119
|
+
backgroundColor: '#3399CC',
|
|
158
120
|
},
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
121
|
+
},
|
|
122
|
+
MuiLink: {
|
|
123
|
+
root: {
|
|
124
|
+
textTransform: 'uppercase',
|
|
125
|
+
transition: 'color .3s ease',
|
|
126
|
+
color: colors_1.orange[400],
|
|
127
|
+
'&:hover': {
|
|
128
|
+
color: colors_1.orange[300],
|
|
167
129
|
},
|
|
168
130
|
},
|
|
169
|
-
MuiPaper: getElevations('#121212', '#fff'),
|
|
170
131
|
},
|
|
171
132
|
};
|
|
172
|
-
}
|
|
173
|
-
else if (type === 'blue') {
|
|
174
133
|
options = {
|
|
175
134
|
name: type,
|
|
176
135
|
palette: {
|
|
@@ -185,34 +144,33 @@ const CustomTheme = (type) => {
|
|
|
185
144
|
secondary: {
|
|
186
145
|
main: '#436a93',
|
|
187
146
|
},
|
|
188
|
-
// @ts-expect-error Custom field
|
|
189
147
|
expert: '#14bb00',
|
|
190
148
|
text: {
|
|
191
149
|
primary: '#ffffff',
|
|
192
150
|
secondary: '#ffffff',
|
|
193
151
|
},
|
|
194
152
|
},
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
153
|
+
};
|
|
154
|
+
}
|
|
155
|
+
else if (type === 'colored') {
|
|
156
|
+
overrides = {
|
|
157
|
+
MuiAppBar: {
|
|
158
|
+
colorDefault: {
|
|
159
|
+
backgroundColor: '#2a3135',
|
|
200
160
|
},
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
161
|
+
},
|
|
162
|
+
MuiLink: {
|
|
163
|
+
root: {
|
|
164
|
+
textTransform: 'uppercase',
|
|
165
|
+
transition: 'color .3s ease',
|
|
166
|
+
color: colors_1.orange[200],
|
|
167
|
+
'&:hover': {
|
|
168
|
+
color: colors_1.orange[100],
|
|
209
169
|
},
|
|
210
170
|
},
|
|
211
|
-
MuiPaper: getElevations('#151d21', '#fff'),
|
|
212
171
|
},
|
|
172
|
+
MuiPaper: getElevations('#151d21', '#fff'),
|
|
213
173
|
};
|
|
214
|
-
}
|
|
215
|
-
else if (type === 'colored') {
|
|
216
174
|
options = {
|
|
217
175
|
name: type,
|
|
218
176
|
palette: {
|
|
@@ -223,29 +181,28 @@ const CustomTheme = (type) => {
|
|
|
223
181
|
secondary: {
|
|
224
182
|
main: '#164477',
|
|
225
183
|
},
|
|
226
|
-
// @ts-expect-error Custom field
|
|
227
184
|
expert: '#96fc96',
|
|
228
185
|
},
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
else if (type === 'PT') {
|
|
189
|
+
overrides = {
|
|
190
|
+
MuiAppBar: {
|
|
191
|
+
colorDefault: {
|
|
192
|
+
backgroundColor: '#0F99DE',
|
|
234
193
|
},
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
194
|
+
},
|
|
195
|
+
MuiLink: {
|
|
196
|
+
root: {
|
|
197
|
+
textTransform: 'uppercase',
|
|
198
|
+
transition: 'color .3s ease',
|
|
199
|
+
color: colors_1.orange[400],
|
|
200
|
+
'&:hover': {
|
|
201
|
+
color: colors_1.orange[300],
|
|
243
202
|
},
|
|
244
203
|
},
|
|
245
204
|
},
|
|
246
205
|
};
|
|
247
|
-
}
|
|
248
|
-
else if (type === 'PT') {
|
|
249
206
|
options = {
|
|
250
207
|
name: type,
|
|
251
208
|
palette: {
|
|
@@ -256,29 +213,28 @@ const CustomTheme = (type) => {
|
|
|
256
213
|
secondary: {
|
|
257
214
|
main: '#88A536',
|
|
258
215
|
},
|
|
259
|
-
// @ts-expect-error Custom field
|
|
260
216
|
expert: '#BD1B24',
|
|
261
217
|
},
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
218
|
+
};
|
|
219
|
+
}
|
|
220
|
+
else if (type === 'DX') {
|
|
221
|
+
overrides = {
|
|
222
|
+
MuiAppBar: {
|
|
223
|
+
colorDefault: {
|
|
224
|
+
backgroundColor: '#a9a9a9',
|
|
267
225
|
},
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
226
|
+
},
|
|
227
|
+
MuiLink: {
|
|
228
|
+
root: {
|
|
229
|
+
textTransform: 'uppercase',
|
|
230
|
+
transition: 'color .3s ease',
|
|
231
|
+
color: colors_1.orange[400],
|
|
232
|
+
'&:hover': {
|
|
233
|
+
color: colors_1.orange[300],
|
|
276
234
|
},
|
|
277
235
|
},
|
|
278
236
|
},
|
|
279
237
|
};
|
|
280
|
-
}
|
|
281
|
-
else if (type === 'DX') {
|
|
282
238
|
options = {
|
|
283
239
|
name: type,
|
|
284
240
|
palette: {
|
|
@@ -289,7 +245,6 @@ const CustomTheme = (type) => {
|
|
|
289
245
|
secondary: {
|
|
290
246
|
main: '#a9a9a9',
|
|
291
247
|
},
|
|
292
|
-
// @ts-expect-error Custom field
|
|
293
248
|
expert: '#BD1B24',
|
|
294
249
|
text: {
|
|
295
250
|
primary: '#007AFE',
|
|
@@ -297,26 +252,21 @@ const CustomTheme = (type) => {
|
|
|
297
252
|
disabled: '#007AFEAA',
|
|
298
253
|
},
|
|
299
254
|
},
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
color: colors_1.orange[
|
|
311
|
-
'&:hover': {
|
|
312
|
-
color: colors_1.orange[300],
|
|
313
|
-
},
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
else {
|
|
258
|
+
overrides = {
|
|
259
|
+
MuiLink: {
|
|
260
|
+
root: {
|
|
261
|
+
textTransform: 'uppercase',
|
|
262
|
+
transition: 'color .3s ease',
|
|
263
|
+
color: colors_1.orange[400],
|
|
264
|
+
'&:hover': {
|
|
265
|
+
color: colors_1.orange[300],
|
|
314
266
|
},
|
|
315
267
|
},
|
|
316
268
|
},
|
|
317
269
|
};
|
|
318
|
-
}
|
|
319
|
-
else {
|
|
320
270
|
options = {
|
|
321
271
|
name: type,
|
|
322
272
|
palette: {
|
|
@@ -330,28 +280,13 @@ const CustomTheme = (type) => {
|
|
|
330
280
|
secondary: {
|
|
331
281
|
main: '#164477',
|
|
332
282
|
},
|
|
333
|
-
// @ts-ignore
|
|
334
283
|
expert: '#14bb00',
|
|
335
284
|
},
|
|
336
|
-
overrides: {
|
|
337
|
-
MuiLink: {
|
|
338
|
-
root: {
|
|
339
|
-
textTransform: 'uppercase',
|
|
340
|
-
transition: 'color .3s ease',
|
|
341
|
-
color: colors_1.orange[400],
|
|
342
|
-
'&:hover': {
|
|
343
|
-
color: colors_1.orange[300],
|
|
344
|
-
},
|
|
345
|
-
},
|
|
346
|
-
},
|
|
347
|
-
},
|
|
348
285
|
};
|
|
349
286
|
}
|
|
350
|
-
// @ts-expect-error Custom field
|
|
351
287
|
options.toolbar = {
|
|
352
288
|
height: 48,
|
|
353
289
|
};
|
|
354
|
-
// @ts-expect-error Custom field
|
|
355
290
|
options.saveToolbar = {
|
|
356
291
|
background: (_b = (_a = options.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main,
|
|
357
292
|
button: {
|
|
@@ -361,7 +296,6 @@ const CustomTheme = (type) => {
|
|
|
361
296
|
};
|
|
362
297
|
if (options.palette) {
|
|
363
298
|
options.palette.grey = {
|
|
364
|
-
// @ts-expect-error Custom field
|
|
365
299
|
main: colors_1.grey[300],
|
|
366
300
|
dark: colors_1.grey[400],
|
|
367
301
|
};
|
|
@@ -369,8 +303,7 @@ const CustomTheme = (type) => {
|
|
|
369
303
|
const theme = (0, styles_1.createTheme)(options);
|
|
370
304
|
const palette = theme.palette;
|
|
371
305
|
return (0, styles_1.createTheme)(theme, {
|
|
372
|
-
components: {
|
|
373
|
-
MuiButton: {
|
|
306
|
+
components: Object.assign(Object.assign({}, overrides), { MuiButton: {
|
|
374
307
|
variants: [
|
|
375
308
|
{
|
|
376
309
|
props: { variant: 'contained', color: 'grey' },
|
|
@@ -406,8 +339,7 @@ const CustomTheme = (type) => {
|
|
|
406
339
|
},
|
|
407
340
|
},
|
|
408
341
|
],
|
|
409
|
-
},
|
|
410
|
-
},
|
|
342
|
+
} }),
|
|
411
343
|
});
|
|
412
344
|
};
|
|
413
345
|
exports.default = CustomTheme;
|
package/package.json
CHANGED
package/types.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Theme as MuiTheme, Palette as MuiPalette } from '@mui/material/styles';
|
|
3
3
|
import { AdminConnection, Connection } from '@iobroker/socket-client';
|
|
4
|
+
import LegacyConnection from './LegacyConnection';
|
|
4
5
|
|
|
5
6
|
export type Translator = (key: string, ...args: any[]) => string;
|
|
6
7
|
|
|
@@ -44,6 +45,9 @@ export interface OldObject {
|
|
|
44
45
|
|
|
45
46
|
export type ObjectChangeHandler = (id: string, obj: ioBroker.Object | null | undefined, oldObj: OldObject) => void | Promise<void>;
|
|
46
47
|
|
|
48
|
+
export type ThemeName = 'dark' | 'light' | 'colored' | 'blue' | 'PT' | 'DX';
|
|
49
|
+
export type ThemeType = 'dark' | 'light';
|
|
50
|
+
|
|
47
51
|
export interface GenericAppProps {
|
|
48
52
|
/** Adapter instance number if known, else will be determined from url */
|
|
49
53
|
instance?: number;
|
|
@@ -59,6 +63,11 @@ export interface GenericAppProps {
|
|
|
59
63
|
socket?: ConnectionProps;
|
|
60
64
|
/** Desired connection object */
|
|
61
65
|
Connection?: LegacyConnection | Connection | AdminConnection;
|
|
66
|
+
/** sentry DNS */
|
|
67
|
+
sentryDSN?: string;
|
|
68
|
+
/** Callback if user changes the theme. Call it to trigger change */
|
|
69
|
+
onThemeChange?: (newThemeName: ThemeName) => void;
|
|
70
|
+
classes?: Record<string, string>;
|
|
62
71
|
}
|
|
63
72
|
|
|
64
73
|
export interface GenericAppSettings extends GenericAppProps {
|
|
@@ -66,29 +75,60 @@ export interface GenericAppSettings extends GenericAppProps {
|
|
|
66
75
|
doNotLoadAllObjects?: boolean;
|
|
67
76
|
}
|
|
68
77
|
|
|
69
|
-
export type ThemeName = 'dark' | 'light' | 'colored' | 'blue' | 'PT' | 'DX';
|
|
70
|
-
export type ThemeType = 'dark' | 'light';
|
|
71
|
-
|
|
72
78
|
export interface GenericAppState {
|
|
79
|
+
loaded: boolean;
|
|
80
|
+
themeType: ThemeType;
|
|
81
|
+
themeName: ThemeName;
|
|
82
|
+
theme: Theme;
|
|
83
|
+
expertMode: boolean;
|
|
73
84
|
selectedTab: string;
|
|
74
|
-
selectedTabNum: number;
|
|
75
|
-
native:
|
|
76
|
-
errorText: string | JSX.Element;
|
|
85
|
+
selectedTabNum: number | undefined;
|
|
86
|
+
native: Record<string, any>;
|
|
87
|
+
errorText: string | React.JSX.Element;
|
|
77
88
|
changed: boolean;
|
|
78
89
|
connected: boolean;
|
|
79
|
-
loaded: boolean;
|
|
80
90
|
isConfigurationError: string;
|
|
81
|
-
toast: string;
|
|
82
|
-
theme: Theme;
|
|
83
|
-
themeName: ThemeName;
|
|
84
|
-
themeType: ThemeType;
|
|
91
|
+
toast: string | React.JSX.Element;
|
|
85
92
|
bottomButtons: boolean;
|
|
86
93
|
width: Width;
|
|
94
|
+
confirmClose: boolean;
|
|
95
|
+
_alert: boolean;
|
|
96
|
+
_alertType: 'info' | 'warning' | 'error' | 'success';
|
|
97
|
+
_alertMessage: string | React.JSX.Element;
|
|
98
|
+
common?: Record<string, any>;
|
|
87
99
|
}
|
|
88
100
|
|
|
89
101
|
export type Width = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
90
102
|
|
|
103
|
+
interface Palette extends MuiPalette {
|
|
104
|
+
mode: ThemeType;
|
|
105
|
+
expert: string;
|
|
106
|
+
grey: {
|
|
107
|
+
main: string;
|
|
108
|
+
dark: string;
|
|
109
|
+
50: string;
|
|
110
|
+
100: string;
|
|
111
|
+
200: string;
|
|
112
|
+
300: string;
|
|
113
|
+
400: string;
|
|
114
|
+
500: string;
|
|
115
|
+
600: string;
|
|
116
|
+
700: string;
|
|
117
|
+
800: string;
|
|
118
|
+
900: string;
|
|
119
|
+
A100: string;
|
|
120
|
+
A200: string;
|
|
121
|
+
A400: string;
|
|
122
|
+
A700: string;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
91
125
|
|
|
92
126
|
export interface Theme extends MuiTheme {
|
|
93
127
|
name: ThemeName;
|
|
128
|
+
palette: Palette;
|
|
129
|
+
toolbar: React.CSSProperties;
|
|
130
|
+
saveToolbar: {
|
|
131
|
+
background: string;
|
|
132
|
+
button: React.CSSProperties;
|
|
133
|
+
}
|
|
94
134
|
}
|