@iobroker/adapter-react-v5 6.1.2 → 6.1.5

package/src/Components/loader.css

@@ -0,0 +1,222 @@
+/**
+ * Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ **/
+
+.logo-background-light, .logo-background-colored {
+    background: white;
+}
+.logo-background-dark, .logo-background-blue {
+    background: black;
+}
+.logo-div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    overflow: hidden;
+    border-radius: 50%;
+    z-index: 2;
+}
+.logo-border {
+    /*border-color: #164477;*/
+    border-top-color: #3399CC;
+    border-left-color: #164477;
+    border-bottom-color: #164477;
+    border-right-color: #164477;
+    border-radius: 50%;
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+.logo-top {
+    position: absolute;
+    width: 4.5%;
+    height: 16%;
+    top: 0;
+    z-index: 2;
+}
+.logo-i {
+    position: absolute;
+    width: 14.5%;
+    height: 60%;
+    top: 20%;
+    left: 42%;
+    background: #3399CC;
+}
+.logo-i-top {
+    position: absolute;
+    width: 14.5%;
+    height: 4%;
+    left: 42%;
+    background: #3399CC;
+    border-radius: 100%;
+}
+.logo-back {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+@keyframes logo-grow {
+    0% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(1);
+        opacity: 1
+    }
+    99% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(10);
+        opacity: 0;
+    }
+    100% {
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+}
+@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes logo-color-inside-light {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-dark {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-colored {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-blue {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+
+@keyframes logo-color-outside-light {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-dark  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-colored {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-blue  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+
+.logo-animate-wait {
+    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
+}
+
+.logo-animate-grow-light {
+    background: #DDD;
+}
+.logo-animate-grow-dark {
+    background: #1d1d1d;
+}
+.logo-animate-grow-colored {
+    background: #DDD;
+}
+.logo-animate-grow-blue {
+    background: #1d1d1d;
+}
+
+.logo-animate-grow {
+    display: inline-block;
+    text-align: center;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    width: 245px;
+    height: 245px;
+    border-radius: 50%;
+    position: absolute;
+    animation: logo-grow 1s 1 ease forwards;
+}
+
+.logo-animate-color-inside-light {
+    animation: logo-color-inside-light 2.5s;
+}
+.logo-animate-color-inside-dark {
+    animation: logo-color-inside-dark 2.5s;
+}
+.logo-animate-color-inside-colored {
+    animation: logo-color-inside-colored 2.5s;
+}
+.logo-animate-color-inside-blue {
+    animation: logo-color-inside-blue 2.5s;
+}
+
+.logo-animate-color-outside-light {
+    animation: logo-color-outside-light 1.5s;
+}
+.logo-animate-color-outside-dark {
+    animation: logo-color-outside-dark 1.5s;
+}
+.logo-animate-color-outside-colored {
+    animation: logo-color-outside-colored 1.5s;
+}
+.logo-animate-color-outside-blue {
+    animation: logo-color-outside-blue 1.5s;
+}

package/src/Components/withWidth.tsx

@@ -0,0 +1,21 @@
+import React, { JSXElementConstructor } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { Breakpoint, useMediaQuery } from '@mui/material';
+
+function useWidth() {
+    const theme = useTheme();
+    const keys = [...theme.breakpoints.keys].reverse();
+    return keys.reduce((output: Breakpoint | null, key: Breakpoint) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const matches = useMediaQuery(theme.breakpoints.up(key));
+        return !output && matches ? key : output;
+    }, null) || 'xs';
+}
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent: JSXElementConstructor<any>) => (props: Record<string, any>) => {
+    const width = useWidth();
+    return <WrappedComponent {...props} width={width} />;
+};
+
+export default withWidth;

package/src/Connection.tsx

@@ -0,0 +1,7 @@
+import {
+    Connection, PROGRESS, ERRORS, PERMISSION_ERROR,
+} from '@iobroker/socket-client';
+
+export { PROGRESS, ERRORS, PERMISSION_ERROR };
+
+export default Connection;

package/src/Dialogs/ComplexCron.tsx

@@ -0,0 +1,129 @@
+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;

package/src/Dialogs/Confirm.tsx

@@ -0,0 +1,162 @@
+/**
+ * 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;