@iobroker/json-config 9.1.1 → 9.1.2
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
|
@@ -1948,6 +1948,9 @@ The schema is used here: https://github.com/SchemaStore/schemastore/blob/6da29cd
|
|
|
1948
1948
|
### **WORK IN PROGRESS**
|
|
1949
1949
|
-->
|
|
1950
1950
|
## Changelog
|
|
1951
|
+
### 9.1.2 (2026-09-01)
|
|
1952
|
+
- (@GermanBluefox) Replaced `react-color` with the `ColorPicker` from `@iobroker/gui-components` in the `color` component
|
|
1953
|
+
|
|
1951
1954
|
### 9.1.1 (2026-08-31)
|
|
1952
1955
|
- (@GermanBluefox) Do not show export import on narrow devices
|
|
1953
1956
|
|
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import { type JSX } from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ConfigItemColor } from '../types';
|
|
3
3
|
import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
|
|
4
4
|
interface ConfigColorProps extends ConfigGenericProps {
|
|
5
|
-
schema:
|
|
5
|
+
schema: ConfigItemColor;
|
|
6
6
|
}
|
|
7
|
-
|
|
8
|
-
showColorDialog?: boolean;
|
|
9
|
-
colorDialogValue?: string;
|
|
10
|
-
}
|
|
11
|
-
declare class ConfigColor extends ConfigGeneric<ConfigColorProps, ConfigColorState> {
|
|
12
|
-
renderColorDialog(): JSX.Element | null;
|
|
7
|
+
declare class ConfigColor extends ConfigGeneric<ConfigColorProps, ConfigGenericState> {
|
|
13
8
|
renderItem(_error: unknown, disabled: boolean): JSX.Element;
|
|
14
9
|
}
|
|
15
10
|
export default ConfigColor;
|
|
@@ -1,49 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { IconButton, TextField, Dialog } from '@mui/material';
|
|
4
|
-
import { Close as ClearIcon } from '@mui/icons-material';
|
|
5
|
-
import { Utils } from '@iobroker/gui-components';
|
|
2
|
+
import { ColorPicker } from '@iobroker/gui-components';
|
|
6
3
|
import ConfigGeneric from './ConfigGeneric';
|
|
7
4
|
class ConfigColor extends ConfigGeneric {
|
|
8
|
-
renderColorDialog() {
|
|
9
|
-
return this.state.showColorDialog ? (React.createElement(Dialog, { onClose: () => this.setState({ showColorDialog: false }), open: this.state.showColorDialog },
|
|
10
|
-
React.createElement(ChromePicker, { color: this.state.colorDialogValue, onChange: (color) => this.setState({ colorDialogValue: color.hex }, () => this.props.attr && this.onChange(this.props.attr, this.state.colorDialogValue)) }))) : null;
|
|
11
|
-
}
|
|
12
5
|
renderItem(_error, disabled /* , defaultValue */) {
|
|
13
6
|
const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
this.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
backgroundColor: value,
|
|
29
|
-
color: textColor ? '#FFF' : '#000',
|
|
30
|
-
},
|
|
31
|
-
readOnly: this.props.schema.readOnly || false,
|
|
32
|
-
},
|
|
33
|
-
input: {
|
|
34
|
-
endAdornment: !this.props.schema.readOnly && value && !this.props.schema.noClearButton ? (React.createElement(IconButton, { tabIndex: -1, size: "small", onClick: e => {
|
|
35
|
-
e.stopPropagation();
|
|
36
|
-
const mayBePromise = this.props.attr && this.onChange(this.props.attr, '');
|
|
37
|
-
if (mayBePromise instanceof Promise) {
|
|
38
|
-
void mayBePromise.catch(e => console.error(`Cannot set value: ${e}`));
|
|
39
|
-
}
|
|
40
|
-
} },
|
|
41
|
-
React.createElement(ClearIcon, null))) : undefined,
|
|
42
|
-
},
|
|
43
|
-
inputLabel: {
|
|
44
|
-
shrink: true,
|
|
45
|
-
},
|
|
46
|
-
} })));
|
|
7
|
+
return (React.createElement(ColorPicker, { id: `color_${this.props.attr || ''}_${this.props.index ?? ''}`, disabled: !!disabled, style: { minWidth: 100, width: 'calc(100% - 8px)' }, label: this.getText(this.props.schema.label), value: value || '',
|
|
8
|
+
// the previous picker always reported the color as #rrggbb
|
|
9
|
+
format: "hex", sx: this.props.schema.noClearButton
|
|
10
|
+
? {
|
|
11
|
+
// the color picker has no option to hide the clear button, so it is done via CSS
|
|
12
|
+
'& > .MuiIconButton-root': { display: 'none' },
|
|
13
|
+
'& > .MuiFormControl-root': { width: 'calc(100% - 56px)', mr: 1 },
|
|
14
|
+
}
|
|
15
|
+
: undefined, onChange: color => {
|
|
16
|
+
const mayBePromise = this.props.attr && this.onChange(this.props.attr, color);
|
|
17
|
+
if (mayBePromise instanceof Promise) {
|
|
18
|
+
void mayBePromise.catch(e => console.error(`Cannot set value: ${e}`));
|
|
19
|
+
}
|
|
20
|
+
} }));
|
|
47
21
|
}
|
|
48
22
|
}
|
|
49
23
|
export default ConfigColor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfigColor.js","sourceRoot":"src/","sources":["JsonConfigComponent/ConfigColor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ConfigColor.js","sourceRoot":"src/","sources":["JsonConfigComponent/ConfigColor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,aAAmE,MAAM,iBAAiB,CAAC;AAMlG,MAAM,WAAY,SAAQ,aAAmD;IACzE,UAAU,CAAC,MAAe,EAAE,QAAiB,CAAC,oBAAoB;QAC9D,MAAM,KAAK,GAAG,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEvE,OAAO,CACH,oBAAC,WAAW,IACR,EAAE,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,EAC9D,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,EAAE,EACnD,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,KAAK,EAAE,KAAK,IAAI,EAAE;YAClB,2DAA2D;YAC3D,MAAM,EAAC,KAAK,EACZ,EAAE,EACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa;gBAC3B,CAAC,CAAC;oBACI,iFAAiF;oBACjF,yBAAyB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;oBAC9C,0BAA0B,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,CAAC,EAAE;iBACpE;gBACH,CAAC,CAAC,SAAS,EAEnB,QAAQ,EAAE,KAAK,CAAC,EAAE;gBACd,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBAC9E,IAAI,YAAY,YAAY,OAAO,EAAE,CAAC;oBAClC,KAAK,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC1E,CAAC;YACL,CAAC,GACH,CACL,CAAC;IACN,CAAC;CACJ;AAED,eAAe,WAAW,CAAC","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { ColorPicker } from '@iobroker/gui-components';\n\nimport type { ConfigItemColor } from '../types';\nimport ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';\n\ninterface ConfigColorProps extends ConfigGenericProps {\n schema: ConfigItemColor;\n}\n\nclass ConfigColor extends ConfigGeneric<ConfigColorProps, ConfigGenericState> {\n renderItem(_error: unknown, disabled: boolean /* , defaultValue */): JSX.Element {\n const value = ConfigGeneric.getValue(this.props.data, this.props.attr);\n\n return (\n <ColorPicker\n id={`color_${this.props.attr || ''}_${this.props.index ?? ''}`}\n disabled={!!disabled}\n style={{ minWidth: 100, width: 'calc(100% - 8px)' }}\n label={this.getText(this.props.schema.label)}\n value={value || ''}\n // the previous picker always reported the color as #rrggbb\n format=\"hex\"\n sx={\n this.props.schema.noClearButton\n ? {\n // the color picker has no option to hide the clear button, so it is done via CSS\n '& > .MuiIconButton-root': { display: 'none' },\n '& > .MuiFormControl-root': { width: 'calc(100% - 56px)', mr: 1 },\n }\n : undefined\n }\n onChange={color => {\n const mayBePromise = this.props.attr && this.onChange(this.props.attr, color);\n if (mayBePromise instanceof Promise) {\n void mayBePromise.catch(e => console.error(`Cannot set value: ${e}`));\n }\n }}\n />\n );\n }\n}\n\nexport default ConfigColor;\n"]}
|
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": "9.1.
|
|
4
|
+
"version": "9.1.2",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "bluefox",
|
|
7
7
|
"email": "dogafox@gmail.com"
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"scripts": {
|
|
20
20
|
"build": "tsc && tsc-alias && node after_build",
|
|
21
21
|
"clean": "rimraf build",
|
|
22
|
+
"npm": "npm i && cd test-gui && npm i",
|
|
22
23
|
"prepublishOnly": "npm run build",
|
|
23
24
|
"build:ts": "tsc -p tsconfig.json",
|
|
24
25
|
"lint": "eslint -c eslint.config.mjs",
|
|
@@ -60,11 +61,9 @@
|
|
|
60
61
|
"@types/crypto-js": "^4.2.2",
|
|
61
62
|
"@types/node": "^26.4.0",
|
|
62
63
|
"@types/react": "^19.2.18",
|
|
63
|
-
"@types/react-color": "^3.0.13",
|
|
64
64
|
"@types/react-dom": "^19.2.5",
|
|
65
65
|
"ajv": "^8.20.0",
|
|
66
66
|
"date-fns": "^4.4.0",
|
|
67
|
-
"react-color": "^2.19.3",
|
|
68
67
|
"tsc-alias": "^1.9.3",
|
|
69
68
|
"typescript": "~6.0.3"
|
|
70
69
|
},
|