@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/src/Components/Router.tsx

@@ -1,90 +1,90 @@
-import { Component } from 'react';
-
-interface Router<P = {}, S = {}> extends Component<P, S> {}
-
-class Router<P, S> extends Component<P, S> {
-    protected onHashChangedBound: () => void;
-
-    constructor(props: P) {
-        super(props);
-        this.onHashChangedBound = this.onHashChanged.bind(this);
-    }
-
-    componentDidMount() {
-        window.addEventListener('hashchange', this.onHashChangedBound);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('hashchange', this.onHashChangedBound);
-    }
-
-    onHashChanged() {
-        // override this function
-    }
-
-    /**
-     * Gets the location object.
-     */
-    static getLocation(): { tab: string; dialog: string; id: string; arg: string } {
-        let hash = window.location.hash;
-        hash = hash.replace(/^#/, '');
-        const parts = hash.split('/').map(item => {
-            try {
-                return item ? decodeURIComponent(item) : '';
-            } catch (e) {
-                console.error(`Router: Cannot decode ${item}`);
-                return item || '';
-            }
-        });
-        // #tabName/dialogName/deviceId
-        return {
-            tab:    parts[0] || '',
-            dialog: parts[1] || '',
-            id:     parts[2] || '',
-            arg:    parts[3] || '',
-        };
-    }
-
-    /**
-     * Navigate to a new location. Any parameters that are not set will be taken from the current location.
-     */
-    static doNavigate(
-        tab: string | undefined | null,
-        dialog?: string | null,
-        id?: string | null,
-        arg?: string | null,
-    ) {
-        let hash = '';
-        const location = Router.getLocation();
-        if (arg !== undefined && !id) {
-            id = location.id;
-        }
-        if (id && !dialog) {
-            dialog = location.dialog;
-        }
-        if (dialog && !tab) {
-            tab = location.tab;
-        } else if (tab === null) {
-            tab = location.tab;
-        }
-
-        if (tab) {
-            hash = `#${tab}`;
-            if (dialog) {
-                hash += `/${dialog}`;
-
-                if (id) {
-                    hash += `/${id}`;
-                    if (arg !== undefined) {
-                        hash += `/${arg}`;
-                    }
-                }
-            }
-        }
-        if (window.location.hash !== hash) {
-            window.location.hash = hash;
-        }
-    }
-}
-
-export default Router;
+import { Component } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+class Router<P = {}, S = {}> extends Component<P, S> {
+    protected onHashChangedBound: () => void;
+
+    constructor(props: P) {
+        super(props);
+        this.onHashChangedBound = this.onHashChanged.bind(this);
+    }
+
+    componentDidMount(): void {
+        window.addEventListener('hashchange', this.onHashChangedBound);
+    }
+
+    componentWillUnmount(): void {
+        window.removeEventListener('hashchange', this.onHashChangedBound);
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    onHashChanged(): void {
+        // override this function
+    }
+
+    /**
+     * Gets the location object.
+     */
+    static getLocation(): { tab: string; dialog: string; id: string; arg: string } {
+        let hash = window.location.hash;
+        hash = hash.replace(/^#/, '');
+        const parts = hash.split('/').map(item => {
+            try {
+                return item ? decodeURIComponent(item) : '';
+            } catch {
+                console.error(`Router: Cannot decode ${item}`);
+                return item || '';
+            }
+        });
+        // #tabName/dialogName/deviceId
+        return {
+            tab: parts[0] || '',
+            dialog: parts[1] || '',
+            id: parts[2] || '',
+            arg: parts[3] || '',
+        };
+    }
+
+    /**
+     * Navigate to a new location. Any parameters that are not set will be taken from the current location.
+     */
+    static doNavigate(
+        tab: string | undefined | null,
+        dialog?: string | null,
+        id?: string | null,
+        arg?: string | null,
+    ): void {
+        let hash = '';
+        const location = Router.getLocation();
+        if (arg !== undefined && !id) {
+            id = location.id;
+        }
+        if (id && !dialog) {
+            dialog = location.dialog;
+        }
+        if (dialog && !tab) {
+            tab = location.tab;
+        } else if (tab === null) {
+            tab = location.tab;
+        }
+
+        if (tab) {
+            hash = `#${tab}`;
+            if (dialog) {
+                hash += `/${dialog}`;
+
+                if (id) {
+                    hash += `/${id}`;
+                    if (arg !== undefined) {
+                        hash += `/${arg}`;
+                    }
+                }
+            }
+        }
+        if (window.location.hash !== hash) {
+            window.location.hash = hash;
+        }
+    }
+}
+
+export default Router;

package/src/Components/SaveCloseButtons.tsx

@@ -1,113 +1,117 @@
-// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
-import React from 'react';
-
-import { Fab, Toolbar } from '@mui/material';
-
-import {
-    Save as IconSave,
-    Close as IconClose,
-} from '@mui/icons-material';
-
-import I18n from '../i18n';
-import { IobTheme } from '../types';
-
-const styles: Record<string, React.CSSProperties> = {
-    buttonIcon: {
-        marginRight: 8,
-    },
-};
-
-interface SaveCloseButtonsProps {
-    /* Are the buttons without text */
-    noTextOnButtons?: boolean;
-    /* Theme object (from this.state.theme) */
-    theme: IobTheme;
-    /* bottom position 0 or 38 for iFrame */
-    isIFrame?: boolean;
-    /* is used in new React */
-    newReact?: boolean;
-    /* on Save handler */
-    onSave: (close: boolean) => void;
-    /* on Close handler */
-    onClose: () => void;
-    dense?: boolean;
-    paddingLeft?: number;
-    changed: boolean;
-    error?: boolean;
-}
-
-class SaveCloseButtons extends React.Component<SaveCloseButtonsProps> {
-    private readonly isIFrame: boolean;
-
-    constructor(props: SaveCloseButtonsProps) {
-        super(props);
-        const newReact = props.newReact === undefined ? true : props.newReact;
-
-        if (props.isIFrame !== undefined) {
-            this.isIFrame = props.isIFrame;
-        } else {
-            try {
-                this.isIFrame = !newReact && window.self !== window.top;
-            } catch (e) {
-                this.isIFrame = !newReact;
-            }
-        }
-    }
-
-    render() {
-        const noTextOnButtons = this.props.noTextOnButtons;
-        const buttonStyle: React.CSSProperties = {
-            borderRadius: this.props.theme.saveToolbar.button.borderRadius || 3,
-            height:       this.props.theme.saveToolbar.button.height       || 32,
-        };
-
-        const style: React.CSSProperties = {
-            bottom: this.isIFrame ? 38 : 0,
-            left: this.props.paddingLeft || 0,
-            right: 0,
-            position: 'absolute',
-            background: this.props.theme.saveToolbar.background,
-        };
-        if (this.props.dense) {
-            style.minHeight = 48;
-        }
-
-        if (this.props.error) {
-            buttonStyle.border = '1px solid red';
-        }
-
-        return <Toolbar
-            // position="absolute"
-            style={style}
-        >
-            <Fab
-                variant="extended"
-                aria-label="Save"
-                disabled={!this.props.changed || this.props.error}
-                onClick={() => this.props.onSave(false)}
-                style={buttonStyle}
-            >
-                <IconSave style={!noTextOnButtons ? styles.buttonIcon : undefined} />
-                {!noTextOnButtons && I18n.t('ra_Save')}
-            </Fab>
-            <Fab
-                variant="extended"
-                aria-label="Save and close"
-                disabled={!this.props.changed || this.props.error}
-                onClick={() => this.props.onSave(true)}
-                style={{ ...buttonStyle, ...{ marginLeft: 10 } }}
-            >
-                <IconSave style={!noTextOnButtons ? styles.buttonIcon : undefined} />
-                {!noTextOnButtons ? I18n.t('ra_Save and close') : '+'}
-                {noTextOnButtons && <IconClose />}
-            </Fab>
-            <div style={{ flexGrow: 1 }} />
-            <Fab variant="extended" aria-label="Close" onClick={() => this.props.onClose()} style={buttonStyle}>
-                <IconClose style={!noTextOnButtons ? styles.buttonIcon : undefined} />
-                {!noTextOnButtons && I18n.t('ra_Close')}
-            </Fab>
-        </Toolbar>;
-    }
-}
-
-export default SaveCloseButtons;
+// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
+import React, { type JSX } from 'react';
+
+import { Fab, Toolbar } from '@mui/material';
+
+import { Save as IconSave, Close as IconClose } from '@mui/icons-material';
+
+import I18n from '../i18n';
+import type { IobTheme } from '../types';
+
+const styles: Record<string, React.CSSProperties> = {
+    buttonIcon: {
+        marginRight: 8,
+    },
+};
+
+interface SaveCloseButtonsProps {
+    /* Are the buttons without text */
+    noTextOnButtons?: boolean;
+    /* Theme object (from this.state.theme) */
+    theme: IobTheme;
+    /* bottom position 0 or 38 for iFrame */
+    isIFrame?: boolean;
+    /* is used in new React */
+    newReact?: boolean;
+    /* on Save handler */
+    onSave: (close: boolean) => void;
+    /* on Close handler */
+    onClose: () => void;
+    dense?: boolean;
+    paddingLeft?: number;
+    changed: boolean;
+    error?: boolean;
+}
+
+class SaveCloseButtons extends React.Component<SaveCloseButtonsProps> {
+    private readonly isIFrame: boolean;
+
+    constructor(props: SaveCloseButtonsProps) {
+        super(props);
+        const newReact = props.newReact === undefined ? true : props.newReact;
+
+        if (props.isIFrame !== undefined) {
+            this.isIFrame = props.isIFrame;
+        } else {
+            try {
+                this.isIFrame = !newReact && window.self !== window.top;
+            } catch {
+                this.isIFrame = !newReact;
+            }
+        }
+    }
+
+    render(): JSX.Element {
+        const noTextOnButtons = this.props.noTextOnButtons;
+        const buttonStyle: React.CSSProperties = {
+            borderRadius: this.props.theme.saveToolbar.button.borderRadius || 3,
+            height: this.props.theme.saveToolbar.button.height || 32,
+        };
+
+        const style: React.CSSProperties = {
+            bottom: this.isIFrame ? 38 : 0,
+            left: this.props.paddingLeft || 0,
+            right: 0,
+            position: 'absolute',
+            background: this.props.theme.saveToolbar.background,
+        };
+        if (this.props.dense) {
+            style.minHeight = 48;
+        }
+
+        if (this.props.error) {
+            buttonStyle.border = '1px solid red';
+        }
+
+        return (
+            <Toolbar
+                // position="absolute"
+                style={style}
+            >
+                <Fab
+                    variant="extended"
+                    aria-label="Save"
+                    disabled={!this.props.changed || this.props.error}
+                    onClick={() => this.props.onSave(false)}
+                    style={buttonStyle}
+                >
+                    <IconSave style={!noTextOnButtons ? styles.buttonIcon : undefined} />
+                    {!noTextOnButtons && I18n.t('ra_Save')}
+                </Fab>
+                <Fab
+                    variant="extended"
+                    aria-label="Save and close"
+                    disabled={!this.props.changed || this.props.error}
+                    onClick={() => this.props.onSave(true)}
+                    style={{ ...buttonStyle, ...{ marginLeft: 10 } }}
+                >
+                    <IconSave style={!noTextOnButtons ? styles.buttonIcon : undefined} />
+                    {!noTextOnButtons ? I18n.t('ra_Save and close') : '+'}
+                    {noTextOnButtons && <IconClose />}
+                </Fab>
+                <div style={{ flexGrow: 1 }} />
+                <Fab
+                    variant="extended"
+                    aria-label="Close"
+                    onClick={() => this.props.onClose()}
+                    style={buttonStyle}
+                >
+                    <IconClose style={!noTextOnButtons ? styles.buttonIcon : undefined} />
+                    {!noTextOnButtons && I18n.t('ra_Close')}
+                </Fab>
+            </Toolbar>
+        );
+    }
+}
+
+export default SaveCloseButtons;