@webiny/app-file-manager 5.36.2 → 5.37.0-beta.1

package/modules/FileManagerRenderer/DefaultRenderer/EmptyView.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EmptyView = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _NoPermissionView = _interopRequireDefault(require("./NoPermissionView"));
-var _NoResults = _interopRequireDefault(require("./NoResults"));
-var _DropFilesHere = _interopRequireDefault(require("./DropFilesHere"));
-var _ = require("../../..");
-var EmptyView = function EmptyView(_ref) {
-  var browseFiles = _ref.browseFiles;
-  var _useFileManagerApi = (0, _.useFileManagerApi)(),
-    canRead = _useFileManagerApi.canRead;
-  var _useFileManagerView = (0, _.useFileManagerView)(),
-    hasPreviouslyUploadedFiles = _useFileManagerView.hasPreviouslyUploadedFiles;
-  if (!canRead) {
-    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();
-    }
-  });
-};
-exports.EmptyView = EmptyView;

package/modules/FileManagerRenderer/DefaultRenderer/EmptyView.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["EmptyView","browseFiles","useFileManagerApi","canRead","useFileManagerView","hasPreviouslyUploadedFiles"],"sources":["EmptyView.tsx"],"sourcesContent":["import React from \"react\";\nimport { FilesRenderChildren } from \"react-butterfiles\";\nimport NoPermissionView from \"./NoPermissionView\";\nimport NoResults from \"./NoResults\";\nimport DropFilesHere from \"./DropFilesHere\";\nimport { useFileManagerApi, useFileManagerView } from \"~/index\";\n\ninterface EmptyViewProps {\n    browseFiles: FilesRenderChildren[\"browseFiles\"];\n}\n\nexport const EmptyView = ({ browseFiles }: EmptyViewProps) => {\n    const { canRead } = useFileManagerApi();\n    const { hasPreviouslyUploadedFiles } = useFileManagerView();\n\n    if (!canRead) {\n        return <NoPermissionView />;\n    }\n    if (hasPreviouslyUploadedFiles) {\n        return <NoResults />;\n    }\n    return <DropFilesHere empty onClick={() => browseFiles()} />;\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAMO,IAAMA,SAAS,GAAG,SAAZA,SAAS,OAAwC;EAAA,IAAlCC,WAAW,QAAXA,WAAW;EACnC,yBAAoB,IAAAC,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EACf,0BAAuC,IAAAC,oBAAkB,GAAE;IAAnDC,0BAA0B,uBAA1BA,0BAA0B;EAElC,IAAI,CAACF,OAAO,EAAE;IACV,oBAAO,6BAAC,yBAAgB,OAAG;EAC/B;EACA,IAAIE,0BAA0B,EAAE;IAC5B,oBAAO,6BAAC,kBAAS,OAAG;EACxB;EACA,oBAAO,6BAAC,sBAAa;IAAC,KAAK;IAAC,OAAO,EAAE;MAAA,OAAMJ,WAAW,EAAE;IAAA;EAAC,EAAG;AAChE,CAAC;AAAC"}

package/modules/FileManagerRenderer/DefaultRenderer/File.d.ts

@@ -1,16 +0,0 @@
-import React from "react";
-import { FileItem } from "@webiny/app-admin/types";
-export interface FileProps {
-    file: FileItem;
-    selected: boolean;
-    onSelect: (event?: React.MouseEvent) => void;
-    onClick?: (event?: React.MouseEvent) => void;
-    options?: Array<{
-        label: string;
-        onClick: (file: Object) => void;
-    }>;
-    children: React.ReactNode;
-    showFileDetails: (event?: React.MouseEvent) => void;
-}
-declare const MemoizedFile: React.NamedExoticComponent<FileProps>;
-export default MemoizedFile;

package/modules/FileManagerRenderer/DefaultRenderer/File.js

@@ -1,131 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactLazyLoad = _interopRequireDefault(require("react-lazy-load"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _emotion = require("emotion");
-var _Ripple = require("@webiny/ui/Ripple");
-var _Button = require("@webiny/ui/Button");
-var _settings = require("@material-design-icons/svg/outlined/settings.svg");
-/**
- * Package react-lazy-load has no types.
- */
-// @ts-ignore
-
-var COMPONENT_WIDTH = 200;
-var COMPONENT_HEIGHT = 200;
-var grow = /*#__PURE__*/(0, _emotion.keyframes)("0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}label:grow;");
-var styles = /*#__PURE__*/(0, _emotion.css)({
-  display: "inline-block",
-  float: "left",
-  position: "relative",
-  zIndex: 1,
-  margin: 10,
-  cursor: "pointer",
-  width: "100%",
-  maxWidth: COMPONENT_WIDTH,
-  border: "1px solid var(--mdc-theme-on-background)",
-  borderRadius: 2,
-  "> .body": {
-    transition: "200ms ease-in opacity",
-    width: COMPONENT_WIDTH,
-    height: COMPONENT_HEIGHT,
-    overflow: "hidden",
-    ".infoIcon": {
-      opacity: 0,
-      position: "absolute",
-      top: 0,
-      right: 0,
-      zIndex: 10,
-      transition: "all 150ms ease-in",
-      "& .mdc-icon-button svg": {
-        color: "var(--mdc-theme-secondary)"
-      },
-      "&:hover": {
-        animationName: grow,
-        animationDuration: ".4s",
-        animationTimingFunction: "ease-in",
-        animationDelay: ".2s"
-      }
-    },
-    ".filePreview": {
-      textAlign: "center",
-      position: "relative",
-      backgroundColor: "#fff",
-      width: "100%",
-      height: "100%",
-      ".clickableArea": {
-        position: "absolute",
-        top: 30,
-        left: 0,
-        width: "100%",
-        height: 170,
-        zIndex: 2
-      }
-    },
-    "&:hover .infoIcon": {
-      opacity: 1
-    }
-  },
-  "> .label": {
-    padding: "15px 10px",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    fontSize: "0.8rem",
-    color: "var(--mdc-theme-on-surface)",
-    backgroundColor: "var(--mdc-theme-on-background)"
-  },
-  "&.disable-select": {
-    cursor: "auto"
-  }
-}, "label:styles;");
-var highlight = /*#__PURE__*/(0, _emotion.css)("box-shadow:0px 0px 0px 2px var(--mdc-theme-primary);> .label{color:var(--mdc-theme-primary);}label:highlight;");
-var File = function File(props) {
-  var file = props.file,
-    selected = props.selected,
-    onSelect = props.onSelect,
-    children = props.children,
-    showFileDetails = props.showFileDetails;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(styles, {
-      "disable-select": !onSelect
-    }, selected ? highlight : undefined),
-    "data-testid": "fm-list-wrapper-file"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "body"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "infoIcon"
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_settings.ReactComponent, null),
-    onClick: showFileDetails,
-    "data-testid": "fm-file-wrapper-file-info-icon"
-  })), /*#__PURE__*/_react.default.createElement(_reactLazyLoad.default, {
-    height: 200,
-    offsetVertical: 300
-  }, /*#__PURE__*/_react.default.createElement(_Ripple.Ripple, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "filePreview"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "clickableArea",
-    onClick: onSelect
-  }), children)))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "label",
-    onClick: onSelect
-  }, file.name));
-};
-var MemoizedFile = /*#__PURE__*/_react.default.memo(File, function (prev, next) {
-  if (prev.selected !== next.selected) {
-    return false;
-  } else if (prev.file.name !== next.file.name) {
-    return false;
-  }
-  return true;
-});
-MemoizedFile.displayName = "MemoizedFile";
-var _default = MemoizedFile;
-exports.default = _default;

package/modules/FileManagerRenderer/DefaultRenderer/File.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["COMPONENT_WIDTH","COMPONENT_HEIGHT","grow","keyframes","styles","css","display","float","position","zIndex","margin","cursor","width","maxWidth","border","borderRadius","transition","height","overflow","opacity","top","right","color","animationName","animationDuration","animationTimingFunction","animationDelay","textAlign","backgroundColor","left","padding","whiteSpace","textOverflow","fontSize","highlight","File","props","file","selected","onSelect","children","showFileDetails","classNames","undefined","name","MemoizedFile","React","memo","prev","next","displayName"],"sources":["File.tsx"],"sourcesContent":["import React from \"react\";\n/**\n * Package react-lazy-load has no types.\n */\n// @ts-ignore\nimport LazyLoad from \"react-lazy-load\";\nimport classNames from \"classnames\";\nimport { css, keyframes } from \"emotion\";\nimport { Ripple } from \"@webiny/ui/Ripple\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as SettingsIcon } from \"@material-design-icons/svg/outlined/settings.svg\";\nimport { FileItem } from \"@webiny/app-admin/types\";\n\nconst COMPONENT_WIDTH = 200;\nconst COMPONENT_HEIGHT = 200;\n\nconst grow = keyframes`\n  0% {\n    transform: scale(1)\n  }\n  50% {\n    transform: scale(1.2)\n  }\n  100% {\n    transform: scale(1)\n  }\n`;\nconst styles = css({\n    display: \"inline-block\",\n    float: \"left\",\n    position: \"relative\",\n    zIndex: 1,\n    margin: 10,\n    cursor: \"pointer\",\n    width: \"100%\",\n    maxWidth: COMPONENT_WIDTH,\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    borderRadius: 2,\n    \"> .body\": {\n        transition: \"200ms ease-in opacity\",\n        width: COMPONENT_WIDTH,\n        height: COMPONENT_HEIGHT,\n        overflow: \"hidden\",\n        \".infoIcon\": {\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            right: 0,\n            zIndex: 10,\n            transition: \"all 150ms ease-in\",\n            \"& .mdc-icon-button svg\": {\n                color: \"var(--mdc-theme-secondary)\"\n            },\n            \"&:hover\": {\n                animationName: grow,\n                animationDuration: \".4s\",\n                animationTimingFunction: \"ease-in\",\n                animationDelay: \".2s\"\n            }\n        },\n        \".filePreview\": {\n            textAlign: \"center\",\n            position: \"relative\",\n            backgroundColor: \"#fff\",\n            width: \"100%\",\n            height: \"100%\",\n            \".clickableArea\": {\n                position: \"absolute\",\n                top: 30,\n                left: 0,\n                width: \"100%\",\n                height: 170,\n                zIndex: 2\n            }\n        },\n        \"&:hover .infoIcon\": {\n            opacity: 1\n        }\n    },\n    \"> .label\": {\n        padding: \"15px 10px\",\n        whiteSpace: \"nowrap\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        fontSize: \"0.8rem\",\n        color: \"var(--mdc-theme-on-surface)\",\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&.disable-select\": {\n        cursor: \"auto\"\n    }\n});\n\nconst highlight = css`\n    box-shadow: 0px 0px 0px 2px var(--mdc-theme-primary);\n    > .label {\n        color: var(--mdc-theme-primary);\n    }\n`;\n\nexport interface FileProps {\n    file: FileItem;\n    selected: boolean;\n    onSelect: (event?: React.MouseEvent) => void;\n    onClick?: (event?: React.MouseEvent) => void;\n    options?: Array<{ label: string; onClick: (file: Object) => void }>;\n    children: React.ReactNode;\n    showFileDetails: (event?: React.MouseEvent) => void;\n}\n\nconst File: React.FC<FileProps> = props => {\n    const { file, selected, onSelect, children, showFileDetails } = props;\n\n    return (\n        <div\n            className={classNames(\n                styles,\n                { \"disable-select\": !onSelect },\n                selected ? highlight : undefined\n            )}\n            data-testid={\"fm-list-wrapper-file\"}\n        >\n            <div className={\"body\"}>\n                <div className={\"infoIcon\"}>\n                    <IconButton\n                        icon={<SettingsIcon />}\n                        onClick={showFileDetails}\n                        data-testid={\"fm-file-wrapper-file-info-icon\"}\n                    />\n                </div>\n                <LazyLoad height={200} offsetVertical={300}>\n                    <Ripple>\n                        <div className={\"filePreview\"}>\n                            <div className=\"clickableArea\" onClick={onSelect} />\n                            {children}\n                        </div>\n                    </Ripple>\n                </LazyLoad>\n            </div>\n            <div className={\"label\"} onClick={onSelect}>\n                {file.name}\n            </div>\n        </div>\n    );\n};\n\nconst MemoizedFile = React.memo(File, (prev, next) => {\n    if (prev.selected !== next.selected) {\n        return false;\n    } else if (prev.file.name !== next.file.name) {\n        return false;\n    }\n\n    return true;\n});\n\nMemoizedFile.displayName = \"MemoizedFile\";\nexport default MemoizedFile;\n"],"mappings":"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"}

package/modules/FileManagerRenderer/DefaultRenderer/FileManagerView.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import { FilesRules } from "react-butterfiles";
-export interface FileManagerViewProps {
-    onChange?: Function;
-    onClose?: Function;
-    files?: FilesRules;
-    multiple?: boolean;
-    accept: Array<string>;
-    maxSize?: number | string;
-    multipleMaxCount?: number;
-    multipleMaxSize?: number | string;
-    onUploadCompletion?: Function;
-    tags?: string[];
-    scope?: string;
-    own?: boolean;
-}
-declare const _default: React.FunctionComponent<FileManagerViewProps>;
-export default _default;

package/modules/FileManagerRenderer/DefaultRenderer/FileManagerView.js

@@ -1,414 +0,0 @@
-"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 _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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
-var _mobxReactLite = require("mobx-react-lite");
-var _emotion = require("emotion");
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _reactHotkeyz = require("react-hotkeyz");
-var _search = require("@material-design-icons/svg/outlined/search.svg");
-var _cloud_upload = require("@material-design-icons/svg/filled/cloud_upload.svg");
-var _Button = require("@webiny/ui/Button");
-var _Icon = require("@webiny/ui/Icon");
-var _Scrollbar = require("@webiny/ui/Scrollbar");
-var _Progress = require("@webiny/ui/Progress");
-var _i18n = require("@webiny/app/i18n");
-var _appAdmin = require("@webiny/app-admin");
-var _File = _interopRequireDefault(require("./File"));
-var _getFileTypePlugin = _interopRequireDefault(require("../../../getFileTypePlugin"));
-var _outputFileSelectionError = require("./outputFileSelectionError");
-var _DropFilesHere = _interopRequireDefault(require("./DropFilesHere"));
-var _FileDetails = require("../../../components/FileDetails");
-var _LeftSidebar = _interopRequireDefault(require("./LeftSidebar"));
-var _BottomInfoBar = _interopRequireDefault(require("./BottomInfoBar"));
-var _ = require("../../..");
-var _EmptyView = require("./EmptyView");
-var _UploadStatus = _interopRequireDefault(require("./BottomInfoBar/UploadStatus"));
-var _SupportedFileTypes = _interopRequireDefault(require("./BottomInfoBar/SupportedFileTypes"));
-var _BatchFileUploader = require("../../../BatchFileUploader");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var t = _i18n.i18n.ns("app-admin/file-manager/file-manager-view");
-var InputSearch = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eo7d5v20",
-  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: "eo7d5v21",
-  label: "FileListWrapper"
-})({
-  float: "right",
-  display: "inline-block",
-  width: "calc(100vw - 270px)",
-  height: "100%"
-});
-var FileList = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eo7d5v22",
-  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 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,
-    onUploadCompletion = props.onUploadCompletion;
-  var _useFileManagerView = (0, _.useFileManagerView)(),
-    files = _useFileManagerView.files,
-    loadingFiles = _useFileManagerView.loadingFiles,
-    loadMore = _useFileManagerView.loadMore,
-    selected = _useFileManagerView.selected,
-    toggleSelected = _useFileManagerView.toggleSelected,
-    dragging = _useFileManagerView.dragging,
-    setDragging = _useFileManagerView.setDragging,
-    _showFileDetails = _useFileManagerView.showFileDetails,
-    hideFileDetails = _useFileManagerView.hideFileDetails,
-    showingFileDetails = _useFileManagerView.showingFileDetails,
-    queryParams = _useFileManagerView.queryParams,
-    setQueryParams = _useFileManagerView.setQueryParams,
-    hasPreviouslyUploadedFiles = _useFileManagerView.hasPreviouslyUploadedFiles,
-    setHasPreviouslyUploadedFiles = _useFileManagerView.setHasPreviouslyUploadedFiles,
-    uploadFile = _useFileManagerView.uploadFile,
-    settings = _useFileManagerView.settings;
-  var _useState = (0, _react.useState)(function () {
-      return new _BatchFileUploader.BatchFileUploader(uploadFile);
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    uploader = _useState2[0];
-  var fileManager = (0, _.useFileManagerApi)();
-  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
-  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 _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref) {
-      var tag, queryParams, finalTags;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            tag = _ref.tag, queryParams = _ref.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 _ref2.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;
-  }, []);
-  (0, _reactHotkeyz.useHotkeys)({
-    zIndex: 50,
-    keys: {
-      esc: onClose
-    }
-  });
-  var searchInput = (0, _react.useRef)(null);
-  var refreshOnScroll = (0, _react.useCallback)((0, _debounce.default)(function (_ref3) {
-    var scrollFrame = _ref3.scrollFrame,
-      loadMore = _ref3.loadMore;
-    if (scrollFrame.top > 0.9) {
-      loadMore();
-    }
-  }, 500), [loadMore]);
-  var uploadFiles = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(files) {
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            uploader.addFiles(files);
-            uploader.onUploadFinished(function (_ref5) {
-              var uploaded = _ref5.uploaded,
-                errors = _ref5.errors;
-              uploader.reset();
-              if (!hasPreviouslyUploadedFiles) {
-                setHasPreviouslyUploadedFiles(true);
-              }
-              if (errors.length > 0) {
-                // We wait 750ms, just for everything to settle down a bit.
-                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 (_ref6) {
-                    var file = _ref6.file,
-                      e = _ref6.e;
-                    return /*#__PURE__*/_react.default.createElement("li", {
-                      key: file.name
-                    }, /*#__PURE__*/_react.default.createElement("strong", null, file.name), ": ", getFileUploadErrorMessage(e));
-                  }))));
-                }, 750);
-                return;
-              }
-
-              // 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") {
-                // We wait 750ms, just for everything to settle down a bit.
-                setTimeout(function () {
-                  onUploadCompletion(uploaded);
-                  onClose && onClose();
-                }, 750);
-              }
-            });
-          case 2:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function uploadFiles(_x2) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  var renderUploadFileAction = (0, _react.useCallback)(function (_ref7) {
-    var browseFiles = _ref7.browseFiles;
-    if (!fileManager.canCreate) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-      onClick: browseFiles
-    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
-      icon: /*#__PURE__*/_react.default.createElement(_cloud_upload.ReactComponent, null)
-    }), t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Upload..."]))));
-  }, [fileManager.canCreate]);
-  var filesBeingUploaded = uploader.getJobs().length;
-  var progress = uploader.progress;
-  return /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
-    multiple: true,
-    maxSize: settings ? settings.uploadMaxFileSize + "b" : "1TB",
-    multipleMaxSize: "1TB",
-    accept: accept,
-    onSuccess: function onSuccess(files) {
-      var filesToUpload = files.map(function (file) {
-        return file.src.file;
-      }).filter(Boolean);
-      uploadFiles(filesToUpload);
-    },
-    onError: function onError(errors) {
-      console.log("onError", errors);
-      var message = (0, _outputFileSelectionError.outputFileSelectionError)(errors);
-      showSnackbar(message);
-    }
-  }, function (_ref8) {
-    var getDropZoneProps = _ref8.getDropZoneProps,
-      browseFiles = _ref8.browseFiles;
-    return /*#__PURE__*/_react.default.createElement(_appAdmin.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(_search.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: !fileManager.canRead,
-        "data-testid": "file-manager.search-input"
-      })),
-      barRight: selected.length > 0 ? /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-        onClick: function onClick() {
-          (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
-            return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
-                case 0:
-                  if (!(typeof onChange === "function")) {
-                    _context3.next = 4;
-                    break;
-                  }
-                  _context3.next = 3;
-                  return onChange(multiple ? selected : selected[0]);
-                case 3:
-                  onClose && onClose();
-                case 4:
-                case "end":
-                  return _context3.stop();
-              }
-            }, _callee3);
-          }))();
-        }
-      }, 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, {
-      onDragLeave: function onDragLeave() {
-        return setDragging(false);
-      },
-      onDrop: function onDrop() {
-        return setDragging(false);
-      }
-    }), showingFileDetails ? /*#__PURE__*/_react.default.createElement(_FileDetails.FileDetails, {
-      file: files.find(function (item) {
-        return item.id === showingFileDetails;
-      }),
-      onClose: hideFileDetails,
-      open: Boolean(showingFileDetails),
-      loading: false // We don't need to show the loader here
-    }) : null, /*#__PURE__*/_react.default.createElement(_LeftSidebar.default, {
-      toggleTag: function toggleTag(tag) {
-        return _toggleTag({
-          tag: tag,
-          queryParams: queryParams
-        });
-      }
-    }), /*#__PURE__*/_react.default.createElement(FileListWrapper, {
-      "data-testid": "fm-list-wrapper"
-    }, loadingFiles && /*#__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,
-          loadMore: loadMore
-        });
-      }
-    }, /*#__PURE__*/_react.default.createElement(FileList, null, files.length ? files.map(function (file) {
-      return renderFile({
-        file: file,
-        showFileDetails: function showFileDetails() {
-          return _showFileDetails(file.id);
-        },
-        selected: selected.some(function (current) {
-          return current.src === file.src;
-        }),
-        onSelect: function () {
-          var _onSelect = (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 = 7;
-                    break;
-                  }
-                  if (!multiple) {
-                    _context4.next = 4;
-                    break;
-                  }
-                  toggleSelected(file);
-                  return _context4.abrupt("return");
-                case 4:
-                  _context4.next = 6;
-                  return onChange(file);
-                case 6:
-                  onClose && onClose();
-                case 7:
-                case "end":
-                  return _context4.stop();
-              }
-            }, _callee4);
-          }));
-          function onSelect() {
-            return _onSelect.apply(this, arguments);
-          }
-          return onSelect;
-        }()
-      });
-    }) : /*#__PURE__*/_react.default.createElement(_EmptyView.EmptyView, {
-      browseFiles: browseFiles
-    }))), /*#__PURE__*/_react.default.createElement(_BottomInfoBar.default, null, /*#__PURE__*/_react.default.createElement(_SupportedFileTypes.default, {
-      accept: accept
-    }), filesBeingUploaded > 0 && /*#__PURE__*/_react.default.createElement(_UploadStatus.default, {
-      numberOfFiles: filesBeingUploaded,
-      progress: progress
-    })))));
-  });
-};
-FileManagerView.defaultProps = {
-  multiple: false
-};
-var _default = (0, _mobxReactLite.observer)(FileManagerView);
-exports.default = _default;