@iobroker/gui-components 8.0.1

package/build/Components/ObjectBrowser.d.ts

@@ -0,0 +1,665 @@
+/**
+ * Copyright 2020-2025, Denis Haev <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ */
+import React, { Component, type JSX } from 'react';
+import type { ThemeType, ThemeName, IobTheme, Translate } from '../types';
+import type { Router } from './Router';
+import { Connection } from '../Connection';
+declare global {
+    interface Window {
+        sparkline: {
+            sparkline: (el: HTMLDivElement, data: number[]) => JSX.Element;
+        };
+    }
+}
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        grey: true;
+    }
+}
+type ObjectEventType = 'new' | 'changed' | 'deleted';
+interface ObjectEvent {
+    id: string;
+    obj?: ioBroker.Object;
+    type: ObjectEventType;
+    oldObj?: ioBroker.Object;
+}
+interface ObjectsWorker {
+    getObjects(update?: boolean): Promise<void | Record<string, ioBroker.Object>>;
+    registerHandler(cb: (events: ObjectEvent[]) => void): void;
+    unregisterHandler(cb: (events: ObjectEvent[]) => void, doNotUnsubscribe?: boolean): void;
+}
+interface CustomAdminColumnStored {
+    path: string;
+    name: string;
+    objTypes?: ioBroker.ObjectType[];
+    width?: number;
+    edit?: boolean;
+    type?: ioBroker.CommonType;
+}
+export interface TreeItemData {
+    id: string;
+    name: string;
+    obj?: ioBroker.Object;
+    /** Object ID in lower case for filtering */
+    fID?: string;
+    /** translated common.name in lower case for filtering */
+    fName?: string;
+    /** Link to parent item */
+    parent?: TreeItem;
+    level?: number;
+    icon?: string | JSX.Element | null;
+    /** If the item existing object or generated folder */
+    generated?: boolean;
+    title?: string;
+    /** if the item has "write" button (value=true, ack=false) */
+    button?: boolean;
+    /** If the item has read and write and is boolean */
+    switch?: boolean;
+    /** If the item is url linke */
+    url?: boolean;
+    /** if the item has custom settings in `common.custom` */
+    hasCustoms?: boolean;
+    /** If this item is visible */
+    visible?: boolean;
+    /** Is any of the children visible (not only directly children) */
+    hasVisibleChildren?: boolean;
+    /** Is any of the parents visible (not only directly parent) */
+    hasVisibleParent?: boolean;
+    /** Combination of `visible || hasVisibleChildren` */
+    sumVisibility?: boolean;
+    /** translated names of enumerations (functions) where this object is the member (or the parent), divided by comma */
+    funcs?: string;
+    /** is if the enums are from parent */
+    pef?: boolean;
+    /** translated names of enumerations (rooms) where this object is the member (or the parent), divided by comma */
+    rooms?: string;
+    /** is if the enums are from parent */
+    per?: boolean;
+    lang?: ioBroker.Languages;
+    state?: {
+        valTextRx?: JSX.Element[] | null;
+        style?: React.CSSProperties;
+    };
+    aclTooltip?: null | JSX.Element;
+}
+export interface ObjectBrowserCustomFilter {
+    type?: ioBroker.ObjectType | ioBroker.ObjectType[];
+    common?: {
+        type?: ioBroker.CommonType | ioBroker.CommonType[];
+        role?: string | string[];
+        custom?: '_' | '_dataSources' | true | string | string[];
+    };
+}
+export interface TreeItem {
+    id?: string;
+    data: TreeItemData;
+    children?: TreeItem[];
+}
+/** Converts ioB pattern into regex */
+export declare function pattern2RegEx(pattern: string): string;
+export declare function filterRoles(roleArray: {
+    role: string;
+    type: ioBroker.CommonType;
+}[], type: ioBroker.CommonType, defaultRoles?: {
+    role: string;
+    type: ioBroker.CommonType;
+}[]): string[];
+export declare function getSelectIdIconFromObjects(objects: Record<string, ioBroker.Object>, id: string, lang: ioBroker.Languages, imagePrefix?: string): string | JSX.Element | null;
+export declare const ITEM_IMAGES: Record<string, JSX.Element>;
+export interface ObjectBrowserFilter {
+    id?: string;
+    name?: string;
+    room?: string[];
+    func?: string[];
+    role?: string[];
+    type?: string[];
+    custom?: string[];
+    expertMode?: boolean;
+}
+interface AdapterColumn {
+    adapter: string;
+    id: string;
+    name: string;
+    path: string[];
+    pathText: string;
+    edit?: boolean;
+    type?: 'boolean' | 'string' | 'number';
+    objTypes?: ioBroker.ObjectType[];
+    align?: 'center' | 'left' | 'right';
+}
+interface ObjectBrowserEditRoleProps {
+    roleArray: {
+        role: string;
+        type: ioBroker.CommonType;
+    }[];
+    id: string;
+    socket: Connection;
+    onClose: (obj?: ioBroker.Object | null) => void;
+    t: Translate;
+    commonType: ioBroker.CommonType;
+}
+interface ObjectViewFileDialogProps {
+    t: Translate;
+    socket: Connection;
+    obj: ioBroker.AnyObject;
+    onClose: () => void;
+}
+interface DragWrapperProps {
+    item: TreeItem;
+    className?: string;
+    style?: React.CSSProperties;
+    children: JSX.Element | null;
+}
+interface ObjectCustomDialogProps {
+    allVisibleObjects: boolean;
+    customsInstances: string[];
+    expertMode?: boolean;
+    isFloatComma: boolean;
+    lang: ioBroker.Languages;
+    objectIDs: string[];
+    objects: Record<string, ioBroker.Object>;
+    onClose: () => void;
+    reportChangedIds: (ids: string[]) => void;
+    socket: Connection;
+    systemConfig: ioBroker.SystemConfigObject;
+    t: Translate;
+    theme: IobTheme;
+    themeName: ThemeName;
+    themeType: ThemeType;
+}
+interface ObjectMoveRenameDialogProps {
+    childrenIds: string[];
+    expertMode: boolean;
+    id: string;
+    objectType: ioBroker.ObjectType | undefined;
+    onClose: () => void;
+    socket: Connection;
+    t: Translate;
+    theme: IobTheme;
+}
+interface ObjectBrowserValueProps {
+    /** State type */
+    type: 'states' | 'string' | 'number' | 'boolean' | 'json';
+    /** State role */
+    role: string;
+    /** common.states */
+    states: Record<string, string> | null;
+    /** The state value */
+    value: string | number | boolean | null;
+    /** If expert mode is enabled */
+    expertMode: boolean;
+    onClose: (newValue?: {
+        val: ioBroker.StateValue;
+        ack: boolean;
+        q: ioBroker.STATE_QUALITY[keyof ioBroker.STATE_QUALITY];
+        expire: number | undefined;
+    }) => void;
+    /** Configured theme */
+    themeType: ThemeType;
+    theme: IobTheme;
+    socket: Connection;
+    defaultHistory: string;
+    dateFormat: string;
+    object: ioBroker.StateObject;
+    isFloatComma: boolean;
+    t: Translate;
+    lang: ioBroker.Languages;
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+interface ObjectBrowserEditObjectProps {
+    socket: Connection;
+    obj: ioBroker.AnyObject;
+    roleArray: {
+        role: string;
+        type: ioBroker.CommonType;
+    }[];
+    expertMode: boolean;
+    themeType: ThemeType;
+    theme: IobTheme;
+    aliasTab: boolean;
+    onClose: (obj?: ioBroker.AnyObject) => void;
+    dialogName?: string;
+    objects: Record<string, ioBroker.AnyObject>;
+    dateFormat: string;
+    isFloatComma: boolean;
+    onNewObject: (obj: ioBroker.AnyObject) => void;
+    t: Translate;
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+export interface ObjectAliasEditorProps {
+    t: Translate;
+    roleArray: {
+        role: string;
+        type: ioBroker.CommonType;
+    }[];
+    socket: Connection;
+    objects: Record<string, ioBroker.AnyObject>;
+    onRedirect: (id: string, delay?: number) => void;
+    obj: ioBroker.AnyObject;
+    onClose: () => void;
+}
+export type ObjectBrowserColumn = 'name' | 'type' | 'role' | 'room' | 'func' | 'val' | 'buttons';
+type ObjectBrowserPossibleColumns = 'name' | 'type' | 'role' | 'room' | 'func' | 'val' | 'buttons' | 'changedFrom' | 'qualityCode' | 'timestamp' | 'lastChange' | 'id';
+export interface ObjectBrowserProps {
+    /** where to store settings in localStorage */
+    dialogName?: string;
+    defaultFilters?: ObjectBrowserFilter;
+    selected?: string | string[];
+    onSelect?: (selected: string | string[], name: string | null, isDouble?: boolean) => void;
+    onFilterChanged?: (newFilter: ObjectBrowserFilter) => void;
+    socket: Connection;
+    showExpertButton?: boolean;
+    expertMode?: boolean;
+    imagePrefix?: string;
+    themeName: ThemeName;
+    themeType: ThemeType;
+    /** will be filled by withWidth */
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    theme: IobTheme;
+    t: Translate;
+    lang: ioBroker.Languages;
+    multiSelect?: boolean;
+    notEditable?: boolean;
+    foldersFirst?: boolean;
+    disableColumnSelector?: boolean;
+    isFloatComma?: boolean;
+    dateFormat?: string;
+    levelPadding?: number;
+    /** Allow selection of non-objects (virtual branches) */
+    allowNonObjects?: boolean;
+    /** Called when all objects are loaded */
+    onAllLoaded?: () => void;
+    objectCustomDialog?: React.FC<ObjectCustomDialogProps>;
+    objectMoveRenameDialog?: React.FC<ObjectMoveRenameDialogProps>;
+    objectAddBoolean?: boolean;
+    objectEditBoolean?: boolean;
+    objectStatesView?: boolean;
+    objectImportExport?: boolean;
+    objectEditOfAccessControl?: boolean;
+    /** modal add object */
+    modalNewObject?: (oBrowser: ObjectBrowserClass) => JSX.Element;
+    /** modal Edit Of Access Control */
+    modalEditOfAccessControl: (oBrowser: ObjectBrowserClass, data: TreeItemData) => JSX.Element;
+    onObjectDelete?: (id: string, hasChildren: boolean, objectExists: boolean, childrenCount: number) => void;
+    /**
+     * Optional filter
+     *   `{common: {custom: true}}` - show only objects with some custom settings
+     *   `{common: {custom: 'sql.0'}}` - show only objects with sql.0 custom settings (only of the specific instance)
+     *   `{common: {custom: '_dataSources'}}` - show only objects of adapters `influxdb' or 'sql' or 'history'
+     *   `{common: {custom: 'adapterName.'}}` - show only objects of custom settings of specific adapter (all instances)
+     *   `{type: 'channel'}` - show only channels
+     *   `{type: ['channel', 'device']}` - show only channels and devices
+     *   `{common: {type: 'number'}` - show only states of type 'number
+     *   `{common: {type: ['number', 'string']}` - show only states of type 'number and string
+     *   `{common: {role: ['switch']}` - show only states with roles starting from switch
+     *   `{common: {role: ['switch', 'button']}` - show only states with roles starting from `switch` and `button`
+     */
+    customFilter: ObjectBrowserCustomFilter;
+    objectBrowserValue?: React.FC<ObjectBrowserValueProps>;
+    objectBrowserEditObject?: React.FC<ObjectBrowserEditObjectProps>;
+    /** on edit alias */
+    objectBrowserAliasEditor?: React.FC<ObjectAliasEditorProps>;
+    /** on Edit role */
+    objectBrowserEditRole?: React.FC<ObjectBrowserEditRoleProps>;
+    /** on view file state */
+    objectBrowserViewFile?: React.FC<ObjectViewFileDialogProps>;
+    router?: typeof Router;
+    types?: ioBroker.ObjectType[];
+    /** Possible columns: ['name', 'type', 'role', 'room', 'func', 'val', 'buttons'] */
+    columns?: ObjectBrowserColumn[];
+    /** Shows only elements of this root */
+    root?: string;
+    /** cache of objects */
+    objectsWorker?: ObjectsWorker;
+    /**
+     * function to filter out all unnecessary objects. It cannot be used together with "types"
+     * Example for function: `obj => obj.common?.type === 'boolean'` to show only boolean states
+     */
+    filterFunc?: (obj: ioBroker.Object) => boolean;
+    /** Used for enums dragging */
+    DragWrapper?: React.FC<DragWrapperProps>;
+    /** let DragWrapper know about objects to get the icons */
+    setObjectsReference?: (objects: Record<string, ioBroker.Object>) => void;
+    dragEnabled?: boolean;
+}
+interface ObjectBrowserState {
+    loaded: boolean;
+    foldersFirst: boolean;
+    selected: string[];
+    focused: string;
+    selectedNonObject: string;
+    filter: ObjectBrowserFilter;
+    filterKey: number;
+    depth: number;
+    expandAllVisible: boolean;
+    expanded: string[];
+    toast: string;
+    scrollBarWidth: number;
+    customDialog: null | string[];
+    customDialogAll?: boolean;
+    editObjectDialog: string;
+    editObjectAlias: boolean;
+    viewFileDialog: string;
+    showAliasEditor: string;
+    enumDialog: null | {
+        item: TreeItem;
+        type: 'room' | 'func';
+        enumsOriginal: string;
+    };
+    enumDialogEnums?: null | string[];
+    roleDialog: null | string;
+    statesView: boolean;
+    /** ['name', 'type', 'role', 'room', 'func', 'val', 'buttons'] */
+    columns: ObjectBrowserPossibleColumns[] | null;
+    columnsForAdmin: Record<string, CustomAdminColumnStored[]> | null;
+    columnsSelectorShow: boolean;
+    columnsAuto: boolean;
+    columnsWidths: Record<string, number>;
+    columnsDialogTransparent: number;
+    columnsEditCustomDialog: null | {
+        obj: ioBroker.Object;
+        item: TreeItem;
+        it: AdapterColumn;
+    };
+    customColumnDialogValueChanged: boolean;
+    showExportDialog: false | number;
+    showAllExportOptions: boolean;
+    linesEnabled: boolean;
+    showDescription: boolean;
+    showContextMenu: {
+        item: TreeItem;
+        position: {
+            left: number;
+            top: number;
+        };
+        subItem?: string;
+        subAnchor?: HTMLLIElement;
+    } | null;
+    noStatesByExportImport: boolean;
+    beautifyJsonExport: boolean;
+    excludeSystemRepositoriesFromExport: boolean;
+    excludeTranslations: boolean;
+    updating?: boolean;
+    modalNewObj?: null | {
+        id: string;
+        initialType?: ioBroker.ObjectType;
+        initialStateType?: ioBroker.CommonType;
+    };
+    error?: any;
+    modalEditOfAccess?: boolean;
+    modalEditOfAccessObjData?: TreeItemData;
+    updateOpened?: boolean;
+    tooltipInfo: null | {
+        el: JSX.Element[];
+        id: string;
+    };
+    /** Show the menu with aliases for state */
+    aliasMenu: string;
+    /** Show rename dialog */
+    showRenameDialog: {
+        id: string;
+        childrenIds: string[];
+    } | null;
+}
+export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrowserState> {
+    private info;
+    private localStorage;
+    private lastAppliedFilter;
+    private readonly tableRef;
+    private readonly filterRefs;
+    private pausedSubscribes;
+    private selectFirst;
+    private root;
+    private readonly states;
+    private subscribes;
+    private unsubscribeTimer;
+    private statesUpdateTimer;
+    private objectsUpdateTimer;
+    private filterTimer;
+    private readonly visibleCols;
+    private readonly texts;
+    private readonly possibleCols;
+    private readonly imagePrefix;
+    private adapterColumns;
+    private styleTheme;
+    private edit;
+    private readonly levelPadding;
+    private customWidth;
+    private resizeTimeout;
+    private resizerNextName;
+    private resizerActiveName;
+    private resizerCurrentWidths;
+    private resizeLeft;
+    private resizerOldWidth;
+    private resizerMin;
+    private resizerNextMin;
+    private resizerOldWidthNext;
+    private resizerPosition;
+    private resizerActiveDiv;
+    private resizerNextDiv;
+    private storedWidths;
+    private systemConfig;
+    objects: Record<string, ioBroker.Object>;
+    private defaultHistory;
+    private cltrPressed;
+    private columnsVisibility;
+    private changedIds;
+    private contextMenu;
+    private recordStates;
+    private styles;
+    private customColumnDialog;
+    /** Namespaces which are allowed to be edited by non-expert users */
+    static NON_EXPERT_NAMESPACES: string[];
+    constructor(props: ObjectBrowserProps);
+    loadAllObjects(update?: boolean): Promise<void>;
+    /**
+     * Check if it is a non-expert id
+     */
+    static isNonExpertId(
+    /** id to test */
+    id: string): boolean;
+    private expandAllSelected;
+    /**
+     * @param isDouble is double click
+     */
+    private onAfterSelect;
+    private static getDerivedStateFromProps;
+    /**
+     * Called when component is mounted.
+     */
+    componentDidMount(): Promise<void>;
+    onKeyPress: (event: KeyboardEvent) => void;
+    /**
+     * Called when component is unmounted.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Show the deletion dialog for a given object
+     */
+    showDeleteDialog(options: {
+        id: string;
+        obj: ioBroker.Object;
+        item: TreeItem;
+    }): void;
+    /**
+     * Context menu handler.
+     */
+    onContextMenu: (e: MouseEvent) => void;
+    /**
+     * Called when component is mounted.
+     */
+    refreshComponent(): void;
+    /**
+     * Renders the error dialog.
+     */
+    renderErrorDialog(): JSX.Element | null;
+    /**
+     * Show the error dialog.
+     */
+    showError(error: any): void;
+    /**
+     * Called when an item is selected/deselected.
+     */
+    onSelect(toggleItem: string, isDouble?: boolean, cb?: () => void): void;
+    private _renderDefinedList;
+    /**
+     * Renders the columns' selector.
+     */
+    renderColumnsSelectorDialog(): JSX.Element | null;
+    private getAdditionalColumns;
+    private checkUnsubscribes;
+    /**
+     * Find an item.
+     */
+    findItem(id: string, _parts?: string[], _root?: TreeItem | null, _partyId?: string): TreeItem | null;
+    /**
+     * Called when a state changes.
+     */
+    onStateChange: (id: string, state?: ioBroker.State | null) => void;
+    private parseObjectForAdmins;
+    onObjectChangeFromWorker: (events: ObjectEvent[]) => void;
+    onObjectChange: (id: string, obj?: ioBroker.Object | null) => void;
+    afterObjectUpdated(): void;
+    updateAliases(aliasId: string): void;
+    /**
+     * Processes a single element in regard to certain filters, columns for admin and updates object dict
+     *
+     * @param id The id of the object
+     * @param obj The object itself
+     * @returns Returns an object containing the new state (if any) and whether the object was filtered.
+     */
+    processOnObjectChangeElement(id: string, obj?: ioBroker.Object | null): {
+        filtered: boolean;
+        newInnerState: null | {
+            columnsForAdmin: Record<string, CustomAdminColumnStored[]> | null;
+        };
+    };
+    private subscribe;
+    private unsubscribe;
+    private pauseSubscribe;
+    private onFilter;
+    clearFilter(): void;
+    isFilterEmpty(): boolean;
+    private getFilterInput;
+    private getFilterSelect;
+    private getFilterSelectRole;
+    private getFilterSelectRoom;
+    private getFilterSelectFunction;
+    private getFilterSelectType;
+    private getFilterSelectCustoms;
+    private onExpandAll;
+    private onCollapseAll;
+    private expandDepth;
+    private static collapseDepth;
+    private onExpandVisible;
+    private onStatesViewVisible;
+    private onCollapseVisible;
+    private getEnumsForId;
+    private _createAllEnums;
+    private loadObjects;
+    _getSelectedIdsForExport(): string[];
+    /**
+     * Exports the selected objects based on the given options and triggers file generation
+     */
+    private _exportObjects;
+    renderExportDialog(): JSX.Element | null;
+    renderRenameDialog(): JSX.Element | null;
+    private handleJsonUpload;
+    toolTipObjectCreating: () => JSX.Element[] | string;
+    /**
+     * Renders the toolbar.
+     */
+    getToolbar(): JSX.Element;
+    private toggleExpanded;
+    private onCopy;
+    renderTooltipAccessControl: (acl: ioBroker.StateACL) => null | JSX.Element;
+    renderColumnButtons(id: string, item: TreeItem): (JSX.Element | null)[] | JSX.Element | null;
+    private readHistory;
+    private getTooltipInfo;
+    /**
+     * This function renders the value in different forms in the table
+     *
+     * @param id state ID
+     * @param item Item
+     * @param narrowStyleWithDetails if use mobile view
+     */
+    private renderColumnValue;
+    private _syncEnum;
+    private syncEnum;
+    private renderEnumDialog;
+    private renderEditRoleDialog;
+    private onColumnsEditCustomDialogClose;
+    private renderColumnsEditCustomDialog;
+    private static getCustomValue;
+    private static setCustomValue;
+    /**
+     * Renders a custom value.
+     */
+    renderCustomValue(obj: ioBroker.Object, it: AdapterColumn, item: TreeItem): JSX.Element | null;
+    renderAliasLink(id: string, index?: number, customStyle?: Record<string, any>): JSX.Element | null;
+    /**
+     * Renders a leaf.
+     */
+    renderLeaf(item: TreeItem, isExpanded: boolean | undefined, counter: {
+        count: number;
+    }): {
+        row: JSX.Element;
+        details: JSX.Element | null;
+    };
+    /**
+     * Renders an item.
+     */
+    renderItem(root: TreeItem, isExpanded: boolean | undefined, counter?: {
+        count: number;
+    }): JSX.Element[];
+    private calculateColumnsVisibility;
+    resizerMouseMove: (e: MouseEvent) => void;
+    resizerMouseUp: () => void;
+    resizerMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Handle keyboard events for navigation
+     */
+    navigateKeyPress(event: React.KeyboardEvent): void;
+    /**
+     * Find the id from the root
+     *
+     * @param root The current root
+     * @param id The object id to find
+     */
+    private static getItemFromRoot;
+    resizerReset: () => void;
+    /**
+     * Render the right handle for resizing
+     */
+    renderHandleRight(): JSX.Element;
+    private renderHeader;
+    private renderToast;
+    /**
+     * Called when component is updated.
+     */
+    componentDidUpdate(): void;
+    scrollToItem(id: string): void;
+    private renderCustomDialog;
+    private onUpdate;
+    private renderEditObjectDialog;
+    private renderViewObjectFileDialog;
+    private renderAliasEditorDialog;
+    showAddDataPointDialog(id: string, initialType: ioBroker.ObjectType, initialStateType?: ioBroker.CommonType): void;
+    /** Renders the aliases list for one state (if more than 2) */
+    private renderAliasMenu;
+    /**
+     * Renders the right mouse button context menu
+     */
+    private renderContextMenu;
+    private renderEditValueDialog;
+    /**
+     * The rendering method of this component.
+     */
+    render(): JSX.Element;
+}
+export declare const ObjectBrowser: (props: Record<string, any>) => JSX.Element;
+export {};