@iobroker/dm-gui-components 6.17.12 → 6.17.14

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.
@@ -10,7 +10,7 @@ export default function JsonConfig(props) {
10
10
  const [adapterName, instance] = instanceId.split('.', 2);
11
11
  return React.createElement(React.Fragment, null,
12
12
  error && React.createElement("div", null, error),
13
- React.createElement(JsonConfigComponent, { socket: socket, adapterName: adapterName, instance: parseInt(instance), schema: schema, data: data, onError: setError, onChange: _data => onChange(_data), embedded: true, themeName: props.themeName, themeType: props.themeType, isFloatComma: props.isFloatComma === undefined ? this.props.socket.systemConfig.common.isFloatComma : props.isFloatComma, dateFormat: props.dateFormat === undefined ? this.props.socket.systemConfig.common.dateFormat : props.dateFormat }));
13
+ React.createElement(JsonConfigComponent, { socket: socket, adapterName: adapterName, instance: parseInt(instance), schema: schema, data: data, onError: setError, onChange: (_data) => onChange(_data), embedded: true, themeName: props.themeName, themeType: props.themeType, isFloatComma: props.isFloatComma === undefined ? props.socket.systemConfig.common.isFloatComma : props.isFloatComma, dateFormat: props.dateFormat === undefined ? props.socket.systemConfig.common.dateFormat : props.dateFormat }));
14
14
  /*
15
15
  JSON adapter config:
16
16
  className={classes.scroll}
@@ -1 +1 @@
1
- {"version":3,"file":"JsonConfig.js","sourceRoot":"./src/","sources":["JsonConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAelF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACrD,MAAM,EACF,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAC7C,GAAG,KAAK,CAAC;IACV,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEzD,OAAO;QACF,KAAK,IAAI,iCAAM,KAAK,CAAO;QAC5B,oBAAC,mBAAmB,IAChB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAC5B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClC,QAAQ,QACR,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EACxH,UAAU,EAAE,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,GAClH,CACH,CAAC;IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkDE;AACN,CAAC"}
1
+ {"version":3,"file":"JsonConfig.js","sourceRoot":"./src/","sources":["JsonConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAelF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACrD,MAAM,EACF,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAC7C,GAAG,KAAK,CAAC;IACV,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEzD,OAAO;QACF,KAAK,IAAI,iCAAM,KAAK,CAAO;QAC5B,oBAAC,mBAAmB,IAChB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAC5B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,CAAC,KAA0B,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACzD,QAAQ,QACR,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EACnH,UAAU,EAAE,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,GAC7G,CACH,CAAC;IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkDE;AACN,CAAC"}
package/package.json CHANGED
@@ -1,51 +1,51 @@
1
- {
2
- "name": "@iobroker/dm-gui-components",
3
- "version": "6.17.12",
4
- "description": "ReactJS components to develop admin interface for ioBroker device manager.",
5
- "author": {
6
- "name": "Jey Cee",
7
- "email": "iobroker@all-smart.net"
8
- },
9
- "contributors": [
10
- {
11
- "name": "UncleSamSwiss"
12
- },
13
- {
14
- "name": "bluefox",
15
- "email": "dogafox@gmail.com"
16
- }
17
- ],
18
- "scripts": {
19
- "prepublishOnly": "npm run build",
20
- "clean": "rimraf build",
21
- "build": "tsc && tsc-alias"
22
- },
23
- "repository": {
24
- "type": "git",
25
- "url": "git+https://github.com/ioBroker/dm-gui-components.git"
26
- },
27
- "publishConfig": {
28
- "access": "public"
29
- },
30
- "files": [
31
- "build/",
32
- "src/",
33
- "LICENSE",
34
- "README.md"
35
- ],
36
- "module": "./build/index.js",
37
- "types": "./build/index.d.ts",
38
- "keywords": [
39
- "iobroker",
40
- "adapter",
41
- "iot"
42
- ],
43
- "license": "MIT",
44
- "bugs": {
45
- "url": "https://github.com/ioBroker/dm-gui-components/issues"
46
- },
47
- "homepage": "https://github.com/ioBroker/dm-gui-components#readme",
48
- "dependencies": {
49
- "@iobroker/adapter-react-v5": "^4.13.13"
50
- }
51
- }
1
+ {
2
+ "name": "@iobroker/dm-gui-components",
3
+ "version": "6.17.14",
4
+ "description": "ReactJS components to develop admin interface for ioBroker device manager.",
5
+ "author": {
6
+ "name": "Jey Cee",
7
+ "email": "iobroker@all-smart.net"
8
+ },
9
+ "contributors": [
10
+ {
11
+ "name": "UncleSamSwiss"
12
+ },
13
+ {
14
+ "name": "bluefox",
15
+ "email": "dogafox@gmail.com"
16
+ }
17
+ ],
18
+ "scripts": {
19
+ "prepublishOnly": "npm run build",
20
+ "clean": "rimraf build",
21
+ "build": "tsc && tsc-alias"
22
+ },
23
+ "repository": {
24
+ "type": "git",
25
+ "url": "git+https://github.com/ioBroker/dm-gui-components.git"
26
+ },
27
+ "publishConfig": {
28
+ "access": "public"
29
+ },
30
+ "files": [
31
+ "build/",
32
+ "LICENSE",
33
+ "README.md"
34
+ ],
35
+ "module": "./build/index.js",
36
+ "types": "./build/index.d.ts",
37
+ "keywords": [
38
+ "iobroker",
39
+ "adapter",
40
+ "iot"
41
+ ],
42
+ "license": "MIT",
43
+ "bugs": {
44
+ "url": "https://github.com/ioBroker/dm-gui-components/issues"
45
+ },
46
+ "homepage": "https://github.com/ioBroker/dm-gui-components#readme",
47
+ "dependencies": {
48
+ "@iobroker/adapter-react-v5": "^4.13.22"
49
+ },
50
+ "gitHead": "b2a1a4a818977939e83b79f0303b1131a238d978"
51
+ }
@@ -1,443 +0,0 @@
1
- import React, { Component } from 'react';
2
-
3
- import {
4
- Backdrop,
5
- Button,
6
- CircularProgress,
7
- Dialog,
8
- DialogActions,
9
- DialogContent,
10
- DialogContentText,
11
- DialogTitle,
12
- LinearProgress,
13
- Snackbar,
14
- } from '@mui/material';
15
-
16
- import { AdminConnection } from '@iobroker/adapter-react-v5';
17
- import type { ActionBase, ControlBase, ControlState } from '@iobroker/dm-utils/build/types/base';
18
- import type { DeviceRefresh } from '@iobroker/dm-utils/build/types';
19
-
20
- import { getTranslation } from './Utils';
21
- import JsonConfig from './JsonConfig';
22
- import type { ThemeName, ThemeType } from '@iobroker/adapter-react-v5/types';
23
-
24
- export type CommunicationProps = {
25
- /* socket object */
26
- socket: AdminConnection;
27
- /* Instance to communicate with device-manager backend, like `adapterName.X` */
28
- selectedInstance: string; // adapterName.X
29
- registerHandler?: (handler: null | ((command: string) => void)) => void;
30
- themeName: ThemeName;
31
- themeType: ThemeType;
32
- isFloatComma: boolean;
33
- dateFormat: string;
34
- }
35
-
36
- interface CommunicationForm {
37
- title?: string | null | undefined;
38
- schema?: Record<string, any>;
39
- data?: Record<string, any>;
40
- handleClose?: (data?: Record<string, any>) => void;
41
- }
42
-
43
- export type CommunicationState = {
44
- showSpinner: boolean;
45
- showToast: string | null;
46
- message: {
47
- message: string;
48
- handleClose: () => void;
49
- } | null;
50
- confirm: {
51
- message: string;
52
- handleClose: (confirmation?: boolean) => void;
53
- } | null;
54
- form: CommunicationForm | null;
55
- progress: {
56
- open: boolean;
57
- progress: number;
58
- } | null;
59
- }
60
-
61
- interface DmResponse {
62
- /* Type of message */
63
- type: 'message' | 'confirm' | 'progress' | 'result' | 'form';
64
- /* Origin */
65
- origin: string;
66
- }
67
-
68
- interface DmControlResponse extends DmResponse {
69
- result: {
70
- error?: {
71
- code: number;
72
- message: string;
73
- };
74
- state?: ioBroker.State;
75
- deviceId: string;
76
- controlId: string;
77
- };
78
- }
79
-
80
- interface DmActionResponse extends DmResponse {
81
- result: {
82
- refresh?: DeviceRefresh;
83
- error?: {
84
- code: number;
85
- message: string;
86
- };
87
- };
88
- message?: string;
89
- confirm?: string;
90
- form?: any;
91
- progress?: {
92
- open: boolean;
93
- progress: number;
94
- };
95
- }
96
-
97
- /**
98
- * Device List Component
99
- * @param {object} params - Component parameters
100
- * @param {object} params.socket - socket object
101
- * @param {string} params.selectedInstance - Selected instance
102
- * @returns {*[]} - Array of device cards
103
- */
104
- class Communication<P extends CommunicationProps, S extends CommunicationState> extends Component<P, S> {
105
- // eslint-disable-next-line react/no-unused-class-component-methods
106
- instanceHandler: (action: ActionBase<'api'>) => () => void;
107
-
108
- // eslint-disable-next-line react/no-unused-class-component-methods
109
- deviceHandler: (deviceId: string, action: ActionBase<'api'>, refresh: () => void) => () => void;
110
-
111
- // eslint-disable-next-line react/no-unused-class-component-methods
112
- controlHandler: (deviceId: string, control: ControlBase, state: ControlState) => () => Promise<ioBroker.State | null>;
113
-
114
- // eslint-disable-next-line react/no-unused-class-component-methods
115
- controlStateHandler: (deviceId: string, control: ControlBase) => () => Promise<ioBroker.State | null>;
116
-
117
- constructor(props: P) {
118
- super(props);
119
-
120
- // @ts-expect-error
121
- this.state = {
122
- showSpinner: false,
123
- showToast: null,
124
- message: null,
125
- confirm: null,
126
- form: null,
127
- progress: null,
128
- };
129
-
130
- // eslint-disable-next-line react/no-unused-class-component-methods
131
- this.instanceHandler = action => () => this.sendActionToInstance('dm:instanceAction', { actionId: action.id });
132
-
133
- // eslint-disable-next-line react/no-unused-class-component-methods
134
- this.deviceHandler = (deviceId, action, refresh) => () => this.sendActionToInstance('dm:deviceAction', { deviceId, actionId: action.id }, refresh);
135
-
136
- // eslint-disable-next-line react/no-unused-class-component-methods
137
- this.controlHandler = (deviceId, control, state) => () => this.sendControlToInstance('dm:deviceControl', { deviceId, controlId: control.id, state });
138
-
139
- // eslint-disable-next-line react/no-unused-class-component-methods
140
- this.controlStateHandler = (deviceId, control) => () => this.sendControlToInstance('dm:deviceControlState', { deviceId, controlId: control.id });
141
-
142
- this.props.registerHandler && this.props.registerHandler(() => this.loadData());
143
- }
144
-
145
- // eslint-disable-next-line class-methods-use-this
146
- loadData(): void {
147
- console.error('loadData not implemented');
148
- }
149
-
150
- sendActionToInstance = (command: string, messageToSend: any, refresh?: () => void) => {
151
- const send = async () => {
152
- this.setState({ showSpinner: true });
153
- /** @type {object} */
154
- const response: DmActionResponse = await this.props.socket.sendTo(this.props.selectedInstance, command, messageToSend);
155
-
156
- /** @type {string} */
157
- const type: string = response.type;
158
- console.log(`Response: ${response.type}`);
159
- switch (type) {
160
- case 'message':
161
- console.log(`Message received: ${response.message}`);
162
- if (response.message) {
163
- this.setState({
164
- message: {
165
- message: response.message,
166
- handleClose: () => this.setState({ message: null }, () =>
167
- this.sendActionToInstance('dm:actionProgress', { origin: response.origin })),
168
- },
169
- });
170
- }
171
- break;
172
-
173
- case 'confirm':
174
- console.log(`Confirm received: ${response.confirm}`);
175
- if (response.confirm) {
176
- this.setState({
177
- confirm: {
178
- message: response.confirm,
179
- handleClose: (confirm?: boolean) => this.setState({ confirm: null }, () =>
180
- this.sendActionToInstance('dm:actionProgress', {
181
- origin: response.origin,
182
- confirm,
183
- })),
184
- },
185
- });
186
- }
187
- break;
188
-
189
- case 'form':
190
- console.log('Form received');
191
- if (response.form) {
192
- this.setState({
193
- form: {
194
- ...response.form,
195
- handleClose: (data: any) => this.setState({ form: null }, () => {
196
- console.log(`Form ${JSON.stringify(data)}`);
197
- this.sendActionToInstance('dm:actionProgress', {
198
- origin: response.origin,
199
- data,
200
- });
201
- }),
202
- },
203
- });
204
- }
205
- break;
206
-
207
- case 'progress':
208
- if (response.progress) {
209
- if (this.state.progress) {
210
- const progress = { ...this.state.progress, ...response.progress };
211
- this.setState({ progress });
212
- } else {
213
- this.setState({ progress: response.progress });
214
- }
215
- }
216
- this.sendActionToInstance('dm:actionProgress', { origin: response.origin });
217
- break;
218
-
219
- case 'result':
220
- console.log('Response content', response.result);
221
- if (response.result.refresh) {
222
- if (response.result.refresh === true) {
223
- this.loadData();
224
- console.log('Refreshing all');
225
- } else if (response.result.refresh === 'instance') {
226
- console.log(`Refreshing instance infos: ${this.props.selectedInstance}`);
227
- } else if (response.result.refresh === 'device') {
228
- if (refresh) {
229
- console.log(`Refreshing device infos: ${this.props.selectedInstance}`);
230
- refresh();
231
- }
232
- } else {
233
- console.log('Not refreshing anything');
234
- }
235
- }
236
- if (response.result.error) {
237
- console.error(`Error: ${response.result.error}`);
238
- this.setState({ showToast: response.result.error.message });
239
- }
240
- this.setState({ showSpinner: false });
241
- break;
242
- default:
243
- console.log(`Unknown response type: ${type}`);
244
- this.setState({ showSpinner: false });
245
- break;
246
- }
247
- };
248
-
249
- send().catch(console.error);
250
- };
251
-
252
- sendControlToInstance = async (command: string, messageToSend: { deviceId: string; controlId: string; state?: ControlState }) => {
253
- const response: DmControlResponse = await this.props.socket.sendTo(this.props.selectedInstance, command, messageToSend);
254
- const type = response.type;
255
- console.log(`Response: ${response.type}`);
256
- if (response.type === 'result') {
257
- console.log('Response content', response.result);
258
- if (response.result.error) {
259
- console.error(`Error: ${response.result.error}`);
260
- this.setState({ showToast: response.result.error.message });
261
- } else if (response.result.state !== undefined) {
262
- return response.result.state;
263
- }
264
- } else {
265
- console.warn('Unexpected response type', type);
266
- }
267
-
268
- return null;
269
- };
270
-
271
- // eslint-disable-next-line react/no-unused-class-component-methods
272
- loadDevices() {
273
- return this.props.socket.sendTo(this.props.selectedInstance, 'dm:listDevices');
274
- }
275
-
276
- // eslint-disable-next-line react/no-unused-class-component-methods
277
- loadInstanceInfos() {
278
- return this.props.socket.sendTo(this.props.selectedInstance, 'dm:instanceInfo');
279
- }
280
-
281
- renderMessageDialog(): React.JSX.Element | null {
282
- if (!this.state.message) {
283
- return null;
284
- }
285
-
286
- return <Dialog
287
- open={!0}
288
- onClose={() => this.state.message?.handleClose()}
289
- hideBackdrop
290
- aria-describedby="message-dialog-description"
291
- >
292
- <DialogContent>
293
- <DialogContentText id="message-dialog-description">{this.state.message?.message}</DialogContentText>
294
- </DialogContent>
295
- <DialogActions>
296
- <Button
297
- onClick={() => this.state.message?.handleClose()}
298
- autoFocus
299
- >
300
- {getTranslation('okButtonText')}
301
- </Button>
302
- </DialogActions>
303
- </Dialog>;
304
- }
305
-
306
- renderConfirmDialog() {
307
- if (!this.state.confirm) {
308
- return null;
309
- }
310
-
311
- return <Dialog
312
- open={!0}
313
- onClose={() => this.state.confirm?.handleClose()}
314
- hideBackdrop
315
- aria-describedby="confirm-dialog-description"
316
- >
317
- <DialogContent>
318
- <DialogContentText id="confirm-dialog-description">
319
- {getTranslation(this.state.confirm?.message)}
320
- </DialogContentText>
321
- </DialogContent>
322
- <DialogActions>
323
- <Button
324
- variant="contained"
325
- color="primary"
326
- onClick={() => this.state.confirm?.handleClose(true)}
327
- autoFocus
328
- >
329
- {getTranslation('yesButtonText')}
330
- </Button>
331
- <Button
332
- variant="contained"
333
- // @ts-expect-error
334
- color="grey"
335
- onClick={() => this.state.confirm?.handleClose(false)}
336
- autoFocus
337
- hideBackdrop
338
- >
339
- {getTranslation('noButtonText')}
340
- </Button>
341
- </DialogActions>
342
- </Dialog>;
343
- }
344
-
345
- renderSnackbar() {
346
- return <Snackbar
347
- open={!!this.state.showToast}
348
- autoHideDuration={6000}
349
- onClose={() => this.setState({ showToast: null })}
350
- message={this.state.showToast}
351
- />;
352
- }
353
-
354
- renderFormDialog() {
355
- if (!this.state.form || !this.state.form.schema || !this.state.form.data) {
356
- return null;
357
- }
358
- return <Dialog open={!0} onClose={() => this.state.form?.handleClose && this.state.form.handleClose()} hideBackdrop>
359
- {this.state.form?.title ? <DialogTitle>{getTranslation(this.state.form?.title)}</DialogTitle> : null}
360
- <DialogContent>
361
- <JsonConfig
362
- instanceId={this.props.selectedInstance}
363
- schema={this.state.form.schema}
364
- data={this.state.form.data}
365
- socket={this.props.socket}
366
- onChange={(data: Record<string, any>) => {
367
- console.log('handleFormChange', { data });
368
- const form: CommunicationForm | null | undefined = { ...this.state.form };
369
- if (form) {
370
- form.data = data;
371
- this.setState({ form });
372
- }
373
- }}
374
- themeName={this.props.themeName}
375
- themeType={this.props.themeType}
376
- isFloatComma={this.props.isFloatComma}
377
- dateFormat={this.props.dateFormat}
378
- />
379
- </DialogContent>
380
- <DialogActions>
381
- <Button
382
- variant="contained"
383
- color="primary"
384
- onClick={() => this.state.form?.handleClose && this.state.form.handleClose(this.state.form?.data)}
385
- autoFocus
386
- >
387
- {getTranslation('okButtonText')}
388
- </Button>
389
- <Button
390
- variant="contained"
391
- // @ts-expect-error
392
- color="grey"
393
- onClick={() => this.state.form?.handleClose && this.state.form.handleClose()}
394
- hideBackdrop
395
- >
396
- {getTranslation('cancelButtonText')}
397
- </Button>
398
- </DialogActions>
399
- </Dialog>;
400
- }
401
-
402
- renderProgressDialog() {
403
- if (!this.state.progress?.open) {
404
- return null;
405
- }
406
-
407
- return <Dialog
408
- open={!0}
409
- onClose={() => {}}
410
- hideBackdrop
411
- >
412
- <LinearProgress variant="determinate" value={this.state.progress?.progress || 0} />
413
- </Dialog>;
414
- }
415
-
416
- // eslint-disable-next-line class-methods-use-this
417
- renderContent(): React.JSX.Element | React.JSX.Element[] | null {
418
- return null;
419
- }
420
-
421
- renderSpinner() {
422
- if (!this.state.showSpinner && !this.state.progress?.open && !this.state.message && !this.state.confirm && !this.state.form) {
423
- return null;
424
- }
425
- return <Backdrop style={{ zIndex: 1000 }} open={!0}>
426
- <CircularProgress />
427
- </Backdrop>;
428
- }
429
-
430
- render() {
431
- return <>
432
- {this.renderSnackbar()}
433
- {this.renderContent()}
434
- {this.renderSpinner()}
435
- {this.renderConfirmDialog()}
436
- {this.renderMessageDialog()}
437
- {this.renderFormDialog()}
438
- {this.renderProgressDialog()}
439
- </>;
440
- }
441
- }
442
-
443
- export default Communication;
@@ -1,31 +0,0 @@
1
- import React from 'react';
2
-
3
- import TooltipButton from './TooltipButton';
4
- import { renderIcon, getTranslation } from './Utils';
5
- import type { ActionBase } from '@iobroker/dm-utils/build/types/base';
6
-
7
- interface DeviceActionButtonProps {
8
- deviceId: string;
9
- action: any;
10
- refresh: () => void;
11
- deviceHandler: (deviceId: string, action: ActionBase<'api'>, refresh: () => void) => () => void;
12
- disabled?: boolean;
13
- }
14
-
15
- export default function DeviceActionButton(props: DeviceActionButtonProps): React.JSX.Element {
16
- const {
17
- deviceId, action, refresh, deviceHandler, disabled,
18
- } = props;
19
-
20
- const tooltip = getTranslation(action.description);
21
-
22
- const icon = renderIcon(action);
23
-
24
- return <TooltipButton
25
- label={action.label || (icon ? null : action.id)}
26
- tooltip={tooltip}
27
- disabled={disabled || action.disabled}
28
- Icon={icon}
29
- onClick={deviceHandler(deviceId, action, refresh)}
30
- />;
31
- }