@iobroker/adapter-react-v5 4.13.4 → 4.13.5

package/Components/FileBrowser.js

@@ -378,6 +378,17 @@ const styles = (theme) => ({
     },
 });
 const USER_DATA = '0_userdata.0';
+function getParentDir(dir) {
+    const parts = (dir || '').split('/');
+    parts.length && parts.pop();
+    return parts.join('/');
+}
+function isFile(path) {
+    const ext = Utils_1.default.getFileExtension(path);
+    return !!((ext === null || ext === void 0 ? void 0 : ext.toLowerCase().match(/[a-z]+/)) && ext.length < 5);
+}
+const TABLE = 'Table';
+const TILE = 'Tile';
 function sortFolders(a, b) {
     if (a.folder && b.folder) {
         return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
@@ -390,17 +401,6 @@ function sortFolders(a, b) {
     }
     return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
 }
-function getParentDir(dir) {
-    const parts = (dir || '').split('/');
-    parts.length && parts.pop();
-    return parts.join('/');
-}
-function isFile(path) {
-    const ext = Utils_1.default.getFileExtension(path);
-    return !!((ext === null || ext === void 0 ? void 0 : ext.toLowerCase().match(/[a-z]+/)) && ext.length < 5);
-}
-const TABLE = 'Table';
-const TILE = 'Tile';
 /**
  * @extends {React.Component<import('./types').FileBrowserProps>}
  */
@@ -454,11 +454,11 @@ class FileBrowser extends react_1.Component {
                     return null;
             }
         };
-        let expandedStr = (window._localStorage || window.localStorage).getItem('files.expanded') || '[]';
+        const expandedStr = (window._localStorage || window.localStorage).getItem('files.expanded') || '[]';
         if (this.props.limitPath) {
             const parts = this.props.limitPath.split('/');
             this.limitToObjectID = parts[0];
-            this.limitToPath = !parts.length ? null : (parts.length === 1 && parts[0] === '' ? null : parts.join('/'));
+            this.limitToPath = !parts.length ? null : parts.length === 1 && parts[0] === '' ? null : parts.join('/');
             if (this.limitToPath && this.limitToPath.endsWith('/')) {
                 this.limitToPath.substring(0, this.limitToPath.length - 1);
             }
@@ -467,7 +467,11 @@ class FileBrowser extends react_1.Component {
         try {
             expanded = JSON.parse(expandedStr);
             if (this.limitToPath) {
-                expanded = expanded.filter(id => { var _a; return id.startsWith(`${this.limitToPath}/`) || id === this.limitToPath || ((_a = this.limitToPath) === null || _a === void 0 ? void 0 : _a.startsWith(`${id}/`)); });
+                expanded = expanded.filter(id => {
+                    var _a;
+                    return id.startsWith(`${this.limitToPath}/`) ||
+                        id === this.limitToPath || ((_a = this.limitToPath) === null || _a === void 0 ? void 0 : _a.startsWith(`${id}/`));
+                });
             }
         }
         catch (e) {
@@ -480,8 +484,10 @@ class FileBrowser extends react_1.Component {
         else {
             viewType = TABLE;
         }
-        let selected = this.props.selected || (window._localStorage || window.localStorage).getItem('files.selected') || USER_DATA;
-        let currentDir = '';
+        let selected = this.props.selected ||
+            (window._localStorage || window.localStorage).getItem('files.selected') ||
+            USER_DATA;
+        let currentDir;
         if (props.restrictToFolder) {
             selected = props.restrictToFolder;
             currentDir = props.restrictToFolder;
@@ -587,14 +593,12 @@ class FileBrowser extends react_1.Component {
             el && el.scrollIntoView();
         }
     }
-    componentDidMount() {
+    async componentDidMount() {
         this.mounted = true;
-        this.loadFolders();
-        return this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT')
-            .then(result => {
-            this.supportSubscribes = result;
-            this.supportSubscribes && this.props.socket.subscribeFiles('*', '*', this.onFileChange);
-        });
+        this.loadFolders()
+            .catch(error => console.error(`Cannot load folders: ${error}`));
+        this.supportSubscribes = await this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT');
+        this.supportSubscribes && (await this.props.socket.subscribeFiles('*', '*', this.onFileChange));
     }
     componentWillUnmount() {
         this.supportSubscribes && this.props.socket.unsubscribeFiles('*', '*', this.onFileChange);
@@ -627,7 +631,7 @@ class FileBrowser extends react_1.Component {
         let newFoldersNotNull;
         if (!_newFolders) {
             newFoldersNotNull = {};
-            Object.keys(this.state.folders).forEach(folder => newFoldersNotNull[folder] = this.state.folders[folder]);
+            Object.keys(this.state.folders).forEach(folder => (newFoldersNotNull[folder] = this.state.folders[folder]));
         }
         else {
             newFoldersNotNull = _newFolders;
@@ -641,7 +645,8 @@ class FileBrowser extends react_1.Component {
     }
     readDirSerial(adapter, relPath) {
         return new Promise((resolve, reject) => {
-            if (this.browseList) { // if component still mounted
+            if (this.browseList) {
+                // if component still mounted
                 this.browseList.push({
                     resolve: resolve,
                     reject,
@@ -665,9 +670,11 @@ class FileBrowser extends react_1.Component {
                 this.setState({ queueLength: this.browseList.length });
             }
             this.browseList[0].processing = true;
-            this.props.socket.readDir(this.browseList[0].adapter, this.browseList[0].relPath)
+            this.props.socket
+                .readDir(this.browseList[0].adapter, this.browseList[0].relPath)
                 .then(files => {
-                if (this.browseList) { // if component still mounted
+                if (this.browseList) {
+                    // if component still mounted
                     const item = this.browseList.shift();
                     if (item) {
                         const resolve = item.resolve;
@@ -695,7 +702,8 @@ class FileBrowser extends react_1.Component {
                 }
             })
                 .catch(e => {
-                if (this.browseList) { // if component still mounted
+                if (this.browseList) {
+                    // if component still mounted
                     const item = this.browseList.shift();
                     if (item) {
                         const reject = item.reject;
@@ -828,7 +836,10 @@ class FileBrowser extends react_1.Component {
                     level,
                 };
                 if (this.state.restrictToFolder) {
-                    if (item.folder && (item.id.startsWith(`${this.state.restrictToFolder}/`) || item.id === this.state.restrictToFolder || this.state.restrictToFolder.startsWith(`${item.id}/`))) {
+                    if (item.folder &&
+                        (item.id.startsWith(`${this.state.restrictToFolder}/`) ||
+                            item.id === this.state.restrictToFolder ||
+                            this.state.restrictToFolder.startsWith(`${item.id}/`))) {
                         _folders.push(item);
                     }
                     else if (item.id.startsWith(`${this.state.restrictToFolder}/`)) {
@@ -836,7 +847,10 @@ class FileBrowser extends react_1.Component {
                     }
                 }
                 else if (this.limitToPath) {
-                    if (item.folder && (item.id.startsWith(`${this.limitToPath}/`) || item.id === this.limitToPath || this.limitToPath.startsWith(`${item.id}/`))) {
+                    if (item.folder &&
+                        (item.id.startsWith(`${this.limitToPath}/`) ||
+                            item.id === this.limitToPath ||
+                            this.limitToPath.startsWith(`${item.id}/`))) {
                         _folders.push(item);
                     }
                     else if (item.id.startsWith(`${this.limitToPath}/`)) {
@@ -873,7 +887,9 @@ class FileBrowser extends react_1.Component {
             if (!item.temp) {
                 this.browseFolder(item.id)
                     .then(folders => this.setState({ expanded, folders }))
-                    .catch(err => window.alert(err === NOT_FOUND ? this.props.t('ra_Cannot find "%s"', item.id) : this.props.t('ra_Cannot read "%s"', item.id)));
+                    .catch(err => window.alert(err === NOT_FOUND
+                    ? this.props.t('ra_Cannot find "%s"', item.id)
+                    : this.props.t('ra_Cannot read "%s"', item.id)));
             }
             else {
                 this.setState({ expanded });
@@ -921,7 +937,8 @@ class FileBrowser extends react_1.Component {
             if (this.props.onSelect) {
                 const ext = Utils_1.default.getFileExtension(id);
                 if ((!this.props.filterFiles || (ext && this.props.filterFiles.includes(ext))) &&
-                    (!this.state.filterByType || (ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(ext)))) {
+                    (!this.state.filterByType ||
+                        (ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(ext)))) {
                     this.props.onSelect(id, false, !!this.state.folders[id]);
                 }
                 else {
@@ -944,34 +961,41 @@ class FileBrowser extends react_1.Component {
         if (this.state.viewType === TABLE &&
             this.state.filterEmpty &&
             (!this.state.folders[item.id] || !this.state.folders[item.id].length) &&
-            item.id !== USER_DATA && !item.temp) {
+            item.id !== USER_DATA &&
+            !item.temp) {
             return null;
         }
-        const Icon = expanded ? IconOpen_1.default : IconClosed_1.default;
+        const IconEl = expanded ? IconOpen_1.default : IconClosed_1.default;
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
         const isUserData = item.name === USER_DATA;
         const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
         return react_1.default.createElement("div", { key: item.id, id: item.id, style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px` } : {}, onClick: e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id)), onDoubleClick: e => this.state.viewType === TABLE && this.toggleFolder(item, e), title: this.getText(item.title), className: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFolder${this.state.viewType}`], this.state.selected === item.id && this.props.classes.itemSelected, item.temp && this.props.classes.itemFolderTemp) },
-            react_1.default.createElement(Icon, { className: Utils_1.default.clsx(this.props.classes[`itemFolderIcon${this.state.viewType}`], isSpecialData && this.props.classes.specialFolder), onClick: this.state.viewType === TABLE ? e => this.toggleFolder(item, e) : undefined }),
+            react_1.default.createElement(IconEl, { className: Utils_1.default.clsx(this.props.classes[`itemFolderIcon${this.state.viewType}`], isSpecialData && this.props.classes.specialFolder), onClick: this.state.viewType === TABLE ? e => this.toggleFolder(item, e) : undefined }),
             react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes[`itemName${this.state.viewType}`], this.props.classes[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
             react_1.default.createElement(material_1.Hidden, { smDown: true },
-                react_1.default.createElement("div", { className: this.props.classes[`itemSize${this.state.viewType}`] }, this.state.viewType === TABLE && this.state.folders[item.id] ? this.state.folders[item.id].length : '')),
+                react_1.default.createElement("div", { className: this.props.classes[`itemSize${this.state.viewType}`] }, this.state.viewType === TABLE && this.state.folders[item.id]
+                    ? this.state.folders[item.id].length
+                    : '')),
             react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
-            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ? react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null),
-            this.state.viewType === TABLE && this.props.allowDownload ? react_1.default.createElement("div", { className: this.props.classes[`itemDownloadEmpty${this.state.viewType}`] }) : null,
-            this.state.viewType === TABLE && this.props.allowDelete && this.state.folders[item.id] && this.state.folders[item.id].length ?
-                react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
-                        e.stopPropagation();
-                        if (this.suppressDeleteConfirm > Date.now()) {
-                            this.deleteItem(item.id);
-                        }
-                        else {
-                            this.setState({ deleteItem: item.id });
-                        }
-                    }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
-                    react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))
-                :
-                    (this.state.viewType === TABLE && this.props.allowDelete ? react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null));
+            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ?
+                react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null),
+            this.state.viewType === TABLE && this.props.allowDownload ?
+                react_1.default.createElement("div", { className: this.props.classes[`itemDownloadEmpty${this.state.viewType}`] }) : null,
+            this.state.viewType === TABLE &&
+                this.props.allowDelete &&
+                this.state.folders[item.id] &&
+                this.state.folders[item.id].length ? react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
+                    e.stopPropagation();
+                    if (this.suppressDeleteConfirm > Date.now()) {
+                        this.deleteItem(item.id);
+                    }
+                    else {
+                        this.setState({ deleteItem: item.id });
+                    }
+                }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
+                react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" })) :
+                this.state.viewType === TABLE && this.props.allowDelete ?
+                    react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null);
     }
     renderBackFolder() {
         return react_1.default.createElement("div", { key: this.state.currentDir, id: this.state.currentDir, onClick: e => this.changeFolder(e), title: this.props.t('ra_Back to %s', getParentDir(this.state.currentDir)), className: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFolder${this.state.viewType}`]) },
@@ -983,7 +1007,7 @@ class FileBrowser extends react_1.Component {
         return react_1.default.createElement("div", { className: this.props.classes[`itemSize${this.state.viewType}`] }, size || size === 0 ? Utils_1.default.formatBytes(size) : '');
     }
     formatAcl(acl) {
-        let access = acl && (acl.permissions || acl.file);
+        const access = acl && (acl.permissions || acl.file);
         let accessStr;
         if (access) {
             accessStr = access.toString(16).padStart(3, '0');
@@ -1040,7 +1064,9 @@ class FileBrowser extends react_1.Component {
                     this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
                 }
                 else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
-                    (!this.state.filterByType || (item.ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                    (!this.state.filterByType ||
+                        (item.ext &&
+                            FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                     this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
                 }
             }, onClick: e => this.select(item.id, e), style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px)` } : {}, className: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFile${this.state.viewType}`], this.state.selected === item.id && this.props.classes.itemSelected) },
@@ -1067,8 +1093,11 @@ class FileBrowser extends react_1.Component {
                         if (!this.props.onSelect) {
                             this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
                         }
-                        else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
-                            (!this.state.filterByType || (item.ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                        else if ((!this.props.filterFiles ||
+                            (item.ext && this.props.filterFiles.includes(item.ext))) &&
+                            (!this.state.filterByType ||
+                                (item.ext &&
+                                    FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                             this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
                         }
                     }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
@@ -1083,23 +1112,19 @@ class FileBrowser extends react_1.Component {
                 this.props.allowDelete &&
                 item.id !== 'vis.0/' &&
                 item.id !== 'vis-2.0/' &&
-                item.id !== USER_DATA
-                ?
-                    react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
-                            e.stopPropagation();
-                            if (this.suppressDeleteConfirm > Date.now()) {
-                                this.deleteItem(item.id);
-                            }
-                            else {
-                                this.setState({ deleteItem: item.id });
-                            }
-                        }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
-                        react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))
+                item.id !== USER_DATA ? react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
+                    e.stopPropagation();
+                    if (this.suppressDeleteConfirm > Date.now()) {
+                        this.deleteItem(item.id);
+                    }
+                    else {
+                        this.setState({ deleteItem: item.id });
+                    }
+                }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
+                react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))
                 :
                     (this.state.viewType === TABLE && this.props.allowDelete ?
-                        react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] })
-                        :
-                            null));
+                        react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null));
     }
     renderItems(folderId) {
         if (this.state.folders && this.state.folders[folderId]) {
@@ -1114,7 +1139,9 @@ class FileBrowser extends react_1.Component {
                         res.push(this.renderFolder(item));
                     }
                     else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
-                        (!this.state.filterByType || (item.ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                        (!this.state.filterByType ||
+                            (item.ext &&
+                                FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                         res.push(this.renderFile(item));
                     }
                 });
@@ -1134,7 +1161,7 @@ class FileBrowser extends react_1.Component {
                     if (this.state.folders[item.id] && expanded) {
                         const items = this.renderItems(item.id);
                         if (Array.isArray(items)) {
-                            items.forEach(item => totalResult.push(item));
+                            items.forEach(_item => totalResult.push(_item));
                         }
                         else {
                             totalResult.push(items);
@@ -1142,7 +1169,9 @@ class FileBrowser extends react_1.Component {
                     }
                 }
                 else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
-                    (!this.state.filterByType || (item.ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                    (!this.state.filterByType ||
+                        (item.ext &&
+                            FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                     totalResult.push(this.renderFile(item));
                 }
             });
@@ -1151,16 +1180,23 @@ class FileBrowser extends react_1.Component {
         return react_1.default.createElement("div", { style: { position: 'relative' } },
             react_1.default.createElement(material_1.CircularProgress, { key: folderId, color: "secondary", size: 24 }),
             react_1.default.createElement("div", { style: {
-                    position: 'absolute', zIndex: 2, top: 4, width: 24, textAlign: 'center',
+                    position: 'absolute',
+                    zIndex: 2,
+                    top: 4,
+                    width: 24,
+                    textAlign: 'center',
                 } }, this.state.queueLength));
     }
     renderToolbar() {
-        const IconType = this.props.showTypeSelector ?
-            (FILE_TYPE_ICONS[this.state.filterByType || 'all'] || FILE_TYPE_ICONS.all) :
-            null;
+        const IconType = this.props.showTypeSelector
+            ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] ||
+                FILE_TYPE_ICONS.all
+            : null;
         const isInFolder = this.findFirstFolder(this.state.selected);
         return react_1.default.createElement(material_1.Toolbar, { key: "toolbar", variant: "dense" },
-            this.props.allowNonRestricted && this.props.restrictToFolder ? react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.state.restrictToFolder ? this.props.t('ra_Show all folders') : this.props.t('ra_Restrict to folder'), className: Utils_1.default.clsx(this.props.classes.menuButton, this.state.restrictToFolder && this.props.classes.menuButtonRestrictActive), "aria-label": "restricted to folder", onClick: () => this.setState({
+            this.props.allowNonRestricted && this.props.restrictToFolder ? react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.state.restrictToFolder
+                    ? this.props.t('ra_Show all folders')
+                    : this.props.t('ra_Restrict to folder'), className: Utils_1.default.clsx(this.props.classes.menuButton, this.state.restrictToFolder && this.props.classes.menuButtonRestrictActive), "aria-label": "restricted to folder", onClick: () => this.setState({
                     restrictToFolder: (this.state.restrictToFolder ? '' : this.props.restrictToFolder) || '',
                     loadAllFolders: true,
                 }), size: "small" },
@@ -1257,10 +1293,12 @@ class FileBrowser extends react_1.Component {
                 window.alert(this.props.t('ra_Invalid parent folder!'));
                 return null;
             }
-            return react_1.default.createElement(TextInput_1.default, { key: "inputDialog", applyText: this.props.t('ra_Create'), cancelText: this.props.t('ra_Cancel'), titleText: this.props.t('ra_Create new folder in %s', this.state.selected), promptText: this.props.t('ra_If no file will be created in the folder, it will disappear after the browser closed'), labelText: this.props.t('ra_Folder name'), verify: (text) => (this.state.folders[parentFolder].find(item => item.name === text) ? '' : this.props.t('ra_Duplicate name')), onClose: (name) => {
+            return react_1.default.createElement(TextInput_1.default, { key: "inputDialog", applyText: this.props.t('ra_Create'), cancelText: this.props.t('ra_Cancel'), titleText: this.props.t('ra_Create new folder in %s', this.state.selected), promptText: this.props.t('ra_If no file will be created in the folder, it will disappear after the browser closed'), labelText: this.props.t('ra_Folder name'), verify: (text) => (this.state.folders[parentFolder].find(item => item.name === text)
+                    ? ''
+                    : this.props.t('ra_Duplicate name')), onClose: (name) => {
                     if (name) {
                         const folders = {};
-                        Object.keys(this.state.folders).forEach(folder => folders[folder] = this.state.folders[folder]);
+                        Object.keys(this.state.folders).forEach(folder => (folders[folder] = this.state.folders[folder]));
                         const parent = this.findItem(parentFolder);
                         const id = `${parentFolder}/${name}`;
                         folders[parentFolder].push({
@@ -1283,7 +1321,7 @@ class FileBrowser extends react_1.Component {
                     else {
                         this.setState({ addFolder: false });
                     }
-                }, replace: (text) => text.replace(/[^-_\w\d]/, '_') });
+                }, replace: (text) => text.replace(/[^-_\w]/, '_') });
         }
         return null;
     }
@@ -1297,11 +1335,15 @@ class FileBrowser extends react_1.Component {
             }
         }, 100);
     }
-    uploadFile(fileName, data) {
+    async uploadFile(fileName, data) {
         const parts = fileName.split('/');
         const adapter = parts.shift();
-        return this.props.socket.writeFile64(adapter || '', parts.join('/'), data)
-            .catch(e => window.alert(`Cannot write file: ${e}`));
+        try {
+            return await this.props.socket.writeFile64(adapter || '', parts.join('/'), data);
+        }
+        catch (e) {
+            return window.alert(`Cannot write file: ${e}`);
+        }
     }
     findFirstFolder(id) {
         let parentFolder = id;
@@ -1313,10 +1355,14 @@ class FileBrowser extends react_1.Component {
             parentFolder = '';
             while (parts.length) {
                 const _item = this.findItem(parts.join('/'));
-                if (_item && _item.folder) {
+                if (_item === null || _item === void 0 ? void 0 : _item.folder) {
                     parentFolder = parts.join('/');
                     break;
                 }
+                parts.pop();
+            }
+            if (!parts.length) {
+                return null;
             }
         }
         return parentFolder;
@@ -1361,7 +1407,8 @@ class FileBrowser extends react_1.Component {
                                                         if (!expanded.includes(parentFolder)) {
                                                             expanded.push(parentFolder);
                                                             expanded.sort();
-                                                            (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                                                            (window._localStorage ||
+                                                                window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
                                                         }
                                                         this.setState({ folders, expanded }, () => this.select(id));
                                                     }), 500);
@@ -1373,13 +1420,14 @@ class FileBrowser extends react_1.Component {
                             };
                             reader.readAsArrayBuffer(file);
                         });
-                    } }, ({ getRootProps, getInputProps }) => (react_1.default.createElement("div", Object.assign({ className: Utils_1.default.clsx(this.props.classes.uploadDiv, this.state.uploadFile === 'dragging' && this.props.classes.uploadDivDragging) }, getRootProps()),
+                    } }, ({ getRootProps, getInputProps }) => react_1.default.createElement("div", Object.assign({ className: Utils_1.default.clsx(this.props.classes.uploadDiv, this.state.uploadFile === 'dragging' && this.props.classes.uploadDivDragging) }, getRootProps()),
                     react_1.default.createElement("input", Object.assign({}, getInputProps())),
                     react_1.default.createElement("div", { className: this.props.classes.uploadCenterDiv },
                         react_1.default.createElement("div", { className: this.props.classes.uploadCenterTextAndIcon },
                             react_1.default.createElement(icons_material_1.Publish, { className: this.props.classes.uploadCenterIcon }),
-                            react_1.default.createElement("div", { className: this.props.classes.uploadCenterText }, this.state.uploadFile === 'dragging' ? this.props.t('ra_Drop file here') :
-                                this.props.t('ra_Place your files here or click here to open the browse dialog'))))))),
+                            react_1.default.createElement("div", { className: this.props.classes.uploadCenterText }, this.state.uploadFile === 'dragging'
+                                ? this.props.t('ra_Drop file here')
+                                : this.props.t('ra_Place your files here or click here to open the browse dialog')))))),
             ];
         }
         return null;
@@ -1387,14 +1435,15 @@ class FileBrowser extends react_1.Component {
     deleteRecursive(id) {
         const item = this.findItem(id);
         if (item === null || item === void 0 ? void 0 : item.folder) {
-            return (this.state.folders[id] ? Promise.all(this.state.folders[id].map(_item => this.deleteRecursive(_item.id))) : Promise.resolve())
+            return (this.state.folders[id]
+                ? Promise.all(this.state.folders[id].map(_item => this.deleteRecursive(_item.id)))
+                : Promise.resolve())
                 .then(() => {
                 // If it is a folder of second level
                 if (item.level >= 1) {
                     const parts = id.split('/');
                     const adapter = parts.shift();
-                    this.props.socket.deleteFolder(adapter || '', parts.join('/'))
-                        .then(() => {
+                    this.props.socket.deleteFolder(adapter || '', parts.join('/')).then(() => {
                         // remove this folder
                         const folders = JSON.parse(JSON.stringify(this.state.folders));
                         delete folders[item.id];
@@ -1415,7 +1464,8 @@ class FileBrowser extends react_1.Component {
         const parts = id.split('/');
         const adapter = parts.shift();
         if (parts.length) {
-            return this.props.socket.deleteFile(adapter || '', parts.join('/'))
+            return this.props.socket
+                .deleteFile(adapter || '', parts.join('/'))
                 .catch(e => window.alert(`Cannot delete file: ${e}`));
         }
         return Promise.resolve();
@@ -1522,7 +1572,11 @@ class FileBrowser extends react_1.Component {
                     if (!this.state.folders[folder]) {
                         this.browseFolder(folder)
                             .then(folders => this.setState({ folders }, () => resolve(true)))
-                            .catch(err => this.setState({ errorText: err === NOT_FOUND ? this.props.t('ra_Cannot find "%s"', folder) : this.props.t('ra_Cannot read "%s"', folder) }));
+                            .catch(err => this.setState({
+                            errorText: err === NOT_FOUND
+                                ? this.props.t('ra_Cannot find "%s"', folder)
+                                : this.props.t('ra_Cannot read "%s"', folder),
+                        }));
                     }
                     else {
                         resolve(true);
@@ -1536,7 +1590,9 @@ class FileBrowser extends react_1.Component {
         }, 100);
     }
     renderBreadcrumb() {
-        const parts = this.state.currentDir.startsWith('/') ? this.state.currentDir.split('/') : (`/${this.state.currentDir}`).split('/');
+        const parts = this.state.currentDir.startsWith('/')
+            ? this.state.currentDir.split('/')
+            : `/${this.state.currentDir}`.split('/');
         const p = [];
         return react_1.default.createElement(material_1.Breadcrumbs, { style: { paddingLeft: 8 } }, parts.map((part, i) => {
             part && p.push(part);
@@ -1550,10 +1606,10 @@ class FileBrowser extends react_1.Component {
     renderPath() {
         return react_1.default.createElement("div", { key: "path", className: this.props.classes.pathDiv }, this.state.pathFocus ?
             react_1.default.createElement(material_1.Input, { value: this.state.path, onKeyDown: e => {
-                    if (e.keyCode === 13) {
+                    if (e.key === 'Enter') {
                         this.changeToPath();
                     }
-                    else if (e.keyCode === 27) {
+                    else if (e.key === 'Escape') {
                         this.setState({ pathFocus: false });
                     }
                 }, endAdornment: react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => this.changeToPath() },
@@ -1570,7 +1626,8 @@ class FileBrowser extends react_1.Component {
             setTimeout(() => {
                 this.setState({ loadAllFolders: false, folders: {} }, () => {
                     this.foldersLoading = false;
-                    this.loadFolders();
+                    this.loadFolders()
+                        .catch(error => console.error(`Cannot load folders: ${error}`));
                 });
             }, 300);
         }
@@ -1587,13 +1644,17 @@ class FileBrowser extends react_1.Component {
                         }
                     }
                 } },
-                this.state.viewType === TABLE ? this.renderItems('/') : this.renderItems(this.state.currentDir || '/'),
-                this.state.viewType !== TABLE ? react_1.default.createElement("div", { className: this.props.classes.filesDivHint }, this.props.t('ra_select_folder_hint')) : null),
+                this.state.viewType === TABLE
+                    ? this.renderItems('/')
+                    : this.renderItems(this.state.currentDir || '/'),
+                this.state.viewType !== TABLE ? (react_1.default.createElement("div", { className: this.props.classes.filesDivHint }, this.props.t('ra_select_folder_hint'))) : null),
             this.props.allowUpload ? this.renderInputDialog() : null,
             this.props.allowUpload ? this.renderUpload() : null,
             this.props.allowDelete ? this.renderDeleteDialog() : null,
             this.props.allowView ? this.renderViewDialog() : null,
-            this.state.modalEditOfAccess && this.props.modalEditOfAccessControl ? this.props.modalEditOfAccessControl(this) : null,
+            this.state.modalEditOfAccess && this.props.modalEditOfAccessControl
+                ? this.props.modalEditOfAccessControl(this)
+                : null,
             this.renderError());
     }
 }

package/README.md

@@ -670,7 +670,7 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
 -->
 
 ## Changelog
-### 4.13.4 (2024-04-02)
+### 4.13.5 (2024-04-02)
 * (bluefox) used new connection classes
 * (bluefox) Improved the `SelectID` dialog
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "4.13.4",
+  "version": "4.13.5",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",