@iobroker/json-config 6.17.12 → 6.17.14

package/src/JsonConfigComponent/ConfigPanel.tsx

@@ -1,360 +0,0 @@
-import React, { type JSXElementConstructor } from 'react';
-import { withStyles } from '@mui/styles';
-
-import {
-    Grid,
-    Accordion,
-    AccordionSummary,
-    AccordionDetails,
-    Typography, type Theme,
-} from '@mui/material';
-
-import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-
-import { Utils } from '@iobroker/adapter-react-v5';
-import type { ConfigItemPanel } from '#JC/types';
-
-import ConfigGeneric, { type ConfigGenericState, type ConfigGenericProps } from './ConfigGeneric';
-// eslint-disable-next-line import/no-cycle
-import ConfigAccordion from './ConfigAccordion';
-import ConfigAlive from './ConfigAlive';
-import ConfigAutocomplete from './ConfigAutocomplete';
-import ConfigAutocompleteSendTo from './ConfigAutocompleteSendTo';
-import ConfigCRON from './ConfigCRON';
-import ConfigCertificateSelect from './ConfigCertificateSelect';
-import ConfigCertificates from './ConfigCertificates';
-import ConfigCertCollection from './ConfigCertCollection';
-import ConfigCheckLicense from './ConfigCheckLicense';
-import ConfigCheckbox from './ConfigCheckbox';
-import ConfigChip from './ConfigChip';
-import ConfigColor from './ConfigColor';
-import ConfigCoordinates from './ConfigCoordinates';
-import ConfigCustom from './ConfigCustom';
-import ConfigDatePicker from './ConfigDatePicker';
-import ConfigDeviceManager from './ConfigDeviceManager';
-import ConfigFile from './ConfigFile';
-import ConfigFileSelector from './ConfigFileSelector';
-import ConfigFunc from './ConfigFunc';
-import ConfigIP from './ConfigIP';
-import ConfigImageSendTo from './ConfigImageSendTo';
-import ConfigImageUpload from './ConfigImageUpload';
-import ConfigInstanceSelect from './ConfigInstanceSelect';
-import ConfigInterface from './ConfigInterface';
-import ConfigJsonEditor from './ConfigJsonEditor';
-import ConfigLanguage from './ConfigLanguage';
-import ConfigLicense from './ConfigLicense';
-import ConfigNumber from './ConfigNumber';
-import ConfigObjectId from './ConfigObjectId';
-import ConfigPassword from './ConfigPassword';
-import ConfigPattern from './ConfigPattern';
-import ConfigPort from './ConfigPort';
-import ConfigRoom from './ConfigRoom';
-import ConfigSelect from './ConfigSelect';
-import ConfigSelectSendTo from './ConfigSelectSendTo';
-import ConfigSendto from './ConfigSendto';
-import ConfigSetState from './ConfigSetState';
-import ConfigSlider from './ConfigSlider';
-import ConfigStaticDivider from './ConfigStaticDivider';
-import ConfigStaticHeader from './ConfigStaticHeader';
-import ConfigStaticImage from './ConfigStaticImage';
-import ConfigStaticText from './ConfigStaticText';
-// eslint-disable-next-line import/no-cycle
-import ConfigTable from './ConfigTable';
-import ConfigText from './ConfigText';
-import ConfigTextSendTo from './ConfigTextSendTo';
-import ConfigTimePicker from './ConfigTimePicker';
-import ConfigTopic from './ConfigTopic';
-import ConfigUUID from './ConfigUUID';
-import ConfigUser from './ConfigUser';
-
-const components = {
-    accordion: ConfigAccordion,
-    alive: ConfigAlive,
-    autocomplete: ConfigAutocomplete,
-    autocompleteSendTo: ConfigAutocompleteSendTo,
-    certCollection: ConfigCertCollection,
-    certificate: ConfigCertificateSelect,
-    certificates: ConfigCertificates,
-    checkbox: ConfigCheckbox,
-    checkLicense: ConfigCheckLicense,
-    chip: ConfigChip, // deprecated. Use "chips"
-    chips: ConfigChip,
-    color: ConfigColor,
-    coordinates: ConfigCoordinates,
-    cron: ConfigCRON,
-    custom: ConfigCustom,
-    datePicker: ConfigDatePicker,
-    deviceManager: ConfigDeviceManager,
-    divider: ConfigStaticDivider,
-    file: ConfigFile,
-    fileSelector: ConfigFileSelector,
-    func: ConfigFunc,
-    header: ConfigStaticHeader,
-    image: ConfigImageUpload,
-    imageSendTo: ConfigImageSendTo,
-    instance: ConfigInstanceSelect,
-    interface: ConfigInterface,
-    ip: ConfigIP,
-    jsonEditor: ConfigJsonEditor,
-    language: ConfigLanguage,
-    license: ConfigLicense,
-    number: ConfigNumber,
-    objectId: ConfigObjectId,
-    password: ConfigPassword,
-    pattern: ConfigPattern,
-    port: ConfigPort,
-    room: ConfigRoom,
-    select: ConfigSelect,
-    selectSendTo: ConfigSelectSendTo,
-    sendto: ConfigSendto,
-    sendTo: ConfigSendto,
-    setState: ConfigSetState,
-    slider: ConfigSlider,
-    staticImage: ConfigStaticImage,
-    staticLink: ConfigStaticText,
-    staticText: ConfigStaticText,
-    table: ConfigTable,
-    text: ConfigText,
-    textSendTo: ConfigTextSendTo,
-    timePicker: ConfigTimePicker,
-    topic: ConfigTopic,
-    uuid: ConfigUUID,
-    user: ConfigUser,
-};
-
-const styles: Record<string, any> = (theme: Theme) => ({
-    fullWidth: {
-        width: '100%',
-        // height: '100%',
-    },
-    paper: {
-        margin: 10,
-        height: 'calc(100vh - 235px) !important',
-        width: 'auto !important',
-        overflowY: 'auto',
-        paddingBottom: theme.spacing(1),
-    },
-    padding: {
-        padding: 10,
-    },
-    heading: {
-
-    },
-    primary: {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.mode === 'dark' ? 'inherit' : '#FFF',
-    },
-    secondary: {
-        backgroundColor: theme.palette.secondary.main,
-    },
-});
-
-interface ConfigPanelProps extends ConfigGenericProps {
-    schema: ConfigItemPanel;
-}
-interface ConfigPanelState extends ConfigGenericState {
-    expanded?: boolean;
-}
-
-class ConfigPanel extends ConfigGeneric<ConfigPanelProps, ConfigPanelState> {
-    componentDidMount() {
-        super.componentDidMount();
-        if (this.props.schema && this.props.schema.collapsable) {
-            this.setState({ expanded: ((window as any)._localStorage as Storage || window.localStorage).getItem(`${this.props.adapterName}.${this.props.attr}`) === 'true' });
-        }
-    }
-
-    renderItems(items: Record<string, any>, disabled: boolean) {
-        const classes = this.props.classes || {};
-
-        return items ? Object.keys(items).map(attr => {
-            if (this.props.multiEdit && items[attr].noMultiEdit) {
-                return null;
-            }
-
-            const type = items[attr].type || 'panel';
-            let ItemComponent;
-            if (type === 'custom') {
-                // name
-                // url
-                if (items[attr].url) {
-                    ItemComponent = ConfigCustom;
-                } else if (this.props.customs && this.props.customs[items[attr].component]) {
-                    ItemComponent = this.props.customs[items[attr].component];
-                } else {
-                    console.error(`Cannot find custom component: ${items[attr].component}`);
-                    ItemComponent = ConfigGeneric;
-                }
-            } else if (type === 'panel') {
-                // eslint-disable-next-line no-use-before-define
-                ItemComponent = ConfigPanelStyled;
-            } else {
-                ItemComponent = (components as Record<string, JSXElementConstructor<any>>)[type] || ConfigGeneric;
-            }
-
-            // @ts-expect-error how to solve it?
-            return <ItemComponent
-                key={`${attr}_${this.props.index === undefined ? '' : this.props.index}`}
-                index={this.props.index}
-                changed={this.props.changed}
-                arrayIndex={this.props.arrayIndex}
-                globalData={this.props.globalData}
-                onCommandRunning={this.props.onCommandRunning}
-                commandRunning={this.props.commandRunning}
-                className={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[attr]}
-                attr={attr}
-                table={this.props.table}
-            />;
-        }) : null;
-    }
-
-    render(): React.JSX.Element | null {
-        const schema = this.props.schema;
-
-        if (!schema) {
-            return null;
-        }
-
-        const { disabled, hidden } = this.calculate(schema);
-
-        const items   = this.props.schema.items;
-        const classes = this.props.classes || {};
-        const style = this.props.schema.style || {};
-
-        if (hidden) {
-            if (schema.hideOnlyControl) {
-                const item = <Grid
-                    item
-                    xs={schema.xs || undefined}
-                    lg={schema.lg || undefined}
-                    md={schema.md || undefined}
-                    sm={schema.sm || undefined}
-                    style={({
-                        marginBottom: 0, /* marginRight: 8, */
-                        textAlign: 'left',
-                        ...schema.style,
-                        ...(this.props.themeType === 'dark' ? schema.darkStyle : {}),
-                    })}
-                />;
-
-                if (schema.newLine) {
-                    return <>
-                        <div style={{ flexBasis: '100%', height: 0 }} />
-                        {item}
-                    </>;
-                }
-                return item;
-            }
-            return null;
-        }
-
-        if (this.props.table) {
-            return this.renderItems(items, disabled) as any as React.JSX.Element;
-        }
-
-        if (this.props.custom) {
-            return <Grid
-                key={`${this.props.attr}_${this.props.index}`}
-                container
-                className={classes.fullWidth}
-                spacing={2}
-                style={style}
-            >
-                {this.renderItems(items, disabled)}
-            </Grid>;
-        }
-
-        let content;
-        if (schema.collapsable) {
-            content = <Accordion
-                key={`${this.props.attr}_${this.props.index}`}
-                className={classes.fullWidth}
-                expanded={!!this.state.expanded}
-                onChange={() => {
-                    ((window as any)._localStorage as Storage || window.localStorage).setItem(`${this.props.adapterName}.${this.props.attr}`, this.state.expanded ? 'false' : 'true');
-                    this.setState({ expanded: !this.state.expanded });
-                }}
-            >
-                <AccordionSummary
-                    expandIcon={<ExpandMoreIcon />}
-                    style={({ ...schema.style, ...(this.props.themeType ? schema.darkStyle : {}) })}
-                    className={Utils.clsx(classes.fullWidth, schema.color === 'primary' && classes.primary, schema.color === 'secondary' && classes.secondary)}
-                >
-                    <Typography className={classes.heading}>{this.getText(schema.label)}</Typography>
-                </AccordionSummary>
-                <AccordionDetails>
-                    <Grid container className={`${classes.fullWidth} ${classes.padding}`} spacing={2} style={style}>
-                        {this.renderItems(items, disabled)}
-                    </Grid>
-                </AccordionDetails>
-            </Accordion>;
-        } else {
-            content = <div
-                key={`${this.props.attr}_${this.props.index}`}
-                className={Utils.clsx(this.props.className, this.props.isParentTab && classes.paper, classes.fullWidth)}
-                style={style}
-            >
-                <Grid
-                    container
-                    className={Utils.clsx(classes.fullWidth, this.props.isParentTab && classes.padding)}
-                    spacing={2}
-                    style={this.props.schema.innerStyle}
-                >
-                    {this.renderItems(items, disabled)}
-                </Grid>
-            </div>;
-        }
-
-        if (!this.props.isParentTab) {
-            const item = <Grid
-                item
-                title={this.getText(schema.tooltip)}
-                xs={schema.xs || undefined}
-                lg={schema.lg || undefined}
-                md={schema.md || undefined}
-                sm={schema.sm || undefined}
-                style={({ marginBottom: 0, /* marginRight: 8, */textAlign: 'left', ...schema.style })}
-            >
-                {content}
-            </Grid>;
-
-            if (schema.newLine) {
-                return <>
-                    <div style={{ flexBasis: '100%', height: 0 }} />
-                    {item}
-                </>;
-            }
-            return item;
-        }
-        return content;
-    }
-}
-
-const ConfigPanelStyled = withStyles(styles)(ConfigPanel);
-
-export default ConfigPanelStyled;

package/src/JsonConfigComponent/ConfigPassword.jsx

@@ -1,160 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
-
-import {
-    TextField,
-    IconButton,
-    InputAdornment,
-} from '@mui/material';
-
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-
-import { I18n } from '@iobroker/adapter-react-v5';
-
-import ConfigGeneric from './ConfigGeneric';
-
-const styles = theme => ({
-    fullWidth: {
-        width: '100%',
-        display: 'inline-block',
-    },
-    halfWidth1: {
-        width: `calc(50% - ${theme.spacing(0.5)})`,
-        display: 'inline-block',
-        marginRight: theme.spacing(1),
-    },
-    halfWidth2: {
-        width: `calc(50% - ${theme.spacing(0.5)})`,
-        display: 'inline-block',
-    },
-});
-
-const PASSWORD_PLACEHOLDER = '____ppp____';
-
-class ConfigPassword extends ConfigGeneric {
-    componentDidMount() {
-        super.componentDidMount();
-        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-        this.setState({
-            _repeat: value ? PASSWORD_PLACEHOLDER : '',
-            _visible: false,
-            value: value ? PASSWORD_PLACEHOLDER : '',
-            _notEqual: false,
-        });
-    }
-
-    onChangePassword(password, repeatPassword) {
-        if (password === undefined) {
-            password = this.state.value;
-        }
-        if (repeatPassword === undefined) {
-            repeatPassword = this.state._repeat;
-        }
-        const _notEqual = !!this.props.schema.repeat && repeatPassword !== password;
-        this.setState({ value: password, _repeat: repeatPassword, _notEqual }, () => {
-            if (_notEqual) {
-                this.onError(this.props.attr, I18n.t('ra_Passwords are not equal!'));
-            } else {
-                this.onError(this.props.attr); // clear error
-                this.onChange(this.props.attr, password);
-            }
-        });
-    }
-
-    renderItem(error, disabled /* , defaultValue */) {
-        if (this.state._notEqual === undefined) {
-            return null;
-        }
-
-        const password = <TextField
-            variant="standard"
-            fullWidth
-            type={this.state._visible && this.state.value !== PASSWORD_PLACEHOLDER ? 'text' : 'password'}
-            value={this.state.value}
-            error={!!error || this.state._notEqual}
-            disabled={!!disabled}
-            onChange={e => this.onChangePassword(e.target.value)}
-            label={this.getText(this.props.schema.label)}
-            inputProps={{
-                autoComplete: 'new-password',
-                form: { autoComplete: 'off' },
-                maxLength: this.props.schema.maxLength || this.props.schema.max || undefined,
-            }}
-            helperText={this.state._notEqual ? I18n.t('ra_Passwords are not equal!') : this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
-            // eslint-disable-next-line react/jsx-no-duplicate-props
-            InputProps={{
-                endAdornment: this.state.value && this.state.value !== PASSWORD_PLACEHOLDER && this.props.schema.visible ? <InputAdornment position="end">
-                    <IconButton
-                        size="large"
-                        tabIndex={-1}
-                        onClick={e => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            this.setState({ _visible: !this.state._visible });
-                        }}
-                        edge="end"
-                    >
-                        {this.state._visible ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
-                </InputAdornment> : undefined,
-            }}
-        />;
-
-        if (this.props.schema.repeat) {
-            const passwordRepeat = <TextField
-                variant="standard"
-                fullWidth
-                type={this.state._visible && this.state._repeat !== PASSWORD_PLACEHOLDER ? 'text' : 'password'}
-                value={this.state._repeat}
-                error={!!error || this.state._notEqual}
-                disabled={!!disabled}
-                onChange={e => this.onChangePassword(undefined, e.target.value)}
-                label={`${this.getText(this.props.schema.label)} (${I18n.t('ra_repeat')})`}
-                inputProps={{
-                    autoComplete: 'new-password',
-                    form: { autoComplete: 'off' },
-                    maxLength: this.props.schema.maxLength || this.props.schema.max || undefined,
-                }}
-                helperText={this.state._notEqual ? I18n.t('ra_Passwords are not equal!') : this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
-                // eslint-disable-next-line react/jsx-no-duplicate-props
-                InputProps={{
-                    endAdornment: this.state._repeat && this.state._repeat !== PASSWORD_PLACEHOLDER ? <InputAdornment position="end">
-                        <IconButton
-                            size="large"
-                            tabIndex={-1}
-                            onClick={e => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                this.setState({ _visible: !this.state._visible });
-                            }}
-                            edge="end"
-                        >
-                            {this.state._visible ? <VisibilityOff /> : <Visibility />}
-                        </IconButton>
-                    </InputAdornment> : undefined,
-                }}
-            />;
-
-            return <div className={this.props.classes.fullWidth}>
-                <div className={this.props.classes.halfWidth1}>{password}</div>
-                <div className={this.props.classes.halfWidth2}>{passwordRepeat}</div>
-            </div>;
-        }
-        return password;
-    }
-}
-
-ConfigPassword.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)(ConfigPassword);

package/src/JsonConfigComponent/ConfigPattern.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import {
-    IconButton,
-    TextField,
-} from '@mui/material';
-
-import { IconCopy, Utils } from '@iobroker/adapter-react-v5';
-import ConfigGeneric from './ConfigGeneric';
-
-class ConfigPattern extends ConfigGeneric {
-    renderItem(error, disabled) {
-        return <TextField
-            variant="standard"
-            fullWidth
-            disabled={!!disabled}
-            InputProps={{
-                endAdornment: this.props.schema.copyToClipboard ?
-                    <IconButton
-                        size="small"
-                        onClick={() => {
-                            Utils.copyToClipboard(this.getPattern(this.props.schema.pattern));
-                            window.alert('Copied');
-                        }}
-                    >
-                        <IconCopy />
-                    </IconButton>
-                    : undefined,
-            }}
-            value={this.getPattern(this.props.schema.pattern)}
-            label={this.getText(this.props.schema.label)}
-            helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
-        />;
-    }
-}
-
-ConfigPattern.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 ConfigPattern;