@iobroker/adapter-react-v5 7.2.3 → 7.2.6

package/src/Components/FileViewer.tsx

@@ -1,412 +0,0 @@
-// File viewer in adapter-react does not support write
-// import { Buffer } from 'buffer';
-import React, { Component } from 'react';
-
-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 type { Connection } from '@iobroker/socket-client';
-
-import IconNoIcon from '../icons/IconNoIcon';
-import withWidth from './withWidth';
-import Utils from './Utils';
-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';
-// import 'ace-builds/src-noconflict/ext-modelist';
-// import Editor from './Editor';
-
-// const modelist = ace.require('ace/ext/modelist');
-
-const styles: Record<string, React.CSSProperties> = {
-    dialog: {
-        height: '100%',
-    },
-    paper: {
-        height: 'calc(100% - 64px)',
-    },
-    content: {
-        textAlign: 'center',
-    },
-    textarea: {
-        width: '100%',
-        height: '100%',
-    },
-    img: {
-        width: 'auto',
-        height: 'calc(100% - 5px)',
-        objectFit: 'contain',
-    },
-    dialogTitle: {
-        justifyContent: 'space-between',
-        display: 'flex',
-    },
-};
-
-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'],
-};
-
-function bufferToBase64(buffer: Buffer, isFull?: boolean): string {
-    let binary = '';
-    const bytes = new Uint8Array(buffer);
-    const len = bytes.byteLength;
-    for (let i = 0; i < len && (isFull || i < 50); i++) {
-        binary += String.fromCharCode(bytes[i]);
-    }
-    return window.btoa(binary);
-}
-
-interface FileViewerProps {
-    /** Translation function */
-    t: Translate;
-    /** Callback when the viewer is closed. */
-    onClose: () => void;
-    /** The URL (file path) to the file to be displayed. */
-    href: string;
-    // formatEditFile?: string;
-    socket: Connection;
-    setStateBackgroundImage: () => void;
-    // themeType: ThemeType;
-    getStyleBackgroundImage: () => React.CSSProperties | null;
-    /** Flag is the js-controller support subscribe on file */
-    supportSubscribes?: boolean;
-}
-
-interface FileViewerState {
-    text: string | null;
-    code: string | null;
-    ext: string | null;
-    editing: boolean;
-    editingValue: string | null;
-    copyPossible: boolean;
-    forceUpdate: number;
-    changed: boolean;
-    imgError: boolean;
-}
-
-class FileViewer extends Component<FileViewerProps, FileViewerState> {
-    private timeout: ReturnType<typeof setTimeout> | null = null;
-
-    constructor(props: FileViewerProps) {
-        super(props);
-        const ext = Utils.getFileExtension(props.href);
-
-        this.state = {
-            text: null,
-            code: null,
-            ext,
-            // File viewer in adapter-react does not support write
-            editing: /* !!this.props.formatEditFile || */ false,
-            editingValue: null,
-            copyPossible: !!ext && (EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext)),
-            forceUpdate: Date.now(),
-            changed: false,
-            imgError: false,
-        };
-    }
-
-    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)
-                .then((data: { data: Buffer; type: string } | { file: string; mimeType: 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,
-                    };
-                    // try to detect valid extension
-                    if ((data as { data: Buffer; type: string }).type === 'Buffer') {
-                        if (name.toLowerCase().endsWith('.json5')) {
-                            newState.ext = 'json5';
-                            newState.copyPossible = true;
-                            try {
-                                fileData = atob(bufferToBase64((data as { data: Buffer; type: string }).data, true));
-                            } catch {
-                                console.error('Cannot convert base64 to string');
-                                fileData = '';
-                            }
-                        } else {
-                            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);
-                            }
-                        }
-                    }
-
-                    if (newState.copyPossible) {
-                        if (newState.ext && EXTENSIONS.txt.includes(newState.ext)) {
-                            newState.text = fileData;
-                            newState.editingValue = fileData;
-                        } else if (newState.ext && EXTENSIONS.code.includes(newState.ext)) {
-                            newState.code = fileData;
-                            newState.editingValue = fileData;
-                        }
-                    }
-
-                    this.setState(newState as FileViewerState);
-                })
-                .catch(e => window.alert(`Cannot read file: ${e}`));
-        }
-    }
-
-    componentDidMount(): void {
-        this.readFile();
-
-        const parts = this.props.href.split('/');
-        parts.splice(0, 2);
-        const adapter = parts[0];
-        const name = parts.splice(1).join('/');
-
-        if (this.props.supportSubscribes) {
-            this.props.socket
-                .subscribeFiles(adapter, name, this.onFileChanged)
-                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));
-        }
-    }
-
-    componentWillUnmount(): void {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-            this.timeout = null;
-        }
-        const parts = this.props.href.split('/');
-        parts.splice(0, 2);
-        const adapter = parts[0];
-        const name = parts.splice(1).join('/');
-        if (this.props.supportSubscribes) {
-            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): void => {
-        if (!this.state.changed) {
-            if (this.timeout) {
-                clearTimeout(this.timeout);
-            }
-            this.timeout = setTimeout(() => {
-                this.timeout = null;
-                if (size === null) {
-                    window.alert('Show file was deleted!');
-                } else if (this.state.text !== null || this.state.code !== null) {
-                    this.readFile();
-                } else {
-                    this.setState({ forceUpdate: Date.now() });
-                }
-            }, 300);
-        }
-    };
-
-    // eslint-disable-next-line class-methods-use-this
-    writeFile64 = (): void => {
-        /*
-        // File viewer in adapter-react does not support write
-        const parts = this.props.href.split('/');
-        const data = this.state.editingValue;
-        parts.splice(0, 2);
-        const adapter = parts[0];
-        const name = parts.splice(1).join('/');
-        this.props.socket.writeFile64(adapter, name, Buffer.from(data).toString('base64'))
-            .then(() => this.props.onClose())
-            .catch(e => window.alert(`Cannot write file: ${e}`));
-        */
-    };
-
-    static getEditFile(ext: string | null): 'json' | 'json5' | 'javascript' | 'html' | 'text' {
-        switch (ext) {
-            case 'json':
-                return 'json';
-            case 'json5':
-                return 'json5';
-            case 'js':
-                return 'javascript';
-            case 'html':
-                return 'html';
-            case 'txt':
-                return 'html';
-            default:
-                // e.g. ace/mode/text
-                return 'text';
-        }
-    }
-
-    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}
-                />
-            );
-        }
-        if (this.state.ext && EXTENSIONS.audio.includes(this.state.ext)) {
-            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 (
-                <div
-                    style={{
-                        width: '100%',
-                        height: '100%',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }}
-                >
-                    <video
-                        style={{ width: '100%', height: '100%' }}
-                        controls
-                    >
-                        <source
-                            src={this.props.href}
-                            type={`video/${this.state.ext}}`}
-                        />
-                    </video>
-                </div>
-            );
-        }
-        if (this.state.code !== null || this.state.text !== null || this.state.editing) {
-            // File viewer in adapter-react does not support write
-            // return <Editor
-            //     mode={FileViewer.getEditFile(this.props.formatEditFile)}
-            //     themeType={this.props.themeType}
-            //     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 })}
-                    slotProps={{
-                        htmlInput: {
-                            readOnly: !this.state.editing,
-                        },
-                    }}
-                />
-            );
-        }
-        return null;
-    }
-
-    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
-                        variant="contained"
-                        onClick={() => this.props.onClose()}
-                        color="primary"
-                        startIcon={<CloseIcon />}
-                    >
-                        {this.props.t('Close')}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        );
-    }
-}
-
-export default withWidth()(FileViewer);

package/src/Components/Icon.tsx

@@ -1,238 +0,0 @@
-import React, { type ReactEventHandler } from 'react';
-import SVG from 'react-inlinesvg';
-
-import { Box } from '@mui/material';
-
-import {
-    SettingsApplications as IconSystem,
-    Photo as IconPhoto,
-    SupervisedUserCircle as IconGroup,
-    PersonOutlined as IconUser,
-    Router as IconHost,
-    Wifi as IconConnection,
-    Info as IconInfo,
-    Description as IconMeta,
-} from '@mui/icons-material';
-
-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;
-
-    if (!id) {
-        return null;
-    }
-
-    // system or design has special icons
-    if (id.startsWith('_design/') || id === 'system') {
-        icon = <IconSystem className="iconOwn" />;
-    } else if (id === '0_userdata' || id === '0_userdata.0') {
-        icon = <IconPhoto className="iconOwn" />;
-    } else if (id === 'alias' || id === 'alias.0') {
-        icon = <IconAlias className="iconOwn" />;
-    } else if (id === 'system.adapter') {
-        icon = <IconSystem className="iconOwn" />;
-    } else if (id === 'system.group') {
-        icon = <IconGroup className="iconOwn" />;
-    } else if (id === 'system.user') {
-        icon = <IconUser className="iconOwn" />;
-    } else if (id === 'system.host') {
-        icon = <IconHost className="iconOwn" />;
-    } else if (id.endsWith('.connection') || id.endsWith('.connected')) {
-        icon = <IconConnection className="iconOwn" />;
-    } else if (id.endsWith('.info')) {
-        icon = <IconInfo className="iconOwn" />;
-    } else if (obj?.type === 'meta') {
-        icon = <IconMeta className="iconOwn" />;
-    }
-
-    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 = '';
-    const common = obj?.common;
-
-    if (common) {
-        const cIcon = common.icon;
-        if (cIcon) {
-            if (!cIcon.startsWith('data:image/')) {
-                if (cIcon.includes('.')) {
-                    let instance;
-                    if (obj.type === 'instance' || obj.type === 'adapter') {
-                        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] === '/') {
-                            instance[2] += cIcon;
-                        } else {
-                            instance[2] += `/${cIcon}`;
-                        }
-                        src = `${imagePrefix}/adapter/${instance[2]}`;
-                    } else {
-                        instance = obj._id.split('.', 2);
-                        if (cIcon[0] === '/') {
-                            instance[0] += cIcon;
-                        } else {
-                            instance[0] += `/${cIcon}`;
-                        }
-                        src = `${imagePrefix}/adapter/${instance[0]}`;
-                    }
-                } else {
-                    return null;
-                }
-            } else {
-                // base 64 image
-                src = cIcon;
-            }
-        }
-    }
-
-    return src || null;
-}
-
-interface IconProps {
-    /** URL, UTF-8 character, or svg code (data:image/svg...) */
-    src: string | React.JSX.Element | null | undefined;
-    /** Class name */
-    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;
-}
-
-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): 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}
-                            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>
-                );
-            }
-            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 || {}}
-                    />
-                );
-            }
-            if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {
-                let src = props.src;
-                if (src.startsWith('./')) {
-                    src = REMOTE_PREFIX + src.substring(2);
-                } else if (!src.startsWith('/')) {
-                    src = REMOTE_PREFIX + src;
-                }
-
-                if (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')}
-                        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}
-                        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')}
-                    src={props.src}
-                    alt={props.alt || undefined}
-                    ref={props.ref}
-                    onError={props.onError}
-                />
-            );
-        }
-
-        return props.src;
-    }
-    return null;
-}