@iobroker/gui-components 10.2.0 → 10.2.1

package/build/Components/TreeTable.d.ts

@@ -47,7 +47,6 @@ interface TreeTableState {
     order: 'desc' | 'asc';
     update: string[] | null;
     orderBy: string;
-    showSelectColor: boolean;
     selectIdValue?: string | null;
     showSelectId?: boolean;
     data?: Record<string, any>[];
@@ -65,10 +64,15 @@ export declare class TreeTable extends Component<TreeTableProps, TreeTableState>
     renderCellEditNumber(col: Column, val: number): JSX.Element;
     renderCellEditCustom(col: Column, val: any, item: Record<string, any>): JSX.Element | null;
     renderCellEditBoolean(col: Column, val: boolean): JSX.Element;
-    renderSelectColorDialog(): JSX.Element;
     renderCellEditColor(col: Column, val: string): JSX.Element;
     renderSelectIdDialog(): JSX.Element | null;
     renderCellEditObjectID(col: Column, val: string): JSX.Element;
+    /**
+     * Show a color as swatch together with its value.
+     *
+     * @param color The color in any CSS notation.
+     */
+    static renderColorValue(color: string): JSX.Element;
     static renderCellNonEdit(item: Record<string, any>, col: Column): JSX.Element | string | number | null;
     renderCell(item: Record<string, any>, col: Column, level: number, i: number): JSX.Element;
     static renderCellWithSubField(item: Record<string, any>, col: Column): JSX.Element;

package/build/Components/TreeTable.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { HexColorPicker as ColorPicker } from 'react-colorful';
-import { Fab, Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, IconButton, Select, MenuItem, TextField, Checkbox, Dialog, } from '@mui/material';
-import { Edit as IconEdit, Delete as IconDelete, NavigateNext as IconExpand, ExpandMore as IconCollapse, Check as IconCheck, Close as IconClose, Add as IconAdd, ViewHeadline as IconList, Colorize as IconColor, } from '@mui/icons-material';
+import { Box, Fab, Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, IconButton, Select, MenuItem, TextField, Checkbox, Tooltip, } from '@mui/material';
+import { Edit as IconEdit, Delete as IconDelete, NavigateNext as IconExpand, Check as IconCheck, Close as IconClose, Add as IconAdd, ViewHeadline as IconList, } from '@mui/icons-material';
 import { DialogSelectID } from '../Dialogs/SelectID';
+import { ColorPicker, parseColor } from './ColorPicker';
+import { I18n } from '../i18n';
 import { Utils } from './Utils';
 function getAttr(obj, attr, lookup) {
     if (typeof attr === 'string') {
@@ -33,6 +34,8 @@ function setAttr(obj, attr, value) {
     }
     return setAttr(obj[name], attr, value);
 }
+/** Checkerboard, so a semi-transparent color is recognizable as such */
+const ALPHA_BACKGROUND = 'linear-gradient(45deg, #c0c0c0 25%, transparent 25%), linear-gradient(-45deg, #c0c0c0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c0c0c0 75%), linear-gradient(-45deg, transparent 75%, #c0c0c0 75%)';
 const styles = {
     tableContainer: {
         width: '100%',
@@ -43,32 +46,66 @@ const styles = {
         width: '100%',
         minWidth: 800,
         maxWidth: 1920,
+        borderCollapse: 'separate',
     },
-    cell: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 4,
-        paddingRight: 4,
-    },
+    cell: (theme) => ({
+        py: '4px',
+        px: '8px',
+        borderBottom: `1px solid ${theme.palette.divider}`,
+    }),
+    row: (theme) => ({
+        transition: 'background-color 0.15s ease-in-out',
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+        },
+        // Show the row actions only while the row is hovered or focused. Only the buttons are faded out -
+        // the cell itself must stay visible, else its bottom border would disappear too.
+        '& .iob-table-actions .MuiIconButton-root': {
+            opacity: 0,
+            transition: 'opacity 0.15s ease-in-out',
+        },
+        '&:hover .iob-table-actions .MuiIconButton-root, &:focus-within .iob-table-actions .MuiIconButton-root': {
+            opacity: 1,
+        },
+    }),
     rowMainWithChildren: {},
     rowMainWithoutChildren: {},
     rowNoEdit: {
-        opacity: 0.3,
+        opacity: 0.35,
     },
+    rowEditing: (theme) => ({
+        backgroundColor: theme.palette.action.selected,
+        '& .iob-table-actions .MuiIconButton-root': {
+            opacity: 1,
+        },
+    }),
     cellExpand: {
-        width: 30,
+        width: 36,
+        pr: 0,
     },
     cellButton: {
-        width: 30,
+        width: 40,
+        textAlign: 'center',
     },
-    cellHeader: {
-        fontWeight: 'bold',
-        background: (theme) => (theme.palette.mode === 'dark' ? '#888' : '#888'),
-        color: (theme) => (theme.palette.mode === 'dark' ? '#EEE' : '#111'),
-        height: 48,
+    cellHeader: (theme) => ({
+        fontWeight: 600,
+        fontSize: '0.72rem',
+        textTransform: 'uppercase',
+        letterSpacing: '0.06em',
+        lineHeight: 1.4,
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.text.secondary,
+        borderBottom: `2px solid ${theme.palette.divider}`,
+        height: 44,
         wordBreak: 'break-word',
-        whiteSpace: 'pre',
-    },
+        whiteSpace: 'nowrap',
+        '& .MuiTableSortLabel-root': {
+            color: 'inherit',
+        },
+        '& .MuiTableSortLabel-root:hover, & .MuiTableSortLabel-root.Mui-active': {
+            color: theme.palette.text.primary,
+        },
+    }),
     width_name_nicknames: {
         maxWidth: 150,
     },
@@ -84,11 +121,24 @@ const styles = {
     width_roomHint: {
         maxWidth: 100,
     },
-    rowSecondary: {
-        fontStyle: 'italic',
+    rowSecondary: {},
+    cellSecondary: (theme) => ({
+        fontSize: '0.8rem',
+        color: theme.palette.text.secondary,
+    }),
+    /** Vertical guide in front of a child row, so the hierarchy stays readable */
+    childIndent: (theme) => ({
+        display: 'inline-block',
+        borderLeft: `1px solid ${theme.palette.divider}`,
+        height: 20,
+        mr: '8px',
+        verticalAlign: 'middle',
+    }),
+    expandButton: {
+        transition: 'transform 0.15s ease-in-out',
     },
-    cellSecondary: {
-        fontSize: 10,
+    expandButtonOpened: {
+        transform: 'rotate(90deg)',
     },
     visuallyHidden: {
         border: 0,
@@ -108,20 +158,53 @@ const styles = {
     fieldEdit: {
         width: '100%',
         display: 'inline-block',
-        lineHeight: '50px',
         verticalAlign: 'middle',
     },
     fieldButton: {
         width: 30,
         display: 'inline-block',
     },
-    colorDialog: {
-        overflow: 'hidden',
-        padding: 15,
+    mainText: {
+        fontSize: '0.875rem',
     },
     subText: {
-        fontSize: 10,
-        fontStyle: 'italic',
+        fontSize: '0.7rem',
+        opacity: 0.7,
+    },
+    /** Color cell: swatch plus the value in a monospace font */
+    colorCell: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    colorSwatch: {
+        width: 22,
+        height: 22,
+        flexShrink: 0,
+        borderRadius: '5px',
+        boxShadow: '0 0 0 1px rgba(128,128,128,.35) inset',
+        backgroundImage: ALPHA_BACKGROUND,
+        backgroundSize: '8px 8px',
+        backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',
+    },
+    colorSwatchEmpty: {
+        border: '1px dashed',
+        borderColor: 'divider',
+        backgroundImage: 'none',
+        boxSizing: 'border-box',
+    },
+    colorSwatchFill: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 'inherit',
+    },
+    colorValue: {
+        fontFamily: 'monospace',
+        fontSize: '0.78rem',
+        whiteSpace: 'nowrap',
+    },
+    colorValueInvalid: {
+        color: 'error.main',
     },
     glow: {
         animation: 'glow 0.2s 2 alternate',
@@ -177,7 +260,6 @@ export class TreeTable extends Component {
             order: 'asc',
             update: null,
             orderBy: this.props.columns[0].field,
-            showSelectColor: false,
         };
     }
     componentWillUnmount() {
@@ -275,33 +357,9 @@ export class TreeTable extends Component {
                 ? !!this.state.editData[col.field]
                 : !!val, onChange: e => this.onChange(col, !!val, e.target.checked), slotProps: { input: { 'aria-label': 'checkbox' } } }));
     }
-    renderSelectColorDialog() {
-        return (React.createElement(Dialog, { sx: {
-                '& .MuiPaper-root': styles.root,
-                '& .MuiPaper-paper': styles.paper,
-            }, onClose: () => {
-                this.selectCallback = null;
-                this.setState({ showSelectColor: false });
-            }, open: this.state.showSelectColor },
-            React.createElement(ColorPicker, { color: this.state.selectIdValue || undefined, onChange: color => this.setState({ selectIdValue: color }, () => {
-                    if (this.selectCallback) {
-                        this.selectCallback(color);
-                    }
-                }) })));
-    }
     renderCellEditColor(col, val) {
         const _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
-        return (React.createElement("div", { style: styles.fieldEdit },
-            React.createElement(TextField, { variant: "standard", fullWidth: true, style: styles.fieldEditWithButton, value: _val, slotProps: {
-                    htmlInput: {
-                        style: { backgroundColor: _val, color: Utils.isUseBright(_val) ? '#FFF' : '#000' },
-                    },
-                }, onChange: e => this.onChange(col, !!val, e.target.value) }),
-            React.createElement(IconButton, { style: styles.fieldButton, onClick: () => {
-                    this.selectCallback = newColor => this.onChange(col, val, newColor);
-                    this.setState({ showSelectColor: true, selectIdValue: val });
-                }, size: "large" },
-                React.createElement(IconColor, null))));
+        return (React.createElement(ColorPicker, { id: `ar_tree_table_color_${col.field}`, style: styles.fieldEdit, value: _val || '', onChange: color => this.onChange(col, val, color) }));
     }
     renderSelectIdDialog() {
         if (this.state.showSelectId && this.props.socket) {
@@ -327,21 +385,33 @@ export class TreeTable extends Component {
                 }, size: "large" },
                 React.createElement(IconList, null))));
     }
+    /**
+     * Show a color as swatch together with its value.
+     *
+     * @param color The color in any CSS notation.
+     */
+    static renderColorValue(color) {
+        const isValid = !!color && !!parseColor(color);
+        return (React.createElement(Box, { component: "div", sx: styles.colorCell },
+            React.createElement(Box, { component: "div", sx: { ...styles.colorSwatch, ...(isValid ? undefined : styles.colorSwatchEmpty) }, title: color || undefined }, isValid ? (React.createElement(Box, { component: "div", sx: styles.colorSwatchFill, style: { background: color } })) : null),
+            React.createElement(Box, { component: "span", sx: { ...styles.colorValue, ...(color && !isValid ? styles.colorValueInvalid : undefined) } }, color || '')));
+    }
     static renderCellNonEdit(item, col) {
         let val = getAttr(item, col.field, col.lookup);
         if (Array.isArray(val)) {
             val = val[0];
         }
         if (col.type === 'boolean') {
-            return (React.createElement(Checkbox, { checked: !!val, disabled: true, slotProps: { input: { 'aria-label': 'checkbox' } } }));
+            return (React.createElement(Checkbox, { checked: !!val, disabled: true, size: "small", slotProps: { input: { 'aria-label': 'checkbox' } } }));
+        }
+        if (col.type === 'color') {
+            return TreeTable.renderColorValue(typeof val === 'string' ? val : '');
         }
         return val;
     }
     renderCell(item, col, level, i) {
-        if (this.state.editMode === i && col.editable !== 'never' && col.editable !== false) {
-            return (React.createElement(TableCell, { key: col.field, style: { ...styles.cell, ...(level ? styles.cellSecondary : undefined), ...col.cellStyle }, component: "th" }, this.renderCellEdit(item, col)));
-        }
-        return (React.createElement(TableCell, { key: col.field, style: { ...styles.cell, ...(level ? styles.cellSecondary : undefined), ...col.cellStyle }, component: "th" }, TreeTable.renderCellNonEdit(item, col)));
+        const isEdit = this.state.editMode === i && col.editable !== 'never' && col.editable !== false;
+        return (React.createElement(TableCell, { key: col.field, sx: Utils.getStyle(this.props.theme, styles.cell, level ? styles.cellSecondary : undefined), style: col.cellStyle, component: "th" }, isEdit ? this.renderCellEdit(item, col) : TreeTable.renderCellNonEdit(item, col)));
     }
     static renderCellWithSubField(item, col) {
         const main = getAttr(item, col.field, col.lookup);
@@ -370,16 +440,16 @@ export class TreeTable extends Component {
         // try to find children
         const opened = this.state.opened.includes(item.id);
         const children = this.props.data.filter(it => it.parentId === item.id);
-        const row = (React.createElement(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),
-            } },
-            React.createElement(TableCell, { style: { ...styles.cell, ...styles.cellExpand, ...(level ? styles.cellSecondary : undefined) } }, children.length ? (React.createElement(IconButton, { onClick: () => {
+        const isEditingThis = this.state.editMode === i || this.state.deleteMode === i;
+        const isBlurred = (this.state.editMode !== false && this.state.editMode !== i) ||
+            (this.state.deleteMode !== false && this.state.deleteMode !== i);
+        const row = (React.createElement(TableRow, { key: item.id, className: `table-row-${(item.id || '').toString().replace(/[.$]/g, '_')}`, sx: Utils.getStyle(this.props.theme, styles.row, level ? styles.rowSecondary : undefined, !level && children.length ? styles.rowMainWithChildren : undefined, !level && !children.length ? styles.rowMainWithoutChildren : undefined, isEditingThis ? styles.rowEditing : undefined, isBlurred ? styles.rowNoEdit : undefined), style: this.state.update && this.state.update.includes(item.id)
+                ? { ...styles.glow }
+                : undefined },
+            React.createElement(TableCell, { sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellExpand, level ? styles.cellSecondary : undefined) }, children.length ? (React.createElement(IconButton, { sx: {
+                    ...styles.expandButton,
+                    ...(opened ? styles.expandButtonOpened : undefined),
+                }, title: I18n.t(opened ? 'ra_Collapse' : 'ra_Expand'), onClick: () => {
                     const _opened = [...this.state.opened];
                     const pos = _opened.indexOf(item.id);
                     if (pos === -1) {
@@ -391,36 +461,44 @@ export class TreeTable extends Component {
                     }
                     (window._localStorage || window.localStorage).setItem(this.props.name || 'iob-table', JSON.stringify(_opened));
                     this.setState({ opened: _opened });
-                }, size: "small" }, opened ? React.createElement(IconCollapse, null) : React.createElement(IconExpand, null))) : null),
-            React.createElement(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)),
+                }, size: "small" },
+                React.createElement(IconExpand, { fontSize: "small" }))) : null),
+            React.createElement(TableCell, { scope: "row", sx: Utils.getStyle(this.props.theme, styles.cell, level ? styles.cellSecondary : undefined), style: { ...this.props.columns[0].cellStyle, paddingLeft: levelShift * level } },
+                React.createElement(Box, { component: "div", sx: { display: 'flex', alignItems: 'center' } },
+                    level ? (React.createElement(Box, { component: "span", sx: styles.childIndent })) : null,
+                    this.props.columns[0].subField
+                        ? TreeTable.renderCellWithSubField(item, this.props.columns[0])
+                        : getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup))),
             this.props.columns.map((col, ii) => !ii && !col.hidden ? null : this.renderCell(item, col, level, i)),
-            this.props.onUpdate ? (React.createElement(TableCell, { style: { ...styles.cell, ...styles.cellButton } }, this.state.editMode === i || this.state.deleteMode === i ? (React.createElement(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" },
-                React.createElement(IconCheck, null))) : (React.createElement(IconButton, { disabled: this.state.editMode !== false, onClick: () => this.setState({ editMode: i, editData: null }), size: "large" },
-                React.createElement(IconEdit, null))))) : null,
-            this.props.onDelete && !this.props.onUpdate ? (React.createElement(TableCell, { style: { ...styles.cell, ...styles.cellButton } }, this.state.deleteMode === i ? (React.createElement(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" },
-                React.createElement(IconCheck, null))) : null)) : null,
-            this.props.onUpdate || this.props.onDelete ? (React.createElement(TableCell, { style: { ...styles.cell, ...styles.cellButton } }, this.state.editMode === i || this.state.deleteMode === i ? (React.createElement(IconButton, { onClick: () => this.setState({ editMode: false, deleteMode: false }), size: "large" },
-                React.createElement(IconClose, null))) : this.props.onDelete ? (React.createElement(IconButton, { disabled: this.state.deleteMode !== false, onClick: () => this.setState({ deleteMode: i }), size: "large" },
-                React.createElement(IconDelete, null))) : null)) : null));
+            this.props.onUpdate ? (React.createElement(TableCell, { className: "iob-table-actions", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellButton) }, isEditingThis ? (React.createElement(Tooltip, { title: I18n.t(this.state.editMode !== false ? 'ra_Save' : 'ra_Delete') },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { color: this.state.deleteMode !== false ? 'error' : 'primary', 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: "small" },
+                        React.createElement(IconCheck, { fontSize: "small" }))))) : (React.createElement(Tooltip, { title: I18n.t('ra_Edit') },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { disabled: this.state.editMode !== false, onClick: () => this.setState({ editMode: i, editData: null }), size: "small" },
+                        React.createElement(IconEdit, { fontSize: "small" }))))))) : null,
+            this.props.onDelete && !this.props.onUpdate ? (React.createElement(TableCell, { className: "iob-table-actions", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellButton) }, this.state.deleteMode === i ? (React.createElement(Tooltip, { title: I18n.t('ra_Delete') },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { color: "error", 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: "small" },
+                        React.createElement(IconCheck, { fontSize: "small" }))))) : null)) : null,
+            this.props.onUpdate || this.props.onDelete ? (React.createElement(TableCell, { className: "iob-table-actions", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellButton) }, isEditingThis ? (React.createElement(Tooltip, { title: I18n.t('ra_Cancel') },
+                React.createElement(IconButton, { onClick: () => this.setState({ editMode: false, deleteMode: false }), size: "small" },
+                    React.createElement(IconClose, { fontSize: "small" })))) : this.props.onDelete ? (React.createElement(Tooltip, { title: I18n.t('ra_Delete') },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { disabled: this.state.deleteMode !== false, onClick: () => this.setState({ deleteMode: i }), size: "small" },
+                        React.createElement(IconDelete, { fontSize: "small" }))))) : null)) : null));
         if (!level && opened) {
             const items = children.map(it => this.renderLine(it, level + 1));
             items.unshift(row);
@@ -446,8 +524,11 @@ export class TreeTable extends Component {
                 this.props.columns.map((col, i) => !i && !col.hidden ? null : (React.createElement(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 : (React.createElement(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 ? (React.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null))))),
-                this.props.onUpdate ? (React.createElement(TableCell, { component: "th", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? (React.createElement(Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
-                    React.createElement(IconAdd, null))) : null)) : null,
+                this.props.onUpdate ? (React.createElement(TableCell, { component: "th", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? (React.createElement(Tooltip, { title: I18n.t('ra_Add') },
+                    React.createElement("span", null,
+                        React.createElement(Fab, { color: "primary", size: "small", sx: { width: 30, height: 30, minHeight: 30, boxShadow: 2 }, disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate &&
+                                this.props.onUpdate(true) },
+                            React.createElement(IconAdd, { fontSize: "small" }))))) : null)) : null,
                 this.props.onDelete || this.props.onUpdate ? (React.createElement(TableCell, { component: "th", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) })) : null)));
     }
     render() {
@@ -466,8 +547,7 @@ export class TreeTable extends Component {
                 React.createElement(Table, { style: styles.table, "aria-label": "simple table", size: "small", stickyHeader: true },
                     this.renderHead(),
                     React.createElement(TableBody, null, table.map(it => this.renderLine(it)))),
-                this.renderSelectIdDialog(),
-                this.renderSelectColorDialog()));
+                this.renderSelectIdDialog()));
         }
         return null;
     }