@iobroker/json-config 8.2.15 → 8.2.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/README.md
CHANGED
|
@@ -732,10 +732,13 @@ exactly one of `label` or `text` must be specified - not both
|
|
|
732
732
|
|
|
733
733
|
### `staticImage`
|
|
734
734
|
|
|
735
|
-
| Property
|
|
736
|
-
|
|
737
|
-
| `href`
|
|
738
|
-
| `src`
|
|
735
|
+
| Property | Description |
|
|
736
|
+
|----------------------------|----------------------------------------------------------------------------------------------|
|
|
737
|
+
| `href` | optional HTTP link |
|
|
738
|
+
| `src` | name of picture (from admin directory) |
|
|
739
|
+
| `showInDialog` | if true, a small thumbnail is shown and clicking it opens a dialog with the full-size image |
|
|
740
|
+
| `showInDialogButtonLabel` | if `showInDialog`, an optional label for a button that also opens the dialog |
|
|
741
|
+
| `showInDialogSmallSize` | if `showInDialog`, the height of the small thumbnail in pixels (default 100) |
|
|
739
742
|
|
|
740
743
|
### `table`
|
|
741
744
|
|
|
@@ -1749,8 +1752,9 @@ The schema is used here: https://github.com/SchemaStore/schemastore/blob/6da29cd
|
|
|
1749
1752
|
### **WORK IN PROGRESS**
|
|
1750
1753
|
-->
|
|
1751
1754
|
## Changelog
|
|
1752
|
-
### 8.2.
|
|
1755
|
+
### 8.2.16 (2026-03-24)
|
|
1753
1756
|
- (@GermanBluefox) Added the possibility to use own Client ID for oauth authentication
|
|
1757
|
+
- (@GermanBluefox) Added the possibility show small image and open it in full size by click on it
|
|
1754
1758
|
|
|
1755
1759
|
### 8.2.11 (2026-03-20)
|
|
1756
1760
|
- (@GermanBluefox) Correcting unit in schema
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { type JSX } from 'react';
|
|
2
2
|
import type { ConfigItemStaticImage } from '../types';
|
|
3
3
|
import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
|
|
4
|
-
interface
|
|
4
|
+
interface ConfigStaticImageProps extends ConfigGenericProps {
|
|
5
5
|
schema: ConfigItemStaticImage;
|
|
6
6
|
}
|
|
7
|
-
|
|
7
|
+
interface ConfigStaticImageState extends ConfigGenericState {
|
|
8
|
+
showDialog?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare class ConfigStaticImage extends ConfigGeneric<ConfigStaticImageProps, ConfigStaticImageState> {
|
|
11
|
+
private getSrc;
|
|
8
12
|
renderItem(): JSX.Element;
|
|
9
13
|
}
|
|
10
14
|
export default ConfigStaticImage;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Button, Dialog, DialogActions, DialogContent, Tooltip } from '@mui/material';
|
|
3
|
+
import { I18n } from '@iobroker/adapter-react-v5';
|
|
2
4
|
import ConfigGeneric from './ConfigGeneric';
|
|
3
5
|
class ConfigStaticImage extends ConfigGeneric {
|
|
4
|
-
|
|
6
|
+
getSrc() {
|
|
5
7
|
let src = this.props.schema.src;
|
|
6
8
|
if (src &&
|
|
7
9
|
!src.startsWith('.') &&
|
|
@@ -10,9 +12,31 @@ class ConfigStaticImage extends ConfigGeneric {
|
|
|
10
12
|
!src.startsWith(`./adapter/${this.props.oContext.adapterName}/`)) {
|
|
11
13
|
src = `adapter/${this.props.oContext.adapterName}/${src}`;
|
|
12
14
|
}
|
|
13
|
-
return
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
return src;
|
|
16
|
+
}
|
|
17
|
+
renderItem( /* error: string, disabled: boolean, defaultValue */) {
|
|
18
|
+
const { schema } = this.props;
|
|
19
|
+
const src = this.getSrc();
|
|
20
|
+
if (schema.showInDialog) {
|
|
21
|
+
const smallSize = schema.showInDialogSmallSize || 100;
|
|
22
|
+
const buttonLabel = schema.showInDialogButtonLabel ? this.getText(schema.showInDialogButtonLabel) : '';
|
|
23
|
+
return (React.createElement(React.Fragment, null,
|
|
24
|
+
React.createElement(Tooltip, { title: I18n.t('ra_Click to see in full size') },
|
|
25
|
+
React.createElement("img", { src: src, style: {
|
|
26
|
+
cursor: 'pointer',
|
|
27
|
+
width: 'auto',
|
|
28
|
+
height: smallSize,
|
|
29
|
+
objectFit: 'contain',
|
|
30
|
+
}, onClick: () => this.setState({ showDialog: true }), alt: "" })),
|
|
31
|
+
' ',
|
|
32
|
+
buttonLabel ? (React.createElement(Button, { variant: "outlined", color: "grey", onClick: () => this.setState({ showDialog: true }) }, buttonLabel)) : null,
|
|
33
|
+
this.state.showDialog ? (React.createElement(Dialog, { open: !0, onClose: () => this.setState({ showDialog: false }), maxWidth: "lg" },
|
|
34
|
+
React.createElement(DialogContent, null,
|
|
35
|
+
React.createElement("img", { src: src, style: { width: '100%', height: '100%', objectFit: 'contain' }, alt: "" })),
|
|
36
|
+
React.createElement(DialogActions, null,
|
|
37
|
+
React.createElement(Button, { variant: "contained", onClick: () => this.setState({ showDialog: false }), color: "primary" }, I18n.t('ra_Close'))))) : null));
|
|
38
|
+
}
|
|
39
|
+
return (React.createElement("img", { src: src, style: { cursor: schema.href ? 'pointer' : undefined, width: '100%', height: '100%' }, onClick: schema.href ? () => schema.href && window.open(schema.href, '_blank') : null, alt: "" }));
|
|
16
40
|
}
|
|
17
41
|
}
|
|
18
42
|
export default ConfigStaticImage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfigStaticImage.js","sourceRoot":"./src/","sources":["JsonConfigComponent/ConfigStaticImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ConfigStaticImage.js","sourceRoot":"./src/","sources":["JsonConfigComponent/ConfigStaticImage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { Button, Dialog, DialogActions, DialogContent, Tooltip } from '@mui/material';\n\nimport { I18n } from '@iobroker/adapter-react-v5';\n\nimport type { ConfigItemStaticImage } from '../types';\nimport ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';\n\ninterface ConfigStaticImageProps extends ConfigGenericProps {\n schema: ConfigItemStaticImage;\n}\n\ninterface ConfigStaticImageState extends ConfigGenericState {\n showDialog?: boolean;\n}\n\nclass ConfigStaticImage extends ConfigGeneric<ConfigStaticImageProps, ConfigStaticImageState> {\n private getSrc(): string {\n let src = this.props.schema.src;\n if (\n src &&\n !src.startsWith('.') &&\n !src.startsWith('http') &&\n !src.startsWith(`adapter/${this.props.oContext.adapterName}/`) &&\n !src.startsWith(`./adapter/${this.props.oContext.adapterName}/`)\n ) {\n src = `adapter/${this.props.oContext.adapterName}/${src}`;\n }\n return src;\n }\n\n renderItem(/* error: string, disabled: boolean, defaultValue */): JSX.Element {\n const { schema } = this.props;\n const src = this.getSrc();\n\n if (schema.showInDialog) {\n const smallSize = schema.showInDialogSmallSize || 100;\n const buttonLabel = schema.showInDialogButtonLabel ? this.getText(schema.showInDialogButtonLabel) : '';\n\n return (\n <>\n <Tooltip title={I18n.t('ra_Click to see in full size')}>\n <img\n src={src}\n style={{\n cursor: 'pointer',\n width: 'auto',\n height: smallSize,\n objectFit: 'contain',\n }}\n onClick={() => this.setState({ showDialog: true })}\n alt=\"\"\n />\n </Tooltip>{' '}\n {buttonLabel ? (\n <Button\n variant=\"outlined\"\n color=\"grey\"\n onClick={() => this.setState({ showDialog: true })}\n >\n {buttonLabel}\n </Button>\n ) : null}\n {this.state.showDialog ? (\n <Dialog\n open={!0}\n onClose={() => this.setState({ showDialog: false })}\n maxWidth=\"lg\"\n >\n <DialogContent>\n <img\n src={src}\n style={{ width: '100%', height: '100%', objectFit: 'contain' }}\n alt=\"\"\n />\n </DialogContent>\n <DialogActions>\n <Button\n variant=\"contained\"\n onClick={() => this.setState({ showDialog: false })}\n color=\"primary\"\n >\n {I18n.t('ra_Close')}\n </Button>\n </DialogActions>\n </Dialog>\n ) : null}\n </>\n );\n }\n\n return (\n <img\n src={src}\n style={{ cursor: schema.href ? 'pointer' : undefined, width: '100%', height: '100%' }}\n onClick={schema.href ? () => schema.href && window.open(schema.href, '_blank') : null}\n alt=\"\"\n />\n );\n }\n}\n\nexport default ConfigStaticImage;\n"]}
|
package/build/types.d.ts
CHANGED
|
@@ -500,6 +500,12 @@ export interface ConfigItemStaticImage extends ConfigItem {
|
|
|
500
500
|
src: string;
|
|
501
501
|
/** optional HTTP link */
|
|
502
502
|
href?: string;
|
|
503
|
+
/** It will be shown small image 100px, and by click on it the dialog will be opened with bigger image */
|
|
504
|
+
showInDialog?: boolean;
|
|
505
|
+
/** If showInDialog, the label for the button */
|
|
506
|
+
showInDialogButtonLabel?: ioBroker.StringOrTranslated;
|
|
507
|
+
/** If showInDialog, the size of small image (default 100px) */
|
|
508
|
+
showInDialogSmallSize?: number;
|
|
503
509
|
}
|
|
504
510
|
|
|
505
511
|
export interface ConfigItemStaticText extends Omit<ConfigItem, 'button'> {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iobroker/json-config",
|
|
3
3
|
"description": "This package contains the ioBroker JSON config UI components",
|
|
4
|
-
"version": "8.2.
|
|
4
|
+
"version": "8.2.16",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "bluefox",
|
|
7
7
|
"email": "dogafox@gmail.com"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@iobroker/adapter-react-v5": "^8.1.
|
|
38
|
+
"@iobroker/adapter-react-v5": "^8.1.6",
|
|
39
39
|
"@module-federation/runtime": "^2.1.0",
|
|
40
40
|
"@mui/x-date-pickers": "^7.29.4",
|
|
41
41
|
"crypto-js": "^4.2.0",
|