@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/src/Dialogs/ComplexCron.tsx

@@ -1,129 +1,123 @@
-import React from 'react';
-
-import {
-    Button,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Dialog,
-} from '@mui/material';
-
-import {
-    Check as IconOk,
-    Cancel as IconCancel,
-    Delete as IconClear,
-} from '@mui/icons-material';
-
-import ComplexCron from '../Components/ComplexCron';
-
-import I18n from '../i18n';
-
-// Generate cron expression
-const styles: Record<string, React.CSSProperties> = {
-    headerID: {
-        fontWeight: 'bold',
-        fontStyle: 'italic',
-    },
-    radio: {
-        display: 'inline-block',
-    },
-    dialogPaper: {
-        height: 'calc(100% - 96px)',
-    },
-};
-
-interface DialogCronProps {
-    onClose: () => void;
-    onOk: (cron: string | false) => void;
-    title?: string;
-    cron?: string;
-    cancel?: string;
-    ok?: string;
-    clear?: string;
-    clearButton?: boolean;
-}
-
-interface DialogCronState {
-    cron: string;
-}
-
-class DialogComplexCron 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,
-        };
-    }
-
-    handleCancel() {
-        this.props.onClose();
-    }
-
-    handleOk() {
-        this.props.onOk(this.state.cron);
-        this.props.onClose();
-    }
-
-    handleClear() {
-        this.props.onOk(false);
-        this.props.onClose();
-    }
-
-    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' }}>
-                <ComplexCron
-                    cronExpression={this.state.cron}
-                    onChange={cron => this.setState({ cron })}
-                    language={I18n.getLanguage()}
-                />
-            </DialogContent>
-            <DialogActions>
-                {!!this.props.clearButton && <Button
-                    color="grey"
-                    variant="contained"
-                    onClick={() => this.handleClear()}
-                    startIcon={<IconClear />}
-                >
-                    {this.props.clear || I18n.t('ra_Clear')}
-                </Button>}
-                <Button
-                    variant="contained"
-                    onClick={() => this.handleOk()}
-                    color="primary"
-                    startIcon={<IconOk />}
-                >
-                    {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 DialogComplexCron;
+import React, { type JSX } from 'react';
+
+import { Button, DialogTitle, DialogContent, DialogActions, Dialog } from '@mui/material';
+
+import { Check as IconOk, Cancel as IconCancel, Delete as IconClear } from '@mui/icons-material';
+
+import ComplexCron from '../Components/ComplexCron';
+
+import I18n from '../i18n';
+
+// Generate cron expression
+const styles: Record<string, React.CSSProperties> = {
+    headerID: {
+        fontWeight: 'bold',
+        fontStyle: 'italic',
+    },
+    radio: {
+        display: 'inline-block',
+    },
+    dialogPaper: {
+        height: 'calc(100% - 96px)',
+    },
+};
+
+interface DialogCronProps {
+    onClose: () => void;
+    onOk: (cron: string | false) => void;
+    title?: string;
+    cron?: string;
+    cancel?: string;
+    ok?: string;
+    clear?: string;
+    clearButton?: boolean;
+}
+
+interface DialogCronState {
+    cron: string;
+}
+
+class DialogComplexCron 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,
+        };
+    }
+
+    handleCancel(): void {
+        this.props.onClose();
+    }
+
+    handleOk(): void {
+        this.props.onOk(this.state.cron);
+        this.props.onClose();
+    }
+
+    handleClear(): void {
+        this.props.onOk(false);
+        this.props.onClose();
+    }
+
+    render(): JSX.Element {
+        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' }}>
+                    <ComplexCron
+                        cronExpression={this.state.cron}
+                        onChange={cron => this.setState({ cron })}
+                        language={I18n.getLanguage()}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    {!!this.props.clearButton && (
+                        <Button
+                            color="grey"
+                            variant="contained"
+                            onClick={() => this.handleClear()}
+                            startIcon={<IconClear />}
+                        >
+                            {this.props.clear || I18n.t('ra_Clear')}
+                        </Button>
+                    )}
+                    <Button
+                        variant="contained"
+                        onClick={() => this.handleOk()}
+                        color="primary"
+                        startIcon={<IconOk />}
+                    >
+                        {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 DialogComplexCron;

package/src/Dialogs/Confirm.tsx

@@ -1,162 +1,185 @@
-/**
- * Copyright 2019-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,
-    FormControlLabel,
-    Checkbox,
-} from '@mui/material';
-
-import {
-    Check as IconCheck,
-    Close as IconClose,
-} from '@mui/icons-material';
-
-import I18n from '../i18n';
-
-const styles: Record<string, React.CSSProperties> = {
-    suppress: {
-        fontSize: 12,
-    },
-    suppressRoot: {
-        // it is sx
-        marginTop: '16px',
-    },
-};
-
-interface DialogConfirmProps {
-    /** The dialog title; default: Are you sure? (translated) */
-    title?: string;
-    /** The dialog text */
-    text?: string | React.JSX.Element;
-    /** Close handler. */
-    onClose?: (ok: boolean) => void;
-    /** if the dialog must be fill sized */
-    fullWidth?: boolean;
-    /** optional icon */
-    icon?: React.JSX.Element;
-    /** optional ok button text */
-    ok?: string;
-    /** optional cancel button text */
-    cancel?: string;
-    /** optional interval in minutes for which the confirmation dialog will be suppressed if activated. */
-    suppressQuestionMinutes?: number;
-    /** optional text for the suppression checkbox */
-    suppressText?: string;
-    /** optional name of the dialog. Used only with suppressQuestionMinutes to store the user choice */
-    dialogName?: string;
-}
-
-interface DialogConfirmState {
-    suppress: number | boolean;
-}
-
-class DialogConfirm extends Component<DialogConfirmProps, DialogConfirmState> {
-    constructor(props: DialogConfirmProps) {
-        super(props);
-
-        if (!this.props.dialogName && this.props.suppressQuestionMinutes) {
-            throw new Error('dialogName required if suppressQuestionMinutes used');
-        }
-        let suppress: number | boolean = false;
-
-        if (this.props.suppressQuestionMinutes) {
-            suppress = parseInt(((window as any)._localStorage || window.localStorage).getItem(this.props.dialogName), 10) || 0;
-
-            if (!suppress) {
-                suppress = false;
-            } else if (Date.now() > suppress) {
-                ((window as any)._localStorage || window.localStorage).removeItem(this.props.dialogName);
-                suppress = false;
-            }
-        }
-
-        this.state = {
-            suppress,
-        };
-    }
-
-    handleOk() {
-        if (this.state.suppress) {
-            ((window as any)._localStorage || window.localStorage).setItem(this.props.dialogName, Date.now() + (this.props.suppressQuestionMinutes || 2) * 60000);
-        }
-        this.props.onClose && this.props.onClose(true);
-    }
-
-    handleCancel() {
-        this.props.onClose && this.props.onClose(false);
-    }
-
-    render() {
-        if (typeof this.state.suppress === 'number') {
-            setTimeout(() => this.props.onClose && this.props.onClose(true), 100);
-            return null;
-        }
-
-        return <Dialog
-            open={!0}
-            maxWidth="md"
-            fullWidth={this.props.fullWidth !== undefined ? this.props.fullWidth : true}
-            onClose={(event, reason) => {
-                if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
-                    this.handleCancel();
-                }
-            }}
-            aria-labelledby="ar_confirmation_dialog_title"
-            aria-describedby="ar_confirmation_dialog_description"
-        >
-            <DialogTitle id="ar_confirmation_dialog_title">{this.props.title || I18n.t('ra_Are you sure?')}</DialogTitle>
-            <DialogContent>
-                <DialogContentText id="ar_confirmation_dialog_description">
-                    {this.props.icon || null}
-                    {this.props.text}
-                    {this.props.suppressQuestionMinutes ? <br /> : null}
-                    {this.props.suppressQuestionMinutes ? <FormControlLabel
-                        sx={{ '& .FormControlLabel-label': styles.suppress, '&.FormControlLabel-root': styles.suppressRoot }}
-                        control={<Checkbox
-                            id={`ar_dialog_confirm_suppress_${this.props.dialogName || ''}`}
-                            checked={!!this.state.suppress}
-                            onChange={() => this.setState({ suppress: !this.state.suppress })}
-                        />}
-                        label={this.props.suppressText || I18n.t('ra_Suppress question for next %s minutes', (this.props.suppressQuestionMinutes || 2).toString())}
-                    /> : null}
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-                <Button
-                    id={`ar_dialog_confirm_ok_${this.props.dialogName || ''}`}
-                    variant="contained"
-                    onClick={() => this.handleOk()}
-                    color="primary"
-                    autoFocus
-                    startIcon={<IconCheck />}
-                >
-                    {this.props.ok || I18n.t('ra_Ok')}
-                </Button>
-                <Button
-                    id={`ar_dialog_confirm_cancel_${this.props.dialogName || ''}`}
-                    variant="contained"
-                    onClick={() => this.handleCancel()}
-                    color="grey"
-                    startIcon={<IconClose />}
-                >
-                    {this.props.cancel || I18n.t('ra_Cancel')}
-                </Button>
-            </DialogActions>
-        </Dialog>;
-    }
-}
-
-export default DialogConfirm;
+/**
+ * Copyright 2019-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, { Component, type JSX } from 'react';
+
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    FormControlLabel,
+    Checkbox,
+} from '@mui/material';
+
+import { Check as IconCheck, Close as IconClose } from '@mui/icons-material';
+
+import I18n from '../i18n';
+
+const styles: Record<string, React.CSSProperties> = {
+    suppress: {
+        fontSize: 12,
+    },
+    suppressRoot: {
+        // it is sx
+        marginTop: '16px',
+    },
+};
+
+interface DialogConfirmProps {
+    /** The dialog title; default: Are you sure? (translated) */
+    title?: string;
+    /** The dialog text */
+    text?: string | React.JSX.Element;
+    /** Close handler. */
+    onClose?: (ok: boolean) => void;
+    /** if the dialog must be fill sized */
+    fullWidth?: boolean;
+    /** optional icon */
+    icon?: React.JSX.Element;
+    /** optional ok button text */
+    ok?: string;
+    /** optional cancel button text */
+    cancel?: string;
+    /** optional interval in minutes for which the confirmation dialog will be suppressed if activated. */
+    suppressQuestionMinutes?: number;
+    /** optional text for the suppression checkbox */
+    suppressText?: string;
+    /** optional name of the dialog. Used only with suppressQuestionMinutes to store the user choice */
+    dialogName?: string;
+}
+
+interface DialogConfirmState {
+    suppress: number | boolean;
+}
+
+class DialogConfirm extends Component<DialogConfirmProps, DialogConfirmState> {
+    constructor(props: DialogConfirmProps) {
+        super(props);
+
+        if (!this.props.dialogName && this.props.suppressQuestionMinutes) {
+            throw new Error('dialogName required if suppressQuestionMinutes used');
+        }
+        let suppress: number | boolean = false;
+
+        if (this.props.suppressQuestionMinutes) {
+            suppress =
+                parseInt(((window as any)._localStorage || window.localStorage).getItem(this.props.dialogName), 10) ||
+                0;
+
+            if (!suppress) {
+                suppress = false;
+            } else if (Date.now() > suppress) {
+                ((window as any)._localStorage || window.localStorage).removeItem(this.props.dialogName);
+                suppress = false;
+            }
+        }
+
+        this.state = {
+            suppress,
+        };
+    }
+
+    handleOk(): void {
+        if (this.state.suppress) {
+            ((window as any)._localStorage || window.localStorage).setItem(
+                this.props.dialogName,
+                Date.now() + (this.props.suppressQuestionMinutes || 2) * 60000,
+            );
+        }
+        if (this.props.onClose) {
+            this.props.onClose(true);
+        }
+    }
+
+    handleCancel(): void {
+        if (this.props.onClose) {
+            this.props.onClose(false);
+        }
+    }
+
+    render(): JSX.Element | null {
+        if (typeof this.state.suppress === 'number') {
+            setTimeout(() => this.props.onClose && this.props.onClose(true), 100);
+            return null;
+        }
+
+        return (
+            <Dialog
+                open={!0}
+                maxWidth="md"
+                fullWidth={this.props.fullWidth !== undefined ? this.props.fullWidth : true}
+                onClose={(event, reason) => {
+                    if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
+                        this.handleCancel();
+                    }
+                }}
+                aria-labelledby="ar_confirmation_dialog_title"
+                aria-describedby="ar_confirmation_dialog_description"
+            >
+                <DialogTitle id="ar_confirmation_dialog_title">
+                    {this.props.title || I18n.t('ra_Are you sure?')}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="ar_confirmation_dialog_description">
+                        {this.props.icon || null}
+                        {this.props.text}
+                        {this.props.suppressQuestionMinutes ? <br /> : null}
+                        {this.props.suppressQuestionMinutes ? (
+                            <FormControlLabel
+                                sx={{
+                                    '& .FormControlLabel-label': styles.suppress,
+                                    '&.FormControlLabel-root': styles.suppressRoot,
+                                }}
+                                control={
+                                    <Checkbox
+                                        id={`ar_dialog_confirm_suppress_${this.props.dialogName || ''}`}
+                                        checked={!!this.state.suppress}
+                                        onChange={() => this.setState({ suppress: !this.state.suppress })}
+                                    />
+                                }
+                                label={
+                                    this.props.suppressText ||
+                                    I18n.t(
+                                        'ra_Suppress question for next %s minutes',
+                                        (this.props.suppressQuestionMinutes || 2).toString(),
+                                    )
+                                }
+                            />
+                        ) : null}
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        id={`ar_dialog_confirm_ok_${this.props.dialogName || ''}`}
+                        variant="contained"
+                        onClick={() => this.handleOk()}
+                        color="primary"
+                        autoFocus
+                        startIcon={<IconCheck />}
+                    >
+                        {this.props.ok || I18n.t('ra_Ok')}
+                    </Button>
+                    <Button
+                        id={`ar_dialog_confirm_cancel_${this.props.dialogName || ''}`}
+                        variant="contained"
+                        onClick={() => this.handleCancel()}
+                        color="grey"
+                        startIcon={<IconClose />}
+                    >
+                        {this.props.cancel || I18n.t('ra_Cancel')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+}
+
+export default DialogConfirm;