@iobroker/adapter-react-v5 8.2.7 → 8.2.8

package/README.md

@@ -690,6 +690,9 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 8.2.8 (2026-06-11)
+- (@GermanBluefox) Added object and file navigation
+
 ### 8.2.7 (2026-05-29)
 - (@GermanBluefox) Updated loader
 

package/build/Components/FileBrowser.d.ts

@@ -14,6 +14,17 @@ export interface MetaACL extends ioBroker.ObjectACL {
 export interface MetaObject extends ioBroker.MetaObject {
     acl: MetaACL;
 }
+/**
+ * A navigation target the parent can use to drive the browser (and that the browser reports back).
+ * Maps cleanly to a route like `#tab-files/<mode>/<encoded-id>` (the parent encodes the file path,
+ * whose `/` separators would otherwise clash with the hash). The browser never reads the URL.
+ */
+export interface FileBrowserNavigation {
+    /** `select` = just highlight the file; `view` = open the file viewer. */
+    mode: 'select' | 'view';
+    /** The file path/ID (e.g. `email.admin/custom/assets/Components.js`). */
+    id: string;
+}
 export interface FileBrowserProps {
     /** The key to identify this component. */
     key?: string;
@@ -61,6 +72,17 @@ export interface FileBrowserProps {
     filterByType?: 'images' | 'code' | 'txt';
     /** Callback for file selection. */
     onSelect?: (id: string | string[], isDoubleClick?: boolean, isFolder?: boolean) => void;
+    /**
+     * Drive selection and the file viewer from the parent (e.g. from the URL). When this prop
+     * changes the browser selects the file and opens the requested viewer. The browser does NOT
+     * read the URL itself — all URL parsing/writing lives in the parent component.
+     */
+    navigateTo?: FileBrowserNavigation | null;
+    /**
+     * Called when the user navigates inside the browser (selects a file or opens/closes the viewer)
+     * so the parent can reflect it in the URL. The browser never touches the URL itself.
+     */
+    onNavigateTo?: (navigation: FileBrowserNavigation | null) => void;
     /** Theme name */
     themeName?: ThemeName;
     /** Theme type. */
@@ -132,6 +154,10 @@ export declare class FileBrowserClass extends Component<FileBrowserProps, FileBr
     private readonly limitToObjectID;
     private readonly limitToPath;
     private lastSelect;
+    /** Last navigation applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
+    private lastNav;
+    /** True while applying `navigateTo`, so the derived-state watcher does not echo it back. */
+    private applyingNav;
     private setOpacityTimer;
     private cacheFoldersTimeout;
     private foldersLoading;
@@ -168,7 +194,18 @@ export declare class FileBrowserClass extends Component<FileBrowserProps, FileBr
     renderToolbar(): JSX.Element;
     findItem(id: string, folders?: Folders | null): null | FolderOrFileItem;
     renderInputDialog(): JSX.Element | null;
-    componentDidUpdate(): void;
+    /** Strip the image prefix from a viewer href to get back the raw file path. */
+    private viewerToId;
+    /** Derive the current navigation target from the viewer/selection state. */
+    private getStateNav;
+    private static navEqual;
+    /** Apply a navigation target coming from the parent (`navigateTo`): select + open the viewer. */
+    private applyNavigateTo;
+    /** Apply the initial `navigateTo` once the browser is ready (called from componentDidMount). */
+    applyInitialNavigateTo(): void;
+    /** Reconcile `navigateTo` (parent/URL) with the browser's selection/viewer state. */
+    private reconcileNavigation;
+    componentDidUpdate(prevProps: FileBrowserProps): void;
     findFirstFolder(id: string): string | null;
     uploadFile(fileName: string, data: string): Promise<void>;
     renderUpload(): JSX.Element[] | null;

package/build/Components/FileBrowser.js

@@ -394,6 +394,10 @@ export class FileBrowserClass extends Component {
     limitToObjectID = null;
     limitToPath = null;
     lastSelect = null;
+    /** Last navigation applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
+    lastNav = null;
+    /** True while applying `navigateTo`, so the derived-state watcher does not echo it back. */
+    applyingNav = false;
     setOpacityTimer = null;
     cacheFoldersTimeout = null;
     foldersLoading = null;
@@ -543,7 +547,9 @@ export class FileBrowserClass extends Component {
     }
     async componentDidMount() {
         this.mounted = true;
-        this.loadFolders().catch(error => console.error(`Cannot load folders: ${error}`));
+        this.loadFolders()
+            .then(() => this.applyInitialNavigateTo())
+            .catch(error => console.error(`Cannot load folders: ${error}`));
         this.browseList = [];
         this.browseListRunning = false;
         this.supportSubscribes = await this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT');
@@ -1372,7 +1378,86 @@ export class FileBrowserClass extends Component {
         }
         return null;
     }
-    componentDidUpdate( /* prevProps , prevState, snapshot */) {
+    // --- Routing (navigateTo / onNavigateTo) ---
+    // The browser never reads the URL; the parent drives it via `navigateTo` and is informed of user
+    // navigation via `onNavigateTo`. All URL parsing/encoding lives in the parent component.
+    /** Strip the image prefix from a viewer href to get back the raw file path. */
+    viewerToId(viewer) {
+        return viewer.startsWith(this.imagePrefix) ? viewer.substring(this.imagePrefix.length) : viewer;
+    }
+    /** Derive the current navigation target from the viewer/selection state. */
+    getStateNav() {
+        if (this.state.viewer) {
+            return { mode: 'view', id: this.viewerToId(this.state.viewer) };
+        }
+        if (this.state.selected) {
+            return { mode: 'select', id: this.state.selected };
+        }
+        return null;
+    }
+    static navEqual(a, b) {
+        if (!a || !b) {
+            return !a && !b;
+        }
+        return a.mode === b.mode && a.id === b.id;
+    }
+    /** Apply a navigation target coming from the parent (`navigateTo`): select + open the viewer. */
+    applyNavigateTo(nav) {
+        this.applyingNav = true;
+        const done = () => {
+            this.applyingNav = false;
+        };
+        if (!nav?.id) {
+            this.setState({ viewer: '', formatEditFile: '' }, done);
+            return;
+        }
+        const { id } = nav;
+        this.select(id, null, () => {
+            this.scrollToSelected();
+            if (nav.mode === 'view') {
+                this.setState({ viewer: this.imagePrefix + id, formatEditFile: Utils.getFileExtension(id) }, done);
+            }
+            else {
+                this.setState({ viewer: '', formatEditFile: '' }, done);
+            }
+        });
+    }
+    /** Apply the initial `navigateTo` once the browser is ready (called from componentDidMount). */
+    applyInitialNavigateTo() {
+        const nav = this.props.navigateTo ?? null;
+        if (nav?.id) {
+            this.lastNav = nav;
+            this.applyNavigateTo(nav);
+        }
+        else {
+            // Don't push the restored-from-localStorage selection into the URL on load.
+            this.lastNav = this.getStateNav();
+        }
+    }
+    /** Reconcile `navigateTo` (parent/URL) with the browser's selection/viewer state. */
+    reconcileNavigation(prevProps) {
+        if (this.props.navigateTo === undefined && !this.props.onNavigateTo) {
+            return; // routing not used by this consumer
+        }
+        if (this.applyingNav) {
+            return;
+        }
+        const propNav = this.props.navigateTo ?? null;
+        const stateNav = this.getStateNav();
+        if (FileBrowserClass.navEqual(propNav, stateNav)) {
+            this.lastNav = stateNav;
+            return;
+        }
+        if (!FileBrowserClass.navEqual(propNav, prevProps.navigateTo ?? null)) {
+            this.lastNav = propNav;
+            this.applyNavigateTo(propNav);
+        }
+        else if (!FileBrowserClass.navEqual(stateNav, this.lastNav)) {
+            this.lastNav = stateNav;
+            this.props.onNavigateTo?.(stateNav);
+        }
+    }
+    componentDidUpdate(prevProps /* , prevState, snapshot */) {
         if (this.setOpacityTimer) {
             clearTimeout(this.setOpacityTimer);
         }
@@ -1383,6 +1468,7 @@ export class FileBrowserClass extends Component {
                 items[i].style.opacity = '1';
             }
         }, 100);
+        this.reconcileNavigation(prevProps);
     }
     findFirstFolder(id) {
         let parentFolder = id;