@iobroker/adapter-react-v5 0.0.2

package/Components/FileBrowser.js

@@ -0,0 +1,2147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
+
+var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
+
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
+
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+
+var _Input = _interopRequireDefault(require("@mui/material/Input"));
+
+var _material = require("@mui/material");
+
+var _Error = _interopRequireDefault(require("../Dialogs/Error"));
+
+var _Utils = _interopRequireDefault(require("./Utils"));
+
+var _TextInput = _interopRequireDefault(require("../Dialogs/TextInput"));
+
+var _FileViewer = _interopRequireWildcard(require("./FileViewer"));
+
+var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _Bookmark = _interopRequireDefault(require("@mui/icons-material/Bookmark"));
+
+var _BookmarkBorder = _interopRequireDefault(require("@mui/icons-material/BookmarkBorder"));
+
+var _Description = _interopRequireDefault(require("@mui/icons-material/Description"));
+
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+
+var _Code = _interopRequireDefault(require("@mui/icons-material/Code"));
+
+var _InsertDriveFile = _interopRequireDefault(require("@mui/icons-material/InsertDriveFile"));
+
+var _Publish = _interopRequireDefault(require("@mui/icons-material/Publish"));
+
+var _MusicNote = _interopRequireDefault(require("@mui/icons-material/MusicNote"));
+
+var _SaveAlt = _interopRequireDefault(require("@mui/icons-material/SaveAlt"));
+
+var _CreateNewFolder = _interopRequireDefault(require("@mui/icons-material/CreateNewFolder"));
+
+var _FolderOpen = _interopRequireDefault(require("@mui/icons-material/FolderOpen"));
+
+var _List = _interopRequireDefault(require("@mui/icons-material/List"));
+
+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 _IconExpert = _interopRequireDefault(require("../icons/IconExpert"));
+
+var _no_icon = _interopRequireDefault(require("../assets/no_icon.svg"));
+
+var _IconClosed = _interopRequireDefault(require("../icons/IconClosed"));
+
+var _IconOpen = _interopRequireDefault(require("../icons/IconOpen"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+var withWidth = function withWidth() {
+  return function (WrappedComponent) {
+    return function (props) {
+      return /*#__PURE__*/_react["default"].createElement(WrappedComponent, _extends({}, props, {
+        width: "xs"
+      }));
+    };
+  };
+};
+
+var ROW_HEIGHT = 32;
+var BUTTON_WIDTH = 32;
+var TILE_HEIGHT = 120;
+var TILE_WIDTH = 64;
+var NOT_FOUND = 'Not found';
+
+var styles = function styles(theme) {
+  return {
+    dialog: {
+      height: "calc(100% - ".concat(theme.mixins.toolbar.minHeight, "px)")
+    },
+    root: {
+      width: '100%',
+      overflow: 'hidden',
+      height: '100%',
+      position: 'relative'
+    },
+    filesDiv: {
+      width: "calc(100% - ".concat(theme.spacing(2), ")"),
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      padding: theme.spacing(1)
+    },
+    filesDivTable: {
+      height: "calc(100% - ".concat(48 + theme.spacing(1), "px)")
+    },
+    filesDivTile: {
+      height: "calc(100% - ".concat(48 * 2 + theme.spacing(1), "px)"),
+      display: 'flex',
+      alignContent: 'flex-start',
+      alignItems: 'stretch',
+      flexWrap: 'wrap',
+      flex: "0 0 ".concat(TILE_WIDTH, "px")
+    },
+    itemTile: {
+      position: 'relative',
+      userSelect: 'none',
+      cursor: 'pointer',
+      height: TILE_HEIGHT,
+      width: TILE_WIDTH,
+      display: 'inline-block',
+      textAlign: 'center',
+      opacity: 0.1,
+      transition: 'opacity 1s',
+      margin: 4,
+      '&:hover': {
+        background: theme.palette.secondary.light,
+        color: _Utils["default"].invertColor(theme.palette.secondary.main, true)
+      }
+    },
+    itemNameFolderTile: {
+      fontWeight: 'bold'
+    },
+    itemNameTile: {
+      width: '100%',
+      height: 32,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      fontSize: 12,
+      textAlign: 'center',
+      wordBreak: 'break-all'
+    },
+    itemFolderIconTile: {
+      width: '100%',
+      height: TILE_HEIGHT - 32 - 16 - 8,
+      // name + size
+      display: 'block',
+      paddingLeft: 8,
+      color: theme.palette.secondary.main || '#fbff7d'
+    },
+    itemFolderIconBack: {
+      position: 'absolute',
+      top: 22,
+      left: 18,
+      zIndex: 1,
+      color: theme.palette.mode === 'dark' ? '#FFF' : '#000'
+    },
+    itemSizeTile: {
+      width: '100%',
+      height: 16,
+      textAlign: 'center',
+      fontSize: 10
+    },
+    itemImageTile: {
+      width: 'calc(100% - 8px)',
+      height: TILE_HEIGHT - 32 - 16 - 8,
+      // name + size
+      margin: 4,
+      display: 'block',
+      textAlign: 'center',
+      objectFit: 'contain'
+    },
+    itemIconTile: {
+      width: '100%',
+      height: TILE_HEIGHT - 32 - 16 - 8,
+      // name + size
+      display: 'block',
+      objectFit: 'contain'
+    },
+    itemSelected: {
+      background: theme.palette.primary.main,
+      color: _Utils["default"].invertColor(theme.palette.primary.main, true)
+    },
+    itemTable: {
+      userSelect: 'none',
+      cursor: 'pointer',
+      height: ROW_HEIGHT,
+      display: 'inline-flex',
+      lineHeight: ROW_HEIGHT + 'px',
+      '&:hover': {
+        background: theme.palette.secondary.light,
+        color: _Utils["default"].invertColor(theme.palette.secondary.main, true)
+      }
+    },
+    itemNameTable: {
+      display: 'inline-block',
+      paddingLeft: 10,
+      fontSize: '1rem',
+      verticalAlign: 'top',
+      flexGrow: 1
+    },
+    itemNameFolderTable: {
+      fontWeight: 'bold'
+    },
+    itemSizeTable: {
+      display: 'inline-block',
+      width: 60,
+      verticalAlign: 'top',
+      textAlign: 'right'
+    },
+    itemAccessTable: {
+      // display: 'inline-block',
+      verticalAlign: 'top',
+      width: 60,
+      textAlign: 'right',
+      paddingRight: 5,
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    itemImageTable: {
+      display: 'inline-block',
+      width: 30,
+      marginTop: 1,
+      objectFit: 'contain',
+      maxHeight: 30
+    },
+    itemIconTable: {
+      display: 'inline-block',
+      marginTop: 1,
+      width: 30,
+      height: 30
+    },
+    itemFolderTable: {},
+    itemFolderTemp: {
+      opacity: 0.4
+    },
+    itemFolderIconTable: {
+      marginTop: 1,
+      marginLeft: theme.spacing(1),
+      display: 'inline-block',
+      width: 30,
+      height: 30,
+      color: theme.palette.secondary.main || '#fbff7d'
+    },
+    itemDownloadButtonTable: {
+      display: 'inline-block',
+      width: BUTTON_WIDTH,
+      height: ROW_HEIGHT,
+      minWidth: BUTTON_WIDTH,
+      verticalAlign: 'top',
+      padding: 0,
+      '& span': {
+        paddingTop: 9
+      },
+      '& svg': {
+        width: 14,
+        height: 14,
+        fontSize: '1rem'
+      }
+    },
+    itemAclButtonTable: {
+      width: BUTTON_WIDTH,
+      height: ROW_HEIGHT,
+      minWidth: BUTTON_WIDTH,
+      verticalAlign: 'top',
+      padding: 0,
+      fontSize: 12,
+      display: 'flex'
+    },
+    itemDeleteButtonTable: {
+      display: 'inline-block',
+      width: BUTTON_WIDTH,
+      height: ROW_HEIGHT,
+      minWidth: BUTTON_WIDTH,
+      verticalAlign: 'top',
+      padding: 0,
+      '& svg': {
+        width: 18,
+        height: 18,
+        fontSize: '1.5rem'
+      }
+    },
+    uploadDiv: {
+      top: 0,
+      zIndex: 1,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      position: 'absolute',
+      opacity: 0.9,
+      textAlign: 'center',
+      background: '#FFFFFF'
+    },
+    uploadDivDragging: {
+      opacity: 1
+    },
+    uploadCenterDiv: {
+      margin: 20,
+      border: '3px dashed grey',
+      borderRadius: 30,
+      width: 'calc(100% - 40px)',
+      height: 'calc(100% - 40px)',
+      position: 'relative',
+      color: theme.palette.mode === 'dark' ? '#222' : '#CCC'
+    },
+    uploadCenterIcon: {
+      width: '25%',
+      height: '25%'
+    },
+    uploadCenterText: {
+      fontSize: 24,
+      fontWeight: 'bold'
+    },
+    uploadCloseButton: {
+      zIndex: 2,
+      position: 'absolute',
+      top: 30,
+      right: 30
+    },
+    uploadCenterTextAndIcon: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      height: '30%',
+      width: '50%',
+      margin: '-15% 0 0 -25%'
+    },
+    menuButtonExpertActive: {
+      color: '#c00000'
+    },
+    pathDiv: {
+      display: 'flex',
+      width: "calc(100% - ".concat(theme.spacing(2), ")"),
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      textOverflow: 'clip',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    },
+    pathDivInput: {
+      width: '100%'
+    },
+    pathDivBreadcrumb: {
+      paddingTop: 3,
+      paddingBottom: 2,
+      borderBottom: 'solid 1px'
+    },
+    pathDivBreadcrumbDir: {
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingBottom: 4,
+      cursor: 'pointer',
+      '&:hover': {
+        background: theme.palette.mode === 'dark' ? '#333' : '#CCC'
+      }
+    },
+    pathDivBreadcrumbSlash: {
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingBottom: 4,
+      opacity: 0.7
+    },
+    pathDivBreadcrumbFile: {
+      cursor: 'pointer',
+      flexGrow: 1
+    },
+    backgroundImageLight: {
+      background: 'white'
+    },
+    backgroundImageDark: {
+      background: 'black'
+    },
+    backgroundImageColored: {
+      background: 'silver'
+    },
+    '@media screen and (max-width: 500px)': {
+      itemNameTable: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'end',
+        direction: 'rtl'
+      }
+    }
+  };
+};
+
+var USER_DATA = '0_userdata.0';
+
+function sortFolders(a, b) {
+  if (a.folder && b.folder) {
+    return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
+  } else if (a.folder) {
+    return -1;
+  } else if (b.folder) {
+    return 1;
+  } else {
+    return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
+  }
+}
+
+function getParentDir(dir) {
+  var parts = (dir || '').split('/');
+  parts.length && parts.pop();
+  return parts.join('/');
+}
+
+function isFile(path) {
+  var ext = _Utils["default"].getFileExtension(path);
+
+  if (ext && ext.toLowerCase().match(/[a-z]+/) && ext.length < 5) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+var TABLE = 'Table';
+var TILE = 'Tile';
+/**
+ * @extends {React.Component<import('./types').FileBrowserProps>}
+ */
+
+var FileBrowser = /*#__PURE__*/function (_Component) {
+  _inherits(FileBrowser, _Component);
+
+  var _super = _createSuper(FileBrowser);
+
+  /**
+   * @param {Readonly<import("./types").FileBrowserProps>} props
+   */
+  function FileBrowser(props) {
+    var _this;
+
+    _classCallCheck(this, FileBrowser);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "setStateBackgroundImage", function () {
+      var array = ['light', 'dark', 'colored', 'delete'];
+
+      _this.setState(function (_ref) {
+        var backgroundImage = _ref.backgroundImage;
+
+        if (array.indexOf(backgroundImage) !== -1 && array.length - 1 !== array.indexOf(backgroundImage)) {
+          window.localStorage.setItem('files.backgroundImage', array[array.indexOf(backgroundImage) + 1]);
+          return {
+            backgroundImage: array[array.indexOf(backgroundImage) + 1]
+          };
+        } else {
+          window.localStorage.setItem('files.backgroundImage', array[0]);
+          return {
+            backgroundImage: array[0]
+          };
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getClassBackgroundImage", function () {
+      //['light', 'dark', 'colored', 'delete']
+      switch (_this.state.backgroundImage) {
+        case 'light':
+          return _this.props.classes.backgroundImageLight;
+
+        case 'dark':
+          return _this.props.classes.backgroundImageDark;
+
+        case 'colored':
+          return _this.props.classes.backgroundImageColored;
+
+        case 'delete':
+          return null;
+
+        default:
+          return null;
+      }
+    });
+
+    var expanded = window.localStorage.getItem('files.expanded') || '[]';
+
+    try {
+      expanded = JSON.parse(expanded);
+    } catch (e) {
+      expanded = [];
+    }
+
+    var viewType;
+
+    if (_this.props.showViewTypeButton) {
+      viewType = window.localStorage.getItem('files.viewType') || TABLE;
+    } else {
+      viewType = TABLE;
+    }
+
+    var selected = _this.props.selected || window.localStorage.getItem('files.selected') || USER_DATA;
+    var currentDir = '';
+
+    if (isFile(selected)) {
+      currentDir = getParentDir(selected);
+    } else {
+      currentDir = selected;
+    }
+
+    var _backgroundImage = window.localStorage.getItem('files.backgroundImage') || null;
+
+    _this.state = {
+      viewType: viewType,
+      folders: {},
+      filterEmpty: window.localStorage.getItem('files.empty') !== 'false',
+      expanded: expanded,
+      currentDir: currentDir,
+      expertMode: _this.props.expertMode,
+      addFolder: false,
+      uploadFile: false,
+      deleteItem: '',
+      marked: [],
+      viewer: '',
+      formatEditFile: '',
+      path: selected,
+      selected: selected,
+      errorText: '',
+      modalEditOfAccess: false,
+      backgroundImage: _backgroundImage,
+      queueLength: 0,
+      loadAllFolders: false,
+      allFoldersLoaded: false
+    };
+    _this.imagePrefix = _this.props.imagePrefix || './files/';
+    _this.levelPadding = _this.props.levelPadding || 20;
+    _this.mounted = true;
+    _this.suppressDeleteConfirm = 0;
+    _this.browseList = [];
+    _this.browseListRunning = false;
+    _this.initialReadFinished = false;
+    return _this;
+  }
+
+  _createClass(FileBrowser, [{
+    key: "loadFolders",
+    value: function loadFolders() {
+      var _this2 = this;
+
+      this.initialReadFinished = false;
+      return this.browseFolder('/').then(function (folders) {
+        return _this2.state.viewType === TABLE ? _this2.browseFolders(_toConsumableArray(_this2.state.expanded), folders) : _this2.state.currentDir && _this2.state.currentDir !== '/' ? _this2.browseFolder(_this2.state.currentDir, folders) : Promise.resolve(folders);
+      }).then(function (folders) {
+        return _this2.setState({
+          folders: folders
+        }, function () {
+          if (_this2.state.viewType === TABLE && !_this2.findItem(_this2.state.selected)) {
+            var parts = _this2.state.selected.split('/');
+
+            while (parts.length && !_this2.findItem(parts.join('/'))) {
+              parts.pop();
+            }
+
+            var selected;
+
+            if (parts.length) {
+              selected = parts.join('/');
+            } else {
+              selected = USER_DATA;
+            }
+
+            _this2.setState({
+              selected: selected,
+              path: selected,
+              pathFocus: false
+            }, function () {
+              return _this2.scrollToSelected();
+            });
+          } else {
+            _this2.scrollToSelected();
+          }
+
+          _this2.initialReadFinished = true;
+        });
+      });
+    }
+  }, {
+    key: "scrollToSelected",
+    value: function scrollToSelected() {
+      if (this.mounted) {
+        var el = document.getElementById(this.state.selected);
+        el && el.scrollIntoView();
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.mounted = true;
+      this.loadFolders();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mounted = false;
+      this.browseList = null;
+      this.browseListRunning = false;
+    }
+  }, {
+    key: "browseFolders",
+    value: function browseFolders(foldersList, _newFolders, _resolve) {
+      var _this3 = this;
+
+      if (!_newFolders) {
+        _newFolders = {};
+        Object.keys(this.state.folders).forEach(function (folder) {
+          return _newFolders[folder] = _this3.state.folders[folder];
+        });
+      }
+
+      if (!_resolve) {
+        return new Promise(function (resolve) {
+          return _this3.browseFolders(foldersList, _newFolders, resolve);
+        });
+      }
+
+      if (!foldersList || !foldersList.length) {
+        _resolve(_newFolders);
+      } else {
+        this.browseFolder(foldersList.shift(), _newFolders).then(function () {
+          return setTimeout(function () {
+            return _this3.browseFolders(foldersList, _newFolders, _resolve);
+          }, 0);
+        })["catch"](function () {
+          return setTimeout(function () {
+            return _this3.browseFolders(foldersList, _newFolders, _resolve);
+          }, 0);
+        });
+      }
+    }
+  }, {
+    key: "readDirSerial",
+    value: function readDirSerial(adapter, relPath) {
+      var _this4 = this;
+
+      return new Promise(function (resolve, reject) {
+        if (_this4.browseList) {
+          // if component still mounted
+          _this4.browseList.push({
+            resolve: resolve,
+            reject: reject,
+            adapter: adapter,
+            relPath: relPath
+          });
+
+          !_this4.browseListRunning && _this4.processBrowseList();
+        }
+      });
+    }
+  }, {
+    key: "processBrowseList",
+    value: function processBrowseList(level) {
+      var _this5 = this;
+
+      if (!this.browseListRunning && this.browseList && this.browseList.length) {
+        this.browseListRunning = true;
+
+        if (this.browseList.length > 10) {
+          // not too often
+          if (!(this.browseList.length % 10)) {
+            this.setState({
+              queueLength: this.browseList.length
+            });
+          }
+        } else {
+          this.setState({
+            queueLength: this.browseList.length
+          });
+        }
+
+        this.browseList[0].processing = true;
+        this.props.socket.readDir(this.browseList[0].adapter, this.browseList[0].relPath).then(function (files) {
+          if (_this5.browseList) {
+            // if component still mounted
+            var item = _this5.browseList.shift();
+
+            if (item) {
+              var resolve = item.resolve;
+              item.resolve = null;
+              item.reject = null;
+              item.adapter = null;
+              item.relPath = null;
+              resolve(files);
+              _this5.browseListRunning = false;
+
+              if (_this5.browseList.length) {
+                if (level < 5) {
+                  _this5.processBrowseList(level + 1);
+                } else {
+                  setTimeout(function () {
+                    return _this5.processBrowseList(0);
+                  }, 0);
+                }
+              } else {
+                _this5.setState({
+                  queueLength: 0
+                });
+              }
+            } else {
+              _this5.setState({
+                queueLength: 0
+              });
+            }
+          }
+        })["catch"](function (e) {
+          if (_this5.browseList) {
+            // if component still mounted
+            var item = _this5.browseList.shift();
+
+            if (item) {
+              var reject = item.reject;
+              item.resolve = null;
+              item.reject = null;
+              item.adapter = null;
+              item.relPath = null;
+              reject(e);
+              _this5.browseListRunning = false;
+
+              if (_this5.browseList.length) {
+                if (level < 5) {
+                  _this5.processBrowseList(level + 1);
+                } else {
+                  setTimeout(function () {
+                    return _this5.processBrowseList(0);
+                  }, 0);
+                }
+              } else {
+                _this5.setState({
+                  queueLength: 0
+                });
+              }
+            } else {
+              _this5.setState({
+                queueLength: 0
+              });
+            }
+          }
+        });
+      }
+    }
+  }, {
+    key: "browseFolder",
+    value: function browseFolder(folderId, _newFolders, _checkEmpty) {
+      var _this6 = this;
+
+      if (!_newFolders) {
+        _newFolders = {};
+        Object.keys(this.state.folders).forEach(function (folder) {
+          return _newFolders[folder] = _this6.state.folders[folder];
+        });
+      }
+
+      if (_newFolders[folderId]) {
+        if (!_checkEmpty) {
+          return new Promise(function (resolve, reject) {
+            return Promise.all(_newFolders[folderId].filter(function (item) {
+              return item.folder;
+            }).map(function (item) {
+              return _this6.browseFolder(item.id, _newFolders, true)["catch"](function (error) {});
+            })).then(function () {
+              return resolve(_newFolders);
+            })["catch"](function (error) {
+              return reject(error);
+            });
+          });
+        } else {
+          return Promise.resolve(_newFolders);
+        }
+      }
+
+      if (!folderId || folderId === '/') {
+        return this.props.socket.readMetaItems().then(function (objs) {
+          var _folders = [];
+          var userData = null; // load only adapter.admin and not other meta files like hm-rpc.0.devices.blablabla
+
+          objs = objs.filter(function (obj) {
+            if (!_this6.state.expertMode) {
+              return obj._id === '0_userdata.0' || obj._id === 'vis.0';
+            } else {
+              return obj._id.split('.').length <= 2;
+            }
+          }); // remember, that all folders are loaded
+
+          if (_this6.state.expertMode) {
+            _this6.setState({
+              allFoldersLoaded: true,
+              loadFolders: false
+            });
+          }
+
+          objs.forEach(function (obj) {
+            var item = {
+              id: obj._id,
+              name: obj._id,
+              title: obj.common && obj.common.name || obj._id,
+              meta: true,
+              from: obj.from,
+              ts: obj.ts,
+              color: obj.common && obj.common.color,
+              icon: obj.common && obj.common.icon,
+              folder: true,
+              acl: obj.acl,
+              level: 0
+            };
+
+            if (item.id === USER_DATA) {
+              // user data must be first
+              userData = item;
+            } else {
+              _folders.push(item);
+            }
+          });
+
+          _folders.sort(function (a, b) {
+            return a.id > b.id ? 1 : a.id < b.id ? -1 : 0;
+          });
+
+          _folders.unshift(userData);
+
+          _newFolders[folderId || '/'] = _folders;
+
+          if (!_checkEmpty) {
+            return Promise.all(_folders.filter(function (item) {
+              return item.folder;
+            }).map(function (item) {
+              return _this6.browseFolder(item.id, _newFolders, true)["catch"](function (error) {});
+            })).then(function () {
+              return _newFolders;
+            });
+          } else {
+            return _newFolders;
+          }
+        })["catch"](function (e) {
+          return _this6.initialReadFinished && window.alert('Cannot read meta items: ' + e);
+        });
+      } else {
+        var parts = folderId.split('/');
+        var level = parts.length;
+        var adapter = parts.shift();
+        var relPath = parts.join('/'); // make all requests here serial
+
+        return this.readDirSerial(adapter, relPath).then(function (files) {
+          var _folders = [];
+          files.forEach(function (file) {
+            var item = {
+              id: folderId + '/' + file.file,
+              ext: _Utils["default"].getFileExtension(file.file),
+              folder: file.isDir,
+              name: file.file,
+              size: file.stats && file.stats.size,
+              modified: file.modifiedAt,
+              acl: file.acl,
+              level: level
+            };
+
+            _folders.push(item);
+          });
+
+          _folders.sort(sortFolders);
+
+          _newFolders[folderId] = _folders;
+
+          if (!_checkEmpty) {
+            return Promise.all(_folders.filter(function (item) {
+              return item.folder;
+            }).map(function (item) {
+              return _this6.browseFolder(item.id, _newFolders, true);
+            })).then(function () {
+              return _newFolders;
+            });
+          } else {
+            return _newFolders;
+          }
+        })["catch"](function (e) {
+          _this6.initialReadFinished && window.alert("Cannot read ".concat(adapter).concat(relPath ? '/' + relPath : '', ": ").concat(e));
+          _newFolders[folderId] = [];
+          return _newFolders;
+        });
+      }
+    }
+  }, {
+    key: "toggleFolder",
+    value: function toggleFolder(item, e) {
+      var _this7 = this;
+
+      e && e.stopPropagation();
+
+      var expanded = _toConsumableArray(this.state.expanded);
+
+      var pos = expanded.indexOf(item.id);
+
+      if (pos === -1) {
+        expanded.push(item.id);
+        expanded.sort();
+        window.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+
+        if (!item.temp) {
+          return this.browseFolder(item.id).then(function (folders) {
+            return _this7.setState({
+              expanded: expanded,
+              folders: folders
+            });
+          })["catch"](function (err) {
+            return window.alert(err === NOT_FOUND ? _this7.props.t('re_Cannot find "%s"', item.id) : _this7.props.t('re_Cannot read "%s"', item.id));
+          });
+        } else {
+          this.setState({
+            expanded: expanded
+          });
+        }
+      } else {
+        expanded.splice(pos, 1);
+        window.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+        this.setState({
+          expanded: expanded
+        });
+      }
+    }
+  }, {
+    key: "changeFolder",
+    value: function changeFolder(e, folder) {
+      var _this8 = this;
+
+      e && e.stopPropagation();
+      this.lastSelect = Date.now();
+      folder = folder || getParentDir(this.state.currentDir);
+
+      if (folder === '/') {
+        folder = '';
+      }
+
+      window.localStorage.setItem('files.currentDir', folder);
+
+      if (folder && !this.state.folders[folder]) {
+        return this.browseFolder(folder).then(function (folders) {
+          return _this8.setState({
+            folders: folders,
+            path: folder,
+            currentDir: folder,
+            selected: folder,
+            pathFocus: false
+          }, function () {
+            return _this8.props.onSelect && _this8.props.onSelect('');
+          });
+        });
+      } else {
+        this.setState({
+          currentDir: folder,
+          selected: folder,
+          path: folder,
+          pathFocus: false
+        }, function () {
+          return _this8.props.onSelect && _this8.props.onSelect('');
+        });
+      }
+    }
+  }, {
+    key: "select",
+    value: function select(id, e, cb) {
+      var _this9 = this;
+
+      if (typeof e === 'function') {
+        cb = e;
+        e = null;
+      }
+
+      e && e.stopPropagation();
+      this.lastSelect = Date.now();
+      window.localStorage.setItem('files.selected', id);
+      this.setState({
+        selected: id,
+        path: id,
+        pathFocus: false
+      }, function () {
+        if (_this9.props.onSelect) {
+          var ext = _Utils["default"].getFileExtension(id);
+
+          if ((!_this9.props.filterFiles || _this9.props.filterFiles.includes(ext)) && (!_this9.props.filterByType || _FileViewer.EXTENSIONS[_this9.props.filterByType].includes(ext))) {
+            _this9.props.onSelect(id);
+          } else {
+            _this9.props.onSelect('');
+          }
+        }
+
+        cb && cb();
+      });
+    }
+  }, {
+    key: "renderFolder",
+    value: function renderFolder(item, expanded) {
+      var _this10 = this;
+
+      if (this.state.filterEmpty && (!this.state.folders[item.id] || !this.state.folders[item.id].length) && item.id !== USER_DATA && !item.temp) {
+        return null;
+      }
+
+      var Icon = expanded ? _IconOpen["default"] : _IconClosed["default"];
+      var padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.id,
+        id: item.id,
+        style: this.state.viewType === TABLE ? {
+          marginLeft: padding,
+          width: 'calc(100% - ' + padding + 'px'
+        } : {},
+        onClick: function onClick(e) {
+          return _this10.state.viewType === TABLE ? _this10.select(item.id, e) : _this10.changeFolder(e, item.id);
+        },
+        onDoubleClick: function onDoubleClick(e) {
+          return _this10.state.viewType === TABLE && _this10.toggleFolder(item, e);
+        },
+        title: item.title && _typeof(item.title) === 'object' ? item.title[this.props.lang] || item.title.end || '' : item.title || null,
+        className: _Utils["default"].clsx('browserItem', this.props.classes['item' + this.state.viewType], this.props.classes['itemFolder' + this.state.viewType], this.state.selected === item.id && this.props.classes.itemSelected, item.temp && this.props.classes['itemFolderTemp'])
+      }, /*#__PURE__*/_react["default"].createElement(Icon, {
+        className: this.props.classes['itemFolderIcon' + this.state.viewType],
+        onClick: this.state.viewType === TABLE ? function (e) {
+          return _this10.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])
+      }, item.name === USER_DATA ? this.props.t('ra_User files') : item.name), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
+        smDown: true
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemSize' + this.state.viewType]
+      }, this.state.viewType === TABLE && this.state.folders[item.id] ? this.state.folders[item.id].length : '')), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
+        smDown: true
+      }, this.state.viewType === TABLE ? this.formatAcl(item.acl) : null), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
+        smDown: true
+      }, this.state.viewType === TABLE && this.props.expertMode && /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemDeleteButton' + this.state.viewType]
+      })), this.state.viewType === TABLE && this.props.allowDownload ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemDownloadButton' + this.state.viewType]
+      }) : null, this.state.viewType === TABLE && this.props.allowDelete && this.state.folders[item.id] && this.state.folders[item.id].length && (this.state.expertMode || item.id.startsWith(USER_DATA) || item.id.startsWith('vis.0/')) ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        "aria-label": "delete",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+
+          if (_this10.suppressDeleteConfirm > Date.now()) {
+            _this10.deleteItem(item.id);
+          } else {
+            _this10.setState({
+              deleteItem: item.id
+            });
+          }
+        },
+        className: this.props.classes['itemDeleteButton' + this.state.viewType],
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
+        fontSize: "small"
+      })) : this.state.viewType === TABLE && this.props.allowDelete ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemDeleteButton' + this.state.viewType]
+      }) : null);
+    }
+  }, {
+    key: "renderBackFolder",
+    value: function renderBackFolder() {
+      var _this11 = this;
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: this.state.currentDir,
+        id: this.state.currentDir,
+        onClick: function onClick(e) {
+          return _this11.changeFolder(e);
+        },
+        title: this.props.t('re_Back to %s', getParentDir(this.state.currentDir)),
+        className: _Utils["default"].clsx('browserItem', this.props.classes['item' + this.state.viewType], this.props.classes['itemFolder' + this.state.viewType])
+      }, /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], {
+        className: this.props.classes['itemFolderIcon' + this.state.viewType]
+      }), /*#__PURE__*/_react["default"].createElement(_ArrowBack["default"], {
+        className: this.props.classes.itemFolderIconBack
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: _Utils["default"].clsx(this.props.classes['itemName' + this.state.viewType], this.props.classes['itemNameFolder' + this.state.viewType])
+      }, ".."));
+    }
+  }, {
+    key: "formatSize",
+    value: function formatSize(size) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemSize' + this.state.viewType]
+      }, size || size === 0 ? _Utils["default"].formatBytes(size) : '');
+    }
+  }, {
+    key: "formatAcl",
+    value: function formatAcl(acl) {
+      var _this12 = this;
+
+      var access = acl && (acl.permissions || acl.file);
+
+      if (access) {
+        access = access.toString(16).padStart(3, '0');
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemAccess' + this.state.viewType]
+      }, " ", /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        onClick: function onClick() {
+          return _this12.setState({
+            modalEditOfAccess: true
+          });
+        },
+        className: this.props.classes['itemAclButton' + this.state.viewType],
+        size: "large"
+      }, access || '---'));
+    }
+  }, {
+    key: "getFileIcon",
+    value: function getFileIcon(ext) {
+      switch (ext) {
+        case 'json':
+          return /*#__PURE__*/_react["default"].createElement(_Bookmark["default"], {
+            className: this.props.classes['itemIcon' + this.state.viewType]
+          });
+
+        case 'css':
+          return /*#__PURE__*/_react["default"].createElement(_BookmarkBorder["default"], {
+            className: this.props.classes['itemIcon' + this.state.viewType]
+          });
+
+        case 'js':
+        case 'ts':
+          return /*#__PURE__*/_react["default"].createElement(_Code["default"], {
+            className: this.props.classes['itemIcon' + this.state.viewType]
+          });
+
+        case 'html':
+        case 'md':
+          return /*#__PURE__*/_react["default"].createElement(_Description["default"], {
+            className: this.props.classes['itemIcon' + this.state.viewType]
+          });
+
+        case 'mp3':
+        case 'ogg':
+        case 'wav':
+        case 'm4a':
+        case 'mp4':
+        case 'flac':
+          return /*#__PURE__*/_react["default"].createElement(_MusicNote["default"], {
+            className: this.props.classes['itemIcon' + this.state.viewType]
+          });
+
+        default:
+          return /*#__PURE__*/_react["default"].createElement(_InsertDriveFile["default"], {
+            className: this.props.classes['itemIcon' + this.state.viewType]
+          });
+      }
+    }
+  }, {
+    key: "getEditFile",
+    value: function getEditFile(ext) {
+      switch (ext) {
+        case 'json':
+        case 'js':
+        case 'html':
+        case 'txt':
+          return true;
+
+        default:
+          return false;
+      }
+    }
+  }, {
+    key: "renderFile",
+    value: function renderFile(item) {
+      var _this13 = this;
+
+      var padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
+
+      var ext = _Utils["default"].getFileExtension(item.name);
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.id,
+        id: item.id,
+        onDoubleClick: function onDoubleClick() {
+          if (!_this13.props.onSelect) {
+            _this13.setState({
+              viewer: _this13.imagePrefix + item.id
+            });
+          } else if ((!_this13.props.filterFiles || _this13.props.filterFiles.includes(item.ext)) && (!_this13.props.filterByType || _FileViewer.EXTENSIONS[_this13.props.filterByType].includes(item.ext))) {
+            _this13.props.onSelect(item.id, true);
+          }
+        },
+        onClick: function onClick(e) {
+          return _this13.select(item.id, e);
+        },
+        style: this.state.viewType === TABLE ? {
+          marginLeft: padding,
+          width: 'calc(100% - ' + padding + 'px)'
+        } : {},
+        className: _Utils["default"].clsx('browserItem', this.props.classes['item' + this.state.viewType], this.props.classes['itemFile' + this.state.viewType], this.state.selected === item.id && this.props.classes.itemSelected)
+      }, _FileViewer.EXTENSIONS.images.includes(ext) ? /*#__PURE__*/_react["default"].createElement("img", {
+        onError: function onError(e) {
+          e.target.onerror = null;
+          e.target.src = _no_icon["default"];
+        },
+        className: _Utils["default"].clsx(this.props.classes['itemImage' + this.state.viewType], this.getClassBackgroundImage()),
+        src: this.imagePrefix + item.id,
+        alt: item.name
+      }) : this.getFileIcon(ext), /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemName' + this.state.viewType]
+      }, item.name), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
+        smDown: true
+      }, this.formatSize(item.size)), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
+        smDown: true
+      }, this.state.viewType === TABLE ? this.formatAcl(item.acl) : null), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
+        smDown: true
+      }, this.state.viewType === TABLE && this.props.expertMode && this.getEditFile(ext) ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        "aria-label": "delete",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+
+          if (!_this13.props.onSelect) {
+            _this13.setState({
+              viewer: _this13.imagePrefix + item.id,
+              formatEditFile: ext
+            });
+          } else if ((!_this13.props.filterFiles || _this13.props.filterFiles.includes(item.ext)) && (!_this13.props.filterByType || _FileViewer.EXTENSIONS[_this13.props.filterByType].includes(item.ext))) {
+            _this13.props.onSelect(item.id, true);
+          }
+        },
+        className: this.props.classes['itemDeleteButton' + this.state.viewType],
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
+        fontSize: "small"
+      })) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemDeleteButton' + this.state.viewType]
+      })), this.state.viewType === TABLE && this.props.allowDownload ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        download: true,
+        href: this.imagePrefix + item.id,
+        className: this.props.classes['itemDownloadButton' + this.state.viewType],
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_SaveAlt["default"], null)) : null, this.state.viewType === TABLE && this.props.allowDelete && item.id !== 'vis.0/' && item.id !== USER_DATA && (this.state.expertMode || item.id.startsWith(USER_DATA) || item.id.startsWith('vis.0/')) ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        "aria-label": "delete",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+
+          if (_this13.suppressDeleteConfirm > Date.now()) {
+            _this13.deleteItem(item.id);
+          } else {
+            _this13.setState({
+              deleteItem: item.id
+            });
+          }
+        },
+        className: this.props.classes['itemDeleteButton' + this.state.viewType],
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
+        fontSize: "small"
+      })) : this.state.viewType === TABLE && this.props.allowDelete ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes['itemDeleteButton' + this.state.viewType]
+      }) : null);
+    }
+  }, {
+    key: "renderItems",
+    value: function renderItems(folderId) {
+      var _this14 = this;
+
+      if (folderId && folderId !== '/' && !this.state.expertMode && folderId !== USER_DATA && !folderId.startsWith(USER_DATA) && folderId !== 'vis.0' && !folderId.startsWith('vis.0/')) {
+        return null;
+      } // tile
+
+
+      if (this.state.folders && this.state.folders[folderId]) {
+        if (this.state.viewType === TILE) {
+          var res = [];
+
+          if (folderId && folderId !== '/') {
+            res.push(this.renderBackFolder());
+          }
+
+          this.state.folders[folderId].forEach(function (item) {
+            if (!_this14.state.expertMode && item.id !== USER_DATA && !item.id.startsWith(USER_DATA) && item.id !== 'vis.0' && !item.id.startsWith('vis.0/')) {
+              return;
+            }
+
+            if (item.folder) {
+              res.push(_this14.renderFolder(item));
+            } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.props.filterByType || _FileViewer.EXTENSIONS[_this14.props.filterByType].includes(item.ext))) {
+              res.push(_this14.renderFile(item));
+            }
+          });
+          return res;
+        } else {
+          return this.state.folders[folderId].map(function (item) {
+            var res = [];
+
+            if (item.id && item.id !== '/' && !_this14.state.expertMode && item.id !== USER_DATA && !item.id.startsWith(USER_DATA) && item.id !== 'vis.0' && !item.id.startsWith('vis.0/')) {
+              return null;
+            }
+
+            if (item.folder) {
+              var expanded = _this14.state.expanded.includes(item.id);
+
+              res.push(_this14.renderFolder(item, expanded));
+
+              if (_this14.state.folders[item.id] && expanded) {
+                res.push(_this14.renderItems(item.id));
+              }
+            } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.props.filterByType || _FileViewer.EXTENSIONS[_this14.props.filterByType].includes(item.ext))) {
+              res.push(_this14.renderFile(item));
+            } else {
+              return null;
+            }
+
+            return res;
+          });
+        }
+      } else {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            position: 'relative'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], {
+          key: folderId,
+          color: "secondary",
+          size: 24
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            position: 'absolute',
+            zIndex: 2,
+            top: 4,
+            width: 24,
+            textAlign: 'center'
+          }
+        }, this.state.queueLength));
+      }
+    }
+  }, {
+    key: "renderToolbar",
+    value: function renderToolbar() {
+      var _this15 = this;
+
+      return /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+        key: "toolbar",
+        variant: "dense"
+      }, this.props.showExpertButton ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        edge: "start",
+        title: this.props.t('ra_Toggle expert mode'),
+        className: _Utils["default"].clsx(this.props.classes.menuButton, this.state.expertMode && this.props.classes.menuButtonExpertActive),
+        "aria-label": "expert mode",
+        onClick: function onClick() {
+          return _this15.setState({
+            expertMode: !_this15.state.expertMode
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_IconExpert["default"], null)) : 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,
+        "aria-label": "view mode",
+        onClick: function onClick() {
+          var viewType = _this15.state.viewType === TABLE ? TILE : TABLE;
+          window.localStorage.setItem('files.viewType', viewType);
+          var currentDir = _this15.state.selected;
+
+          if (isFile(currentDir)) {
+            currentDir = getParentDir(currentDir);
+          }
+
+          _this15.setState({
+            viewType: viewType,
+            currentDir: currentDir
+          }, function () {
+            if (_this15.state.viewType === TABLE) {
+              _this15.scrollToSelected();
+            }
+          });
+        },
+        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"], {
+        edge: "start",
+        title: this.props.t('ra_Hide empty folders'),
+        className: this.props.classes.menuButton,
+        color: this.state.filterEmpty ? 'secondary' : 'inherit',
+        "aria-label": "filter empty",
+        onClick: function onClick() {
+          window.localStorage.setItem('file.empty', !_this15.state.filterEmpty);
+
+          _this15.setState({
+            filterEmpty: !_this15.state.filterEmpty
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_FolderOpen["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        edge: "start",
+        title: this.props.t('ra_Reload files'),
+        className: this.props.classes.menuButton,
+        color: 'inherit',
+        "aria-label": "reload files",
+        onClick: function onClick() {
+          return _this15.setState({
+            folders: {}
+          }, function () {
+            return _this15.loadFolders();
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Refresh["default"], null)), this.props.allowCreateFolder ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        edge: "start",
+        disabled: this.state.expertMode ? !this.state.selected : !this.state.selected.startsWith('vis.0') && !this.state.selected.startsWith(USER_DATA),
+        title: this.props.t('ra_Create folder'),
+        className: this.props.classes.menuButton,
+        color: 'inherit',
+        "aria-label": "add folder",
+        onClick: function onClick() {
+          return _this15.setState({
+            addFolder: true
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_CreateNewFolder["default"], null)) : null, this.props.allowUpload ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        edge: "start",
+        disabled: this.state.expertMode ? !this.state.selected : !this.state.selected.startsWith('vis.0') && !this.state.selected.startsWith(USER_DATA),
+        title: this.props.t('ra_Upload file'),
+        className: this.props.classes.menuButton,
+        color: 'inherit',
+        "aria-label": "upload file",
+        onClick: function onClick() {
+          return _this15.setState({
+            uploadFile: true
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], null)) : null, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        title: this.props.t('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))));
+    }
+  }, {
+    key: "findItem",
+    value: function findItem(id, folders) {
+      folders = folders || this.state.folders;
+
+      if (!folders) {
+        return null;
+      }
+
+      var parts = id.split('/');
+      parts.pop();
+      var parentFolder = parts.join('/') || '/';
+
+      if (!folders[parentFolder]) {
+        return null;
+      }
+
+      return folders[parentFolder].find(function (item) {
+        return item.id === id;
+      });
+    }
+  }, {
+    key: "renderInputDialog",
+    value: function renderInputDialog() {
+      var _this16 = this;
+
+      if (this.state.addFolder) {
+        var parentFolder = this.findFirstFolder(this.state.selected);
+
+        if (!parentFolder) {
+          return window.alert(this.props.t('ra_Invalid parent folder!'));
+        }
+
+        return /*#__PURE__*/_react["default"].createElement(_TextInput["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: function verify(text) {
+            return _this16.state.folders[parentFolder].find(function (item) {
+              return item.name === text;
+            }) ? '' : _this16.props.t('ra_Duplicate name');
+          },
+          onClose: function onClose(name) {
+            if (name) {
+              var folders = {};
+              Object.keys(_this16.state.folders).forEach(function (folder) {
+                return folders[folder] = _this16.state.folders[folder];
+              });
+
+              var parent = _this16.findItem(parentFolder);
+
+              var id = parentFolder + '/' + name;
+              folders[parentFolder].push({
+                id: id,
+                level: parent.level + 1,
+                name: name,
+                folder: true,
+                temp: true
+              });
+              folders[parentFolder].sort(sortFolders);
+              folders[id] = [];
+
+              var expanded = _toConsumableArray(_this16.state.expanded);
+
+              if (!expanded.includes(parentFolder)) {
+                expanded.push(parentFolder);
+                expanded.sort();
+              }
+
+              window.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+
+              _this16.setState({
+                addFolder: false,
+                folders: folders,
+                expanded: expanded
+              }, function () {
+                return _this16.select(id);
+              });
+            } else {
+              _this16.setState({
+                addFolder: false
+              });
+            }
+          },
+          replace: function replace(text) {
+            return text.replace(/[^-_\w\d]/, '_');
+          }
+        });
+      } else {
+        return null;
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState, snapshot) {
+      var _this17 = this;
+
+      this.setOpacityTimer && clearTimeout(this.setOpacityTimer);
+      this.setOpacityTimer = setTimeout(function () {
+        _this17.setOpacityTimer = null;
+        var items = window.document.getElementsByClassName('browserItem');
+
+        for (var i = 0; i < items.length; i++) {
+          items[i].style.opacity = 1;
+        }
+      }, 100);
+    }
+  }, {
+    key: "uploadFile",
+    value: function uploadFile(fileName, data) {
+      var parts = fileName.split('/');
+      var adapter = parts.shift();
+      return this.props.socket.writeFile64(adapter, parts.join('/'), data)["catch"](function (e) {
+        return window.alert('Cannot write file: ' + e);
+      });
+    }
+  }, {
+    key: "findFirstFolder",
+    value: function findFirstFolder(id) {
+      var parentFolder = id;
+      var item = this.findItem(parentFolder); // find folder
+
+      if (item && !item.folder) {
+        var parts = parentFolder.split('/');
+        parts.pop();
+        parentFolder = '';
+
+        while (parts.length) {
+          var _item = this.findItem(parts.join('/'));
+
+          if (_item && _item.folder) {
+            parentFolder = parts.join('/');
+            break;
+          }
+        }
+      }
+
+      return parentFolder;
+    }
+  }, {
+    key: "renderUpload",
+    value: function renderUpload() {
+      var _this18 = this;
+
+      if (this.state.uploadFile) {
+        return [/*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+          key: "close",
+          color: "primary",
+          "aria-label": "close",
+          className: this.props.classes.uploadCloseButton,
+          onClick: function onClick() {
+            return _this18.setState({
+              uploadFile: false
+            });
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)), /*#__PURE__*/_react["default"].createElement(_reactDropzone["default"], {
+          key: "dropzone",
+          onDragEnter: function onDragEnter() {
+            return _this18.setState({
+              uploadFile: 'dragging'
+            });
+          },
+          onDragLeave: function onDragLeave() {
+            return _this18.setState({
+              uploadFile: true
+            });
+          },
+          onDrop: function onDrop(acceptedFiles) {
+            var count = acceptedFiles.length;
+            acceptedFiles.forEach(function (file) {
+              var reader = new FileReader();
+
+              reader.onabort = function () {
+                return console.log('file reading was aborted');
+              };
+
+              reader.onerror = function () {
+                return console.log('file reading has failed');
+              };
+
+              reader.onload = function () {
+                var parentFolder = _this18.findFirstFolder(_this18.state.selected);
+
+                if (!parentFolder) {
+                  return window.alert(_this18.props.t('ra_Invalid parent folder!'));
+                }
+
+                var id = parentFolder + '/' + file.name;
+
+                _this18.uploadFile(id, reader.result).then(function () {
+                  if (! --count) {
+                    var folders = {};
+                    Object.keys(_this18.state.folders).forEach(function (name) {
+                      if (name !== parentFolder && !name.startsWith(parentFolder + '/')) {
+                        folders[name] = _this18.state.folders[name];
+                      }
+                    });
+
+                    _this18.setState({
+                      uploadFile: false,
+                      folders: folders
+                    }, function () {
+                      return _this18.browseFolders(_toConsumableArray(_this18.state.expanded), folders).then(function (folders) {
+                        // open current folder
+                        var expanded = _toConsumableArray(_this18.state.expanded);
+
+                        if (!expanded.includes(parentFolder)) {
+                          expanded.push(parentFolder);
+                          expanded.sort();
+                          window.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+                        }
+
+                        _this18.setState({
+                          folders: folders,
+                          expanded: expanded
+                        }, function () {
+                          return _this18.select(id);
+                        });
+                      });
+                    });
+                  }
+                });
+              };
+
+              reader.readAsArrayBuffer(file);
+            });
+          }
+        }, function (_ref2) {
+          var getRootProps = _ref2.getRootProps,
+              getInputProps = _ref2.getInputProps;
+          return /*#__PURE__*/_react["default"].createElement("div", _extends({
+            className: _Utils["default"].clsx(_this18.props.classes.uploadDiv, _this18.state.uploadFile === 'dragging' && _this18.props.classes.uploadDivDragging)
+          }, getRootProps()), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), /*#__PURE__*/_react["default"].createElement("div", {
+            className: _this18.props.classes.uploadCenterDiv
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: _this18.props.classes.uploadCenterTextAndIcon
+          }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], {
+            className: _this18.props.classes.uploadCenterIcon
+          }), /*#__PURE__*/_react["default"].createElement("div", {
+            className: _this18.props.classes.uploadCenterText
+          }, _this18.state.uploadFile === 'dragging' ? _this18.props.t('ra_Drop file here') : _this18.props.t('ra_Place your files here or click here to open the browse dialog')))));
+        })];
+      } else {
+        return null;
+      }
+    }
+  }, {
+    key: "deleteRecursive",
+    value: function deleteRecursive(id) {
+      var _this19 = this;
+
+      var item = this.findItem(id);
+
+      if (item.folder) {
+        return (this.state.folders[id] ? Promise.all(this.state.folders[id].map(function (item) {
+          return _this19.deleteRecursive(item.id);
+        })) : Promise.resolve()).then(function () {
+          // If it is folder of second level
+          if (item.level >= 1) {
+            var parts = id.split('/');
+            var adapter = parts.shift();
+
+            _this19.props.socket.deleteFolder(adapter, parts.join('/')).then(function () {
+              // remove this folder
+              var folders = JSON.parse(JSON.stringify(_this19.state.folders));
+              delete folders[item.id]; // delete folder from parent item
+
+              var parentId = getParentDir(item.id);
+              var parentFolder = folders[parentId];
+
+              if (parentFolder) {
+                var pos = parentFolder.indexOf(parentFolder.find(function (f) {
+                  return f.id === item.id;
+                }));
+
+                if (pos !== -1) {
+                  parentFolder.splice(pos, 1);
+                }
+
+                _this19.select(parentId, function () {
+                  return _this19.setState({
+                    folders: folders
+                  });
+                });
+              }
+            });
+          }
+        });
+      } else {
+        var parts = id.split('/');
+        var adapter = parts.shift();
+
+        if (parts.length) {
+          return this.props.socket.deleteFile(adapter, parts.join('/'))["catch"](function (e) {
+            return window.alert('Cannot delete file: ' + e);
+          });
+        } else {
+          return Promise.resolve();
+        }
+      }
+    }
+  }, {
+    key: "deleteItem",
+    value: function deleteItem(_deleteItem) {
+      var _this20 = this;
+
+      _deleteItem = _deleteItem || this.state.deleteItem;
+      this.setState({
+        deleteItem: ''
+      }, function () {
+        return _this20.deleteRecursive(_deleteItem).then(function () {
+          var pos = _this20.state.expanded.indexOf(_deleteItem);
+
+          if (pos !== -1) {
+            var expanded = _toConsumableArray(_this20.state.expanded);
+
+            expanded.splice(pos, 1);
+            window.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+
+            _this20.setState({
+              expanded: expanded
+            });
+          }
+          /*let parentFolder = this.findFirstFolder(deleteItem);
+          const folders = {};
+          Object.keys(this.state.folders).forEach(name => {
+              if (name !== parentFolder && !name.startsWith(parentFolder + '/')) {
+                  folders[name] = this.state.folders[name];
+              }
+          });
+          this.setState({ folders }, () =>
+              this.browseFolders([...this.state.expanded], folders)
+                  .then(folders => this.setState({ folders })));*/
+
+        });
+      });
+    }
+  }, {
+    key: "renderDeleteDialog",
+    value: function renderDeleteDialog() {
+      var _this21 = this;
+
+      if (this.state.deleteItem) {
+        return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+          key: "deleteDialog",
+          open: true,
+          onClose: function onClose() {
+            return _this21.setState({
+              deleteItem: ''
+            });
+          },
+          "aria-labelledby": "form-dialog-title"
+        }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+          id: "form-dialog-title"
+        }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, this.props.t('ra_Are you sure?'))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          color: "grey",
+          variant: "contained",
+          onClick: function onClick() {
+            _this21.suppressDeleteConfirm = Date.now() + 60000 * 5;
+
+            _this21.deleteItem();
+          }
+        }, this.props.t('ra_Delete (no confirm for 5 mins)')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          variant: "contained",
+          onClick: function onClick() {
+            return _this21.deleteItem();
+          },
+          color: "primary",
+          autoFocus: true
+        }, this.props.t('ra_Delete')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          color: "grey",
+          variant: "contained",
+          onClick: function onClick() {
+            return _this21.setState({
+              deleteItem: ''
+            });
+          }
+        }, this.props.t('ra_Cancel'))));
+      } else {
+        return false;
+      }
+    }
+  }, {
+    key: "renderViewDialog",
+    value: function renderViewDialog() {
+      var _this22 = this;
+
+      return this.state.viewer ? /*#__PURE__*/_react["default"].createElement(_FileViewer["default"], {
+        key: this.state.viewer,
+        href: this.state.viewer,
+        formatEditFile: this.state.formatEditFile,
+        themeName: this.props.themeName,
+        setStateBackgroundImage: this.setStateBackgroundImage,
+        getClassBackgroundImage: this.getClassBackgroundImage,
+        t: this.props.t,
+        socket: this.props.socket,
+        lang: this.props.lang,
+        expertMode: this.state.expertMode,
+        onClose: function onClose() {
+          return _this22.setState({
+            viewer: '',
+            formatEditFile: ''
+          });
+        }
+      }) : null;
+    }
+  }, {
+    key: "renderError",
+    value: function renderError() {
+      var _this23 = this;
+
+      if (this.state.errorText) {
+        return /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+          key: "errorDialog",
+          text: this.state.errorText,
+          onClose: function onClose() {
+            return _this23.setState({
+              errorText: ''
+            });
+          }
+        });
+      } else {
+        return null;
+      }
+    }
+  }, {
+    key: "updateItemsAcl",
+    value: function updateItemsAcl(info) {
+      var _this24 = this;
+
+      var folders = JSON.parse(JSON.stringify(this.state.folders));
+      var changed;
+      info.forEach(function (it) {
+        var item = _this24.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
+      });
+    }
+  }, {
+    key: "changeToPath",
+    value: function changeToPath() {
+      var _this25 = this;
+
+      setTimeout(function () {
+        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);
+          }
+
+          return new Promise(function (resolve) {
+            if (!_this25.state.folders[folder]) {
+              return _this25.browseFolder(folder).then(function (folders) {
+                return _this25.setState({
+                  folders: folders
+                }, function () {
+                  return resolve(true);
+                });
+              })["catch"](function (err) {
+                return _this25.setState({
+                  errorText: err === NOT_FOUND ? _this25.props.t('re_Cannot find "%s"', folder) : _this25.props.t('re_Cannot read "%s"', folder)
+                });
+              });
+            } else {
+              return resolve(true);
+            }
+          }).then(function (result) {
+            return result && _this25.setState({
+              selected: _this25.state.path,
+              currentDir: folder,
+              pathFocus: false
+            });
+          });
+        } else if (!_this25.lastSelect || Date.now() - _this25.lastSelect > 100) {
+          _this25.setState({
+            pathFocus: false
+          });
+        }
+      }, 100);
+    }
+  }, {
+    key: "renderBreadcrumb",
+    value: function renderBreadcrumb() {
+      var _this26 = this;
+
+      var parts = this.state.selected.startsWith('/') ? this.state.selected.split('/') : ('/' + this.state.selected).split('/');
+      var p = [];
+      return parts.map(function (part, i) {
+        part && p.push(part);
+        var path = p.join('/');
+
+        if (i < parts.length - 1) {
+          return [/*#__PURE__*/_react["default"].createElement("div", {
+            key: _this26.state.selected + '_' + i,
+            className: _this26.props.classes.pathDivBreadcrumbDir,
+            onClick: function onClick(e) {
+              return _this26.changeFolder(e, path || '/');
+            }
+          }, part || _this26.props.t('re_Root')), /*#__PURE__*/_react["default"].createElement("span", {
+            key: _this26.state.selected + '_s_' + i,
+            className: _this26.props.classes.pathDivBreadcrumbSlash
+          }, '>')];
+        } else {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: _this26.state.selected + '_' + i,
+            className: _this26.props.classes.pathDivBreadcrumbFile,
+            onClick: function onClick() {
+              return _this26.setState({
+                pathFocus: true
+              });
+            }
+          }, part);
+        }
+      });
+    }
+  }, {
+    key: "renderPath",
+    value: function renderPath() {
+      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 && _this27.changeToPath();
+        },
+        onBlur: function onBlur(e) {
+          return _this27.changeToPath();
+        },
+        onChange: function onChange(e) {
+          return _this27.setState({
+            path: e.target.value
+          });
+        },
+        className: this.props.classes.pathDivInput
+      }) : this.renderBreadcrumb());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this28 = this;
+
+      if (!this.props.ready) {
+        return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
+          key: this.props.key ? this.props.key + '_c' : 'c'
+        });
+      }
+
+      if (this.state.loadAllFolders && !this.foldersLoading) {
+        this.foldersLoading = true;
+        setTimeout(function () {
+          _this28.setState({
+            loadAllFolders: false,
+            folders: {}
+          }, function () {
+            _this28.foldersLoading = false;
+
+            _this28.loadFolders();
+          });
+        }, 300);
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: this.props.style,
+        className: _Utils["default"].clsx(this.props.classes.root, this.props.className)
+      }, this.props.showToolbar ? this.renderToolbar() : null, this.state.viewType === TILE ? this.renderPath() : null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: _Utils["default"].clsx(this.props.classes.filesDiv, this.props.classes['filesDiv' + this.state.viewType])
+      }, this.state.viewType === TABLE ? this.renderItems('/') : this.renderItems(this.state.currentDir || '/')), this.props.allowUpload ? this.renderInputDialog() : null, this.props.allowUpload ? this.renderUpload() : null, this.props.allowDelete ? this.renderDeleteDialog() : null, this.props.allowView ? this.renderViewDialog() : null, this.state.modalEditOfAccess && this.props.modalEditOfAccessControl && this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData), this.renderError());
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.expertMode !== undefined && props.expertMode !== state.expertMode) {
+        return {
+          expertMode: props.expertMode,
+          loadAllFolders: !state.allFoldersLoaded && props.expertMode
+        };
+      } else {
+        return null;
+      }
+    }
+  }]);
+
+  return FileBrowser;
+}(_react.Component);
+
+FileBrowser.defaultProps = {
+  objectAddBoolean: false,
+  objectEditBoolean: false,
+  objectStatesView: false,
+  objectImportExport: false,
+  objectEditOfAccessControl: false,
+  modalNewObject: function modalNewObject() {},
+  modalEditOfAccessControl: function modalEditOfAccessControl() {}
+};
+FileBrowser.propTypes = {
+  style: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  t: _propTypes["default"].func,
+  lang: _propTypes["default"].string,
+  socket: _propTypes["default"].object,
+  ready: _propTypes["default"].bool,
+  expertMode: _propTypes["default"].bool,
+  showToolbar: _propTypes["default"].bool,
+  allowUpload: _propTypes["default"].bool,
+  allowDownload: _propTypes["default"].bool,
+  allowCreateFolder: _propTypes["default"].bool,
+  allowDelete: _propTypes["default"].bool,
+  allowView: _propTypes["default"].bool,
+  imagePrefix: _propTypes["default"].string,
+  showExpertButton: _propTypes["default"].bool,
+  viewType: _propTypes["default"].string,
+  showViewTypeButton: _propTypes["default"].bool,
+  selected: _propTypes["default"].string,
+  tileView: _propTypes["default"].bool,
+  filterFiles: _propTypes["default"].array,
+  // like ['png', 'svg', 'bmp', 'jpg', 'jpeg']
+  filterByType: _propTypes["default"].string,
+  // images, code or txt from FileViewer.EXTENSIONS
+  onSelect: _propTypes["default"].func // function (id, isDoubleClick)
+
+};
+/** @type {typeof FileBrowser} */
+
+var _export = withWidth()((0, _withStyles["default"])(styles)(FileBrowser));
+
+var _default = _export;
+exports["default"] = _default;
+//# sourceMappingURL=FileBrowser.js.map