@iobroker/adapter-react/Components/FileBrowser.js

React classes to develop admin interfaces for ioBroker with react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof3 = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));

var _styles = require("@material-ui/core/styles");

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactDropzone = _interopRequireDefault(require("react-dropzone"));

var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));

var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));

var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Fab = _interopRequireDefault(require("@material-ui/core/Fab"));

var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));

var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));

var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));

var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));

var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Input = _interopRequireDefault(require("@material-ui/core/Input"));

var _core = require("@material-ui/core");

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("@material-ui/icons/Refresh"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _Bookmark = _interopRequireDefault(require("@material-ui/icons/Bookmark"));

var _BookmarkBorder = _interopRequireDefault(require("@material-ui/icons/BookmarkBorder"));

var _Description = _interopRequireDefault(require("@material-ui/icons/Description"));

var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));

var _Code = _interopRequireDefault(require("@material-ui/icons/Code"));

var _InsertDriveFile = _interopRequireDefault(require("@material-ui/icons/InsertDriveFile"));

var _Publish = _interopRequireDefault(require("@material-ui/icons/Publish"));

var _MusicNote = _interopRequireDefault(require("@material-ui/icons/MusicNote"));

var _SaveAlt = _interopRequireDefault(require("@material-ui/icons/SaveAlt"));

var _CreateNewFolder = _interopRequireDefault(require("@material-ui/icons/CreateNewFolder"));

var _FolderOpen = _interopRequireDefault(require("@material-ui/icons/FolderOpen"));

var _List = _interopRequireDefault(require("@material-ui/icons/List"));

var _ViewModule = _interopRequireDefault(require("@material-ui/icons/ViewModule"));

var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));

var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));

var _Brightness = _interopRequireDefault(require("@material-ui/icons/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 || _typeof3(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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

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; } }

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), "px)"),
      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.type === '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.type === '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), "px)"),
      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.type === '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) {
  (0, _inherits2["default"])(FileBrowser, _Component);

  var _super = _createSuper(FileBrowser);

  /**
   * @param {Readonly<import("./types").FileBrowserProps>} props
   */
  function FileBrowser(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, FileBrowser);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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]
          };
        }
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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;
  }

  (0, _createClass2["default"])(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((0, _toConsumableArray2["default"])(_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 = (0, _toConsumableArray2["default"])(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('ra_Cannot find "%s"', item.id) : _this7.props.t('ra_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 && (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' + 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(_core.Hidden, {
        xsDown: 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(_core.Hidden, {
        xsDown: true
      }, this.state.viewType === TABLE ? this.formatAcl(item.acl) : null), /*#__PURE__*/_react["default"].createElement(_core.Hidden, {
        xsDown: true
      }, this.state.viewType === TABLE && this.props.expertMode ? /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes['itemDeleteButton' + this.state.viewType]
      }) : null), 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]
      }, /*#__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('ra_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]
      }, 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(_core.Hidden, {
        xsDown: true
      }, this.formatSize(item.size)), /*#__PURE__*/_react["default"].createElement(_core.Hidden, {
        xsDown: true
      }, this.state.viewType === TABLE ? this.formatAcl(item.acl) : null), /*#__PURE__*/_react["default"].createElement(_core.Hidden, {
        xsDown: 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]
      }, /*#__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();
        }
      }, /*#__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]
      }, /*#__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
          });
        }
      }, /*#__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();
            }
          });
        }
      }, 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
          });
        }
      }, /*#__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 _th