@webiny/app-file-manager 5.34.8 → 5.35.0-beta.1

package/modules/FileManagerRenderer/DefaultRenderer/FileManagerView.js

@@ -0,0 +1,443 @@
+"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 _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
+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 _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,
+    uploading = _useFileManagerView.uploading,
+    setUploading = _useFileManagerView.setUploading,
+    _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 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 _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 _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(file) {
+                var newFile;
+                return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      _context2.prev = 0;
+                      _context2.next = 3;
+                      return uploadFile(file);
+                    case 3:
+                      newFile = _context2.sent;
+                      if (newFile) {
+                        uploadedFiles.push(newFile);
+                      }
+                      _context2.next = 10;
+                      break;
+                    case 7:
+                      _context2.prev = 7;
+                      _context2.t0 = _context2["catch"](0);
+                      errors.push({
+                        file: file,
+                        e: _context2.t0
+                      });
+                    case 10:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _callee2, null, [[0, 7]]);
+              }));
+              return function (_x3) {
+                return _ref5.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 (_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));
+              }))));
+              // 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 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,
+      disabled: uploading
+    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
+      icon: /*#__PURE__*/_react.default.createElement(_cloud_upload.ReactComponent, null)
+    }), t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Upload..."]))));
+  }, [uploading, fileManager.canCreate]);
+  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, {
+        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, {
+      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
+    }) : 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 _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;
+        }()
+      });
+    }) : /*#__PURE__*/_react.default.createElement(_EmptyView.EmptyView, {
+      browseFiles: browseFiles
+    }))), /*#__PURE__*/_react.default.createElement(_BottomInfoBar.default, {
+      accept: accept,
+      uploading: uploading
+    }))));
+  });
+};
+FileManagerView.defaultProps = {
+  multiple: false
+};
+var _default = FileManagerView;
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","InputSearch","styled","backgroundColor","position","height","padding","width","borderRadius","border","fontSize","marginLeft","outline","color","searchIcon","css","left","top","FileListWrapper","float","display","FileList","gridTemplateColumns","marginBottom","renderFile","props","file","plugin","getFileTypePlugin","id","render","FileManagerView","onClose","onChange","accept","multiple","onUploadCompletion","useFileManagerView","files","loadingFiles","loadMore","selected","toggleSelected","dragging","setDragging","uploading","setUploading","showFileDetails","hideFileDetails","showingFileDetails","queryParams","setQueryParams","hasPreviouslyUploadedFiles","setHasPreviouslyUploadedFiles","uploadFile","settings","fileManager","useFileManagerApi","useSnackbar","showSnackbar","searchOnChange","useCallback","debounce","search","toggleTag","tag","finalTags","Array","isArray","tags","includes","splice","indexOf","push","getFileUploadErrorMessage","e","match","message","useHotkeys","zIndex","keys","esc","searchInput","useRef","refreshOnScroll","scrollFrame","uploadFiles","list","errors","uploadedFiles","Promise","all","map","newFile","length","setTimeout","name","renderUploadFileAction","browseFiles","canCreate","uploadMaxFileSize","filesToUpload","src","filter","Boolean","console","log","outputFileSelectionError","getDropZoneProps","onDragEnter","onExited","target","value","canRead","find","item","opacity","some","current","onSelect","defaultProps"],"sources":["FileManagerView.tsx"],"sourcesContent":["import React, { useRef, useCallback } from \"react\";\nimport Files from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport debounce from \"lodash/debounce\";\nimport styled from \"@emotion/styled\";\n// @ts-ignore\nimport { useHotkeys } from \"react-hotkeyz\";\nimport { FilesRules } from \"react-butterfiles\";\nimport { ReactComponent as SearchIcon } from \"@material-design-icons/svg/outlined/search.svg\";\nimport { ReactComponent as UploadIcon } from \"@material-design-icons/svg/filled/cloud_upload.svg\";\nimport { ButtonPrimary, ButtonIcon } from \"@webiny/ui/Button\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Scrollbar } from \"@webiny/ui/Scrollbar\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { OverlayLayout, useSnackbar } from \"@webiny/app-admin\";\nimport FileThumbnail, { FileProps } from \"./File\";\nimport getFileTypePlugin from \"~/getFileTypePlugin\";\nimport { outputFileSelectionError } from \"./outputFileSelectionError\";\nimport DropFilesHere from \"./DropFilesHere\";\nimport { FileDetails } from \"~/components/FileDetails\";\nimport LeftSidebar from \"./LeftSidebar\";\nimport BottomInfoBar from \"./BottomInfoBar\";\nimport { useFileManagerApi, useFileManagerView } from \"~/index\";\nimport { EmptyView } from \"./EmptyView\";\n\nconst t = i18n.ns(\"app-admin/file-manager/file-manager-view\");\n\nconst InputSearch = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    position: \"relative\",\n    height: 32,\n    padding: 3,\n    width: \"100%\",\n    borderRadius: 2,\n    \"> input\": {\n        border: \"none\",\n        fontSize: 14,\n        width: \"calc(100% - 10px)\",\n        height: \"100%\",\n        marginLeft: 50,\n        backgroundColor: \"transparent\",\n        outline: \"none\",\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\nconst searchIcon = css({\n    \"&.mdc-button__icon\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        position: \"absolute\",\n        width: 24,\n        height: 24,\n        left: 15,\n        top: 7\n    }\n});\n\nconst FileListWrapper = styled(\"div\")({\n    float: \"right\",\n    display: \"inline-block\",\n    width: \"calc(100vw - 270px)\",\n    height: \"100%\"\n});\n\nconst FileList = styled(\"div\")({\n    width: \"100%\",\n    display: \"grid\",\n    /* define the number of grid columns */\n    gridTemplateColumns: \"repeat( auto-fill, minmax(220px, 1fr) )\",\n    marginBottom: 95\n});\n\nexport interface FileManagerViewProps {\n    onChange?: Function;\n    onClose?: Function;\n    files?: FilesRules;\n    multiple?: boolean; // Does not affect <Files> component, it always allows multiple selection.\n    accept: Array<string>;\n    maxSize?: number | string;\n    multipleMaxCount?: number;\n    multipleMaxSize?: number | string;\n    onUploadCompletion?: Function;\n    tags?: string[];\n    scope?: string;\n    own?: boolean;\n}\n\ninterface RenderFileProps extends Omit<FileProps, \"children\"> {\n    file: FileItem;\n    children?: React.ReactNode;\n}\nconst renderFile: React.FC<RenderFileProps> = props => {\n    const { file } = props;\n    const plugin = getFileTypePlugin(file);\n    if (!plugin) {\n        return null;\n    }\n    return (\n        <FileThumbnail {...props} key={file.id}>\n            {plugin.render({\n                /**\n                 * TODO @ts-refactor\n                 */\n                // @ts-ignore\n                file\n            })}\n        </FileThumbnail>\n    );\n};\n\ninterface RefreshOnScrollParams {\n    loadMore: () => void;\n    scrollFrame: {\n        top: number;\n    };\n}\n\ninterface FileError {\n    file: File;\n    e: Error;\n}\n\nconst FileManagerView: React.FC<FileManagerViewProps> = props => {\n    const { onClose, onChange, accept, multiple = false, onUploadCompletion } = props;\n\n    const {\n        files,\n        loadingFiles,\n        loadMore,\n        selected,\n        toggleSelected,\n        dragging,\n        setDragging,\n        uploading,\n        setUploading,\n        showFileDetails,\n        hideFileDetails,\n        showingFileDetails,\n        queryParams,\n        setQueryParams,\n        hasPreviouslyUploadedFiles,\n        setHasPreviouslyUploadedFiles,\n        uploadFile,\n        settings\n    } = useFileManagerView();\n\n    const fileManager = useFileManagerApi();\n    const { showSnackbar } = useSnackbar();\n\n    const searchOnChange = useCallback(\n        // @ts-ignore\n        debounce(search => setQueryParams({ search }), 500),\n        []\n    );\n\n    const toggleTag = useCallback(async ({ tag, queryParams }) => {\n        const finalTags = Array.isArray(queryParams.tags) ? [...queryParams.tags] : [];\n\n        if (finalTags.includes(tag)) {\n            finalTags.splice(finalTags.indexOf(tag), 1);\n        } else {\n            finalTags.push(tag);\n        }\n\n        setQueryParams({ ...queryParams, tags: finalTags });\n    }, []);\n\n    const getFileUploadErrorMessage = useCallback(e => {\n        if (typeof e === \"string\") {\n            const match = e.match(/Message>(.*?)<\\/Message/);\n            if (match) {\n                const [, message] = match;\n                return message;\n            }\n\n            return e;\n        }\n        return e.message;\n    }, []);\n\n    useHotkeys({\n        zIndex: 50,\n        keys: {\n            esc: onClose\n        }\n    });\n\n    const searchInput = useRef<HTMLInputElement>(null);\n\n    const refreshOnScroll = useCallback(\n        debounce(({ scrollFrame, loadMore }: RefreshOnScrollParams) => {\n            if (scrollFrame.top > 0.9) {\n                loadMore();\n            }\n        }, 500),\n        [loadMore]\n    );\n\n    const uploadFiles = async (files: File | File[]): Promise<number | null> => {\n        setUploading(true);\n        const list: File[] = Array.isArray(files) ? files : [files];\n\n        const errors: FileError[] = [];\n        const uploadedFiles: FileItem[] = [];\n        await Promise.all(\n            list.map(async file => {\n                try {\n                    const newFile = await uploadFile(file);\n\n                    if (newFile) {\n                        uploadedFiles.push(newFile);\n                    }\n                } catch (e) {\n                    errors.push({ file, e });\n                }\n            })\n        );\n\n        if (!hasPreviouslyUploadedFiles) {\n            setHasPreviouslyUploadedFiles(true);\n        }\n\n        setUploading(false);\n\n        if (errors.length > 0) {\n            // We wait 750ms, just for everything to settle down a bit.\n            return setTimeout(() => {\n                showSnackbar(\n                    <>\n                        {t`One or more files were not uploaded successfully:`}\n                        <ol>\n                            {errors.map(({ file, e }) => (\n                                <li key={file.name}>\n                                    <strong>{file.name}</strong>: {getFileUploadErrorMessage(e)}\n                                </li>\n                            ))}\n                        </ol>\n                    </>\n                );\n                // TODO @ts-refactor\n            }, 750) as unknown as number;\n        }\n\n        // We wait 750ms, just for everything to settle down a bit.\n        setTimeout(() => showSnackbar(t`File upload complete.`), 750);\n        if (typeof onUploadCompletion === \"function\") {\n            // We wait 750ms, just for everything to settle down a bit.\n            return setTimeout(() => {\n                onUploadCompletion(uploadedFiles);\n                onClose && onClose();\n                // TODO @ts-refactor\n            }, 750) as unknown as number;\n        }\n        return null;\n    };\n\n    const renderUploadFileAction = useCallback(\n        ({ browseFiles }) => {\n            if (!fileManager.canCreate) {\n                return null;\n            }\n            return (\n                <ButtonPrimary onClick={browseFiles} disabled={uploading}>\n                    <ButtonIcon icon={<UploadIcon />} />\n                    {t`Upload...`}\n                </ButtonPrimary>\n            );\n        },\n        [uploading, fileManager.canCreate]\n    );\n\n    return (\n        <Files\n            multiple\n            maxSize={settings ? settings.uploadMaxFileSize + \"b\" : \"1TB\"}\n            multipleMaxSize={\"1TB\"}\n            accept={accept}\n            onSuccess={files => {\n                const filesToUpload = files.map(file => file.src.file).filter(Boolean) as File[];\n                uploadFiles(filesToUpload);\n            }}\n            onError={errors => {\n                console.log(\"onError\", errors);\n                const message = outputFileSelectionError(errors);\n                showSnackbar(message);\n            }}\n        >\n            {({ getDropZoneProps, browseFiles }) => (\n                <OverlayLayout\n                    {...getDropZoneProps({\n                        onDragEnter: () => hasPreviouslyUploadedFiles && setDragging(true),\n                        onExited: onClose\n                    })}\n                    barLeft={\n                        <InputSearch>\n                            <Icon className={searchIcon} icon={<SearchIcon />} />\n                            <input\n                                ref={searchInput}\n                                onChange={e => searchOnChange(e.target.value)}\n                                placeholder={t`Search by filename or tags`}\n                                disabled={!fileManager.canRead}\n                                data-testid={\"file-manager.search-input\"}\n                            />\n                        </InputSearch>\n                    }\n                    barRight={\n                        selected.length > 0 ? (\n                            <ButtonPrimary\n                                disabled={uploading}\n                                onClick={() => {\n                                    (async () => {\n                                        if (typeof onChange === \"function\") {\n                                            await onChange(multiple ? selected : selected[0]);\n\n                                            onClose && onClose();\n                                        }\n                                    })();\n                                }}\n                            >\n                                {t`Select`} {multiple && `(${selected.length})`}\n                            </ButtonPrimary>\n                        ) : (\n                            renderUploadFileAction({ browseFiles })\n                        )\n                    }\n                >\n                    <>\n                        {dragging && hasPreviouslyUploadedFiles && (\n                            <DropFilesHere\n                                onDragLeave={() => setDragging(false)}\n                                onDrop={() => setDragging(false)}\n                            />\n                        )}\n\n                        {showingFileDetails ? (\n                            <FileDetails\n                                file={files.find(item => item.id === showingFileDetails)!}\n                                onClose={hideFileDetails}\n                            />\n                        ) : null}\n\n                        <LeftSidebar toggleTag={tag => toggleTag({ tag, queryParams })} />\n\n                        <FileListWrapper data-testid={\"fm-list-wrapper\"}>\n                            {loadingFiles && (\n                                <CircularProgress\n                                    label={t`Loading Files...`}\n                                    style={{ opacity: 1 }}\n                                />\n                            )}\n                            <Scrollbar\n                                onScrollFrame={scrollFrame =>\n                                    refreshOnScroll({ scrollFrame, loadMore })\n                                }\n                            >\n                                <FileList>\n                                    {files.length ? (\n                                        files.map(file =>\n                                            renderFile({\n                                                file,\n                                                showFileDetails: () => showFileDetails(file.id),\n                                                selected: selected.some(\n                                                    current => current.src === file.src\n                                                ),\n                                                onSelect: async () => {\n                                                    if (typeof onChange === \"function\") {\n                                                        if (multiple) {\n                                                            toggleSelected(file);\n                                                            return;\n                                                        }\n\n                                                        await onChange(file);\n                                                        onClose && onClose();\n                                                    }\n                                                }\n                                            })\n                                        )\n                                    ) : (\n                                        <EmptyView browseFiles={browseFiles} />\n                                    )}\n                                </FileList>\n                            </Scrollbar>\n                            <BottomInfoBar accept={accept} uploading={uploading} />\n                        </FileListWrapper>\n                    </>\n                </OverlayLayout>\n            )}\n        </Files>\n    );\n};\n\nFileManagerView.defaultProps = {\n    multiple: false\n};\n\nexport default FileManagerView;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAwC;AAExC,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,0CAA0C,CAAC;AAE7D,IAAMC,WAAW,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC9BC,eAAe,EAAE,gCAAgC;EACjDC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE,EAAE;EACVC,OAAO,EAAE,CAAC;EACVC,KAAK,EAAE,MAAM;EACbC,YAAY,EAAE,CAAC;EACf,SAAS,EAAE;IACPC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,EAAE;IACZH,KAAK,EAAE,mBAAmB;IAC1BF,MAAM,EAAE,MAAM;IACdM,UAAU,EAAE,EAAE;IACdR,eAAe,EAAE,aAAa;IAC9BS,OAAO,EAAE,MAAM;IACfC,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAEF,IAAMC,UAAU,gBAAG,IAAAC,YAAG,EAAC;EACnB,oBAAoB,EAAE;IAClBF,KAAK,EAAE,+CAA+C;IACtDT,QAAQ,EAAE,UAAU;IACpBG,KAAK,EAAE,EAAE;IACTF,MAAM,EAAE,EAAE;IACVW,IAAI,EAAE,EAAE;IACRC,GAAG,EAAE;EACT;AACJ,CAAC,sBAAC;AAEF,IAAMC,eAAe,oBAAGhB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAClCiB,KAAK,EAAE,OAAO;EACdC,OAAO,EAAE,cAAc;EACvBb,KAAK,EAAE,qBAAqB;EAC5BF,MAAM,EAAE;AACZ,CAAC,CAAC;AAEF,IAAMgB,QAAQ,oBAAGnB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC3BK,KAAK,EAAE,MAAM;EACba,OAAO,EAAE,MAAM;EACf;EACAE,mBAAmB,EAAE,yCAAyC;EAC9DC,YAAY,EAAE;AAClB,CAAC,CAAC;AAqBF,IAAMC,UAAqC,GAAG,SAAxCA,UAAqC,CAAGC,KAAK,EAAI;EACnD,IAAQC,IAAI,GAAKD,KAAK,CAAdC,IAAI;EACZ,IAAMC,MAAM,GAAG,IAAAC,0BAAiB,EAACF,IAAI,CAAC;EACtC,IAAI,CAACC,MAAM,EAAE;IACT,OAAO,IAAI;EACf;EACA,oBACI,6BAAC,aAAa,oBAAKF,KAAK;IAAE,GAAG,EAAEC,IAAI,CAACG;EAAG,IAClCF,MAAM,CAACG,MAAM,CAAC;IACX;AAChB;AACA;IACgB;IACAJ,IAAI,EAAJA;EACJ,CAAC,CAAC,CACU;AAExB,CAAC;AAcD,IAAMK,eAA+C,GAAG,SAAlDA,eAA+C,CAAGN,KAAK,EAAI;EAC7D,IAAQO,OAAO,GAA6DP,KAAK,CAAzEO,OAAO;IAAEC,QAAQ,GAAmDR,KAAK,CAAhEQ,QAAQ;IAAEC,MAAM,GAA2CT,KAAK,CAAtDS,MAAM;IAAA,kBAA2CT,KAAK,CAA9CU,QAAQ;IAARA,QAAQ,gCAAG,KAAK;IAAEC,kBAAkB,GAAKX,KAAK,CAA5BW,kBAAkB;EAEvE,0BAmBI,IAAAC,oBAAkB,GAAE;IAlBpBC,KAAK,uBAALA,KAAK;IACLC,YAAY,uBAAZA,YAAY;IACZC,QAAQ,uBAARA,QAAQ;IACRC,QAAQ,uBAARA,QAAQ;IACRC,cAAc,uBAAdA,cAAc;IACdC,QAAQ,uBAARA,QAAQ;IACRC,WAAW,uBAAXA,WAAW;IACXC,SAAS,uBAATA,SAAS;IACTC,YAAY,uBAAZA,YAAY;IACZC,gBAAe,uBAAfA,eAAe;IACfC,eAAe,uBAAfA,eAAe;IACfC,kBAAkB,uBAAlBA,kBAAkB;IAClBC,WAAW,uBAAXA,WAAW;IACXC,cAAc,uBAAdA,cAAc;IACdC,0BAA0B,uBAA1BA,0BAA0B;IAC1BC,6BAA6B,uBAA7BA,6BAA6B;IAC7BC,UAAU,uBAAVA,UAAU;IACVC,QAAQ,uBAARA,QAAQ;EAGZ,IAAMC,WAAW,GAAG,IAAAC,mBAAiB,GAAE;EACvC,mBAAyB,IAAAC,qBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EAEpB,IAAMC,cAAc,GAAG,IAAAC,kBAAW;EAC9B;EACA,IAAAC,iBAAQ,EAAC,UAAAC,MAAM;IAAA,OAAIZ,cAAc,CAAC;MAAEY,MAAM,EAANA;IAAO,CAAC,CAAC;EAAA,GAAE,GAAG,CAAC,EACnD,EAAE,CACL;EAED,IAAMC,UAAS,GAAG,IAAAH,kBAAW;IAAA,mGAAC;MAAA;MAAA;QAAA;UAAA;YAASI,GAAG,QAAHA,GAAG,EAAEf,WAAW,QAAXA,WAAW;YAC7CgB,SAAS,GAAGC,KAAK,CAACC,OAAO,CAAClB,WAAW,CAACmB,IAAI,CAAC,oCAAOnB,WAAW,CAACmB,IAAI,IAAI,EAAE;YAE9E,IAAIH,SAAS,CAACI,QAAQ,CAACL,GAAG,CAAC,EAAE;cACzBC,SAAS,CAACK,MAAM,CAACL,SAAS,CAACM,OAAO,CAACP,GAAG,CAAC,EAAE,CAAC,CAAC;YAC/C,CAAC,MAAM;cACHC,SAAS,CAACO,IAAI,CAACR,GAAG,CAAC;YACvB;YAEAd,cAAc,6DAAMD,WAAW;cAAEmB,IAAI,EAAEH;YAAS,GAAG;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CACvD;IAAA;MAAA;IAAA;EAAA,KAAE,EAAE,CAAC;EAEN,IAAMQ,yBAAyB,GAAG,IAAAb,kBAAW,EAAC,UAAAc,CAAC,EAAI;IAC/C,IAAI,OAAOA,CAAC,KAAK,QAAQ,EAAE;MACvB,IAAMC,KAAK,GAAGD,CAAC,CAACC,KAAK,CAAC,yBAAyB,CAAC;MAChD,IAAIA,KAAK,EAAE;QACP,0CAAoBA,KAAK;UAAhBC,OAAO;QAChB,OAAOA,OAAO;MAClB;MAEA,OAAOF,CAAC;IACZ;IACA,OAAOA,CAAC,CAACE,OAAO;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,wBAAU,EAAC;IACPC,MAAM,EAAE,EAAE;IACVC,IAAI,EAAE;MACFC,GAAG,EAAEjD;IACT;EACJ,CAAC,CAAC;EAEF,IAAMkD,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAElD,IAAMC,eAAe,GAAG,IAAAvB,kBAAW,EAC/B,IAAAC,iBAAQ,EAAC,iBAAsD;IAAA,IAAnDuB,WAAW,SAAXA,WAAW;MAAE7C,QAAQ,SAARA,QAAQ;IAC7B,IAAI6C,WAAW,CAACpE,GAAG,GAAG,GAAG,EAAE;MACvBuB,QAAQ,EAAE;IACd;EACJ,CAAC,EAAE,GAAG,CAAC,EACP,CAACA,QAAQ,CAAC,CACb;EAED,IAAM8C,WAAW;IAAA,mGAAG,kBAAOhD,KAAoB;MAAA;MAAA;QAAA;UAAA;YAC3CQ,YAAY,CAAC,IAAI,CAAC;YACZyC,IAAY,GAAGpB,KAAK,CAACC,OAAO,CAAC9B,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;YAErDkD,MAAmB,GAAG,EAAE;YACxBC,aAAyB,GAAG,EAAE;YAAA;YAAA,OAC9BC,OAAO,CAACC,GAAG,CACbJ,IAAI,CAACK,GAAG;cAAA,mGAAC,kBAAMlE,IAAI;gBAAA;gBAAA;kBAAA;oBAAA;sBAAA;sBAAA;sBAAA,OAEW4B,UAAU,CAAC5B,IAAI,CAAC;oBAAA;sBAAhCmE,OAAO;sBAEb,IAAIA,OAAO,EAAE;wBACTJ,aAAa,CAAChB,IAAI,CAACoB,OAAO,CAAC;sBAC/B;sBAAC;sBAAA;oBAAA;sBAAA;sBAAA;sBAEDL,MAAM,CAACf,IAAI,CAAC;wBAAE/C,IAAI,EAAJA,IAAI;wBAAEiD,CAAC;sBAAC,CAAC,CAAC;oBAAC;oBAAA;sBAAA;kBAAA;gBAAA;cAAA,CAEhC;cAAA;gBAAA;cAAA;YAAA,IAAC,CACL;UAAA;YAED,IAAI,CAACvB,0BAA0B,EAAE;cAC7BC,6BAA6B,CAAC,IAAI,CAAC;YACvC;YAEAP,YAAY,CAAC,KAAK,CAAC;YAAC,MAEhB0C,MAAM,CAACM,MAAM,GAAG,CAAC;cAAA;cAAA;YAAA;YAAA,kCAEVC,UAAU,CAAC,YAAM;cACpBpC,YAAY,eACR,4DACK7D,CAAC,mJACF,yCACK0F,MAAM,CAACI,GAAG,CAAC;gBAAA,IAAGlE,IAAI,SAAJA,IAAI;kBAAEiD,CAAC,SAADA,CAAC;gBAAA,oBAClB;kBAAI,GAAG,EAAEjD,IAAI,CAACsE;gBAAK,gBACf,6CAAStE,IAAI,CAACsE,IAAI,CAAU,MAAE,EAACtB,yBAAyB,CAACC,CAAC,CAAC,CAC1D;cAAA,CACR,CAAC,CACD,CACN,CACN;cACD;YACJ,CAAC,EAAE,GAAG,CAAC;UAAA;YAGX;YACAoB,UAAU,CAAC;cAAA,OAAMpC,YAAY,CAAC7D,CAAC,2GAAwB;YAAA,GAAE,GAAG,CAAC;YAAC,MAC1D,OAAOsC,kBAAkB,KAAK,UAAU;cAAA;cAAA;YAAA;YAAA,kCAEjC2D,UAAU,CAAC,YAAM;cACpB3D,kBAAkB,CAACqD,aAAa,CAAC;cACjCzD,OAAO,IAAIA,OAAO,EAAE;cACpB;YACJ,CAAC,EAAE,GAAG,CAAC;UAAA;YAAA,kCAEJ,IAAI;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA,CACd;IAAA,gBAxDKsD,WAAW;MAAA;IAAA;EAAA,GAwDhB;EAED,IAAMW,sBAAsB,GAAG,IAAApC,kBAAW,EACtC,iBAAqB;IAAA,IAAlBqC,WAAW,SAAXA,WAAW;IACV,IAAI,CAAC1C,WAAW,CAAC2C,SAAS,EAAE;MACxB,OAAO,IAAI;IACf;IACA,oBACI,6BAAC,qBAAa;MAAC,OAAO,EAAED,WAAY;MAAC,QAAQ,EAAErD;IAAU,gBACrD,6BAAC,kBAAU;MAAC,IAAI,eAAE,6BAAC,4BAAU;IAAI,EAAG,EACnC/C,CAAC,+FACU;EAExB,CAAC,EACD,CAAC+C,SAAS,EAAEW,WAAW,CAAC2C,SAAS,CAAC,CACrC;EAED,oBACI,6BAAC,yBAAK;IACF,QAAQ;IACR,OAAO,EAAE5C,QAAQ,GAAGA,QAAQ,CAAC6C,iBAAiB,GAAG,GAAG,GAAG,KAAM;IAC7D,eAAe,EAAE,KAAM;IACvB,MAAM,EAAElE,MAAO;IACf,SAAS,EAAE,mBAAAI,KAAK,EAAI;MAChB,IAAM+D,aAAa,GAAG/D,KAAK,CAACsD,GAAG,CAAC,UAAAlE,IAAI;QAAA,OAAIA,IAAI,CAAC4E,GAAG,CAAC5E,IAAI;MAAA,EAAC,CAAC6E,MAAM,CAACC,OAAO,CAAW;MAChFlB,WAAW,CAACe,aAAa,CAAC;IAC9B,CAAE;IACF,OAAO,EAAE,iBAAAb,MAAM,EAAI;MACfiB,OAAO,CAACC,GAAG,CAAC,SAAS,EAAElB,MAAM,CAAC;MAC9B,IAAMX,OAAO,GAAG,IAAA8B,kDAAwB,EAACnB,MAAM,CAAC;MAChD7B,YAAY,CAACkB,OAAO,CAAC;IACzB;EAAE,GAED;IAAA,IAAG+B,gBAAgB,SAAhBA,gBAAgB;MAAEV,WAAW,SAAXA,WAAW;IAAA,oBAC7B,6BAAC,uBAAa,oBACNU,gBAAgB,CAAC;MACjBC,WAAW,EAAE;QAAA,OAAMzD,0BAA0B,IAAIR,WAAW,CAAC,IAAI,CAAC;MAAA;MAClEkE,QAAQ,EAAE9E;IACd,CAAC,CAAC;MACF,OAAO,eACH,6BAAC,WAAW,qBACR,6BAAC,UAAI;QAAC,SAAS,EAAElB,UAAW;QAAC,IAAI,eAAE,6BAAC,sBAAU;MAAI,EAAG,eACrD;QACI,GAAG,EAAEoE,WAAY;QACjB,QAAQ,EAAE,kBAAAP,CAAC;UAAA,OAAIf,cAAc,CAACe,CAAC,CAACoC,MAAM,CAACC,KAAK,CAAC;QAAA,CAAC;QAC9C,WAAW,EAAElH,CAAC,+GAA6B;QAC3C,QAAQ,EAAE,CAAC0D,WAAW,CAACyD,OAAQ;QAC/B,eAAa;MAA4B,EAC3C,CAET;MACD,QAAQ,EACJxE,QAAQ,CAACqD,MAAM,GAAG,CAAC,gBACf,6BAAC,qBAAa;QACV,QAAQ,EAAEjD,SAAU;QACpB,OAAO,EAAE,mBAAM;UACX,uFAAC;YAAA;cAAA;gBAAA;kBAAA,MACO,OAAOZ,QAAQ,KAAK,UAAU;oBAAA;oBAAA;kBAAA;kBAAA;kBAAA,OACxBA,QAAQ,CAACE,QAAQ,GAAGM,QAAQ,GAAGA,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAAA;kBAEjDT,OAAO,IAAIA,OAAO,EAAE;gBAAC;gBAAA;kBAAA;cAAA;YAAA;UAAA,CAE5B,IAAG;QACR;MAAE,GAEDlC,CAAC,6FAAS,GAAC,EAACqC,QAAQ,eAAQM,QAAQ,CAACqD,MAAM,MAAG,CACnC,GAEhBG,sBAAsB,CAAC;QAAEC,WAAW,EAAXA;MAAY,CAAC;IAE7C,iBAED,4DACKvD,QAAQ,IAAIS,0BAA0B,iBACnC,6BAAC,sBAAa;MACV,WAAW,EAAE;QAAA,OAAMR,WAAW,CAAC,KAAK,CAAC;MAAA,CAAC;MACtC,MAAM,EAAE;QAAA,OAAMA,WAAW,CAAC,KAAK,CAAC;MAAA;IAAC,EAExC,EAEAK,kBAAkB,gBACf,6BAAC,wBAAW;MACR,IAAI,EAAEX,KAAK,CAAC4E,IAAI,CAAC,UAAAC,IAAI;QAAA,OAAIA,IAAI,CAACtF,EAAE,KAAKoB,kBAAkB;MAAA,EAAG;MAC1D,OAAO,EAAED;IAAgB,EAC3B,GACF,IAAI,eAER,6BAAC,oBAAW;MAAC,SAAS,EAAE,mBAAAiB,GAAG;QAAA,OAAID,UAAS,CAAC;UAAEC,GAAG,EAAHA,GAAG;UAAEf,WAAW,EAAXA;QAAY,CAAC,CAAC;MAAA;IAAC,EAAG,eAElE,6BAAC,eAAe;MAAC,eAAa;IAAkB,GAC3CX,YAAY,iBACT,6BAAC,0BAAgB;MACb,KAAK,EAAEzC,CAAC,qGAAmB;MAC3B,KAAK,EAAE;QAAEsH,OAAO,EAAE;MAAE;IAAE,EAE7B,eACD,6BAAC,oBAAS;MACN,aAAa,EAAE,uBAAA/B,WAAW;QAAA,OACtBD,eAAe,CAAC;UAAEC,WAAW,EAAXA,WAAW;UAAE7C,QAAQ,EAARA;QAAS,CAAC,CAAC;MAAA;IAC7C,gBAED,6BAAC,QAAQ,QACJF,KAAK,CAACwD,MAAM,GACTxD,KAAK,CAACsD,GAAG,CAAC,UAAAlE,IAAI;MAAA,OACVF,UAAU,CAAC;QACPE,IAAI,EAAJA,IAAI;QACJqB,eAAe,EAAE;UAAA,OAAMA,gBAAe,CAACrB,IAAI,CAACG,EAAE,CAAC;QAAA;QAC/CY,QAAQ,EAAEA,QAAQ,CAAC4E,IAAI,CACnB,UAAAC,OAAO;UAAA,OAAIA,OAAO,CAAChB,GAAG,KAAK5E,IAAI,CAAC4E,GAAG;QAAA,EACtC;QACDiB,QAAQ;UAAA,uGAAE;YAAA;cAAA;gBAAA;kBAAA,MACF,OAAOtF,QAAQ,KAAK,UAAU;oBAAA;oBAAA;kBAAA;kBAAA,KAC1BE,QAAQ;oBAAA;oBAAA;kBAAA;kBACRO,cAAc,CAAChB,IAAI,CAAC;kBAAC;gBAAA;kBAAA;kBAAA,OAInBO,QAAQ,CAACP,IAAI,CAAC;gBAAA;kBACpBM,OAAO,IAAIA,OAAO,EAAE;gBAAC;gBAAA;kBAAA;cAAA;YAAA;UAAA,CAE5B;UAAA;YAAA;UAAA;UAAA;QAAA;MACL,CAAC,CAAC;IAAA,EACL,gBAED,6BAAC,oBAAS;MAAC,WAAW,EAAEkE;IAAY,EACvC,CACM,CACH,eACZ,6BAAC,sBAAa;MAAC,MAAM,EAAEhE,MAAO;MAAC,SAAS,EAAEW;IAAU,EAAG,CACzC,CACnB,CACS;EAAA,CACnB,CACG;AAEhB,CAAC;AAEDd,eAAe,CAACyF,YAAY,GAAG;EAC3BrF,QAAQ,EAAE;AACd,CAAC;AAAC,eAEaJ,eAAe;AAAA"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface LeftSidebarProps {
+    toggleTag: (item: string) => void;
+}
+declare const LeftSidebar: ({ toggleTag }: LeftSidebarProps) => JSX.Element;
+export default LeftSidebar;

package/modules/FileManagerRenderer/DefaultRenderer/LeftSidebar.js

@@ -0,0 +1,96 @@
+"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 _sortBy = _interopRequireDefault(require("lodash/sortBy"));
+var _emotion = require("emotion");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Icon = require("@webiny/ui/Icon");
+var _label = require("@material-design-icons/svg/outlined/label.svg");
+var _ = require("../../..");
+var style = {
+  leftDrawer: /*#__PURE__*/(0, _emotion.css)({
+    float: "left",
+    display: "inline-block",
+    width: 250,
+    height: "100%",
+    backgroundColor: "var(--mdc-theme-surface)",
+    padding: 10
+  }, "label:leftDrawer;"),
+  noTagged: /*#__PURE__*/(0, _emotion.css)({
+    paddingTop: 100,
+    textAlign: "center",
+    color: "var(--mdc-theme-on-surface)"
+  }, "label:noTagged;")
+};
+var TagList = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1oiqid0",
+  label: "TagList"
+})({
+  display: "flex",
+  flexDirection: "column"
+});
+var Tag = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1oiqid1",
+  label: "Tag"
+})({
+  display: "flex",
+  flexDirection: "row",
+  height: 40,
+  alignItems: "center",
+  cursor: "pointer",
+  paddingLeft: 15,
+  color: "var(--mdc-theme-on-surface)",
+  svg: {
+    color: "var(--mdc-theme-on-surface)",
+    marginRight: 10
+  },
+  "&:hover": {
+    backgroundColor: "var(--mdc-theme-background)"
+  },
+  "&.active": {
+    svg: {
+      color: "var(--mdc-theme-secondary)"
+    }
+  }
+});
+var LeftSidebar = function LeftSidebar(_ref) {
+  var toggleTag = _ref.toggleTag;
+  var _useFileManagerView = (0, _.useFileManagerView)(),
+    queryParams = _useFileManagerView.queryParams,
+    tags = _useFileManagerView.tags;
+  var activeTags = Array.isArray(queryParams.tags) ? queryParams.tags : [];
+  if (tags.length === 0) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: style.leftDrawer,
+      "data-testid": "fm.left-drawer.empty-tag"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: style.noTagged
+    }, "Once you tag a file, the tag will be displayed here."));
+  }
+
+  // Sort "tags" list in "ASC" order.
+  var sortedTags = (0, _sortBy.default)(tags);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: style.leftDrawer
+  }, /*#__PURE__*/_react.default.createElement(TagList, {
+    "data-testid": "fm.left-drawer.tag-list"
+  }, sortedTags.map(function (tag, index) {
+    var className = activeTags.includes(tag) ? "active" : "";
+    return /*#__PURE__*/_react.default.createElement(Tag, {
+      className: className,
+      key: tag + index,
+      onClick: function onClick() {
+        return toggleTag(tag);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      icon: /*#__PURE__*/_react.default.createElement(_label.ReactComponent, null)
+    }), " ", tag);
+  })));
+};
+var _default = LeftSidebar;
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["style","leftDrawer","css","float","display","width","height","backgroundColor","padding","noTagged","paddingTop","textAlign","color","TagList","styled","flexDirection","Tag","alignItems","cursor","paddingLeft","svg","marginRight","LeftSidebar","toggleTag","useFileManagerView","queryParams","tags","activeTags","Array","isArray","length","sortedTags","sortBy","map","tag","index","className","includes"],"sources":["LeftSidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport sortBy from \"lodash/sortBy\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { ReactComponent as TagIcon } from \"@material-design-icons/svg/outlined/label.svg\";\nimport { useFileManagerView } from \"~/index\";\n\nconst style = {\n    leftDrawer: css({\n        float: \"left\",\n        display: \"inline-block\",\n        width: 250,\n        height: \"100%\",\n        backgroundColor: \"var(--mdc-theme-surface)\",\n        padding: 10\n    }),\n    noTagged: css({\n        paddingTop: 100,\n        textAlign: \"center\",\n        color: \"var(--mdc-theme-on-surface)\"\n    })\n};\n\nconst TagList = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\"\n});\n\nconst Tag = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: 40,\n    alignItems: \"center\",\n    cursor: \"pointer\",\n    paddingLeft: 15,\n    color: \"var(--mdc-theme-on-surface)\",\n    svg: {\n        color: \"var(--mdc-theme-on-surface)\",\n        marginRight: 10\n    },\n    \"&:hover\": {\n        backgroundColor: \"var(--mdc-theme-background)\"\n    },\n    \"&.active\": {\n        svg: {\n            color: \"var(--mdc-theme-secondary)\"\n        }\n    }\n});\n\ninterface LeftSidebarProps {\n    toggleTag: (item: string) => void;\n}\nconst LeftSidebar = ({ toggleTag }: LeftSidebarProps) => {\n    const { queryParams, tags } = useFileManagerView();\n    const activeTags = Array.isArray(queryParams.tags) ? queryParams.tags : [];\n\n    if (tags.length === 0) {\n        return (\n            <div className={style.leftDrawer} data-testid={\"fm.left-drawer.empty-tag\"}>\n                <div className={style.noTagged}>\n                    Once you tag a file, the tag will be displayed here.\n                </div>\n            </div>\n        );\n    }\n\n    // Sort \"tags\" list in \"ASC\" order.\n    const sortedTags = sortBy(tags);\n\n    return (\n        <div className={style.leftDrawer}>\n            <TagList data-testid={\"fm.left-drawer.tag-list\"}>\n                {sortedTags.map((tag, index) => {\n                    const className = activeTags.includes(tag) ? \"active\" : \"\";\n                    return (\n                        <Tag className={className} key={tag + index} onClick={() => toggleTag(tag)}>\n                            <Icon icon={<TagIcon />} /> {tag}\n                        </Tag>\n                    );\n                })}\n            </TagList>\n        </div>\n    );\n};\n\nexport default LeftSidebar;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG;EACVC,UAAU,eAAE,IAAAC,YAAG,EAAC;IACZC,KAAK,EAAE,MAAM;IACbC,OAAO,EAAE,cAAc;IACvBC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,MAAM;IACdC,eAAe,EAAE,0BAA0B;IAC3CC,OAAO,EAAE;EACb,CAAC,sBAAC;EACFC,QAAQ,eAAE,IAAAP,YAAG,EAAC;IACVQ,UAAU,EAAE,GAAG;IACfC,SAAS,EAAE,QAAQ;IACnBC,KAAK,EAAE;EACX,CAAC;AACL,CAAC;AAED,IAAMC,OAAO,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC1BV,OAAO,EAAE,MAAM;EACfW,aAAa,EAAE;AACnB,CAAC,CAAC;AAEF,IAAMC,GAAG,oBAAGF,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACtBV,OAAO,EAAE,MAAM;EACfW,aAAa,EAAE,KAAK;EACpBT,MAAM,EAAE,EAAE;EACVW,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE,SAAS;EACjBC,WAAW,EAAE,EAAE;EACfP,KAAK,EAAE,6BAA6B;EACpCQ,GAAG,EAAE;IACDR,KAAK,EAAE,6BAA6B;IACpCS,WAAW,EAAE;EACjB,CAAC;EACD,SAAS,EAAE;IACPd,eAAe,EAAE;EACrB,CAAC;EACD,UAAU,EAAE;IACRa,GAAG,EAAE;MACDR,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC;AAKF,IAAMU,WAAW,GAAG,SAAdA,WAAW,OAAwC;EAAA,IAAlCC,SAAS,QAATA,SAAS;EAC5B,0BAA8B,IAAAC,oBAAkB,GAAE;IAA1CC,WAAW,uBAAXA,WAAW;IAAEC,IAAI,uBAAJA,IAAI;EACzB,IAAMC,UAAU,GAAGC,KAAK,CAACC,OAAO,CAACJ,WAAW,CAACC,IAAI,CAAC,GAAGD,WAAW,CAACC,IAAI,GAAG,EAAE;EAE1E,IAAIA,IAAI,CAACI,MAAM,KAAK,CAAC,EAAE;IACnB,oBACI;MAAK,SAAS,EAAE9B,KAAK,CAACC,UAAW;MAAC,eAAa;IAA2B,gBACtE;MAAK,SAAS,EAAED,KAAK,CAACS;IAAS,GAAC,sDAEhC,CAAM,CACJ;EAEd;;EAEA;EACA,IAAMsB,UAAU,GAAG,IAAAC,eAAM,EAACN,IAAI,CAAC;EAE/B,oBACI;IAAK,SAAS,EAAE1B,KAAK,CAACC;EAAW,gBAC7B,6BAAC,OAAO;IAAC,eAAa;EAA0B,GAC3C8B,UAAU,CAACE,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK,EAAK;IAC5B,IAAMC,SAAS,GAAGT,UAAU,CAACU,QAAQ,CAACH,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE;IAC1D,oBACI,6BAAC,GAAG;MAAC,SAAS,EAAEE,SAAU;MAAC,GAAG,EAAEF,GAAG,GAAGC,KAAM;MAAC,OAAO,EAAE;QAAA,OAAMZ,SAAS,CAACW,GAAG,CAAC;MAAA;IAAC,gBACvE,6BAAC,UAAI;MAAC,IAAI,eAAE,6BAAC,qBAAO;IAAI,EAAG,KAAC,EAACA,GAAG,CAC9B;EAEd,CAAC,CAAC,CACI,CACR;AAEd,CAAC;AAAC,eAEaZ,WAAW;AAAA"}

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const NoPermissionView: React.FC;
+export default NoPermissionView;