@iobroker/gui-components 10.3.16 → 10.4.0

package/build/Components/ToggleThemeMenu.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import { IconButton, Tooltip } from '@mui/material';
-import { Brightness4 as Brightness4Icon, Brightness5 as Brightness5Icon, Brightness6 as Brightness6Icon, Brightness7 as Brightness7Icon, } from '@mui/icons-material';
+import { IconThemeMode } from './AnimatedIcons/IconThemeMode';
+function getMode(themeName) {
+    if (themeName === 'dark' || themeName === 'modernDark') {
+        return 'dark';
+    }
+    if (themeName === 'blue' || themeName === 'colored') {
+        return themeName;
+    }
+    return 'light';
+}
 export function ToggleThemeMenu({ themeName, toggleTheme, t, className, style, size, }) {
     return (React.createElement("div", { className: className || undefined, style: style || undefined },
         React.createElement(Tooltip, { title: t('ra_Change color theme'), slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
             React.createElement(IconButton, { onClick: () => toggleTheme(), size: size || 'medium' },
-                (themeName === 'dark' || themeName === 'modernDark') && React.createElement(Brightness4Icon, { className: className }),
-                themeName === 'blue' && React.createElement(Brightness5Icon, { className: className }),
-                themeName === 'colored' && React.createElement(Brightness6Icon, { className: className }),
-                themeName !== 'dark' &&
-                    themeName !== 'modernDark' &&
-                    themeName !== 'blue' &&
-                    themeName !== 'colored' && React.createElement(Brightness7Icon, { className: className })))));
+                React.createElement(IconThemeMode, { mode: getMode(themeName), className: className })))));
 }
 //# sourceMappingURL=ToggleThemeMenu.js.map

package/build/Components/ToggleThemeMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleThemeMenu.js","sourceRoot":"./src/","sources":["Components/ToggleThemeMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EACH,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,GACjC,MAAM,qBAAqB,CAAC;AAY7B,MAAM,UAAU,eAAe,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,CAAC,EACD,SAAS,EACT,KAAK,EACL,IAAI,GACe;IACnB,OAAO,CACH,6BACI,SAAS,EAAE,SAAS,IAAI,SAAS,EACjC,KAAK,EAAE,KAAK,IAAI,SAAS;QAEzB,oBAAC,OAAO,IACJ,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC,EACjC,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;YAExD,oBAAC,UAAU,IACP,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAC5B,IAAI,EAAE,IAAI,IAAI,QAAQ;gBAErB,CAAC,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,CAAC,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;gBACjG,SAAS,KAAK,MAAM,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;gBACjE,SAAS,KAAK,SAAS,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;gBACpE,SAAS,KAAK,MAAM;oBACjB,SAAS,KAAK,YAAY;oBAC1B,SAAS,KAAK,MAAM;oBACpB,SAAS,KAAK,SAAS,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI,CAC/D,CACP,CACR,CACT,CAAC;AACN,CAAC","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { IconButton, Tooltip } from '@mui/material';\n\nimport {\n    Brightness4 as Brightness4Icon,\n    Brightness5 as Brightness5Icon,\n    Brightness6 as Brightness6Icon,\n    Brightness7 as Brightness7Icon,\n} from '@mui/icons-material';\nimport type { ThemeName } from '../types';\n\ninterface ToggleThemeMenuProps {\n    themeName: ThemeName;\n    toggleTheme: () => void;\n    t: (key: string) => string;\n    className?: string;\n    style?: React.CSSProperties;\n    size?: 'small' | 'medium' | 'large';\n}\n\nexport function ToggleThemeMenu({\n    themeName,\n    toggleTheme,\n    t,\n    className,\n    style,\n    size,\n}: ToggleThemeMenuProps): JSX.Element {\n    return (\n        <div\n            className={className || undefined}\n            style={style || undefined}\n        >\n            <Tooltip\n                title={t('ra_Change color theme')}\n                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n            >\n                <IconButton\n                    onClick={() => toggleTheme()}\n                    size={size || 'medium'}\n                >\n                    {(themeName === 'dark' || themeName === 'modernDark') && <Brightness4Icon className={className} />}\n                    {themeName === 'blue' && <Brightness5Icon className={className} />}\n                    {themeName === 'colored' && <Brightness6Icon className={className} />}\n                    {themeName !== 'dark' &&\n                        themeName !== 'modernDark' &&\n                        themeName !== 'blue' &&\n                        themeName !== 'colored' && <Brightness7Icon className={className} />}\n                </IconButton>\n            </Tooltip>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"ToggleThemeMenu.js","sourceRoot":"./src/","sources":["Components/ToggleThemeMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AAGvF,SAAS,OAAO,CAAC,SAAoB;IACjC,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;QACrD,OAAO,MAAM,CAAC;IAClB,CAAC;IACD,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAClD,OAAO,SAAS,CAAC;IACrB,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC;AAWD,MAAM,UAAU,eAAe,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,CAAC,EACD,SAAS,EACT,KAAK,EACL,IAAI,GACe;IACnB,OAAO,CACH,6BACI,SAAS,EAAE,SAAS,IAAI,SAAS,EACjC,KAAK,EAAE,KAAK,IAAI,SAAS;QAEzB,oBAAC,OAAO,IACJ,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC,EACjC,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;YAExD,oBAAC,UAAU,IACP,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAC5B,IAAI,EAAE,IAAI,IAAI,QAAQ;gBAGtB,oBAAC,aAAa,IACV,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,EACxB,SAAS,EAAE,SAAS,GACtB,CACO,CACP,CACR,CACT,CAAC;AACN,CAAC","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { IconButton, Tooltip } from '@mui/material';\n\nimport { IconThemeMode, type IconThemeModeProps } from './AnimatedIcons/IconThemeMode';\nimport type { ThemeName } from '../types';\n\nfunction getMode(themeName: ThemeName): IconThemeModeProps['mode'] {\n    if (themeName === 'dark' || themeName === 'modernDark') {\n        return 'dark';\n    }\n    if (themeName === 'blue' || themeName === 'colored') {\n        return themeName;\n    }\n    return 'light';\n}\n\ninterface ToggleThemeMenuProps {\n    themeName: ThemeName;\n    toggleTheme: () => void;\n    t: (key: string) => string;\n    className?: string;\n    style?: React.CSSProperties;\n    size?: 'small' | 'medium' | 'large';\n}\n\nexport function ToggleThemeMenu({\n    themeName,\n    toggleTheme,\n    t,\n    className,\n    style,\n    size,\n}: ToggleThemeMenuProps): JSX.Element {\n    return (\n        <div\n            className={className || undefined}\n            style={style || undefined}\n        >\n            <Tooltip\n                title={t('ra_Change color theme')}\n                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n            >\n                <IconButton\n                    onClick={() => toggleTheme()}\n                    size={size || 'medium'}\n                >\n                    {/* one icon for all themes, so that the change is animated */}\n                    <IconThemeMode\n                        mode={getMode(themeName)}\n                        className={className}\n                    />\n                </IconButton>\n            </Tooltip>\n        </div>\n    );\n}\n"]}

package/build/Components/TreeTable.d.ts

@@ -1,5 +1,6 @@
 import React, { Component, type JSX } from 'react';
 import type { Connection } from '../Connection';
+import { type RowParts } from './ObjectBrowser/rowAnimation';
 import type { IobTheme, ThemeType } from '../types';
 interface Column {
     cellStyle?: Record<string, any>;
@@ -54,8 +55,23 @@ interface TreeTableState {
 export declare class TreeTable extends Component<TreeTableProps, TreeTableState> {
     private selectCallback;
     private updateTimeout;
+    private readonly containerRef;
+    private readonly bodyRef;
+    /** The running animations of an opened or closing item (see `ObjectBrowser/rowAnimation.ts`) */
+    private rowAnimations;
+    /** The item whose children slide under its row at the moment; they are removed when that ends */
+    private foldingId;
+    private foldTimer;
     constructor(props: TreeTableProps);
     componentWillUnmount(): void;
+    /** The rendered rows of an item, of its children and the rows below them */
+    getRowParts(id: string): RowParts | null;
+    /** Opens or closes an item: its children slide out from under its row, or back under it */
+    toggleOpened(id: string): void;
+    /** The fold animation ended (or is cut short): remove the children of the item now */
+    applyFold(): void;
+    /** Ends a running fold or unfold animation at once */
+    finishRowAnimations(): void;
     static getDerivedStateFromProps(props: TreeTableProps, state: TreeTableState): Partial<TreeTableState>;
     renderCellEdit(item: Record<string, any>, col: Column): JSX.Element | null;
     onChange(col: Column, oldValue: string | number | boolean, newValue: string | number | boolean): void;

package/build/Components/TreeTable.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
 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 { Edit as IconEdit, 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';
+import { IconTrash } from './AnimatedIcons/IconTrash';
+import { foldRows, measureRows, unfoldRows } from './ObjectBrowser/rowAnimation';
 function getAttr(obj, attr, lookup) {
     if (typeof attr === 'string') {
         attr = attr.split('.');
@@ -240,6 +242,13 @@ function stableSort(array, comparator) {
 export class TreeTable extends Component {
     selectCallback = null;
     updateTimeout = null;
+    containerRef = React.createRef();
+    bodyRef = React.createRef();
+    /** The running animations of an opened or closing item (see `ObjectBrowser/rowAnimation.ts`) */
+    rowAnimations = [];
+    /** The item whose children slide under its row at the moment; they are removed when that ends */
+    foldingId = null;
+    foldTimer = null;
     constructor(props) {
         super(props);
         let opened = (window._localStorage || window.localStorage).getItem(this.props.name || 'iob-table') || '[]';
@@ -267,6 +276,97 @@ export class TreeTable extends Component {
             clearTimeout(this.updateTimeout);
             this.updateTimeout = null;
         }
+        // a fold animation must not update the state after the component was destroyed
+        this.foldingId = null;
+        if (this.foldTimer) {
+            clearTimeout(this.foldTimer);
+            this.foldTimer = null;
+        }
+        this.rowAnimations.forEach(animation => animation.cancel());
+        this.rowAnimations = [];
+    }
+    /** The rendered rows of an item, of its children and the rows below them */
+    getRowParts(id) {
+        const body = this.bodyRef.current;
+        if (!body) {
+            return null;
+        }
+        let nodeRow = null;
+        const block = [];
+        const below = [];
+        for (const row of Array.from(body.children)) {
+            if (!nodeRow) {
+                if (row.dataset.treeId === String(id)) {
+                    nodeRow = row;
+                }
+            }
+            else if (!below.length && row.dataset.treeLevel !== '0') {
+                block.push(row);
+            }
+            else {
+                below.push(row);
+            }
+        }
+        return measureRows(this.containerRef.current, nodeRow, block, below);
+    }
+    /** Opens or closes an item: its children slide out from under its row, or back under it */
+    toggleOpened(id) {
+        // an item that is still closing is closed now, this toggle builds on it
+        const folding = this.foldingId;
+        this.finishRowAnimations();
+        const opened = this.state.opened.filter(item => item !== folding);
+        const pos = opened.indexOf(id);
+        if (pos === -1) {
+            opened.push(id);
+            opened.sort();
+        }
+        else {
+            opened.splice(pos, 1);
+        }
+        (window._localStorage || window.localStorage).setItem(this.props.name || 'iob-table', JSON.stringify(opened));
+        if (pos === -1) {
+            this.setState({ opened }, () => {
+                this.rowAnimations = unfoldRows(this.getRowParts(id));
+            });
+            return;
+        }
+        const animations = foldRows(this.getRowParts(id), () => this.applyFold());
+        if (animations) {
+            // the children slide under the row first and are removed when the animation ends
+            this.rowAnimations = animations;
+            this.foldingId = id;
+            // a hidden tab does not run animations: close anyway
+            this.foldTimer = setTimeout(() => this.applyFold(), 600);
+        }
+        else {
+            this.setState({ opened });
+        }
+    }
+    /** The fold animation ended (or is cut short): remove the children of the item now */
+    applyFold() {
+        const id = this.foldingId;
+        if (id === null) {
+            return;
+        }
+        this.foldingId = null;
+        if (this.foldTimer) {
+            clearTimeout(this.foldTimer);
+            this.foldTimer = null;
+        }
+        const animations = this.rowAnimations;
+        this.rowAnimations = [];
+        // the animations hold the rows in their end position until the children are really gone
+        this.setState(state => ({ opened: state.opened.filter(item => item !== id) }), () => animations.forEach(animation => animation.cancel()));
+    }
+    /** Ends a running fold or unfold animation at once */
+    finishRowAnimations() {
+        if (this.foldingId !== null) {
+            this.applyFold();
+        }
+        else {
+            this.rowAnimations.forEach(animation => animation.cancel());
+            this.rowAnimations = [];
+        }
     }
     static getDerivedStateFromProps(props, state) {
         if (props.glowOnChange) {
@@ -443,25 +543,13 @@ export class TreeTable extends Component {
         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)
+        const row = (React.createElement(TableRow, { key: item.id, "data-tree-id": String(item.id), "data-tree-level": level, 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) {
-                        _opened.push(item.id);
-                        _opened.sort();
-                    }
-                    else {
-                        _opened.splice(pos, 1);
-                    }
-                    (window._localStorage || window.localStorage).setItem(this.props.name || 'iob-table', JSON.stringify(_opened));
-                    this.setState({ opened: _opened });
-                }, size: "small" },
+                }, title: I18n.t(opened ? 'ra_Collapse' : 'ra_Expand'), onClick: () => this.toggleOpened(item.id), 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' } },
@@ -498,7 +586,7 @@ export class TreeTable extends Component {
                     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));
+                        React.createElement(IconTrash, { fontSize: "small", open: this.state.deleteMode === i }))))) : null)) : null));
         if (!level && opened) {
             const items = children.map(it => this.renderLine(it, level + 1));
             items.unshift(row);
@@ -543,10 +631,10 @@ export class TreeTable extends Component {
                     this.setState({ update: null });
                 }, 500);
             }
-            return (React.createElement("div", { style: styles.tableContainer, className: this.props.className },
+            return (React.createElement("div", { ref: this.containerRef, style: styles.tableContainer, className: this.props.className },
                 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)))),
+                    React.createElement(TableBody, { ref: this.bodyRef }, table.map(it => this.renderLine(it)))),
                 this.renderSelectIdDialog()));
         }
         return null;