@iobroker/json-config 6.17.12 → 6.17.14

package/src/JsonConfigComponent/ConfigLanguage.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { withStyles } from '@mui/styles';
-
-import {
-    InputLabel,
-    MenuItem,
-    FormHelperText,
-    FormControl,
-    Select,
-} from '@mui/material';
-
-import { I18n } from '@iobroker/adapter-react-v5';
-
-import type { ConfigItemLanguage } from '#JC/types';
-import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
-
-const styles: Record<string, any> = {
-    fullWidth: {
-        width: '100%',
-    },
-};
-
-const LANGUAGES = [
-    {
-        value: 'en',
-        label: 'English',
-    },
-    {
-        value: 'de',
-        label: 'Deutsch',
-    },
-    {
-        value: 'ru',
-        label: 'русский',
-    },
-    {
-        value: 'pt',
-        label: 'Portugues',
-    },
-    {
-        value: 'nl',
-        label: 'Nederlands',
-    },
-    {
-        value: 'fr',
-        label: 'français',
-    },
-    {
-        value: 'it',
-        label: 'Italiano',
-    },
-    {
-        value: 'es',
-        label: 'Espanol',
-    },
-    {
-        value: 'pl',
-        label: 'Polski',
-    },
-    {
-        value: 'uk',
-        label: 'Український',
-    },
-    {
-        value: 'zh-ch',
-        label: '简体中文',
-    },
-] as const;
-
-interface LanguageSelectOption {
-    /** Value to save */
-    value: string;
-    /** Label to show */
-    label: string;
-}
-
-interface ConfigLanguageProps extends ConfigGenericProps {
-    schema: ConfigItemLanguage;
-}
-
-interface ConfigLanguageState extends ConfigGenericState {
-    selectOptions: LanguageSelectOption[];
-}
-
-class ConfigLanguage extends ConfigGeneric<ConfigLanguageProps, ConfigLanguageState> {
-    componentDidMount() {
-        super.componentDidMount();
-        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-        const languages: LanguageSelectOption[] = [...LANGUAGES];
-        if (this.props.schema.system) {
-            languages.unshift({ value: '', label: I18n.t('ra_System language') });
-        } else {
-            languages.unshift({ value: '', label: I18n.t('ra_none') });
-        }
-
-        this.setState({ value: this.props.schema.system ? (value || '') : (value || I18n.getLanguage()), selectOptions: languages });
-    }
-
-    renderItem(error: unknown, disabled: boolean): React.JSX.Element | null {
-        if (!this.state.selectOptions) {
-            return null;
-        }
-
-        const item = this.state.selectOptions?.find(it => it.value === this.state.value || (!it.value && !this.state.value));
-
-        return <FormControl className={this.props.classes.fullWidth} variant="standard">
-            {this.props.schema.label ? <InputLabel>{this.getText(this.props.schema.label)}</InputLabel> : null}
-            <Select
-                variant="standard"
-                error={!!error}
-                disabled={disabled}
-                value={this.state.value || '_'}
-                renderValue={() => this.getText(item?.label, this.props.schema.noTranslation)}
-                onChange={e => {
-                    let { value } = e.target;
-                    if (value === '_') {
-                        value = '';
-                    }
-
-                    this.setState({ value }, () => {
-                        this.onChange(this.props.attr, value);
-                        if (this.props.schema.changeGuiLanguage) {
-                            if (value) {
-                                if (value === I18n.getLanguage()) {
-                                    return;
-                                }
-                                I18n.setLanguage(value);
-                                this.props.changeLanguage && this.props.changeLanguage();
-                            } else {
-                                this.props.socket.getSystemConfig()
-                                    .then((systemConfig: ioBroker.SystemConfigObject) => {
-                                        if (systemConfig.common.language === I18n.getLanguage()) {
-                                            return;
-                                        }
-                                        if (systemConfig.common.language) {
-                                            I18n.setLanguage(systemConfig.common.language);
-                                            this.props.changeLanguage && this.props.changeLanguage();
-                                        }
-                                    });
-                            }
-                        }
-                    });
-                }}
-            >
-                {this.state.selectOptions?.map(it =>
-                    <MenuItem key={it.value} value={it.value}>{it.label}</MenuItem>)}
-            </Select>
-            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
-        </FormControl>;
-    }
-}
-
-export default withStyles(styles)(ConfigLanguage);

package/src/JsonConfigComponent/ConfigLicense.jsx

@@ -1,148 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    LinearProgress,
-    FormControlLabel,
-    Checkbox,
-} from '@mui/material';
-
-import { Check, Close } from '@mui/icons-material';
-
-import { I18n } from '@iobroker/adapter-react-v5';
-
-import ConfigGeneric from './ConfigGeneric';
-
-class ConfigLicense extends ConfigGeneric {
-    constructor(props) {
-        super(props);
-        this.scrollRef = React.createRef();
-        this.noPlaceRequired = true;
-    }
-
-    scrolledDown() {
-        if (!this.scrollRef.current) {
-            return false;
-        }
-        return this.scrollRef.current.offsetHeight + this.scrollRef.current.scrollTop >= this.scrollRef.current.scrollHeight;
-    }
-
-    componentDidMount() {
-        super.componentDidMount();
-        if (!ConfigGeneric.getValue(this.props.data, this.props.attr)) {
-            if (this.props.schema.licenseUrl) {
-                this.setState({ showLicenseDialog: true, loading: true, scrolledDown: false });
-                fetch(this.props.schema.licenseUrl)
-                    .then(res => res.text())
-                    .then(text => this.setState({ license: text, loading: false }))
-                    .catch(e => this.setState({
-                        license: e.toString(), loading: false, error: true, scrolledDown: false,
-                    }));
-            } else {
-                this.setState({ showLicenseDialog: true, scrolledDown: false });
-            }
-            setTimeout(() => {
-                // install scroll handler
-                if (this.scrollRef.current) {
-                    const scrolledDown = this.scrolledDown();
-                    if (!scrolledDown) {
-                        this.scrollRef.current.addEventListener('scroll', () => {
-                            if (!this.state.scrolledDown && this.scrolledDown()) {
-                                this.setState({ scrolledDown: true });
-                            }
-                        });
-                    } else {
-                        this.setState({ scrolledDown: true });
-                    }
-                }
-            }, 1000);
-        }
-    }
-
-    renderItem(/* error, disabled, defaultValue */) {
-        if (!this.state.showLicenseDialog) {
-            return null;
-        }
-
-        return <Dialog
-            maxWidth="lg"
-            open={!0}
-            onClose={(e, reason) => {
-                if (reason !== 'escapeKeyDown' && reason !== 'backdropClick') {
-                    this.setState({ showLicenseDialog: false });
-                }
-            }}
-        >
-            <DialogTitle>{this.props.schema.title ? I18n.t(this.props.schema.title) : I18n.t('ra_License agreement')}</DialogTitle>
-            <DialogContent>
-                {this.props.schema.licenseUrl ? <>
-                    {this.state.loading ? <LinearProgress /> : null}
-                    <pre
-                        ref={this.scrollRef}
-                        style={{
-                            width: '100%', height: '100%', overflowY: 'auto', fontSize: 14,
-                        }}
-                    >
-                        {this.state.license}
-                    </pre>
-                </> : null}
-                {!this.props.schema.licenseUrl && this.props.schema.texts ? <div
-                    ref={this.scrollRef}
-                    style={{
-                        width: '100%', height: '100%', overflowY: 'auto', fontSize: 14,
-                    }}
-                >
-                    {this.props.schema.texts.map(text => (this.props.schema.noTranslation ? <p>{text}</p> : <p>{I18n.t(text)}</p>))}
-                </div> : null}
-            </DialogContent>
-            <DialogActions>
-                {this.props.schema.checkBox ? <FormControlLabel
-                    control={<Checkbox checked={!!this.state.licenseChecked} onClick={() => this.setState({ licenseChecked: !this.state.licenseChecked })} />}
-                    label={I18n.t(this.props.schema.checkBox)}
-                /> : null}
-                <Button
-                    disabled={this.state.loading || this.state.error || (this.props.schema.checkBox && !this.state.licenseChecked) || !this.state.scrolledDown}
-                    onClick={() => {
-                        this.setState({ showLicenseDialog: null });
-                        this.onChange(this.props.attr, true);
-                    }}
-                    color="primary"
-                    variant="contained"
-                    startIcon={<Check />}
-                >
-                    {this.props.schema.agreeText ? I18n.t(this.props.schema.agreeText) : I18n.t('ra_Accept license')}
-                </Button>
-                <Button
-                    onClick={() => {
-                        this.setState({ showLicenseDialog: false });
-                        setTimeout(() => this.setState({ showLicenseDialog: true }), 2000);
-                    }}
-                    color="grey"
-                    variant="contained"
-                    startIcon={<Close />}
-                >
-                    {I18n.t('ra_Close')}
-                </Button>
-            </DialogActions>
-        </Dialog>;
-    }
-}
-
-ConfigLicense.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,
-};
-
-export default ConfigLicense;

package/src/JsonConfigComponent/ConfigNumber.tsx

@@ -1,207 +0,0 @@
-import React from 'react';
-import { withStyles } from '@mui/styles';
-
-import { Autocomplete, TextField, FormControl } from '@mui/material';
-
-import { I18n } from '@iobroker/adapter-react-v5';
-
-import type { ConfigItemNumber } from '#JC/types';
-import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
-
-const styles: Record<string, any> = {
-    indeterminate: {
-        opacity: 0.5,
-    },
-    control: {
-        flexDirection: 'row',
-        width: '100%',
-    },
-};
-
-interface ConfigNumberProps extends ConfigGenericProps {
-    schema: ConfigItemNumber;
-}
-
-interface ConfigNumberState extends ConfigGenericState {
-    _value: string;
-    oldValue: string | null;
-}
-
-class ConfigNumber extends ConfigGeneric<ConfigNumberProps, ConfigNumberState> {
-    private updateTimeout?: ReturnType<typeof setTimeout>;
-
-    componentDidMount() {
-        super.componentDidMount();
-        let _value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-
-        if (_value === null || _value === undefined) {
-            _value = '';
-        }
-
-        if (Array.isArray(_value) && this.props.multiEdit) {
-            _value = ConfigGeneric.DIFFERENT_VALUE;
-            this.setState({ _value, oldValue: _value });
-            return;
-        }
-
-        this.setState({ _value: _value.toString(), oldValue: _value.toString() });
-    }
-
-    static getDerivedStateFromProps(props: ConfigNumberProps, state: ConfigNumberState) {
-        if (
-            (props.schema.min !== undefined && props.schema.min < 0) ||
-            (props.schema.max !== undefined && props.schema.max < 0)
-        ) {
-            return null;
-        }
-        const _value = ConfigGeneric.getValue(props.data, props.attr);
-
-        if (props.multiEdit && state._value === ConfigGeneric.DIFFERENT_VALUE) {
-            return ConfigGeneric.DIFFERENT_VALUE;
-        }
-
-        if (
-            _value === null ||
-            _value === undefined ||
-            state.oldValue === null ||
-            state.oldValue === undefined ||
-            (_value.toString() !== parseFloat(state._value).toString() &&
-                _value.toString() !== state.oldValue.toString())
-        ) {
-            return { _value };
-        }
-
-        return null;
-    }
-
-    checkValue(value: string): string | null {
-        if (value === null || value === undefined) {
-            return null;
-        }
-        value = value.toString().trim();
-        const f = value === '' ? 0 : parseFloat(value);
-
-        if (value !== '' && Number.isNaN(f)) {
-            return 'ra_Not a number';
-        }
-
-        // eslint-disable-next-line no-restricted-properties
-        if (value !== '' && window.isFinite(f)) {
-            if (this.props.schema.min !== undefined && f < this.props.schema.min) {
-                return 'ra_Too small';
-            }
-            if (this.props.schema.max !== undefined && f > this.props.schema.max) {
-                return 'ra_Too big';
-            }
-            if (value === '' || value === '-' || Number.isNaN(f)) {
-                return 'ra_Not a number';
-            }
-
-            return null;
-        }
-
-        return 'ra_Not a number';
-    }
-
-    renderItem(error: unknown, 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 = undefined;
-                this.setState({ oldValue: null });
-            }, 30);
-        } else if (this.updateTimeout) {
-            clearTimeout(this.updateTimeout);
-            this.updateTimeout = undefined;
-        }
-
-        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
-                freeSolo
-                value={arr[0]}
-                // @ts-expect-error needs investigation if this really has no effect
-                getOptionSelected={(option, value) => option.label === value.label}
-                onChange={(_, value: typeof arr[number]) => {
-                    this.onChange(this.props.attr, value?.value, () => {
-                        this.setState({ _value: value?.value, oldValue: this.state._value });
-                    });
-                }}
-                options={arr}
-                getOptionLabel={(option: typeof arr[number]) => option.label}
-                renderInput={params => (
-                    <TextField
-                        {...params}
-                        label={this.getText(this.props.schema.label)}
-                        variant="standard"
-                        inputProps={{ ...params.inputProps, readOnly: this.props.schema.readOnly || false }}
-                        error={!!error}
-                        placeholder={this.getText(this.props.schema.placeholder)}
-                        helperText={this.renderHelp(
-                            this.props.schema.help,
-                            this.props.schema.helpLink,
-                            this.props.schema.noTranslation,
-                        )}
-                        disabled={!!disabled}
-                    />
-                )}
-            />;
-        }
-        if (!error && this.state._value !== null && this.state._value !== undefined && this.state._value) {
-            error = this.checkValue(this.state._value);
-            if (error) {
-                error = I18n.t(error as string);
-            }
-        }
-
-        return <FormControl variant="standard" className={this.props.classes.control}>
-            <TextField
-                variant="standard"
-                type="number"
-                fullWidth
-                inputProps={{
-                    min: this.props.schema.min,
-                    max: this.props.schema.max,
-                    step: this.props.schema.step,
-                    readOnly: this.props.schema.readOnly || false,
-                }}
-                value={this.state._value === null || this.state._value === undefined ? '' : this.state._value}
-                error={!!error}
-                disabled={!!disabled}
-                onChange={e => {
-                    const _value = e.target.value; // value is always a string and it is validly formatted
-                    const _error = this.checkValue(_value);
-                    if (_error) {
-                        this.onError(this.props.attr, I18n.t(_error));
-                    } else {
-                        this.onError(this.props.attr); // clear error
-                    }
-
-                    this.setState({ _value, oldValue: this.state._value }, () =>
-                        this.onChange(this.props.attr, parseFloat(_value)));
-                }}
-                placeholder={this.getText(this.props.schema.placeholder)}
-                label={this.getText(this.props.schema.label)}
-                helperText={
-                    error && typeof error === 'string'
-                        ? error
-                        : this.renderHelp(
-                            this.props.schema.help,
-                            this.props.schema.helpLink,
-                            this.props.schema.noTranslation,
-                        )
-                }
-            />
-        </FormControl>;
-    }
-}
-
-export default withStyles(styles)(ConfigNumber);

package/src/JsonConfigComponent/ConfigObjectId.jsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
-
-import {
-    InputLabel,
-    FormControl,
-    Button,
-    TextField,
-} from '@mui/material';
-
-import { SelectID as DialogSelectID } from '@iobroker/adapter-react-v5';
-
-import ConfigGeneric from './ConfigGeneric';
-
-const styles = () => ({
-    fullWidth: {
-        width: '100%',
-    },
-    flex: {
-        display: 'flex',
-    },
-    button: {
-        height: 48,
-        marginLeft: 4,
-        minWidth: 48,
-    },
-});
-
-class ConfigObjectId extends ConfigGeneric {
-    async componentDidMount() {
-        super.componentDidMount();
-        const { data, attr } = this.props;
-        const value = ConfigGeneric.getValue(data, attr) || '';
-        this.setState({ value, initialized: true });
-    }
-
-    renderItem(error, disabled /* , defaultValue */) {
-        if (!this.state.initialized) {
-            return null;
-        }
-        const {
-            classes, schema, socket, attr,
-        } = this.props;
-        const { value, showSelectId } = this.state;
-
-        return <FormControl className={classes.fullWidth} variant="standard">
-            {schema.label ? <InputLabel shrink>{this.getText(schema.label)}</InputLabel> : null}
-            <div className={classes.flex}>
-                <TextField
-                    variant="standard"
-                    fullWidth
-                    value={value}
-                    error={!!error}
-                    disabled={disabled}
-                    placeholder={this.getText(schema.placeholder)}
-                    label={this.getText(schema.label)}
-                    helperText={this.renderHelp(schema.help, schema.helpLink, schema.noTranslation)}
-                    onChange={e => {
-                        const value_ = e.target.value;
-                        this.setState({ value: value_ }, () =>
-                            this.onChange(attr, value_));
-                    }}
-                />
-                <Button
-                    color="grey"
-                    className={this.props.classes.button}
-                    size="small"
-                    variant="outlined"
-                    onClick={() => this.setState({ showSelectId: true })}
-                >
-...
-                </Button>
-            </div>
-            {showSelectId ? <DialogSelectID
-                imagePrefix={this.props.imagePrefix === undefined ? '../..' : this.props.imagePrefix}
-                dateFormat={this.props.dateFormat}
-                isFloatComma={this.props.isFloatComma}
-                dialogName={`admin.${this.props.adapterName}`}
-                filterFunc={schema.filterFunc}
-                themeType={this.props.themeType}
-                types={schema.types ? (Array.isArray(schema.types) ? schema.types : [schema.types]) : undefined}
-                customFilter={schema.customFilter}
-                filters={schema.filters}
-                socket={socket}
-                statesOnly={schema.all === undefined ? true : schema.all}
-                selected={value}
-                root={schema.root}
-                onClose={() => this.setState({ showSelectId: false })}
-                onOk={value_ =>
-                    this.setState({ showSelectId: false, value: value_ }, () =>
-                        this.onChange(attr, value_))}
-            /> : null}
-        </FormControl>;
-    }
-}
-
-ConfigObjectId.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,
-    dateFormat: PropTypes.string,
-    isFloatComma: PropTypes.bool,
-    imagePrefix: PropTypes.string,
-};
-
-export default withStyles(styles)(ConfigObjectId);