@iobroker/json-config 6.17.6 → 6.17.12

package/src/JsonConfigComponent/ConfigAccordion.tsx

@@ -0,0 +1,278 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    FormHelperText,
+    Accordion, AccordionSummary, AccordionDetails,
+    IconButton, Paper,
+    Toolbar, Tooltip,
+    Typography, type Theme,
+} from '@mui/material';
+
+import {
+    Add as AddIcon,
+    Delete as DeleteIcon,
+    ArrowUpward as UpIcon,
+    ArrowDownward as DownIcon,
+    ContentCopy as CopyContentIcon,
+    ExpandMore as ExpandMoreIcon,
+} from '@mui/icons-material';
+
+import { Utils, I18n } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+// eslint-disable-next-line import/no-cycle
+import ConfigPanel from './ConfigPanel';
+import type {ConfigItemAccordion, ConfigItemIndexed, ConfigItemPanel} from "#JC/types";
+
+const styles: Record<string, any> = (theme: Theme) => ({
+    fullWidth: {
+        width: '100%',
+    },
+    accordionSummary: {
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)',
+    },
+    accordionTitle: {
+        // fontWeight: 'bold',
+    },
+    toolbar: {
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)',
+        borderRadius: 3,
+    },
+});
+
+interface ConfigAccordionProps extends ConfigGenericProps {
+    schema: ConfigItemAccordion;
+}
+
+interface ConfigAccordionState extends ConfigGenericState {
+    value: Record<string, any>[];
+    activeIndex: number;
+    iteration: number;
+}
+
+class ConfigAccordion extends ConfigGeneric<ConfigAccordionProps, ConfigAccordionState> {
+    private typingTimer: ReturnType<typeof setTimeout> | null = null;
+
+    constructor(props: ConfigAccordionProps) {
+        super(props);
+        this.props.schema.items = this.props.schema.items || [];
+    }
+
+    async componentDidMount() {
+        super.componentDidMount();
+
+        let value = ConfigGeneric.getValue(this.props.data, this.props.attr) || [];
+
+        if (!Array.isArray(value)) {
+            value = [];
+        }
+
+        this.setState({
+            value,
+            activeIndex: -1,
+            iteration: 0,
+        });
+    }
+
+    componentWillUnmount() {
+        this.typingTimer && clearTimeout(this.typingTimer);
+        this.typingTimer = null;
+        super.componentWillUnmount();
+    }
+
+    itemAccordion(data: Record<string, any>, idx: number) {
+        const { value } = this.state;
+        const { schema } = this.props;
+
+        const schemaItem: ConfigItemPanel = {
+            type: 'panel',
+            items: schema.items.reduce((accumulator: Record<string, ConfigItemIndexed>, currentValue: ConfigItemIndexed) => {
+                accumulator[currentValue.attr] = currentValue;
+                return accumulator;
+            }, {}),
+            style: { marginLeft: -8, marginTop: 10, marginBottom: 10 },
+        };
+
+        return <ConfigPanel
+            index={idx + this.state.iteration}
+            arrayIndex={idx}
+            changed={this.props.changed}
+            globalData={this.props.data}
+            socket={this.props.socket}
+            adapterName={this.props.adapterName}
+            instance={this.props.instance}
+            common={this.props.common}
+            alive={this.props.alive}
+            themeType={this.props.themeType}
+            themeName={this.props.themeName}
+            data={data}
+            custom
+            schema={schemaItem}
+            systemConfig={this.props.systemConfig}
+            originalData={this.props.originalData}
+            customs={this.props.customs}
+            dateFormat={this.props.dateFormat}
+            isFloatComma={this.props.isFloatComma}
+            forceUpdate={this.props.forceUpdate}
+            imagePrefix={this.props.imagePrefix}
+            onCommandRunning={this.props.onCommandRunning}
+            onChange={(attr, valueChange) => {
+                const newObj = JSON.parse(JSON.stringify(value));
+                (newObj[idx] as Record<string, any>)[attr as string] = valueChange;
+                this.setState({ value: newObj }, () =>
+                    this.onChangeWrapper(newObj));
+            }}
+            onError={(error, attr) => this.onError(error, attr)}
+            table={this.props.table}
+        />;
+    }
+
+    onDelete = (index: number) => () => {
+        const newValue = JSON.parse(JSON.stringify(this.state.value));
+        newValue.splice(index, 1);
+
+        this.setState({ value: newValue, iteration: this.state.iteration + 10000 }, () => this.onChangeWrapper(newValue));
+    };
+
+    onClone = (index: number) => () => {
+        const newValue = JSON.parse(JSON.stringify(this.state.value)) as Record<string, any>[];
+        const cloned = JSON.parse(JSON.stringify(newValue[index]));
+        if (typeof this.props.schema.clone === 'string' && typeof cloned[this.props.schema.clone] === 'string') {
+            let i = 1;
+            let text = cloned[this.props.schema.clone];
+            const pattern = text.match(/(\d+)$/);
+            if (pattern) {
+                text = text.replace(pattern[0], '');
+                i = parseInt(pattern[0], 10) + 1;
+            } else {
+                text += '_';
+            }
+            // eslint-disable-next-line no-loop-func
+            while (newValue.find(it => it[this.props.schema.clone as string] === text + i.toString())) {
+                i++;
+            }
+            cloned[this.props.schema.clone] = `${cloned[this.props.schema.clone]}_${i}`;
+        }
+
+        newValue.splice(index, 0, cloned);
+
+        this.setState({ value: newValue, activeIndex: -1, iteration: this.state.iteration + 10000 }, () => this.onChangeWrapper(newValue));
+    };
+
+    onChangeWrapper = (newValue: any) => {
+        this.typingTimer && clearTimeout(this.typingTimer);
+
+        this.typingTimer = setTimeout(value => {
+            this.typingTimer = null;
+
+            this.onChange(this.props.attr, value);
+        }, 300, newValue);
+    };
+
+    onAdd = () => {
+        const { schema } = this.props;
+        const newValue = JSON.parse(JSON.stringify(this.state.value));
+        const newItem: Record<string, any> = schema.items && schema.items.reduce((accumulator: Record<string, any>, currentValue: ConfigItemIndexed) => {
+            let defaultValue;
+            if (currentValue.defaultFunc) {
+                if (this.props.custom) {
+                    defaultValue = currentValue.defaultFunc ? this.executeCustom(currentValue.defaultFunc, this.props.data, this.props.customObj, this.props.instanceObj, newValue.length, this.props.data) : this.props.schema.default;
+                } else {
+                    defaultValue = currentValue.defaultFunc ? this.execute(currentValue.defaultFunc, this.props.schema.default, this.props.data, newValue.length, this.props.data) : this.props.schema.default;
+                }
+            } else {
+                defaultValue = currentValue.default === undefined ? null : currentValue.default;
+            }
+
+            accumulator[currentValue.attr] = defaultValue;
+            return accumulator;
+        }, {});
+
+        newValue.push(newItem);
+
+        this.setState({ value: newValue, activeIndex: newValue.length - 1 }, () => this.onChangeWrapper(newValue));
+    };
+
+    onMoveUp(idx: number) {
+        const newValue = JSON.parse(JSON.stringify(this.state.value));
+        const item = newValue[idx];
+        newValue.splice(idx, 1);
+        newValue.splice(idx - 1, 0, item);
+
+        const newIndex = this.state.activeIndex - 1;
+        this.setState({ value: newValue, activeIndex: newIndex, iteration: this.state.iteration + 10000 }, () => this.onChangeWrapper(newValue));
+    }
+
+    onMoveDown(idx: number) {
+        const newValue = JSON.parse(JSON.stringify(this.state.value));
+        const item = newValue[idx];
+        newValue.splice(idx, 1);
+        newValue.splice(idx + 1, 0, item);
+
+        const newIndex = this.state.activeIndex + 1;
+        this.setState({ value: newValue, activeIndex: newIndex, iteration: this.state.iteration + 10000 }, () => this.onChangeWrapper(newValue));
+    }
+
+    renderItem(/* error, disabled, defaultValue */) {
+        const { classes, schema } = this.props;
+        const { value } = this.state;
+
+        if (!value) {
+            return null;
+        }
+
+        return <Paper>
+            {schema.label || !schema.noDelete ? <Toolbar variant="dense">
+                {schema.label ? <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
+                    {this.getText(schema.label)}
+                </Typography> : null}
+                {!schema.noDelete ? <IconButton size="small" color="primary" onClick={this.onAdd}>
+                    <AddIcon />
+                </IconButton> : null}
+            </Toolbar> : null}
+            {value.map((idx, i) =>
+                <Accordion key={`${idx}_${i}`} expanded={this.state.activeIndex === i} onChange={(e, expanded) => { this.setState({ activeIndex: expanded ? i : -1 }); }}>
+                    <AccordionSummary
+                        expandIcon={<ExpandMoreIcon />}
+                        className={Utils.clsx(classes.fullWidth, classes.accordionSummary)}
+                    >
+                        <Typography className={classes.accordionTitle}>{idx[schema.titleAttr]}</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails style={({ ...schema.style, ...(this.props.themeType ? schema.darkStyle : {}) })}>
+                        {this.itemAccordion(value[i], i)}
+                        <Toolbar className={classes.toolbar}>
+                            {i ? <Tooltip title={I18n.t('ra_Move up')}>
+                                <IconButton size="small" onClick={() => this.onMoveUp(i)}>
+                                    <UpIcon />
+                                </IconButton>
+                            </Tooltip> : <div className={classes.buttonEmpty} />}
+                            {i < value.length - 1 ? <Tooltip title={I18n.t('ra_Move down')}>
+                                <IconButton size="small" onClick={() => this.onMoveDown(i)}>
+                                    <DownIcon />
+                                </IconButton>
+                            </Tooltip> : <div className={classes.buttonEmpty} />}
+                            {!schema.noDelete ? <Tooltip title={I18n.t('ra_Delete current row')}>
+                                <IconButton size="small" onClick={this.onDelete(i)}>
+                                    <DeleteIcon />
+                                </IconButton>
+                            </Tooltip> : null}
+                            {schema.clone ? <Tooltip title={I18n.t('ra_Clone current row')}>
+                                <IconButton size="small" onClick={this.onClone(i)}>
+                                    <CopyContentIcon />
+                                </IconButton>
+                            </Tooltip> : null}
+                        </Toolbar>
+                    </AccordionDetails>
+                </Accordion>)}
+            {!schema.noDelete && value.length > 0 ? <Toolbar variant="dense" className={classes.rootTool}>
+                <IconButton size="small" color="primary" onClick={this.onAdd}>
+                    <AddIcon />
+                </IconButton>
+            </Toolbar> : null}
+            {schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </Paper>;
+    }
+}
+
+export default withStyles(styles)(ConfigAccordion);

package/src/JsonConfigComponent/ConfigAlive.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import { Utils, I18n } from '@iobroker/adapter-react-v5';
+import type { ConfigItemAlive } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    root: {
+        width: '100%',
+    },
+    notAlive: {
+        color: '#a30000',
+    },
+};
+
+interface ConfigAliveProps extends ConfigGenericProps {
+    schema: ConfigItemAlive;
+}
+
+interface ConfigAliveState extends ConfigGenericState {
+    alive?: boolean | null;
+    instance?: string;
+}
+
+class ConfigAlive extends ConfigGeneric<ConfigAliveProps, ConfigAliveState> {
+    componentDidMount() {
+        super.componentDidMount();
+
+        const instance = this.getInstance();
+
+        this.props.socket.getState(`${instance}.alive`)
+            .then(state => this.setState({ alive: !!(state && state.val), instance }));
+    }
+
+    getInstance() {
+        let instance = this.props.schema.instance || (`${this.props.adapterName}.${this.props.instance}`);
+        if (instance.includes('${')) {
+            instance = this.getPattern(instance);
+        }
+        if (instance && !instance.startsWith('system.adapter.')) {
+            instance = `system.adapter.${instance}`;
+        }
+        return instance;
+    }
+
+    renderItem() {
+        if (this.getInstance() !== this.state.instance) {
+            setTimeout(() => {
+                const instance = this.getInstance();
+                if (instance) {
+                    this.props.socket.getState(`${instance}.alive`)
+                        .then(state => this.setState({ alive: !!(state && state.val), instance }));
+                } else {
+                    this.setState({ alive: null, instance });
+                }
+            }, 200);
+        }
+
+        if (this.state.alive !== false && this.state.alive !== true) {
+            return null;
+        }
+
+        const instance = this.state.instance.replace(/^system.adapter./, '');
+        return <div className={Utils.clsx(this.props.classes.root, !this.state.alive && this.props.classes.notAlive)}>
+            {this.state.alive ?
+                this.props.schema.textAlive !== undefined ? (this.props.schema.textAlive ? I18n.t(this.props.schema.textAlive, instance) : '') : I18n.t('ra_Instance %s is alive', instance)
+                :
+                this.props.schema.textNotAlive !== undefined ? (this.props.schema.textNotAlive ? I18n.t(this.props.schema.textNotAlive, instance) : '') : I18n.t('ra_Instance %s is not alive', instance)}
+        </div>;
+    }
+}
+
+export default withStyles(styles)(ConfigAlive);

package/src/JsonConfigComponent/ConfigAutocomplete.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import { Autocomplete, TextField } from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemAutocomplete, ConfigItemSelectOption } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericState, type ConfigGenericProps } from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    fullWidth: {
+        width: '100%',
+    },
+};
+
+export interface ConfigAutocompleteProps extends ConfigGenericProps {
+    schema: ConfigItemAutocomplete;
+}
+
+export interface ConfigAutocompleteState extends ConfigGenericState {
+    selectOptions: { value: string; label: string }[];
+}
+
+class ConfigAutocomplete extends ConfigGeneric<ConfigAutocompleteProps, ConfigAutocompleteState> {
+    componentDidMount(): void {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+
+        const selectOptions = this.props.schema.options.map((item: any) => (typeof item === 'string' ? { label: item, value: item } : JSON.parse(JSON.stringify(item))));
+
+        // if __different
+        if (Array.isArray(value)) {
+            selectOptions.unshift({ label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE });
+            this.setState({ value: ConfigGeneric.DIFFERENT_VALUE, selectOptions });
+        } else {
+            this.setState({ value, selectOptions });
+        }
+    }
+
+    renderItem(error: unknown, disabled: boolean): React.JSX.Element | null {
+        if (!this.state.selectOptions) {
+            return null;
+        }
+
+        let item;
+        const options: (string | ConfigItemSelectOption)[] = JSON.parse(JSON.stringify(this.state.selectOptions));
+        const isIndeterminate = Array.isArray(this.state.value) || this.state.value === ConfigGeneric.DIFFERENT_VALUE;
+
+        if (isIndeterminate) {
+            [...this.state.value]
+                .filter(val => !options.find(it => (typeof it === 'object' ? (it as ConfigItemSelectOption).value === val : (it as string) === val)))
+                .forEach(it => options.push({ label: it.toString(), value: it }));
+
+            item = { label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE };
+            options.unshift(item);
+        } else {
+            item = this.state.value !== null &&
+                this.state.value !== undefined &&
+                // eslint-disable-next-line eqeqeq
+                options.find(_item => (typeof _item === 'object' ? _item.value == this.state.value : _item == this.state.value)); // let "==" be and not ===
+
+            if (this.state.value !== null && this.state.value !== undefined && !item && this.props.schema.freeSolo) {
+                item = { value: this.state.value, label: this.state.value };
+                options.push(item);
+            }
+        }
+
+        return <Autocomplete
+            className={this.props.classes.indeterminate}
+            fullWidth
+            freeSolo={!!this.props.schema.freeSolo}
+            value={item}
+            options={options}
+            // autoComplete
+            onInputChange={e => {
+                if (!e || !this.props.schema.freeSolo) {
+                    return;
+                }
+
+                const val = (e.target as HTMLInputElement).value;
+                if (val !== this.state.value) {
+                    this.setState({ value: val }, () => this.onChange(this.props.attr, val));
+                }
+            }}
+            onChange={(_, value) => {
+                const val = typeof value === 'object' ? (value ? value.value : '') : value;
+                if (val !== this.state.value) {
+                    this.setState({ value: val }, () => this.onChange(this.props.attr, val));
+                }
+            }}
+            getOptionLabel={option => (typeof option === 'object' ? (option?.label ?? '') : '')}
+            renderInput={params => <TextField
+                variant="standard"
+                {...params}
+                error={!!error}
+                // inputProps are important and will be given in params
+                // inputProps={{maxLength: this.props.schema.maxLength || this.props.schema.max || undefined}}
+                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)}
+                disabled={disabled}
+            />}
+        />;
+    }
+}
+
+export default withStyles(styles)(ConfigAutocomplete);

package/src/JsonConfigComponent/ConfigAutocompleteSendTo.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import { Autocomplete, TextField } from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemAutocompleteSendTo } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps } from './ConfigGeneric';
+import type { ConfigAutocompleteState } from './ConfigAutocomplete';
+
+interface ConfigAutocompleteSendToProps extends ConfigGenericProps {
+    schema: ConfigItemAutocompleteSendTo;
+}
+
+interface ConfigAutocompleteSendToState extends ConfigAutocompleteState {
+    context: string;
+}
+
+const styles: Record<string, any> = {
+    fullWidth: {
+        width: '100%',
+    },
+};
+
+class ConfigAutocompleteSendTo extends ConfigGeneric<ConfigAutocompleteSendToProps, ConfigAutocompleteSendToState> {
+    componentDidMount() {
+        super.componentDidMount();
+
+        this.askInstance();
+    }
+
+    askInstance() {
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        const selectOptions = this.props.schema.options ?
+            this.props.schema.options.map((item: any) => (typeof item === 'string' ? { label: item, value: item } : JSON.parse(JSON.stringify(item))))
+            :
+            [];
+
+        if (this.props.alive) {
+            let data = this.props.schema.data;
+            if (data === undefined && this.props.schema.jsonData) {
+                data = this.getPattern(this.props.schema.jsonData);
+                try {
+                    if (typeof data === 'string') {
+                        data = JSON.parse(data);
+                    }
+                } catch (e) {
+                    console.error(`Cannot parse json data: ${data}`);
+                }
+            }
+
+            if (data === undefined) {
+                data = null;
+            }
+
+            this.props.socket.sendTo(`${this.props.adapterName}.${this.props.instance}`, this.props.schema.command || 'send', data)
+                .then((list: unknown) => {
+                    if (list && Array.isArray(list)) {
+                        list.forEach(item =>
+                            selectOptions.push(typeof item === 'string' ? { label: item, value: item } : JSON.parse(JSON.stringify(item))));
+                    }
+
+                    // if __different
+                    if (Array.isArray(value)) {
+                        selectOptions.unshift({ label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE });
+                        this.setState({ value: ConfigGeneric.DIFFERENT_VALUE, selectOptions, context: this.getContext() });
+                    } else {
+                        this.setState({ value, selectOptions, context: this.getContext() });
+                    }
+                });
+        } else if (Array.isArray(value)) {
+            // if __different
+            selectOptions.unshift({ label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE });
+            this.setState({ value: ConfigGeneric.DIFFERENT_VALUE, selectOptions });
+        } else {
+            this.setState({ value, selectOptions });
+        }
+    }
+
+    getContext(): string {
+        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: unknown, disabled: boolean): React.JSX.Element | null {
+        if (!this.state.selectOptions) {
+            return null;
+        }
+
+        if (this.props.alive) {
+            const context = this.getContext();
+            if (context !== this.state.context) {
+                setTimeout(() => this.askInstance(), 300);
+            }
+        }
+
+        let item;
+        const options = JSON.parse(JSON.stringify(this.state.selectOptions));
+        const isIndeterminate = Array.isArray(this.state.value) || this.state.value === ConfigGeneric.DIFFERENT_LABEL;
+
+        if (isIndeterminate) {
+            [...this.state.value]
+                .filter(val => !options.find((it: any) => it.value === val))
+                .forEach(it => options.push({ label: it.toString(), value: it }));
+
+            item = { label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE };
+            options.unshift(item);
+        } else {
+            item = this.state.value !== null && this.state.value !== undefined &&
+                // eslint-disable-next-line
+                options.find((item: any) => item.value == this.state.value); // let "==" be and not ===
+
+            if (this.state.value !== null && this.state.value !== undefined && !item && this.props.schema.freeSolo) {
+                item = { value: this.state.value, label: this.state.value };
+                options.push(item);
+            }
+            item = item || null;
+        }
+
+        if (!options.length) {
+            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 }}
+                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)}
+            />;
+        }
+        return <Autocomplete
+            value={item}
+            fullWidth
+            freeSolo={!!this.props.schema.freeSolo}
+            options={options}
+            // autoComplete
+            getOptionLabel={option => option?.label ?? ''}
+            className={this.props.classes.indeterminate}
+            onInputChange={e => {
+                if (!e || !this.props.schema.freeSolo) {
+                    return;
+                }
+
+                const val = (e.target as HTMLInputElement).value;
+                if (val !== this.state.value) {
+                    this.setState({ value: val }, () => this.onChange(this.props.attr, val));
+                }
+            }}
+            onChange={(_, value) => {
+                const val = typeof value === 'object' ? (value ? value.value : '') : value;
+                if (val !== this.state.value) {
+                    this.setState({ value: val }, () => this.onChange(this.props.attr, val));
+                }
+            }}
+            renderInput={params =>
+                <TextField
+                    variant="standard"
+                    {...params}
+                    // inputProps are important and will be given in params
+                    // inputProps={{maxLength: this.props.schema.maxLength || this.props.schema.max || undefined}}
+                    error={!!error}
+                    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)}
+                    disabled={disabled}
+                />}
+        />;
+    }
+}
+
+export default withStyles(styles)(ConfigAutocompleteSendTo);