@iobroker/adapter-react-v5 3.3.0 → 3.4.1

package/Components/FileBrowser.js

@@ -55,6 +55,10 @@ var _ViewModule = _interopRequireDefault(require("@mui/icons-material/ViewModule
 var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 var _Brightness = _interopRequireDefault(require("@mui/icons-material/Brightness6"));
+var _Image = _interopRequireDefault(require("@mui/icons-material/Image"));
+var _FontDownload = _interopRequireDefault(require("@mui/icons-material/FontDownload"));
+var _AudioFile = _interopRequireDefault(require("@mui/icons-material/AudioFile"));
+var _Videocam = _interopRequireDefault(require("@mui/icons-material/Videocam"));
 var _IconExpert = _interopRequireDefault(require("../icons/IconExpert"));
 var _IconClosed = _interopRequireDefault(require("../icons/IconClosed"));
 var _IconOpen = _interopRequireDefault(require("../icons/IconOpen"));
@@ -69,6 +73,14 @@ var BUTTON_WIDTH = 32;
 var TILE_HEIGHT = 120;
 var TILE_WIDTH = 64;
 var NOT_FOUND = 'Not found';
+var FILE_TYPE_ICONS = {
+  all: _InsertDriveFile["default"],
+  images: _Image["default"],
+  code: _Code["default"],
+  txt: _FontDownload["default"],
+  audio: _AudioFile["default"],
+  video: _Videocam["default"]
+};
 var styles = function styles(theme) {
   return {
     dialog: {
@@ -410,10 +422,7 @@ function getParentDir(dir) {
 }
 function isFile(path) {
   var ext = _Utils["default"].getFileExtension(path);
-  if (ext && ext.toLowerCase().match(/[a-z]+/) && ext.length < 5) {
-    return true;
-  }
-  return false;
+  return !!(ext && ext.toLowerCase().match(/[a-z]+/) && ext.length < 5);
 }
 var TABLE = 'Table';
 var TILE = 'Tile';
@@ -432,7 +441,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     (0, _classCallCheck2["default"])(this, FileBrowser);
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFileChange", function (id, fileName, size) {
-      var key = id + '/' + fileName;
+      var key = "".concat(id, "/").concat(fileName);
       var pos = key.lastIndexOf('/');
       var folder = key.substring(0, pos);
       console.log("File changed ".concat(key, "[").concat(size, "]"));
@@ -492,7 +501,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       expanded = JSON.parse(expanded);
       if (_this.limitToPath) {
         expanded = expanded.filter(function (id) {
-          return id.startsWith(_this.limitToPath + '/') || id === _this.limitToPath || _this.limitToPath.startsWith(id + '/');
+          return id.startsWith("".concat(_this.limitToPath, "/")) || id === _this.limitToPath || _this.limitToPath.startsWith("".concat(id, "/"));
         });
       }
     } catch (e) {
@@ -505,6 +514,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       viewType = TABLE;
     }
     var selected = _this.props.selected || (window._localStorage || window.localStorage).getItem('files.selected') || USER_DATA;
+
+    // TODO: Now we do not support multiple selection
+    if (Array.isArray(selected)) {
+      selected = selected[0];
+    }
     var currentDir = '';
     if (isFile(selected)) {
       currentDir = getParentDir(selected);
@@ -522,7 +536,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       addFolder: false,
       uploadFile: false,
       deleteItem: '',
-      marked: [],
+      // marked: [],
       viewer: '',
       formatEditFile: '',
       path: selected,
@@ -532,8 +546,10 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       backgroundImage: _backgroundImage,
       queueLength: 0,
       loadAllFolders: false,
-      allFoldersLoaded: false,
-      fileErrors: []
+      // allFoldersLoaded: false,
+      fileErrors: [],
+      filterByType: props.filterByType || window.localStorage.getItem('files.filterByType') || '',
+      showTypesMenu: null
     };
     _this.imagePrefix = _this.props.imagePrefix || './files/';
     _this.levelPadding = _this.props.levelPadding || 20;
@@ -625,7 +641,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       }
       if (!_resolve) {
         return new Promise(function (resolve) {
-          return _this4.browseFolders(foldersList, _newFolders, resolve);
+          _this4.browseFolders(foldersList, _newFolders, resolve);
         });
       }
       if (!foldersList || !foldersList.length) {
@@ -762,7 +778,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             return Promise.all(_newFolders[folderId].filter(function (item) {
               return item.folder;
             }).map(function (item) {
-              return _this7.browseFolder(item.id, _newFolders, true)["catch"](function (error) {});
+              return _this7.browseFolder(item.id, _newFolders, true)["catch"](function () {});
             })).then(function () {
               return resolve(_newFolders);
             })["catch"](function (error) {
@@ -789,14 +805,6 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           if (pos !== -1) {
             objs.splice(pos, 1);
           }
-
-          // remember, that all folders are loaded
-          if (_this7.state.expertMode) {
-            _this7.setState({
-              allFoldersLoaded: true,
-              loadFolders: false
-            });
-          }
           objs.forEach(function (obj) {
             if (_this7.limitToObjectID && _this7.limitToObjectID !== obj._id) {
               return;
@@ -832,7 +840,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             return Promise.all(_folders.filter(function (item) {
               return item.folder;
             }).map(function (item) {
-              return _this7.browseFolder(item.id, _newFolders, true)["catch"](function (error) {});
+              return _this7.browseFolder(item.id, _newFolders, true)["catch"](function () {});
             })).then(function () {
               return _newFolders;
             });
@@ -862,9 +870,9 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             level: level
           };
           if (_this7.limitToPath) {
-            if (item.folder && (item.id.startsWith(_this7.limitToPath + '/') || item.id === _this7.limitToPath || _this7.limitToPath.startsWith(item.id + '/'))) {
+            if (item.folder && (item.id.startsWith("".concat(_this7.limitToPath, "/")) || item.id === _this7.limitToPath || _this7.limitToPath.startsWith("".concat(item.id, "/")))) {
               _folders.push(item);
-            } else if (item.id.startsWith(_this7.limitToPath + '/')) {
+            } else if (item.id.startsWith("".concat(_this7.limitToPath, "/"))) {
               _folders.push(item);
             }
           } else {
@@ -901,7 +909,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         expanded.sort();
         (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
         if (!item.temp) {
-          return this.browseFolder(item.id).then(function (folders) {
+          this.browseFolder(item.id).then(function (folders) {
             return _this8.setState({
               expanded: expanded,
               folders: folders
@@ -973,7 +981,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       }, function () {
         if (_this10.props.onSelect) {
           var ext = _Utils["default"].getFileExtension(id);
-          if ((!_this10.props.filterFiles || _this10.props.filterFiles.includes(ext)) && (!_this10.props.filterByType || _FileViewer.EXTENSIONS[_this10.props.filterByType].includes(ext))) {
+          if ((!_this10.props.filterFiles || _this10.props.filterFiles.includes(ext)) && (!_this10.state.filterByType || _FileViewer.EXTENSIONS[_this10.state.filterByType].includes(ext))) {
             _this10.props.onSelect(id, false, !!_this10.state.folders[id]);
           } else {
             _this10.props.onSelect('');
@@ -992,7 +1000,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       var Icon = expanded ? _IconOpen["default"] : _IconClosed["default"];
       var padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
       var isUserData = item.name === USER_DATA;
-      var isSpecialData = isUserData || item.name === 'vis.0';
+      var isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2-beta.0';
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         id: item.id,
@@ -1007,14 +1015,14 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           return _this11.state.viewType === TABLE && _this11.toggleFolder(item, e);
         },
         title: item.title && (0, _typeof2["default"])(item.title) === 'object' ? item.title[this.props.lang] || item.title.end || '' : item.title || null,
-        className: _Utils["default"].clsx('browserItem', this.props.classes["item".concat(this.state.viewType)], this.props.classes["itemFolder".concat(this.state.viewType)], this.state.selected === item.id && this.props.classes.itemSelected, item.temp && this.props.classes['itemFolderTemp'])
+        className: _Utils["default"].clsx('browserItem', this.props.classes["item".concat(this.state.viewType)], this.props.classes["itemFolder".concat(this.state.viewType)], this.state.selected === item.id && this.props.classes.itemSelected, item.temp && this.props.classes.itemFolderTemp)
       }, /*#__PURE__*/_react["default"].createElement(Icon, {
-        className: _Utils["default"].clsx(this.props.classes['itemFolderIcon' + this.state.viewType], isSpecialData && this.props.classes.specialFolder),
+        className: _Utils["default"].clsx(this.props.classes["itemFolderIcon".concat(this.state.viewType)], isSpecialData && this.props.classes.specialFolder),
         onClick: this.state.viewType === TABLE ? function (e) {
           return _this11.toggleFolder(item, e);
         } : undefined
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _Utils["default"].clsx(this.props.classes['itemName' + this.state.viewType], this.props.classes['itemNameFolder' + this.state.viewType])
+        className: _Utils["default"].clsx(this.props.classes["itemName".concat(this.state.viewType)], this.props.classes["itemNameFolder".concat(this.state.viewType)])
       }, isUserData ? this.props.t('ra_User files') : item.name), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
         smDown: true
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -1083,7 +1091,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         access = access.toString(16).padStart(3, '0');
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes['itemAccess' + this.state.viewType]
+        className: this.props.classes["itemAccess".concat(this.state.viewType)]
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         size: "large",
         onClick: function onClick() {
@@ -1091,7 +1099,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             modalEditOfAccess: true
           });
         },
-        className: this.props.classes['itemAclButton' + this.state.viewType]
+        className: this.props.classes["itemAclButton".concat(this.state.viewType)]
       }, access || '---'));
     }
   }, {
@@ -1146,7 +1154,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             _this14.setState({
               viewer: _this14.imagePrefix + item.id
             });
-          } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.props.filterByType || _FileViewer.EXTENSIONS[_this14.props.filterByType].includes(item.ext))) {
+          } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.state.filterByType || _FileViewer.EXTENSIONS[_this14.state.filterByType].includes(item.ext))) {
             _this14.props.onSelect(item.id, true, !!_this14.state.folders[item.id]);
           }
         },
@@ -1159,7 +1167,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         } : {},
         className: _Utils["default"].clsx('browserItem', this.props.classes["item".concat(this.state.viewType)], this.props.classes["itemFile".concat(this.state.viewType)], this.state.selected === item.id && this.props.classes.itemSelected)
       }, _FileViewer.EXTENSIONS.images.includes(ext) ? this.state.fileErrors.includes(item.id) ? /*#__PURE__*/_react["default"].createElement(_IconNoIcon["default"], {
-        className: _Utils["default"].clsx(this.props.classes['itemImage' + this.state.viewType], this.getClassBackgroundImage())
+        className: _Utils["default"].clsx(this.props.classes["itemImage".concat(this.state.viewType)], this.getClassBackgroundImage())
       }) : /*#__PURE__*/_react["default"].createElement("img", {
         onError: function onError(e) {
           e.target.onerror = null;
@@ -1171,7 +1179,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             });
           }
         },
-        className: _Utils["default"].clsx(this.props.classes['itemImage' + this.state.viewType], this.getClassBackgroundImage()),
+        className: _Utils["default"].clsx(this.props.classes["itemImage".concat(this.state.viewType)], this.getClassBackgroundImage()),
         src: this.imagePrefix + item.id,
         alt: item.name
       }) : this.getFileIcon(ext), /*#__PURE__*/_react["default"].createElement("div", {
@@ -1191,7 +1199,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
               viewer: _this14.imagePrefix + item.id,
               formatEditFile: ext
             });
-          } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.props.filterByType || _FileViewer.EXTENSIONS[_this14.props.filterByType].includes(item.ext))) {
+          } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.state.filterByType || _FileViewer.EXTENSIONS[_this14.state.filterByType].includes(item.ext))) {
             _this14.props.onSelect(item.id, true, !!_this14.state.folders[item.id]);
           }
         },
@@ -1209,7 +1217,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
         }
-      }, /*#__PURE__*/_react["default"].createElement(_SaveAlt["default"], null)) : null, this.state.viewType === TABLE && this.props.allowDelete && item.id !== 'vis.0/' && item.id !== USER_DATA ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_SaveAlt["default"], null)) : null, this.state.viewType === TABLE && this.props.allowDelete && item.id !== 'vis.0/' && item.id !== 'vis-2-beta.0/' && item.id !== USER_DATA ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         "aria-label": "delete",
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -1243,7 +1251,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           this.state.folders[folderId].forEach(function (item) {
             if (item.folder) {
               res.push(_this15.renderFolder(item));
-            } else if ((!_this15.props.filterFiles || _this15.props.filterFiles.includes(item.ext)) && (!_this15.props.filterByType || _FileViewer.EXTENSIONS[_this15.props.filterByType].includes(item.ext))) {
+            } else if ((!_this15.props.filterFiles || _this15.props.filterFiles.includes(item.ext)) && (!_this15.state.filterByType || _FileViewer.EXTENSIONS[_this15.state.filterByType].includes(item.ext))) {
               res.push(_this15.renderFile(item));
             }
           });
@@ -1257,7 +1265,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             if (_this15.state.folders[item.id] && expanded) {
               res.push(_this15.renderItems(item.id));
             }
-          } else if ((!_this15.props.filterFiles || _this15.props.filterFiles.includes(item.ext)) && (!_this15.props.filterByType || _FileViewer.EXTENSIONS[_this15.props.filterByType].includes(item.ext))) {
+          } else if ((!_this15.props.filterFiles || _this15.props.filterFiles.includes(item.ext)) && (!_this15.state.filterByType || _FileViewer.EXTENSIONS[_this15.state.filterByType].includes(item.ext))) {
             res.push(_this15.renderFile(item));
           } else {
             return null;
@@ -1287,6 +1295,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     key: "renderToolbar",
     value: function renderToolbar() {
       var _this16 = this;
+      var IconType = this.props.showTypeSelector ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] || FILE_TYPE_ICONS.all : null;
       return /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
         key: "toolbar",
         variant: "dense"
@@ -1300,8 +1309,10 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             expertMode: !_this16.state.expertMode
           });
         },
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_IconExpert["default"], null)) : null, this.props.showViewTypeButton ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "small"
+      }, /*#__PURE__*/_react["default"].createElement(_IconExpert["default"], {
+        fontSize: "small"
+      })) : null, this.props.showViewTypeButton ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         edge: "start",
         title: this.props.t('ra_Toggle view mode'),
         className: this.props.classes.menuButton,
@@ -1322,8 +1333,12 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             }
           });
         },
-        size: "large"
-      }, this.state.viewType !== TABLE ? /*#__PURE__*/_react["default"].createElement(_List["default"], null) : /*#__PURE__*/_react["default"].createElement(_ViewModule["default"], null)) : null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "small"
+      }, this.state.viewType !== TABLE ? /*#__PURE__*/_react["default"].createElement(_List["default"], {
+        fontSize: "small"
+      }) : /*#__PURE__*/_react["default"].createElement(_ViewModule["default"], {
+        fontSize: "small"
+      })) : null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         edge: "start",
         title: this.props.t('ra_Hide empty folders'),
         className: this.props.classes.menuButton,
@@ -1335,8 +1350,10 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             filterEmpty: !_this16.state.filterEmpty
           });
         },
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_FolderOpen["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "small"
+      }, /*#__PURE__*/_react["default"].createElement(_FolderOpen["default"], {
+        fontSize: "small"
+      })), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         edge: "start",
         title: this.props.t('ra_Reload files'),
         className: this.props.classes.menuButton,
@@ -1349,10 +1366,12 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             return _this16.loadFolders();
           });
         },
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Refresh["default"], null)), this.props.allowCreateFolder ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "small"
+      }, /*#__PURE__*/_react["default"].createElement(_Refresh["default"], {
+        fontSize: "small"
+      })), this.props.allowCreateFolder ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         edge: "start",
-        disabled: !this.state.selected || !this.state.folders[this.state.selected] || this.limitToPath && !this.state.selected.startsWith(this.limitToPath + '/') && this.limitToPath !== this.state.selected,
+        disabled: !this.state.selected || !this.state.folders[this.state.selected] || this.limitToPath && !this.state.selected.startsWith("".concat(this.limitToPath, "/")) && this.limitToPath !== this.state.selected,
         title: this.props.t('ra_Create folder'),
         className: this.props.classes.menuButton,
         color: "inherit",
@@ -1362,10 +1381,12 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             addFolder: true
           });
         },
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_CreateNewFolder["default"], null)) : null, this.props.allowUpload ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "small"
+      }, /*#__PURE__*/_react["default"].createElement(_CreateNewFolder["default"], {
+        fontSize: "small"
+      })) : null, this.props.allowUpload ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         edge: "start",
-        disabled: !this.state.selected || !this.state.folders[this.state.selected] || this.limitToPath && !this.state.selected.startsWith(this.limitToPath + '/') && this.limitToPath !== this.state.selected,
+        disabled: !this.state.selected || !this.state.folders[this.state.selected] || this.limitToPath && !this.state.selected.startsWith("".concat(this.limitToPath, "/")) && this.limitToPath !== this.state.selected,
         title: this.props.t('ra_Upload file'),
         className: this.props.classes.menuButton,
         color: "inherit",
@@ -1375,16 +1396,62 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             uploadFile: true
           });
         },
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], null)) : null, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        size: "small"
+      }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], {
+        fontSize: "small"
+      })) : null, this.props.showTypeSelector ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        title: this.props.t('ra_Filter files')
+      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "small",
+        onClick: function onClick(e) {
+          return _this16.setState({
+            showTypesMenu: e.target
+          });
+        }
+      }, /*#__PURE__*/_react["default"].createElement(IconType, {
+        fontSize: "small"
+      }))) : null, this.state.showTypesMenu ? /*#__PURE__*/_react["default"].createElement(_material.Menu, {
+        open: !0,
+        anchorEl: this.state.showTypesMenu,
+        onClose: function onClose() {
+          return _this16.setState({
+            showTypesMenu: null
+          });
+        }
+      }, Object.keys(FILE_TYPE_ICONS).map(function (type) {
+        var MyIcon = FILE_TYPE_ICONS[type];
+        return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
+          key: type,
+          selected: _this16.state.filterByType === type,
+          onClick: function onClick() {
+            if (type === 'all') {
+              (window._localStorage || window.localStorage).removeItem('files.filterByType');
+              _this16.setState({
+                filterByType: '',
+                showTypesMenu: null
+              });
+            } else {
+              (window._localStorage || window.localStorage).setItem('files.filterByType', type);
+              _this16.setState({
+                filterByType: type,
+                showTypesMenu: null
+              });
+            }
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_material.ListItemIcon, null, /*#__PURE__*/_react["default"].createElement(MyIcon, {
+          fontSize: "small"
+        })), /*#__PURE__*/_react["default"].createElement(_material.ListItemText, null, _this16.props.t("ra_fileType_".concat(type))));
+      })) : null, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Background image')
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         color: "inherit",
         edge: "start",
         className: this.props.classes.menuButton,
         onClick: this.setStateBackgroundImage,
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Brightness["default"], null))));
+        size: "small"
+      }, /*#__PURE__*/_react["default"].createElement(_Brightness["default"], {
+        fontSize: "small"
+      }))));
     }
   }, {
     key: "findItem",
@@ -1550,49 +1617,50 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
               reader.onload = function () {
                 var parentFolder = _this19.findFirstFolder(_this19.state.selected);
                 if (!parentFolder) {
-                  return window.alert(_this19.props.t('ra_Invalid parent folder!'));
-                }
-                var id = "".concat(parentFolder, "/").concat(file.name);
-                _this19.uploadFile(id, reader.result).then(function () {
-                  if (! --count) {
-                    _this19.setState({
-                      uploadFile: false
-                    }, function () {
-                      if (_this19.supportSubscribes) {
-                        // open current folder
-                        var expanded = (0, _toConsumableArray2["default"])(_this19.state.expanded);
-                        if (!expanded.includes(parentFolder)) {
-                          expanded.push(parentFolder);
-                          expanded.sort();
-                          (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
-                        }
-                        _this19.setState({
-                          expanded: expanded
-                        }, function () {
-                          return _this19.select(id);
-                        });
-                      } else {
-                        setTimeout(function () {
-                          return _this19.browseFolder(parentFolder, true).then(function (folders) {
-                            // open current folder
-                            var expanded = (0, _toConsumableArray2["default"])(_this19.state.expanded);
-                            if (!expanded.includes(parentFolder)) {
-                              expanded.push(parentFolder);
-                              expanded.sort();
-                              (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
-                            }
-                            _this19.setState({
-                              folders: folders,
-                              expanded: expanded
-                            }, function () {
-                              return _this19.select(id);
-                            });
+                  window.alert(_this19.props.t('ra_Invalid parent folder!'));
+                } else {
+                  var id = "".concat(parentFolder, "/").concat(file.name);
+                  _this19.uploadFile(id, reader.result).then(function () {
+                    if (! --count) {
+                      _this19.setState({
+                        uploadFile: false
+                      }, function () {
+                        if (_this19.supportSubscribes) {
+                          // open current folder
+                          var expanded = (0, _toConsumableArray2["default"])(_this19.state.expanded);
+                          if (!expanded.includes(parentFolder)) {
+                            expanded.push(parentFolder);
+                            expanded.sort();
+                            (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                          }
+                          _this19.setState({
+                            expanded: expanded
+                          }, function () {
+                            return _this19.select(id);
                           });
-                        }, 500);
-                      }
-                    });
-                  }
-                });
+                        } else {
+                          setTimeout(function () {
+                            return _this19.browseFolder(parentFolder, true).then(function (folders) {
+                              // open current folder
+                              var expanded = (0, _toConsumableArray2["default"])(_this19.state.expanded);
+                              if (!expanded.includes(parentFolder)) {
+                                expanded.push(parentFolder);
+                                expanded.sort();
+                                (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                              }
+                              _this19.setState({
+                                folders: folders,
+                                expanded: expanded
+                              }, function () {
+                                return _this19.select(id);
+                              });
+                            });
+                          }, 500);
+                        }
+                      });
+                    }
+                  });
+                }
               };
               reader.readAsArrayBuffer(file);
             });
@@ -1682,16 +1750,16 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             var parentFolder = _this21.findFirstFolder(_deleteItem);
             var folders = {};
             Object.keys(_this21.state.folders).forEach(function (name) {
-              if (name !== parentFolder && !name.startsWith(parentFolder + '/')) {
+              if (name !== parentFolder && !name.startsWith("".concat(parentFolder, "/"))) {
                 folders[name] = _this21.state.folders[name];
               }
             });
             newState.folders = folders;
             _this21.setState(newState, function () {
               return setTimeout(function () {
-                return _this21.browseFolders((0, _toConsumableArray2["default"])(_this21.state.expanded), folders).then(function (folders) {
+                return _this21.browseFolders((0, _toConsumableArray2["default"])(_this21.state.expanded), folders).then(function (_folders) {
                   return _this21.setState({
-                    folders: folders
+                    folders: _folders
                   });
                 });
               }, 200);
@@ -1774,6 +1842,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       var _this24 = this;
       if (this.state.errorText) {
         return /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+          classes: {},
           key: "errorDialog",
           text: this.state.errorText,
           onClose: function onClose() {
@@ -1785,57 +1854,56 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       }
       return null;
     }
-  }, {
-    key: "updateItemsAcl",
-    value: function updateItemsAcl(info) {
-      var _this25 = this;
-      var folders = JSON.parse(JSON.stringify(this.state.folders));
-      var changed;
-      info.forEach(function (it) {
-        var item = _this25.findItem(it.id, folders);
-        if (item && JSON.stringify(item.acl) !== JSON.stringify(it.acl)) {
-          item.acl = it.acl;
-          changed = true;
-        }
-      });
-      changed && this.setState({
-        folders: folders
-      });
+
+    /*
+    updateItemsAcl(info) {
+        const folders = JSON.parse(JSON.stringify(this.state.folders));
+        let changed;
+        info.forEach(it => {
+            const item = this.findItem(it.id, folders);
+            if (item && JSON.stringify(item.acl) !== JSON.stringify(it.acl)) {
+                item.acl = it.acl;
+                changed = true;
+            }
+        });
+        changed && this.setState({ folders });
     }
+    */
   }, {
     key: "changeToPath",
     value: function changeToPath() {
-      var _this26 = this;
+      var _this25 = this;
       setTimeout(function () {
-        if (_this26.state.path !== _this26.state.selected && (!_this26.lastSelect || Date.now() - _this26.lastSelect > 100)) {
-          var folder = _this26.state.path;
-          if (isFile(_this26.state.path)) {
-            folder = getParentDir(_this26.state.path);
+        if (_this25.state.path !== _this25.state.selected && (!_this25.lastSelect || Date.now() - _this25.lastSelect > 100)) {
+          var folder = _this25.state.path;
+          if (isFile(_this25.state.path)) {
+            folder = getParentDir(_this25.state.path);
           }
           new Promise(function (resolve) {
-            if (!_this26.state.folders[folder]) {
-              return _this26.browseFolder(folder).then(function (folders) {
-                return _this26.setState({
+            if (!_this25.state.folders[folder]) {
+              _this25.browseFolder(folder).then(function (folders) {
+                return _this25.setState({
                   folders: folders
                 }, function () {
                   return resolve(true);
                 });
               })["catch"](function (err) {
-                return _this26.setState({
-                  errorText: err === NOT_FOUND ? _this26.props.t('ra_Cannot find "%s"', folder) : _this26.props.t('ra_Cannot read "%s"', folder)
+                return _this25.setState({
+                  errorText: err === NOT_FOUND ? _this25.props.t('ra_Cannot find "%s"', folder) : _this25.props.t('ra_Cannot read "%s"', folder)
                 });
               });
+            } else {
+              resolve(true);
             }
-            return resolve(true);
           }).then(function (result) {
-            return result && _this26.setState({
-              selected: _this26.state.path,
+            return result && _this25.setState({
+              selected: _this25.state.path,
               currentDir: folder,
               pathFocus: false
             });
           });
-        } else if (!_this26.lastSelect || Date.now() - _this26.lastSelect > 100) {
-          _this26.setState({
+        } else if (!_this25.lastSelect || Date.now() - _this25.lastSelect > 100) {
+          _this25.setState({
             pathFocus: false
           });
         }
@@ -1844,7 +1912,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderBreadcrumb",
     value: function renderBreadcrumb() {
-      var _this27 = this;
+      var _this26 = this;
       var parts = this.state.selected.startsWith('/') ? this.state.selected.split('/') : "/".concat(this.state.selected).split('/');
       var p = [];
       return parts.map(function (part, i) {
@@ -1852,21 +1920,21 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         var path = p.join('/');
         if (i < parts.length - 1) {
           return [/*#__PURE__*/_react["default"].createElement("div", {
-            key: "".concat(_this27.state.selected, "_").concat(i),
-            className: _this27.props.classes.pathDivBreadcrumbDir,
+            key: "".concat(_this26.state.selected, "_").concat(i),
+            className: _this26.props.classes.pathDivBreadcrumbDir,
             onClick: function onClick(e) {
-              return _this27.changeFolder(e, path || '/');
+              return _this26.changeFolder(e, path || '/');
             }
-          }, part || _this27.props.t('ra_Root')), /*#__PURE__*/_react["default"].createElement("span", {
-            key: "".concat(_this27.state.selected, "_s_").concat(i),
-            className: _this27.props.classes.pathDivBreadcrumbSlash
+          }, part || _this26.props.t('ra_Root')), /*#__PURE__*/_react["default"].createElement("span", {
+            key: "".concat(_this26.state.selected, "_s_").concat(i),
+            className: _this26.props.classes.pathDivBreadcrumbSlash
           }, '>')];
         }
         return /*#__PURE__*/_react["default"].createElement("div", {
-          key: "".concat(_this27.state.selected, "_").concat(i),
-          className: _this27.props.classes.pathDivBreadcrumbFile,
+          key: "".concat(_this26.state.selected, "_").concat(i),
+          className: _this26.props.classes.pathDivBreadcrumbFile,
           onClick: function onClick() {
-            return _this27.setState({
+            return _this26.setState({
               pathFocus: true
             });
           }
@@ -1876,20 +1944,20 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderPath",
     value: function renderPath() {
-      var _this28 = this;
+      var _this27 = this;
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: "path",
         className: _Utils["default"].clsx(this.props.classes.pathDiv, !this.state.pathFocus && this.props.classes.pathDivBreadcrumb)
       }, this.state.pathFocus ? /*#__PURE__*/_react["default"].createElement(_Input["default"], {
         value: this.state.path,
         onKeyDown: function onKeyDown(e) {
-          return e.keyCode === 13 && _this28.changeToPath();
+          return e.keyCode === 13 && _this27.changeToPath();
         },
         onBlur: function onBlur() {
-          return _this28.changeToPath();
+          return _this27.changeToPath();
         },
         onChange: function onChange(e) {
-          return _this28.setState({
+          return _this27.setState({
             path: e.target.value
           });
         },
@@ -1899,19 +1967,19 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this29 = this;
+      var _this28 = this;
       if (!this.props.ready) {
         return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], null);
       }
       if (this.state.loadAllFolders && !this.foldersLoading) {
         this.foldersLoading = true;
         setTimeout(function () {
-          _this29.setState({
+          _this28.setState({
             loadAllFolders: false,
             folders: {}
           }, function () {
-            _this29.foldersLoading = false;
-            _this29.loadFolders();
+            _this28.foldersLoading = false;
+            _this28.loadFolders();
           });
         }, 300);
       }
@@ -1961,6 +2029,7 @@ FileBrowser.propTypes = {
   socket: _propTypes["default"].object.isRequired,
   ready: _propTypes["default"].bool,
   expertMode: _propTypes["default"].bool,
+  showTypeSelector: _propTypes["default"].bool,
   showToolbar: _propTypes["default"].bool,
   allowUpload: _propTypes["default"].bool,
   allowDownload: _propTypes["default"].bool,
@@ -1976,7 +2045,7 @@ FileBrowser.propTypes = {
   filterFiles: _propTypes["default"].array,
   // like ['png', 'svg', 'bmp', 'jpg', 'jpeg']
   filterByType: _propTypes["default"].string,
-  // images, code or txt from FileViewer.EXTENSIONS
+  // images, code or txt from EXTENSIONS
   onSelect: _propTypes["default"].func,
   // function (id, isDoubleClick)