@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/Components/FileViewer.tsx

@@ -2,30 +2,18 @@
 // import { Buffer } from 'buffer';
 import React, { Component } from 'react';
 
-import {
-    TextField,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-} from '@mui/material';
+import { TextField, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';
 
 // Icons
 import { FaCopy as CopyIcon } from 'react-icons/fa';
-import {
-    Close as CloseIcon,
-    Save as SaveIcon,
-    Brightness6 as Brightness5Icon,
-} from '@mui/icons-material';
+import { Close as CloseIcon, Save as SaveIcon, Brightness6 as Brightness5Icon } from '@mui/icons-material';
 
 import type { Connection } from '@iobroker/socket-client';
 
 import IconNoIcon from '../icons/IconNoIcon';
 import withWidth from './withWidth';
 import Utils from './Utils';
-import { Translate } from '../types';
+import type { Translate } from '../types';
 import Icon from './Icon';
 // File viewer in adapter-react does not use ace editor
 // import * as ace from 'ace-builds';
@@ -61,13 +49,13 @@ const styles: Record<string, React.CSSProperties> = {
 
 export const EXTENSIONS = {
     images: ['png', 'jpg', 'svg', 'jpeg', 'bmp', 'gif', 'apng', 'avif', 'webp'],
-    code:   ['js', 'json', 'json5', 'md'],
-    txt:    ['log', 'txt', 'html', 'css', 'xml', 'ics'],
-    audio:  ['mp3', 'wav', 'ogg', 'acc'],
-    video:  ['mp4', 'mov', 'avi'],
+    code: ['js', 'json', 'json5', 'md'],
+    txt: ['log', 'txt', 'html', 'css', 'xml', 'ics'],
+    audio: ['mp3', 'wav', 'ogg', 'acc'],
+    video: ['mp4', 'mov', 'avi'],
 };
 
-function bufferToBase64(buffer: Buffer, isFull?: boolean) {
+function bufferToBase64(buffer: Buffer, isFull?: boolean): string {
     let binary = '';
     const bytes = new Uint8Array(buffer);
     const len = bytes.byteLength;
@@ -126,21 +114,25 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
         };
     }
 
-    readFile() {
+    readFile(): void {
         if (this.props.href) {
             const parts = this.props.href.split('/');
             parts.splice(0, 2);
             const adapter = parts[0];
             const name = parts.splice(1).join('/');
 
-            this.props.socket.readFile(adapter, name)
+            this.props.socket
+                .readFile(adapter, name)
                 .then((data: { data: Buffer; type: string } | { file: string; mimeType: string }) => {
-                    let fileData: string = '';
+                    let fileData = '';
                     if ((data as { file: string; mimeType: string }).file !== undefined) {
                         fileData = (data as { file: string; mimeType: string }).file;
                     }
 
-                    const newState: Partial<FileViewerState> = { copyPossible: this.state.copyPossible, ext: this.state.ext };
+                    const newState: Partial<FileViewerState> = {
+                        copyPossible: this.state.copyPossible,
+                        ext: this.state.ext,
+                    };
                     // try to detect valid extension
                     if ((data as { data: Buffer; type: string }).type === 'Buffer') {
                         if (name.toLowerCase().endsWith('.json5')) {
@@ -153,7 +145,9 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
                                 fileData = '';
                             }
                         } else {
-                            const ext = Utils.detectMimeType(bufferToBase64((data as { data: Buffer; type: string }).data));
+                            const ext = Utils.detectMimeType(
+                                bufferToBase64((data as { data: Buffer; type: string }).data),
+                            );
                             if (ext) {
                                 newState.ext = ext;
                                 newState.copyPossible = EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext);
@@ -177,7 +171,7 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
         }
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         this.readFile();
 
         const parts = this.props.href.split('/');
@@ -186,11 +180,13 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
         const name = parts.splice(1).join('/');
 
         if (this.props.supportSubscribes) {
-            this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+            this.props.socket
+                .subscribeFiles(adapter, name, this.onFileChanged)
+                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));
         }
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
         if (this.timeout) {
             clearTimeout(this.timeout);
             this.timeout = null;
@@ -200,11 +196,13 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
         const adapter = parts[0];
         const name = parts.splice(1).join('/');
         if (this.props.supportSubscribes) {
-            this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+            this.props.socket
+                .subscribeFiles(adapter, name, this.onFileChanged)
+                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));
         }
     }
 
-    onFileChanged = (id: string, fileName: string, size: number | null) => {
+    onFileChanged = (_id: string, _fileName: string, size: number | null): void => {
         if (!this.state.changed) {
             if (this.timeout) {
                 clearTimeout(this.timeout);
@@ -223,7 +221,7 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
     };
 
     // eslint-disable-next-line class-methods-use-this
-    writeFile64 = () => {
+    writeFile64 = (): void => {
         /*
         // File viewer in adapter-react does not support write
         const parts = this.props.href.split('/');
@@ -237,7 +235,7 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
         */
     };
 
-    static getEditFile(ext: string | null) {
+    static getEditFile(ext: string | null): 'json' | 'json5' | 'javascript' | 'html' | 'text' {
         switch (ext) {
             case 'json':
                 return 'json';
@@ -255,38 +253,41 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
         }
     }
 
-    getContent() {
+    getContent(): React.JSX.Element | null {
         if (this.state.ext && EXTENSIONS.images.includes(this.state.ext)) {
             if (this.state.imgError) {
                 return <IconNoIcon style={{ ...styles.img, ...this.props.getStyleBackgroundImage() }} />;
             }
-            return <Icon
-                onError={e => {
-                    (e.target as HTMLImageElement).onerror = null;
-                    this.setState({ imgError: true });
-                }}
-                style={{ ...styles.img, ...this.props.getStyleBackgroundImage() }}
-                src={`${this.props.href}?ts=${this.state.forceUpdate}`}
-                alt={this.props.href}
-            />;
+            return (
+                <Icon
+                    onError={e => {
+                        (e.target as HTMLImageElement).onerror = null;
+                        this.setState({ imgError: true });
+                    }}
+                    style={{ ...styles.img, ...this.props.getStyleBackgroundImage() }}
+                    src={`${this.props.href}?ts=${this.state.forceUpdate}`}
+                    alt={this.props.href}
+                />
+            );
         }
         if (this.state.ext && EXTENSIONS.audio.includes(this.state.ext)) {
-            return <div
-                style={{
-                    width: '100%',
-                    height: '100%',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}
-            >
-                {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-                <audio
-                    style={{ width: '100%' }}
-                    src={this.props.href}
-                    controls
-                ></audio>
-            </div>;
+            return (
+                <div
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <audio
+                        style={{ width: '100%' }}
+                        src={this.props.href}
+                        controls
+                    ></audio>
+                </div>
+            );
         }
         if (this.state.ext && EXTENSIONS.video.includes(this.state.ext)) {
             return (
@@ -299,9 +300,14 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
                         alignItems: 'center',
                     }}
                 >
-                    {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-                    <video style={{ width: '100%', height: '100%' }} controls>
-                        <source src={this.props.href} type={`video/${this.state.ext}}`} />
+                    <video
+                        style={{ width: '100%', height: '100%' }}
+                        controls
+                    >
+                        <source
+                            src={this.props.href}
+                            type={`video/${this.state.ext}}`}
+                        />
                     </video>
                 </div>
             );
@@ -314,79 +320,92 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
             //     value={this.state.editingValue || this.state.code || this.state.text}
             //     onChange={this.state.editing ? newValue => this.setState({ editingValue: newValue, changed: true }) : undefined}
             // />;
-            return <TextField
-                variant="standard"
-                style={styles.textarea}
-                multiline
-                value={this.state.editingValue || this.state.code || this.state.text}
-                // onChange={newValue => this.setState({ editingValue: newValue, changed: true })}
-                InputProps={{ readOnly: !this.state.editing }}
-            />;
+            return (
+                <TextField
+                    variant="standard"
+                    style={styles.textarea}
+                    multiline
+                    value={this.state.editingValue || this.state.code || this.state.text}
+                    // onChange={newValue => this.setState({ editingValue: newValue, changed: true })}
+                    slotProps={{
+                        htmlInput: {
+                            readOnly: !this.state.editing,
+                        },
+                    }}
+                />
+            );
         }
         return null;
     }
 
-    render() {
-        return <Dialog
-            sx={{
-                '&.MuiDialog-scrollPaper': styles.dialog,
-                '& .MuiDialog-paper': styles.paper,
-            }}
-            scroll="paper"
-            open={!!this.props.href}
-            onClose={() => this.props.onClose()}
-            fullWidth
-            maxWidth="xl"
-            aria-labelledby="ar_dialog_file_view_title"
-        >
-            <div style={styles.dialogTitle}>
-                <DialogTitle id="ar_dialog_file_view_title">{`${this.props.t(this.state.editing ? 'Edit' : 'View')}: ${this.props.href}`}</DialogTitle>
-                {this.state.ext && EXTENSIONS.images.includes(this.state.ext) && <div>
-                    <IconButton
-                        size="large"
-                        color="inherit"
-                        onClick={this.props.setStateBackgroundImage}
-                    >
-                        <Brightness5Icon />
-                    </IconButton>
-                </div>}
-            </div>
-            <DialogContent style={styles.content}>
-                {this.getContent()}
-            </DialogContent>
-            <DialogActions>
-                {this.state.copyPossible ?
-                    <Button
-                        color="grey"
-                        onClick={e => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            Utils.copyToClipboard(this.state.text || this.state.code || '');
-                        }}
-                        startIcon={<CopyIcon />}
-                    >
-                        {this.props.t('Copy content')}
-                    </Button> : null}
-                {this.state.editing ?
+    render(): React.JSX.Element {
+        return (
+            <Dialog
+                sx={{
+                    '&.MuiDialog-scrollPaper': styles.dialog,
+                    '& .MuiDialog-paper': styles.paper,
+                }}
+                scroll="paper"
+                open={!!this.props.href}
+                onClose={() => this.props.onClose()}
+                fullWidth
+                maxWidth="xl"
+                aria-labelledby="ar_dialog_file_view_title"
+            >
+                <div style={styles.dialogTitle}>
+                    <DialogTitle id="ar_dialog_file_view_title">{`${this.props.t(this.state.editing ? 'Edit' : 'View')}: ${this.props.href}`}</DialogTitle>
+                    {this.state.ext && EXTENSIONS.images.includes(this.state.ext) && (
+                        <div>
+                            <IconButton
+                                size="large"
+                                color="inherit"
+                                onClick={this.props.setStateBackgroundImage}
+                            >
+                                <Brightness5Icon />
+                            </IconButton>
+                        </div>
+                    )}
+                </div>
+                <DialogContent style={styles.content}>{this.getContent()}</DialogContent>
+                <DialogActions>
+                    {this.state.copyPossible ? (
+                        <Button
+                            color="grey"
+                            onClick={e => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                Utils.copyToClipboard(this.state.text || this.state.code || '');
+                            }}
+                            startIcon={<CopyIcon />}
+                        >
+                            {this.props.t('Copy content')}
+                        </Button>
+                    ) : null}
+                    {this.state.editing ? (
+                        <Button
+                            color="grey"
+                            disabled={
+                                this.state.editingValue === this.state.code ||
+                                this.state.editingValue === this.state.text
+                            }
+                            variant="contained"
+                            onClick={this.writeFile64}
+                            startIcon={<SaveIcon />}
+                        >
+                            {this.props.t('Save')}
+                        </Button>
+                    ) : null}
                     <Button
-                        color="grey"
-                        disabled={this.state.editingValue === this.state.code || this.state.editingValue === this.state.text}
                         variant="contained"
-                        onClick={this.writeFile64}
-                        startIcon={<SaveIcon />}
+                        onClick={() => this.props.onClose()}
+                        color="primary"
+                        startIcon={<CloseIcon />}
                     >
-                        {this.props.t('Save')}
-                    </Button> : null}
-                <Button
-                    variant="contained"
-                    onClick={() => this.props.onClose()}
-                    color="primary"
-                    startIcon={<CloseIcon />}
-                >
-                    {this.props.t('Close')}
-                </Button>
-            </DialogActions>
-        </Dialog>;
+                        {this.props.t('Close')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
     }
 }
 

package/src/Components/Icon.tsx

@@ -1,4 +1,4 @@
-import React, { ReactEventHandler } from 'react';
+import React, { type ReactEventHandler } from 'react';
 import SVG from 'react-inlinesvg';
 
 import { Box } from '@mui/material';
@@ -17,6 +17,11 @@ import {
 import IconAlias from '../icons/IconAlias';
 import Utils from './Utils';
 
+/**
+ * Get icon by object type (state, channel, device, ...).
+ *
+ * @param obj Object
+ */
 export function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element | null {
     let icon;
     const id = obj?._id;
@@ -26,7 +31,7 @@ export function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element |
     }
 
     // system or design has special icons
-    if (id.startsWith('_design/') || (id === 'system')) {
+    if (id.startsWith('_design/') || id === 'system') {
         icon = <IconSystem className="iconOwn" />;
     } else if (id === '0_userdata' || id === '0_userdata.0') {
         icon = <IconPhoto className="iconOwn" />;
@@ -51,6 +56,12 @@ export function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element |
     return icon || null;
 }
 
+/**
+ * Get icon from the object.
+ *
+ * @param obj Object
+ * @param imagePrefix Prefix for image
+ */
 export function getSelectIdIcon(obj: ioBroker.Object | null, imagePrefix?: string): string | null {
     imagePrefix = imagePrefix || '.'; // http://localhost:8081';
     let src = '';
@@ -63,7 +74,7 @@ export function getSelectIdIcon(obj: ioBroker.Object | null, imagePrefix?: strin
                 if (cIcon.includes('.')) {
                     let instance;
                     if (obj.type === 'instance' || obj.type === 'adapter') {
-                        src = `${imagePrefix}/adapter/${common.name}/${cIcon}`;
+                        src = `${imagePrefix}/adapter/${common.name as string}/${cIcon}`;
                     } else if (obj._id && obj._id.startsWith('system.adapter.')) {
                         instance = obj._id.split('.', 3);
                         if (cIcon[0] === '/') {
@@ -101,12 +112,15 @@ interface IconProps {
     className?: string;
     /** Style for image */
     style?: React.CSSProperties;
+    /** Styles for mui */
     sx?: Record<string, any>;
     /** Tooltip */
     title?: string;
     /** Styles for utf-8 characters */
     styleUTF8?: React.CSSProperties;
+    /** On error handler */
     onError?: ReactEventHandler<HTMLImageElement>;
+    /** Reference to image */
     ref?: React.RefObject<HTMLImageElement>;
     /** Alternative text for image */
     alt?: string;
@@ -115,39 +129,45 @@ interface IconProps {
 const REMOTE_SERVER = window.location.hostname.endsWith('iobroker.in');
 const REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
 
-export default function Icon(props: IconProps) {
+export default function Icon(props: IconProps): React.JSX.Element | null {
     if (props.src) {
         if (typeof props.src === 'string') {
             if (props.src.length < 3) {
                 // utf-8 char
                 if (props.sx) {
-                    return <Box
-                        component="span"
-                        sx={props.sx}
+                    return (
+                        <Box
+                            component="span"
+                            sx={props.sx}
+                            title={props.title || undefined}
+                            style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}
+                            className={Utils.clsx(props.className, 'iconOwn')}
+                        >
+                            {props.src}
+                        </Box>
+                    );
+                }
+                return (
+                    <span
                         title={props.title || undefined}
                         style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}
                         className={Utils.clsx(props.className, 'iconOwn')}
                     >
                         {props.src}
-                    </Box>;
-                }
-                return <span
-                    title={props.title || undefined}
-                    style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}
-                    className={Utils.clsx(props.className, 'iconOwn')}
-                >
-                    {props.src}
-                </span>;
+                    </span>
+                );
             }
             if (props.src.startsWith('data:image/svg')) {
-                return <SVG
-                    title={props.title || undefined}
-                    src={props.src}
-                    className={Utils.clsx(props.className, 'iconOwn')}
-                    width={props.style?.width || 28}
-                    height={props.style?.height || props.style?.width || 28}
-                    style={props.style || {}}
-                />;
+                return (
+                    <SVG
+                        title={props.title || undefined}
+                        src={props.src}
+                        className={Utils.clsx(props.className, 'iconOwn')}
+                        width={props.style?.width || 28}
+                        height={props.style?.height || props.style?.width || 28}
+                        style={props.style || {}}
+                    />
+                );
             }
             if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {
                 let src = props.src;
@@ -158,9 +178,22 @@ export default function Icon(props: IconProps) {
                 }
 
                 if (props.sx) {
-                    return <Box
-                        component="img"
-                        sx={props.sx}
+                    return (
+                        <Box
+                            component="img"
+                            sx={props.sx}
+                            title={props.title || undefined}
+                            style={props.style || {}}
+                            className={Utils.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 (
+                    <img
                         title={props.title || undefined}
                         style={props.style || {}}
                         className={Utils.clsx(props.className, 'iconOwn')}
@@ -168,22 +201,26 @@ export default function Icon(props: IconProps) {
                         alt={props.alt || undefined}
                         ref={props.ref}
                         onError={e => props.onError && props.onError(e)}
-                    />;
-                }
-                return <img
-                    title={props.title || undefined}
-                    style={props.style || {}}
-                    className={Utils.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 <Box
-                    component="img"
-                    sx={props.sx}
+                return (
+                    <Box
+                        component="img"
+                        sx={props.sx}
+                        title={props.title || undefined}
+                        style={props.style || {}}
+                        className={Utils.clsx(props.className, 'iconOwn')}
+                        src={props.src}
+                        alt={props.alt || undefined}
+                        ref={props.ref}
+                        onError={props.onError}
+                    />
+                );
+            }
+            return (
+                <img
                     title={props.title || undefined}
                     style={props.style || {}}
                     className={Utils.clsx(props.className, 'iconOwn')}
@@ -191,17 +228,8 @@ export default function Icon(props: IconProps) {
                     alt={props.alt || undefined}
                     ref={props.ref}
                     onError={props.onError}
-                />;
-            }
-            return <img
-                title={props.title || undefined}
-                style={props.style || {}}
-                className={Utils.clsx(props.className, 'iconOwn')}
-                src={props.src}
-                alt={props.alt || undefined}
-                ref={props.ref}
-                onError={props.onError}
-            />;
+                />
+            );
         }
 
         return props.src;