@iobroker/adapter-react-v5 7.2.6 → 7.3.1

package/README.md

@@ -13,7 +13,7 @@ If you want to create the configuration page with ReactJS:
     - Change `name` from `src` to `ADAPTERNAME-admin` (Of course replace `ADAPTERNAME` with yours)
     - Add to devDependencies:
         ```json
-        "@iobroker/adapter-react-v5": "^7.2.6",
+        "@iobroker/adapter-react-v5": "^7.3.1",
         ```
         Versions can be higher.
         So your `src/package.json` should look like:
@@ -24,18 +24,10 @@ If you want to create the configuration page with ReactJS:
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@iobroker/adapter-react-v5": "^7.2.6",
+        "@iobroker/adapter-react-v5": "^7.3.1",
         "@iobroker/build-tools": "^1.0.0",
-        "@iobroker/eslint-config": "^0.1.2",
-        "@mui/material": "^6.0.2",
-        "@mui/icons-material": "^6.0.2",
-        "@sentry/browser": "^8.28.0",
         "babel-eslint": "^10.1.0",
-        "eslint": "^9.10.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-scripts": "^5.0.1",
-        "react-icons": "^5.3.0"
+        "react-scripts": "^5.0.1"
     },
     "scripts": {
         "start": "react-scripts start",

package/build/Components/404.js

@@ -1,4 +1,4 @@
-import React, {} from 'react';
+import React from 'react';
 import { Box } from '@mui/material';
 /*
 Copyright 2019 Robin Selmer

package/build/Components/404.js.map

@@ -1 +1 @@
-{"version":3,"file":"404.js","sourceRoot":"./src/","sources":["Components/404.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC;;;EAGE;AAEF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,GAAwB;IAChC,OAAO,EAAE;QACL,UAAU,EAAE,OAAO;QACnB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;KACX;IACD,IAAI,EAAE;QACF,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,SAAS;QAC1B,eAAe,EAAE,oCAAoC;QACrD,UAAU,EAAE,sCAAsC;QAClD,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,0BAA0B;QACjC,UAAU,EAAE;yCACqB;KACpC;IACD,OAAO,EAAE;QACL,aAAa,EAAE,MAAM;QACrB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE;;;;mCAIe;QAC3B,cAAc,EAAE,UAAU;QAC1B,MAAM,EAAE,EAAE;QACV,WAAW,EAAE;YACT,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,MAAM;YACrB,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,eAAe,EAAE;;;;;;kCAMK;YACtB,gBAAgB,EAAE,WAAW;YAC7B,SAAS,EAAE,8BAA8B;SAC5C;KACJ;IAED,QAAQ,EAAE;QACN,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,WAAW;KAC7B;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,0BAA0B;QACjC,UAAU,EAAE;;6CAEyB;QACrC,WAAW,EAAE;YACT,OAAO,EAAE,MAAM;SAClB;KACJ;IACD,SAAS,EAAE;QACP,KAAK,EAAE,OAAO;KACjB;CACJ,CAAC;AAEF,mCAAmC;AACnC,SAAS,OAAO;IACZ,OAAO,CACH,6BAAK,KAAK,EAAE,MAAM,CAAC,OAAO;QACtB,6BAAK,KAAK,EAAE,MAAM,CAAC,IAAI;YACnB,oBAAC,GAAG,IACA,SAAS,EAAC,KAAK,EACf,EAAE,EAAE,MAAM,CAAC,OAAO;gBAElB,6BAAK,KAAK,EAAE,MAAM,CAAC,QAAQ;oBACvB;wBACK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC;wBACnB,8BAAM,KAAK,EAAE,MAAM,CAAC,SAAS,UAAY,CACxC;oBACL,oBAAC,GAAG,IACA,SAAS,EAAC,GAAG,EACb,EAAE,EAAE,MAAM,CAAC,MAAM,IAEhB,IAAI,CAAC,CAAC,CAAC,+CAA+C,CAAC,CACtD;oBACN,oBAAC,GAAG,IACA,SAAS,EAAC,GAAG,EACb,EAAE,EAAE,MAAM,CAAC,MAAM,IAEhB,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CACrB,CACJ,CACJ,CACJ,CACJ,CACT,CAAC;AACN,CAAC;AAED,eAAe,OAAO,CAAC","sourcesContent":["import React, { type JSX } from 'react';\nimport { Box } from '@mui/material';\n\n/*\nCopyright 2019 Robin Selmer\nhttps://codepen.io/robinselmer/pen/vJjbOZ\n*/\n\nimport { I18n } from '../i18n';\n\nconst styles: Record<string, any> = {\n    content: {\n        background: 'black',\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n    },\n    root: {\n        boxSizing: 'border-box',\n        height: '100%',\n        width: '100%',\n        backgroundColor: '#000000',\n        backgroundImage: 'radial-gradient(#104254 , #05181c)',\n        fontFamily: \"'Inconsolata', Helvetica, sans-serif\",\n        fontSize: '1.5rem',\n        color: 'rgba(128, 175, 255, 0.8)',\n        textShadow: `0 0 1ex rgba(51, 70, 255, 1),\n        0 0 2px rgba(255, 255, 255, 0.8)`,\n    },\n    overlay: {\n        pointerEvents: 'none',\n        width: '100%',\n        height: '100%',\n        background: `repeating-linear-gradient(\n                180deg,\n            rgba(0, 0, 0, 0) 0,\n            rgba(0, 0, 0, 0.3) 50%,\n            rgba(0, 0, 0, 0) 100%)`,\n        backgroundSize: 'auto 4px',\n        zIndex: 99,\n        '&::before': {\n            content: '\"\"',\n            pointerEvents: 'none',\n            position: 'absolute',\n            display: 'block',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: '100%',\n            height: '100%',\n            backgroundImage: `linear-gradient(\n                0deg,\n                transparent 0%,\n                rgba(32, 50, 128, 0.2) 2%,\n                rgba(32, 50, 128, 0.8) 3%,\n                rgba(32, 50, 128, 0.2) 3%,\n                transparent 100%)`,\n            backgroundRepeat: 'no-repeat',\n            animation: 'scan 7.5s linear 0s infinite',\n        },\n    },\n\n    terminal: {\n        boxSizing: 'inherit',\n        position: 'absolute',\n        height: '100%',\n        width: 'calc(100% - 8rem)',\n        maxWidth: '100%',\n        padding: '4rem',\n        textTransform: 'uppercase',\n    },\n    output: {\n        color: 'rgba(128, 175, 255, 0.8)',\n        textShadow: `\n        0 0 1px rgba(51, 70, 255, 0.4),\n            0 0 2px rgba(255, 255, 255, 0.8)`,\n        '&::before': {\n            content: '\"> \"',\n        },\n    },\n    errorCode: {\n        color: 'white',\n    },\n};\n\n/** Generates the 404 error page */\nfunction Page404(): JSX.Element {\n    return (\n        <div style={styles.content}>\n            <div style={styles.root}>\n                <Box\n                    component=\"div\"\n                    sx={styles.overlay}\n                >\n                    <div style={styles.terminal}>\n                        <h1>\n                            {I18n.t('ra_Error')}\n                            <span style={styles.errorCode}>404</span>\n                        </h1>\n                        <Box\n                            component=\"p\"\n                            sx={styles.output}\n                        >\n                            {I18n.t('ra_The page you are looking for was not found')}\n                        </Box>\n                        <Box\n                            component=\"p\"\n                            sx={styles.output}\n                        >\n                            {I18n.t('ra_Good luck')}\n                        </Box>\n                    </div>\n                </Box>\n            </div>\n        </div>\n    );\n}\n\nexport default Page404;\n"]}
+{"version":3,"file":"404.js","sourceRoot":"./src/","sources":["Components/404.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC;;;EAGE;AAEF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,GAAwB;IAChC,OAAO,EAAE;QACL,UAAU,EAAE,OAAO;QACnB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;KACX;IACD,IAAI,EAAE;QACF,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,SAAS;QAC1B,eAAe,EAAE,oCAAoC;QACrD,UAAU,EAAE,sCAAsC;QAClD,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,0BAA0B;QACjC,UAAU,EAAE;yCACqB;KACpC;IACD,OAAO,EAAE;QACL,aAAa,EAAE,MAAM;QACrB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE;;;;mCAIe;QAC3B,cAAc,EAAE,UAAU;QAC1B,MAAM,EAAE,EAAE;QACV,WAAW,EAAE;YACT,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,MAAM;YACrB,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,eAAe,EAAE;;;;;;kCAMK;YACtB,gBAAgB,EAAE,WAAW;YAC7B,SAAS,EAAE,8BAA8B;SAC5C;KACJ;IAED,QAAQ,EAAE;QACN,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,WAAW;KAC7B;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,0BAA0B;QACjC,UAAU,EAAE;;6CAEyB;QACrC,WAAW,EAAE;YACT,OAAO,EAAE,MAAM;SAClB;KACJ;IACD,SAAS,EAAE;QACP,KAAK,EAAE,OAAO;KACjB;CACJ,CAAC;AAEF,mCAAmC;AACnC,SAAS,OAAO;IACZ,OAAO,CACH,6BAAK,KAAK,EAAE,MAAM,CAAC,OAAO;QACtB,6BAAK,KAAK,EAAE,MAAM,CAAC,IAAI;YACnB,oBAAC,GAAG,IACA,SAAS,EAAC,KAAK,EACf,EAAE,EAAE,MAAM,CAAC,OAAO;gBAElB,6BAAK,KAAK,EAAE,MAAM,CAAC,QAAQ;oBACvB;wBACK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC;wBACnB,8BAAM,KAAK,EAAE,MAAM,CAAC,SAAS,UAAY,CACxC;oBACL,oBAAC,GAAG,IACA,SAAS,EAAC,GAAG,EACb,EAAE,EAAE,MAAM,CAAC,MAAM,IAEhB,IAAI,CAAC,CAAC,CAAC,+CAA+C,CAAC,CACtD;oBACN,oBAAC,GAAG,IACA,SAAS,EAAC,GAAG,EACb,EAAE,EAAE,MAAM,CAAC,MAAM,IAEhB,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CACrB,CACJ,CACJ,CACJ,CACJ,CACT,CAAC;AACN,CAAC;AAED,eAAe,OAAO,CAAC","sourcesContent":["import React, { type JSX } from 'react';\nimport { Box } from '@mui/material';\n\n/*\nCopyright 2019 Robin Selmer\nhttps://codepen.io/robinselmer/pen/vJjbOZ\n*/\n\nimport { I18n } from '../i18n';\n\nconst styles: Record<string, any> = {\n    content: {\n        background: 'black',\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n    },\n    root: {\n        boxSizing: 'border-box',\n        height: '100%',\n        width: '100%',\n        backgroundColor: '#000000',\n        backgroundImage: 'radial-gradient(#104254 , #05181c)',\n        fontFamily: \"'Inconsolata', Helvetica, sans-serif\",\n        fontSize: '1.5rem',\n        color: 'rgba(128, 175, 255, 0.8)',\n        textShadow: `0 0 1ex rgba(51, 70, 255, 1),\n        0 0 2px rgba(255, 255, 255, 0.8)`,\n    },\n    overlay: {\n        pointerEvents: 'none',\n        width: '100%',\n        height: '100%',\n        background: `repeating-linear-gradient(\n                180deg,\n            rgba(0, 0, 0, 0) 0,\n            rgba(0, 0, 0, 0.3) 50%,\n            rgba(0, 0, 0, 0) 100%)`,\n        backgroundSize: 'auto 4px',\n        zIndex: 99,\n        '&::before': {\n            content: '\"\"',\n            pointerEvents: 'none',\n            position: 'absolute',\n            display: 'block',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: '100%',\n            height: '100%',\n            backgroundImage: `linear-gradient(\n                0deg,\n                transparent 0%,\n                rgba(32, 50, 128, 0.2) 2%,\n                rgba(32, 50, 128, 0.8) 3%,\n                rgba(32, 50, 128, 0.2) 3%,\n                transparent 100%)`,\n            backgroundRepeat: 'no-repeat',\n            animation: 'scan 7.5s linear 0s infinite',\n        },\n    },\n\n    terminal: {\n        boxSizing: 'inherit',\n        position: 'absolute',\n        height: '100%',\n        width: 'calc(100% - 8rem)',\n        maxWidth: '100%',\n        padding: '4rem',\n        textTransform: 'uppercase',\n    },\n    output: {\n        color: 'rgba(128, 175, 255, 0.8)',\n        textShadow: `\n        0 0 1px rgba(51, 70, 255, 0.4),\n            0 0 2px rgba(255, 255, 255, 0.8)`,\n        '&::before': {\n            content: '\"> \"',\n        },\n    },\n    errorCode: {\n        color: 'white',\n    },\n};\n\n/** Generates the 404 error page */\nfunction Page404(): JSX.Element {\n    return (\n        <div style={styles.content}>\n            <div style={styles.root}>\n                <Box\n                    component=\"div\"\n                    sx={styles.overlay}\n                >\n                    <div style={styles.terminal}>\n                        <h1>\n                            {I18n.t('ra_Error')}\n                            <span style={styles.errorCode}>404</span>\n                        </h1>\n                        <Box\n                            component=\"p\"\n                            sx={styles.output}\n                        >\n                            {I18n.t('ra_The page you are looking for was not found')}\n                        </Box>\n                        <Box\n                            component=\"p\"\n                            sx={styles.output}\n                        >\n                            {I18n.t('ra_Good luck')}\n                        </Box>\n                    </div>\n                </Box>\n            </div>\n        </div>\n    );\n}\n\nexport default Page404;\n"]}

package/build/Components/FileBrowser.d.ts

@@ -7,6 +7,7 @@
 import React, { Component, type JSX } from 'react';
 import type { Connection } from '@iobroker/socket-client';
 import type { ThemeName, ThemeType, Translate, IobTheme } from '../types';
+import { type FileViewerProps } from './FileViewer';
 export interface MetaACL extends ioBroker.ObjectACL {
     file: number;
 }
@@ -26,7 +27,7 @@ export interface FileBrowserProps {
     lang: ioBroker.Languages;
     /** The socket connection. */
     socket: Connection;
-    /** Is the component data ready. */
+    /** Shows if the component data ready. */
     ready?: boolean;
     /** Is expert mode enabled? (default: false) */
     expertMode?: boolean;
@@ -72,6 +73,7 @@ export interface FileBrowserProps {
     modalEditOfAccessControl?: (obj: FileBrowserClass) => JSX.Element | null;
     allowNonRestricted?: boolean;
     showTypeSelector?: boolean;
+    FileViewer?: React.FC<FileViewerProps>;
 }
 export interface FolderOrFileItem {
     id: string;

package/build/Components/FileBrowser.js

@@ -1534,7 +1534,8 @@ export class FileBrowserClass extends Component {
         return null;
     }
     renderViewDialog() {
-        return this.state.viewer ? (React.createElement(FileViewer, { supportSubscribes: this.supportSubscribes, key: this.state.viewer, href: this.state.viewer, formatEditFile: this.state.formatEditFile, themeType: this.props.themeType, setStateBackgroundImage: this.setStateBackgroundImage, getStyleBackgroundImage: this.getStyleBackgroundImage, t: this.props.t, socket: this.props.socket, lang: this.props.lang, expertMode: this.state.expertMode, onClose: () => this.setState({ viewer: '', formatEditFile: '' }) })) : null;
+        const FileViewerComponent = this.props.FileViewer || FileViewer;
+        return this.state.viewer ? (React.createElement(FileViewerComponent, { supportSubscribes: this.supportSubscribes, key: this.state.viewer, href: this.state.viewer, formatEditFile: this.state.formatEditFile, themeType: this.props.themeType, setStateBackgroundImage: this.setStateBackgroundImage, getStyleBackgroundImage: this.getStyleBackgroundImage, t: this.props.t, socket: this.props.socket, onClose: () => this.setState({ viewer: '', formatEditFile: '' }) })) : null;
     }
     renderError() {
         if (this.state.errorText) {