@iobroker/adapter-react-v5 7.2.4 → 7.3.0

package/src/Components/SelectWithIcon.tsx

@@ -1,239 +0,0 @@
-import React, { Component } from 'react';
-
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
-import type { InputProps } from '@mui/material/Input';
-
-import type { 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(): React.JSX.Element {
-        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}
-                slotProps={{
-                    input: 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

@@ -1,57 +0,0 @@
-import React from 'react';
-
-import { Grid2, 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): React.JSX.Element {
-    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}
-        >
-            <Grid2
-                container
-                direction="column"
-                wrap="nowrap"
-                sx={styles.container}
-            >
-                {props.children}
-            </Grid2>
-        </Paper>
-    );
-}
-
-export default TabContainer;

package/src/Components/TabContent.tsx

@@ -1,38 +0,0 @@
-// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
-import React from 'react';
-import { Grid2 } 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): React.JSX.Element {
-    return (
-        <Grid2
-            sx={{
-                ...styles.root,
-                ...(props?.style || undefined),
-                ...(props.overflow === 'auto' ? styles.overflowAuto : undefined),
-            }}
-        >
-            {props.children}
-        </Grid2>
-    );
-}
-
-export default TabContent;

package/src/Components/TabHeader.tsx

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

package/src/Components/ToggleThemeMenu.tsx

@@ -1,52 +0,0 @@
-import React, { type JSX } from 'react';
-
-import { IconButton, Tooltip } from '@mui/material';
-
-import {
-    Brightness4 as Brightness4Icon,
-    Brightness5 as Brightness5Icon,
-    Brightness6 as Brightness6Icon,
-    Brightness7 as Brightness7Icon,
-} from '@mui/icons-material';
-
-interface ToggleThemeMenuProps {
-    themeName: 'dark' | 'blue' | 'colored' | 'light';
-    toggleTheme: () => void;
-    t: (key: string) => string;
-    className?: string;
-    style?: React.CSSProperties;
-    size?: 'small' | 'medium' | 'large';
-}
-
-export default function ToggleThemeMenu({
-    themeName,
-    toggleTheme,
-    t,
-    className,
-    style,
-    size,
-}: ToggleThemeMenuProps): JSX.Element {
-    return (
-        <div
-            className={className || undefined}
-            style={style || undefined}
-        >
-            <Tooltip
-                title={t('ra_Change color theme')}
-                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}
-            >
-                <IconButton
-                    onClick={() => toggleTheme()}
-                    size={size || 'medium'}
-                >
-                    {themeName === 'dark' && <Brightness4Icon className={className} />}
-                    {themeName === 'blue' && <Brightness5Icon className={className} />}
-                    {themeName === 'colored' && <Brightness6Icon className={className} />}
-                    {themeName !== 'dark' && themeName !== 'blue' && themeName !== 'colored' && (
-                        <Brightness7Icon className={className} />
-                    )}
-                </IconButton>
-            </Tooltip>
-        </div>
-    );
-}