@iobroker/adapter-react-v5 4.13.15 → 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.
Files changed (6) hide show
  1. package/GenericApp.d.ts +4 -59
  2. package/GenericApp.js +2 -4
  3. package/README.md +2 -1
  4. package/Theme.js +93 -161
  5. package/package.json +1 -1
  6. package/types.d.ts +47 -12
package/GenericApp.d.ts CHANGED
@@ -5,11 +5,9 @@
5
5
  *
6
6
  **/
7
7
  import React from 'react';
8
- import { Connection, AdminConnection } from '@iobroker/socket-client';
9
- import { type Theme } from '@mui/material';
8
+ import { AdminConnection } from '@iobroker/socket-client';
10
9
  import Router from './Components/Router';
11
- import LegacyConnection from './LegacyConnection';
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,55 +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
- /** Callback if user changes the theme. Call it to trigger change */
48
- onThemeChange?: (newThemeName: ThemeName) => void;
49
- classes?: Record<string, string>;
50
- }
51
- interface GenericAppSettings extends GenericAppProps {
52
- /** Don't load all objects on start-up. */
53
- doNotLoadAllObjects?: boolean;
54
- }
55
- interface GenericAppState {
56
- loaded: boolean;
57
- themeType: ThemeType;
58
- themeName: ThemeName;
59
- theme: Theme;
60
- expertMode: boolean;
61
- selectedTab: string;
62
- selectedTabNum: number | undefined;
63
- native: Record<string, any>;
64
- errorText: string | React.JSX.Element;
65
- changed: boolean;
66
- connected: boolean;
67
- isConfigurationError: string;
68
- toast: string | React.JSX.Element;
69
- bottomButtons: boolean;
70
- width: Width;
71
- confirmClose: boolean;
72
- _alert: boolean;
73
- _alertType: 'info' | 'warning' | 'error' | 'success';
74
- _alertMessage: string | React.JSX.Element;
75
- common?: Record<string, any>;
76
- }
77
26
  declare class GenericApp<TProps extends GenericAppProps = GenericAppProps, TState extends GenericAppState = GenericAppState> extends Router<TProps, TState> {
78
27
  protected socket: AdminConnection;
79
28
  protected readonly instance: number;
@@ -84,16 +33,12 @@ declare class GenericApp<TProps extends GenericAppProps = GenericAppProps, TStat
84
33
  protected readonly sentryDSN: string | undefined;
85
34
  private alertDialogRendered;
86
35
  private _secret;
87
- protected _systemConfig: Record<string, any> | undefined;
36
+ protected _systemConfig: ioBroker.SystemConfigCommon | undefined;
88
37
  private savedNative;
89
38
  private common;
90
39
  private sentryStarted;
91
40
  private sentryInited;
92
41
  private resizeTimer;
93
- /**
94
- * @param {import('./types').GenericAppProps} props
95
- * @param {import('./types').GenericAppSettings | undefined} settings
96
- */
97
42
  constructor(props: TProps, settings?: GenericAppSettings);
98
43
  /**
99
44
  * Checks if this connection is running in a web adapter and not in an admin.
@@ -102,7 +47,7 @@ declare class GenericApp<TProps extends GenericAppProps = GenericAppProps, TStat
102
47
  static isWeb(): boolean;
103
48
  showAlert(message: string, type?: 'info' | 'warning' | 'error' | 'success'): void;
104
49
  renderAlertSnackbar(): React.JSX.Element;
105
- onSystemConfigChanged: (id: string, obj: ioBroker.Object | null | undefined) => void;
50
+ onSystemConfigChanged: (id: string, obj: ioBroker.AnyObject | null | undefined) => void;
106
51
  /**
107
52
  * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
108
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,8 +670,9 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
670
670
  -->
671
671
 
672
672
  ## Changelog
673
- ### 4.13.15 (2024-05-21)
673
+ ### 4.13.16 (2024-05-21)
674
674
  * (bluefox) Better types added
675
+ * (bluefox) updated theme definitions
675
676
 
676
677
  ### 4.13.14 (2024-05-19)
677
678
  * (bluefox) Updated packages
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
- overrides: {
154
- MuiAppBar: {
155
- colorDefault: {
156
- backgroundColor: '#272727',
157
- },
113
+ };
114
+ }
115
+ else if (type === 'blue') {
116
+ overrides = {
117
+ MuiAppBar: {
118
+ colorDefault: {
119
+ backgroundColor: '#3399CC',
158
120
  },
159
- MuiLink: {
160
- root: {
161
- textTransform: 'uppercase',
162
- transition: 'color .3s ease',
163
- color: colors_1.orange[200],
164
- '&:hover': {
165
- color: colors_1.orange[100],
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
- overrides: {
196
- MuiAppBar: {
197
- colorDefault: {
198
- backgroundColor: '#2a3135',
199
- },
153
+ };
154
+ }
155
+ else if (type === 'colored') {
156
+ overrides = {
157
+ MuiAppBar: {
158
+ colorDefault: {
159
+ backgroundColor: '#2a3135',
200
160
  },
201
- MuiLink: {
202
- root: {
203
- textTransform: 'uppercase',
204
- transition: 'color .3s ease',
205
- color: colors_1.orange[200],
206
- '&:hover': {
207
- color: colors_1.orange[100],
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
- overrides: {
230
- MuiAppBar: {
231
- colorDefault: {
232
- backgroundColor: '#3399CC',
233
- },
186
+ };
187
+ }
188
+ else if (type === 'PT') {
189
+ overrides = {
190
+ MuiAppBar: {
191
+ colorDefault: {
192
+ backgroundColor: '#0F99DE',
234
193
  },
235
- MuiLink: {
236
- root: {
237
- textTransform: 'uppercase',
238
- transition: 'color .3s ease',
239
- color: colors_1.orange[400],
240
- '&:hover': {
241
- color: colors_1.orange[300],
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
- overrides: {
263
- MuiAppBar: {
264
- colorDefault: {
265
- backgroundColor: '#0F99DE',
266
- },
218
+ };
219
+ }
220
+ else if (type === 'DX') {
221
+ overrides = {
222
+ MuiAppBar: {
223
+ colorDefault: {
224
+ backgroundColor: '#a9a9a9',
267
225
  },
268
- MuiLink: {
269
- root: {
270
- textTransform: 'uppercase',
271
- transition: 'color .3s ease',
272
- color: colors_1.orange[400],
273
- '&:hover': {
274
- color: colors_1.orange[300],
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
- overrides: {
301
- MuiAppBar: {
302
- colorDefault: {
303
- backgroundColor: '#a9a9a9',
304
- },
305
- },
306
- MuiLink: {
307
- root: {
308
- textTransform: 'uppercase',
309
- transition: 'color .3s ease',
310
- color: colors_1.orange[400],
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iobroker/adapter-react-v5",
3
- "version": "4.13.15",
3
+ "version": "4.13.16",
4
4
  "description": "React classes to develop admin interfaces for ioBroker with react.",
5
5
  "author": {
6
6
  "name": "Denis Haev (bluefox)",
package/types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { Theme as MuiTheme } from '@mui/material/styles';
1
+ import React from 'react';
2
+ import { Theme as MuiTheme, Palette as MuiPalette } from '@mui/material/styles';
2
3
  import { AdminConnection, Connection } from '@iobroker/socket-client';
3
4
  import LegacyConnection from './LegacyConnection';
4
5
 
@@ -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;
@@ -71,29 +75,60 @@ export interface GenericAppSettings extends GenericAppProps {
71
75
  doNotLoadAllObjects?: boolean;
72
76
  }
73
77
 
74
- export type ThemeName = 'dark' | 'light' | 'colored' | 'blue' | 'PT' | 'DX';
75
- export type ThemeType = 'dark' | 'light';
76
-
77
78
  export interface GenericAppState {
79
+ loaded: boolean;
80
+ themeType: ThemeType;
81
+ themeName: ThemeName;
82
+ theme: Theme;
83
+ expertMode: boolean;
78
84
  selectedTab: string;
79
- selectedTabNum: number;
80
- native: ioBroker.AdapterConfig;
81
- errorText: string | JSX.Element;
85
+ selectedTabNum: number | undefined;
86
+ native: Record<string, any>;
87
+ errorText: string | React.JSX.Element;
82
88
  changed: boolean;
83
89
  connected: boolean;
84
- loaded: boolean;
85
90
  isConfigurationError: string;
86
- toast: string;
87
- theme: Theme;
88
- themeName: ThemeName;
89
- themeType: ThemeType;
91
+ toast: string | React.JSX.Element;
90
92
  bottomButtons: boolean;
91
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>;
92
99
  }
93
100
 
94
101
  export type Width = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
95
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
+ }
96
125
 
97
126
  export interface Theme extends MuiTheme {
98
127
  name: ThemeName;
128
+ palette: Palette;
129
+ toolbar: React.CSSProperties;
130
+ saveToolbar: {
131
+ background: string;
132
+ button: React.CSSProperties;
133
+ }
99
134
  }