@iobroker/adapter-react-v5 7.7.5 → 8.0.4

package/build/Components/ObjectBrowser.js

@@ -789,12 +789,13 @@ excludeTranslations) {
         result[key] = isObject ? filterObject(value, filterKeys, excludeTranslations) : value;
     });
 }
+// It is an export function and used somewhere else
 export function filterRoles(roleArray, type, defaultRoles) {
     const bigRoleArray = [];
     roleArray.forEach(role => (role.type === 'mixed' || role.type) === type &&
         !bigRoleArray.includes(role.role) &&
         bigRoleArray.push(role.role));
-    defaultRoles.forEach(role => (role.type === 'mixed' || role.type) === type &&
+    defaultRoles?.forEach(role => (role.type === 'mixed' || role.type) === type &&
         !bigRoleArray.includes(role.role) &&
         bigRoleArray.push(role.role));
     bigRoleArray.sort();
@@ -826,6 +827,158 @@ options) {
     el.click();
     document.body.removeChild(el);
 }
+class CustomFilterSelect extends Component {
+    hasIcons;
+    timer = null;
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.initialValue || [],
+        };
+        this.hasIcons = !!props.values?.find(item => item.icon);
+    }
+    componentWillUnmount() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+    }
+    render() {
+        return (React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(Select, { variant: "standard", key: this.props.name, sx: styles.headerCellInput, className: "no-underline", multiple: true, renderValue: value => {
+                    if (!value?.length) {
+                        return this.props.name === 'custom'
+                            ? this.props.texts.showAll
+                            : this.props.texts[`filter_${this.props.name}`];
+                    }
+                    return value.map(val => {
+                        const item = this.props.values.find(i => typeof i === 'object' ? i.value === val : i === val);
+                        let id;
+                        let _name;
+                        let icon;
+                        if (typeof item === 'object') {
+                            id = item.value;
+                            _name = item.name;
+                            icon = item.icon;
+                        }
+                        else {
+                            id = item;
+                            _name = item;
+                        }
+                        return (React.createElement(Box, { component: "span", sx: styles.headerCellSelectItem, key: id },
+                            icon || (this.hasIcons ? React.createElement("div", { className: "itemIcon" }) : null),
+                            _name));
+                    });
+                }, value: this.state.value, onChange: event => {
+                    let selectedValues = event.target.value;
+                    // '_' may be selected only alone
+                    if (this.state.value[0] === '_' && selectedValues.includes('_') && selectedValues.length > 1) {
+                        const pos = selectedValues.indexOf('_');
+                        if (pos !== -1) {
+                            selectedValues.splice(pos, 1);
+                        }
+                    }
+                    else if (this.state.value[0] !== '_' && selectedValues.includes('_')) {
+                        selectedValues = ['_'];
+                    }
+                    // '_' may be selected only alone
+                    if (selectedValues.includes('')) {
+                        selectedValues = [];
+                    }
+                    this.setState({ value: selectedValues }, () => {
+                        if (this.timer) {
+                            clearTimeout(this.timer);
+                        }
+                        this.timer = setTimeout(() => {
+                            this.timer = null;
+                            this.props.onChange(this.props.name, selectedValues);
+                        }, 400);
+                    });
+                }, onClose: () => {
+                    if (this.timer) {
+                        clearTimeout(this.timer);
+                        this.timer = null;
+                        this.props.onChange(this.props.name, this.state.value);
+                    }
+                }, inputProps: { name: this.props.name, id: this.props.name }, displayEmpty: true },
+                React.createElement(MenuItem, { key: "empty", value: "" },
+                    React.createElement("span", { style: styles.selectNone }, this.props.name === 'custom'
+                        ? this.props.texts.showAll
+                        : this.props.texts[`filter_${this.props.name}`])),
+                this.props.values?.map(item => {
+                    let id;
+                    let _name;
+                    let icon;
+                    if (typeof item === 'object') {
+                        id = item.value;
+                        _name = item.name;
+                        icon = item.icon;
+                    }
+                    else {
+                        id = item;
+                        _name = item;
+                    }
+                    return (React.createElement(MenuItem, { sx: styles.headerCellSelectItem, key: id, value: id },
+                        icon || (this.hasIcons ? React.createElement("div", { className: "itemIcon" }) : null),
+                        _name));
+                })),
+            this.state.value.length ? (React.createElement(Box, { component: "div", sx: styles.selectClearButton },
+                React.createElement(IconButton, { size: "small", onClick: () => {
+                        if (this.timer) {
+                            clearTimeout(this.timer);
+                            this.timer = null;
+                        }
+                        this.setState({ value: [] }, () => this.props.onChange(this.props.name, undefined));
+                    } },
+                    React.createElement(IconClose, null)))) : null));
+    }
+}
+class CustomFilterInput extends Component {
+    timer = null;
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.initialValue || '',
+        };
+    }
+    componentWillUnmount() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+    }
+    render() {
+        return (React.createElement(FormControl, { sx: this.props.styles, key: this.props.name, title: this.props.t('ra_You can use * as wildcard'), margin: "dense" },
+            React.createElement(Input, { classes: { underline: 'no-underline' }, id: this.props.name, placeholder: this.props.texts[`filter_${this.props.name}`], value: this.state.value, onChange: event => {
+                    const selectedValues = event.target.value;
+                    this.setState({ value: selectedValues }, () => {
+                        if (this.timer) {
+                            clearTimeout(this.timer);
+                        }
+                        this.timer = setTimeout(() => {
+                            this.timer = null;
+                            this.props.onChange(this.props.name, selectedValues);
+                        }, 400);
+                    });
+                }, onBlur: () => {
+                    if (this.timer) {
+                        clearTimeout(this.timer);
+                        this.timer = null;
+                        this.props.onChange(this.props.name, this.state.value);
+                    }
+                }, autoComplete: "off" }),
+            this.state.value ? (React.createElement("div", { style: {
+                    position: 'absolute',
+                    right: 0,
+                } },
+                React.createElement(IconButton, { size: "small", onClick: () => {
+                        if (this.timer) {
+                            clearTimeout(this.timer);
+                            this.timer = null;
+                        }
+                        this.setState({ value: '' }, () => this.props.onChange(this.props.name, undefined));
+                    } },
+                    React.createElement(IconClose, null)))) : null));
+    }
+}
 // d=data, t=target, s=start, e=end, m=middle
 function binarySearch(list, find, _start, _end) {
     _start ||= 0;
@@ -1123,15 +1276,18 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
         }
         if (!filteredOut && context.custom?.length) {
             if (common) {
-                if (context.custom.includes('_')) {
+                if (context.custom[0] === '_') {
                     filteredOut = !!common.custom;
                 }
                 else if (common.custom) {
                     filteredOut = !context.custom.find(custom => common.custom[custom]);
                 }
+                else {
+                    filteredOut = true;
+                }
             }
             else {
-                filteredOut = true;
+                filteredOut = context.custom[0] !== '_';
             }
         }
     }
@@ -1884,7 +2040,6 @@ export class ObjectBrowserClass extends Component {
     localStorage = window._localStorage || window.localStorage;
     lastAppliedFilter = null;
     tableRef;
-    filterRefs;
     pausedSubscribes = false;
     selectFirst;
     root = null;
@@ -1893,7 +2048,6 @@ export class ObjectBrowserClass extends Component {
     unsubscribeTimer = null;
     statesUpdateTimer = null;
     objectsUpdateTimer = null;
-    filterTimer = null;
     visibleCols;
     texts;
     possibleCols;
@@ -1932,7 +2086,7 @@ export class ObjectBrowserClass extends Component {
     styles = {};
     customColumnDialog = null;
     /** Namespaces which are allowed to be edited by non-expert users */
-    static #NON_EXPERT_NAMESPACES = ['0_userdata.0.', 'alias.0.'];
+    static NON_EXPERT_NAMESPACES = ['0_userdata.0.', 'alias.0.'];
     constructor(props) {
         super(props);
         const lastSelectedItemStr = this.localStorage.getItem(`${props.dialogName || 'App'}.objectSelected`) || '';
@@ -1976,20 +2130,35 @@ export class ObjectBrowserClass extends Component {
             filter = { ...DEFAULT_FILTER };
         }
         // Migrate old filters to new one
-        if (typeof filter.room === 'string') {
-            filter.room = [filter.room];
+        if (typeof filter.room === 'string' && filter.room) {
+            filter.room = [filter.room].filter(s => s);
+            if (!filter.room.length) {
+                delete filter.room;
+            }
         }
-        if (typeof filter.func === 'string') {
-            filter.func = [filter.func];
+        if (typeof filter.func === 'string' && filter.func) {
+            filter.func = [filter.func].filter(s => s);
+            if (!filter.func.length) {
+                delete filter.func;
+            }
         }
-        if (typeof filter.role === 'string') {
-            filter.role = [filter.role];
+        if (typeof filter.role === 'string' && filter.role) {
+            filter.role = [filter.role].filter(s => s);
+            if (!filter.role.length) {
+                delete filter.role;
+            }
         }
         if (typeof filter.type === 'string') {
-            filter.type = [filter.type];
+            filter.type = [filter.type].filter(s => s);
+            if (!filter.type.length) {
+                delete filter.type;
+            }
         }
         if (typeof filter.custom === 'string') {
-            filter.custom = [filter.custom];
+            filter.custom = [filter.custom].filter(s => s);
+            if (!filter.custom.length) {
+                delete filter.custom;
+            }
         }
         filter.expertMode =
             props.expertMode !== undefined
@@ -1997,8 +2166,6 @@ export class ObjectBrowserClass extends Component {
                 : (window._sessionStorage || window.sessionStorage).getItem('App.expertMode') ===
                     'true';
         this.tableRef = createRef();
-        this.filterRefs = {};
-        Object.keys(DEFAULT_FILTER).forEach(name => (this.filterRefs[name] = createRef()));
         this.visibleCols = props.columns || SCREEN_WIDTHS[props.width || 'lg'].fields;
         // remove type column if only one type must be selected
         if (props.types && props.types.length === 1) {
@@ -2308,16 +2475,17 @@ export class ObjectBrowserClass extends Component {
             this.info = info;
             // Show first selected item
             const node = this.state.selected?.length && findNode(this.root, this.state.selected[0]);
-            this.lastAppliedFilter = null;
             // If the selected ID is not visible, reset filter
             if (node &&
                 !applyFilter(node, this.state.filter, props.lang, this.objects, undefined, undefined, props.customFilter, props.types)) {
                 // reset filter
                 this.setState({ filter: { ...DEFAULT_FILTER }, columnsForAdmin }, () => {
+                    this.doFilter();
                     this.setState({ loaded: true, updating: false }, () => this.expandAllSelected(() => this.onAfterSelect()));
                 });
             }
             else {
+                this.doFilter();
                 this.setState({ loaded: true, updating: false, columnsForAdmin }, () => this.expandAllSelected(() => this.onAfterSelect()));
             }
         }
@@ -2331,7 +2499,7 @@ export class ObjectBrowserClass extends Component {
     static isNonExpertId(
     /** id to test */
     id) {
-        return !!ObjectBrowserClass.#NON_EXPERT_NAMESPACES.find(saveNamespace => id.startsWith(saveNamespace));
+        return !!ObjectBrowserClass.NON_EXPERT_NAMESPACES.find(saveNamespace => id.startsWith(saveNamespace));
     }
     expandAllSelected(cb) {
         const expanded = [...this.state.expanded];
@@ -2471,10 +2639,6 @@ export class ObjectBrowserClass extends Component {
      * Called when component is unmounted.
      */
     componentWillUnmount() {
-        if (this.filterTimer) {
-            clearTimeout(this.filterTimer);
-            this.filterTimer = null;
-        }
         window.removeEventListener('contextmenu', this.onContextMenu, true);
         window.removeEventListener('keydown', this.onKeyPress, true);
         window.removeEventListener('keyup', this.onKeyPress, true);
@@ -3032,129 +3196,52 @@ export class ObjectBrowserClass extends Component {
             this.subscribes.forEach(id => this.props.socket.subscribeState(id, this.onStateChange));
         }
     }
-    onFilter(name, value) {
-        this.filterTimer = null;
-        const filter = { ...this.state.filter };
-        Object.keys(this.filterRefs).forEach((_name) => {
-            if (this.filterRefs[_name]?.current) {
-                const filterRef = this.filterRefs[_name].current;
-                for (let i = 0; i < filterRef.children.length; i++) {
-                    if (filterRef.children[i].tagName === 'INPUT') {
-                        if (_name === 'role' ||
-                            _name === 'type' ||
-                            _name === 'func' ||
-                            _name === 'custom' ||
-                            _name === 'room') {
-                            const value = filterRef.children[i].value;
-                            if (value) {
-                                filter[_name] = value.split(',');
-                            }
-                            else {
-                                filter[_name] = undefined;
-                            }
-                        }
-                        else {
-                            filter[_name] = filterRef.children[i].value;
-                        }
-                        break;
-                    }
-                }
-            }
-        });
-        if (name) {
-            filter[name] = value;
-            if (name === 'expertMode') {
-                (window._sessionStorage || window.sessionStorage).setItem('App.expertMode', value ? 'true' : 'false');
-            }
-        }
-        if (JSON.stringify(this.state.filter) !== JSON.stringify(filter)) {
-            this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(filter));
-            this.setState({ filter }, () => this.props.onFilterChanged && this.props.onFilterChanged(filter));
-        }
-    }
     clearFilter() {
-        const filter = { ...this.state.filter };
-        Object.keys(this.filterRefs).forEach(name => {
-            if (this.filterRefs[name]?.current) {
-                const filterRef = this.filterRefs[name].current;
-                for (let i = 0; i < filterRef.childNodes.length; i++) {
-                    const item = filterRef.childNodes[i];
-                    if (item.tagName === 'INPUT') {
-                        filter[name] = '';
-                        item.value = '';
-                        break;
-                    }
-                }
-            }
-        });
-        if (JSON.stringify(this.state.filter) !== JSON.stringify(filter)) {
-            this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(filter));
-            this.setState({ filter, filterKey: this.state.filterKey + 1 }, () => this.props.onFilterChanged?.(filter));
+        if (JSON.stringify(this.state.filter) !== JSON.stringify(DEFAULT_FILTER)) {
+            this.setState({ filter: { ...DEFAULT_FILTER }, filterKey: this.state.filterKey + 1 }, () => {
+                this.doFilter();
+                this.props.onFilterChanged?.({ ...DEFAULT_FILTER });
+            });
         }
     }
     isFilterEmpty() {
-        const someNotEmpty = Object.keys(this.state.filter).find(attr => attr !== 'expertMode' && this.state.filter[attr]);
-        return !someNotEmpty;
-    }
-    getFilterInput(filterName) {
-        return (React.createElement(FormControl, { sx: this.styles.filterInput, key: `${filterName}_${this.state.filterKey}`, title: filterName === 'name' || filterName === 'id'
-                ? this.props.t('ra_You can use * as wildcard')
-                : undefined, 
-            // style={{ marginTop: 0, marginBottom: 0 }}
-            margin: "dense" },
-            React.createElement(Input, { ref: this.filterRefs[filterName], classes: { underline: 'no-underline' }, id: filterName, placeholder: this.texts[`filter_${filterName}`], defaultValue: this.state.filter[filterName] || '', onChange: () => {
-                    if (this.filterTimer) {
-                        clearTimeout(this.filterTimer);
-                    }
-                    this.filterTimer = setTimeout(() => this.onFilter(), 400);
-                }, autoComplete: "off" }),
-            this.filterRefs[filterName]?.current?.firstChild?.value ? (React.createElement("div", { style: {
-                    position: 'absolute',
-                    right: 0,
-                } },
-                React.createElement(IconButton, { size: "small", onClick: () => {
-                        (this.filterRefs[filterName].current?.firstChild).value = '';
-                        this.onFilter(filterName, '');
-                    } },
-                    React.createElement(IconClose, null)))) : null));
+        return (!!this.state.filter.id ||
+            !!this.state.filter.name ||
+            !!this.state.filter.room?.length ||
+            !!this.state.filter.func?.length ||
+            !!this.state.filter.role?.length ||
+            !!this.state.filter.type?.length ||
+            !!this.state.filter.custom?.length);
+    }
+    getFilterInput(name) {
+        return (React.createElement(CustomFilterInput, { key: `${name}_${this.state.filterKey}`, styles: this.styles.filterInput, name: name, texts: this.texts, t: this.props.t, initialValue: this.state.filter[name], onChange: (name, value) => {
+                const filter = { ...this.state.filter };
+                if (value === undefined) {
+                    delete filter[name];
+                }
+                else {
+                    filter[name] = value;
+                }
+                this.setState({ filter }, () => {
+                    this.doFilter();
+                    this.props.onFilterChanged?.(filter);
+                });
+            } }));
     }
     getFilterSelect(name, values) {
-        const hasIcons = !!values?.find(item => item.icon);
-        return (React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(Select, { variant: "standard", key: `${name}_${this.state.filterKey}`, ref: this.filterRefs[name], sx: styles.headerCellInput, className: "no-underline", multiple: true, onChange: () => {
-                    if (this.filterTimer) {
-                        clearTimeout(this.filterTimer);
-                    }
-                    this.filterTimer = setTimeout(() => this.onFilter(), 400);
-                }, defaultValue: this.state.filter[name] || [], inputProps: { name, id: name }, displayEmpty: true },
-                React.createElement(MenuItem, { key: "empty", value: "" },
-                    React.createElement("span", { style: styles.selectNone }, name === 'custom' ? this.texts.showAll : this.texts[`filter_${name}`])),
-                values?.map(item => {
-                    let id;
-                    let _name;
-                    let icon;
-                    if (typeof item === 'object') {
-                        id = item.value;
-                        _name = item.name;
-                        icon = item.icon;
-                    }
-                    else {
-                        id = item;
-                        _name = item;
-                    }
-                    return (React.createElement(MenuItem, { sx: styles.headerCellSelectItem, key: id, value: id },
-                        icon || (hasIcons ? React.createElement("div", { className: "itemIcon" }) : null),
-                        _name));
-                })),
-            this.filterRefs[name]?.current?.childNodes[1]?.value ? (React.createElement(Box, { component: "div", sx: styles.selectClearButton },
-                React.createElement(IconButton, { size: "small", onClick: () => {
-                        const newFilter = { ...this.state.filter };
-                        delete newFilter[name];
-                        (this.filterRefs[name].current?.childNodes[1]).value = '';
-                        this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(newFilter));
-                        this.setState({ filter: newFilter, filterKey: this.state.filterKey + 1 }, () => this.props.onFilterChanged && this.props.onFilterChanged(newFilter));
-                    } },
-                    React.createElement(IconClose, null)))) : null));
+        return (React.createElement(CustomFilterSelect, { key: `${name}_${this.state.filterKey}`, name: name, texts: this.texts, initialValue: this.state.filter[name] || [], values: values, onChange: (name, value) => {
+                const filter = { ...this.state.filter };
+                if (value === undefined) {
+                    delete filter[name];
+                }
+                else {
+                    filter[name] = value;
+                }
+                this.setState({ filter }, () => {
+                    this.doFilter();
+                    this.props.onFilterChanged?.(filter);
+                });
+            } }));
     }
     getFilterSelectRole() {
         return this.getFilterSelect('role', this.info.roles.map(it => it.role));
@@ -3674,7 +3761,14 @@ export class ObjectBrowserClass extends Component {
                         React.createElement(IconButton, { onClick: () => this.refreshComponent(), disabled: this.state.updating, size: "large" },
                             React.createElement(RefreshIcon, null)))),
                 this.props.showExpertButton && !this.props.expertMode && (React.createElement(Tooltip, { title: this.props.t('ra_expertMode'), slotProps: { popper: { sx: styles.tooltip } } },
-                    React.createElement(IconButton, { key: "expertMode", color: this.state.filter.expertMode ? 'secondary' : 'default', onClick: () => this.onFilter('expertMode', !this.state.filter.expertMode), size: "large" },
+                    React.createElement(IconButton, { key: "expertMode", color: this.state.filter.expertMode ? 'secondary' : 'default', onClick: () => {
+                            const filter = { ...this.state.filter };
+                            filter.expertMode = !filter.expertMode;
+                            this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(filter));
+                            this.setState({
+                                filter,
+                            });
+                        }, size: "large" },
                         React.createElement(IconExpert, null)))),
                 !this.props.disableColumnSelector && this.props.width !== 'xs' && (React.createElement(Tooltip, { title: this.props.t('ra_Configure'), slotProps: { popper: { sx: styles.tooltip } } },
                     React.createElement(IconButton, { key: "columnSelector", color: this.state.columnsAuto ? 'primary' : 'default', onClick: () => this.setState({ columnsSelectorShow: true }), size: "large" },
@@ -4250,7 +4344,9 @@ export class ObjectBrowserClass extends Component {
                         this.setState({ enumDialogEnums });
                     }, secondaryAction: icon },
                     React.createElement(ListItemIcon, { sx: { '&.MuiListItemIcon-root': styles.enumCheckbox } },
-                        React.createElement(Checkbox, { edge: "start", checked: itemEnums.includes(id), tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': labelId } })),
+                        React.createElement(Checkbox, { edge: "start", checked: itemEnums.includes(id), tabIndex: -1, disableRipple: true, slotProps: {
+                                input: { 'aria-labelledby': labelId },
+                            } })),
                     React.createElement(ListItemText, { id: labelId }, name)));
             }))));
     }
@@ -6126,6 +6222,22 @@ export class ObjectBrowserClass extends Component {
                 }
             }, width: this.props.width }));
     }
+    doFilter(doNotStore) {
+        if (!this.objects || !this.root) {
+            return;
+        }
+        if (!doNotStore) {
+            this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(this.state.filter));
+        }
+        const counter = { count: 0 };
+        applyFilter(this.root, this.state.filter, this.props.lang, this.objects, undefined, counter, this.props.customFilter, this.props.types);
+        if (counter.count < 500 && !this.state.expandAllVisible) {
+            setTimeout(() => this.setState({ expandAllVisible: true }));
+        }
+        else if (counter.count >= 500 && this.state.expandAllVisible) {
+            setTimeout(() => this.setState({ expandAllVisible: false }));
+        }
+    }
     /**
      * The rendering method of this component.
      */
@@ -6159,19 +6271,6 @@ export class ObjectBrowserClass extends Component {
             };
             this.styleTheme = this.props.themeType;
         }
-        // apply filter if changed
-        const jsonFilter = JSON.stringify(this.state.filter);
-        if (this.lastAppliedFilter !== jsonFilter && this.objects && this.root) {
-            const counter = { count: 0 };
-            applyFilter(this.root, this.state.filter, this.props.lang, this.objects, undefined, counter, this.props.customFilter, this.props.types);
-            if (counter.count < 500 && !this.state.expandAllVisible) {
-                setTimeout(() => this.setState({ expandAllVisible: true }));
-            }
-            else if (counter.count >= 500 && this.state.expandAllVisible) {
-                setTimeout(() => this.setState({ expandAllVisible: false }));
-            }
-            this.lastAppliedFilter = jsonFilter;
-        }
         this.unsubscribeTimer = setTimeout(() => {
             this.unsubscribeTimer = null;
             this.checkUnsubscribes();