@iobroker/adapter-react-v5 6.1.3 → 6.1.6

package/src/Components/SelectWithIcon.tsx

@@ -0,0 +1,197 @@
+import React, { Component } from 'react';
+
+import {
+    FormControl, InputLabel, MenuItem, Select,
+} from '@mui/material';
+import { InputProps } from '@mui/material/Input';
+
+import { ThemeType, Translate } from '../types';
+
+import Icon from './Icon';
+import Utils from './Utils';
+import I18n from '../i18n';
+
+const styles: Record<string, React.CSSProperties> = {
+    different: {
+        opacity: 0.5,
+    },
+    icon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+};
+
+interface SelectWithIconProps {
+    t: Translate;
+    lang: ioBroker.Languages;
+    themeType: ThemeType;
+    value?: string;
+    onChange: (id: string) => void;
+    disabled?: boolean;
+    list?: ioBroker.Object[] | Record<string, ioBroker.Object>; // one of "list"(Array) or "options"(object) is required
+    options?: Record<string, any>; // one of "list"(Array) or "options"(object) is required
+    different?: string | boolean;
+    label?: string;
+    fullWidth?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    removePrefix?: string;
+    allowNone?: boolean;
+    inputProps?: InputProps['inputProps'];
+    dense?: boolean;
+}
+
+interface TextWithIconItem {
+    name: string;
+    value: string;
+    icon?: string;
+    color?: string;
+}
+
+interface SelectWithIconState {
+    list: TextWithIconItem[];
+}
+
+class SelectWithIcon extends Component<SelectWithIconProps, SelectWithIconState> {
+    private readonly wordDifferent: string | undefined;
+
+    private timeout: ReturnType<typeof setTimeout> | null = null;
+
+    constructor(props: SelectWithIconProps) {
+        super(props);
+
+        if (props.different) {
+            this.wordDifferent = props.t('ra___different__');
+        }
+
+        let list: TextWithIconItem[];
+        if (Array.isArray(props.list || props.options)) {
+            list = ((props.list || props.options) as ioBroker.Object[])
+                .map(obj => ({
+                    name: Utils.getObjectNameFromObj(obj, props.lang)
+                        .replace('system.group.', '')
+                        .replace('system.user.', '')
+                        .replace('enum.rooms.', '')
+                        .replace('enum.functions.', ''),
+                    value: obj._id,
+                    icon: obj.common?.icon,
+                    color: obj.common?.color,
+                }));
+        } else {
+            list = Object.values((props.list || props.options) as Record<string, ioBroker.Object>)
+                .map(obj => ({
+                    name: Utils.getObjectNameFromObj(obj, props.lang)
+                        .replace('system.group.', '')
+                        .replace('system.user.', '')
+                        .replace('enum.rooms.', '')
+                        .replace('enum.functions.', ''),
+                    value: obj._id,
+                    icon: obj.common?.icon,
+                    color: obj.common?.color,
+                }));
+        }
+
+        if (props.different && props.value === props.different) {
+            list.unshift({ value: props.different, name: this.wordDifferent || '' });
+        }
+
+        if (props.allowNone) {
+            list.unshift({ value: '', name: I18n.t('ra_none') });
+        }
+
+        this.state = {
+            list,
+        };
+    }
+
+    render() {
+        if (this.props.allowNone && !this.state.list.find(obj => obj.value === '')) {
+            this.timeout = this.timeout || setTimeout(() => {
+                this.timeout = null;
+                const list = JSON.parse(JSON.stringify(this.state.list));
+                list.unshift({ value: '', name: I18n.t('ra_none') });
+                this.setState({ list });
+            }, 100);
+        } else if (!this.props.allowNone && this.state.list.find(obj => obj.value === '')) {
+            this.timeout = this.timeout || setTimeout(() => {
+                this.timeout = null;
+                const list = JSON.parse(JSON.stringify(this.state.list));
+                const i = this.state.list.findIndex(obj => obj.value === '');
+                list.splice(i, 1);
+                this.setState({ list });
+            }, 100);
+        }
+
+        const item = this.state.list.find(it => it.value === this.props.value || (this.props.removePrefix && it.value.replace(this.props.removePrefix, '') === this.props.value));
+
+        const style = this.props.value === this.props.different ? {} : {
+            color: item?.color || undefined,
+            backgroundColor: Utils.getInvertedColor(item?.color || '', this.props.themeType),
+        };
+
+        if (this.props.dense && this.props.style) {
+            Object.assign(style, this.props.style);
+        }
+
+        const select = <Select
+            variant="standard"
+            disabled={this.props.disabled}
+            value={this.props.value}
+            inputProps={this.props.inputProps}
+            renderValue={(/* value */) => <span>
+                {item?.icon ? <Icon src={item?.icon} style={styles.icon} /> : null}
+                {item?.name}
+            </span>}
+            sx={{
+                '&.MuiSelect-root': this.props.value === this.props.different ? styles.different : {},
+            }}
+            classes={{
+                root: this.props.dense ? this.props.className : '',
+            }}
+            style={style}
+            onChange={el => {
+                if (this.props.different && el.target.value !== this.props.different) {
+                    let pos = null;
+                    for (let i = 0; i < this.state.list.length; i++) {
+                        if (this.state.list[i].value === this.props.different) {
+                            pos = i;
+                            break;
+                        }
+                    }
+                    if (pos !== null) {
+                        const list: TextWithIconItem[] = Utils.clone(this.state.list) as TextWithIconItem[];
+                        list.splice(pos, 1);
+                        this.setState({ list }, () => this.props.onChange(el.target.value));
+                        return;
+                    }
+                }
+
+                this.props.onChange(this.props.removePrefix ? el.target.value.replace(this.props.removePrefix, '') : el.target.value);
+            }}
+        >
+            {this.state.list.map(el => <MenuItem
+                style={this.props.different && el.value === this.props.different ? styles.different : {
+                    color: el.color || undefined,
+                    backgroundColor: Utils.getInvertedColor(el.color || '', this.props.themeType),
+                }}
+                key={el.value}
+                value={el.value}
+            >
+                {el.icon ? <Icon src={el.icon} style={styles.icon} /> : null}
+                {el.name}
+            </MenuItem>)}
+        </Select>;
+
+        if (this.props.dense) {
+            return select;
+        }
+
+        return <FormControl variant="standard" fullWidth={!!this.props.fullWidth} style={this.props.style} className={this.props.className}>
+            <InputLabel>{this.props.label}</InputLabel>
+            {select}
+        </FormControl>;
+    }
+}
+
+export default SelectWithIcon;

package/src/Components/TabContainer.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Grid, Paper } from '@mui/material';
+
+const styles: Record<string, React.CSSProperties> = {
+    root: {
+        width: '100%',
+        height: '100%',
+    },
+    overflowHidden: {
+        overflow: 'hidden',
+    },
+    container: {
+        height: '100%',
+    },
+};
+
+interface TabContainerProps {
+    /* The elevation of the tab container. */
+    elevation?: number;
+    /* Set to 'visible' show the overflow. */
+    overflow?: string;
+    styles?: {
+        root?: React.CSSProperties;
+        container?: React.CSSProperties;
+    };
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    tabIndex?: number;
+    /** The content of the component. */
+    children: React.ReactNode;
+}
+
+function TabContainer(props: TabContainerProps) {
+    return <Paper
+        elevation={!Number.isNaN(props.elevation) ? props.elevation : 1}
+        style={{
+            ...styles.root,
+            ...(props.styles?.root || undefined),
+            ...(props.overflow !== 'visible' ? styles.overflowHidden : undefined),
+        }}
+        onKeyDown={props.onKeyDown}
+        tabIndex={props.tabIndex}
+    >
+        <Grid
+            container
+            direction="column"
+            wrap="nowrap"
+            sx={styles.container}
+        >
+            {props.children}
+        </Grid>
+    </Paper>;
+}
+
+export default TabContainer;

package/src/Components/TabContent.tsx

@@ -0,0 +1,37 @@
+// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
+import React from 'react';
+import { Grid } from '@mui/material';
+
+const styles: Record<string, React.CSSProperties> = {
+    root: {
+        height: '100%',
+        overflow: 'hidden',
+    },
+    overflowAuto: {
+        overflow: 'auto',
+    },
+};
+
+interface TabContentProps {
+    /** The content of the component. */
+    children: React.JSX.Element | (React.JSX.Element | null | React.JSX.Element[])[];
+    /** Overflow behavior */
+    overflow?: 'auto';
+
+    style?: React.CSSProperties;
+}
+
+function TabContent(props: TabContentProps) {
+    return <Grid
+        item
+        sx={{
+            ...styles.root,
+            ...(props?.style || undefined),
+            ...(props.overflow === 'auto' ? styles.overflowAuto : undefined),
+        }}
+    >
+        {props.children}
+    </Grid>;
+}
+
+export default TabContent;

package/src/Components/TabHeader.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Grid } from '@mui/material';
+
+interface TabHeaderProps {
+    children: React.ReactNode;
+}
+
+function TabHeader(props: TabHeaderProps) {
+    return <Grid
+        item
+        container
+        alignItems="center"
+    >
+        {props.children}
+    </Grid>;
+}
+
+export default TabHeader;

package/src/Components/TableResize.tsx

@@ -0,0 +1,259 @@
+/**
+ * Copyright 2022-2024, Denis Haev <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * */
+import React, { Component } from 'react';
+
+import {
+    Table,
+    Skeleton,
+} from '@mui/material';
+
+interface TableResizeProps {
+    name?: string;
+    ready?: boolean;
+    stickyHeader?: boolean;
+    size?: 'small' | 'medium';
+    className?: string;
+    sx?: Record<string, any>;
+    style?: React.CSSProperties;
+    initialWidths?: (number | 'auto')[];
+    minWidths?: number[];
+    dblTitle?: string;
+    children?: React.ReactNode;
+}
+
+class TableResize extends Component<TableResizeProps> {
+    private readonly resizerRefTable: React.RefObject<HTMLTableElement>;
+
+    private resizerActiveIndex: number | null;
+
+    private resizerActiveDiv: HTMLDivElement | null;
+
+    private resizerCurrentWidths: (number | 'auto')[];
+
+    private widthFilled: boolean = false;
+
+    private installTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    private resizerMin: number = 0;
+
+    private resizerMinNext: number = 0;
+
+    private resizerPosition: number = 0;
+
+    private resizerOldWidth: number = 0;
+
+    private resizerOldWidthNext: number = 0;
+
+    constructor(props: TableResizeProps) {
+        super(props);
+        this.resizerRefTable = React.createRef();
+        this.resizerActiveIndex = null;
+        this.resizerActiveDiv = null;
+        this.resizerCurrentWidths = [];
+    }
+
+    componentDidMount() {
+        this.resizerInstall();
+    }
+
+    componentWillUnmount() {
+        this.resizerUninstall();
+    }
+
+    resizerInstall() {
+        if (this.resizerRefTable.current && !(this.resizerRefTable.current as any)._installed) {
+            (this.resizerRefTable.current as any)._installed = true;
+            const ths = this.resizerRefTable.current.querySelectorAll('th');
+
+            const widthsStored = ((window as any)._localStorage || window.localStorage).getItem(`App.${this.props.name || 'history'}.table`);
+            this.widthFilled = false;
+
+            if (widthsStored) {
+                try {
+                    this.resizerCurrentWidths = JSON.parse(widthsStored);
+                    this.widthFilled = true;
+                } catch (e) {
+                    // ignore
+                }
+            }
+            if (this.widthFilled) {
+                if (this.resizerCurrentWidths.length !== ths.length) {
+                    this.resizerCurrentWidths = [];
+                    this.widthFilled = false;
+                } else {
+                    const tableWidth = this.resizerRefTable.current.offsetWidth;
+                    let storedWidth: number | null = 0;
+                    for (let w = 0; w < this.resizerCurrentWidths.length; w++) {
+                        // eslint-disable-next-line no-restricted-properties
+                        if (window.isFinite(this.resizerCurrentWidths[w] as number)) {
+                            storedWidth += this.resizerCurrentWidths[w] as number;
+                        } else {
+                            storedWidth = null;
+                            break;
+                        }
+                    }
+                    if (storedWidth !== null && Math.abs(storedWidth - tableWidth) > 20) {
+                        this.resizerCurrentWidths = [];
+                        this.widthFilled = false;
+                    }
+                }
+            }
+
+            for (let i = 0; i < ths.length; i++) {
+                !this.widthFilled && this.resizerCurrentWidths.push(ths[i].offsetWidth);
+
+                // last column does need a handle
+                if (i < ths.length - 1) {
+                    const div = window.document.createElement('div');
+                    div.dataset.index = i.toString();
+                    div.onmousedown = this.resizerMouseDown;
+                    div.ondblclick = this.resizerReset;
+                    div.title = this.props.dblTitle || 'Double click to reset table layout';
+                    div.className = 'resize-handle';
+                    ths[i].appendChild(div);
+                }
+            }
+            if (this.widthFilled) {
+                this.resizerApplyWidths();
+            }
+        } else {
+            this.installTimeout = setTimeout(() => {
+                this.installTimeout = null;
+                this.resizerInstall();
+            }, 100);
+        }
+    }
+
+    resizerReset = () => {
+        for (let c = 0; c < this.resizerCurrentWidths.length; c++) {
+            this.resizerCurrentWidths[c] = (this.props.initialWidths || [])[c] || 'auto';
+        }
+
+        ((window as any)._localStorage || window.localStorage).setItem(`App.${this.props.name || 'history'}.table`, JSON.stringify(this.resizerCurrentWidths));
+        this.resizerApplyWidths();
+    };
+
+    resizerUninstall() {
+        this.installTimeout && clearTimeout(this.installTimeout);
+        this.installTimeout = null;
+
+        // resizer
+        if (this.resizerRefTable.current && (this.resizerRefTable.current as any)._installed) {
+            (this.resizerRefTable.current as any)._installed = false;
+            const ths = this.resizerRefTable.current.querySelectorAll('th');
+            for (let i = 0; i < ths.length; i++) {
+                const div: HTMLDivElement | null = ths[i].querySelector('.resize-handle');
+                if (div) {
+                    div.onmousedown = null;
+                    div.remove();
+                }
+            }
+        }
+    }
+
+    resizerApplyWidths() {
+        const gridTemplateColumns = [];
+        if (this.resizerCurrentWidths.length) {
+            for (let c = 0; c < this.resizerCurrentWidths.length; c++) {
+                if (this.resizerCurrentWidths[c]) {
+                    gridTemplateColumns.push(this.resizerCurrentWidths[c] !== 'auto' ? `${this.resizerCurrentWidths[c]}px` : 'auto');
+                } else if (this.props.initialWidths && this.props.initialWidths[c]) {
+                    gridTemplateColumns.push(this.props.initialWidths[c] !== 'auto' ? `${this.props.initialWidths[c]}px` : 'auto');
+                } else {
+                    gridTemplateColumns.push('auto');
+                }
+            }
+        } else if (this.props.initialWidths) {
+            for (let c = 0; c < this.props.initialWidths.length; c++) {
+                if (this.props.initialWidths[c]) {
+                    gridTemplateColumns.push(this.props.initialWidths[c] !== 'auto' ? `${this.props.initialWidths[c]}px` : 'auto');
+                } else {
+                    gridTemplateColumns.push('auto');
+                }
+            }
+        }
+
+        if (this.resizerRefTable.current && gridTemplateColumns.length) {
+            this.resizerRefTable.current.style.gridTemplateColumns = gridTemplateColumns.join(' ');
+        }
+
+        return gridTemplateColumns.length ? gridTemplateColumns.join(' ') : undefined;
+    }
+
+    resizerMouseMove = (e: MouseEvent) => {
+        if (this.resizerActiveDiv && this.resizerActiveIndex !== null) {
+            const width = this.resizerOldWidth + e.clientX - this.resizerPosition;
+            const widthNext = this.resizerOldWidthNext - e.clientX + this.resizerPosition;
+            if ((!this.resizerMin     || width     > this.resizerMin) &&
+                (!this.resizerMinNext || widthNext > this.resizerMinNext)) {
+                this.resizerCurrentWidths[this.resizerActiveIndex] = width;
+                this.resizerCurrentWidths[this.resizerActiveIndex + 1] = widthNext;
+                this.resizerApplyWidths();
+            }
+        }
+    };
+
+    resizerMouseUp = () => {
+        ((window as any)._localStorage || window.localStorage).setItem(`App.${this.props.name || 'history'}.table`, JSON.stringify(this.resizerCurrentWidths));
+
+        this.resizerActiveIndex = null;
+        this.resizerActiveDiv = null;
+        window.removeEventListener('mousemove', this.resizerMouseMove);
+        window.removeEventListener('mouseup', this.resizerMouseUp);
+    };
+
+    resizerMouseDown = (e: MouseEvent) => {
+        if (this.resizerActiveIndex === null || this.resizerActiveIndex === undefined) {
+            console.log(`Mouse down ${(e.target as HTMLDivElement)?.dataset.index}`);
+            this.resizerActiveIndex = parseInt((e.target as HTMLDivElement)?.dataset.index || '0', 10);
+            this.resizerActiveDiv = e.target as HTMLDivElement;
+            this.resizerMin = this.props.minWidths ? this.props.minWidths[this.resizerActiveIndex] : 0;
+            this.resizerMinNext = this.props.minWidths ? this.props.minWidths[this.resizerActiveIndex + 1] : 0;
+            this.resizerPosition = e.clientX;
+            let ths;
+            if (this.resizerCurrentWidths[this.resizerActiveIndex] === 'auto') {
+                ths = this.resizerRefTable.current?.querySelectorAll('th');
+                if (ths) {
+                    this.resizerCurrentWidths[this.resizerActiveIndex] = ths[this.resizerActiveIndex].offsetWidth;
+                }
+            }
+            if (this.resizerCurrentWidths[this.resizerActiveIndex + 1] === 'auto') {
+                ths = ths || this.resizerRefTable.current?.querySelectorAll('th');
+                if (ths) {
+                    this.resizerCurrentWidths[this.resizerActiveIndex + 1] = ths[this.resizerActiveIndex + 1].offsetWidth;
+                }
+            }
+
+            this.resizerOldWidth = this.resizerCurrentWidths[this.resizerActiveIndex] as number;
+            this.resizerOldWidthNext = this.resizerCurrentWidths[this.resizerActiveIndex + 1] as number;
+
+            window.addEventListener('mousemove', this.resizerMouseMove);
+            window.addEventListener('mouseup', this.resizerMouseUp);
+        }
+    };
+
+    render() {
+        if (this.props.ready === false) {
+            return <Skeleton />;
+        }
+
+        const style = { gridTemplateColumns: this.resizerApplyWidths() };
+
+        return <Table
+            stickyHeader={this.props.stickyHeader}
+            size={this.props.size || 'small'}
+            className={this.props.className}
+            sx={this.props.sx}
+            ref={this.resizerRefTable}
+            style={({ ...(this.props.style || undefined), ...style })}
+        >
+            {this.props.children}
+        </Table>;
+    }
+}
+
+export default TableResize;