@iobroker/json-config 6.17.13 → 6.17.15

package/src/JsonConfigComponent/ConfigTabs.tsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import { withStyles } from '@mui/styles';
-
-import { Tabs, Tab } from '@mui/material';
-
-import type { ConfigItemTabs } from '#JC/types';
-import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
-import ConfigPanel from './ConfigPanel';
-import {bool} from "prop-types";
-
-const styles: Record<string, any> = {
-    tabs: {
-        height: '100%',
-        width: '100%',
-    },
-    panel: {
-        height: 'calc(100% - 48px)',
-        width: '100%',
-        display: 'block',
-    },
-};
-
-interface ConfigTabsProps extends ConfigGenericProps {
-    schema: ConfigItemTabs;
-    dialogName?: string;
-}
-
-interface ConfigTabsState extends ConfigGenericState {
-    tab?: string;
-}
-
-class ConfigTabs extends ConfigGeneric<ConfigTabsProps, ConfigTabsState> {
-    constructor(props: ConfigTabsProps) {
-        super(props);
-
-        let tab = ((window as any)._localStorage as Storage || window.localStorage).getItem(`${this.props.dialogName || 'App'}.${this.props.adapterName}`) || Object.keys(this.props.schema.items)[0];
-        if (!Object.keys(this.props.schema.items).includes(tab)) {
-            tab = Object.keys(this.props.schema.items)[0];
-        }
-        Object.assign(this.state, { tab });
-    }
-
-    render() {
-        const items = this.props.schema.items;
-
-        return <div className={this.props.classes.tabs}>
-            <Tabs
-                variant="scrollable"
-                scrollButtons="auto"
-                style={this.props.schema.tabsStyle}
-                value={this.state.tab}
-                onChange={(e, tab) => {
-                    ((window as any)._localStorage as Storage || window.localStorage).setItem(`${this.props.dialogName || 'App'}.${this.props.adapterName}`, tab);
-                    this.setState({ tab });
-                }}
-            >
-                {Object.keys(items).map(name => {
-                    let disabled: boolean;
-                    if (this.props.custom) {
-                        const hidden = this.executeCustom(
-                            items[name].hidden,
-                            this.props.data,
-                            this.props.customObj,
-                            this.props.instanceObj,
-                            this.props.index,
-                            this.props.globalData,
-                        );
-                        if (hidden) {
-                            return null;
-                        }
-                        disabled = this.executeCustom(
-                            items[name].disabled,
-                            this.props.data,
-                            this.props.customObj,
-                            this.props.instanceObj,
-                            this.props.index,
-                            this.props.globalData,
-                        ) as boolean;
-                    } else {
-                        const hidden: boolean = this.execute(
-                            items[name].hidden,
-                            false,
-                            this.props.data,
-                            this.props.index,
-                            this.props.globalData,
-                        ) as boolean;
-                        if (hidden) {
-                            return null;
-                        }
-                        disabled = this.execute(
-                            items[name].disabled,
-                            false,
-                            this.props.data,
-                            this.props.index,
-                            this.props.globalData,
-                        ) as boolean;
-                    }
-                    return <Tab
-                        wrapped
-                        disabled={disabled}
-                        key={name}
-                        value={name}
-                        iconPosition={this.props.schema.iconPosition || 'start'}
-                        icon={this.getIcon(items[name].icon)}
-                        label={this.getText(items[name].label)}
-                    />;
-                })}
-            </Tabs>
-            <ConfigPanel
-                isParentTab
-                changed={this.props.changed}
-                key={this.state.tab}
-                index={1001}
-                arrayIndex={this.props.arrayIndex}
-                globalData={this.props.globalData}
-                onCommandRunning={this.props.onCommandRunning}
-                commandRunning={this.props.commandRunning}
-                className={this.props.classes.panel}
-                socket={this.props.socket}
-                adapterName={this.props.adapterName}
-                instance={this.props.instance}
-                common={this.props.common}
-                customs={this.props.customs}
-                alive={this.props.alive}
-                themeType={this.props.themeType}
-                themeName={this.props.themeName}
-                data={this.props.data}
-                originalData={this.props.originalData}
-                systemConfig={this.props.systemConfig}
-                onError={this.props.onError}
-                onChange={this.props.onChange}
-                multiEdit={this.props.multiEdit}
-                dateFormat={this.props.dateFormat}
-                isFloatComma={this.props.isFloatComma}
-                // disabled={disabled}
-                imagePrefix={this.props.imagePrefix}
-                changeLanguage={this.props.changeLanguage}
-                forceUpdate={this.props.forceUpdate}
-                registerOnForceUpdate={this.props.registerOnForceUpdate}
-                customObj={this.props.customObj}
-                instanceObj={this.props.instanceObj}
-                custom={this.props.custom}
-                schema={items[this.state.tab]}
-                table={this.props.table}
-            />
-        </div>;
-    }
-}
-
-export default withStyles(styles)(ConfigTabs);

package/src/JsonConfigComponent/ConfigText.tsx

@@ -1,188 +0,0 @@
-import React from 'react';
-import { withStyles } from '@mui/styles';
-
-import {
-    Autocomplete,
-    TextField,
-    TextareaAutosize, InputAdornment, IconButton,
-} from '@mui/material';
-
-import {
-    Close as CloseIcon,
-} from '@mui/icons-material';
-
-import { I18n } from '@iobroker/adapter-react-v5';
-
-import type { ConfigItemText } from '#JC/types';
-import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
-
-const styles: Record<string, any> = {
-    indeterminate: {
-        opacity: 0.5,
-    },
-    label: {
-        width: '100%',
-        fontSize: 16,
-    },
-    helper: {
-        width: '100%',
-        fontSize: 12,
-    },
-    error: {
-        width: '100%',
-        fontSize: 12,
-        color: '#FF0000',
-    },
-};
-
-interface ConfigTextProps extends ConfigGenericProps {
-    schema: ConfigItemText;
-}
-
-interface ConfigTextState extends ConfigGenericState {
-    oldValue?: string;
-}
-
-class ConfigText extends ConfigGeneric<ConfigTextProps, ConfigTextState> {
-    private updateTimeout: ReturnType<typeof setTimeout> | null = null;
-
-    componentDidMount() {
-        super.componentDidMount();
-        let value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-
-        if (Array.isArray(value) && this.props.multiEdit) {
-            value = ConfigGeneric.DIFFERENT_VALUE;
-            this.setState({ value, oldValue: value });
-            return;
-        }
-
-        this.setState({ value, oldValue: value });
-    }
-
-    static getDerivedStateFromProps(props: ConfigTextProps, state: ConfigTextState) {
-        if (props.multiEdit && state.value === ConfigGeneric.DIFFERENT_VALUE) {
-            return ConfigGeneric.DIFFERENT_VALUE;
-        }
-
-        let value = ConfigGeneric.getValue(props.data, props.attr);
-
-        if (value !== null && value !== undefined) {
-            value = value.toString();
-        }
-
-        if (value === null || value === undefined || (value !== state.value && value !== state.oldValue)) {
-            return { value };
-        }
-        return null;
-    }
-
-    renderItem(error?: boolean, disabled?: boolean) {
-        const isIndeterminate = Array.isArray(this.state.value) || this.state.value === ConfigGeneric.DIFFERENT_VALUE;
-
-        if (this.state.oldValue !== null && this.state.oldValue !== undefined) {
-            this.updateTimeout && clearTimeout(this.updateTimeout);
-            this.updateTimeout = setTimeout(() => {
-                this.updateTimeout = null;
-                this.setState({ oldValue: null });
-            }, 30);
-        } else if (this.updateTimeout) {
-            clearTimeout(this.updateTimeout);
-            this.updateTimeout = null;
-        }
-
-        if (isIndeterminate) {
-            const autoCompleteOptions = ConfigGeneric.getValue(this.props.data, this.props.attr);
-            const arr = [...autoCompleteOptions].map(item => ({ label: item.toString(), value: item }));
-            arr.unshift({ label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE });
-
-            return <Autocomplete
-                className={this.props.classes.indeterminate}
-                fullWidth
-                value={arr[0]}
-                // getOptionSelected={(option, value) => option.label === value.label}
-                onChange={(_, value) =>  {
-                    const val = value ? value.value : '';
-                    this.onChange(this.props.attr, val, () => {
-                        this.setState({ value: val, oldValue: val });
-                    });
-                }}
-                options={arr}
-                getOptionLabel={option => option.label}
-                renderInput={params => <TextField
-                    variant="standard"
-                    {...params}
-                    error={!!error}
-                    placeholder={this.getText(this.props.schema.placeholder)}
-                    inputProps={{
-                        ...params.inputProps,
-                        maxLength: this.props.schema.maxLength || this.props.schema.max || undefined,
-                        readOnly: this.props.schema.readOnly || false,
-                    }}
-                    label={this.getText(this.props.schema.label)}
-                    helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
-                    disabled={!!disabled}
-                />}
-            />;
-        }
-        if (this.props.schema.minRows > 1) {
-            const helper = this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation);
-            return <div style={{ width: '100%' }}>
-                {this.props.schema.label ? <div className={this.props.classes.label}>{this.getText(this.props.schema.label)}</div> : null}
-                <TextareaAutosize
-                    // variant="standard"
-                    style={{
-                        width: '100%',
-                        resize: 'vertical',
-                        backgroundColor: this.props.themeType === 'dark' ? '#363636' : '#cccccc',
-                        color: this.props.themeType === 'dark' ? '#fff' : '#111',
-                    }}
-                    minRows={this.props.schema.minRows}
-                    maxRows={this.props.schema.maxRows}
-                    value={this.state.value === null || this.state.value === undefined ? '' : this.state.value}
-                    disabled={!!disabled}
-                    readOnly={this.props.schema.readOnly || false}
-                    onChange={e => {
-                        const value = e.target.value;
-                        this.setState({ value, oldValue: this.state.value }, () =>
-                            this.onChange(this.props.attr, value || ''));
-                    }}
-                    placeholder={this.getText(this.props.schema.placeholder)}
-                />
-                {helper || error ? <div className={error ? this.props.classes.error : this.props.classes.helper}>{error || helper}</div> : null}
-            </div>;
-        }
-        return <TextField
-            variant="standard"
-            fullWidth
-            value={this.state.value === null || this.state.value === undefined ? '' : this.state.value}
-            error={!!error}
-            disabled={!!disabled}
-            inputProps={{
-                maxLength: this.props.schema.maxLength || this.props.schema.max || undefined,
-                readOnly: this.props.schema.readOnly || false,
-            }}
-            // eslint-disable-next-line react/jsx-no-duplicate-props
-            InputProps={{
-                endAdornment: this.state.value && !this.props.schema.noClearButton ? <InputAdornment position="end">
-                    <IconButton
-                        size="small"
-                        onClick={() => this.setState({ value: '', oldValue: this.state.value }, () =>
-                            this.onChange(this.props.attr, ''))}
-                    >
-                        <CloseIcon />
-                    </IconButton>
-                </InputAdornment> : null,
-            }}
-            onChange={e => {
-                const value = e.target.value;
-                this.setState({ value, oldValue: this.state.value }, () =>
-                    this.onChange(this.props.attr, value));
-            }}
-            placeholder={this.getText(this.props.schema.placeholder)}
-            label={this.getText(this.props.schema.label)}
-            helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
-        />;
-    }
-}
-
-export default withStyles(styles)(ConfigText);

package/src/JsonConfigComponent/ConfigTextSendTo.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import { withStyles } from '@mui/styles';
-
-import {
-    TextField,
-    IconButton,
-} from '@mui/material';
-
-import { IconCopy, Utils } from '@iobroker/adapter-react-v5';
-
-import type { ConfigItemSendTo } from '#JC/types';
-import ConfigGeneric, {type ConfigGenericProps, type ConfigGenericState} from './ConfigGeneric';
-
-const styles: Record<string, any> = {
-    fullWidth: {
-        width: '100%',
-    },
-};
-
-interface ConfigTextSendToProps extends ConfigGenericProps {
-    schema: ConfigItemSendTo;
-}
-
-interface ConfigTextSendToState extends ConfigGenericState {
-    text?: string;
-    context?: string;
-}
-
-class ConfigTextSendTo extends ConfigGeneric<ConfigTextSendToProps, ConfigTextSendToState> {
-    componentDidMount() {
-        super.componentDidMount();
-
-        this.askInstance();
-    }
-
-    askInstance() {
-        if (this.props.alive) {
-            let data: Record<string, any> | undefined = this.props.schema.data;
-            if (data === undefined && this.props.schema.jsonData) {
-                const dataStr: string = this.getPattern(this.props.schema.jsonData);
-                try {
-                    data = JSON.parse(dataStr);
-                } catch (e) {
-                    console.error(`Cannot parse json data: ${dataStr}`);
-                }
-            }
-
-            if (data === undefined) {
-                data = null;
-            }
-
-            this.props.socket.sendTo(`${this.props.adapterName}.${this.props.instance}`, this.props.schema.command || 'send', data)
-                .then(text => this.setState({ text: text || '', context: this.getContext() }));
-        }
-    }
-
-    getContext() {
-        const context: Record<string, any> = {};
-        if (Array.isArray(this.props.schema.alsoDependsOn)) {
-            this.props.schema.alsoDependsOn.forEach(attr =>
-                context[attr] = ConfigGeneric.getValue(this.props.data, attr));
-        }
-        return JSON.stringify(context);
-    }
-
-    renderItem(/* error, disabled, defaultValue */) {
-        if (this.state.text === undefined) {
-            return null;
-        }
-
-        if (this.props.alive) {
-            const context = this.getContext();
-            if (context !== this.state.context) {
-                setTimeout(() => this.askInstance(), 300);
-            }
-        }
-
-        if (this.props.schema.container === 'text') {
-            return <TextField
-                variant="standard"
-                fullWidth
-                InputProps={{
-                    endAdornment: this.props.schema.copyToClipboard ? <IconButton
-                        size="small"
-                        onClick={() => {
-                            Utils.copyToClipboard(this.state.text);
-                            window.alert('Copied');
-                        }}
-                    >
-                        <IconCopy />
-                    </IconButton> : undefined,
-                }}
-                value={this.state.text}
-                label={this.getText(this.props.schema.label)}
-                helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
-            />;
-        }
-        return <div className={this.props.classes.fullWidth}>{this.state.text}</div>;
-    }
-}
-
-export default withStyles(styles)(ConfigTextSendTo);

package/src/JsonConfigComponent/ConfigTimePicker.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-
-import { TimePicker } from '@mui/x-date-pickers';
-
-import type { ConfigItemTimePicker } from '#JC/types';
-import ConfigGeneric, { type ConfigGenericProps } from './ConfigGeneric';
-
-interface ConfigTimePickerProps extends ConfigGenericProps {
-    schema: ConfigItemTimePicker;
-    dialogName?: string;
-}
-
-export default class ConfigTimePicker extends ConfigGeneric<ConfigTimePickerProps> {
-    componentDidMount() {
-        super.componentDidMount();
-        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-        this.setState({ value });
-    }
-
-    renderItem(_error: unknown, disabled: boolean) {
-        // the format could be 'HH:mm:ss' or 'HH:mm'
-        const shortFormat = this.props.schema.returnFormat !== 'HH:mm:ss';
-
-        const value: never = new Date(Date.parse(`Thu, 01 Jan 1970 ${this.state.value || '00:00:00'}`)) as never;
-
-        return <TimePicker
-            sx={theme => ({
-                width: '100%',
-                borderBottom: `1px solid ${theme.palette.text.primary}`,
-                '& fieldset': {
-                    display: 'none',
-                },
-                '& input': {
-                    padding: `${theme.spacing(1.5)} 0 4px 0`,
-                },
-                '& .MuiInputAdornment-root': {
-                    marginLeft: 0,
-                    marginTop: 1, // it is already in spaces
-                },
-                '& label': {
-                    transform: 'translate(0px, -9px) scale(0.75)',
-                },
-            })}
-            ampm={this.props.systemConfig.dateFormat.includes('/')}
-            timeSteps={this.props.schema.timeSteps || this.props.schema.timesteps || { hours: 1, minutes: 5, seconds: 5 }}
-            format={this.props.schema.format || 'HH:mm:ss'}
-            disabled={!!disabled}
-            value={value}
-            onChange={(newValue: Date) => {
-                let strValue = newValue.toTimeString();
-                strValue = (newValue as any) instanceof Date ? (newValue as Date).toTimeString().split(' ')[0] : newValue.toTimeString();
-                if (shortFormat) {
-                    strValue = strValue.split(':').slice(0, 2).join(':');
-                }
-
-                this.setState({ value: strValue }, () =>
-                    this.onChange(this.props.attr, this.state.value));
-            }}
-            views={this.props.schema.views || ['hours', 'minutes', 'seconds']}
-            label={this.getText(this.props.schema.label)}
-        />;
-    }
-}

package/src/JsonConfigComponent/ConfigTopic.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
-
-import { TextField } from '@mui/material';
-
-import ConfigGeneric from './ConfigGeneric';
-
-const styles = () => ({
-    fullWidth: {
-        width: '100%',
-    },
-    icon: {
-        width: 16,
-        height: 16,
-        marginRight: 8,
-    },
-});
-
-function convertID2Topic(id, prefix, namespace) {
-    let topic;
-    if (namespace && id.substring(0, namespace.length) === namespace) {
-        topic = id.substring(namespace.length + 1);
-    } else {
-        topic = id;
-    }
-    topic = topic.replace(/\./g, '/').replace(/_/g, ' ');
-    return topic;
-}
-
-class ConfigTopic extends ConfigGeneric {
-    componentDidMount() {
-        super.componentDidMount();
-        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-        if (!value && this.props.customObj && this.props.customObj._id) {
-            const topic = convertID2Topic(this.props.customObj._id, null, `${this.props.adapterName}.${this.props.instance}`);
-            this.setState({ value: topic });
-        } else {
-            this.setState({ value: value || '' });
-        }
-    }
-
-    renderItem(error, disabled /* , defaultValue */) {
-        return <TextField
-            variant="standard"
-            fullWidth
-            inputProps={{ maxLength: this.props.schema.maxLength || this.props.schema.max || undefined }}
-            value={this.state.value}
-            error={!!error}
-            disabled={disabled}
-            placeholder={this.getText(this.props.schema.placeholder)}
-            label={this.getText(this.props.schema.label)}
-            helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
-            onChange={e => {
-                const value = e.target.value;
-                this.setState({ value }, () =>
-                    this.onChange(this.props.attr, value));
-            }}
-        />;
-    }
-}
-
-ConfigTopic.propTypes = {
-    socket: PropTypes.object.isRequired,
-    themeType: PropTypes.string,
-    themeName: PropTypes.string,
-    style: PropTypes.object,
-    className: PropTypes.string,
-    data: PropTypes.object.isRequired,
-    schema: PropTypes.object,
-    onError: PropTypes.func,
-    onChange: PropTypes.func,
-    adapterName: PropTypes.string,
-    instance: PropTypes.number,
-    customObj: PropTypes.object,
-};
-
-export default withStyles(styles)(ConfigTopic);

package/src/JsonConfigComponent/ConfigUUID.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import {
-    TextField,
-    IconButton,
-} from '@mui/material';
-
-import { ContentCopy as IconCopy } from '@mui/icons-material';
-
-import { Utils, I18n } from '@iobroker/adapter-react-v5';
-
-import type { ConfigItemUUID } from '#JC/types';
-import ConfigGeneric, {type ConfigGenericProps, type ConfigGenericState} from './ConfigGeneric';
-
-interface ConfigUUIDProps extends ConfigGenericProps {
-    schema: ConfigItemUUID;
-}
-
-interface ConfigUUIDState extends ConfigGenericState {
-    uuid?: string;
-}
-
-class ConfigUUID extends ConfigGeneric<ConfigUUIDProps, ConfigUUIDState> {
-    async componentDidMount() {
-        super.componentDidMount();
-
-        const uuidObj = await this.props.socket.getObject('system.meta.uuid');
-        this.setState({ uuid: uuidObj?.native?.uuid || 'unknown' });
-    }
-
-    renderItem(error: unknown, disabled: boolean) {
-        return <TextField
-            variant="standard"
-            fullWidth
-            error={!!error}
-            disabled={!!disabled}
-            inputProps={{ readOnly: true }}
-            // eslint-disable-next-line react/jsx-no-duplicate-props
-            InputProps={{
-                endAdornment: <IconButton onClick={() => {
-                    Utils.copyToClipboard(this.state.uuid);
-                    window.alert(I18n.t('ra_Copied %s', this.state.uuid));
-                }}
-                >
-                    <IconCopy />
-                </IconButton>,
-            }}
-            value={this.state.uuid || ''}
-            label={this.getText(this.props.schema.label) || I18n.t('ra_Serial number (UUID)')}
-            helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
-        />;
-    }
-}
-
-export default ConfigUUID;