@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/Components/TreeTable.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 
 import { HexColorPicker as ColorPicker } from 'react-colorful';
 
@@ -34,13 +34,9 @@ import type Connection from '../Connection';
 
 import DialogSelectID from '../Dialogs/SelectID';
 import Utils from './Utils';
-import { IobTheme } from '../types';
+import type { IobTheme } from '../types';
 
-function getAttr(
-    obj: Record<string, any>,
-    attr: string | string[],
-    lookup?: Record<string, string>,
-): any {
+function getAttr(obj: Record<string, any>, attr: string | string[], lookup?: Record<string, string>): any {
     if (typeof attr === 'string') {
         attr = attr.split('.');
     }
@@ -60,17 +56,13 @@ function getAttr(
     return getAttr(obj[name], attr);
 }
 
-function setAttr(
-    obj: Record<string, any>,
-    attr: string | string[],
-    value: any,
-): void {
+function setAttr(obj: Record<string, any>, attr: string | string[], value: any): void {
     if (typeof attr === 'string') {
         attr = attr.split('.');
     }
 
     if (attr.length === 1) {
-        return obj[attr[0]] = value;
+        return (obj[attr[0]] = value);
     }
     const name: string = attr.shift() as string;
     if (obj[name] === null || obj[name] === undefined) {
@@ -96,12 +88,8 @@ const styles: Record<string, any> = {
         paddingLeft: 4,
         paddingRight: 4,
     },
-    rowMainWithChildren: {
-
-    },
-    rowMainWithoutChildren: {
-
-    },
+    rowMainWithChildren: {},
+    rowMainWithoutChildren: {},
     rowNoEdit: {
         opacity: 0.3,
     },
@@ -210,8 +198,7 @@ function stableSort(
     array: Record<string, any>[],
     comparator: (a: Record<string, any>, b: Record<string, any>) => number,
 ): Record<string, any>[] {
-    const stabilizedThis: { e: Record<string, any>; i: number }[] =
-        array.map((el, index) => ({ e: el, i: index }));
+    const stabilizedThis: { e: Record<string, any>; i: number }[] = array.map((el, index) => ({ e: el, i: index }));
 
     stabilizedThis.sort((a, b) => {
         const order = comparator(a.e, b.e);
@@ -282,10 +269,11 @@ class TreeTable extends Component<TreeTableProps, TreeTableState> {
     constructor(props: TreeTableProps) {
         super(props);
 
-        let opened = ((window as any)._localStorage || window.localStorage).getItem(this.props.name || 'iob-table') || '[]';
+        let opened =
+            ((window as any)._localStorage || window.localStorage).getItem(this.props.name || 'iob-table') || '[]';
         try {
             opened = JSON.parse(opened) || [];
-        } catch (e) {
+        } catch {
             opened = [];
         }
         if (!Array.isArray(opened)) {
@@ -331,10 +319,7 @@ class TreeTable extends Component<TreeTableProps, TreeTableState> {
         return { data: props.data };
     }
 
-    renderCellEdit(
-        item: Record<string, any>,
-        col: Column,
-    ) {
+    renderCellEdit(item: Record<string, any>, col: Column): JSX.Element | null {
         let val = getAttr(item, col.field);
         if (Array.isArray(val)) {
             val = val[0];
@@ -342,7 +327,8 @@ class TreeTable extends Component<TreeTableProps, TreeTableState> {
 
         if (col.lookup) {
             return this.renderCellEditSelect(col, val);
-        } if (col.editComponent) {
+        }
+        if (col.editComponent) {
             return this.renderCellEditCustom(col, val, item);
         }
         if (col.type === 'boolean' || (!col.type && typeof val === 'boolean')) {
@@ -361,7 +347,7 @@ class TreeTable extends Component<TreeTableProps, TreeTableState> {
         return this.renderCellEditString(col, val);
     }
 
-    onChange(col: Column, oldValue: string | number | boolean, newValue: string | number | boolean) {
+    onChange(col: Column, oldValue: string | number | boolean, newValue: string | number | boolean): void {
         const editData = this.state.editData ? { ...this.state.editData } : {};
         if (newValue === oldValue) {
             delete editData[col.field];
@@ -371,52 +357,60 @@ class TreeTable extends Component<TreeTableProps, TreeTableState> {
         this.setState({ editData });
     }
 
-    renderCellEditSelect(
-        col: Column,
-        val: string | number,
-    ) {
-        return <Select
-            variant="standard"
-            onChange={e => this.onChange(col, val, e.target.value)}
-            value={(this.state.editData && this.state.editData[col.field]) || val}
-        >
-            {col.lookup && Object.keys(col.lookup)
-                .map((v, i) => <MenuItem key={i} value={v}>{col.lookup?.[v]}</MenuItem>)}
-        </Select>;
+    renderCellEditSelect(col: Column, val: string | number): JSX.Element {
+        return (
+            <Select
+                variant="standard"
+                onChange={e => this.onChange(col, val, e.target.value)}
+                value={(this.state.editData && this.state.editData[col.field]) || val}
+            >
+                {col.lookup &&
+                    Object.keys(col.lookup).map((v, i) => (
+                        <MenuItem
+                            key={i}
+                            value={v}
+                        >
+                            {col.lookup?.[v]}
+                        </MenuItem>
+                    ))}
+            </Select>
+        );
     }
 
-    renderCellEditString(
-        col: Column,
-        val: string,
-    ) {
-        return <TextField
-            variant="standard"
-            style={styles.fieldEdit}
-            fullWidth
-            value={this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val}
-            onChange={e => this.onChange(col, val, e.target.value)}
-        />;
+    renderCellEditString(col: Column, val: string): JSX.Element {
+        return (
+            <TextField
+                variant="standard"
+                style={styles.fieldEdit}
+                fullWidth
+                value={
+                    this.state.editData && this.state.editData[col.field] !== undefined
+                        ? this.state.editData[col.field]
+                        : val
+                }
+                onChange={e => this.onChange(col, val, e.target.value)}
+            />
+        );
     }
 
-    renderCellEditNumber(
-        col: Column,
-        val: number,
-    ) {
-        return <TextField
-            variant="standard"
-            style={styles.fieldEdit}
-            type="number"
-            fullWidth
-            value={this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val}
-            onChange={e => this.onChange(col, val, e.target.value)}
-        />;
+    renderCellEditNumber(col: Column, val: number): JSX.Element {
+        return (
+            <TextField
+                variant="standard"
+                style={styles.fieldEdit}
+                type="number"
+                fullWidth
+                value={
+                    this.state.editData && this.state.editData[col.field] !== undefined
+                        ? this.state.editData[col.field]
+                        : val
+                }
+                onChange={e => this.onChange(col, val, e.target.value)}
+            />
+        );
     }
 
-    renderCellEditCustom(
-        col: Column,
-        val: any,
-        item: Record<string, any>,
-    ) {
+    renderCellEditCustom(col: Column, val: any, item: Record<string, any>): JSX.Element | null {
         const EditComponent = col.editComponent;
 
         // use new value if exists
@@ -426,186 +420,194 @@ class TreeTable extends Component<TreeTableProps, TreeTableState> {
             item[col.field] = val;
         }
 
-        return EditComponent ? <EditComponent
-            value={val}
-            rowData={item}
-            onChange={(newVal: any) => this.onChange(col, val, newVal as string | number)}
-        /> : null;
-    }
-
-    renderCellEditBoolean(
-        col: Column,
-        val: boolean,
-    ) {
-        return <Checkbox
-            checked={this.state.editData && this.state.editData[col.field] !== undefined ? !!this.state.editData[col.field] : !!val}
-            onChange={e => this.onChange(col, !!val, e.target.checked)}
-            inputProps={{ 'aria-label': 'checkbox' }}
-        />;
-    }
-
-    renderSelectColorDialog() {
-        return <Dialog
-            sx={{
-                '& .MuiPaper-root': styles.root,
-                '& .MuiPaper-paper': styles.paper,
-            }}
-            onClose={() => {
-                this.selectCallback = null;
-                this.setState({ showSelectColor: false });
-            }}
-            open={this.state.showSelectColor}
-        >
-            <ColorPicker
-                color={this.state.selectIdValue as string}
-                onChange={color =>
-                    this.setState({ selectIdValue: color }, () =>
-                        this.selectCallback && this.selectCallback(color))}
+        return EditComponent ? (
+            <EditComponent
+                value={val}
+                rowData={item}
+                onChange={(newVal: any) => this.onChange(col, val, newVal as string | number)}
             />
-        </Dialog>;
+        ) : null;
     }
 
-    renderCellEditColor(
-        col: Column,
-        val: string,
-    ) {
-        const _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
-        return <div style={styles.fieldEdit}>
-            <TextField
-                variant="standard"
-                fullWidth
-                style={styles.fieldEditWithButton}
-                value={_val}
-                inputProps={{ style: { backgroundColor: _val, color: Utils.isUseBright(_val) ? '#FFF' : '#000' } }}
-                onChange={e => this.onChange(col, !!val, e.target.value)}
+    renderCellEditBoolean(col: Column, val: boolean): JSX.Element {
+        return (
+            <Checkbox
+                checked={
+                    this.state.editData && this.state.editData[col.field] !== undefined
+                        ? !!this.state.editData[col.field]
+                        : !!val
+                }
+                onChange={e => this.onChange(col, !!val, e.target.checked)}
+                inputProps={{ 'aria-label': 'checkbox' }}
             />
+        );
+    }
 
-            <IconButton
-                style={styles.fieldButton}
-                onClick={() => {
-                    this.selectCallback = newColor => this.onChange(col, val, newColor);
-                    this.setState({ showSelectColor: true, selectIdValue: val });
+    renderSelectColorDialog(): JSX.Element {
+        return (
+            <Dialog
+                sx={{
+                    '& .MuiPaper-root': styles.root,
+                    '& .MuiPaper-paper': styles.paper,
+                }}
+                onClose={() => {
+                    this.selectCallback = null;
+                    this.setState({ showSelectColor: false });
                 }}
-                size="large"
+                open={this.state.showSelectColor}
             >
-                <IconColor />
-            </IconButton>
-        </div>;
+                <ColorPicker
+                    color={this.state.selectIdValue as string}
+                    onChange={color =>
+                        this.setState({ selectIdValue: color }, () => this.selectCallback && this.selectCallback(color))
+                    }
+                />
+            </Dialog>
+        );
+    }
+
+    renderCellEditColor(col: Column, val: string): JSX.Element {
+        const _val =
+            this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
+        return (
+            <div style={styles.fieldEdit}>
+                <TextField
+                    variant="standard"
+                    fullWidth
+                    style={styles.fieldEditWithButton}
+                    value={_val}
+                    inputProps={{ style: { backgroundColor: _val, color: Utils.isUseBright(_val) ? '#FFF' : '#000' } }}
+                    onChange={e => this.onChange(col, !!val, e.target.value)}
+                />
+
+                <IconButton
+                    style={styles.fieldButton}
+                    onClick={() => {
+                        this.selectCallback = newColor => this.onChange(col, val, newColor);
+                        this.setState({ showSelectColor: true, selectIdValue: val });
+                    }}
+                    size="large"
+                >
+                    <IconColor />
+                </IconButton>
+            </div>
+        );
     }
 
-    renderSelectIdDialog() {
+    renderSelectIdDialog(): JSX.Element | null {
         if (this.state.showSelectId && this.props.socket) {
-            return <DialogSelectID
-                key="tableSelect"
-                imagePrefix="../.."
-                dialogName={this.props.adapterName}
-                themeType={this.props.themeType}
-                theme={this.props.theme}
-                socket={this.props.socket as Connection}
-                selected={this.state.selectIdValue as string}
-                onClose={() => this.setState({ showSelectId: false })}
-                onOk={(selected /* , name */) => {
-                    this.setState({ showSelectId: false, selectIdValue: null });
-                    this.selectCallback && this.selectCallback(selected as string);
-                    this.selectCallback = null;
-                }}
-            />;
+            return (
+                <DialogSelectID
+                    key="tableSelect"
+                    imagePrefix="../.."
+                    dialogName={this.props.adapterName}
+                    themeType={this.props.themeType}
+                    theme={this.props.theme}
+                    socket={this.props.socket}
+                    selected={this.state.selectIdValue as string}
+                    onClose={() => this.setState({ showSelectId: false })}
+                    onOk={(selected /* , name */) => {
+                        this.setState({ showSelectId: false, selectIdValue: null });
+                        this.selectCallback && this.selectCallback(selected as string);
+                        this.selectCallback = null;
+                    }}
+                />
+            );
         }
 
         return null;
     }
 
-    renderCellEditObjectID(
-        col: Column,
-        val: string,
-    ) {
-        return <div style={styles.fieldEdit}>
-            <TextField
-                variant="standard"
-                fullWidth
-                style={styles.fieldEditWithButton}
-                value={this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val}
-                onChange={e => this.onChange(col, val, e.target.value)}
-            />
+    renderCellEditObjectID(col: Column, val: string): JSX.Element {
+        return (
+            <div style={styles.fieldEdit}>
+                <TextField
+                    variant="standard"
+                    fullWidth
+                    style={styles.fieldEditWithButton}
+                    value={
+                        this.state.editData && this.state.editData[col.field] !== undefined
+                            ? this.state.editData[col.field]
+                            : val
+                    }
+                    onChange={e => this.onChange(col, val, e.target.value)}
+                />
 
-            <IconButton
-                style={styles.fieldButton}
-                onClick={() => {
-                    this.selectCallback = selected => this.onChange(col, val, selected);
-                    this.setState({ showSelectId: true, selectIdValue: val });
-                }}
-                size="large"
-            >
-                <IconList />
-            </IconButton>
-        </div>;
+                <IconButton
+                    style={styles.fieldButton}
+                    onClick={() => {
+                        this.selectCallback = selected => this.onChange(col, val, selected);
+                        this.setState({ showSelectId: true, selectIdValue: val });
+                    }}
+                    size="large"
+                >
+                    <IconList />
+                </IconButton>
+            </div>
+        );
     }
 
-    static renderCellNonEdit(
-        item: Record<string, any>,
-        col: Column,
-    ) {
+    static renderCellNonEdit(item: Record<string, any>, col: Column): JSX.Element | string | number | null {
         let val = getAttr(item, col.field, col.lookup);
         if (Array.isArray(val)) {
             val = val[0];
         }
 
         if (col.type === 'boolean') {
-            return <Checkbox
-                checked={!!val}
-                disabled
-                inputProps={{ 'aria-label': 'checkbox' }}
-            />;
+            return (
+                <Checkbox
+                    checked={!!val}
+                    disabled
+                    inputProps={{ 'aria-label': 'checkbox' }}
+                />
+            );
         }
 
         return val;
     }
 
-    renderCell(
-        item: Record<string, any>,
-        col: Column,
-        level: number,
-        i: number,
-    ) {
+    renderCell(item: Record<string, any>, col: Column, level: number, i: number): JSX.Element {
         if (this.state.editMode === i && col.editable !== 'never' && col.editable !== false) {
-            return <TableCell
+            return (
+                <TableCell
+                    key={col.field}
+                    style={{ ...styles.cell, ...(level ? styles.cellSecondary : undefined), ...col.cellStyle }}
+                    component="th"
+                >
+                    {this.renderCellEdit(item, col)}
+                </TableCell>
+            );
+        }
+        return (
+            <TableCell
                 key={col.field}
                 style={{ ...styles.cell, ...(level ? styles.cellSecondary : undefined), ...col.cellStyle }}
                 component="th"
             >
-                {this.renderCellEdit(item, col)}
-            </TableCell>;
-        }
-        return <TableCell
-            key={col.field}
-            style={{ ...styles.cell, ...(level ? styles.cellSecondary : undefined), ...col.cellStyle }}
-            component="th"
-        >
-            {TreeTable.renderCellNonEdit(item, col)}
-        </TableCell>;
+                {TreeTable.renderCellNonEdit(item, col)}
+            </TableCell>
+        );
     }
 
-    static renderCellWithSubField(
-        item: Record<string, any>,
-        col: Column,
-    ) {
+    static renderCellWithSubField(item: Record<string, any>, col: Column): JSX.Element {
         const main = getAttr(item, col.field, col.lookup);
         if (col.subField) {
-            const sub  = getAttr(item, col.subField, col.subLookup);
-            return <div>
-                <div style={styles.mainText}>{main}</div>
-                <div style={{ ...styles.subText, ...(col.subStyle || undefined) }}>{sub}</div>
-            </div>;
+            const sub = getAttr(item, col.subField, col.subLookup);
+            return (
+                <div>
+                    <div style={styles.mainText}>{main}</div>
+                    <div style={{ ...styles.subText, ...(col.subStyle || undefined) }}>{sub}</div>
+                </div>
+            );
         }
-        return <div>
-            <div style={styles.mainText}>{main}</div>
-        </div>;
+        return (
+            <div>
+                <div style={styles.mainText}>{main}</div>
+            </div>
+        );
     }
 
-    renderLine(
-        item: Record<string, any>,
-        level?: number,
-    ): React.JSX.Element | React.JSX.Element[] | null {
+    renderLine(item: Record<string, any>, level?: number): JSX.Element | JSX.Element[] | null {
         const levelShift = this.props.levelShift === undefined ? 24 : this.props.levelShift;
 
         level = level || 0;
@@ -623,196 +625,269 @@ class TreeTable extends Component<TreeTableProps, TreeTableState> {
         const opened = this.state.opened.includes(item.id);
         const children = this.props.data.filter(it => it.parentId === item.id);
 
-        const row = <TableRow
-            key={item.id}
-            className={`table-row-${(item.id || '').toString().replace(/[.$]/g, '_')}`}
-            style={{
-                ...((this.state.update && this.state.update.includes(item.id) && styles.glow) || undefined),
-                ...styles.row,
-                ...(level ? styles.rowSecondary : undefined),
-                ...(!level && children.length ? styles.rowMainWithChildren : undefined),
-                ...(!level && !children.length ? styles.rowMainWithoutChildren : undefined),
-                ...(this.state.editMode !== false && this.state.editMode !== i ? styles.rowNoEdit : undefined),
-                ...(this.state.deleteMode !== false && this.state.deleteMode !== i ? styles.rowNoEdit : undefined),
-            }}
-        >
-            <TableCell
-                style={{ ...styles.cell, ...styles.cellExpand, ...(level ? styles.cellSecondary : undefined) }}
-            >
-                {children.length ? <IconButton
-                    onClick={() => {
-                        const _opened = [...this.state.opened];
-                        const pos = _opened.indexOf(item.id);
-                        if (pos === -1) {
-                            _opened.push(item.id);
-                            _opened.sort();
-                        } else {
-                            _opened.splice(pos, 1);
-                        }
-
-                        ((window as any)._localStorage || window.localStorage).setItem(this.props.name || 'iob-table', JSON.stringify(_opened));
-
-                        this.setState({ opened: _opened });
-                    }}
-                    size="small"
-                >
-                    {opened ? <IconCollapse /> : <IconExpand />}
-                </IconButton>  : null}
-            </TableCell>
-            <TableCell
-                scope="row"
+        const row = (
+            <TableRow
+                key={item.id}
+                className={`table-row-${(item.id || '').toString().replace(/[.$]/g, '_')}`}
                 style={{
-                    ...styles.cell,
-                    ...(level ? styles.cellSecondary : undefined),
-                    ...this.props.columns[0].cellStyle,
-                    paddingLeft: levelShift * level,
+                    ...((this.state.update && this.state.update.includes(item.id) && styles.glow) || undefined),
+                    ...styles.row,
+                    ...(level ? styles.rowSecondary : undefined),
+                    ...(!level && children.length ? styles.rowMainWithChildren : undefined),
+                    ...(!level && !children.length ? styles.rowMainWithoutChildren : undefined),
+                    ...(this.state.editMode !== false && this.state.editMode !== i ? styles.rowNoEdit : undefined),
+                    ...(this.state.deleteMode !== false && this.state.deleteMode !== i ? styles.rowNoEdit : undefined),
                 }}
             >
-                {this.props.columns[0].subField ?
-                    TreeTable.renderCellWithSubField(item, this.props.columns[0])
-                    :
-                    getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup)}
-            </TableCell>
-
-            {this.props.columns.map((col, ii) =>
-                (!ii && !col.hidden ? null : this.renderCell(item, col, level, i)))}
-
-            {this.props.onUpdate ? <TableCell style={{ ...styles.cell, ...styles.cellButton }}>
-                {this.state.editMode === i || this.state.deleteMode === i ?
-                    <IconButton
-                        disabled={this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length)}
-                        onClick={() => {
-                            if (this.state.editMode !== false) {
-                                const newData = JSON.parse(JSON.stringify(item));
-                                this.state.editData && Object.keys(this.state.editData).forEach(attr =>
-                                    setAttr(newData, attr, this.state.editData?.[attr]));
-                                this.setState({ editMode: false }, () => this.props.onUpdate && this.props.onUpdate(newData, item));
-                            } else {
-                                this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item));
-                            }
-                        }}
-                        size="large"
-                    >
-                        <IconCheck />
-                    </IconButton>
-                    :
-                    <IconButton
-                        disabled={this.state.editMode !== false}
-                        onClick={() => this.setState({ editMode: i, editData: null })}
-                        size="large"
-                    >
-                        <IconEdit />
-                    </IconButton>}
-            </TableCell> : null}
-
-            {this.props.onDelete && !this.props.onUpdate ?
-                <TableCell style={{ ...styles.cell, ...styles.cellButton }}>
-                    {this.state.deleteMode === i ?
+                <TableCell
+                    style={{ ...styles.cell, ...styles.cellExpand, ...(level ? styles.cellSecondary : undefined) }}
+                >
+                    {children.length ? (
                         <IconButton
-                            disabled={this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length)}
-                            onClick={() => this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item))}
-                            size="large"
+                            onClick={() => {
+                                const _opened = [...this.state.opened];
+                                const pos = _opened.indexOf(item.id);
+                                if (pos === -1) {
+                                    _opened.push(item.id);
+                                    _opened.sort();
+                                } else {
+                                    _opened.splice(pos, 1);
+                                }
+
+                                ((window as any)._localStorage || window.localStorage).setItem(
+                                    this.props.name || 'iob-table',
+                                    JSON.stringify(_opened),
+                                );
+
+                                this.setState({ opened: _opened });
+                            }}
+                            size="small"
                         >
-                            <IconCheck />
+                            {opened ? <IconCollapse /> : <IconExpand />}
                         </IconButton>
-                        :
-                        null}
-                </TableCell> : null}
-
-            {this.props.onUpdate || this.props.onDelete ? <TableCell style={{ ...styles.cell, ...styles.cellButton }}>
-                {this.state.editMode === i || this.state.deleteMode === i ?
-                    <IconButton
-                        onClick={() => this.setState({ editMode: false, deleteMode: false })}
-                        size="large"
-                    >
-                        <IconClose />
-                    </IconButton>
-                    :
-                    (this.props.onDelete ? <IconButton
-                        disabled={this.state.deleteMode !== false}
-                        onClick={() => this.setState({ deleteMode: i })}
-                        size="large"
-                    >
-                        <IconDelete />
-                    </IconButton> : null)}
-            </TableCell> : null}
-        </TableRow>;
+                    ) : null}
+                </TableCell>
+                <TableCell
+                    scope="row"
+                    style={{
+                        ...styles.cell,
+                        ...(level ? styles.cellSecondary : undefined),
+                        ...this.props.columns[0].cellStyle,
+                        paddingLeft: levelShift * level,
+                    }}
+                >
+                    {this.props.columns[0].subField
+                        ? TreeTable.renderCellWithSubField(item, this.props.columns[0])
+                        : getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup)}
+                </TableCell>
+
+                {this.props.columns.map((col, ii) =>
+                    !ii && !col.hidden ? null : this.renderCell(item, col, level, i),
+                )}
+
+                {this.props.onUpdate ? (
+                    <TableCell style={{ ...styles.cell, ...styles.cellButton }}>
+                        {this.state.editMode === i || this.state.deleteMode === i ? (
+                            <IconButton
+                                disabled={
+                                    this.state.editMode !== false &&
+                                    (!this.state.editData || !Object.keys(this.state.editData).length)
+                                }
+                                onClick={() => {
+                                    if (this.state.editMode !== false) {
+                                        const newData = JSON.parse(JSON.stringify(item));
+                                        this.state.editData &&
+                                            Object.keys(this.state.editData).forEach(attr =>
+                                                setAttr(newData, attr, this.state.editData?.[attr]),
+                                            );
+                                        this.setState(
+                                            { editMode: false },
+                                            () => this.props.onUpdate && this.props.onUpdate(newData, item),
+                                        );
+                                    } else {
+                                        this.setState(
+                                            { deleteMode: false },
+                                            () => this.props.onDelete && this.props.onDelete(item),
+                                        );
+                                    }
+                                }}
+                                size="large"
+                            >
+                                <IconCheck />
+                            </IconButton>
+                        ) : (
+                            <IconButton
+                                disabled={this.state.editMode !== false}
+                                onClick={() => this.setState({ editMode: i, editData: null })}
+                                size="large"
+                            >
+                                <IconEdit />
+                            </IconButton>
+                        )}
+                    </TableCell>
+                ) : null}
+
+                {this.props.onDelete && !this.props.onUpdate ? (
+                    <TableCell style={{ ...styles.cell, ...styles.cellButton }}>
+                        {this.state.deleteMode === i ? (
+                            <IconButton
+                                disabled={
+                                    this.state.editMode !== false &&
+                                    (!this.state.editData || !Object.keys(this.state.editData).length)
+                                }
+                                onClick={() =>
+                                    this.setState(
+                                        { deleteMode: false },
+                                        () => this.props.onDelete && this.props.onDelete(item),
+                                    )
+                                }
+                                size="large"
+                            >
+                                <IconCheck />
+                            </IconButton>
+                        ) : null}
+                    </TableCell>
+                ) : null}
+
+                {this.props.onUpdate || this.props.onDelete ? (
+                    <TableCell style={{ ...styles.cell, ...styles.cellButton }}>
+                        {this.state.editMode === i || this.state.deleteMode === i ? (
+                            <IconButton
+                                onClick={() => this.setState({ editMode: false, deleteMode: false })}
+                                size="large"
+                            >
+                                <IconClose />
+                            </IconButton>
+                        ) : this.props.onDelete ? (
+                            <IconButton
+                                disabled={this.state.deleteMode !== false}
+                                onClick={() => this.setState({ deleteMode: i })}
+                                size="large"
+                            >
+                                <IconDelete />
+                            </IconButton>
+                        ) : null}
+                    </TableCell>
+                ) : null}
+            </TableRow>
+        );
 
         if (!level && opened) {
-            const items: React.JSX.Element[] = children.map(it =>
-                this.renderLine(it, level + 1)) as React.JSX.Element[];
+            const items: JSX.Element[] = children.map(it => this.renderLine(it, level + 1)) as JSX.Element[];
             items.unshift(row);
             return items;
         }
         return row;
     }
 
-    handleRequestSort(property: string) {
+    handleRequestSort(property: string): void {
         const isAsc = this.state.orderBy === property && this.state.order === 'asc';
         this.setState({ order: isAsc ? 'desc' : 'asc', orderBy: property });
     }
 
-    renderHead() {
-        return <TableHead>
-            <TableRow key="headerRow">
-                <TableCell
-                    component="th"
-                    sx={Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellExpand)}
-                />
-                <TableCell
-                    component="th"
-                    sx={Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`])}
-                    style={this.props.columns[0].headerStyle || this.props.columns[0].cellStyle}
-                    sortDirection={this.props.noSort ? false : (this.state.orderBy === this.props.columns[0].field ? this.state.order : false)}
-                >
-                    {this.props.noSort ? null : <TableSortLabel
-                        active={this.state.orderBy === this.props.columns[0].field}
-                        direction={this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc'}
-                        onClick={() => this.handleRequestSort(this.props.columns[0].field)}
-                    >
-                        {this.props.columns[0].title || this.props.columns[0].field}
-                        {this.state.orderBy === this.props.columns[0].field ?
-                            <span style={styles.visuallyHidden}>
-                                {this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                            </span> : null}
-                    </TableSortLabel>}
-                </TableCell>
-                {this.props.columns.map((col, i) =>
-                    (!i && !col.hidden ? null : <TableCell
-                        key={col.field}
-                        sx={Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${col.field.replace(/\./g, '_')}`])}
-                        style={col.headerStyle || col.cellStyle}
+    renderHead(): JSX.Element {
+        return (
+            <TableHead>
+                <TableRow key="headerRow">
+                    <TableCell
+                        component="th"
+                        sx={Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellExpand)}
+                    />
+                    <TableCell
                         component="th"
+                        sx={Utils.getStyle(
+                            this.props.theme,
+                            styles.cell,
+                            styles.cellHeader,
+                            styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`],
+                        )}
+                        style={this.props.columns[0].headerStyle || this.props.columns[0].cellStyle}
+                        sortDirection={
+                            this.props.noSort
+                                ? false
+                                : this.state.orderBy === this.props.columns[0].field
+                                  ? this.state.order
+                                  : false
+                        }
                     >
-                        {this.props.noSort ? null : <TableSortLabel
-                            active={this.state.orderBy === col.field}
-                            direction={this.state.orderBy === col.field ? this.state.order : 'asc'}
-                            onClick={() => this.handleRequestSort(col.field)}
+                        {this.props.noSort ? null : (
+                            <TableSortLabel
+                                active={this.state.orderBy === this.props.columns[0].field}
+                                direction={
+                                    this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc'
+                                }
+                                onClick={() => this.handleRequestSort(this.props.columns[0].field)}
+                            >
+                                {this.props.columns[0].title || this.props.columns[0].field}
+                                {this.state.orderBy === this.props.columns[0].field ? (
+                                    <span style={styles.visuallyHidden}>
+                                        {this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                                    </span>
+                                ) : null}
+                            </TableSortLabel>
+                        )}
+                    </TableCell>
+                    {this.props.columns.map((col, i) =>
+                        !i && !col.hidden ? null : (
+                            <TableCell
+                                key={col.field}
+                                sx={Utils.getStyle(
+                                    this.props.theme,
+                                    styles.cell,
+                                    styles.cellHeader,
+                                    styles[`width_${col.field.replace(/\./g, '_')}`],
+                                )}
+                                style={col.headerStyle || col.cellStyle}
+                                component="th"
+                            >
+                                {this.props.noSort ? null : (
+                                    <TableSortLabel
+                                        active={this.state.orderBy === col.field}
+                                        direction={this.state.orderBy === col.field ? this.state.order : 'asc'}
+                                        onClick={() => this.handleRequestSort(col.field)}
+                                    >
+                                        {col.title || col.field}
+                                        {this.state.orderBy === col.field ? (
+                                            <span style={styles.visuallyHidden}>
+                                                {this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                )}
+                            </TableCell>
+                        ),
+                    )}
+                    {this.props.onUpdate ? (
+                        <TableCell
+                            component="th"
+                            sx={Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton)}
                         >
-                            {col.title || col.field}
-                            {this.state.orderBy === col.field ?
-                                <span style={styles.visuallyHidden}>
-                                    {this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                                </span> : null}
-                        </TableSortLabel> }
-                    </TableCell>))}
-                {this.props.onUpdate ? <TableCell component="th" sx={Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton)}>
-                    {!this.props.noAdd ? <Fab
-                        color="primary"
-                        size="small"
-                        disabled={this.state.editMode !== false}
-                        onClick={() => this.props.onUpdate && (this.props.onUpdate as (addNew: true) => void)(true)}
-                    >
-                        <IconAdd />
-                    </Fab> : null }
-                </TableCell> : null}
-                {this.props.onDelete || this.props.onUpdate ?
-                    <TableCell component="th" sx={Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton)} /> : null}
-            </TableRow>
-        </TableHead>;
+                            {!this.props.noAdd ? (
+                                <Fab
+                                    color="primary"
+                                    size="small"
+                                    disabled={this.state.editMode !== false}
+                                    onClick={() =>
+                                        this.props.onUpdate && (this.props.onUpdate as (addNew: true) => void)(true)
+                                    }
+                                >
+                                    <IconAdd />
+                                </Fab>
+                            ) : null}
+                        </TableCell>
+                    ) : null}
+                    {this.props.onDelete || this.props.onUpdate ? (
+                        <TableCell
+                            component="th"
+                            sx={Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton)}
+                        />
+                    ) : null}
+                </TableRow>
+            </TableHead>
+        );
     }
 
-    render() {
+    render(): JSX.Element | null {
         const col = this.props.columns.find(_col => _col.field === this.state.orderBy);
         if (col) {
             const lookup = col.lookup;
@@ -826,16 +901,24 @@ class TreeTable extends Component<TreeTableProps, TreeTableState> {
                 }, 500);
             }
 
-            return <div style={styles.tableContainer} className={this.props.className}>
-                <Table style={styles.table} aria-label="simple table" size="small" stickyHeader>
-                    {this.renderHead()}
-                    <TableBody>
-                        {table.map(it => this.renderLine(it))}
-                    </TableBody>
-                </Table>
-                {this.renderSelectIdDialog()}
-                {this.renderSelectColorDialog()}
-            </div>;
+            return (
+                <div
+                    style={styles.tableContainer}
+                    className={this.props.className}
+                >
+                    <Table
+                        style={styles.table}
+                        aria-label="simple table"
+                        size="small"
+                        stickyHeader
+                    >
+                        {this.renderHead()}
+                        <TableBody>{table.map(it => this.renderLine(it))}</TableBody>
+                    </Table>
+                    {this.renderSelectIdDialog()}
+                    {this.renderSelectColorDialog()}
+                </div>
+            );
         }
 
         return null;