@iobroker/gui-components 10.3.13 → 10.3.15

package/build/Components/Loaders/CommunityLegacy.js

@@ -0,0 +1,266 @@
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * Previous loader of the community edition, replaced by `LoaderCommunity` in 2026-11.
+ */
+import React, { useEffect } from 'react';
+const loaderStyles = `
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ **/
+
+.logo-background-light, .logo-background-colored {
+    background: white;
+}
+.logo-background-dark, .logo-background-blue {
+    background: black;
+}
+.logo-div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    overflow: hidden;
+    border-radius: 50%;
+    z-index: 2;
+}
+.logo-border {
+    /*border-color: #164477;*/
+    border-top-color: #3399CC;
+    border-left-color: #164477;
+    border-bottom-color: #164477;
+    border-right-color: #164477;
+    border-radius: 50%;
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+.logo-top {
+    position: absolute;
+    width: 4.5%;
+    height: 16%;
+    top: 0;
+    z-index: 2;
+}
+.logo-i {
+    position: absolute;
+    width: 14.5%;
+    height: 60%;
+    top: 20%;
+    left: 42%;
+    background: #3399CC;
+}
+.logo-i-top {
+    position: absolute;
+    width: 14.5%;
+    height: 4%;
+    left: 42%;
+    background: #3399CC;
+    border-radius: 100%;
+}
+.logo-back {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+@keyframes logo-grow {
+    0% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(1);
+        opacity: 1
+    }
+    99% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(10);
+        opacity: 0;
+    }
+    100% {
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+}
+@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes logo-color-inside-light {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-dark {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-colored {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-blue {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+
+@keyframes logo-color-outside-light {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-dark  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-colored {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-blue  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+
+.logo-animate-wait {
+    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
+}
+
+.logo-animate-grow-light {
+    background: #DDD;
+}
+.logo-animate-grow-dark {
+    background: #1d1d1d;
+}
+.logo-animate-grow-colored {
+    background: #DDD;
+}
+.logo-animate-grow-blue {
+    background: #1d1d1d;
+}
+
+.logo-animate-grow {
+    display: inline-block;
+    text-align: center;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    width: 245px;
+    height: 245px;
+    border-radius: 50%;
+    position: absolute;
+    animation: logo-grow 1s 1 ease forwards;
+}
+
+.logo-animate-color-inside-light {
+    animation: logo-color-inside-light 2.5s;
+}
+.logo-animate-color-inside-dark {
+    animation: logo-color-inside-dark 2.5s;
+}
+.logo-animate-color-inside-colored {
+    animation: logo-color-inside-colored 2.5s;
+}
+.logo-animate-color-inside-blue {
+    animation: logo-color-inside-blue 2.5s;
+}
+
+.logo-animate-color-outside-light {
+    animation: logo-color-outside-light 1.5s;
+}
+.logo-animate-color-outside-dark {
+    animation: logo-color-outside-dark 1.5s;
+}
+.logo-animate-color-outside-colored {
+    animation: logo-color-outside-colored 1.5s;
+}
+.logo-animate-color-outside-blue {
+    animation: logo-color-outside-blue 1.5s;
+}
+`;
+export function LoaderCommunityLegacy(props) {
+    useEffect(() => {
+        if (!window.document.getElementById('loader-iobroker-component')) {
+            const style = window.document.createElement('style');
+            style.setAttribute('id', 'loader-iobroker-component');
+            style.innerHTML = loaderStyles;
+            window.document.head.appendChild(style);
+        }
+    }, []);
+    const size = props.size || 234;
+    const theme = props.themeName || props.theme || props.themeType || 'light';
+    return (React.createElement("div", { className: `logo-back logo-background-${theme}`, style: {
+            backgroundImage: props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'
+                ? props.backgroundImage
+                : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'
+                    ? `url(${window.loadingBackgroundImage})`
+                    : undefined,
+            backgroundColor: props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'
+                ? props.backgroundColor
+                : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'
+                    ? window.loadingBackgroundColor
+                    : undefined,
+            backgroundSize: 'cover',
+        } }, window.loadingHideLogo === 'true' ? null : (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "logo-div", style: { width: size, height: size } },
+            React.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '37%' } }),
+            React.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '57%' } }),
+            React.createElement("div", { className: `logo-border logo-background-${theme} logo-animate-wait`, style: { borderWidth: size * 0.132 } }),
+            React.createElement("div", { className: `logo-i logo-animate-color-inside-${theme}` }),
+            React.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { top: '18%' } }),
+            React.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { bottom: '18%' } })),
+        React.createElement("div", { className: `logo-animate-grow logo-animate-grow-${theme}`, style: { width: size + 11, height: size + 11 } })))));
+}
+//# sourceMappingURL=CommunityLegacy.js.map

package/build/Components/Loaders/CommunityLegacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommunityLegacy.js","sourceRoot":"./src/","sources":["Components/Loaders/CommunityLegacy.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n * Previous loader of the community edition, replaced by `LoaderCommunity` in 2026-11.\n */\nimport React, { useEffect } from 'react';\nimport type { ThemeName, ThemeType } from '../../types';\n\ndeclare global {\n    interface Window {\n        loadingBackgroundImage: undefined | string;\n        loadingBackgroundColor: undefined | string;\n        loadingHideLogo: undefined | 'true';\n    }\n}\n\nconst loaderStyles = `\n/**\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n **/\n\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n.logo-div {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    overflow: hidden;\n    border-radius: 50%;\n    z-index: 2;\n}\n.logo-border {\n    /*border-color: #164477;*/\n    border-top-color: #3399CC;\n    border-left-color: #164477;\n    border-bottom-color: #164477;\n    border-right-color: #164477;\n    border-radius: 50%;\n    border-style: solid;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n.logo-top {\n    position: absolute;\n    width: 4.5%;\n    height: 16%;\n    top: 0;\n    z-index: 2;\n}\n.logo-i {\n    position: absolute;\n    width: 14.5%;\n    height: 60%;\n    top: 20%;\n    left: 42%;\n    background: #3399CC;\n}\n.logo-i-top {\n    position: absolute;\n    width: 14.5%;\n    height: 4%;\n    left: 42%;\n    background: #3399CC;\n    border-radius: 100%;\n}\n.logo-back {\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    overflow: hidden;\n}\n@keyframes logo-grow {\n    0% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(1);\n        opacity: 1\n    }\n    99% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(10);\n        opacity: 0;\n    }\n    100% {\n        width: 0;\n        height: 0;\n        opacity: 0;\n    }\n}\n@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }\n@keyframes logo-color-inside-light {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-dark {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-colored {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-blue {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n\n@keyframes logo-color-outside-light {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-dark  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-colored {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-blue  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n\n.logo-animate-wait {\n    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;\n}\n\n.logo-animate-grow-light {\n    background: #DDD;\n}\n.logo-animate-grow-dark {\n    background: #1d1d1d;\n}\n.logo-animate-grow-colored {\n    background: #DDD;\n}\n.logo-animate-grow-blue {\n    background: #1d1d1d;\n}\n\n.logo-animate-grow {\n    display: inline-block;\n    text-align: center;\n    z-index: 1;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    width: 245px;\n    height: 245px;\n    border-radius: 50%;\n    position: absolute;\n    animation: logo-grow 1s 1 ease forwards;\n}\n\n.logo-animate-color-inside-light {\n    animation: logo-color-inside-light 2.5s;\n}\n.logo-animate-color-inside-dark {\n    animation: logo-color-inside-dark 2.5s;\n}\n.logo-animate-color-inside-colored {\n    animation: logo-color-inside-colored 2.5s;\n}\n.logo-animate-color-inside-blue {\n    animation: logo-color-inside-blue 2.5s;\n}\n\n.logo-animate-color-outside-light {\n    animation: logo-color-outside-light 1.5s;\n}\n.logo-animate-color-outside-dark {\n    animation: logo-color-outside-dark 1.5s;\n}\n.logo-animate-color-outside-colored {\n    animation: logo-color-outside-colored 1.5s;\n}\n.logo-animate-color-outside-blue {\n    animation: logo-color-outside-blue 1.5s;\n}\n`;\n\ninterface LoaderProps {\n    /** The size in pixels of this loader. */\n    size?: number;\n    /** The chosen theme type. */\n    themeType?: ThemeType;\n    /** Theme name */\n    themeName?: ThemeName;\n    /** @deprecated Theme name. use themeName instead */\n    theme?: ThemeName;\n    /** Background color */\n    backgroundColor?: string;\n    /** Background image URL */\n    backgroundImage?: string;\n}\n\nexport function LoaderCommunityLegacy(props: LoaderProps): React.JSX.Element {\n    useEffect(() => {\n        if (!window.document.getElementById('loader-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'loader-iobroker-component');\n            style.innerHTML = loaderStyles;\n            window.document.head.appendChild(style);\n        }\n    }, []);\n\n    const size = props.size || 234;\n    const theme = props.themeName || props.theme || props.themeType || 'light';\n    return (\n        <div\n            className={`logo-back logo-background-${theme}`}\n            style={{\n                backgroundImage:\n                    props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'\n                        ? props.backgroundImage\n                        : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'\n                          ? `url(${window.loadingBackgroundImage})`\n                          : undefined,\n                backgroundColor:\n                    props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'\n                        ? props.backgroundColor\n                        : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'\n                          ? window.loadingBackgroundColor\n                          : undefined,\n                backgroundSize: 'cover',\n            }}\n        >\n            {window.loadingHideLogo === 'true' ? null : (\n                <>\n                    <div\n                        className=\"logo-div\"\n                        style={{ width: size, height: size }}\n                    >\n                        <div\n                            className={`logo-top logo-background-${theme}`}\n                            style={{ left: '37%' }}\n                        />\n                        <div\n                            className={`logo-top logo-background-${theme}`}\n                            style={{ left: '57%' }}\n                        />\n                        <div\n                            className={`logo-border logo-background-${theme} logo-animate-wait`}\n                            style={{ borderWidth: size * 0.132 }}\n                        />\n                        <div className={`logo-i logo-animate-color-inside-${theme}`} />\n                        <div\n                            className={`logo-i-top logo-animate-color-inside-${theme}`}\n                            style={{ top: '18%' }}\n                        />\n                        <div\n                            className={`logo-i-top logo-animate-color-inside-${theme}`}\n                            style={{ bottom: '18%' }}\n                        />\n                    </div>\n                    <div\n                        className={`logo-animate-grow logo-animate-grow-${theme}`}\n                        style={{ width: size + 11, height: size + 11 }}\n                    />\n                </>\n            )}\n        </div>\n    );\n}\n"]}

package/build/Components/ObjectBrowser/ObjectBrowserClass.d.ts

@@ -97,6 +97,11 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private windowLast;
     /** id -> how often the state of this row has changed. Part of the memo key of the row */
     readonly rowStateVersion: Record<string, number>;
+    /** The running animations of an unfolded or folding node (see `rowAnimation.ts`) */
+    private rowAnimations;
+    /** The node whose children slide under its row at the moment; they are removed when that ends */
+    private foldingId;
+    private foldTimer;
     private stateVersionCounter;
     private selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
@@ -349,6 +354,10 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
      */
     getToolbar(): JSX.Element;
     toggleExpanded(id: string): void;
+    /** The fold animation ended (or is cut short): remove the children of the node now */
+    private applyFold;
+    /** Ends a running fold or unfold animation at once */
+    private finishRowAnimations;
     onCopy(e: React.MouseEvent, text: string | undefined): void;
     renderTooltipAccessControl(acl: ioBroker.StateACL): null | JSX.Element;
     renderColumnButtons(id: string, item: TreeItem): (JSX.Element | null)[] | JSX.Element | null;

package/build/Components/ObjectBrowser/ObjectBrowserClass.js

@@ -24,6 +24,7 @@ import * as dialogs from './dialogs';
 import * as toolbar from './toolbar';
 import * as leaf from './renderLeaf';
 import * as contextMenu from './contextMenu';
+import * as rowAnimation from './rowAnimation';
 import { DEFAULT_DATE_FORMAT, DEFAULT_FILTER, ITEM_LEVEL, MIN_COLUMN_WIDTHS, SCREEN_WIDTHS, } from './constants';
 export { getSelectIdIconFromObjects };
 let objectsAlreadyLoaded = false;
@@ -123,6 +124,11 @@ export class ObjectBrowserClass extends Component {
     windowLast = 0;
     /** id -> how often the state of this row has changed. Part of the memo key of the row */
     rowStateVersion = {};
+    /** The running animations of an unfolded or folding node (see `rowAnimation.ts`) */
+    rowAnimations = [];
+    /** The node whose children slide under its row at the moment; they are removed when that ends */
+    foldingId = null;
+    foldTimer = null;
     stateVersionCounter = 0;
     selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
@@ -764,6 +770,14 @@ export class ObjectBrowserClass extends Component {
             window.cancelAnimationFrame(this.scrollFrame);
             this.scrollFrame = 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 timers must not fire after the component was destroyed
         if (this.unsubscribeTimer) {
             clearTimeout(this.unsubscribeTimer);
@@ -1775,7 +1789,10 @@ export class ObjectBrowserClass extends Component {
         return toolbar.getToolbar(this);
     }
     toggleExpanded(id) {
-        const expanded = JSON.parse(JSON.stringify(this.state.expanded));
+        // a node that is still folding is folded now, this toggle builds on it
+        const folding = this.foldingId;
+        this.finishRowAnimations();
+        const expanded = this.state.expanded.filter(item => item !== folding);
         const pos = expanded.indexOf(id);
         if (pos === -1) {
             expanded.push(id);
@@ -1785,7 +1802,50 @@ export class ObjectBrowserClass extends Component {
             expanded.splice(pos, 1);
         }
         this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectExpanded`, JSON.stringify(expanded));
-        this.setState({ expanded });
+        if (pos === -1) {
+            // the children are rendered after this update: let them slide out from under the row
+            this.setState({ expanded }, () => {
+                this.rowAnimations = rowAnimation.unfold(this.tableRef.current, id);
+            });
+            return;
+        }
+        const animations = rowAnimation.fold(this.tableRef.current, 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: fold anyway
+            this.foldTimer = setTimeout(() => this.applyFold(), 600);
+        }
+        else {
+            this.setState({ expanded });
+        }
+    }
+    /** The fold animation ended (or is cut short): remove the children of the node 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 => ({ expanded: state.expanded.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 = [];
+        }
     }
     onCopy(e, text) {
         e.stopPropagation();