@iobroker/adapter-react-v5 6.0.12 → 6.0.13

package/Components/ColorPicker.d.ts

@@ -15,6 +15,7 @@
  */
 import React, { Component } from 'react';
 import { type RGBColor } from 'react-color';
+import { IobTheme } from '../types';
 interface ColorPickerProps {
     /** Set to true to disable the color picker. */
     disabled?: boolean;
@@ -32,11 +33,11 @@ interface ColorPickerProps {
     style?: React.CSSProperties;
     /** The CSS class name. */
     className?: string;
-    /** Open the color picker above the field? */
     customPalette?: string[];
     noInputField?: boolean;
     barWidth?: number;
     sx?: Record<string, any>;
+    theme?: IobTheme;
 }
 interface ColorPickerState {
     displayColorPicker: boolean;

package/Components/ColorPicker.js

@@ -53,15 +53,13 @@ const styles = {
         borderRadius: 2,
     },
     delButton: {
-        // width: 32,
-        // height: 32,
         marginTop: 16,
     },
     swatch: {
-        marginTop: 16,
-        padding: 5,
-        background: 'background.paper',
-        borderRadius: 1,
+        mt: '16px',
+        p: '5px',
+        backgroundColor: 'background.paper',
+        borderRadius: '1px',
         boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
         display: 'inline-block',
         cursor: 'pointer',
@@ -72,10 +70,11 @@ const styles = {
         cursor: 'default',
     },
     popover: {
-        // position: 'absolute',
-        // zIndex: 2,
-        backgroundColor: '#00000000',
-        textAlign: 'right',
+        '& .MuiPaper-root': {
+            textAlign: 'right',
+            backgroundColor: '#00000000',
+            boxShadow: 'none',
+        },
     },
     popoverList: {
         padding: 0,
@@ -189,30 +188,25 @@ class ColorPicker extends react_1.Component {
             react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.iconButton), { background: color }) }))));
     }
     render() {
+        var _a;
         const style = Object.assign({}, (this.props.style || {}));
         style.position = 'relative';
         const { color } = this.state;
         return react_1.default.createElement(material_1.Box, { component: "div", style: style, sx: this.props.sx || undefined, className: this.props.className || '' },
-            this.props.noInputField ? null : react_1.default.createElement(material_1.TextField, { disabled: this.props.disabled, variant: "standard", id: "ar_color_picker_name", label: this.props.label || this.props.name || 'color', value: color || '', margin: "dense", sx: {
+            this.props.noInputField ? null : react_1.default.createElement(material_1.TextField, { disabled: this.props.disabled, variant: "standard", id: "ar_color_picker_name", label: this.props.label || this.props.name, value: color || '', margin: "dense", sx: {
                     '&.MuiFormControl-root': styles.textDense,
                     width: color ? 'calc(100% - 80px)' : 'calc(100% - 56px)',
                     mr: color ? undefined : 1,
                 }, onChange: e => this.handleChange(e.target.value) }),
-            !this.props.noInputField && color ? react_1.default.createElement(material_1.IconButton, { disabled: this.props.disabled, onClick: () => this.handleChange(''), size: "small", style: Object.assign(Object.assign({}, styles.delButton), (color ? undefined : { opacity: 0, cursor: 'default' })) },
+            !this.props.noInputField && color ? react_1.default.createElement(material_1.IconButton, { disabled: this.props.disabled, onClick: () => this.handleChange(''), size: "small", style: Object.assign(Object.assign({}, (this.props.label || this.props.name ? styles.delButton : undefined)), (color ? undefined : { opacity: 0, cursor: 'default' })) },
                 react_1.default.createElement(icons_material_1.Delete, null)) : null,
-            react_1.default.createElement("div", { onClick: e => !this.props.disabled && this.handleClick(e), title: i18n_1.default.t('ra_Select color'), style: Object.assign(Object.assign(Object.assign({}, styles.swatch), (this.props.disabled ? styles.swatchDisabled : undefined)), { background: color ? undefined : 'transparent', border: color ? undefined : '1px dashed #ccc', boxSizing: 'border-box', marginTop: this.props.noInputField ? 0 : undefined }) },
-                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.color), { background: ColorPicker.getColor(color), width: this.props.noInputField ? (this.props.barWidth || 16) : (this.props.barWidth || undefined) }) })),
-            this.state.displayColorPicker && !this.props.disabled ? react_1.default.createElement(material_1.Menu, { classes: { paper: styles.popover, list: styles.popoverList }, anchorEl: this.state.anchorEl, open: !0, onClose: () => this.handleClose() },
-                react_1.default.createElement(react_color_1.ChromePicker
-                // todo
-                // sx={styles.picker}
-                , { 
-                    // todo
-                    // sx={styles.picker}
-                    color: this.state.color || undefined, onChangeComplete: _color => this.handleChange(_color.rgb), styles: {
+            react_1.default.createElement(material_1.Box, { component: "div", onClick: e => !this.props.disabled && this.handleClick(e), title: i18n_1.default.t('ra_Select color'), sx: Object.assign(Object.assign(Object.assign({}, styles.swatch), (this.props.disabled ? styles.swatchDisabled : undefined)), { background: color ? undefined : 'transparent', border: color ? undefined : '1px dashed #ccc', boxSizing: 'border-box', marginTop: this.props.noInputField || !(this.props.label || this.props.name) ? 0 : undefined }) },
+                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.color), { background: ColorPicker.getColor(color), width: this.props.noInputField ? (this.props.barWidth || 16) : this.props.barWidth || 36 }) })),
+            this.state.displayColorPicker && !this.props.disabled ? react_1.default.createElement(material_1.Menu, { sx: Object.assign(Object.assign({}, styles.popover), { '&. MuiMenu-list': styles.popoverList }), anchorEl: this.state.anchorEl, open: !0, onClose: () => this.handleClose() },
+                react_1.default.createElement(react_color_1.ChromePicker, { color: this.state.color || undefined, onChangeComplete: (_color) => this.handleChange(_color.rgb), styles: {
                         default: {
                             picker: {
-                                backgroundColor: '#112233',
+                                backgroundColor: ((_a = this.props.theme) === null || _a === void 0 ? void 0 : _a.palette.background.paper) || '#888',
                             },
                         },
                     } }),

package/README.md

@@ -771,6 +771,9 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 -->
 
 ## Changelog
+### 6.0.13 (2024-06-30)
+* (bluefox) Corrected color picker
+
 ### 6.0.12 (2024-06-29)
 * (bluefox) Added support for the overrides in the theme
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "6.0.12",
+  "version": "6.0.13",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",