@iobroker/json-config 6.17.13 → 6.17.15

package/src/JsonConfigComponent/ConfigCheckbox.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { withStyles } from '@mui/styles';
-
-import {
-    FormControlLabel,
-    Checkbox,
-    FormHelperText,
-    FormControl,
-} from '@mui/material';
-
-import  { type AdminConnection, I18n } from '@iobroker/adapter-react-v5';
-import type { ThemeName, ThemeType } from '@iobroker/adapter-react-v5/types';
-
-import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
-import type {ConfigItemCheckbox} from "#JC/types";
-
-const styles: Record<string, any> = {
-    error: {
-        color: 'red',
-    },
-};
-
-interface ConfigCheckboxProps extends ConfigGenericProps {
-    schema: ConfigItemCheckbox;
-}
-
-class ConfigCheckbox extends ConfigGeneric<ConfigCheckboxProps, ConfigGenericState> {
-    renderItem(error: unknown, disabled: boolean): React.JSX.Element {
-        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-        const isIndeterminate = Array.isArray(value);
-
-        return <FormControl className={this.props.classes.fullWidth} variant="standard">
-            <FormControlLabel
-                onClick={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    if (!disabled) {
-                        this.onChange(this.props.attr, !value);
-                    }
-                }}
-                control={<Checkbox
-                    indeterminate={isIndeterminate}
-                    checked={!!value}
-                    onChange={e => {
-                        if (isIndeterminate) {
-                            this.onChange(this.props.attr, true);
-                        } else {
-                            this.onChange(this.props.attr, e.target.checked);
-                        }
-                    }}
-                    disabled={disabled}
-                />}
-                label={this.getText(this.props.schema.label)}
-            />
-            <FormHelperText className={this.props.classes.error}>
-                {
-                    error ? (this.props.schema.validatorErrorText ? I18n.t(this.props.schema.validatorErrorText) : I18n.t('ra_Error')) :
-                        null
-                }
-            </FormHelperText>
-            {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)(ConfigCheckbox);

package/src/JsonConfigComponent/ConfigChip.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
-
-import {
-    FormHelperText,
-    FormControl,
-} from '@mui/material';
-
-import ConfigGeneric from './ConfigGeneric';
-import ChipInput from './ChipInput';
-
-const styles = () => ({
-    fullWidth: {
-        width: '100%',
-    },
-});
-
-class ConfigLanguage extends ConfigGeneric {
-    componentDidMount() {
-        super.componentDidMount();
-        const { data, attr } = this.props;
-        const value = ConfigGeneric.getValue(data, attr);
-        if (this.props.schema.delimiter && typeof value === 'string') {
-            const parts = value.split(this.props.schema.delimiter).map(a => a.trim()).filter(a => a);
-            this.setState({ value: parts });
-        } else {
-            this.setState({ value: value || [] });
-        }
-    }
-
-    renderItem(error, disabled /* , defaultValue */) {
-        const { attr, schema } = this.props;
-        const { value } = this.state;
-        return <FormControl className={this.props.classes.fullWidth} variant="standard">
-            <ChipInput
-                value={value}
-                disabled={!!disabled}
-                label={this.getText(schema.label)}
-                error={!!error}
-                onAdd={chip => {
-                    const newValue = JSON.parse(JSON.stringify(value));
-                    newValue.push(chip);
-                    this.setState({ value: newValue, prevValue: '' }, () => {
-                        if (this.props.schema.delimiter) {
-                            this.onChange(attr, newValue.join(`${this.props.schema.delimiter} `));
-                        } else {
-                            this.onChange(attr, newValue);
-                        }
-                    });
-                }}
-                onDelete={(chip, index) => {
-                    const newValue = JSON.parse(JSON.stringify(value));
-                    newValue.splice(index, 1);
-                    this.setState({ value: newValue, prevValue: '' }, () => {
-                        if (this.props.schema.delimiter) {
-                            this.onChange(attr, newValue.join(`${this.props.schema.delimiter} `));
-                        } else {
-                            this.onChange(attr, newValue);
-                        }
-                    });
-                }}
-            />
-            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
-        </FormControl>;
-    }
-}
-
-ConfigLanguage.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 withStyles(styles)(ConfigLanguage);

package/src/JsonConfigComponent/ConfigColor.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import { ChromePicker, type ColorResult, type RGBColor } from 'react-color';
-
-import {
-    IconButton,
-    TextField,
-    Dialog,
-} from '@mui/material';
-
-import { Close as ClearIcon } from '@mui/icons-material';
-
-import { Utils } from '@iobroker/adapter-react-v5';
-
-import type { ConfigItemText } from '#JC/types';
-import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
-
-interface ConfigColorProps extends ConfigGenericProps {
-    schema: ConfigItemText;
-}
-
-interface ConfigColorState extends ConfigGenericState {
-    showColorDialog?: boolean;
-    colorDialogValue?: string;
-}
-
-class ConfigColor extends ConfigGeneric<ConfigColorProps, ConfigColorState> {
-    renderColorDialog() {
-        return !!this.state.showColorDialog && <Dialog
-            onClose={() => this.setState({ showColorDialog: false })}
-            open={this.state.showColorDialog}
-        >
-            <ChromePicker
-                color={this.state.colorDialogValue}
-                onChange={(color: ColorResult) =>
-                    this.setState({ colorDialogValue: color.hex }, () =>
-                        this.onChange(this.props.attr, this.state.colorDialogValue))}
-            />
-        </Dialog>;
-    }
-
-    renderItem(_error: unknown, disabled: boolean /* , defaultValue */) {
-        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-        let textColor = Utils.isUseBright(value, null);
-        if (textColor === null) {
-            textColor = undefined;
-        }
-        return <>
-            {this.renderColorDialog()}
-            <TextField
-                variant="standard"
-                disabled={!!disabled}
-                style={{ minWidth: 100, width: 'calc(100% - 8px)' }}
-                label={this.getText(this.props.schema.label)}
-                value={value || ''}
-                onClick={() => !this.props.schema.readOnly && this.setState({ showColorDialog: true, colorDialogValue: value || '' })}
-                onChange={e => {
-                    const color = e.target.value;
-                    this.onChange(this.props.attr, color);
-                }}
-                inputProps={{
-                    style: {
-                        // paddingLeft: noPadding ? 0 : 8,
-                        backgroundColor: value,
-                        color: textColor ? '#FFF' : '#000',
-                    },
-                    readOnly: this.props.schema.readOnly || false,
-                }}
-                // eslint-disable-next-line react/jsx-no-duplicate-props
-                InputProps={{
-                    endAdornment: value && !this.props.schema.noClearButton ? <IconButton
-                        size="small"
-                        onClick={e => {
-                            e.stopPropagation();
-                            this.onChange(this.props.attr, '');
-                        }}
-                    >
-                        <ClearIcon />
-                    </IconButton> : undefined,
-                }}
-                InputLabelProps={{ shrink: true }}
-            />
-        </>;
-    }
-}
-
-export default ConfigColor;

package/src/JsonConfigComponent/ConfigCoordinates.tsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import { withStyles } from '@mui/styles';
-
-import {
-    TextField,
-    Fab,
-    FormControlLabel,
-    Checkbox,
-} from '@mui/material';
-
-import {
-    GpsFixed as IconGpsFixed,
-    LocationOn as IconLocationOn,
-} from '@mui/icons-material';
-
-import { I18n } from '@iobroker/adapter-react-v5';
-
-import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
-import type { ConfigItemCoordinates } from '#JC/types';
-
-const styles: Record<string, any> = {
-    width: {
-        width: 'calc(100% - 85px)',
-    },
-    width50: {
-        width: 120,
-        marginRight: 5,
-    },
-};
-
-interface ConfigCoordinatesProps extends ConfigGenericProps {
-    classes: Record<string, string>;
-    schema: ConfigItemCoordinates;
-}
-
-interface ConfigCoordinatesState extends ConfigGenericState {
-    useSystem?: boolean;
-    longitude?: string | number;
-    latitude?: string | number;
-}
-
-class ConfigCoordinates extends ConfigGeneric<ConfigCoordinatesProps, ConfigCoordinatesState> {
-    componentDidMount() {
-        super.componentDidMount();
-
-        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-        this.setState({ value });
-
-        const newState: Partial<ConfigCoordinatesState> = {};
-        if (this.props.schema.useSystemName) {
-            newState.useSystem = !!ConfigGeneric.getValue(this.props.data, this.props.schema.useSystemName);
-        }
-        if (this.props.schema.longitudeName && this.props.schema.latitudeName) {
-            newState.longitude = ConfigGeneric.getValue(this.props.data, this.props.schema.longitudeName);
-            newState.latitude = ConfigGeneric.getValue(this.props.data, this.props.schema.latitudeName);
-            if (!newState.longitude && !newState.latitude && this.props.schema.autoInit) {
-                setTimeout(() => this.getCoordinates(), 300);
-            }
-        } else {
-            const value_ = ConfigGeneric.getValue(this.props.data, this.props.attr);
-            if (!value_ && this.props.schema.autoInit) {
-                setTimeout(() => this.getCoordinates(), 300);
-            }
-        }
-        Object.keys(newState).length && setTimeout(() => this.setState(newState as ConfigCoordinatesState), 50);
-    }
-
-    async getSystemCoordinates() {
-        const obj = await this.props.socket.getCompactSystemConfig();
-        if (obj?.common && (obj.common.longitude || obj.common.latitude)) {
-            window.alert(I18n.t('ra_Used system settings'));
-            if (this.props.schema.longitudeName && this.props.schema.latitudeName) {
-                this.setState(
-                    {
-                        longitude: obj.common.longitude,
-                        latitude: obj.common.latitude,
-                    },
-                    async () => {
-                        await this.onChange(this.props.schema.longitudeName, (obj.common.longitude || '').trim());
-                        await this.onChange(this.props.schema.latitudeName, (obj.common.latitude || '').trim());
-                    },
-                );
-            } else {
-                const value = obj.common.latitude + (this.props.schema.divider || ',') + obj.common.longitude;
-                this.setState(
-                    {
-                        value,
-                    },
-                    () => {
-                        this.onChange(this.props.attr, value);
-                    },
-                );
-            }
-        } else {
-            window.alert(
-                I18n.t(
-                    'ra_Cannot determine position: System settings are empty and GPS detection is disabled in browser',
-                ),
-            );
-        }
-    }
-
-    getCoordinates() {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(
-                position => {
-                    if (position?.coords) {
-                        if (this.props.schema.longitudeName && this.props.schema.latitudeName) {
-                            this.setState(
-                                {
-                                    longitude: position.coords.longitude,
-                                    latitude: position.coords.latitude,
-                                },
-                                async () => {
-                                    await this.onChange(
-                                        this.props.schema.longitudeName,
-                                        position.coords.longitude || '',
-                                    );
-                                    await this.onChange(this.props.schema.latitudeName, position.coords.latitude || '');
-                                },
-                            );
-                        } else {
-                            const value =
-                                position.coords.latitude +
-                                (this.props.schema.divider || ',') +
-                                position.coords.longitude;
-                            this.setState({ value }, () => {
-                                this.onChange(this.props.attr, value);
-                            });
-                        }
-                    } else {
-                        this.getSystemCoordinates();
-                    }
-                },
-                error => {
-                    console.error(`Cannot determine coordinates from browser: ${error}`);
-                    this.getSystemCoordinates();
-                },
-            );
-        } else {
-            this.getSystemCoordinates();
-        }
-    }
-
-    renderItem(error: string, disabled: boolean /* , defaultValue */) {
-        return <>
-            {this.props.schema.useSystemName ? <FormControlLabel
-                control={
-                    <Checkbox
-                        checked={!!this.state.useSystem}
-                        onChange={e => {
-                            const useSystem = e.target.checked;
-                            if (useSystem) {
-                                this.getSystemCoordinates();
-                            }
-                            this.setState({ useSystem }, () =>
-                                this.onChange(this.props.schema.useSystemName, useSystem));
-                        }}
-                    />
-                }
-                label={I18n.t('ra_Use system settings for position')}
-            /> : null}
-            {this.props.schema.longitudeName && this.props.schema.latitudeName ?
-                <TextField
-                    variant="standard"
-                    className={this.props.classes.width50}
-                    value={this.state.longitude ?? ''}
-                    error={!!error}
-                    disabled={this.state.useSystem || !!disabled}
-                    onChange={e => {
-                        const longitude = e.target.value;
-                        this.setState({ longitude }, () => {
-                            this.onChange(this.props.schema.longitudeName, (longitude || '').trim());
-                        });
-                    }}
-                    label={I18n.t('ra_Longitude')}
-                /> : null}
-            {this.props.schema.longitudeName && this.props.schema.latitudeName ?
-                <TextField
-                    variant="standard"
-                    className={this.props.classes.width50}
-                    value={this.state.latitude ?? ''}
-                    error={!!error}
-                    disabled={this.state.useSystem || !!disabled}
-                    onChange={e => {
-                        const latitude = e.target.value;
-                        this.setState({ latitude }, () =>
-                            this.onChange(this.props.schema.latitudeName, (latitude || '').trim()));
-                    }}
-                    label={I18n.t('ra_Latitude')}
-                /> : null}
-            {!this.props.schema.longitudeName || !this.props.schema.latitudeName ?
-                <TextField
-                    variant="standard"
-                    className={this.props.classes.width}
-                    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.state.useSystem,
-                    }}
-                    onChange={e => {
-                        const value = e.target.value;
-                        this.setState({ value }, () => this.onChange(this.props.attr, (value || '').trim()));
-                    }}
-                    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,
-                    )}
-                /> : null}
-            {!this.state.useSystem ? <Fab
-                size="small"
-                onClick={() => this.getCoordinates()}
-                title={I18n.t('ra_Take browser position')}
-                style={{ marginRight: 4 }}
-            >
-                <IconLocationOn />
-            </Fab> : null}
-            {!this.state.useSystem ? <Fab
-                size="small"
-                onClick={() => this.getSystemCoordinates()}
-                title={I18n.t('ra_Take position from system settings')}
-            >
-                <IconGpsFixed />
-            </Fab> : null}
-        </>;
-    }
-}
-
-export default withStyles(styles)(ConfigCoordinates);