@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/Components/FileBrowser.js

@@ -32,7 +32,7 @@ exports.FileBrowserClass = void 0;
  *
  * MIT License
  *
- * */
+ */
 const react_1 = __importStar(require("react"));
 const react_dropzone_1 = __importDefault(require("react-dropzone"));
 const material_1 = require("@mui/material");
@@ -394,7 +394,7 @@ 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);
+        return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
     }
     if (a.folder) {
         return -1;
@@ -402,7 +402,7 @@ function sortFolders(a, b) {
     if (b.folder) {
         return 1;
     }
-    return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
+    return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
 }
 class FileBrowserClass extends react_1.Component {
     constructor(props) {
@@ -420,18 +420,23 @@ class FileBrowserClass extends react_1.Component {
             const folder = key.substring(0, pos);
             console.log(`File changed ${key}[${size}]`);
             if (this.state.folders[folder]) {
-                this._tempTimeout[folder] && clearTimeout(this._tempTimeout[folder]);
+                if (this._tempTimeout[folder]) {
+                    clearTimeout(this._tempTimeout[folder]);
+                }
                 this._tempTimeout[folder] = setTimeout(() => {
                     delete this._tempTimeout[folder];
                     this.browseFolder(folder, null, false, true)
-                        .then(folders => this.setState({ folders }));
+                        .then(folders => this.setState({ folders }))
+                        .catch(e => console.error(`Cannot read folder: ${e.message}`));
                 }, 300);
             }
         };
         this.setStateBackgroundImage = () => {
             const array = ['light', 'dark', 'colored', 'delete'];
             this.setState(({ backgroundImage }) => {
-                if (backgroundImage && array.indexOf(backgroundImage) !== -1 && array.length - 1 !== array.indexOf(backgroundImage)) {
+                if (backgroundImage &&
+                    array.indexOf(backgroundImage) !== -1 &&
+                    array.length - 1 !== array.indexOf(backgroundImage)) {
                     this.localStorage.setItem('files.backgroundImage', array[array.indexOf(backgroundImage) + 1]);
                     return { backgroundImage: array[array.indexOf(backgroundImage) + 1] };
                 }
@@ -454,7 +459,7 @@ class FileBrowserClass extends react_1.Component {
                     return null;
             }
         };
-        this.localStorage = (window._localStorage || window.localStorage);
+        this.localStorage = window._localStorage || window.localStorage;
         const expandedStr = this.localStorage.getItem('files.expanded') || '[]';
         if (this.props.limitPath) {
             const parts = this.props.limitPath.split('/');
@@ -471,7 +476,8 @@ class FileBrowserClass extends react_1.Component {
                 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}/`));
+                        id === this.limitToPath ||
+                        ((_a = this.limitToPath) === null || _a === void 0 ? void 0 : _a.startsWith(`${id}/`));
                 });
             }
         }
@@ -485,9 +491,7 @@ class FileBrowserClass extends react_1.Component {
         else {
             viewType = TABLE;
         }
-        let selected = this.props.selected ||
-            this.localStorage.getItem('files.selected') ||
-            USER_DATA;
+        let selected = this.props.selected || this.localStorage.getItem('files.selected') || USER_DATA;
         let currentDir;
         if (props.restrictToFolder) {
             selected = props.restrictToFolder;
@@ -596,20 +600,20 @@ class FileBrowserClass extends react_1.Component {
     }
     async componentDidMount() {
         this.mounted = true;
-        this.loadFolders()
-            .catch(error => console.error(`Cannot load folders: ${error}`));
+        this.loadFolders().catch(error => console.error(`Cannot load folders: ${error}`));
         this.supportSubscribes = await this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT');
         if (this.supportSubscribes) {
             await this.props.socket.subscribeFiles('*', '*', this.onFileChange);
         }
     }
     componentWillUnmount() {
-        this.supportSubscribes && this.props.socket.unsubscribeFiles('*', '*', this.onFileChange);
+        if (this.supportSubscribes) {
+            this.props.socket.unsubscribeFiles('*', '*', this.onFileChange);
+        }
         this.mounted = false;
         this.browseList = null;
         this.browseListRunning = false;
-        Object.values(this._tempTimeout)
-            .forEach(timer => timer && clearTimeout(timer));
+        Object.values(this._tempTimeout).forEach(timer => timer && clearTimeout(timer));
         this._tempTimeout = {};
     }
     browseFoldersCb(foldersList, newFoldersNotNull, cb) {
@@ -619,8 +623,8 @@ class FileBrowserClass extends react_1.Component {
         else {
             const folder = foldersList.shift();
             if (folder) {
-                this.browseFolder(folder, newFoldersNotNull)
-                    .catch((e) => console.error(`Cannot read folder ${folder}: ${e}`))
+                void this.browseFolder(folder, newFoldersNotNull)
+                    .catch((e) => console.error(`Cannot read folder ${folder}: ${e.message}`))
                     .then(() => {
                     setTimeout(() => this.browseFoldersCb(foldersList, newFoldersNotNull, cb), 0);
                 });
@@ -687,7 +691,9 @@ class FileBrowserClass extends react_1.Component {
                         item.reject = null;
                         item.adapter = null;
                         item.relPath = null;
-                        resolve && resolve(files);
+                        if (resolve) {
+                            resolve(files);
+                        }
                         this.browseListRunning = false;
                         if (this.browseList.length) {
                             if (level < 5) {
@@ -716,7 +722,9 @@ class FileBrowserClass extends react_1.Component {
                         item.reject = null;
                         item.adapter = null;
                         item.relPath = null;
-                        reject && reject(e);
+                        if (reject) {
+                            reject(e);
+                        }
                         this.browseListRunning = false;
                         if (this.browseList.length) {
                             if (level < 5) {
@@ -751,10 +759,11 @@ class FileBrowserClass extends react_1.Component {
         if (newFoldersNotNull[folderId] && !force) {
             if (!_checkEmpty) {
                 return new Promise((resolve, reject) => {
-                    Promise.all(newFoldersNotNull[folderId].filter(item => item.folder).map(item => this.browseFolder(item.id, newFoldersNotNull, true)
-                        .catch(() => undefined)))
+                    Promise.all(newFoldersNotNull[folderId]
+                        .filter(item => item.folder)
+                        .map(item => this.browseFolder(item.id, newFoldersNotNull, true).catch(() => undefined)))
                         .then(() => resolve(newFoldersNotNull))
-                        .catch(error => reject(error));
+                        .catch(error => reject(new Error(error)));
                 });
             }
             return Promise.resolve(newFoldersNotNull);
@@ -802,20 +811,24 @@ class FileBrowserClass extends react_1.Component {
                         _folders.push(item);
                     }
                 });
-                _folders.sort((a, b) => (a.id > b.id ? 1 : (a.id < b.id ? -1 : 0)));
+                _folders.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
                 if (!this.limitToObjectID || this.limitToObjectID === USER_DATA) {
-                    userData && _folders.unshift(userData);
+                    if (userData) {
+                        _folders.unshift(userData);
+                    }
                 }
                 newFoldersNotNull[folderId || '/'] = _folders;
                 if (!_checkEmpty) {
-                    return Promise.all(_folders.filter(item => item.folder)
-                        .map(item => this.browseFolder(item.id, newFoldersNotNull, true)
-                        .catch(() => undefined)))
-                        .then(() => newFoldersNotNull);
+                    return Promise.all(_folders
+                        .filter(item => item.folder)
+                        .map(item => this.browseFolder(item.id, newFoldersNotNull, true).catch(() => undefined))).then(() => newFoldersNotNull);
                 }
             }
             catch (e) {
-                this.initialReadFinished && window.alert(`Cannot read meta items: ${e}`);
+                const knownError = e;
+                if (this.initialReadFinished) {
+                    window.alert(`Cannot read meta items: ${knownError.message}`);
+                }
                 newFoldersNotNull[folderId || '/'] = [];
             }
             return newFoldersNotNull;
@@ -871,12 +884,14 @@ class FileBrowserClass extends react_1.Component {
             if (!_checkEmpty) {
                 return Promise.all(_folders
                     .filter(item => item.folder)
-                    .map(item => this.browseFolder(item.id, newFoldersNotNull, true)))
-                    .then(() => newFoldersNotNull);
+                    .map(item => this.browseFolder(item.id, newFoldersNotNull, true))).then(() => newFoldersNotNull);
             }
         }
         catch (e) {
-            this.initialReadFinished && window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${e}`);
+            const knownError = e;
+            if (this.initialReadFinished) {
+                window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${knownError === null || knownError === void 0 ? void 0 : knownError.message}`);
+            }
             newFoldersNotNull[folderId] = [];
         }
         return newFoldersNotNull;
@@ -907,7 +922,9 @@ class FileBrowserClass extends react_1.Component {
         }
     }
     changeFolder(e, folder) {
-        e && e.stopPropagation();
+        if (e) {
+            e.stopPropagation();
+        }
         this.lastSelect = Date.now();
         let _folder = folder || getParentDir(this.state.currentDir);
         if (_folder === '/') {
@@ -918,14 +935,16 @@ class FileBrowserClass extends react_1.Component {
             return this.setState({ selected: _folder });
         }
         if (_folder && !this.state.folders[_folder]) {
-            return this.browseFolder(_folder)
+            this.browseFolder(_folder)
                 .then(folders => this.setState({
                 folders,
                 path: _folder,
                 currentDir: _folder,
                 selected: _folder,
                 pathFocus: false,
-            }, () => this.props.onSelect && this.props.onSelect('')));
+            }, () => this.props.onSelect && this.props.onSelect('')))
+                .catch(_e => console.error(`Cannot read folder: ${_e.message}`));
+            return;
         }
         return this.setState({
             currentDir: _folder,
@@ -935,7 +954,9 @@ class FileBrowserClass extends react_1.Component {
         }, () => this.props.onSelect && this.props.onSelect(''));
     }
     select(id, e, cb) {
-        e && e.stopPropagation();
+        if (e) {
+            e.stopPropagation();
+        }
         this.lastSelect = Date.now();
         this.localStorage.setItem('files.selected', id);
         this.setState({ selected: id, path: id, pathFocus: false }, () => {
@@ -950,7 +971,9 @@ class FileBrowserClass extends react_1.Component {
                     this.props.onSelect('');
                 }
             }
-            cb && cb();
+            if (cb) {
+                cb();
+            }
         });
     }
     getText(text) {
@@ -974,21 +997,21 @@ class FileBrowserClass extends react_1.Component {
         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(material_1.Box, { component: "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: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : {}, item.temp ? styles.itemFolderTemp : {}) },
-            react_1.default.createElement(IconEl, { style: Utils_1.default.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`], isSpecialData && styles.specialFolder), onClick: this.state.viewType === TABLE ? (e) => this.toggleFolder(item, e) : undefined }),
+        return (react_1.default.createElement(material_1.Box, { component: "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: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : {}, item.temp ? styles.itemFolderTemp : {}) },
+            react_1.default.createElement(IconEl, { style: Utils_1.default.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`], isSpecialData && styles.specialFolder), onClick: this.state.viewType === TABLE
+                    ? (e) => this.toggleFolder(item, e)
+                    : undefined }),
             react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
             react_1.default.createElement(material_1.Box, { component: "div", style: styles[`itemSize${this.state.viewType}`], sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.state.folders[item.id]
                 ? this.state.folders[item.id].length
                 : ''),
             react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
-            this.state.viewType === TABLE && this.props.expertMode ?
-                react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign({}, styles.itemDeleteButtonTable), { display: { md: 'inline-block', sm: 'none' } }) }) : null,
-            this.state.viewType === TABLE && this.props.allowDownload ?
-                react_1.default.createElement("div", { style: styles[`itemDownloadEmpty${this.state.viewType}`] }) : null,
+            this.state.viewType === TABLE && this.props.expertMode ? (react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign({}, styles.itemDeleteButtonTable), { display: { md: 'inline-block', sm: 'none' } }) })) : null,
+            this.state.viewType === TABLE && this.props.allowDownload ? (react_1.default.createElement("div", { style: styles[`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 => {
+                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);
@@ -997,21 +1020,19 @@ class FileBrowserClass extends react_1.Component {
                         this.setState({ deleteItem: item.id });
                     }
                 }, sx: styles[`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(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] }) : null);
+                react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))) : this.state.viewType === TABLE && this.props.allowDelete ? (react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] })) : null));
     }
     renderBackFolder() {
-        return react_1.default.createElement(material_1.Box, { component: "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: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`]) },
+        return (react_1.default.createElement(material_1.Box, { component: "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: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`]) },
             react_1.default.createElement(IconClosed_1.default, { style: styles[`itemFolderIcon${this.state.viewType}`] }),
             react_1.default.createElement(icons_material_1.ArrowBack, { sx: styles.itemFolderIconBack }),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, ".."));
+            react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, "..")));
     }
     formatSize(size) {
-        return react_1.default.createElement("div", { style: styles[`itemSize${this.state.viewType}`] }, size || size === 0 ? Utils_1.default.formatBytes(size) : '');
+        return (react_1.default.createElement("div", { style: styles[`itemSize${this.state.viewType}`] }, size || size === 0 ? Utils_1.default.formatBytes(size) : ''));
     }
     formatAcl(acl) {
-        const access = acl ? (acl.permissions || acl.file) : 0;
+        const access = acl ? acl.permissions || acl.file : 0;
         let accessStr;
         if (access) {
             accessStr = access.toString(16).padStart(3, '0');
@@ -1019,7 +1040,7 @@ class FileBrowserClass extends react_1.Component {
         else {
             accessStr = '';
         }
-        return react_1.default.createElement("div", { style: styles[`itemAccess${this.state.viewType}`] }, this.props.modalEditOfAccessControl ? react_1.default.createElement(material_1.IconButton, { size: "large", onClick: () => this.setState({ modalEditOfAccess: true }), sx: styles[`itemAclButton${this.state.viewType}`] }, accessStr || '---') : accessStr || '---');
+        return (react_1.default.createElement("div", { style: styles[`itemAccess${this.state.viewType}`] }, this.props.modalEditOfAccessControl ? (react_1.default.createElement(material_1.IconButton, { size: "large", onClick: () => this.setState({ modalEditOfAccess: true }), sx: styles[`itemAclButton${this.state.viewType}`] }, accessStr || '---')) : (accessStr || '---')));
     }
     getFileIcon(ext) {
         switch (ext) {
@@ -1062,7 +1083,7 @@ class FileBrowserClass extends react_1.Component {
     renderFile(item) {
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
         const ext = Utils_1.default.getFileExtension(item.name);
-        return react_1.default.createElement(material_1.Box, { component: "div", key: item.id, id: item.id, onDoubleClick: e => {
+        return (react_1.default.createElement(material_1.Box, { component: "div", key: item.id, id: item.id, onDoubleClick: e => {
                 e.stopPropagation();
                 if (!this.props.onSelect) {
                     this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
@@ -1074,46 +1095,38 @@ class FileBrowserClass extends react_1.Component {
                     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: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFile${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : undefined) },
-            ext && FileViewer_1.EXTENSIONS.images.includes(ext) ?
-                this.state.fileErrors.includes(item.id) ?
-                    react_1.default.createElement(IconNoIcon_1.default, { style: Object.assign(Object.assign(Object.assign({}, styles[`itemImage${this.state.viewType}`]), this.getStyleBackgroundImage()), styles[`itemNoImage${this.state.viewType}`]) }) :
-                    react_1.default.createElement(Icon_1.default, { onError: e => {
-                            e.target.onerror = null;
-                            const fileErrors = [...this.state.fileErrors];
-                            if (!fileErrors.includes(item.id)) {
-                                fileErrors.push(item.id);
-                                this.setState({ fileErrors });
-                            }
-                        }, style: Object.assign(Object.assign({}, styles[`itemImage${this.state.viewType}`]), this.getStyleBackgroundImage()), src: this.imagePrefix + item.id, alt: item.name })
-                :
-                    this.getFileIcon(ext),
+            ext && FileViewer_1.EXTENSIONS.images.includes(ext) ? (this.state.fileErrors.includes(item.id) ? (react_1.default.createElement(IconNoIcon_1.default, { style: Object.assign(Object.assign(Object.assign({}, styles[`itemImage${this.state.viewType}`]), this.getStyleBackgroundImage()), styles[`itemNoImage${this.state.viewType}`]) })) : (react_1.default.createElement(Icon_1.default, { onError: e => {
+                    e.target.onerror = null;
+                    const fileErrors = [...this.state.fileErrors];
+                    if (!fileErrors.includes(item.id)) {
+                        fileErrors.push(item.id);
+                        this.setState({ fileErrors });
+                    }
+                }, style: Object.assign(Object.assign({}, styles[`itemImage${this.state.viewType}`]), this.getStyleBackgroundImage()), src: this.imagePrefix + item.id, alt: item.name }))) : (this.getFileIcon(ext)),
             react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemName${this.state.viewType}`] }, item.name),
             react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.formatSize(item.size)),
             react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode && FileBrowserClass.getEditFile(ext) ?
-                react_1.default.createElement(material_1.IconButton, { "aria-label": "edit", onClick: e => {
-                        e.stopPropagation();
-                        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)))) {
-                            this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
-                        }
-                    }, sx: styles.itemDeleteButtonTable, size: "large" },
-                    react_1.default.createElement(icons_material_1.Edit, { fontSize: "small" }))
-                :
-                    react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] })),
-            this.state.viewType === TABLE && this.props.allowDownload ? react_1.default.createElement(material_1.Box, { component: "a", className: "MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge", sx: styles.itemDownloadButtonTable, tabIndex: 0, download: item.id, href: this.imagePrefix + item.id, onClick: e => e.stopPropagation() },
-                react_1.default.createElement(icons_material_1.SaveAlt, null)) : null,
+            react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode && FileBrowserClass.getEditFile(ext) ? (react_1.default.createElement(material_1.IconButton, { "aria-label": "edit", onClick: e => {
+                    e.stopPropagation();
+                    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)))) {
+                        this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
+                    }
+                }, sx: styles.itemDeleteButtonTable, size: "large" },
+                react_1.default.createElement(icons_material_1.Edit, { fontSize: "small" }))) : (react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] }))),
+            this.state.viewType === TABLE && this.props.allowDownload ? (react_1.default.createElement(material_1.Box, { component: "a", className: "MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge", sx: styles.itemDownloadButtonTable, tabIndex: 0, download: item.id, href: this.imagePrefix + item.id, onClick: e => e.stopPropagation() },
+                react_1.default.createElement(icons_material_1.SaveAlt, null))) : null,
             this.state.viewType === TABLE &&
                 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 => {
+                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);
@@ -1122,10 +1135,7 @@ class FileBrowserClass extends react_1.Component {
                         this.setState({ deleteItem: item.id });
                     }
                 }, sx: styles[`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(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] }) : null));
+                react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))) : this.state.viewType === TABLE && this.props.allowDelete ? (react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] })) : null));
     }
     renderItems(folderId) {
         if (this.state.folders && this.state.folders[folderId]) {
@@ -1178,7 +1188,7 @@ class FileBrowserClass extends react_1.Component {
             });
             return totalResult;
         }
-        return react_1.default.createElement("div", { style: { position: 'relative' } },
+        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',
@@ -1186,25 +1196,24 @@ class FileBrowserClass extends react_1.Component {
                     top: 4,
                     width: 24,
                     textAlign: 'center',
-                } }, this.state.queueLength));
+                } }, this.state.queueLength)));
     }
     renderToolbar() {
         const IconType = this.props.showTypeSelector
-            ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] ||
-                FILE_TYPE_ICONS.all
+            ? 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
+        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'), style: Object.assign(Object.assign({}, styles.menuButton), (this.state.restrictToFolder ? styles.menuButtonRestrictActive : undefined)), "aria-label": "restricted to folder", onClick: () => this.setState({
                     restrictToFolder: (this.state.restrictToFolder ? '' : this.props.restrictToFolder) || '',
                     loadAllFolders: true,
                 }), size: "small" },
-                react_1.default.createElement(icons_material_1.FolderSpecial, { fontSize: "small" })) : null,
-            this.props.showExpertButton ? react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Toggle expert mode'), style: Object.assign(Object.assign({}, styles.menuButton), (this.state.expertMode ? styles.menuButtonExpertActive : undefined)), "aria-label": "expert mode", onClick: () => this.setState({ expertMode: !this.state.expertMode }), size: "small" },
-                react_1.default.createElement(IconExpert_1.default, null)) : null,
-            this.props.showViewTypeButton ? react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Toggle view mode'), style: styles.menuButton, "aria-label": "view mode", onClick: () => {
+                react_1.default.createElement(icons_material_1.FolderSpecial, { fontSize: "small" }))) : null,
+            this.props.showExpertButton ? (react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Toggle expert mode'), style: Object.assign(Object.assign({}, styles.menuButton), (this.state.expertMode ? styles.menuButtonExpertActive : undefined)), "aria-label": "expert mode", onClick: () => this.setState({ expertMode: !this.state.expertMode }), size: "small" },
+                react_1.default.createElement(IconExpert_1.default, null))) : null,
+            this.props.showViewTypeButton ? (react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Toggle view mode'), style: styles.menuButton, "aria-label": "view mode", onClick: () => {
                     const viewType = this.state.viewType === TABLE ? TILE : TABLE;
                     this.localStorage.setItem('files.viewType', viewType);
                     let currentDir = this.state.selected;
@@ -1216,7 +1225,7 @@ class FileBrowserClass extends react_1.Component {
                             this.scrollToSelected();
                         }
                     });
-                }, size: "small" }, this.state.viewType !== TABLE ? react_1.default.createElement(icons_material_1.List, { fontSize: "small" }) : react_1.default.createElement(icons_material_1.ViewModule, { fontSize: "small" })) : null,
+                }, size: "small" }, this.state.viewType !== TABLE ? react_1.default.createElement(icons_material_1.List, { fontSize: "small" }) : react_1.default.createElement(icons_material_1.ViewModule, { fontSize: "small" }))) : null,
             react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Hide empty folders'), style: styles.menuButton, color: this.state.filterEmpty ? 'secondary' : 'inherit', "aria-label": "filter empty", onClick: () => {
                     this.localStorage.setItem('file.empty', this.state.filterEmpty ? 'false' : 'true');
                     this.setState({ filterEmpty: !this.state.filterEmpty });
@@ -1224,24 +1233,24 @@ class FileBrowserClass extends react_1.Component {
                 react_1.default.createElement(icons_material_1.FolderOpen, { fontSize: "small" })),
             react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Reload files'), style: styles.menuButton, color: "inherit", "aria-label": "reload files", onClick: () => this.setState({ folders: {} }, () => this.loadFolders()), size: "small" },
                 react_1.default.createElement(icons_material_1.Refresh, { fontSize: "small" })),
-            this.props.allowCreateFolder ? react_1.default.createElement(material_1.IconButton, { edge: "start", disabled: !this.state.selected ||
+            this.props.allowCreateFolder ? (react_1.default.createElement(material_1.IconButton, { edge: "start", disabled: !this.state.selected ||
                     !isInFolder ||
                     (!!this.limitToPath &&
                         !this.state.selected.startsWith(`${this.limitToPath}/`) &&
                         this.limitToPath !== this.state.selected), title: this.props.t('ra_Create folder'), style: styles.menuButton, color: "inherit", "aria-label": "add folder", onClick: () => this.setState({ addFolder: true }), size: "small" },
-                react_1.default.createElement(icons_material_1.CreateNewFolder, { fontSize: "small" })) : null,
-            this.props.allowUpload ? react_1.default.createElement(material_1.IconButton, { edge: "start", disabled: !this.state.selected ||
+                react_1.default.createElement(icons_material_1.CreateNewFolder, { fontSize: "small" }))) : null,
+            this.props.allowUpload ? (react_1.default.createElement(material_1.IconButton, { edge: "start", disabled: !this.state.selected ||
                     !isInFolder ||
                     (!!this.limitToPath &&
                         !this.state.selected.startsWith(`${this.limitToPath}/`) &&
                         this.limitToPath !== this.state.selected), title: this.props.t('ra_Upload file'), style: styles.menuButton, color: "inherit", "aria-label": "upload file", onClick: () => this.setState({ uploadFile: true }), size: "small" },
-                react_1.default.createElement(icons_material_1.Publish, { fontSize: "small" })) : null,
-            this.props.showTypeSelector && IconType ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files'), componentsProps: { popper: { sx: styles.tooltip } } },
+                react_1.default.createElement(icons_material_1.Publish, { fontSize: "small" }))) : null,
+            this.props.showTypeSelector && IconType ? (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files'), slotProps: { popper: { sx: styles.tooltip } } },
                 react_1.default.createElement(material_1.IconButton, { size: "small", onClick: e => this.setState({ showTypesMenu: e.target }) },
-                    react_1.default.createElement(IconType, { fontSize: "small" }))) : null,
-            this.state.showTypesMenu ? react_1.default.createElement(material_1.Menu, { open: !0, anchorEl: this.state.showTypesMenu, onClose: () => this.setState({ showTypesMenu: null }) }, Object.keys(FILE_TYPE_ICONS).map(type => {
+                    react_1.default.createElement(IconType, { fontSize: "small" })))) : null,
+            this.state.showTypesMenu ? (react_1.default.createElement(material_1.Menu, { open: !0, anchorEl: this.state.showTypesMenu, onClose: () => this.setState({ showTypesMenu: null }) }, Object.keys(FILE_TYPE_ICONS).map(type => {
                 const MyIcon = FILE_TYPE_ICONS[type];
-                return react_1.default.createElement(material_1.MenuItem, { key: type, selected: this.state.filterByType === type, onClick: () => {
+                return (react_1.default.createElement(material_1.MenuItem, { key: type, selected: this.state.filterByType === type, onClick: () => {
                         if (type === 'all') {
                             this.localStorage.removeItem('files.filterByType');
                             this.setState({ filterByType: '', showTypesMenu: null });
@@ -1253,12 +1262,12 @@ class FileBrowserClass extends react_1.Component {
                     } },
                     react_1.default.createElement(material_1.ListItemIcon, null,
                         react_1.default.createElement(MyIcon, { fontSize: "small" })),
-                    react_1.default.createElement(material_1.ListItemText, null, this.props.t(`ra_fileType_${type}`)));
-            })) : null,
-            react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Background image'), componentsProps: { popper: { sx: styles.tooltip } } },
+                    react_1.default.createElement(material_1.ListItemText, null, this.props.t(`ra_fileType_${type}`))));
+            }))) : null,
+            react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Background image'), slotProps: { popper: { sx: styles.tooltip } } },
                 react_1.default.createElement(material_1.IconButton, { color: "inherit", edge: "start", style: styles.menuButton, onClick: this.setStateBackgroundImage, size: "small" },
                     react_1.default.createElement(icons_material_1.Brightness6, { fontSize: "small" }))),
-            this.state.viewType !== TABLE && this.props.allowDelete ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Delete'), componentsProps: { popper: { sx: styles.tooltip } } },
+            this.state.viewType !== TABLE && this.props.allowDelete ? (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Delete'), slotProps: { popper: { sx: styles.tooltip } } },
                 react_1.default.createElement("span", null,
                     react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", disabled: !this.state.selected ||
                             this.state.selected === 'vis.0/' ||
@@ -1272,7 +1281,7 @@ class FileBrowserClass extends react_1.Component {
                                 this.setState({ deleteItem: this.state.selected });
                             }
                         }, size: "small" },
-                        react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" })))) : null);
+                        react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))))) : null));
     }
     findItem(id, folders) {
         folders = folders || this.state.folders;
@@ -1285,7 +1294,7 @@ class FileBrowserClass extends react_1.Component {
         if (!folders[parentFolder]) {
             return null;
         }
-        return folders[parentFolder].find(item => item.id === id);
+        return folders[parentFolder].find(item => item.id === id) || null;
     }
     renderInputDialog() {
         if (this.state.addFolder) {
@@ -1294,9 +1303,9 @@ class FileBrowserClass 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)
+            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) => {
+                    : 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]));
@@ -1322,12 +1331,14 @@ class FileBrowserClass extends react_1.Component {
                     else {
                         this.setState({ addFolder: false });
                     }
-                }, replace: (text) => text.replace(/[^-_\w]/, '_') });
+                }, replace: (text) => text.replace(/[^-_\w]/, '_') }));
         }
         return null;
     }
     componentDidUpdate( /* prevProps , prevState, snapshot */) {
-        this.setOpacityTimer && clearTimeout(this.setOpacityTimer);
+        if (this.setOpacityTimer) {
+            clearTimeout(this.setOpacityTimer);
+        }
         this.setOpacityTimer = setTimeout(() => {
             this.setOpacityTimer = null;
             const items = window.document.getElementsByClassName('browserItem');
@@ -1365,7 +1376,8 @@ class FileBrowserClass extends react_1.Component {
             await this.props.socket.writeFile64(adapterName || '', parts.join('/'), data);
         }
         catch (e) {
-            window.alert(`Cannot write file: ${e}`);
+            const knownError = e;
+            window.alert(`Cannot write file: ${knownError === null || knownError === void 0 ? void 0 : knownError.message}`);
         }
     }
     renderUpload() {
@@ -1386,8 +1398,7 @@ class FileBrowserClass extends react_1.Component {
                                 }
                                 else {
                                     const id = `${parentFolder}/${file.name}`;
-                                    this.uploadFile(id, reader.result)
-                                        .then(() => {
+                                    void this.uploadFile(id, reader.result).then(() => {
                                         if (!--count) {
                                             this.setState({ uploadFile: false }, () => {
                                                 if (this.supportSubscribes) {
@@ -1401,8 +1412,7 @@ class FileBrowserClass extends react_1.Component {
                                                     this.setState({ expanded }, () => this.select(id));
                                                 }
                                                 else {
-                                                    setTimeout(() => this.browseFolder(parentFolder, null, false, true)
-                                                        .then(folders => {
+                                                    setTimeout(() => this.browseFolder(parentFolder, null, false, true).then(folders => {
                                                         // open current folder
                                                         const expanded = [...this.state.expanded];
                                                         if (!expanded.includes(parentFolder)) {
@@ -1420,14 +1430,14 @@ class FileBrowserClass extends react_1.Component {
                             };
                             reader.readAsArrayBuffer(file);
                         });
-                    } }, ({ getRootProps, getInputProps }) => react_1.default.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, styles.uploadDiv), (this.state.uploadFile === 'dragging' ? styles.uploadDivDragging : undefined)) }, getRootProps()),
+                    } }, ({ getRootProps, getInputProps }) => (react_1.default.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, styles.uploadDiv), (this.state.uploadFile === 'dragging' ? styles.uploadDivDragging : undefined)) }, getRootProps()),
                     react_1.default.createElement("input", Object.assign({}, getInputProps())),
                     react_1.default.createElement(material_1.Box, { component: "div", sx: styles.uploadCenterDiv },
                         react_1.default.createElement("div", { style: styles.uploadCenterTextAndIcon },
                             react_1.default.createElement(icons_material_1.Publish, { style: styles.uploadCenterIcon }),
                             react_1.default.createElement("div", { style: styles.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')))))),
+                                : this.props.t('ra_Place your files here or click here to open the browse dialog'))))))),
             ];
         }
         return null;
@@ -1437,13 +1447,12 @@ class FileBrowserClass extends react_1.Component {
         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())
-                .then(() => {
+                : 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(() => {
+                    void this.props.socket.deleteFolder(adapter || '', parts.join('/')).then(() => {
                         // remove this folder
                         const folders = JSON.parse(JSON.stringify(this.state.folders));
                         delete folders[item.id];
@@ -1472,8 +1481,7 @@ class FileBrowserClass extends react_1.Component {
     }
     deleteItem(deleteItem) {
         deleteItem = deleteItem || this.state.deleteItem;
-        this.setState({ deleteItem: '' }, () => this.deleteRecursive(deleteItem)
-            .then(() => {
+        this.setState({ deleteItem: '' }, () => this.deleteRecursive(deleteItem).then(() => {
             const newState = {};
             const pos = this.state.expanded.indexOf(deleteItem);
             if (pos !== -1) {
@@ -1498,18 +1506,18 @@ class FileBrowserClass extends react_1.Component {
                 newState.folders = folders;
                 this.setState(newState, () => setTimeout(() => {
                     this.browseFolders([...this.state.expanded], folders)
-                        .then(_folders => this.setState({ folders: _folders }));
+                        .then(_folders => this.setState({ folders: _folders }))
+                        .catch(e => console.error(e));
                 }, 200));
             }
             else {
-                // @ts-expect-error fix later
                 this.setState(newState);
             }
         }));
     }
     renderDeleteDialog() {
         if (this.state.deleteItem) {
-            return react_1.default.createElement(material_1.Dialog, { key: "deleteDialog", open: !0, onClose: () => this.setState({ deleteItem: '' }), "aria-labelledby": "ar_dialog_file_delete_title" },
+            return (react_1.default.createElement(material_1.Dialog, { key: "deleteDialog", open: !0, onClose: () => this.setState({ deleteItem: '' }), "aria-labelledby": "ar_dialog_file_delete_title" },
                 react_1.default.createElement(material_1.DialogTitle, { id: "ar_dialog_file_delete_title" }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())),
                 react_1.default.createElement(material_1.DialogContent, null,
                     react_1.default.createElement(material_1.DialogContentText, null, this.props.t('ra_Are you sure?'))),
@@ -1519,16 +1527,16 @@ class FileBrowserClass extends react_1.Component {
                             this.deleteItem('');
                         } }, this.props.t('ra_Delete (no confirm for 5 mins)')),
                     react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.deleteItem(''), color: "primary", autoFocus: true }, this.props.t('ra_Delete')),
-                    react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.setState({ deleteItem: '' }), color: "grey" }, this.props.t('ra_Cancel'))));
+                    react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.setState({ deleteItem: '' }), color: "grey" }, this.props.t('ra_Cancel')))));
         }
-        return false;
+        return null;
     }
     renderViewDialog() {
-        return this.state.viewer ? react_1.default.createElement(FileViewer_1.default, { supportSubscribes: this.supportSubscribes, key: this.state.viewer, href: this.state.viewer, formatEditFile: this.state.formatEditFile, themeType: this.props.themeType, setStateBackgroundImage: this.setStateBackgroundImage, getStyleBackgroundImage: this.getStyleBackgroundImage, t: this.props.t, socket: this.props.socket, lang: this.props.lang, expertMode: this.state.expertMode, onClose: () => this.setState({ viewer: '', formatEditFile: '' }) }) : null;
+        return this.state.viewer ? (react_1.default.createElement(FileViewer_1.default, { supportSubscribes: this.supportSubscribes, key: this.state.viewer, href: this.state.viewer, formatEditFile: this.state.formatEditFile, themeType: this.props.themeType, setStateBackgroundImage: this.setStateBackgroundImage, getStyleBackgroundImage: this.getStyleBackgroundImage, t: this.props.t, socket: this.props.socket, lang: this.props.lang, expertMode: this.state.expertMode, onClose: () => this.setState({ viewer: '', formatEditFile: '' }) })) : null;
     }
     renderError() {
         if (this.state.errorText) {
-            return react_1.default.createElement(Error_1.default, { key: "errorDialog", text: this.state.errorText, onClose: () => this.setState({ errorText: '' }) });
+            return (react_1.default.createElement(Error_1.default, { key: "errorDialog", text: this.state.errorText, onClose: () => this.setState({ errorText: '' }) }));
         }
         return null;
     }
@@ -1545,7 +1553,9 @@ class FileBrowserClass extends react_1.Component {
             }
         });
         if (changed) {
-            this.cacheFoldersTimeout && clearTimeout(this.cacheFoldersTimeout);
+            if (this.cacheFoldersTimeout) {
+                clearTimeout(this.cacheFoldersTimeout);
+            }
             this.cacheFoldersTimeout = setTimeout(() => {
                 this.cacheFoldersTimeout = null;
                 const folders = this.cacheFolders || {};
@@ -1575,7 +1585,9 @@ class FileBrowserClass extends react_1.Component {
                         resolve(true);
                     }
                 })
-                    .then(result => result && this.setState({ selected: this.state.path, currentDir: folder, pathFocus: false }));
+                    .then(result => result &&
+                    this.setState({ selected: this.state.path, currentDir: folder, pathFocus: false }))
+                    .catch(e => console.error(e));
             }
             else if (!this.lastSelect || Date.now() - this.lastSelect > 100) {
                 this.setState({ pathFocus: false });
@@ -1587,28 +1599,27 @@ class FileBrowserClass extends react_1.Component {
             ? 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);
+        return (react_1.default.createElement(material_1.Breadcrumbs, { style: { paddingLeft: 8 } }, parts.map((part, i) => {
+            if (part) {
+                p.push(part);
+            }
             const path = p.join('/');
             if (i < parts.length - 1) {
-                return react_1.default.createElement(material_1.Box, { component: "div", key: `${this.state.selected}_${i}`, sx: styles.pathDivBreadcrumbDir, onClick: e => this.changeFolder(e, path || '/') }, part || this.props.t('ra_Root'));
+                return (react_1.default.createElement(material_1.Box, { component: "div", key: `${this.state.selected}_${i}`, sx: styles.pathDivBreadcrumbDir, onClick: e => this.changeFolder(e, path || '/') }, part || this.props.t('ra_Root')));
             }
-            return react_1.default.createElement("div", { style: styles.pathDivBreadcrumbSelected, key: `${this.state.selected}_${i}`, onClick: () => this.setState({ pathFocus: true }) }, part);
-        }));
+            return (react_1.default.createElement("div", { style: styles.pathDivBreadcrumbSelected, key: `${this.state.selected}_${i}`, onClick: () => this.setState({ pathFocus: true }) }, part));
+        })));
     }
     renderPath() {
-        return react_1.default.createElement(material_1.Box, { component: "div", key: "path", sx: styles.pathDiv }, this.state.pathFocus ?
-            react_1.default.createElement(material_1.Input, { value: this.state.path, onKeyDown: e => {
-                    if (e.key === 'Enter') {
-                        this.changeToPath();
-                    }
-                    else if (e.key === 'Escape') {
-                        this.setState({ pathFocus: false });
-                    }
-                }, endAdornment: react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => this.changeToPath() },
-                    react_1.default.createElement(icons_material_1.KeyboardReturn, null)), onBlur: () => this.changeToPath(), onChange: e => this.setState({ path: e.target.value }), style: styles.pathDivInput })
-            :
-                this.renderBreadcrumb());
+        return (react_1.default.createElement(material_1.Box, { component: "div", key: "path", sx: styles.pathDiv }, this.state.pathFocus ? (react_1.default.createElement(material_1.Input, { value: this.state.path, onKeyDown: e => {
+                if (e.key === 'Enter') {
+                    this.changeToPath();
+                }
+                else if (e.key === 'Escape') {
+                    this.setState({ pathFocus: false });
+                }
+            }, endAdornment: react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => this.changeToPath() },
+                react_1.default.createElement(icons_material_1.KeyboardReturn, null)), onBlur: () => this.changeToPath(), onChange: e => this.setState({ path: e.target.value }), style: styles.pathDivInput })) : (this.renderBreadcrumb())));
     }
     render() {
         if (!this.props.ready) {
@@ -1619,12 +1630,11 @@ class FileBrowserClass extends react_1.Component {
             setTimeout(() => {
                 this.setState({ loadAllFolders: false, folders: {} }, () => {
                     this.foldersLoading = false;
-                    this.loadFolders()
-                        .catch(error => console.error(`Cannot load folders: ${error}`));
+                    this.loadFolders().catch(error => console.error(`Cannot load folders: ${error}`));
                 });
             }, 300);
         }
-        return react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.root), this.props.style), className: this.props.className },
+        return (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.root), this.props.style), className: this.props.className },
             this.props.showToolbar ? this.renderToolbar() : null,
             this.state.viewType === TILE ? this.renderPath() : null,
             react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.filesDiv), styles[`filesDiv${this.state.viewType}`]), onClick: e => {
@@ -1640,8 +1650,7 @@ class FileBrowserClass extends react_1.Component {
                 this.state.viewType === TABLE
                     ? this.renderItems('/')
                     : this.renderItems(this.state.currentDir || '/'),
-                this.state.viewType !== TABLE ?
-                    react_1.default.createElement("div", { style: styles.filesDivHint }, this.props.t('ra_select_folder_hint')) : null),
+                this.state.viewType !== TABLE ? (react_1.default.createElement("div", { style: styles.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,
@@ -1649,7 +1658,7 @@ class FileBrowserClass extends react_1.Component {
             this.state.modalEditOfAccess && this.props.modalEditOfAccessControl
                 ? this.props.modalEditOfAccessControl(this)
                 : null,
-            this.renderError());
+            this.renderError()));
     }
 }
 exports.FileBrowserClass = FileBrowserClass;