@iobroker/adapter-react-v5 5.0.7 → 6.0.0

package/Components/FileViewer.js

@@ -30,7 +30,6 @@ exports.EXTENSIONS = void 0;
 // File viewer in adapter-react does not support write
 // import { Buffer } from 'buffer';
 const react_1 = __importStar(require("react"));
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 // Icons
 const fa_1 = require("react-icons/fa");
@@ -218,12 +217,12 @@ class FileViewer extends react_1.Component {
     getContent() {
         if (this.state.ext && exports.EXTENSIONS.images.includes(this.state.ext)) {
             if (this.state.imgError) {
-                return react_1.default.createElement(IconNoIcon_1.default, { className: Utils_1.default.clsx(this.props.classes.img, this.props.getClassBackgroundImage()) });
+                return react_1.default.createElement(IconNoIcon_1.default, { style: Object.assign(Object.assign({}, styles.img), this.props.getStyleBackgroundImage()) });
             }
             return react_1.default.createElement(Icon_1.default, { onError: e => {
                     e.target.onerror = null;
                     this.setState({ imgError: true });
-                }, className: Utils_1.default.clsx(this.props.classes.img, this.props.getClassBackgroundImage()), src: `${this.props.href}?ts=${this.state.forceUpdate}`, alt: this.props.href });
+                }, style: Object.assign(Object.assign({}, styles.img), this.props.getStyleBackgroundImage()), src: `${this.props.href}?ts=${this.state.forceUpdate}`, alt: this.props.href });
         }
         if (this.state.code !== null || this.state.text !== null || this.state.editing) {
             // File viewer in adapter-react does not support write
@@ -233,20 +232,23 @@ class FileViewer extends react_1.Component {
             //     value={this.state.editingValue || this.state.code || this.state.text}
             //     onChange={this.state.editing ? newValue => this.setState({ editingValue: newValue, changed: true }) : undefined}
             // />;
-            return react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.textarea, multiline: true, value: this.state.editingValue || this.state.code || this.state.text, 
+            return react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.textarea, multiline: true, value: this.state.editingValue || this.state.code || this.state.text, 
                 // onChange={newValue => this.setState({ editingValue: newValue, changed: true })}
                 InputProps: { readOnly: !this.state.editing } });
         }
         return null;
     }
     render() {
-        return react_1.default.createElement(material_1.Dialog, { classes: { scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }, scroll: "paper", open: !!this.props.href, onClose: () => this.props.onClose(), fullWidth: true, maxWidth: "xl", "aria-labelledby": "ar_dialog_file_view_title" },
-            react_1.default.createElement("div", { className: this.props.classes.dialogTitle },
+        return react_1.default.createElement(material_1.Dialog, { sx: {
+                '&.MuiDialog-scrollPaper': styles.dialog,
+                '& .MuiDialog-paper': styles.paper,
+            }, scroll: "paper", open: !!this.props.href, onClose: () => this.props.onClose(), fullWidth: true, maxWidth: "xl", "aria-labelledby": "ar_dialog_file_view_title" },
+            react_1.default.createElement("div", { style: styles.dialogTitle },
                 react_1.default.createElement(material_1.DialogTitle, { id: "ar_dialog_file_view_title" }, `${this.props.t(this.state.editing ? 'Edit' : 'View')}: ${this.props.href}`),
                 this.state.ext && exports.EXTENSIONS.images.includes(this.state.ext) && react_1.default.createElement("div", null,
                     react_1.default.createElement(material_1.IconButton, { size: "large", color: "inherit", onClick: this.props.setStateBackgroundImage },
                         react_1.default.createElement(icons_material_1.Brightness6, null)))),
-            react_1.default.createElement(material_1.DialogContent, { className: this.props.classes.content }, this.getContent()),
+            react_1.default.createElement(material_1.DialogContent, { style: styles.content }, this.getContent()),
             react_1.default.createElement(material_1.DialogActions, null,
                 this.state.copyPossible ?
                     react_1.default.createElement(material_1.Button, { color: "grey", onClick: e => {
@@ -259,4 +261,4 @@ class FileViewer extends react_1.Component {
                 react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.props.onClose(), color: "primary", startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.t('Close'))));
     }
 }
-exports.default = (0, withWidth_1.default)()((0, styles_1.withStyles)(styles)(FileViewer));
+exports.default = (0, withWidth_1.default)()(FileViewer);

package/Components/Icon.d.ts

@@ -8,6 +8,7 @@ interface IconProps {
     className?: string;
     /** Style for image */
     style?: React.CSSProperties;
+    sx?: Record<string, any>;
     /** Tooltip */
     title?: string;
     /** Styles for utf-8 characters */

package/Components/Icon.js

@@ -9,6 +9,7 @@ const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
 const icons_material_1 = require("@mui/icons-material");
 const IconAlias_1 = __importDefault(require("../icons/IconAlias"));
 const Utils_1 = __importDefault(require("./Utils"));
+const material_1 = require("@mui/material");
 function getSystemIcon(obj) {
     let icon;
     const id = obj === null || obj === void 0 ? void 0 : obj._id;
@@ -104,6 +105,9 @@ function Icon(props) {
         if (typeof props.src === 'string') {
             if (props.src.length < 3) {
                 // utf-8 char
+                if (props.sx) {
+                    return react_1.default.createElement(material_1.Box, { component: "span", sx: props.sx, title: props.title || undefined, style: Object.assign({ height: 27, marginTop: -8 }, (props.styleUTF8 || props.style)), className: Utils_1.default.clsx(props.className, 'iconOwn') }, props.src);
+                }
                 return react_1.default.createElement("span", { title: props.title || undefined, style: Object.assign({ height: 27, marginTop: -8 }, (props.styleUTF8 || props.style)), className: Utils_1.default.clsx(props.className, 'iconOwn') }, props.src);
             }
             if (props.src.startsWith('data:image/svg')) {
@@ -117,10 +121,13 @@ function Icon(props) {
                 else if (!src.startsWith('/')) {
                     src = REMOTE_PREFIX + src;
                 }
-                return react_1.default.createElement("img", { title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => {
-                        // analyse error
-                        props.onError && props.onError(e);
-                    } });
+                if (props.sx) {
+                    return react_1.default.createElement(material_1.Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) });
+                }
+                return react_1.default.createElement("img", { title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) });
+            }
+            if (props.sx) {
+                return react_1.default.createElement(material_1.Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError });
             }
             return react_1.default.createElement("img", { title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError });
         }

package/Components/IconPicker.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 interface IconPickerProps {
+    previewStyle?: React.CSSProperties;
     previewClassName?: string;
     /** Custom icon element. */
-    icon?: React.ComponentType<any>;
+    icon?: React.FC<{
+        style?: React.CSSProperties;
+    }>;
+    customStyles?: Record<string, React.CSSProperties>;
     customClasses?: Record<string, string>;
     /** The label. */
     label?: string;

package/Components/IconPicker.js

@@ -28,53 +28,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_dropzone_1 = require("react-dropzone");
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const IconSelector_1 = __importDefault(require("./IconSelector"));
 const Icon_1 = __importDefault(require("./Icon"));
 const i18n_1 = __importDefault(require("../i18n"));
 const Utils_1 = __importDefault(require("./Utils"));
+const styles = {
+    formContainer: {
+        display: 'flex',
+        justifyContent: 'left',
+        alignItems: 'center',
+    },
+    formControl: {
+        display: 'flex',
+        padding: 24,
+        flexGrow: 1000,
+    },
+    divContainer: {
+        width: 32 + 24,
+        height: 32,
+        whiteSpace: 'nowrap',
+        lineHeight: '32px',
+        marginRight: 8,
+    },
+    dragField: {
+        textAlign: 'center',
+        display: 'table',
+        minHeight: 90,
+        width: 'calc(100% - 60px)',
+        border: '2px dashed #777',
+        borderRadius: 10,
+        padding: 4,
+    },
+    formIcon: {
+        margin: 10,
+        opacity: 0.6,
+    },
+    text: {
+        display: 'table-cell',
+        verticalAlign: 'middle',
+    },
+};
 const IconPicker = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const IconCustom = props.icon;
-    const useStyles = (0, styles_1.makeStyles)(() => ({
-        formContainer: {
-            display: 'flex',
-            justifyContent: 'left',
-            alignItems: 'center',
-        },
-        formControl: {
-            display: 'flex',
-            padding: 24,
-            flexGrow: 1000,
-        },
-        divContainer: {
-            width: 32 + 24,
-            height: 32,
-            whiteSpace: 'nowrap',
-            lineHeight: '32px',
-            marginRight: 8,
-        },
-        dragField: {
-            textAlign: 'center',
-            display: 'table',
-            minHeight: 90,
-            width: 'calc(100% - 60px)',
-            border: '2px dashed #777',
-            borderRadius: 10,
-            padding: 4,
-        },
-        formIcon: {
-            margin: 10,
-            opacity: 0.6,
-        },
-        text: {
-            display: 'table-cell',
-            verticalAlign: 'middle',
-        },
-    }));
-    const classes = useStyles();
     const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
         const reader = new FileReader();
         reader.addEventListener('load', () => props.onChange(reader.result), false);
@@ -83,22 +81,22 @@ const IconPicker = (props) => {
         }
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
     const { getRootProps, getInputProps, isDragActive } = (0, react_dropzone_1.useDropzone)({ onDrop });
-    return react_1.default.createElement("div", { className: classes.formContainer },
-        IconCustom ? react_1.default.createElement(IconCustom, { className: classes.formIcon }) : null,
-        react_1.default.createElement(material_1.FormControl, { variant: "standard", className: classes.formControl, style: { padding: 3 } },
-            react_1.default.createElement(material_1.InputLabel, { shrink: true, classes: { root: (_a = props.customClasses) === null || _a === void 0 ? void 0 : _a.label } }, props.label),
-            react_1.default.createElement("div", { className: classes.formContainer },
+    return react_1.default.createElement("div", { style: styles.formContainer },
+        IconCustom ? react_1.default.createElement(IconCustom, { style: styles.formIcon }) : null,
+        react_1.default.createElement(material_1.FormControl, { variant: "standard", style: Object.assign(Object.assign({}, styles.formControl), { padding: 3 }) },
+            react_1.default.createElement(material_1.InputLabel, { shrink: true, sx: ((_a = props.customStyles) === null || _a === void 0 ? void 0 : _a.label) ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined, classes: { root: (_b = props.customClasses) === null || _b === void 0 ? void 0 : _b.label } }, props.label),
+            react_1.default.createElement("div", { style: styles.formContainer },
                 props.value ?
-                    react_1.default.createElement("div", { className: classes.divContainer },
-                        react_1.default.createElement(Icon_1.default, { className: Utils_1.default.clsx(props.previewClassName, (_b = props.customClasses) === null || _b === void 0 ? void 0 : _b.icon), src: props.value }),
+                    react_1.default.createElement("div", { style: styles.divContainer },
+                        react_1.default.createElement(Icon_1.default, { style: Object.assign(Object.assign({}, props.previewStyle), (((_c = props.customStyles) === null || _c === void 0 ? void 0 : _c.icon) || undefined)), src: props.value, className: Utils_1.default.clsx(props.previewClassName, (_d = props.customClasses) === null || _d === void 0 ? void 0 : _d.icon) }),
                         !props.disabled && react_1.default.createElement(material_1.IconButton, { style: { verticalAlign: 'top' }, title: i18n_1.default.t('ra_Clear icon'), size: "small", onClick: () => props.onChange('') },
                             react_1.default.createElement(icons_material_1.Clear, null)))
                     :
                         (!props.disabled && react_1.default.createElement(IconSelector_1.default, { icons: props.icons, onlyRooms: props.onlyRooms, onlyDevices: props.onlyDevices, onSelect: (base64) => props.onChange(base64), t: i18n_1.default.t, lang: i18n_1.default.getLanguage() })),
-                !props.disabled && react_1.default.createElement("div", Object.assign({}, getRootProps(), { className: classes.dragField, style: isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' } }),
+                !props.disabled && react_1.default.createElement("div", Object.assign({}, getRootProps(), { style: Object.assign({}, styles.dragField, isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' }) }),
                     react_1.default.createElement("input", Object.assign({}, getInputProps())),
                     isDragActive ?
-                        react_1.default.createElement("span", { className: classes.text }, i18n_1.default.t('ra_Drop the files here...')) :
-                        react_1.default.createElement("span", { className: classes.text }, i18n_1.default.t('ra_Drag \'n\' drop some files here, or click to select files'))))));
+                        react_1.default.createElement("span", { style: styles.text }, i18n_1.default.t('ra_Drop the files here...')) :
+                        react_1.default.createElement("span", { style: styles.text }, i18n_1.default.t('ra_Drag \'n\' drop some files here, or click to select files'))))));
 };
 exports.default = IconPicker;

package/Components/ObjectBrowser.d.ts

@@ -8,11 +8,6 @@ import React, { Component } from 'react';
 import type Router from './Router';
 import type { ThemeType, ThemeName, IobTheme, Translate } from '../types';
 import Connection from '../Connection';
-declare module '@mui/material/Button' {
-    interface ButtonPropsColorOverrides {
-        grey: true;
-    }
-}
 declare global {
     interface Window {
         sparkline: {
@@ -20,6 +15,11 @@ declare global {
         };
     }
 }
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        grey: true;
+    }
+}
 type ObjectEventType = 'new' | 'changed' | 'deleted';
 interface ObjectEvent {
     id: string;
@@ -119,7 +119,6 @@ interface AdapterColumn {
     align?: 'center' | 'left' | 'right';
 }
 interface ObjectBrowserEditRoleProps {
-    classes: Record<string, string>;
     roles: string[];
     id: string;
     socket: Connection;
@@ -134,7 +133,8 @@ interface ObjectViewFileDialogProps {
 }
 interface DragWrapperProps {
     item: TreeItem;
-    className: string;
+    className?: string;
+    style?: React.CSSProperties;
     children: React.JSX.Element | null;
 }
 interface ObjectCustomDialogProps {
@@ -151,13 +151,10 @@ interface ObjectCustomDialogProps {
     onClose: () => void;
     reportChangedIds: (ids: string[]) => void;
     isFloatComma: boolean;
-    classes: Record<string, string>;
     allVisibleObjects: boolean;
     systemConfig: ioBroker.SystemConfigObject;
 }
 interface ObjectBrowserValueProps {
-    /** Css classes */
-    classes: Record<string, string>;
     /** State type */
     type: 'states' | 'string' | 'number' | 'boolean' | 'json';
     /** State role */
@@ -185,7 +182,6 @@ interface ObjectBrowserValueProps {
     lang: ioBroker.Languages;
 }
 interface ObjectBrowserEditObjectProps {
-    classes: Record<string, string>;
     socket: Connection;
     obj: ioBroker.AnyObject;
     roleArray: string[];
@@ -211,7 +207,6 @@ interface ObjectAliasEditorProps {
 interface ObjectBrowserProps {
     /** where to store settings in localStorage */
     dialogName?: string;
-    classes: Record<string, string>;
     defaultFilters?: ObjectBrowserFilter;
     selected?: string | string[];
     onSelect?: (selected: string | string[], name: string, isDouble?: boolean) => void;
@@ -373,6 +368,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private readonly possibleCols;
     private readonly imagePrefix;
     private adapterColumns;
+    private styleTheme;
     private edit;
     private readonly levelPadding;
     private customWidth;
@@ -396,6 +392,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private changedIds;
     private contextMenu;
     private recordStates;
+    private styles;
     private customColumnDialog;
     constructor(props: ObjectBrowserProps);
     loadAllObjects(update?: boolean): Promise<void>;
@@ -518,7 +515,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private toggleExpanded;
     private onCopy;
     renderTooltipAccessControl: (acl: ioBroker.StateACL) => null | React.JSX.Element;
-    renderColumnButtons(id: string, item: TreeItem, classes: Record<string, string>): React.JSX.Element | React.JSX.Element[];
+    renderColumnButtons(id: string, item: TreeItem): React.JSX.Element | React.JSX.Element[];
     private readHistory;
     private getTooltipInfo;
     private renderColumnValue;
@@ -537,13 +534,13 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     /**
      * Renders a leaf.
      */
-    renderLeaf(item: TreeItem, isExpanded: boolean | undefined, classes: Record<string, string>, counter: {
+    renderLeaf(item: TreeItem, isExpanded: boolean | undefined, counter: {
         count: number;
     }): React.JSX.Element;
     /**
      * Renders an item.
      */
-    renderItem(root: TreeItem, isExpanded: boolean | undefined, classes: Record<string, string>, counter?: {
+    renderItem(root: TreeItem, isExpanded: boolean | undefined, counter?: {
         count: number;
     }): React.JSX.Element[];
     private calculateColumnsVisibility;