@iobroker/gui-components 10.3.15 → 10.3.16

package/build/Components/ObjectBrowser/renderLeaf.js

@@ -15,7 +15,7 @@ import { IconDocumentReadOnly } from '../../icons/IconDocumentReadOnly';
 import { Icon } from '../Icon';
 import { IconTrash } from '../AnimatedIcons/IconTrash';
 import { IconFolder } from '../AnimatedIcons/IconFolder';
-import { ButtonIcon, colGrow, colWidth, binarySearch, findEnumsForObjectAsIds, findFunctionsForObject, findRoomsForObject, formatValue, getCustomValue, getIdFieldTooltip, getObjectTooltip, getValueStyle, isNonExpertId, COLOR_NAME_USERDATA, COLOR_NAME_ALIAS, COLOR_NAME_JAVASCRIPT, COLOR_NAME_SYSTEM, COLOR_NAME_SYSTEM_ADAPTER, ROW_HEIGHT, } from './utils';
+import { ButtonIcon, colGrow, colWidth, binarySearch, findEnumsForObjectAsIds, findFunctionsForObject, findRoomsForObject, formatValue, getCustomValue, getIdFieldTooltip, getObjectTooltip, getValueStyle, isNonExpertId, COLOR_NAME_USERDATA, COLOR_NAME_ALIAS, COLOR_NAME_JAVASCRIPT, COLOR_NAME_SYSTEM, COLOR_NAME_SYSTEM_ADAPTER, ROW_HEIGHT, TREND_DURATION, } from './utils';
 import { styles } from './styles';
 import { COLOR_NAME_CONNECTED_DARK, COLOR_NAME_CONNECTED_LIGHT, COLOR_NAME_DISCONNECTED_DARK, COLOR_NAME_DISCONNECTED_LIGHT, COLOR_NAME_ERROR_DARK, COLOR_NAME_ERROR_LIGHT, DEFAULT_DATE_FORMAT, ITEM_IMAGES, } from './constants';
 export function renderTooltipAccessControl(that, acl) {
@@ -179,6 +179,35 @@ export function renderColumnButtons(that, id, item) {
             React.createElement(IconConfig, { style: styles.cellButtonsButtonIcon }))) : null,
     ];
 }
+const TREND_ARROW = {
+    up: 'M12 3L20.5 12.5H15V21H9V12.5H3.5Z',
+    down: 'M12 21L20.5 11.5H15V3H9V11.5H3.5Z',
+};
+/** The arrow of a row that is mounted again (e.g. after scrolling) continues where it was */
+function continueTrendAnimation(el) {
+    if (el) {
+        el.style.animationDelay = `${Number(el.dataset.shown) - Date.now()}ms`;
+    }
+}
+/**
+ * Returns the last change of a number or a boolean of this state, if it is still to be shown
+ */
+function getValueTrend(that, id) {
+    const trend = that.valueTrends[id];
+    if (!trend) {
+        return undefined;
+    }
+    const now = Date.now();
+    if (trend.shown === undefined) {
+        trend.shown = now;
+    }
+    // A change of a row that was not visible is not shown later
+    if (now - trend.shown > TREND_DURATION || now - trend.ts > TREND_DURATION + 1000) {
+        delete that.valueTrends[id];
+        return undefined;
+    }
+    return trend;
+}
 /**
  * This function renders the value in different forms in the table
  *
@@ -206,8 +235,11 @@ export function renderColumnValue(that, id, item, narrowStyleWithDetails) {
     }
     that.recordState(id, id);
     const state = that.states[id];
+    const trend = getValueTrend(that, id);
     let info = item.data.state;
     if (!info) {
+        // A boolean that just changed flips, like a switch
+        const flip = trend?.dir === 'toggle' && Date.now() - trend.ts < 1000 ? ' iob-ob-flip' : '';
         const { valText } = formatValue({
             state,
             obj: obj,
@@ -219,7 +251,7 @@ export function renderColumnValue(that, id, item, narrowStyleWithDetails) {
         });
         const valTextRx = [];
         item.data.state = { valTextRx };
-        valTextRx.push(React.createElement("span", { className: `newValueBrowser-${that.props.themeType || 'light'}`, key: `${valText.v.toString()}valText`, style: {
+        valTextRx.push(React.createElement("span", { className: `newValueBrowser-${that.props.themeType || 'light'}${flip}`, key: `${valText.v.toString()}valText`, style: {
                 whiteSpace: 'nowrap',
                 display: 'inline-block',
                 overflow: 'hidden',
@@ -269,6 +301,14 @@ export function renderColumnValue(that, id, item, narrowStyleWithDetails) {
             ];
         }
     }
+    // A number that just changed shows for some seconds, if it went up or down
+    if (val && val === info.valTextRx && (trend?.dir === 'up' || trend?.dir === 'down')) {
+        const arrow = (React.createElement("span", { key: `trend${trend.ts}`, ref: continueTrendAnimation, "data-shown": trend.shown, className: `iob-ob-trend iob-ob-trend-${trend.dir}`, "aria-hidden": "true" },
+            React.createElement("svg", { viewBox: "0 0 24 24" },
+                React.createElement("path", { d: TREND_ARROW[trend.dir] }))));
+        const copyIndex = val.findIndex(el => el.key === 'cc');
+        val = copyIndex === -1 ? [...val, arrow] : [...val.slice(0, copyIndex), arrow, ...val.slice(copyIndex)];
+    }
     return (React.createElement(Tooltip, { key: "value", title: that.state.tooltipInfo?.el, slotProps: {
             popper: { sx: styles.cellValueTooltipBox },
             tooltip: { sx: styles.cellValueTooltip },