@iobroker/adapter-react-v5 6.1.2 → 6.1.5

package/src/Dialogs/Cron.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+
+import {
+    Button,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Dialog,
+    Radio,
+} from '@mui/material';
+
+import {
+    Check as IconOk,
+    Cancel as IconCancel,
+} from '@mui/icons-material';
+
+import ComplexCron from '../Components/ComplexCron';
+import SimpleCron, { cron2state } from '../Components/SimpleCron';
+import Schedule from '../Components/Schedule';
+
+import I18n from '../i18n';
+import { IobTheme } from '../types';
+
+// Generate cron expression
+
+const styles: Record<string, React.CSSProperties> = {
+    dialogPaper: {
+        height: 'calc(100% - 96px)',
+    },
+};
+
+interface DialogCronProps {
+    onClose: () => void;
+    onOk: (cron: string) => void;
+    title?: string;
+    cron?: string;
+    cancel?: string;
+    ok?: string;
+    /** show only simple configuration */
+    simple?: boolean;
+    /** show only complex configuration */
+    complex?: boolean;
+    /** do not show wizard */
+    noWizard?: boolean;
+    theme: IobTheme;
+}
+
+interface DialogCronState {
+    cron: string;
+    mode: 'simple' | 'complex' | 'wizard';
+}
+
+class DialogCron extends React.Component<DialogCronProps, DialogCronState> {
+    constructor(props: DialogCronProps) {
+        super(props);
+        let cron;
+        if (this.props.cron && typeof this.props.cron === 'string' && this.props.cron.replace(/^["']/, '')[0] !== '{') {
+            cron = this.props.cron.replace(/['"]/g, '').trim();
+        } else {
+            cron = this.props.cron || '{}';
+            if (typeof cron === 'string') {
+                cron = cron.replace(/^["']/, '').replace(/["']\n?$/, '');
+            }
+        }
+
+        this.state =  {
+            cron,
+            mode: this.props.simple ? 'simple' :
+                (this.props.complex ? 'complex' :
+                    ((typeof cron === 'object' || cron[0] === '{') && !this.props.noWizard ?
+                        'wizard' :
+                        (cron2state(this.props.cron || '* * * * *') ? 'simple' : 'complex'))),
+        };
+    }
+
+    handleCancel() {
+        this.props.onClose();
+    }
+
+    handleOk() {
+        this.props.onOk(this.state.cron);
+        this.props.onClose();
+    }
+
+    setMode(mode: 'simple' | 'complex' | 'wizard') {
+        this.setState({ mode });
+    }
+
+    render() {
+        return <Dialog
+            onClose={() => {}}
+            maxWidth="md"
+            fullWidth
+            sx={{ '& .MuiDialog-paper': styles.dialogPaper }}
+            open={!0}
+            aria-labelledby="cron-dialog-title"
+        >
+            <DialogTitle id="cron-dialog-title">{this.props.title || I18n.t('ra_Define schedule...')}</DialogTitle>
+            <DialogContent style={{ height: '100%', overflow: 'hidden' }}>
+                {(this.props.simple && this.props.complex) || (!this.props.simple && !this.props.complex) ? <div>
+                    {!this.props.simple && !this.props.complex && !this.props.noWizard && <>
+                        <Radio
+                            key="wizard"
+                            checked={this.state.mode === 'wizard'}
+                            onChange={() => this.setMode('wizard')}
+                        />
+                        <label
+                            onClick={() => this.setMode('wizard')}
+                            style={this.state.mode !== 'wizard' ? { color: 'lightgrey' } : {}}
+                        >
+                            {I18n.t('sc_wizard')}
+                        </label>
+                    </>}
+
+                    {((!this.props.simple && !this.props.complex) || this.props.simple) && <>
+                        <Radio
+                            key="simple"
+                            checked={this.state.mode === 'simple'}
+                            onChange={() => this.setMode('simple')}
+                        />
+                        <label
+                            onClick={() => this.setMode('simple')}
+                            style={this.state.mode !== 'simple' ? { color: 'lightgrey' } : {}}
+                        >
+                            {I18n.t('sc_simple')}
+                        </label>
+                    </>}
+
+                    {((!this.props.simple && !this.props.complex) || this.props.complex) && <>
+                        <Radio
+                            key="complex"
+                            checked={this.state.mode === 'complex'}
+                            onChange={() => this.setMode('complex')}
+                        />
+                        <label
+                            onClick={() => this.setMode('complex')}
+                            style={this.state.mode !== 'complex' ? { color: 'lightgrey' } : {}}
+                        >
+                            {I18n.t('sc_cron')}
+                        </label>
+                    </>}
+                </div> : null}
+
+                {this.state.mode === 'simple' && <SimpleCron
+                    cronExpression={this.state.cron}
+                    onChange={cron => this.setState({ cron })}
+                    language={I18n.getLanguage()}
+                />}
+                {this.state.mode === 'wizard' && <Schedule
+                    theme={this.props.theme}
+                    schedule={this.state.cron}
+                    onChange={(cron: string) => this.setState({ cron })}
+                />}
+                {this.state.mode === 'complex' && <ComplexCron
+                    cronExpression={this.state.cron}
+                    onChange={cron => this.setState({ cron })}
+                    language={I18n.getLanguage()}
+                />}
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    variant="contained"
+                    onClick={() => this.handleOk()}
+                    color="primary"
+                    startIcon={<IconOk />}
+                >
+                    {this.props.ok || I18n.t('ra_Ok')}
+                </Button>
+                <Button
+                    variant="contained"
+                    onClick={() => this.handleCancel()}
+                    color="grey"
+                    startIcon={<IconCancel />}
+                >
+                    {this.props.cancel || I18n.t('ra_Cancel')}
+                </Button>
+            </DialogActions>
+        </Dialog>;
+    }
+}
+
+export default DialogCron;

package/src/Dialogs/Error.tsx

@@ -0,0 +1,72 @@
+/**
+ * Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * 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 {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+} from '@mui/material';
+
+import { Check as IconCheck } from '@mui/icons-material';
+
+import I18n from '../i18n';
+
+interface DialogErrorProps {
+    /* The dialog title; default: Error (translated) */
+    title?: string;
+    /* The dialog text */
+    text: string | React.JSX.Element;
+    /* Close handler. */
+    onClose?: () => void;
+    /* if the dialog must be fill sized */
+    fullWidth?: boolean;
+}
+
+class DialogError extends Component<DialogErrorProps> {
+    handleOk() {
+        this.props.onClose && this.props.onClose();
+    }
+
+    render() {
+        return <Dialog
+            open={!0}
+            maxWidth="sm"
+            fullWidth={this.props.fullWidth !== undefined ? this.props.fullWidth : true}
+            onClose={() => this.handleOk()}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="ar_alert_dialog_title">
+                {this.props.title || I18n.t('ra_Error')}
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText id="ar_alert_dialog_description">
+                    {this.props.text || I18n.t('ra_Unknown error!')}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    id="ar_dialog_error_ok"
+                    variant="contained"
+                    onClick={() => this.handleOk()}
+                    color="primary"
+                    autoFocus
+                    startIcon={<IconCheck />}
+                >
+                    {I18n.t('ra_Ok')}
+                </Button>
+            </DialogActions>
+        </Dialog>;
+    }
+}
+
+export default DialogError;

package/src/Dialogs/Message.tsx

@@ -0,0 +1,71 @@
+/**
+ * Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * 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 {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+} from '@mui/material';
+
+import {
+    Close as IconClose,
+} from '@mui/icons-material';
+
+import I18n from '../i18n';
+
+interface DialogMessageProps {
+    /* The dialog title; default: Message (translated) */
+    title?: string;
+    /* The dialog text */
+    text: string | React.JSX.Element;
+    /* Close handler. */
+    onClose?: () => void;
+    /* if the dialog must be fill sized */
+    fullWidth?: boolean;
+    /* optional icon */
+    icon?: React.JSX.Element;
+    /* optional ok button text */
+    ok?: string;
+}
+
+class DialogMessage extends Component<DialogMessageProps> {
+    handleOk() {
+        this.props.onClose && this.props.onClose();
+    }
+
+    render() {
+        return <Dialog
+            open={!0}
+            maxWidth="sm"
+            fullWidth={this.props.fullWidth !== undefined ? this.props.fullWidth : true}
+            onClose={() => this.handleOk()}
+            aria-labelledby="ar_dialog_message_title"
+            aria-describedby="ar_dialog_message_description"
+        >
+            <DialogTitle id="ar_dialog_message_title">{this.props.title || I18n.t('ra_Message')}</DialogTitle>
+            <DialogContent>
+                <DialogContentText id="ar_dialog_message_description">
+                    <span style={{ marginRight: this.props.icon ? 8 : 0 }}>
+                        {this.props.icon || null}
+                    </span>
+                    {this.props.text}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button id="ar_dialog_message_ok" variant="contained" onClick={() => this.handleOk()} color="primary" autoFocus startIcon={<IconClose />}>{this.props.ok || I18n.t('ra_Close')}</Button>
+            </DialogActions>
+        </Dialog>;
+    }
+}
+
+export default DialogMessage;

package/src/Dialogs/SelectFile.tsx

@@ -0,0 +1,270 @@
+/*
+ * Copyright 2022-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ */
+// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
+import React from 'react';
+
+import {
+    Button,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Dialog,
+} from '@mui/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';
+
+const styles: Record<string, React.CSSProperties> = {
+    headerID: {
+        fontWeight: 'bold',
+        fontStyle: 'italic',
+    },
+    dialog: {
+        height: '95%',
+    },
+    dialogMobile: {
+        // it is sx
+        padding: '4px',
+        width: '100%',
+        maxWidth: '100%',
+        maxHeight: 'calc(100% - 16px)',
+        height: '100%',
+    },
+    content: {
+        height: '100%',
+        overflow: 'hidden',
+    },
+    contentMobile: {
+        padding: '8px 4px',
+    },
+    titleRoot: {
+        whiteSpace: 'nowrap',
+        width: 'calc(100% - 72px)',
+        overflow: 'hidden',
+        display: 'inline-block',
+        textOverflow: 'ellipsis',
+    },
+};
+
+interface DialogSelectFileProps {
+    /** where to store settings in localStorage * @property {string} [title] The dialog title; default: Please select object ID... (translated) */
+    dialogName?: string;
+    /** The dialog title; default: Please select object ID... (translated) */
+    title?: string;
+    /** Set to true to allow the selection of multiple IDs. */
+    multiSelect?: boolean;
+    /** Image prefix. Normally, admin has '../..' and the web has '../' */
+    imagePrefix?: string; // Prefix (default: '.')
+    /** @deprectaed Image prefix */
+    prefix?: string;
+    /** Show the expert button? */
+    showExpertButton?: boolean;
+    /** Language */
+    lang?: ioBroker.Languages;
+    /** Socket class */
+    socket: Connection;
+    /** Theme name. */
+    themeName?: string;
+    /** Theme type. */
+    themeType?: 'dark' | 'light';
+    /** Theme object. */
+    theme: IobTheme;
+    /** The selected IDs. */
+    selected?: string | string[];
+    /** The ok button text; default: OK (translated) */
+    ok?: string;
+    /** The cancel button text; default: Cancel (translated) */
+    cancel?: string;
+    /** If download of files enabled */
+    allowUpload?: boolean;
+    /** If download of files enabled */
+    allowDownload?: boolean;
+    /** If creation of folders enabled */
+    allowCreateFolder?: boolean;
+    /** If creation of folders enabled */
+    allowDelete?: boolean;
+    /** if tile view enabled (default true) */
+    allowView?: boolean;
+    /** Show toolbar (default true) */
+    showToolbar?: boolean;
+    /** Limit file browser to one specific objectID of type meta and the following path (like vis.0/main) */
+    limitPath?: string;
+    /** like `['png', 'svg', 'bmp', 'jpg', 'jpeg', 'gif']` */
+    filterFiles?: string[];
+    /** images, code, txt, audio, video */
+    filterByType?: 'images' | 'code' | 'txt';
+    /** allow only folder's selection */
+    selectOnlyFolders?: boolean;
+    /** Close handler that is always called when the dialog is closed. */
+    onClose: () => void;
+    /** Handler that is called when the user presses OK or by double click. */
+    onOk: (selected: string | string[] | undefined) => void;
+    /** The styling class names. */
+    filters?: Record<string, string>;
+    /** Allow switch views Table<=>Rows */
+    showViewTypeButton?: boolean;
+     /** If type selector should be shown */
+    showTypeSelector?: boolean;
+     /** If defined, allow selecting only files from this folder */
+    restrictToFolder?: string;
+     /** If restrictToFolder defined, allow selecting files outside of this folder */
+    allowNonRestricted?: boolean;
+    /** force expert mode */
+    expertMode?: boolean;
+    /** Translate function - optional */
+    t?: (text: string, ...args: any[]) => string;
+}
+
+interface DialogSelectFileState {
+    selected: string[];
+}
+
+class DialogSelectFile extends React.Component<DialogSelectFileProps, DialogSelectFileState> {
+    private readonly dialogName: string;
+
+    private readonly filters: Record<string, string>;
+
+    constructor(props: DialogSelectFileProps) {
+        super(props);
+        this.dialogName = this.props.dialogName || 'default';
+        this.dialogName = `SelectFile.${this.dialogName}`;
+
+        const filters: string = ((window as any)._localStorage || window.localStorage).getItem(this.dialogName) || '{}';
+
+        try {
+            this.filters = JSON.parse(filters);
+        } catch (e) {
+            this.filters = {};
+        }
+
+        if (props.filters) {
+            this.filters = { ...this.filters, ...props.filters };
+        }
+
+        let selected = this.props.selected || [];
+        if (typeof selected !== 'object') {
+            selected = [selected];
+        } else {
+            selected = [...selected];
+        }
+        selected = selected.filter(id => id);
+
+        this.state =  {
+            selected,
+        };
+    }
+
+    handleCancel() {
+        this.props.onClose();
+    }
+
+    handleOk() {
+        this.props.onOk(this.props.multiSelect || !Array.isArray(this.state.selected) ? this.state.selected : this.state.selected[0] || '');
+        this.props.onClose();
+    }
+
+    render() {
+        let title;
+        if (this.state.selected.length) {
+            if (!Array.isArray(this.state.selected) || this.state.selected.length === 1) {
+                title = [
+                    <span key="selected">
+                        {I18n.t('ra_Selected')}
+                        &nbsp;
+                    </span>,
+                    <span key="id" style={styles.headerID}>
+                        {this.state.selected}
+                    </span>,
+                ];
+            } else {
+                title = [
+                    <span key="selected">
+                        {I18n.t('ra_Selected')}
+                        &nbsp;
+                    </span>,
+                    <span key="id" style={styles.headerID}>
+                        {I18n.t('%s items', this.state.selected.length)}
+                    </span>,
+                ];
+            }
+        } else {
+            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"
+                >
+                    {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>;
+    }
+}
+
+export default DialogSelectFile;