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

package/modules/FileManagerApiProvider/graphql.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FILE_FIELDS","ERROR_FIELDS","LIST_FILES","gql","LIST_TAGS","CREATE_FILE","UPDATE_FILE","DELETE_FILE","GET_FILE_SETTINGS"],"sources":["graphql.ts"],"sourcesContent":["import { FileItem } from \"@webiny/app-admin/types\";\nimport gql from \"graphql-tag\";\nimport { Settings } from \"~/types\";\nimport { ListTagsResponseItem } from \"~/modules/FileManagerApiProvider/FileManagerApiContext/FileManagerApiContext\";\n\nconst FILE_FIELDS = /* GraphQL */ `\n    {\n        __typename\n        id\n        name\n        key\n        src\n        size\n        type\n        tags\n        aliases\n        createdOn\n        createdBy {\n            id\n        }\n    }\n`;\n\nconst ERROR_FIELDS = /* GraphQL */ `\n    {\n        code\n        message\n        data\n    }\n`;\n\nexport interface GetFileManagerSettingsQueryResponse {\n    fileManager: {\n        getSettings: {\n            data: Settings;\n            error?: Error | null;\n        };\n    };\n}\n\nexport interface ListFilesListFilesResponse {\n    data: FileItem[];\n    error?: Error | null;\n    meta: {\n        hasMoreItems: boolean;\n        totalItem: number;\n        cursor: string | null;\n    };\n}\n\nexport interface ListFilesQueryResponse {\n    fileManager: {\n        listFiles: ListFilesListFilesResponse;\n    };\n}\n\nexport interface ListFilesQueryVariables {\n    limit?: number;\n    after?: string | null;\n    where?: {\n        search?: string;\n        type?: string;\n        type_in?: string[];\n        tag?: string;\n        tag_in?: string[];\n        tag_and_in?: string[];\n        tag_startsWith?: string;\n        tag_not_startsWith?: string;\n        createdBy?: string;\n    };\n}\n\nexport const LIST_FILES = gql`\n    query ListFiles(\n        $limit: Int,\n        $after: String,\n        $where: FileWhereInput\n    ) {\n        fileManager {\n            listFiles(\n                limit: $limit,\n                after: $after,\n                where: $where\n            ) {\n                data ${FILE_FIELDS}\n                meta {\n                    cursor\n                    totalCount\n                }\n            }\n        }\n    }\n`;\n\nexport interface ListFileTagsQueryResponse {\n    fileManager: {\n        listTags: {\n            data: ListTagsResponseItem[];\n            error: Error | null;\n        };\n    };\n}\n\nexport interface ListFileTagsQueryVariables {\n    where?: {\n        tag_startsWith?: String;\n        tag_not_startsWith?: String;\n    };\n}\n\nexport const LIST_TAGS = gql`\n    query ListTags($where: TagWhereInput) {\n        fileManager {\n            listTags(where: $where) {\n                data {\n                    tag\n                    count\n                }\n                error ${ERROR_FIELDS}\n            }\n        }\n    }\n`;\n\nexport interface CreateFileMutationResponse {\n    fileManager: {\n        createFile: {\n            data: FileItem;\n            error?: Error | null;\n        };\n    };\n}\n\nexport interface FileInput {\n    key: string;\n    name: string;\n    size: number;\n    type: string;\n    tags: string[];\n    aliases?: string[];\n    meta?: Record<string, any>;\n}\n\nexport interface CreateFileMutationVariables {\n    data: FileInput;\n}\n\nexport const CREATE_FILE = gql`\n    mutation CreateFile($data: CreateFileInput!) {\n        fileManager {\n            createFile(data: $data) {\n                error ${ERROR_FIELDS}\n                data ${FILE_FIELDS}\n            }\n        }\n    }\n`;\n\nexport interface UpdateFileMutationResponse {\n    fileManager: {\n        updateFile: {\n            data: FileItem;\n            error?: Error | null;\n        };\n    };\n}\n\nexport interface UpdateFileMutationVariables {\n    id: string;\n    data: Partial<FileInput>;\n}\n\nexport const UPDATE_FILE = gql`\n    mutation UpdateFile($id: ID!, $data: UpdateFileInput!) {\n        fileManager {\n            updateFile(id: $id, data: $data) {\n                data {\n                    id\n                    src\n                    name\n                    tags\n                }\n                error ${ERROR_FIELDS}\n            }\n        }\n    }\n`;\n\nexport interface DeleteFileMutationResponse {\n    fileManager: {\n        updateFile: {\n            data: boolean;\n            error?: Error | null;\n        };\n    };\n}\n\nexport interface DeleteFileMutationVariables {\n    id: string;\n}\n\nexport const DELETE_FILE = gql`\n    mutation DeleteFile($id: ID!) {\n        fileManager {\n            deleteFile(id: $id) {\n                data\n                error ${ERROR_FIELDS}\n            }\n        }\n    }\n`;\n\nexport const GET_FILE_SETTINGS = gql`\n    query GetSettings {\n        fileManager {\n            getSettings {\n                data {\n                    srcPrefix\n                    uploadMinFileSize\n                    uploadMaxFileSize\n                }\n                error ${ERROR_FIELDS}\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;;;AACA;AAA8B;AAI9B,IAAMA,WAAW,GAAG,qOAgBnB;AAED,IAAMC,YAAY,GAAG,4EAMpB;AA2CM,IAAMC,UAAU,OAAGC,mBAAG,ugBAYNH,WAAW,CAQjC;AAAC;AAkBK,IAAMI,SAAS,OAAGD,mBAAG,gWAQJF,YAAY,CAInC;AAAC;AAyBK,IAAMI,WAAW,OAAGF,mBAAG,mSAINF,YAAY,EACbD,WAAW,CAIjC;AAAC;AAgBK,IAAMM,WAAW,OAAGH,mBAAG,2aAUNF,YAAY,CAInC;AAAC;AAeK,IAAMM,WAAW,OAAGJ,mBAAG,2QAKNF,YAAY,CAInC;AAAC;AAEK,IAAMO,iBAAiB,OAAGL,mBAAG,yXASZF,YAAY,CAInC;AAAC"}

package/modules/FileManagerApiProvider/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FileManagerApiProviderModule: () => JSX.Element;

package/modules/FileManagerApiProvider/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileManagerApiProviderModule = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _appAdmin = require("@webiny/app-admin");
+var _FileManagerApiContext = require("./FileManagerApiContext");
+var fileManagerApiProvider = function fileManagerApiProvider(Original) {
+  return function FileManager(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/_react.default.createElement(_FileManagerApiContext.FileManagerApiProvider, null, /*#__PURE__*/_react.default.createElement(Original, null, children));
+  };
+};
+var FileManagerApiProviderModule = function FileManagerApiProviderModule() {
+  return /*#__PURE__*/_react.default.createElement(_appAdmin.Plugin, {
+    providers: [fileManagerApiProvider]
+  });
+};
+exports.FileManagerApiProviderModule = FileManagerApiProviderModule;

package/modules/FileManagerApiProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fileManagerApiProvider","Original","FileManager","children","FileManagerApiProviderModule"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Plugin, HigherOrderComponent } from \"@webiny/app-admin\";\nimport { FileManagerApiProvider } from \"./FileManagerApiContext\";\n\nconst fileManagerApiProvider: HigherOrderComponent = Original => {\n    return function FileManager({ children }: { children: React.ReactNode }) {\n        return (\n            <FileManagerApiProvider>\n                <Original>{children}</Original>\n            </FileManagerApiProvider>\n        );\n    };\n};\n\nexport const FileManagerApiProviderModule = () => {\n    return <Plugin providers={[fileManagerApiProvider]} />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,sBAA4C,GAAG,SAA/CA,sBAA4C,CAAGC,QAAQ,EAAI;EAC7D,OAAO,SAASC,WAAW,OAA8C;IAAA,IAA3CC,QAAQ,QAARA,QAAQ;IAClC,oBACI,6BAAC,6CAAsB,qBACnB,6BAAC,QAAQ,QAAEA,QAAQ,CAAY,CACV;EAEjC,CAAC;AACL,CAAC;AAEM,IAAMC,4BAA4B,GAAG,SAA/BA,4BAA4B,GAAS;EAC9C,oBAAO,6BAAC,gBAAM;IAAC,SAAS,EAAE,CAACJ,sBAAsB;EAAE,EAAG;AAC1D,CAAC;AAAC"}

package/modules/FileManagerRenderer/DefaultRenderer/BottomInfoBar/SupportedFileTypes.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface SupportedFileTypesProps {
+    accept: string[];
+}
+declare const SupportedFileTypes: React.FC<SupportedFileTypesProps>;
+export default SupportedFileTypes;

package/modules/FileManagerRenderer/DefaultRenderer/BottomInfoBar/SupportedFileTypes.js

@@ -0,0 +1,41 @@
+"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 _lite = _interopRequireDefault(require("mime/lite"));
+_lite.default.define({
+  "image/x-icon": ["ico"]
+}, true);
+_lite.default.define({
+  "image/jpg": ["jpg"]
+}, true);
+_lite.default.define({
+  "image/vnd.microsoft.icon": ["ico"]
+}, true);
+var getUniqueFilePlugins = function getUniqueFilePlugins(accept) {
+  var exts = {};
+  accept.forEach(function (item) {
+    var ext = _lite.default.getExtension(item);
+    if (!ext) {
+      return;
+    }
+    exts[ext] = true;
+  });
+  return Object.keys(exts);
+};
+var SupportedFileTypes = function SupportedFileTypes(_ref) {
+  var accept = _ref.accept;
+  if (!accept) {
+    return null;
+  }
+  if (accept.length === 0) {
+    return /*#__PURE__*/_react.default.createElement("span", null, "Showing all file extensions.");
+  }
+  return /*#__PURE__*/_react.default.createElement("span", null, "Showing the following file extensions: ", getUniqueFilePlugins(accept).join(", "), ".");
+};
+var _default = SupportedFileTypes;
+exports.default = _default;

package/modules/FileManagerRenderer/DefaultRenderer/BottomInfoBar/SupportedFileTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mime","define","getUniqueFilePlugins","accept","exts","forEach","item","ext","getExtension","Object","keys","SupportedFileTypes","length","join"],"sources":["SupportedFileTypes.tsx"],"sourcesContent":["import React from \"react\";\nimport mime from \"mime/lite\";\n\nmime.define({ \"image/x-icon\": [\"ico\"] }, true);\nmime.define({ \"image/jpg\": [\"jpg\"] }, true);\nmime.define({ \"image/vnd.microsoft.icon\": [\"ico\"] }, true);\n\nconst getUniqueFilePlugins = (accept: string[]): string[] => {\n    const exts: Record<string, boolean> = {};\n    accept.forEach(item => {\n        const ext = mime.getExtension(item);\n        if (!ext) {\n            return;\n        }\n        exts[ext] = true;\n    });\n\n    return Object.keys(exts);\n};\n\nexport interface SupportedFileTypesProps {\n    accept: string[];\n}\n\nconst SupportedFileTypes: React.FC<SupportedFileTypesProps> = ({ accept }) => {\n    if (!accept) {\n        return null;\n    }\n\n    if (accept.length === 0) {\n        return <span>Showing all file extensions.</span>;\n    }\n\n    return (\n        <span>\n            Showing the following file extensions: {getUniqueFilePlugins(accept).join(\", \")}.\n        </span>\n    );\n};\n\nexport default SupportedFileTypes;\n"],"mappings":";;;;;;;AAAA;AACA;AAEAA,aAAI,CAACC,MAAM,CAAC;EAAE,cAAc,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAC9CD,aAAI,CAACC,MAAM,CAAC;EAAE,WAAW,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAC3CD,aAAI,CAACC,MAAM,CAAC;EAAE,0BAA0B,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAE1D,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIC,MAAgB,EAAe;EACzD,IAAMC,IAA6B,GAAG,CAAC,CAAC;EACxCD,MAAM,CAACE,OAAO,CAAC,UAAAC,IAAI,EAAI;IACnB,IAAMC,GAAG,GAAGP,aAAI,CAACQ,YAAY,CAACF,IAAI,CAAC;IACnC,IAAI,CAACC,GAAG,EAAE;MACN;IACJ;IACAH,IAAI,CAACG,GAAG,CAAC,GAAG,IAAI;EACpB,CAAC,CAAC;EAEF,OAAOE,MAAM,CAACC,IAAI,CAACN,IAAI,CAAC;AAC5B,CAAC;AAMD,IAAMO,kBAAqD,GAAG,SAAxDA,kBAAqD,OAAmB;EAAA,IAAbR,MAAM,QAANA,MAAM;EACnE,IAAI,CAACA,MAAM,EAAE;IACT,OAAO,IAAI;EACf;EAEA,IAAIA,MAAM,CAACS,MAAM,KAAK,CAAC,EAAE;IACrB,oBAAO,2CAAM,8BAA4B,CAAO;EACpD;EAEA,oBACI,2CAAM,yCACqC,EAACV,oBAAoB,CAACC,MAAM,CAAC,CAACU,IAAI,CAAC,IAAI,CAAC,EAAC,GACpF,CAAO;AAEf,CAAC;AAAC,eAEaF,kBAAkB;AAAA"}

package/modules/FileManagerRenderer/DefaultRenderer/BottomInfoBar/UploadStatus.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface UploadStatusProps {
+    uploading: boolean;
+}
+declare const UploadStatus: React.FC<UploadStatusProps>;
+export default UploadStatus;

package/modules/FileManagerRenderer/DefaultRenderer/BottomInfoBar/UploadStatus.js

@@ -0,0 +1,51 @@
+"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 _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Progress = require("@webiny/ui/Progress");
+var StatusWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "exct32u0",
+  label: "StatusWrapper"
+})({
+  color: "var(--mdc-theme-primary)",
+  position: "absolute",
+  right: 0,
+  bottom: 10,
+  marginRight: 10,
+  display: "flex",
+  alignItems: "center",
+  "> div": {
+    display: "inline-block"
+  }
+});
+var CircularProgressHolder = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "exct32u1",
+  label: "CircularProgressHolder"
+})({
+  position: "relative",
+  height: 12,
+  width: 12
+});
+var UploadingLabel = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "exct32u2",
+  label: "UploadingLabel"
+})({
+  marginRight: 5
+});
+var UploadStatus = function UploadStatus(_ref) {
+  var uploading = _ref.uploading;
+  if (!uploading) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(StatusWrapper, null, /*#__PURE__*/_react.default.createElement(UploadingLabel, null, "Uploading..."), /*#__PURE__*/_react.default.createElement(CircularProgressHolder, null, /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+    size: 10,
+    spinnerWidth: 1
+  })));
+};
+var _default = UploadStatus;
+exports.default = _default;

package/modules/FileManagerRenderer/DefaultRenderer/BottomInfoBar/UploadStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StatusWrapper","styled","color","position","right","bottom","marginRight","display","alignItems","CircularProgressHolder","height","width","UploadingLabel","UploadStatus","uploading"],"sources":["UploadStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\n\nconst StatusWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-primary)\",\n    position: \"absolute\",\n    right: 0,\n    bottom: 10,\n    marginRight: 10,\n    display: \"flex\",\n    alignItems: \"center\",\n    \"> div\": {\n        display: \"inline-block\"\n    }\n});\n\nconst CircularProgressHolder = styled(\"div\")({\n    position: \"relative\",\n    height: 12,\n    width: 12\n});\n\nconst UploadingLabel = styled(\"div\")({\n    marginRight: 5\n});\n\nexport interface UploadStatusProps {\n    uploading: boolean;\n}\nconst UploadStatus: React.FC<UploadStatusProps> = ({ uploading }) => {\n    if (!uploading) {\n        return null;\n    }\n\n    return (\n        <StatusWrapper>\n            <UploadingLabel>Uploading...</UploadingLabel>\n            <CircularProgressHolder>\n                <CircularProgress size={10} spinnerWidth={1} />\n            </CircularProgressHolder>\n        </StatusWrapper>\n    );\n};\n\nexport default UploadStatus;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,aAAa,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAChCC,KAAK,EAAE,0BAA0B;EACjCC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,EAAE;EACVC,WAAW,EAAE,EAAE;EACfC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpB,OAAO,EAAE;IACLD,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,IAAME,sBAAsB,oBAAGR,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACzCE,QAAQ,EAAE,UAAU;EACpBO,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMC,cAAc,oBAAGX,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCK,WAAW,EAAE;AACjB,CAAC,CAAC;AAKF,IAAMO,YAAyC,GAAG,SAA5CA,YAAyC,OAAsB;EAAA,IAAhBC,SAAS,QAATA,SAAS;EAC1D,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACI,6BAAC,aAAa,qBACV,6BAAC,cAAc,QAAC,cAAY,CAAiB,eAC7C,6BAAC,sBAAsB,qBACnB,6BAAC,0BAAgB;IAAC,IAAI,EAAE,EAAG;IAAC,YAAY,EAAE;EAAE,EAAG,CAC1B,CACb;AAExB,CAAC;AAAC,eAEaD,YAAY;AAAA"}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { SupportedFileTypesProps } from "./BottomInfoBar/SupportedFileTypes";
+import { UploadStatusProps } from "./BottomInfoBar/UploadStatus";
+declare const BottomInfoBar: React.FC<SupportedFileTypesProps & UploadStatusProps>;
+export default BottomInfoBar;

package/modules/FileManagerRenderer/DefaultRenderer/BottomInfoBar.js

@@ -0,0 +1,48 @@
+"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 _lite = _interopRequireDefault(require("mime/lite"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _SupportedFileTypes = _interopRequireDefault(require("./BottomInfoBar/SupportedFileTypes"));
+var _UploadStatus = _interopRequireDefault(require("./BottomInfoBar/UploadStatus"));
+_lite.default.define({
+  "image/x-icon": ["ico"]
+}, true);
+_lite.default.define({
+  "image/jpg": ["jpg"]
+}, true);
+_lite.default.define({
+  "image/vnd.microsoft.icon": ["ico"]
+}, true);
+var BottomInfoBarWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e16yhave0",
+  label: "BottomInfoBarWrapper"
+})({
+  fontSize: "0.8rem",
+  position: "sticky",
+  bottom: 0,
+  height: 30,
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  borderTop: "1px solid var(--mdc-theme-on-background)",
+  backgroundColor: "var(--mdc-theme-surface)",
+  width: "100%",
+  transform: "translateZ(0)",
+  overflow: "hidden",
+  display: "flex",
+  alignItems: "center",
+  zIndex: 1,
+  "> div": {
+    padding: "0 10px",
+    width: "100%"
+  }
+});
+var BottomInfoBar = function BottomInfoBar(props) {
+  return /*#__PURE__*/_react.default.createElement(BottomInfoBarWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SupportedFileTypes.default, props), /*#__PURE__*/_react.default.createElement(_UploadStatus.default, props)));
+};
+var _default = BottomInfoBar;
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["mime","define","BottomInfoBarWrapper","styled","fontSize","position","bottom","height","color","borderTop","backgroundColor","width","transform","overflow","display","alignItems","zIndex","padding","BottomInfoBar","props"],"sources":["BottomInfoBar.tsx"],"sourcesContent":["import React from \"react\";\nimport mime from \"mime/lite\";\nimport styled from \"@emotion/styled\";\nimport SupportedFileTypes, { SupportedFileTypesProps } from \"./BottomInfoBar/SupportedFileTypes\";\nimport UploadStatus, { UploadStatusProps } from \"./BottomInfoBar/UploadStatus\";\n\nmime.define({ \"image/x-icon\": [\"ico\"] }, true);\nmime.define({ \"image/jpg\": [\"jpg\"] }, true);\nmime.define({ \"image/vnd.microsoft.icon\": [\"ico\"] }, true);\n\nconst BottomInfoBarWrapper = styled(\"div\")({\n    fontSize: \"0.8rem\",\n    position: \"sticky\",\n    bottom: 0,\n    height: 30,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    width: \"100%\",\n    transform: \"translateZ(0)\",\n    overflow: \"hidden\",\n    display: \"flex\",\n    alignItems: \"center\",\n    zIndex: 1,\n    \"> div\": {\n        padding: \"0 10px\",\n        width: \"100%\"\n    }\n});\n\nconst BottomInfoBar: React.FC<SupportedFileTypesProps & UploadStatusProps> = props => {\n    return (\n        <BottomInfoBarWrapper>\n            <div>\n                <SupportedFileTypes {...props} />\n                <UploadStatus {...props} />\n            </div>\n        </BottomInfoBarWrapper>\n    );\n};\n\nexport default BottomInfoBar;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEAA,aAAI,CAACC,MAAM,CAAC;EAAE,cAAc,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAC9CD,aAAI,CAACC,MAAM,CAAC;EAAE,WAAW,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAC3CD,aAAI,CAACC,MAAM,CAAC;EAAE,0BAA0B,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAE1D,IAAMC,oBAAoB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvCC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE,CAAC;EACTC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,+CAA+C;EACtDC,SAAS,EAAE,0CAA0C;EACrDC,eAAe,EAAE,0BAA0B;EAC3CC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,eAAe;EAC1BC,QAAQ,EAAE,QAAQ;EAClBC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE;IACLC,OAAO,EAAE,QAAQ;IACjBN,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAEF,IAAMO,aAAoE,GAAG,SAAvEA,aAAoE,CAAGC,KAAK,EAAI;EAClF,oBACI,6BAAC,oBAAoB,qBACjB,uDACI,6BAAC,2BAAkB,EAAKA,KAAK,CAAI,eACjC,6BAAC,qBAAY,EAAKA,KAAK,CAAI,CACzB,CACa;AAE/B,CAAC;AAAC,eAEaD,aAAa;AAAA"}

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

@@ -0,0 +1,11 @@
+/// <reference types="web" />
+import React from "react";
+export interface DropFilesHereProps {
+    onDragLeave?: (event?: React.DragEvent<HTMLElement>) => void;
+    onDrop?: (event?: React.DragEvent<HTMLElement>) => void;
+    empty?: boolean;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+    className?: string;
+}
+declare const DropFilesHere: React.FC<DropFilesHereProps>;
+export default DropFilesHere;

package/modules/FileManagerRenderer/DefaultRenderer/DropFilesHere.js

@@ -0,0 +1,68 @@
+"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 _emotion = require("emotion");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Icon = require("@webiny/ui/Icon");
+var _cloud_upload = require("@material-design-icons/svg/filled/cloud_upload.svg");
+var styles = /*#__PURE__*/(0, _emotion.css)({
+  margin: "0 auto",
+  paddingTop: 0,
+  height: "100%",
+  zIndex: 2,
+  width: "100%",
+  position: "absolute",
+  backgroundColor: "var(--mdc-theme-text-hint-on-light)",
+  "&.empty": {
+    backgroundColor: "transparent",
+    "> div": {
+      backgroundColor: "var(--mdc-theme-surface)"
+    }
+  },
+  "> div": {
+    textAlign: "center",
+    width: 300,
+    height: 300,
+    backgroundColor: "var(--mdc-theme-background)",
+    borderRadius: "50%",
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translateX(-50%) translateY(-100%)",
+    "> div": {
+      position: "absolute",
+      top: 90,
+      width: 300,
+      color: "var(--mdc-theme-on-surface)",
+      "svg.mdc-button__icon": {
+        width: "100px !important",
+        height: "auto",
+        display: "inline-block",
+        color: "var(--mdc-theme-on-surface)"
+      }
+    }
+  }
+}, "label:styles;");
+var DropFilesHere = function DropFilesHere(_ref) {
+  var onDrop = _ref.onDrop,
+    onDragLeave = _ref.onDragLeave,
+    empty = _ref.empty,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(styles, {
+      empty: empty
+    }),
+    onDrop: onDrop,
+    onClick: onClick,
+    onDragLeave: onDragLeave
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_cloud_upload.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement("div", null, "Drop files here"))));
+};
+var _default = DropFilesHere;
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["styles","css","margin","paddingTop","height","zIndex","width","position","backgroundColor","textAlign","borderRadius","left","top","transform","color","display","DropFilesHere","onDrop","onDragLeave","empty","onClick","classNames"],"sources":["DropFilesHere.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { ReactComponent as UploadIcon } from \"@material-design-icons/svg/filled/cloud_upload.svg\";\n\nconst styles = css({\n    margin: \"0 auto\",\n    paddingTop: 0,\n    height: \"100%\",\n    zIndex: 2,\n    width: \"100%\",\n    position: \"absolute\",\n    backgroundColor: \"var(--mdc-theme-text-hint-on-light)\",\n    \"&.empty\": {\n        backgroundColor: \"transparent\",\n        \"> div\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    },\n    \"> div\": {\n        textAlign: \"center\",\n        width: 300,\n        height: 300,\n        backgroundColor: \"var(--mdc-theme-background)\",\n        borderRadius: \"50%\",\n        position: \"absolute\",\n        left: \"50%\",\n        top: \"50%\",\n        transform: \"translateX(-50%) translateY(-100%)\",\n        \"> div\": {\n            position: \"absolute\",\n            top: 90,\n            width: 300,\n            color: \"var(--mdc-theme-on-surface)\",\n            \"svg.mdc-button__icon\": {\n                width: \"100px !important\",\n                height: \"auto\",\n                display: \"inline-block\",\n                color: \"var(--mdc-theme-on-surface)\"\n            }\n        }\n    }\n});\n\nexport interface DropFilesHereProps {\n    onDragLeave?: (event?: React.DragEvent<HTMLElement>) => void;\n    onDrop?: (event?: React.DragEvent<HTMLElement>) => void;\n    empty?: boolean;\n    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n    className?: string;\n}\n\nconst DropFilesHere: React.FC<DropFilesHereProps> = ({ onDrop, onDragLeave, empty, onClick }) => {\n    return (\n        <div\n            className={classNames(styles, { empty })}\n            onDrop={onDrop}\n            onClick={onClick}\n            onDragLeave={onDragLeave}\n        >\n            <div>\n                <div>\n                    <Icon icon={<UploadIcon />} />\n                    <div>Drop files here</div>\n                </div>\n            </div>\n        </div>\n    );\n};\nexport default DropFilesHere;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,MAAM,gBAAG,IAAAC,YAAG,EAAC;EACfC,MAAM,EAAE,QAAQ;EAChBC,UAAU,EAAE,CAAC;EACbC,MAAM,EAAE,MAAM;EACdC,MAAM,EAAE,CAAC;EACTC,KAAK,EAAE,MAAM;EACbC,QAAQ,EAAE,UAAU;EACpBC,eAAe,EAAE,qCAAqC;EACtD,SAAS,EAAE;IACPA,eAAe,EAAE,aAAa;IAC9B,OAAO,EAAE;MACLA,eAAe,EAAE;IACrB;EACJ,CAAC;EACD,OAAO,EAAE;IACLC,SAAS,EAAE,QAAQ;IACnBH,KAAK,EAAE,GAAG;IACVF,MAAM,EAAE,GAAG;IACXI,eAAe,EAAE,6BAA6B;IAC9CE,YAAY,EAAE,KAAK;IACnBH,QAAQ,EAAE,UAAU;IACpBI,IAAI,EAAE,KAAK;IACXC,GAAG,EAAE,KAAK;IACVC,SAAS,EAAE,oCAAoC;IAC/C,OAAO,EAAE;MACLN,QAAQ,EAAE,UAAU;MACpBK,GAAG,EAAE,EAAE;MACPN,KAAK,EAAE,GAAG;MACVQ,KAAK,EAAE,6BAA6B;MACpC,sBAAsB,EAAE;QACpBR,KAAK,EAAE,kBAAkB;QACzBF,MAAM,EAAE,MAAM;QACdW,OAAO,EAAE,cAAc;QACvBD,KAAK,EAAE;MACX;IACJ;EACJ;AACJ,CAAC,kBAAC;AAUF,IAAME,aAA2C,GAAG,SAA9CA,aAA2C,OAAgD;EAAA,IAA1CC,MAAM,QAANA,MAAM;IAAEC,WAAW,QAAXA,WAAW;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;EACtF,oBACI;IACI,SAAS,EAAE,IAAAC,mBAAU,EAACrB,MAAM,EAAE;MAAEmB,KAAK,EAALA;IAAM,CAAC,CAAE;IACzC,MAAM,EAAEF,MAAO;IACf,OAAO,EAAEG,OAAQ;IACjB,WAAW,EAAEF;EAAY,gBAEzB,uDACI,uDACI,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,4BAAU;EAAI,EAAG,eAC9B,0CAAK,iBAAe,CAAM,CACxB,CACJ,CACJ;AAEd,CAAC;AAAC,eACaF,aAAa;AAAA"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FilesRenderChildren } from "react-butterfiles";
+interface EmptyViewProps {
+    browseFiles: FilesRenderChildren["browseFiles"];
+}
+export declare const EmptyView: ({ browseFiles }: EmptyViewProps) => JSX.Element;
+export {};

package/modules/FileManagerRenderer/DefaultRenderer/EmptyView.js

@@ -0,0 +1,32 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,131 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,18 @@
+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 FileManagerView: React.FC<FileManagerViewProps>;
+export default FileManagerView;