@iobroker/json-config 6.17.6 → 6.17.13

package/src/JsonConfigComponent/ConfigTable.tsx

@@ -0,0 +1,1040 @@
+import React, { createRef, type RefObject } from 'react';
+import { /* lighten, */ withStyles } from '@mui/styles';
+import Dropzone from 'react-dropzone';
+
+import {
+    Button, Dialog, DialogActions, DialogContent, DialogTitle,
+    IconButton, InputAdornment, Paper,
+    Table, TableBody, TableCell, TableContainer,
+    TableHead, TableRow, TableSortLabel,
+    TextField, Toolbar, Tooltip,
+    Typography,
+    FormHelperText,
+    type Theme,
+} from '@mui/material';
+
+import {
+    Add as AddIcon,
+    Delete as DeleteIcon,
+    Close as CloseIcon,
+    ArrowUpward as UpIcon,
+    ArrowDownward as DownIcon,
+    FilterAlt as IconFilterOn,
+    FilterAltOff as IconFilterOff,
+    ContentCopy as CopyContentIcon,
+    Download as ExportIcon,
+    Warning as ErrorIcon,
+    UploadFile as ImportIcon,
+    Close as IconClose,
+} from '@mui/icons-material';
+
+import { Utils, I18n } from '@iobroker/adapter-react-v5';
+
+import type {ConfigItemTableIndexed, ConfigItemPanel, ConfigItemTable} from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+// eslint-disable-next-line import/no-cycle
+import ConfigPanel from './ConfigPanel';
+
+const MAX_SIZE = 1024 * 1024; // 1MB
+
+const styles: Record<string, any> = (theme: Theme) => ({
+    fullWidth: {
+        width: '100%',
+    },
+    root: {
+        width: '100%',
+    },
+    paper: {
+        width: '100%',
+        marginBottom: theme.spacing(2),
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    },
+    headerText: {
+        width: '100%',
+    },
+    table: {
+        minWidth: 750,
+    },
+    visuallyHidden: {
+        border: 0,
+        clip: 'rect(0 0 0 0)',
+        height: 1,
+        margin: -1,
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        top: 20,
+        width: 1,
+    },
+    label: {
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    highlight:
+        theme.palette.mode === 'light'
+            ? {
+                color: theme.palette.secondary.main,
+                // backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+            }
+            : {
+                color: theme.palette.text.primary,
+                backgroundColor: theme.palette.secondary.dark,
+            },
+    title: {
+        flex: '1 1 100%',
+    },
+    rootTool: {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(1),
+    },
+    silver: {
+        opacity: 0.2,
+    },
+    flex: {
+        display: 'flex',
+        alignItems: 'baseline',
+    },
+    filteredOut: {
+        padding: 10,
+        display: 'flex',
+        textAlign: 'center',
+    },
+    buttonEmpty: {
+        width: 34,
+        display: 'inline-block',
+    },
+    buttonCell: {
+        whiteSpace: 'nowrap',
+    },
+
+    dropZone: {
+        width: '100%',
+        height: 100,
+        position: 'relative',
+    },
+    dropZoneEmpty: {
+
+    },
+    uploadDiv: {
+        position: 'relative',
+        width: '100%',
+        height: 300,
+        opacity: 0.9,
+        marginTop: 30,
+        cursor: 'pointer',
+        outline: 'none',
+    },
+    uploadDivDragging: {
+        opacity: 1,
+        background: 'rgba(128,255,128,0.1)',
+    },
+    image: {
+        objectFit: 'contain',
+        margin: 'auto',
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+    },
+    uploadCenterDiv: {
+        margin: 5,
+        border: '3px dashed grey',
+        borderRadius: 5,
+        width: 'calc(100% - 10px)',
+        height: 'calc(100% - 10px)',
+        minHeight: 300,
+        position: 'relative',
+        display: 'flex',
+    },
+    uploadCenterIcon: {
+        paddingTop: 10,
+        width: 48,
+        height: 48,
+    },
+    uploadCenterText: {
+        fontSize: 16,
+    },
+    uploadCenterTextAndIcon: {
+        textAlign: 'center',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonRemoveWrapper: {
+        position: 'absolute',
+        zIndex: 222,
+        right: 0,
+    },
+    error: {
+        border: '2px solid red',
+        boxSizing: 'border-box',
+    },
+});
+
+function objectToArray(object: Record<string, any>, nameOfFirstAttr: string, nameOfSecondAttr?: string) {
+    nameOfFirstAttr  = nameOfFirstAttr || 'key';
+
+    const array: Record<string, any>[] = [];
+    Object.keys(object).forEach(key => {
+        const item: Record<string, any> = {};
+        item[nameOfFirstAttr] = key;
+
+        if (nameOfSecondAttr) {
+            item[nameOfSecondAttr] = object[key];
+            array.push(item);
+        } else {
+            array.push(Object.assign(item, object[key]));
+        }
+    });
+
+    return array;
+}
+
+function arrayToObject(array: Record<string, any>[], nameOfFirstAttr: string, nameOfSecondAttr?: string) {
+    nameOfFirstAttr  = nameOfFirstAttr  || 'key';
+
+    const object: Record<string, any> = {};
+
+    array.forEach((row: Record<string, any>) => {
+        let key = row[nameOfFirstAttr];
+        if (key === null || key === undefined) {
+            key = '';
+        }
+        delete row[nameOfFirstAttr];
+
+        if (nameOfSecondAttr) {
+            object[key] = row[nameOfSecondAttr];
+        } else {
+            object[key] = row;
+        }
+    });
+
+    return object;
+}
+
+interface ConfigTableProps extends ConfigGenericProps {
+    schema: ConfigItemTable;
+}
+
+interface ConfigTableState extends ConfigGenericState {
+    value: Record<string, any>[];
+    visibleValue: number[] | null;
+    orderBy: string;
+    order: 'asc' | 'desc';
+    iteration: number;
+    filterOn: string[];
+    errorMessage: string;
+    showImportDialog: boolean;
+    showTypeOfImportDialog: Record<string, any>[] | false;
+    instanceObj: ioBroker.InstanceObject;
+    customObj: Record<string, any>;
+    uploadFile: boolean | 'dragging';
+    icon: boolean;
+}
+
+function encrypt(secret: string, value: string): string {
+    let result = '';
+    for (let i = 0; i < value.length; i++) {
+        result += String.fromCharCode(secret[i % secret.length].charCodeAt(0) ^ value.charCodeAt(i));
+    }
+    return result;
+}
+function decrypt(secret: string, value: string): string {
+    let result = '';
+    for (let i = 0; i < value.length; i++) {
+        result += String.fromCharCode(secret[i % secret.length].charCodeAt(0) ^ value.charCodeAt(i));
+    }
+    return result;
+}
+
+class ConfigTable extends ConfigGeneric<ConfigTableProps, ConfigTableState> {
+    private readonly filterRefs: Record<string, RefObject<HTMLInputElement>>;
+
+    private typingTimer: ReturnType<typeof setTimeout> | null = null;
+
+    private secret: string = 'Zgfr56gFe87jJOM';
+
+    constructor(props: ConfigTableProps) {
+        super(props);
+        this.filterRefs = {};
+        this.props.schema.items = this.props.schema.items || [];
+        this.props.schema.items.forEach((el: ConfigItemTableIndexed) => {
+            if (el.filter) {
+                this.filterRefs[el.attr] = createRef();
+            }
+        });
+    }
+
+    /**
+     * React lifecycle hook, called once as component is mounted
+     */
+    async componentDidMount(): Promise<void> {
+        super.componentDidMount();
+        const _value: Record<string, any>[] | Record<string, any> = ConfigGeneric.getValue(this.props.data, this.props.attr) || [];
+        let value: Record<string, any>[];
+
+        // if the list is given as an object
+        if (this.props.schema.objKeyName) {
+            value = objectToArray(_value as Record<string, any>, this.props.schema.objKeyName, this.props.schema.objValueName);
+        } else {
+            value = _value as Record<string, any>[];
+        }
+
+        if (!Array.isArray(_value)) {
+            value = [];
+        }
+
+        if (this.props.schema.encryptedAttributes) {
+            const systemConfig = await this.props.socket.getCompactSystemConfig();
+            this.secret = systemConfig?.native.secret || this.secret;
+
+            _value.forEach((el: Record<string, any>) => {
+                this.props.schema.encryptedAttributes.forEach((attr: string) => {
+                    if (el[attr]) {
+                        el[attr] = decrypt(this.secret, el[attr]);
+                    }
+                });
+            });
+        }
+
+        this.setState({
+            value,
+            visibleValue: null,
+            orderBy: /* this.props.schema.items.length ? this.props.schema.items[0].attr : */'',
+            order: 'asc',
+            iteration: 0,
+            filterOn: [],
+        }, () => this.validateUniqueProps());
+    }
+
+    componentWillUnmount() {
+        this.typingTimer && clearTimeout(this.typingTimer);
+        this.typingTimer = null;
+        super.componentWillUnmount();
+    }
+
+    itemTable(attrItem: string, data: Record<string, any>, idx: number) {
+        const { value } = this.state;
+        const { schema } = this.props;
+        const schemaForAttribute = schema.items && schema.items.find((el: ConfigItemTableIndexed) => el.attr === attrItem);
+
+        if (!schemaForAttribute) {
+            return null;
+        }
+
+        const schemaItem = {
+            items: {
+                [attrItem]: schemaForAttribute,
+            },
+        };
+
+        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}
+            table
+            custom
+            schema={schemaItem as ConfigItemPanel}
+            systemConfig={this.props.systemConfig}
+            dateFormat={this.props.dateFormat}
+            isFloatComma={this.props.isFloatComma}
+            imagePrefix={this.props.imagePrefix}
+            onCommandRunning={this.props.onCommandRunning}
+            forceUpdate={this.props.forceUpdate}
+            originalData={this.props.originalData}
+            customs={this.props.customs}
+            onChange={(attr: string, valueChange: any) => {
+                const newObj = JSON.parse(JSON.stringify(value));
+                newObj[idx][attr] = valueChange;
+                this.setState({ value: newObj }, () => {
+                    this.validateUniqueProps();
+                    this.onChangeWrapper(newObj, true);
+                });
+            }}
+            onError={(error: string, attr?: string) => this.onError(error, attr)}
+        />;
+    }
+
+    /**
+     * Validate that columns configured in `uniqueColumns` have unique values
+     */
+    validateUniqueProps() {
+        if (!this.props.schema.uniqueColumns) {
+            return;
+        }
+
+        for (const uniqueCol of this.props.schema.uniqueColumns) {
+            /** @type {string[]} */
+            const allVals: (string | number)[] = [];
+            const found = this.state.value.find(entry => {
+                const val = entry[uniqueCol];
+                if (allVals.includes(val)) {
+                    this.onError(uniqueCol, 'is not unique');
+                    this.setState({ errorMessage: I18n.t('Non-allowed duplicate entry "%s" in column "%s"', val, uniqueCol) });
+                    return true;
+                }
+                allVals.push(val);
+                return false;
+            });
+
+            if (!found) {
+                this.onError(uniqueCol, null);
+                this.setState({ errorMessage: '' });
+            }
+        }
+    }
+
+    static descendingComparator(a: Record<string, any>, b: Record<string, any>, orderBy: string): number {
+        if (b[orderBy] < a[orderBy]) {
+            return -1;
+        }
+        if (b[orderBy] > a[orderBy]) {
+            return 1;
+        }
+        return 0;
+    }
+
+    static getComparator(order: 'desc' | 'asc', orderBy: string) {
+        return order === 'desc'
+            ? (a: Record<string, any>, b: Record<string, any>) =>  ConfigTable.descendingComparator(a, b, orderBy)
+            : (a: Record<string, any>, b: Record<string, any>) => -ConfigTable.descendingComparator(a, b, orderBy);
+    }
+
+    static getFilterValue(el: React.RefObject<HTMLInputElement>) {
+        return (el?.current?.children[0]?.children[0] as HTMLInputElement)?.value;
+    }
+
+    static setFilterValue(el: React.RefObject<HTMLInputElement>, filterValue: string) {
+        return (el.current.children[0].children[0] as HTMLInputElement).value = filterValue;
+    }
+
+    handleRequestSort = (property: string, orderCheck: boolean = false) => {
+        const { order, orderBy } = this.state;
+        if (orderBy) {
+            const isAsc = orderBy === property && order === 'asc';
+            const newOrder = orderCheck ? order : (isAsc ? 'desc' : 'asc');
+            const newValue = this.stableSort(newOrder, property);
+            this.setState({ order: newOrder, orderBy: property, iteration: this.state.iteration + 10000 }, () =>
+                this.applyFilter(false, newValue));
+        }
+    };
+
+    stableSort = (order: 'desc' | 'asc', orderBy: string) => {
+        const { value } = this.state;
+        const comparator = ConfigTable.getComparator(order, orderBy);
+        const stabilizedThis = value.map((el, index) => ({ el, index }));
+
+        stabilizedThis.sort((a, b) => {
+            const order_ = comparator(a.el, b.el);
+            if (order_ !== 0) {
+                return order_;
+            }
+            return a.index - b.index;
+        });
+
+        return stabilizedThis.map(el => el.el);
+    };
+
+    enhancedTableHead(buttonsWidth: number, doAnyFilterSet: boolean) {
+        const { schema, classes } = this.props;
+        const { order, orderBy } = this.state;
+        return <TableHead>
+            <TableRow>
+                {schema.items && schema.items.map((headCell: ConfigItemTableIndexed, i: number) =>
+                    <TableCell
+                        style={{ width: typeof headCell.width === 'string' && headCell.width.endsWith('%') ? headCell.width : headCell.width }}
+                        key={`${headCell.attr}_${i}`}
+                        align="left"
+                        sortDirection={orderBy === headCell.attr ? order : false}
+                    >
+                        <div className={classes.flex} style={schema.showFirstAddOnTop ? { flexDirection: 'column' } : undefined}>
+                            {!i && !schema.noDelete ? <Tooltip title={doAnyFilterSet ? I18n.t('ra_Cannot add items with set filter') : I18n.t('ra_Add row')}>
+                                <span>
+                                    <IconButton size="small" color="primary" disabled={!!doAnyFilterSet && !this.props.schema.allowAddByFilter} onClick={this.onAdd}>
+                                        <AddIcon />
+                                    </IconButton>
+                                </span>
+                            </Tooltip> : null}
+                            {headCell.sort && <TableSortLabel
+                                active
+                                className={Utils.clsx(orderBy !== headCell.attr && classes.silver)}
+                                direction={orderBy === headCell.attr ? order : 'asc'}
+                                onClick={() => this.handleRequestSort(headCell.attr)}
+                            />}
+                            {headCell.filter && this.state.filterOn.includes(headCell.attr) ?
+                                <TextField
+                                    variant="standard"
+                                    ref={this.filterRefs[headCell.attr]}
+                                    onChange={() => this.applyFilter()}
+                                    title={I18n.t('ra_You can filter entries by entering here some text')}
+                                    InputProps={{
+                                        endAdornment: ConfigTable.getFilterValue(this.filterRefs[headCell.attr]) && <InputAdornment position="end">
+                                            <IconButton
+                                                size="small"
+                                                onClick={() => {
+                                                    ConfigTable.setFilterValue(this.filterRefs[headCell.attr], '');
+                                                    this.applyFilter();
+                                                }}
+                                            >
+                                                <CloseIcon />
+                                            </IconButton>
+                                        </InputAdornment>,
+                                    }}
+                                    fullWidth
+                                    placeholder={this.getText(headCell.title)}
+                                />
+                                : <span className={this.props.classes.headerText}>{this.getText(headCell.title)}</span>}
+                            {headCell.filter ? <IconButton
+                                title={I18n.t('ra_Show/hide filter input')}
+                                size="small"
+                                onClick={() => {
+                                    const filterOn = [...this.state.filterOn];
+                                    const pos = this.state.filterOn.indexOf(headCell.attr);
+                                    if (pos === -1) {
+                                        filterOn.push(headCell.attr);
+                                    } else {
+                                        filterOn.splice(pos, 1);
+                                    }
+                                    this.setState({ filterOn }, () => {
+                                        if (pos && ConfigTable.getFilterValue(this.filterRefs[headCell.attr])) {
+                                            ConfigTable.setFilterValue(this.filterRefs[headCell.attr], '');
+                                            this.applyFilter();
+                                        }
+                                    });
+                                }}
+                            >
+                                {this.state.filterOn.includes(headCell.attr) ? <IconFilterOff /> : <IconFilterOn />}
+                            </IconButton> : null}
+                        </div>
+                    </TableCell>)}
+                {!schema.noDelete && <TableCell
+                    style={{
+                        paddingLeft: 20, paddingRight: 20, width: buttonsWidth, textAlign: 'right',
+                    }}
+                    padding="checkbox"
+                >
+                    {schema.import ? <IconButton
+                        style={{ marginRight: 10 }}
+                        size="small"
+                        onClick={() => this.setState({ showImportDialog: true })}
+                        title={I18n.t('ra_import data from %s file', 'CSV')}
+                    >
+                        <ImportIcon />
+                    </IconButton> : null}
+                    {schema.export ? <IconButton
+                        style={{ marginRight: 10 }}
+                        size="small"
+                        onClick={() => this.onExport()}
+                        title={I18n.t('ra_Export data to %s file', 'CSV')}
+                    >
+                        <ExportIcon />
+                    </IconButton> : null}
+                    <IconButton disabled size="small">
+                        <DeleteIcon />
+                    </IconButton>
+                </TableCell>}
+            </TableRow>
+        </TableHead>;
+    }
+
+    onDelete = (index: number) => () => {
+        const newValue = JSON.parse(JSON.stringify(this.state.value));
+        newValue.splice(index, 1);
+
+        this.setState({ value: newValue, iteration: this.state.iteration + 10_000 }, () =>
+            this.applyFilter(false, null, () =>
+                this.onChangeWrapper(newValue)));
+    };
+
+    onExport() {
+        const { schema } = this.props;
+        const { value } = this.state;
+        const cols = schema.items.map((it: ConfigItemTableIndexed) => it.attr);
+        const lines = [cols.join(';')];
+        value.forEach(row => {
+            const line: string[] = [];
+            schema.items.forEach((it: ConfigItemTableIndexed) => {
+                if (row[it.attr].includes(';')) {
+                    line.push(`"${row[it.attr]}"`);
+                } else {
+                    line.push(row[it.attr]);
+                }
+            });
+            lines.push(line.join(';'));
+        });
+        const el = document.createElement('a');
+        el.setAttribute('href', `data:text/csv;charset=utf-8,${encodeURIComponent(lines.join('\n'))}`);
+        const now = new Date();
+        el.setAttribute(
+            'download',
+            `${now.getFullYear()}_${(now.getMonth() + 1).toString().padStart(2, '0')}_${now.getDate().toString().padStart(2, '0')}_${this.props.adapterName}.${this.props.instance}_${this.props.attr}.csv`,
+        );
+
+        el.style.display = 'none';
+        document.body.appendChild(el);
+
+        el.click();
+
+        document.body.removeChild(el);
+    }
+
+    onImport(text: string): void {
+        const lines = text.split('\n').map((line: string) => line.replace('\r', '').trim());
+        // the first line is header
+        const { schema } = this.props;
+
+        const header = lines.shift()
+            .split(';')
+            .filter(it => it && schema.items.find((it2: ConfigItemTableIndexed) => it2.attr === it));
+
+        const values: Record<string, any>[] = [];
+        lines.forEach((line: string) => {
+            const parts: string[] = line.split(';');
+            const obj: Record<string, string | number | boolean> = {};
+            for (let p = 0; p < parts.length; p++) {
+                let value = parts[p];
+                if (value.startsWith('"')) {
+                    value = value.substring(1);
+                    while (p < parts.length && !value.endsWith('"')) {
+                        value += `;${parts[++p]}`;
+                    }
+                    value = value.substring(0, value.length - 1);
+                }
+
+                let val: string | number | boolean = value;
+
+                if (value === 'true') {
+                    val = true;
+                } else if (value === 'false') {
+                    val = false;
+                    // eslint-disable-next-line no-restricted-properties
+                } else if (window.isFinite(value as any as number)) {
+                    const attr = this.props.schema.items.find((it: ConfigItemTableIndexed) => it.attr === header[p]);
+                    if (attr && attr.type === 'number') {
+                        // if a type of attribute is a "number"
+                        val = parseFloat(value);
+                    } else {
+                        val = value;
+                    }
+                } else {
+                    val = value;
+                }
+
+                obj[header[p]] = val;
+            }
+            values.push(obj);
+        });
+
+        if (values.length) {
+            if (this.state.value?.length) {
+                this.setState({ showTypeOfImportDialog: values, showImportDialog: false });
+            } else {
+                this.setState({ value: values, showImportDialog: false });
+            }
+        } else {
+            window.alert('ra_No data found in file');
+        }
+    }
+
+    onClone = (index: number) => () => {
+        const newValue = JSON.parse(JSON.stringify(this.state.value));
+        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: Record<string, any>) => 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, iteration: this.state.iteration + 10000 }, () =>
+            this.applyFilter(false, null, () =>
+                this.onChangeWrapper(newValue)));
+    };
+
+    onChangeWrapper = (newValue: Record<string, any>[], updateVisible?: boolean) => {
+        this.typingTimer && clearTimeout(this.typingTimer);
+
+        this.typingTimer = setTimeout((value, _updateVisible) => {
+            this.typingTimer = null;
+
+            if (this.props.schema.encryptedAttributes) {
+                const _value = JSON.parse(JSON.stringify(value));
+                _value.forEach((el: Record<string, any>) => {
+                    this.props.schema.encryptedAttributes.forEach((attr: string) => {
+                        if (el[attr]) {
+                            el[attr] = encrypt(this.secret, el[attr]);
+                        }
+                    });
+                });
+
+                if (this.props.schema.objKeyName) {
+                    const objValue = arrayToObject(_value, this.props.schema.objKeyName, this.props.schema.objValueName);
+                    this.onChange(this.props.attr, objValue);
+                } else {
+                    this.onChange(this.props.attr, _value);
+                }
+            } else if (this.props.schema.objKeyName) {
+                const objValue = arrayToObject(JSON.parse(JSON.stringify(value)), this.props.schema.objKeyName, this.props.schema.objValueName);
+                this.onChange(this.props.attr, objValue);
+            } else {
+                this.onChange(this.props.attr, value);
+            }
+
+            if (_updateVisible) {
+                this.applyFilter(false, value);
+                this.handleRequestSort(this.state.orderBy, true);
+            }
+        }, 300, newValue, updateVisible);
+    };
+
+    onAdd = () => {
+        const { schema } = this.props;
+        const newValue = JSON.parse(JSON.stringify(this.state.value));
+        const newItem = schema.items?.reduce((accumulator: Record<string, any>, currentValue: ConfigItemTableIndexed) => {
+            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 }, () =>
+            this.applyFilter(false, null, () =>
+                this.onChangeWrapper(newValue)));
+    };
+
+    isAnyFilterSet(): boolean {
+        return !!Object.keys(this.filterRefs).find(attr => ConfigTable.getFilterValue(this.filterRefs[attr]));
+    }
+
+    applyFilter = (clear?: boolean, value?: Record<string, any>[], cb?: () => void): void => {
+        value = value || this.state.value;
+        let visibleValue = value.map((_, i) => i);
+        Object.keys(this.filterRefs).forEach(attr => {
+            let valueInputRef = ConfigTable.getFilterValue(this.filterRefs[attr]);
+            if (!clear && valueInputRef) {
+                valueInputRef = valueInputRef.toLowerCase();
+                visibleValue = visibleValue.filter(idx => value[idx] && value[idx][attr] && value[idx][attr].toLowerCase().includes(valueInputRef));
+            } else if (this.filterRefs[attr].current) {
+                ConfigTable.setFilterValue(this.filterRefs[attr], '');
+            }
+        });
+
+        if (visibleValue.length === value.length) {
+            visibleValue = null;
+        }
+
+        if (visibleValue === null && this.state.visibleValue === null) {
+            cb && cb();
+            return;
+        }
+
+        if (JSON.stringify(visibleValue) !== JSON.stringify(this.state.visibleValue)) {
+            this.setState({ visibleValue }, () => cb && cb());
+        } else {
+            cb && cb();
+        }
+    };
+
+    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);
+        this.setState({ value: newValue, iteration: this.state.iteration + 10000 }, () =>
+            this.applyFilter(false, null, () =>
+                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);
+        this.setState({ value: newValue, iteration: this.state.iteration + 10000 }, () =>
+            this.applyFilter(false, null, () =>
+                this.onChangeWrapper(newValue)));
+    }
+
+    onDrop(acceptedFiles: File[]) {
+        const file = acceptedFiles[0];
+        const reader = new FileReader();
+
+        reader.onabort = () => console.log('file reading was aborted');
+        reader.onerror = () => console.log('file reading has failed');
+        reader.onload = () => {
+            if (file.size > MAX_SIZE) {
+                window.alert(I18n.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(MAX_SIZE / 1024)));
+                return;
+            }
+            const text = new Uint8Array(reader.result as ArrayBufferLike)
+                .reduce((data, byte) => data + String.fromCharCode(byte), '');
+
+            this.onImport(text);
+        };
+        reader.readAsArrayBuffer(file);
+    }
+
+    showTypeOfImportDialog() {
+        if (!this.state.showTypeOfImportDialog) {
+            return null;
+        }
+        return <Dialog
+            open={!0}
+            onClose={() => this.setState({ showTypeOfImportDialog: false })}
+            maxWidth="md"
+        >
+            <DialogTitle>{I18n.t('ra_Append or replace?')}</DialogTitle>
+            <DialogContent>
+                {I18n.t('ra_Append %s entries or replace existing?', this.state.showTypeOfImportDialog.length)}
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    autoFocus
+                    onClick={() => {
+                        const value = JSON.parse(JSON.stringify(this.state.value));
+
+                        (this.state.showTypeOfImportDialog as Record<string, any>[])
+                            .forEach((obj: Record<string, any>) => value.push(obj));
+
+                        this.setState({
+                            value,
+                            iteration: this.state.iteration + 10000,
+                            showTypeOfImportDialog: false,
+                        }, () =>
+                            this.applyFilter(false, null, () =>
+                                this.onChangeWrapper(value)));
+                    }}
+                >
+                    {I18n.t('ra_Append')}
+                </Button>
+                <Button
+                    variant="contained"
+                    color="secondary"
+                    autoFocus
+                    onClick={() => {
+                        const value: Record<string, any>[] = this.state.showTypeOfImportDialog as Record<string, any>[];
+                        this.setState({
+                            value,
+                            iteration: this.state.iteration + 10000,
+                            showTypeOfImportDialog: false,
+                        }, () =>
+                            this.applyFilter(false, null, () =>
+                                this.onChangeWrapper(value)));
+                    }}
+                >
+                    {I18n.t('ra_Replace')}
+                </Button>
+            </DialogActions>
+        </Dialog>;
+    }
+
+    showImportDialog() {
+        if (!this.state.showImportDialog) {
+            return null;
+        }
+        return <Dialog
+            open={!0}
+            onClose={() => this.setState({ showImportDialog: false })}
+            maxWidth="md"
+            fullWidth
+        >
+            <DialogTitle>{I18n.t('ra_Import from %s', 'CSV')}</DialogTitle>
+            <DialogContent>
+                <Dropzone
+                    multiple={false}
+                    accept={{ 'text/csv': ['.csv'] }}
+                    maxSize={MAX_SIZE}
+                    onDragEnter={() => this.setState({ uploadFile: 'dragging' })}
+                    onDragLeave={() => this.setState({ uploadFile: true })}
+                    onDrop={(acceptedFiles, errors) => {
+                        this.setState({ uploadFile: false });
+                        if (!acceptedFiles.length) {
+                            window.alert((errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message) || I18n.t('ra_Cannot upload'));
+                        } else {
+                            this.onDrop(acceptedFiles);
+                        }
+                    }}
+                >
+                    {({ getRootProps, getInputProps }) => <div
+                        className={Utils.clsx(
+                            this.props.classes.uploadDiv,
+                            this.state.uploadFile === 'dragging' && this.props.classes.uploadDivDragging,
+                            this.props.classes.dropZone,
+                            !this.state.icon && this.props.classes.dropZoneEmpty,
+                        )}
+                        {...getRootProps()}
+                    >
+                        <input {...getInputProps()} />
+                        <div className={Utils.clsx(this.props.classes.uploadCenterDiv)}>
+                            <div className={this.props.classes.uploadCenterTextAndIcon}>
+                                <ImportIcon className={this.props.classes.uploadCenterIcon} />
+                                <div className={this.props.classes.uploadCenterText}>
+                                    {
+                                        this.state.uploadFile === 'dragging' ? I18n.t('ra_Drop file here') :
+                                            I18n.t('ra_Place your files here or click here to open the browse dialog')
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                    </div>}
+                </Dropzone>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    variant="contained"
+                    onClick={() => this.setState({ showImportDialog: false })}
+                    color="primary"
+                    startIcon={<IconClose />}
+                >
+                    {I18n.t('Cancel')}
+                </Button>
+            </DialogActions>
+        </Dialog>;
+    }
+
+    renderItem(/* error, disabled, defaultValue */) {
+        const { classes, schema } = this.props;
+        let { visibleValue } = this.state;
+
+        if (!this.state.value) {
+            return null;
+        }
+
+        visibleValue = visibleValue || this.state.value.map((_, i) => i);
+
+        const doAnyFilterSet = this.isAnyFilterSet();
+
+        return <Paper className={classes.paper}>
+            {this.showImportDialog()}
+            {this.showTypeOfImportDialog()}
+            {schema.label ? <div className={classes.label}>
+                <Toolbar
+                    variant="dense"
+                    className={classes.rootTool}
+                >
+                    <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
+                        {this.getText(schema.label)}
+                    </Typography>
+                </Toolbar>
+            </div> : null}
+            <TableContainer>
+                <Table className={classes.table} size="small">
+                    {this.enhancedTableHead(!doAnyFilterSet && !this.state.orderBy ? 120 : 64, doAnyFilterSet)}
+                    <TableBody>
+                        {visibleValue.map((idx, i) =>
+                            <TableRow
+                                hover
+                                key={`${idx}_${i}`}
+                            >
+                                {schema.items && schema.items.map((headCell: ConfigItemTableIndexed) =>
+                                    <TableCell key={`${headCell.attr}_${idx}`} align="left">
+                                        {this.itemTable(headCell.attr, this.state.value[idx], idx)}
+                                    </TableCell>)}
+                                {!schema.noDelete && <TableCell align="left" className={classes.buttonCell}>
+                                    {!doAnyFilterSet && !this.state.orderBy ? (i ? <Tooltip title={I18n.t('ra_Move up')}>
+                                        <IconButton size="small" onClick={() => this.onMoveUp(idx)}>
+                                            <UpIcon />
+                                        </IconButton>
+                                    </Tooltip> : <div className={classes.buttonEmpty} />) : null}
+                                    {!doAnyFilterSet && !this.state.orderBy ? (i < visibleValue.length - 1 ? <Tooltip title={I18n.t('ra_Move down')}>
+                                        <IconButton size="small" onClick={() => this.onMoveDown(idx)}>
+                                            <DownIcon />
+                                        </IconButton>
+                                    </Tooltip> : <div className={classes.buttonEmpty} />) : null}
+                                    <Tooltip title={I18n.t('ra_Delete current row')}>
+                                        <IconButton size="small" onClick={this.onDelete(idx)}>
+                                            <DeleteIcon />
+                                        </IconButton>
+                                    </Tooltip>
+                                    {this.props.schema.clone ? <Tooltip title={I18n.t('ra_Clone current row')}>
+                                        <IconButton size="small" onClick={this.onClone(idx)}>
+                                            <CopyContentIcon />
+                                        </IconButton>
+                                    </Tooltip> : null}
+                                </TableCell>}
+                            </TableRow>)}
+                        {!schema.noDelete && visibleValue.length >= (schema.showSecondAddAt || 5) ?
+                            <TableRow>
+                                <TableCell colSpan={schema.items.length + 1}>
+                                    <Tooltip title={doAnyFilterSet ? I18n.t('ra_Cannot add items with set filter') : I18n.t('ra_Add row')}>
+                                        <span>
+                                            <IconButton size="small" color="primary" disabled={!!doAnyFilterSet && !this.props.schema.allowAddByFilter} onClick={this.onAdd}>
+                                                <AddIcon />
+                                            </IconButton>
+                                        </span>
+                                    </Tooltip>
+                                </TableCell>
+                            </TableRow> : null}
+                    </TableBody>
+                </Table>
+                {!visibleValue.length && this.state.value.length ?
+                    <div className={classes.filteredOut}>
+                        <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
+                            {I18n.t('ra_All items are filtered out')}
+                            <IconButton
+                                size="small"
+                                onClick={() => this.applyFilter(true)}
+                            >
+                                <CloseIcon />
+                            </IconButton>
+                        </Typography>
+                    </div> : null}
+            </TableContainer>
+            {schema.help ?
+                <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText>
+                : null}
+            {this.state.errorMessage ? <div style={{ display: 'flex', padding: '5px' }}>
+                <ErrorIcon color="error" />
+                <span style={{ color: 'red', alignSelf: 'center' }}>{this.state.errorMessage}</span>
+            </div> : null}
+        </Paper>;
+    }
+}
+
+export default withStyles(styles)(ConfigTable);