@webiny/app-admin 0.0.0-ee-vpcs.549378cf03

package/components/FileManager/FileManagerView.js

@@ -0,0 +1,728 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _emotion = require("emotion");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
+
+var _Button = require("@webiny/ui/Button");
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _File = _interopRequireDefault(require("./File"));
+
+var _reactHooks = require("@apollo/react-hooks");
+
+var _graphql = require("./graphql");
+
+var _getFileTypePlugin = _interopRequireDefault(require("./getFileTypePlugin"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _getFileUploader = _interopRequireDefault(require("./getFileUploader"));
+
+var _outputFileSelectionError = require("./outputFileSelectionError");
+
+var _DropFilesHere = _interopRequireDefault(require("./DropFilesHere"));
+
+var _NoResults = _interopRequireDefault(require("./NoResults"));
+
+var _FileDetails = _interopRequireDefault(require("./FileDetails"));
+
+var _LeftSidebar = _interopRequireDefault(require("./LeftSidebar"));
+
+var _BottomInfoBar = _interopRequireDefault(require("./BottomInfoBar"));
+
+var _OverlayLayout = require("../OverlayLayout");
+
+var _useSnackbar2 = require("../../hooks/useSnackbar");
+
+var _Scrollbar = require("@webiny/ui/Scrollbar");
+
+var _Progress = require("@webiny/ui/Progress");
+
+var _i18n = require("@webiny/app/i18n");
+
+var _appSecurity = require("@webiny/app-security");
+
+var _reactHotkeyz = require("react-hotkeyz");
+
+var _FileManagerContext = require("./FileManagerContext");
+
+var _roundSearch24px = require("./icons/round-search-24px.svg");
+
+var _roundCloud_upload24px = require("./icons/round-cloud_upload-24px.svg");
+
+var _NoPermissionView = _interopRequireDefault(require("./NoPermissionView"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var t = _i18n.i18n.ns("app-admin/file-manager/file-manager-view");
+
+var style = {
+  draggingFeedback: /*#__PURE__*/(0, _emotion.css)({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0.5,
+    background: "white",
+    zIndex: 100
+  }, "label:draggingFeedback;"),
+  leftDrawer: {
+    header: /*#__PURE__*/(0, _emotion.css)({
+      textAlign: "center",
+      fontSize: 18,
+      padding: 10,
+      fontWeight: 600,
+      color: "var(--mdc-theme-on-surface)"
+    }, "label:header;")
+  }
+};
+var InputSearch = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "ee8m09m0",
+  label: "InputSearch"
+})({
+  backgroundColor: "var(--mdc-theme-on-background)",
+  position: "relative",
+  height: 32,
+  padding: 3,
+  width: "100%",
+  borderRadius: 2,
+  "> input": {
+    border: "none",
+    fontSize: 14,
+    width: "calc(100% - 10px)",
+    height: "100%",
+    marginLeft: 50,
+    backgroundColor: "transparent",
+    outline: "none",
+    color: "var(--mdc-theme-text-primary-on-background)"
+  }
+});
+var searchIcon = /*#__PURE__*/(0, _emotion.css)({
+  "&.mdc-button__icon": {
+    color: "var(--mdc-theme-text-secondary-on-background)",
+    position: "absolute",
+    width: 24,
+    height: 24,
+    left: 15,
+    top: 7
+  }
+}, "label:searchIcon;");
+var FileListWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "ee8m09m1",
+  label: "FileListWrapper"
+})({
+  float: "right",
+  display: "inline-block",
+  width: "calc(100vw - 270px)",
+  height: "100%"
+});
+var FileList = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "ee8m09m2",
+  label: "FileList"
+})({
+  width: "100%",
+  display: "grid",
+
+  /* define the number of grid columns */
+  gridTemplateColumns: "repeat( auto-fill, minmax(220px, 1fr) )",
+  marginBottom: 95
+});
+
+var renderFile = function renderFile(props) {
+  var file = props.file;
+  var plugin = (0, _getFileTypePlugin.default)(file);
+
+  if (!plugin) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({}, props, {
+    key: file.id
+  }), plugin.render({
+    /**
+     * TODO @ts-refactor
+     */
+    // @ts-ignore
+    file: file
+  }));
+};
+
+var renderEmpty = function renderEmpty(_ref) {
+  var hasPreviouslyUploadedFiles = _ref.hasPreviouslyUploadedFiles,
+      browseFiles = _ref.browseFiles,
+      fmFilePermission = _ref.fmFilePermission;
+
+  if (!fmFilePermission) {
+    return /*#__PURE__*/_react.default.createElement(_NoPermissionView.default, null);
+  }
+
+  if (hasPreviouslyUploadedFiles) {
+    return /*#__PURE__*/_react.default.createElement(_NoResults.default, null);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_DropFilesHere.default, {
+    empty: true,
+    onClick: function onClick() {
+      return browseFiles();
+    }
+  });
+};
+
+var FileManagerView = function FileManagerView(props) {
+  var onClose = props.onClose,
+      onChange = props.onChange,
+      accept = props.accept,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? false : _props$multiple,
+      maxSize = props.maxSize,
+      multipleMaxCount = props.multipleMaxCount,
+      multipleMaxSize = props.multipleMaxSize,
+      onUploadCompletion = props.onUploadCompletion;
+
+  var _useFileManager = (0, _FileManagerContext.useFileManager)(),
+      selected = _useFileManager.selected,
+      toggleSelected = _useFileManager.toggleSelected,
+      dragging = _useFileManager.dragging,
+      setDragging = _useFileManager.setDragging,
+      uploading = _useFileManager.uploading,
+      setUploading = _useFileManager.setUploading,
+      _showFileDetails = _useFileManager.showFileDetails,
+      showingFileDetails = _useFileManager.showingFileDetails,
+      queryParams = _useFileManager.queryParams,
+      setQueryParams = _useFileManager.setQueryParams,
+      hasPreviouslyUploadedFiles = _useFileManager.hasPreviouslyUploadedFiles,
+      setHasPreviouslyUploadedFiles = _useFileManager.setHasPreviouslyUploadedFiles;
+
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useSecurity = (0, _appSecurity.useSecurity)(),
+      identity = _useSecurity.identity,
+      getPermission = _useSecurity.getPermission;
+
+  var fmFilePermission = (0, _react.useMemo)(function () {
+    return getPermission("fm.file");
+  }, [identity]);
+  var canCreate = (0, _react.useMemo)(function () {
+    // Bail out early if no access
+    if (!fmFilePermission) {
+      return false;
+    }
+
+    if (fmFilePermission.own) {
+      return true;
+    }
+
+    if (typeof fmFilePermission.rwd === "string") {
+      return fmFilePermission.rwd.includes("w");
+    }
+
+    return true;
+  }, [fmFilePermission]);
+  var canEdit = (0, _react.useCallback)(function (item) {
+    // Bail out early if no access
+    if (!fmFilePermission) {
+      return false;
+    }
+
+    var creatorId = (0, _get.default)(item, "createdBy.id");
+
+    if (fmFilePermission.own && creatorId) {
+      var identityId = identity ? identity.id || identity.login : null;
+      return creatorId === identityId;
+    }
+
+    if (typeof fmFilePermission.rwd === "string") {
+      return fmFilePermission.rwd.includes("w");
+    }
+
+    return true;
+  }, [fmFilePermission]);
+  var searchOnChange = (0, _react.useCallback)( // @ts-ignore
+  (0, _debounce.default)(function (search) {
+    return setQueryParams({
+      search: search
+    });
+  }, 500), []);
+
+  var _toggleTag = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
+      var tag, queryParams, finalTags;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              tag = _ref2.tag, queryParams = _ref2.queryParams;
+              finalTags = Array.isArray(queryParams.tags) ? (0, _toConsumableArray2.default)(queryParams.tags) : [];
+
+              if (finalTags.includes(tag)) {
+                finalTags.splice(finalTags.indexOf(tag), 1);
+              } else {
+                finalTags.push(tag);
+              }
+
+              setQueryParams((0, _objectSpread2.default)((0, _objectSpread2.default)({}, queryParams), {}, {
+                tags: finalTags
+              }));
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), []);
+
+  var getFileUploadErrorMessage = (0, _react.useCallback)(function (e) {
+    if (typeof e === "string") {
+      var match = e.match(/Message>(.*?)<\/Message/);
+
+      if (match) {
+        var _match = (0, _slicedToArray2.default)(match, 2),
+            message = _match[1];
+
+        return message;
+      }
+
+      return e;
+    }
+
+    return e.message;
+  }, []);
+
+  var updateCacheAfterCreateFile = function updateCacheAfterCreateFile(cache, newFile) {
+    var _data$fileManager;
+
+    var newFileData = (0, _get.default)(newFile, "data.fileManager.createFile.data");
+    var data = cache.readQuery({
+      query: _graphql.LIST_FILES,
+      variables: queryParams
+    });
+    cache.writeQuery({
+      query: _graphql.LIST_FILES,
+      variables: queryParams,
+      data: {
+        fileManager: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (data === null || data === void 0 ? void 0 : data.fileManager) || {}), {}, {
+          listFiles: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ((data === null || data === void 0 ? void 0 : data.fileManager) || {}).listFiles), {}, {
+            data: [newFileData].concat((0, _toConsumableArray2.default)(((data === null || data === void 0 ? void 0 : (_data$fileManager = data.fileManager) === null || _data$fileManager === void 0 ? void 0 : _data$fileManager.listFiles) || {}).data || []))
+          })
+        })
+      }
+    });
+  };
+
+  var getFileDetailsFile = (0, _react.useCallback)(function (_ref4) {
+    var src = _ref4.src,
+        list = _ref4.list;
+    return list.find(function (item) {
+      return item.src === src;
+    });
+  }, []);
+  (0, _reactHotkeyz.useHotkeys)({
+    zIndex: 50,
+    keys: {
+      esc: onClose
+    }
+  });
+  var searchInput = (0, _react.useRef)(null);
+  var apolloClient = (0, _reactHooks.useApolloClient)();
+  var gqlQuery = (0, _reactHooks.useQuery)(_graphql.LIST_FILES, {
+    variables: queryParams,
+    onCompleted: function onCompleted(response) {
+      var list = (0, _get.default)(response, "fileManager.listFiles.data") || [];
+
+      if (hasPreviouslyUploadedFiles === null) {
+        setHasPreviouslyUploadedFiles(list.length > 0);
+      }
+    }
+  });
+  var refreshOnScroll = (0, _react.useCallback)((0, _debounce.default)(function (_ref5) {
+    var scrollFrame = _ref5.scrollFrame,
+        fetchMore = _ref5.fetchMore;
+
+    if (scrollFrame.top > 0.9) {
+      var cursor = (0, _get.default)(gqlQuery.data, "fileManager.listFiles.meta.cursor");
+
+      if (cursor) {
+        fetchMore({
+          variables: {
+            after: cursor
+          },
+          updateQuery: function updateQuery(prev, result) {
+            var fetchMoreResult = result.fetchMoreResult;
+
+            if (!fetchMoreResult) {
+              return prev;
+            }
+
+            var next = (0, _objectSpread2.default)({}, fetchMoreResult);
+            next.fileManager.listFiles.data = [].concat((0, _toConsumableArray2.default)(prev.fileManager.listFiles.data), (0, _toConsumableArray2.default)(fetchMoreResult.fileManager.listFiles.data));
+            return next;
+          }
+        });
+      }
+    }
+  }, 500), [gqlQuery]);
+  var data = gqlQuery.data,
+      fetchMore = gqlQuery.fetchMore,
+      loading = gqlQuery.loading;
+  var list = (0, _get.default)(data, "fileManager.listFiles.data") || [];
+
+  var _useMutation = (0, _reactHooks.useMutation)(_graphql.CREATE_FILE, {
+    update: updateCacheAfterCreateFile
+  }),
+      _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 1),
+      createFile = _useMutation2[0];
+
+  var uploadFile = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(files) {
+      var list, errors, uploadedFiles;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              setUploading(true);
+              list = Array.isArray(files) ? files : [files];
+              errors = [];
+              uploadedFiles = [];
+              _context3.next = 6;
+              return Promise.all(list.map( /*#__PURE__*/function () {
+                var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(file) {
+                  var response, createFileResponse;
+                  return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+                    while (1) {
+                      switch (_context2.prev = _context2.next) {
+                        case 0:
+                          _context2.prev = 0;
+                          _context2.next = 3;
+                          return (0, _getFileUploader.default)()(file, {
+                            apolloClient: apolloClient
+                          });
+
+                        case 3:
+                          response = _context2.sent;
+                          _context2.next = 6;
+                          return createFile({
+                            variables: {
+                              data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, response), {}, {
+                                tags: queryParams.scope ? [queryParams.scope] : []
+                              })
+                            }
+                          });
+
+                        case 6:
+                          createFileResponse = _context2.sent;
+                          // Save create file data for later
+                          uploadedFiles.push((0, _get.default)(createFileResponse, "data.fileManager.createFile.data"));
+                          _context2.next = 13;
+                          break;
+
+                        case 10:
+                          _context2.prev = 10;
+                          _context2.t0 = _context2["catch"](0);
+                          errors.push({
+                            file: file,
+                            e: _context2.t0
+                          });
+
+                        case 13:
+                        case "end":
+                          return _context2.stop();
+                      }
+                    }
+                  }, _callee2, null, [[0, 10]]);
+                }));
+
+                return function (_x3) {
+                  return _ref7.apply(this, arguments);
+                };
+              }()));
+
+            case 6:
+              if (!hasPreviouslyUploadedFiles) {
+                setHasPreviouslyUploadedFiles(true);
+              }
+
+              setUploading(false);
+
+              if (!(errors.length > 0)) {
+                _context3.next = 10;
+                break;
+              }
+
+              return _context3.abrupt("return", setTimeout(function () {
+                showSnackbar( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["One or more files were not uploaded successfully:"]))), /*#__PURE__*/_react.default.createElement("ol", null, errors.map(function (_ref8) {
+                  var file = _ref8.file,
+                      e = _ref8.e;
+                  return /*#__PURE__*/_react.default.createElement("li", {
+                    key: file.name
+                  }, /*#__PURE__*/_react.default.createElement("strong", null, file.name), ": ", getFileUploadErrorMessage(e));
+                })))); // TODO @ts-refactor
+              }, 750));
+
+            case 10:
+              // We wait 750ms, just for everything to settle down a bit.
+              setTimeout(function () {
+                return showSnackbar(t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["File upload complete."]))));
+              }, 750);
+
+              if (!(typeof onUploadCompletion === "function")) {
+                _context3.next = 13;
+                break;
+              }
+
+              return _context3.abrupt("return", setTimeout(function () {
+                onUploadCompletion(uploadedFiles);
+                onClose && onClose(); // TODO @ts-refactor
+              }, 750));
+
+            case 13:
+              return _context3.abrupt("return", null);
+
+            case 14:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function uploadFile(_x2) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+
+  var renderUploadFileAction = (0, _react.useCallback)(function (_ref9) {
+    var browseFiles = _ref9.browseFiles;
+
+    if (!canCreate) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+      onClick: browseFiles,
+      disabled: uploading
+    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
+      icon: /*#__PURE__*/_react.default.createElement(_roundCloud_upload24px.ReactComponent, null)
+    }), t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Upload..."]))));
+  }, [uploading, canCreate]);
+  var settingsQuery = (0, _reactHooks.useQuery)(_graphql.GET_FILE_SETTINGS);
+  var settings = (0, _get.default)(settingsQuery.data, "fileManager.getSettings.data") || {};
+  return /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
+    multiple: true,
+    maxSize: settings.uploadMaxFileSize ? settings.uploadMaxFileSize + "b" : maxSize,
+    multipleMaxSize: multipleMaxSize,
+    multipleMaxCount: multipleMaxCount,
+    accept: accept,
+    onSuccess: function onSuccess(files) {
+      uploadFile(files.map(function (file) {
+        return file.src.file;
+      }).filter(Boolean));
+    },
+    onError: function onError(errors) {
+      console.log("onError", errors);
+      /**
+       * TODO @ts-refactor
+       * Figure out if incoming errors var is wrong or the one in the outputFileSelectionError
+       */
+      // @ts-ignore
+
+      var message = (0, _outputFileSelectionError.outputFileSelectionError)(errors);
+      showSnackbar(message);
+    }
+  }, function (_ref10) {
+    var getDropZoneProps = _ref10.getDropZoneProps,
+        browseFiles = _ref10.browseFiles,
+        validateFiles = _ref10.validateFiles;
+    return /*#__PURE__*/_react.default.createElement(_OverlayLayout.OverlayLayout, Object.assign({}, getDropZoneProps({
+      onDragEnter: function onDragEnter() {
+        return hasPreviouslyUploadedFiles && setDragging(true);
+      },
+      onExited: onClose
+    }), {
+      barLeft: /*#__PURE__*/_react.default.createElement(InputSearch, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+        className: searchIcon,
+        icon: /*#__PURE__*/_react.default.createElement(_roundSearch24px.ReactComponent, null)
+      }), /*#__PURE__*/_react.default.createElement("input", {
+        ref: searchInput,
+        onChange: function onChange(e) {
+          return searchOnChange(e.target.value);
+        },
+        placeholder: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Search by filename or tags"]))),
+        disabled: !fmFilePermission,
+        "data-testid": "file-manager.search-input"
+      })),
+      barRight: selected.length > 0 ? /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+        disabled: uploading,
+        onClick: function onClick() {
+          (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
+            return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+              while (1) {
+                switch (_context4.prev = _context4.next) {
+                  case 0:
+                    if (!(typeof onChange === "function")) {
+                      _context4.next = 4;
+                      break;
+                    }
+
+                    _context4.next = 3;
+                    return onChange(multiple ? selected : selected[0]);
+
+                  case 3:
+                    onClose && onClose();
+
+                  case 4:
+                  case "end":
+                    return _context4.stop();
+                }
+              }
+            }, _callee4);
+          }))();
+        }
+      }, t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Select"]))), " ", multiple && "(".concat(selected.length, ")")) : renderUploadFileAction({
+        browseFiles: browseFiles
+      })
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, dragging && hasPreviouslyUploadedFiles && /*#__PURE__*/_react.default.createElement(_DropFilesHere.default // @ts-ignore TODO: @adrian - className is never rendered?!
+    , {
+      className: style.draggingFeedback,
+      onDragLeave: function onDragLeave() {
+        return setDragging(false);
+      },
+      onDrop: function onDrop() {
+        return setDragging(false);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_FileDetails.default, {
+      validateFiles: validateFiles,
+      uploadFile: uploadFile,
+      file: getFileDetailsFile({
+        list: list,
+        src: showingFileDetails
+      }),
+      canEdit: canEdit
+    }), /*#__PURE__*/_react.default.createElement(_LeftSidebar.default, {
+      queryParams: queryParams,
+      toggleTag: function toggleTag(tag) {
+        return _toggleTag({
+          tag: tag,
+          queryParams: queryParams
+        });
+      }
+    }), /*#__PURE__*/_react.default.createElement(FileListWrapper, {
+      "data-testid": "fm-list-wrapper"
+    }, loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+      label: t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Loading Files..."]))),
+      style: {
+        opacity: 1
+      }
+    }), /*#__PURE__*/_react.default.createElement(_Scrollbar.Scrollbar, {
+      onScrollFrame: function onScrollFrame(scrollFrame) {
+        return refreshOnScroll({
+          scrollFrame: scrollFrame,
+          fetchMore: fetchMore
+        });
+      }
+    }, /*#__PURE__*/_react.default.createElement(FileList, null, list.length ? list.map(function (file) {
+      return renderFile({
+        uploadFile: uploadFile,
+        file: file,
+        showFileDetails: function showFileDetails() {
+          return _showFileDetails(file.src);
+        },
+        selected: selected.find(function (current) {
+          return current.src === file.src;
+        }),
+        onSelect: function () {
+          var _onSelect = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee5() {
+            return (0, _regeneratorRuntime2.default)().wrap(function _callee5$(_context5) {
+              while (1) {
+                switch (_context5.prev = _context5.next) {
+                  case 0:
+                    if (!(typeof onChange === "function")) {
+                      _context5.next = 7;
+                      break;
+                    }
+
+                    if (!multiple) {
+                      _context5.next = 4;
+                      break;
+                    }
+
+                    toggleSelected(file);
+                    return _context5.abrupt("return");
+
+                  case 4:
+                    _context5.next = 6;
+                    return onChange(file);
+
+                  case 6:
+                    onClose && onClose();
+
+                  case 7:
+                  case "end":
+                    return _context5.stop();
+                }
+              }
+            }, _callee5);
+          }));
+
+          function onSelect() {
+            return _onSelect.apply(this, arguments);
+          }
+
+          return onSelect;
+        }()
+      });
+    }) : renderEmpty({
+      hasPreviouslyUploadedFiles: hasPreviouslyUploadedFiles,
+      browseFiles: browseFiles,
+      fmFilePermission: fmFilePermission
+    }))), /*#__PURE__*/_react.default.createElement(_BottomInfoBar.default, {
+      accept: accept,
+      uploading: uploading
+    }))));
+  });
+};
+
+FileManagerView.defaultProps = {
+  multiple: false,
+  maxSize: "1000mb",
+  multipleMaxSize: "1000mb",
+  multipleMaxCount: 100
+};
+var _default = FileManagerView;
+exports.default = _default;