@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/Dialogs/SelectFile.tsx

@@ -5,26 +5,17 @@
  *
  */
 // please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
-import React from 'react';
+import React, { type JSX } from 'react';
 
-import {
-    Button,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Dialog,
-} from '@mui/material';
+import { Button, DialogTitle, DialogContent, DialogActions, Dialog } from '@mui/material';
 
-import {
-    Cancel as IconCancel,
-    Check as IconOk,
-} from '@mui/icons-material';
+import { Cancel as IconCancel, Check as IconOk } from '@mui/icons-material';
 
 import type { Connection } from '@iobroker/socket-client';
 
 import I18n from '../i18n';
 import FileBrowser from '../Components/FileBrowser';
-import { IobTheme } from '../types';
+import type { IobTheme } from '../types';
 
 const styles: Record<string, React.CSSProperties> = {
     headerID: {
@@ -67,7 +58,7 @@ interface DialogSelectFileProps {
     multiSelect?: boolean;
     /** Image prefix. Normally, admin has '../..' and the web has '../' */
     imagePrefix?: string; // Prefix (default: '.')
-    /** @deprectaed Image prefix */
+    /** @deprecated Image prefix */
     prefix?: string;
     /** Show the expert button? */
     showExpertButton?: boolean;
@@ -115,11 +106,11 @@ interface DialogSelectFileProps {
     filters?: Record<string, string>;
     /** Allow switch views Table<=>Rows */
     showViewTypeButton?: boolean;
-     /** If type selector should be shown */
+    /** If type selector should be shown */
     showTypeSelector?: boolean;
-     /** If defined, allow selecting only files from this folder */
+    /** If defined, allow selecting only files from this folder */
     restrictToFolder?: string;
-     /** If restrictToFolder defined, allow selecting files outside of this folder */
+    /** If restrictToFolder defined, allow selecting files outside of this folder */
     allowNonRestricted?: boolean;
     /** force expert mode */
     expertMode?: boolean;
@@ -145,7 +136,7 @@ class DialogSelectFile extends React.Component<DialogSelectFileProps, DialogSele
 
         try {
             this.filters = JSON.parse(filters);
-        } catch (e) {
+        } catch {
             this.filters = {};
         }
 
@@ -161,21 +152,25 @@ class DialogSelectFile extends React.Component<DialogSelectFileProps, DialogSele
         }
         selected = selected.filter(id => id);
 
-        this.state =  {
+        this.state = {
             selected,
         };
     }
 
-    handleCancel() {
+    handleCancel(): void {
         this.props.onClose();
     }
 
-    handleOk() {
-        this.props.onOk(this.props.multiSelect || !Array.isArray(this.state.selected) ? this.state.selected : this.state.selected[0] || '');
+    handleOk(): void {
+        this.props.onOk(
+            this.props.multiSelect || !Array.isArray(this.state.selected)
+                ? this.state.selected
+                : this.state.selected[0] || '',
+        );
         this.props.onClose();
     }
 
-    render() {
+    render(): JSX.Element {
         let title;
         if (this.state.selected.length) {
             if (!Array.isArray(this.state.selected) || this.state.selected.length === 1) {
@@ -184,7 +179,10 @@ class DialogSelectFile extends React.Component<DialogSelectFileProps, DialogSele
                         {I18n.t('ra_Selected')}
                         &nbsp;
                     </span>,
-                    <span key="id" style={styles.headerID}>
+                    <span
+                        key="id"
+                        style={styles.headerID}
+                    >
                         {this.state.selected}
                     </span>,
                 ];
@@ -194,7 +192,10 @@ class DialogSelectFile extends React.Component<DialogSelectFileProps, DialogSele
                         {I18n.t('ra_Selected')}
                         &nbsp;
                     </span>,
-                    <span key="id" style={styles.headerID}>
+                    <span
+                        key="id"
+                        style={styles.headerID}
+                    >
                         {I18n.t('%s items', this.state.selected.length)}
                     </span>,
                 ];
@@ -203,67 +204,76 @@ class DialogSelectFile extends React.Component<DialogSelectFileProps, DialogSele
             title = this.props.title || I18n.t('ra_Please select file...');
         }
 
-        return <Dialog
-            onClose={() => {}}
-            maxWidth={false}
-            sx={{ '& .MuiDialog-paper': { ...styles.dialog, ...styles.dialogMobile } }}
-            fullWidth
-            open={!0}
-            aria-labelledby="ar_dialog_selectfile_title"
-        >
-            <DialogTitle id="ar_dialog_selectfile_title" sx={{ '&.MuiDialogTitle-root': styles.titleRoot }}>{title}</DialogTitle>
-            <DialogContent style={{ ...styles.content, ...styles.contentMobile }}>
-                <FileBrowser
-                    ready
-                    imagePrefix={this.props.imagePrefix || this.props.prefix || '../'} // prefix is for back compatibility
-                    allowUpload={!!this.props.allowUpload}
-                    allowDownload={this.props.allowDownload !== false}
-                    allowCreateFolder={!!this.props.allowCreateFolder}
-                    allowDelete={!!this.props.allowDelete}
-                    allowView={this.props.allowView !== false}
-                    showViewTypeButton={this.props.showViewTypeButton !== false}
-                    showToolbar={this.props.showToolbar !== false}
-                    limitPath={this.props.limitPath}
-                    filterFiles={this.props.filterFiles}
-                    filterByType={this.props.filterByType}
-                    selected={this.props.selected}
-                    restrictToFolder={this.props.restrictToFolder}
-                    allowNonRestricted={this.props.allowNonRestricted}
-                    onSelect={(selected: string | string[], isDoubleClick?: boolean, isFolder?: boolean) => {
-                        this.setState({ selected: Array.isArray(selected) ? selected : [selected] }, () =>
-                            isDoubleClick && (!this.props.selectOnlyFolders || isFolder) && this.handleOk());
-                    }}
-                    t={this.props.t || I18n.t}
-                    lang={this.props.lang || I18n.getLanguage()}
-                    socket={this.props.socket}
-                    themeType={this.props.themeType}
-                    themeName={this.props.themeName}
-                    theme={this.props.theme}
-                    showExpertButton={this.props.showExpertButton}
-                    expertMode={this.props.expertMode}
-                    showTypeSelector={this.props.showTypeSelector}
-                />
-            </DialogContent>
-            <DialogActions>
-                <Button
-                    variant="contained"
-                    onClick={() => this.handleOk()}
-                    startIcon={<IconOk />}
-                    disabled={!this.state.selected.length}
-                    color="primary"
+        return (
+            <Dialog
+                onClose={() => {}}
+                maxWidth={false}
+                sx={{ '& .MuiDialog-paper': { ...styles.dialog, ...styles.dialogMobile } }}
+                fullWidth
+                open={!0}
+                aria-labelledby="ar_dialog_selectfile_title"
+            >
+                <DialogTitle
+                    id="ar_dialog_selectfile_title"
+                    sx={{ '&.MuiDialogTitle-root': styles.titleRoot }}
                 >
-                    {this.props.ok || I18n.t('ra_Ok')}
-                </Button>
-                <Button
-                    color="grey"
-                    variant="contained"
-                    onClick={() => this.handleCancel()}
-                    startIcon={<IconCancel />}
-                >
-                    {this.props.cancel || I18n.t('ra_Cancel')}
-                </Button>
-            </DialogActions>
-        </Dialog>;
+                    {title}
+                </DialogTitle>
+                <DialogContent style={{ ...styles.content, ...styles.contentMobile }}>
+                    <FileBrowser
+                        ready
+                        imagePrefix={this.props.imagePrefix || this.props.prefix || '../'} // prefix is for back compatibility
+                        allowUpload={!!this.props.allowUpload}
+                        allowDownload={this.props.allowDownload !== false}
+                        allowCreateFolder={!!this.props.allowCreateFolder}
+                        allowDelete={!!this.props.allowDelete}
+                        allowView={this.props.allowView !== false}
+                        showViewTypeButton={this.props.showViewTypeButton !== false}
+                        showToolbar={this.props.showToolbar !== false}
+                        limitPath={this.props.limitPath}
+                        filterFiles={this.props.filterFiles}
+                        filterByType={this.props.filterByType}
+                        selected={this.props.selected}
+                        restrictToFolder={this.props.restrictToFolder}
+                        allowNonRestricted={this.props.allowNonRestricted}
+                        onSelect={(selected: string | string[], isDoubleClick?: boolean, isFolder?: boolean) => {
+                            this.setState(
+                                { selected: Array.isArray(selected) ? selected : [selected] },
+                                () => isDoubleClick && (!this.props.selectOnlyFolders || isFolder) && this.handleOk(),
+                            );
+                        }}
+                        t={this.props.t || I18n.t}
+                        lang={this.props.lang || I18n.getLanguage()}
+                        socket={this.props.socket}
+                        themeType={this.props.themeType}
+                        themeName={this.props.themeName}
+                        theme={this.props.theme}
+                        showExpertButton={this.props.showExpertButton}
+                        expertMode={this.props.expertMode}
+                        showTypeSelector={this.props.showTypeSelector}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        variant="contained"
+                        onClick={() => this.handleOk()}
+                        startIcon={<IconOk />}
+                        disabled={!this.state.selected.length}
+                        color="primary"
+                    >
+                        {this.props.ok || I18n.t('ra_Ok')}
+                    </Button>
+                    <Button
+                        color="grey"
+                        variant="contained"
+                        onClick={() => this.handleCancel()}
+                        startIcon={<IconCancel />}
+                    >
+                        {this.props.cancel || I18n.t('ra_Cancel')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
     }
 }
 

package/src/Dialogs/SelectID.tsx

@@ -3,29 +3,20 @@
  *
  * MIT License
  *
- * */
+ */
 // please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 
-import {
-    Button,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Dialog,
-} from '@mui/material';
+import { Button, DialogTitle, DialogContent, DialogActions, Dialog } from '@mui/material';
 
-import {
-    Cancel as IconCancel,
-    Check as IconOk,
-} from '@mui/icons-material';
+import { Cancel as IconCancel, Check as IconOk } from '@mui/icons-material';
 
 import type Connection from '../Connection';
 
 import I18n from '../i18n';
-import ObjectBrowser, { ObjectBrowserFilter } from '../Components/ObjectBrowser';
-import { ObjectBrowserColumn, ObjectBrowserCustomFilter, ObjectBrowserType } from '../Components/types';
-import { IobTheme } from '../types';
+import ObjectBrowser, { type ObjectBrowserFilter } from '../Components/ObjectBrowser';
+import type { ObjectBrowserColumn, ObjectBrowserCustomFilter, ObjectBrowserType } from '../Components/types';
+import type { IobTheme } from '../types';
 
 export interface SelectIDFilters {
     id?: string;
@@ -48,7 +39,7 @@ interface DialogSelectIDProps {
     foldersFirst?: boolean;
     /** Path prefix for images (default: '.') */
     imagePrefix?: string;
-    /** @deprecated: same as imagePrefix */
+    /** @deprecated same as imagePrefix */
     prefix?: string;
     /** Show the expert button */
     showExpertButton?: boolean;
@@ -86,10 +77,12 @@ interface DialogSelectIDProps {
     onClose: () => void;
     /** Handler that is called when the user presses OK. */
     onOk: (selected: string | string[] | undefined, name: string) => void;
-    /** Function to filter out all unnecessary objects. Can be string or function.
-       It cannot be used together with "types".
-       Example for function: `obj => obj.common?.type === 'boolean'` to show only boolean states
-       In case of string, it must look like `obj.common && obj.common.type === 'boolean'` */
+    /**
+     * Function to filter out all unnecessary objects. Can be string or function.
+     * It cannot be used together with "types".
+     * Example for function: `obj => obj.common?.type === 'boolean'` to show only boolean states
+     * In case of string, it must look like `obj.common && obj.common.type === 'boolean'`
+     */
     filterFunc?: string | ((obj: ioBroker.Object) => boolean);
     /** predefined filter fields, like {"id":"","name":"","room":"","func":"","role":"level","type":"","custom":""} */
     filters?: SelectIDFilters;
@@ -118,7 +111,7 @@ class DialogSelectID extends Component<DialogSelectIDProps, DialogSelectIDState>
 
         try {
             this.filters = JSON.parse(filters);
-        } catch (e) {
+        } catch {
             this.filters = {};
         }
 
@@ -135,9 +128,8 @@ class DialogSelectID extends Component<DialogSelectIDProps, DialogSelectIDState>
         if (props.filterFunc) {
             if (typeof props.filterFunc === 'string') {
                 try {
-                    // eslint-disable-next-line no-new-func
                     this.filterFunc = new Function('obj', props.filterFunc) as (obj: ioBroker.Object) => boolean;
-                } catch (e) {
+                } catch {
                     console.error(`Cannot parse filter function: "obj => ${props.filterFunc}"`);
                     this.filterFunc = undefined;
                 }
@@ -146,22 +138,22 @@ class DialogSelectID extends Component<DialogSelectIDProps, DialogSelectIDState>
             }
         }
 
-        this.state =  {
+        this.state = {
             selected,
             name: '',
         };
     }
 
-    handleCancel() {
+    handleCancel(): void {
         this.props.onClose();
     }
 
-    handleOk() {
+    handleOk(): void {
         this.props.onOk(this.props.multiSelect ? this.state.selected : this.state.selected[0] || '', this.state.name);
         this.props.onClose();
     }
 
-    render() {
+    render(): JSX.Element {
         let title;
         if (this.state.name || this.state.selected.length) {
             if (this.state.selected.length === 1) {
@@ -170,8 +162,12 @@ class DialogSelectID extends Component<DialogSelectIDProps, DialogSelectIDState>
                         {I18n.t('ra_Selected')}
                         &nbsp;
                     </span>,
-                    <span key="id" style={{ fontWeight: 'bold', fontStyle: 'italic' }}>
-                        {(this.state.name || this.state.selected) + (this.state.name ? ` [${this.state.selected}]` : '')}
+                    <span
+                        key="id"
+                        style={{ fontWeight: 'bold', fontStyle: 'italic' }}
+                    >
+                        {(this.state.name || this.state.selected[0]) +
+                            (this.state.name ? ` [${this.state.selected[0]}]` : '')}
                     </span>,
                 ];
             } else {
@@ -180,7 +176,10 @@ class DialogSelectID extends Component<DialogSelectIDProps, DialogSelectIDState>
                         {I18n.t('ra_Selected')}
                         &nbsp;
                     </span>,
-                    <span key="id" style={{ fontWeight: 'bold', fontStyle: 'italic' }}>
+                    <span
+                        key="id"
+                        style={{ fontWeight: 'bold', fontStyle: 'italic' }}
+                    >
                         {I18n.t('%s items', this.state.selected.length.toString())}
                     </span>,
                 ];
@@ -189,109 +188,122 @@ class DialogSelectID extends Component<DialogSelectIDProps, DialogSelectIDState>
             title = this.props.title || I18n.t('ra_Please select object ID...');
         }
 
-        return <Dialog
-            onClose={() => {}}
-            maxWidth={false}
-            sx={{
-                '& .MuiDialog-paper': {
-                    height: '95%',
-                    p: '4px',
-                    width: '100%',
-                    maxWidth: '100%',
-                    maxHeight: 'calc(100% - 16px)',
-                },
-            }}
-            fullWidth
-            open={!0}
-            aria-labelledby="ar_dialog_selectid_title"
-        >
-            <DialogTitle
-                id="ar_dialog_selectid_title"
-                style={{
-                    whiteSpace: 'nowrap',
-                    width: 'calc(100% - 72px)',
-                    overflow: 'hidden',
-                    display: 'inline-block',
-                    textOverflow: 'ellipsis',
+        return (
+            <Dialog
+                onClose={() => {}}
+                maxWidth={false}
+                sx={{
+                    '& .MuiDialog-paper': {
+                        height: '95%',
+                        p: '4px',
+                        width: '100%',
+                        maxWidth: '100%',
+                        maxHeight: 'calc(100% - 16px)',
+                    },
                 }}
+                fullWidth
+                open={!0}
+                aria-labelledby="ar_dialog_selectid_title"
             >
-                {title}
-            </DialogTitle>
-            <DialogContent
-                style={{
-                    height: '100%',
-                    overflow: 'hidden',
-                    padding: '8px 4px',
-                }}
-            >
-                <ObjectBrowser
-                    foldersFirst={this.props.foldersFirst}
-                    imagePrefix={this.props.imagePrefix || this.props.prefix} // prefix is for back compatibility
-                    dateFormat={this.props.dateFormat}
-                    defaultFilters={this.filters}
-                    dialogName={this.dialogName}
-                    isFloatComma={this.props.isFloatComma}
-                    showExpertButton={this.props.showExpertButton !== undefined ? this.props.showExpertButton : true}
-                    expertMode={this.props.expertMode}
-                    // style={{ width: '100%', height: '100%' }}
-                    columns={this.props.columns || ['name', 'type', 'role', 'room', 'func', 'val']}
-                    types={this.props.types ? (Array.isArray(this.props.types) ? this.props.types : [this.props.types]) : ['state']}
-                    root={this.props.root}
-                    t={I18n.t}
-                    lang={this.props.lang || I18n.getLanguage()}
-                    socket={this.props.socket}
-                    selected={this.state.selected}
-                    multiSelect={this.props.multiSelect}
-                    notEditable={this.props.notEditable === undefined ? true : this.props.notEditable}
-                    // name={this.state.name}
-                    themeName={this.props.themeName}
-                    themeType={this.props.themeType}
-                    theme={this.props.theme}
-                    customFilter={this.props.customFilter}
-                    onFilterChanged={(filterConfig: ObjectBrowserFilter) => {
-                        this.filters = filterConfig;
-                        ((window as any)._localStorage || window.localStorage).setItem(this.dialogName, JSON.stringify(filterConfig));
-                    }}
-                    onSelect={(_selected: string | string[], name: string, isDouble?: boolean) => {
-                        let selected: string[];
-                        if (!Array.isArray(_selected)) {
-                            selected = [_selected];
-                        } else {
-                            selected = _selected;
-                        }
-                        if (JSON.stringify(selected) !== JSON.stringify(this.state.selected)) {
-                            this.setState({ selected, name }, () => isDouble && this.handleOk());
-                        } else if (isDouble) {
-                            this.handleOk();
-                        }
+                <DialogTitle
+                    id="ar_dialog_selectid_title"
+                    style={{
+                        whiteSpace: 'nowrap',
+                        width: 'calc(100% - 72px)',
+                        overflow: 'hidden',
+                        display: 'inline-block',
+                        textOverflow: 'ellipsis',
                     }}
-                    filterFunc={this.filterFunc}
-                    title=""
-                    classes={{ }}
-                />
-            </DialogContent>
-            <DialogActions>
-                <Button
-                    id={`ar_dialog_selectid_ok_${this.props.dialogName || ''}`}
-                    variant="contained"
-                    onClick={() => this.handleOk()}
-                    startIcon={<IconOk />}
-                    disabled={!this.state.selected.length}
-                    color="primary"
                 >
-                    {this.props.ok || I18n.t('ra_Ok')}
-                </Button>
-                <Button
-                    id={`ar_dialog_selectid_cancel_${this.props.dialogName || ''}`}
-                    color="grey"
-                    variant="contained"
-                    onClick={() => this.handleCancel()}
-                    startIcon={<IconCancel />}
+                    {title}
+                </DialogTitle>
+                <DialogContent
+                    style={{
+                        height: '100%',
+                        overflow: 'hidden',
+                        padding: '8px 4px',
+                    }}
                 >
-                    {this.props.cancel || I18n.t('ra_Cancel')}
-                </Button>
-            </DialogActions>
-        </Dialog>;
+                    <ObjectBrowser
+                        foldersFirst={this.props.foldersFirst}
+                        imagePrefix={this.props.imagePrefix || this.props.prefix} // prefix is for back compatibility
+                        dateFormat={this.props.dateFormat}
+                        defaultFilters={this.filters}
+                        dialogName={this.dialogName}
+                        isFloatComma={this.props.isFloatComma}
+                        showExpertButton={
+                            this.props.showExpertButton !== undefined ? this.props.showExpertButton : true
+                        }
+                        expertMode={this.props.expertMode}
+                        // style={{ width: '100%', height: '100%' }}
+                        columns={this.props.columns || ['name', 'type', 'role', 'room', 'func', 'val']}
+                        types={
+                            this.props.types
+                                ? Array.isArray(this.props.types)
+                                    ? this.props.types
+                                    : [this.props.types]
+                                : ['state']
+                        }
+                        root={this.props.root}
+                        t={I18n.t}
+                        lang={this.props.lang || I18n.getLanguage()}
+                        socket={this.props.socket}
+                        selected={this.state.selected}
+                        multiSelect={this.props.multiSelect}
+                        notEditable={this.props.notEditable === undefined ? true : this.props.notEditable}
+                        // name={this.state.name}
+                        themeName={this.props.themeName}
+                        themeType={this.props.themeType}
+                        theme={this.props.theme}
+                        customFilter={this.props.customFilter}
+                        onFilterChanged={(filterConfig: ObjectBrowserFilter) => {
+                            this.filters = filterConfig;
+                            ((window as any)._localStorage || window.localStorage).setItem(
+                                this.dialogName,
+                                JSON.stringify(filterConfig),
+                            );
+                        }}
+                        onSelect={(_selected: string | string[], name: string, isDouble?: boolean) => {
+                            let selected: string[];
+                            if (!Array.isArray(_selected)) {
+                                selected = [_selected];
+                            } else {
+                                selected = _selected;
+                            }
+                            if (JSON.stringify(selected) !== JSON.stringify(this.state.selected)) {
+                                this.setState({ selected, name }, () => isDouble && this.handleOk());
+                            } else if (isDouble) {
+                                this.handleOk();
+                            }
+                        }}
+                        filterFunc={this.filterFunc}
+                        title=""
+                        classes={{}}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        id={`ar_dialog_selectid_ok_${this.props.dialogName || ''}`}
+                        variant="contained"
+                        onClick={() => this.handleOk()}
+                        startIcon={<IconOk />}
+                        disabled={!this.state.selected.length}
+                        color="primary"
+                    >
+                        {this.props.ok || I18n.t('ra_Ok')}
+                    </Button>
+                    <Button
+                        id={`ar_dialog_selectid_cancel_${this.props.dialogName || ''}`}
+                        color="grey"
+                        variant="contained"
+                        onClick={() => this.handleCancel()}
+                        startIcon={<IconCancel />}
+                    >
+                        {this.props.cancel || I18n.t('ra_Cancel')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
     }
 }