@iobroker/adapter-react-v5 6.0.12 → 6.0.14

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/Components/Utils.js

@@ -1199,7 +1199,7 @@ class Utils {
         if (window.vendorPrefix && window.vendorPrefix !== '@@vendorPrefix@@') {
             return 'light';
         }
-        themeName = themeName || (window._localStorage || window.localStorage).getItem('App.themeName');
+        themeName = themeName || Utils.getThemeName();
         return themeName === 'dark' || themeName === 'blue' ? 'dark' : 'light';
     }
     /**

package/GenericApp.js

@@ -299,7 +299,7 @@ class GenericApp extends Router_1.default {
                         console.log('Sentry initialized');
                     }
                     // read UUID and init sentry with it.
-                    // for backward compatibility it will be processed separately from above logic: some adapters could still have this.sentryDSN as undefined
+                    // for backward compatibility it will be processed separately from the above logic: some adapters could still have this.sentryDSN as undefined
                     if (!this.sentryInited && sentryEnabled) {
                         this.sentryInited = true;
                         waitPromise = this.socket.getObject('system.meta.uuid')

package/README.md

@@ -699,6 +699,11 @@ const styles: Record<string, any> = (theme: IobTheme) => ({
    dialog: {
       height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
       padding: theme.spacing(1),
+      margin: theme.spacing(2),
+      gap: 5,
+      borderRadius: 5,
+      marginLeft: 10, // marginTop, marginRight, marginBottom
+      paddingLeft: 10, // paddingTop, paddingRight, paddingBottom
    },
    ...
 });
@@ -709,7 +714,12 @@ After:
 const styles: Record<string, any> = {
    dialog: (theme: IobTheme) => ({
       height: `calc(100% - ${theme => theme.mixins.toolbar.minHeight}px)`,
-      p: 1,
+      p: 1, // or 8px, padding is OK too
+      m: '16px', // or 2, margin is OK too
+      gap: '5px',
+      borderRadius: '5px',
+      ml: '10px', // mt, mr, mb, but marginLeft, marginRight, marginBottom is OK too
+      pl: '10px', // pt, pr, pb, but paddingTop, paddingRight, paddingBottom is OK too
    }),
 };
 ```
@@ -717,11 +727,11 @@ const styles: Record<string, any> = {
 - Modify `className`:
 Before: `<div className={this.props.classes.box}>`
 
-After: `<Box component="div" sx={styles.box}>`
+After: `<Box sx={styles.box}>`
 
-Before: `<div className={Utils.clsx(this.props.classes.box1, condition && this.props.classes.box2)}>`
+Before: `<span className={Utils.clsx(this.props.classes.box1, condition && this.props.classes.box2)}>`
 
-After: `<Box component="div" sx={Utils.getStyle(this.props.theme, this.props.classes.box1, condition && this.props.classes.box2)}>`
+After: `<Box component="span" sx={Utils.getStyle(this.props.theme, this.props.classes.box1, condition && this.props.classes.box2)}>`
 Or if no one style is a function: `<Box component="div" sx={{ ...this.props.classes.box1, ...(condition ? this.props.classes.box2 : undefined) }}>`
 
 Do not use `sx` if the style is not dynamic (not a function). Use `style` instead.
@@ -759,7 +769,7 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
   Before: `<Tooltip title={this.props.t('ra_Refresh tree')} classes={{ popper: styles.tooltip }}>`
   
   After: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>`
-  Or: `<Tooltip title={this.props.t('ra_Refresh tree')} elr>`
+  Or: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: styles.tooltip } }}>`
 
   Before. `<AccordionSummary classes={{ root: styles.rootStyle, content: styles.content }}>`
 
@@ -771,6 +781,12 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 -->
 
 ## Changelog
+### 6.0.14 (2024-07-07)
+* (bluefox) Corrected theme type selection
+
+### 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.14",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -30,13 +30,13 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@iobroker/socket-client": "^2.4.18",
-    "@iobroker/types": "^6.0.6-alpha.0-20240624-92c3310c8",
-    "@iobroker/js-controller-common": "^6.0.5",
-    "@iobroker/js-controller-common-db": "^6.0.5",
-    "@mui/icons-material": "^5.15.21",
-    "@mui/material": "^5.15.21",
-    "@mui/x-date-pickers": "^7.8.0",
-    "@sentry/browser": "^8.13.0",
+    "@iobroker/types": "^6.0.7-alpha.0-20240702-5c723a4ac",
+    "@iobroker/js-controller-common": "^6.0.6",
+    "@iobroker/js-controller-common-db": "^6.0.6",
+    "@mui/icons-material": "^5.16.0",
+    "@mui/material": "^5.16.0",
+    "@mui/x-date-pickers": "^7.9.0",
+    "@sentry/browser": "^8.15.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-cropper": "^2.3.3",