@webiny/app-file-manager 5.35.2 → 5.36.0-beta.0

package/components/FileDetails/FileDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","fileDetailsSidebar","css","width","CloseButton","styled","IconButton","style","wrapper","height","overflowY","header","textAlign","marginBottom","paddingTop","textTransform","color","fontWeight","preview","boxSizing","display","justifyContent","alignItems","position","margin","img","objectFit","maxHeight","maxWidth","transform","backgroundColor","download","list","li","padding","lineHeight","minHeight","marginRight","flex","whiteSpace","overflow","textOverflow","drawerContent","FileDetailsInner","file","onClose","scope","own","useCopyFile","copyFileUrl","filePlugin","getFileTypePlugin","useState","darkImageBackground","setDarkImageBackground","actions","get","fileTypeIcon","useMemo","type","includes","classNames","dark","render","map","Component","index","bytes","format","size","unitSeparator","dayjs","createdOn","FileDetails","open","loading","rest","useHotkeys","zIndex","disabled","keys","esc"],"sources":["FileDetails.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { ReactComponent as CloseIcon } from \"@material-design-icons/svg/outlined/close.svg\";\nimport { ReactComponent as CopyContentIcon } from \"@material-design-icons/svg/outlined/content_copy.svg\";\nimport { ReactComponent as ImageIcon } from \"@material-design-icons/svg/outlined/insert_photo.svg\";\nimport { ReactComponent as FileIcon } from \"@material-design-icons/svg/outlined/insert_drive_file.svg\";\nimport { ReactComponent as CalendarIcon } from \"@material-design-icons/svg/outlined/today.svg\";\nimport { ReactComponent as HighlightIcon } from \"@material-design-icons/svg/outlined/highlight.svg\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Drawer, DrawerContent } from \"@webiny/ui/Drawer\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport bytes from \"bytes\";\nimport classNames from \"classnames\";\nimport dayjs from \"dayjs\";\nimport get from \"lodash/get\";\n// @ts-ignore\nimport { useHotkeys } from \"react-hotkeyz\";\nimport { Aliases } from \"./Aliases\";\nimport { DeleteImageAction } from \"./DeleteImageAction\";\nimport { FileProvider } from \"./FileProvider\";\nimport Name from \"./Name\";\nimport Tags from \"./Tags\";\nimport { useCopyFile } from \"~/hooks/useCopyFile\";\nimport getFileTypePlugin from \"~/getFileTypePlugin\";\n\nconst t = i18n.ns(\"app-admin/file-manager/file-details\");\n\nconst fileDetailsSidebar = css({\n    \"&.mdc-drawer\": {\n        width: 360\n    }\n});\n\ndeclare global {\n    // eslint-disable-next-line\n    namespace JSX {\n        interface IntrinsicElements {\n            \"li-title\": {\n                children?: React.ReactNode;\n            };\n\n            \"li-content\": {\n                children?: React.ReactNode;\n            };\n        }\n    }\n}\n\nconst CloseButton = styled(IconButton)`\n    position: absolute;\n    right: 10px;\n    top: 8px;\n    z-index: 10;\n`;\n\nconst style: any = {\n    wrapper: css({\n        height: \"100vh\",\n        overflowY: \"auto\"\n    }),\n    header: css({\n        textAlign: \"center\",\n        marginBottom: 24,\n        paddingTop: 16,\n        \"& span\": {\n            textTransform: \"capitalize\",\n            color: \"var(--mdc-theme-on-surface)\",\n            fontWeight: 600\n        }\n    }),\n    preview: css({\n        boxSizing: \"border-box\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        position: \"relative\",\n        width: \"100%\",\n        height: 300,\n        margin: \"0 auto 24px\",\n        img: {\n            objectFit: \"contain\",\n            maxHeight: 300,\n            maxWidth: 300,\n            width: \"100%\",\n            position: \"static\",\n            transform: \"none\"\n        },\n        \"&.dark\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }),\n    download: css({\n        textAlign: \"center\",\n        margin: \"0 auto\",\n        width: \"100%\",\n        \"& .icon--active\": {\n            \"&.mdc-icon-button\": {\n                color: \"var(--mdc-theme-text-on-primary)\"\n            }\n        }\n    }),\n    list: css({\n        textAlign: \"left\",\n        color: \"var(--mdc-theme-on-surface)\",\n        li: {\n            padding: \"12px 16px\",\n            lineHeight: \"22px\",\n            \"li-title\": {\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-start\",\n                minHeight: 48,\n                \"& .list-item__title\": {\n                    fontWeight: 600\n                },\n                \"& .list-item__icon\": {\n                    marginRight: 24\n                },\n                \"& .list-item__content\": {\n                    flex: \"1 0 200px\"\n                }\n            },\n            \"li-content\": {\n                width: \"100%\",\n                display: \"block\",\n                \"& .list-item__truncate\": {\n                    display: \"block\",\n                    width: \"100%\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\"\n                }\n            }\n        }\n    }),\n    drawerContent: css({\n        \"&.mdc-drawer__content\": {\n            height: \"auto\",\n            overflowY: \"inherit\"\n        }\n    })\n};\n\ninterface FileDetailsInnerProps {\n    file: FileItem;\n    scope?: string;\n    own?: boolean;\n    onClose: () => void;\n}\n\nconst FileDetailsInner: React.FC<FileDetailsInnerProps> = ({ file, onClose, scope, own }) => {\n    const { copyFileUrl } = useCopyFile({ file });\n    const filePlugin = getFileTypePlugin(file);\n    const [darkImageBackground, setDarkImageBackground] = useState(false);\n\n    const actions: React.FC[] =\n        get(filePlugin, \"fileDetails.actions\") || get(filePlugin, \"actions\") || [];\n\n    const fileTypeIcon = useMemo(() => {\n        if (file && typeof file.type === \"string\") {\n            return file.type.includes(\"image\") ? <ImageIcon /> : <FileIcon />;\n        }\n        return <ImageIcon />;\n    }, [file]);\n\n    return (\n        <FileProvider file={file}>\n            <div className={style.wrapper} dir=\"ltr\">\n                <div className={style.header}>\n                    <Typography use={\"headline5\"}>{t`File details`}</Typography>\n                    <CloseButton icon={<CloseIcon />} onClick={onClose} />\n                </div>\n\n                <div\n                    className={classNames(style.preview, {\n                        dark: darkImageBackground\n                    })}\n                >\n                    {filePlugin && filePlugin.render({ file })}\n                </div>\n                <div className={style.download}>\n                    <>\n                        <Tooltip content={<span>{t`Copy URL`}</span>} placement={\"bottom\"}>\n                            <IconButton\n                                onClick={copyFileUrl}\n                                icon={<CopyContentIcon style={{ margin: \"0 8px 0 0\" }} />}\n                            />\n                        </Tooltip>\n\n                        {actions.map((Component: React.FC<{ file: FileItem }>, index: number) => (\n                            <Component key={index} file={file} />\n                        ))}\n                        <DeleteImageAction onDelete={onClose} />\n                        {/* Render background switcher */}\n                        <Tooltip content={t`Toggle background`} placement={\"bottom\"}>\n                            <IconButton\n                                icon={<HighlightIcon />}\n                                onClick={() => setDarkImageBackground(!darkImageBackground)}\n                                className={classNames({\n                                    \"icon--active\": darkImageBackground\n                                })}\n                            />\n                        </Tooltip>\n                    </>\n                </div>\n                <DrawerContent dir=\"ltr\" className={style.drawerContent}>\n                    <ul className={style.list}>\n                        <li>\n                            <Name />\n                        </li>\n                        <li>\n                            <li-title>\n                                <Icon className={\"list-item__icon\"} icon={fileTypeIcon} />\n                                <div>\n                                    <Typography use={\"subtitle1\"}>{file.type}</Typography> {\" - \"}\n                                    <Typography use={\"subtitle1\"}>\n                                        {bytes.format(file.size, { unitSeparator: \" \" })}\n                                    </Typography>\n                                </div>\n                            </li-title>\n                        </li>\n                        <li>\n                            <li-title>\n                                <Icon className={\"list-item__icon\"} icon={<CalendarIcon />} />\n                                <div>\n                                    <Typography use={\"subtitle1\"}>\n                                        {dayjs(file.createdOn).format(\"DD MMM YYYY [at] HH:mm\")}\n                                    </Typography>\n                                </div>\n                            </li-title>\n                        </li>\n                        <li>\n                            <Tags scope={scope} own={own} />\n                        </li>\n                        <li>\n                            <Aliases />\n                        </li>\n                    </ul>\n                </DrawerContent>\n            </div>\n        </FileProvider>\n    );\n};\n\nexport interface FileDetailsProps {\n    file?: FileItem;\n    open: boolean;\n    loading: boolean;\n    scope?: string;\n    own?: boolean;\n    onClose: () => void;\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = ({\n    open,\n    onClose,\n    loading,\n    file,\n    ...rest\n}) => {\n    useHotkeys({\n        zIndex: 55,\n        disabled: !open,\n        keys: {\n            esc: onClose\n        }\n    });\n\n    return (\n        <Drawer\n            className={fileDetailsSidebar}\n            dir=\"rtl\"\n            modal\n            open={open}\n            onClose={onClose}\n            data-testid={\"fm.file-details.drawer\"}\n        >\n            <DrawerContent dir=\"ltr\">\n                {loading && <CircularProgress label={t`Loading file details...`} />}\n                {file && <FileDetailsInner file={file} onClose={onClose} {...rest} />}\n            </DrawerContent>\n        </Drawer>\n    );\n};\n\nexport { useFile } from \"./FileProvider\";\n"],"mappings":"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"}

package/components/FileDetails/Name.js

@@ -22,8 +22,8 @@ var Name = function Name() {
     showSnackbar = _useSnackbar.showSnackbar;
   var _useFileManagerApi = (0, _.useFileManagerApi)(),
     canEdit = _useFileManagerApi.canEdit;
-  var _useFileManagerView = (0, _.useFileManagerView)(),
-    updateFile = _useFileManagerView.updateFile;
+  var _useFileManagerAcoVie = (0, _.useFileManagerAcoView)(),
+    updateFile = _useFileManagerAcoVie.updateFile;
   var onSubmit = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref) {
       var name;

package/components/FileDetails/Name.js.map

@@ -1 +1 @@
-{"version":3,"names":["Name","useFile","file","name","useSnackbar","showSnackbar","useFileManagerApi","canEdit","useFileManagerView","updateFile","onSubmit","id","editContent","useMemo","Bind","submit","validation","create"],"sources":["Name.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFile, useFileManagerApi, useFileManagerView } from \"~/index\";\n\ninterface NameFormData {\n    name: string;\n}\n\nconst Name = () => {\n    const { file } = useFile();\n    const name = file.name || \"\";\n    const { showSnackbar } = useSnackbar();\n    const { canEdit } = useFileManagerApi();\n    const { updateFile } = useFileManagerView();\n\n    const onSubmit: FormOnSubmit<NameFormData> = async ({ name }) => {\n        // Bail out if name is same as the current file name.\n        if (name === file.name) {\n            return;\n        }\n\n        await updateFile(file.id, { name });\n\n        showSnackbar(\"Name successfully updated.\");\n    };\n\n    const editContent = useMemo(() => {\n        return (\n            <Form<NameFormData> data={{ name }} onSubmit={onSubmit}>\n                {({ Bind, submit }) => (\n                    <Bind name={\"name\"} validators={validation.create(\"required\")}>\n                        <Input\n                            disabled={!canEdit(file)}\n                            autoFocus\n                            placeholder={\"Enter name\"}\n                            fullwidth={true}\n                            onBlur={submit}\n                            description={\"A descriptive name is easier to remember.\"}\n                        />\n                    </Bind>\n                )}\n            </Form>\n        );\n    }, [name, file.name, canEdit]);\n\n    return <li-content>{editContent}</li-content>;\n};\n\nexport default Name;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAMA,IAAMA,IAAI,GAAG,SAAPA,IAAI,GAAS;EACf,eAAiB,IAAAC,SAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,IAAMC,IAAI,GAAGD,IAAI,CAACC,IAAI,IAAI,EAAE;EAC5B,mBAAyB,IAAAC,qBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EACpB,yBAAoB,IAAAC,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EACf,0BAAuB,IAAAC,oBAAkB,GAAE;IAAnCC,UAAU,uBAAVA,UAAU;EAElB,IAAMC,QAAoC;IAAA,mGAAG;MAAA;MAAA;QAAA;UAAA;YAASP,IAAI,QAAJA,IAAI;YAAA,MAElDA,IAAI,KAAKD,IAAI,CAACC,IAAI;cAAA;cAAA;YAAA;YAAA;UAAA;YAAA;YAAA,OAIhBM,UAAU,CAACP,IAAI,CAACS,EAAE,EAAE;cAAER,IAAI,EAAJA;YAAK,CAAC,CAAC;UAAA;YAEnCE,YAAY,CAAC,4BAA4B,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CAC9C;IAAA,gBATKK,QAAoC;MAAA;IAAA;EAAA,GASzC;EAED,IAAME,WAAW,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC9B,oBACI,6BAAC,UAAI;MAAe,IAAI,EAAE;QAAEV,IAAI,EAAJA;MAAK,CAAE;MAAC,QAAQ,EAAEO;IAAS,GAClD;MAAA,IAAGI,IAAI,SAAJA,IAAI;QAAEC,MAAM,SAANA,MAAM;MAAA,oBACZ,6BAAC,IAAI;QAAC,IAAI,EAAE,MAAO;QAAC,UAAU,EAAEC,sBAAU,CAACC,MAAM,CAAC,UAAU;MAAE,gBAC1D,6BAAC,YAAK;QACF,QAAQ,EAAE,CAACV,OAAO,CAACL,IAAI,CAAE;QACzB,SAAS;QACT,WAAW,EAAE,YAAa;QAC1B,SAAS,EAAE,IAAK;QAChB,MAAM,EAAEa,MAAO;QACf,WAAW,EAAE;MAA4C,EAC3D,CACC;IAAA,CACV,CACE;EAEf,CAAC,EAAE,CAACZ,IAAI,EAAED,IAAI,CAACC,IAAI,EAAEI,OAAO,CAAC,CAAC;EAE9B,oBAAO,iDAAaK,WAAW,CAAc;AACjD,CAAC;AAAC,eAEaZ,IAAI;AAAA"}
+{"version":3,"names":["Name","useFile","file","name","useSnackbar","showSnackbar","useFileManagerApi","canEdit","useFileManagerAcoView","updateFile","onSubmit","id","editContent","useMemo","Bind","submit","validation","create"],"sources":["Name.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFile, useFileManagerApi, useFileManagerAcoView } from \"~/index\";\n\ninterface NameFormData {\n    name: string;\n}\n\nconst Name = () => {\n    const { file } = useFile();\n    const name = file.name || \"\";\n    const { showSnackbar } = useSnackbar();\n    const { canEdit } = useFileManagerApi();\n    const { updateFile } = useFileManagerAcoView();\n\n    const onSubmit: FormOnSubmit<NameFormData> = async ({ name }) => {\n        // Bail out if name is same as the current file name.\n        if (name === file.name) {\n            return;\n        }\n\n        await updateFile(file.id, { name });\n\n        showSnackbar(\"Name successfully updated.\");\n    };\n\n    const editContent = useMemo(() => {\n        return (\n            <Form<NameFormData> data={{ name }} onSubmit={onSubmit}>\n                {({ Bind, submit }) => (\n                    <Bind name={\"name\"} validators={validation.create(\"required\")}>\n                        <Input\n                            disabled={!canEdit(file)}\n                            autoFocus\n                            placeholder={\"Enter name\"}\n                            fullwidth={true}\n                            onBlur={submit}\n                            description={\"A descriptive name is easier to remember.\"}\n                        />\n                    </Bind>\n                )}\n            </Form>\n        );\n    }, [name, file.name, canEdit]);\n\n    return <li-content>{editContent}</li-content>;\n};\n\nexport default Name;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAMA,IAAMA,IAAI,GAAG,SAAPA,IAAI,GAAS;EACf,eAAiB,IAAAC,SAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,IAAMC,IAAI,GAAGD,IAAI,CAACC,IAAI,IAAI,EAAE;EAC5B,mBAAyB,IAAAC,qBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EACpB,yBAAoB,IAAAC,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EACf,4BAAuB,IAAAC,uBAAqB,GAAE;IAAtCC,UAAU,yBAAVA,UAAU;EAElB,IAAMC,QAAoC;IAAA,mGAAG;MAAA;MAAA;QAAA;UAAA;YAASP,IAAI,QAAJA,IAAI;YAAA,MAElDA,IAAI,KAAKD,IAAI,CAACC,IAAI;cAAA;cAAA;YAAA;YAAA;UAAA;YAAA;YAAA,OAIhBM,UAAU,CAACP,IAAI,CAACS,EAAE,EAAE;cAAER,IAAI,EAAJA;YAAK,CAAC,CAAC;UAAA;YAEnCE,YAAY,CAAC,4BAA4B,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CAC9C;IAAA,gBATKK,QAAoC;MAAA;IAAA;EAAA,GASzC;EAED,IAAME,WAAW,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC9B,oBACI,6BAAC,UAAI;MAAe,IAAI,EAAE;QAAEV,IAAI,EAAJA;MAAK,CAAE;MAAC,QAAQ,EAAEO;IAAS,GAClD;MAAA,IAAGI,IAAI,SAAJA,IAAI;QAAEC,MAAM,SAANA,MAAM;MAAA,oBACZ,6BAAC,IAAI;QAAC,IAAI,EAAE,MAAO;QAAC,UAAU,EAAEC,sBAAU,CAACC,MAAM,CAAC,UAAU;MAAE,gBAC1D,6BAAC,YAAK;QACF,QAAQ,EAAE,CAACV,OAAO,CAACL,IAAI,CAAE;QACzB,SAAS;QACT,WAAW,EAAE,YAAa;QAC1B,SAAS,EAAE,IAAK;QAChB,MAAM,EAAEa,MAAO;QACf,WAAW,EAAE;MAA4C,EAC3D,CACC;IAAA,CACV,CACE;EAEf,CAAC,EAAE,CAACZ,IAAI,EAAED,IAAI,CAACC,IAAI,EAAEI,OAAO,CAAC,CAAC;EAE9B,oBAAO,iDAAaK,WAAW,CAAc;AACjD,CAAC;AAAC,eAEaZ,IAAI;AAAA"}

package/components/FileDetails/Tags.d.ts

@@ -1,3 +1,7 @@
-/// <reference types="react" />
-declare const Tags: () => JSX.Element;
+import React from "react";
+interface TagsProps {
+    scope?: string;
+    own?: boolean;
+}
+declare const Tags: React.VFC<TagsProps>;
 export default Tags;

package/components/FileDetails/Tags.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _emotion = require("emotion");
@@ -21,6 +22,9 @@ var _edit = require("@material-design-icons/svg/outlined/edit.svg");
 var _label = require("@material-design-icons/svg/outlined/label.svg");
 var _appAdmin = require("@webiny/app-admin");
 var _ = require("../..");
+var _appAco = require("@webiny/app-aco");
+var _constants = require("../../constants");
+var _tagsHelpers = require("../../tagsHelpers");
 var chipsStyle = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-chip-set": {
     padding: 0,
@@ -50,9 +54,19 @@ var actionWrapperStyle = /*#__PURE__*/(0, _emotion.css)({
     marginRight: 16
   }
 }, "label:actionWrapperStyle;");
-var Tags = function Tags() {
+var Tags = function Tags(_ref) {
+  var scope = _ref.scope,
+    own = _ref.own;
   var _useFile = (0, _.useFile)(),
     file = _useFile.file;
+  var _useTags = (0, _appAco.useTags)((0, _objectSpread2.default)({
+      type: _constants.ACO_TYPE,
+      tagsModifier: (0, _tagsHelpers.tagsModifier)(scope)
+    }, (0, _tagsHelpers.getTagsInitialParams)({
+      scope: scope,
+      own: own
+    }))),
+    tags = _useTags.tags;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     editing = _useState2[0],
@@ -65,9 +79,8 @@ var Tags = function Tags() {
     showSnackbar = _useSnackbar.showSnackbar;
   var _useFileManagerApi = (0, _.useFileManagerApi)(),
     canEdit = _useFileManagerApi.canEdit;
-  var _useFileManagerView = (0, _.useFileManagerView)(),
-    updateFile = _useFileManagerView.updateFile,
-    tags = _useFileManagerView.tags;
+  var _useFileManagerAcoVie = (0, _.useFileManagerAcoView)(),
+    updateFile = _useFileManagerAcoVie.updateFile;
   var _useState5 = (0, _react.useState)(file.tags),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     initialTags = _useState6[0],
@@ -76,8 +89,8 @@ var Tags = function Tags() {
     return setEdit(true);
   }, []);
   var isEditingAllowed = canEdit(file);
-  var renderHeaderContent = (0, _react.useCallback)(function (_ref) {
-    var data = _ref.data;
+  var renderHeaderContent = (0, _react.useCallback)(function (_ref2) {
+    var data = _ref2.data;
     if (editing) {
       return null;
     }
@@ -86,7 +99,7 @@ var Tags = function Tags() {
       // Render existing tags and "edit tags" action.
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
         className: (0, _classnames.default)("list-item__content", chipsStyle)
-      }, tags.map(function (tag) {
+      }, data.tags.map(function (tag) {
         return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
           key: tag,
           label: tag
@@ -106,12 +119,12 @@ var Tags = function Tags() {
     }, "Add tags...");
   }, [editing, isEditingAllowed]);
   var onSubmit = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref3) {
       var tags;
       return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            tags = _ref2.tags;
+            tags = _ref3.tags;
             setUpdating(true);
             _context.next = 4;
             return updateFile(file.id, {
@@ -129,7 +142,7 @@ var Tags = function Tags() {
       }, _callee);
     }));
     return function onSubmit(_x) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/_react.default.createElement(_form.Form, {
@@ -137,11 +150,11 @@ var Tags = function Tags() {
       tags: initialTags
     },
     onSubmit: onSubmit
-  }, function (_ref4) {
-    var Bind = _ref4.Bind,
-      data = _ref4.data,
-      setValue = _ref4.setValue,
-      submit = _ref4.submit;
+  }, function (_ref5) {
+    var Bind = _ref5.Bind,
+      data = _ref5.data,
+      setValue = _ref5.setValue,
+      submit = _ref5.submit;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
       className: "list-item__icon",
       icon: /*#__PURE__*/_react.default.createElement(_label.ReactComponent, null)
@@ -150,7 +163,9 @@ var Tags = function Tags() {
     })), editing && /*#__PURE__*/_react.default.createElement("li-content", null, /*#__PURE__*/_react.default.createElement(Bind, {
       name: "tags"
     }, /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, {
-      options: tags,
+      options: tags.map(function (tagItem) {
+        return tagItem.tag;
+      }),
       placeholder: "homepage asset",
       description: "Type in a new tag or select an existing one.",
       unique: true,

package/components/FileDetails/Tags.js.map

@@ -1 +1 @@
-{"version":3,"names":["chipsStyle","css","padding","marginLeft","backgroundColor","iconButtonStyle","width","height","addTagsStyle","color","textTransform","letterSpacing","actionWrapperStyle","marginTop","marginRight","Tags","useFile","file","useState","editing","setEdit","updating","setUpdating","useSnackbar","showSnackbar","useFileManagerApi","canEdit","useFileManagerView","updateFile","tags","initialTags","setInitialTags","handleEdit","useCallback","isEditingAllowed","renderHeaderContent","data","hasTags","length","classNames","map","tag","onSubmit","id","Bind","setValue","submit"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Chips, Chip } from \"@webiny/ui/Chips\";\nimport { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { ReactComponent as EditIcon } from \"@material-design-icons/svg/outlined/edit.svg\";\nimport { ReactComponent as LabelIcon } from \"@material-design-icons/svg/outlined/label.svg\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFile, useFileManagerApi, useFileManagerView } from \"~/index\";\n\nconst chipsStyle = css({\n    \"&.mdc-chip-set\": {\n        padding: 0,\n        marginLeft: -4,\n        \"& .mdc-chip\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }\n});\nconst iconButtonStyle = css({\n    \"&.mdc-icon-button svg\": {\n        width: 20,\n        height: 20\n    }\n});\nconst addTagsStyle = css({\n    \"&.mdc-button:not(:disabled)\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        textTransform: \"capitalize\",\n        letterSpacing: \"initial\",\n        marginLeft: -8\n    }\n});\nconst actionWrapperStyle = css({\n    marginTop: 16,\n    \"& button:first-child\": {\n        marginRight: 16\n    }\n});\n\ninterface TagsFormData {\n    tags: string[];\n}\n\nconst Tags = () => {\n    const { file } = useFile();\n    const [editing, setEdit] = useState(false);\n    const [updating, setUpdating] = useState(false);\n    const { showSnackbar } = useSnackbar();\n    const { canEdit } = useFileManagerApi();\n    const { updateFile, tags } = useFileManagerView();\n    const [initialTags, setInitialTags] = useState(file.tags);\n    const handleEdit = useCallback(() => setEdit(true), []);\n\n    const isEditingAllowed = canEdit(file);\n\n    const renderHeaderContent = useCallback(\n        ({ data }: { data: TagsFormData }) => {\n            if (editing) {\n                return null;\n            }\n            const hasTags = data.tags.length > 0;\n\n            if (hasTags) {\n                // Render existing tags and \"edit tags\" action.\n                return (\n                    <>\n                        <Chips className={classNames(\"list-item__content\", chipsStyle)}>\n                            {tags.map(tag => {\n                                return <Chip key={tag} label={tag} />;\n                            })}\n                        </Chips>\n                        {isEditingAllowed && (\n                            <IconButton\n                                className={iconButtonStyle}\n                                icon={<EditIcon />}\n                                onClick={handleEdit}\n                            />\n                        )}\n                    </>\n                );\n            }\n            // Render \"add tags\" action.\n            return (\n                <ButtonDefault\n                    className={addTagsStyle}\n                    onClick={handleEdit}\n                    disabled={!isEditingAllowed}\n                    data-testid=\"fm.tags.add\"\n                >\n                    Add tags...\n                </ButtonDefault>\n            );\n        },\n        [editing, isEditingAllowed]\n    );\n\n    const onSubmit: FormOnSubmit<TagsFormData> = async ({ tags }) => {\n        setUpdating(true);\n        await updateFile(file.id, { tags });\n        setUpdating(false);\n        setInitialTags(tags);\n        setEdit(false);\n        showSnackbar(\"Tags successfully updated.\");\n    };\n\n    return (\n        <Form<TagsFormData> data={{ tags: initialTags }} onSubmit={onSubmit}>\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({ data })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind name={\"tags\"}>\n                                <MultiAutoComplete\n                                    options={tags}\n                                    placeholder={\"homepage asset\"}\n                                    description={\"Type in a new tag or select an existing one.\"}\n                                    unique={true}\n                                    allowFreeInput={true}\n                                    useSimpleValues={true}\n                                    disabled={updating}\n                                />\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={submit}\n                                    data-testid={\"fm.tags.submit\"}\n                                >\n                                    Submit\n                                </ButtonPrimary>\n                                <ButtonSecondary\n                                    small\n                                    onClick={() => {\n                                        setValue(\"tags\", initialTags);\n                                        setEdit(false);\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                            </div>\n                        </li-content>\n                    )}\n                </React.Fragment>\n            )}\n        </Form>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}
+{"version":3,"names":["chipsStyle","css","padding","marginLeft","backgroundColor","iconButtonStyle","width","height","addTagsStyle","color","textTransform","letterSpacing","actionWrapperStyle","marginTop","marginRight","Tags","scope","own","useFile","file","useTags","type","ACO_TYPE","tagsModifier","getTagsInitialParams","tags","useState","editing","setEdit","updating","setUpdating","useSnackbar","showSnackbar","useFileManagerApi","canEdit","useFileManagerAcoView","updateFile","initialTags","setInitialTags","handleEdit","useCallback","isEditingAllowed","renderHeaderContent","data","hasTags","length","classNames","map","tag","onSubmit","id","Bind","setValue","submit","tagItem"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Chips, Chip } from \"@webiny/ui/Chips\";\nimport { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { ReactComponent as EditIcon } from \"@material-design-icons/svg/outlined/edit.svg\";\nimport { ReactComponent as LabelIcon } from \"@material-design-icons/svg/outlined/label.svg\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFile, useFileManagerApi, useFileManagerAcoView } from \"~/index\";\nimport { useTags } from \"@webiny/app-aco\";\nimport { ACO_TYPE } from \"~/constants\";\nimport { getTagsInitialParams, tagsModifier } from \"~/tagsHelpers\";\n\nconst chipsStyle = css({\n    \"&.mdc-chip-set\": {\n        padding: 0,\n        marginLeft: -4,\n        \"& .mdc-chip\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }\n});\nconst iconButtonStyle = css({\n    \"&.mdc-icon-button svg\": {\n        width: 20,\n        height: 20\n    }\n});\nconst addTagsStyle = css({\n    \"&.mdc-button:not(:disabled)\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        textTransform: \"capitalize\",\n        letterSpacing: \"initial\",\n        marginLeft: -8\n    }\n});\nconst actionWrapperStyle = css({\n    marginTop: 16,\n    \"& button:first-child\": {\n        marginRight: 16\n    }\n});\n\ninterface TagsFormData {\n    tags: string[];\n}\n\ninterface TagsProps {\n    scope?: string;\n    own?: boolean;\n}\n\nconst Tags: React.VFC<TagsProps> = ({ scope, own }) => {\n    const { file } = useFile();\n    const { tags } = useTags({\n        type: ACO_TYPE,\n        tagsModifier: tagsModifier(scope),\n        ...getTagsInitialParams({ scope, own })\n    });\n    const [editing, setEdit] = useState(false);\n    const [updating, setUpdating] = useState(false);\n    const { showSnackbar } = useSnackbar();\n    const { canEdit } = useFileManagerApi();\n    const { updateFile } = useFileManagerAcoView();\n    const [initialTags, setInitialTags] = useState(file.tags);\n    const handleEdit = useCallback(() => setEdit(true), []);\n    const isEditingAllowed = canEdit(file);\n\n    const renderHeaderContent = useCallback(\n        ({ data }: { data: TagsFormData }) => {\n            if (editing) {\n                return null;\n            }\n            const hasTags = data.tags.length > 0;\n\n            if (hasTags) {\n                // Render existing tags and \"edit tags\" action.\n                return (\n                    <>\n                        <Chips className={classNames(\"list-item__content\", chipsStyle)}>\n                            {data.tags.map(tag => {\n                                return <Chip key={tag} label={tag} />;\n                            })}\n                        </Chips>\n                        {isEditingAllowed && (\n                            <IconButton\n                                className={iconButtonStyle}\n                                icon={<EditIcon />}\n                                onClick={handleEdit}\n                            />\n                        )}\n                    </>\n                );\n            }\n            // Render \"add tags\" action.\n            return (\n                <ButtonDefault\n                    className={addTagsStyle}\n                    onClick={handleEdit}\n                    disabled={!isEditingAllowed}\n                    data-testid=\"fm.tags.add\"\n                >\n                    Add tags...\n                </ButtonDefault>\n            );\n        },\n        [editing, isEditingAllowed]\n    );\n\n    const onSubmit: FormOnSubmit<TagsFormData> = async ({ tags }) => {\n        setUpdating(true);\n        await updateFile(file.id, { tags });\n        setUpdating(false);\n        setInitialTags(tags);\n        setEdit(false);\n        showSnackbar(\"Tags successfully updated.\");\n    };\n\n    return (\n        <Form<TagsFormData> data={{ tags: initialTags }} onSubmit={onSubmit}>\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({ data })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind name={\"tags\"}>\n                                <MultiAutoComplete\n                                    options={tags.map(tagItem => tagItem.tag)}\n                                    placeholder={\"homepage asset\"}\n                                    description={\"Type in a new tag or select an existing one.\"}\n                                    unique={true}\n                                    allowFreeInput={true}\n                                    useSimpleValues={true}\n                                    disabled={updating}\n                                />\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={submit}\n                                    data-testid={\"fm.tags.submit\"}\n                                >\n                                    Submit\n                                </ButtonPrimary>\n                                <ButtonSecondary\n                                    small\n                                    onClick={() => {\n                                        setValue(\"tags\", initialTags);\n                                        setEdit(false);\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                            </div>\n                        </li-content>\n                    )}\n                </React.Fragment>\n            )}\n        </Form>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}

package/components/FileDetails/index.d.ts

@@ -0,0 +1 @@
+export * from "./FileDetails";

package/components/FileDetails/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FileDetails = require("./FileDetails");
+Object.keys(_FileDetails).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FileDetails[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FileDetails[key];
+    }
+  });
+});

package/components/FileDetails/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./FileDetails\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/Grid/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: (id: string) => void;
+}
+declare const MemoizedFile: React.NamedExoticComponent<FileProps>;
+export default MemoizedFile;

package/components/Grid/File.js

@@ -0,0 +1,57 @@
+"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 _Ripple = require("@webiny/ui/Ripple");
+var _Button = require("@webiny/ui/Button");
+var _settings = require("@material-design-icons/svg/outlined/settings.svg");
+var _styled = require("./styled");
+/**
+ * Package react-lazy-load has no types.
+ */
+// @ts-ignore
+
+var File = function File(_ref) {
+  var file = _ref.file,
+    selected = _ref.selected,
+    onSelect = _ref.onSelect,
+    children = _ref.children,
+    showFileDetails = _ref.showFileDetails;
+  return /*#__PURE__*/_react.default.createElement(_styled.FileWrapper, {
+    selected: selected,
+    disableSelect: !onSelect,
+    "data-testid": "fm-list-wrapper-file"
+  }, /*#__PURE__*/_react.default.createElement(_styled.FileBody, null, /*#__PURE__*/_react.default.createElement(_styled.FileInfoIcon, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_settings.ReactComponent, null),
+    onClick: function onClick() {
+      return showFileDetails(file.id);
+    },
+    "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(_styled.FilePreview, {
+    "data-testid": "fm-file-wrapper-file-preview"
+  }, /*#__PURE__*/_react.default.createElement(_styled.FileClickable, {
+    onClick: onSelect
+  }), children)))), /*#__PURE__*/_react.default.createElement(_styled.FileLabel, {
+    onClick: onSelect,
+    "data-testid": "fm-file-wrapper-file-label"
+  }, 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/components/Grid/File.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["File","file","selected","onSelect","children","showFileDetails","id","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 { 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\nimport {\n    FileBody,\n    FileClickable,\n    FileInfoIcon,\n    FileLabel,\n    FilePreview,\n    FileWrapper\n} from \"./styled\";\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: (id: string) => void;\n}\n\nconst File: React.FC<FileProps> = ({ file, selected, onSelect, children, showFileDetails }) => {\n    return (\n        <FileWrapper\n            selected={selected}\n            disableSelect={!onSelect}\n            data-testid={\"fm-list-wrapper-file\"}\n        >\n            <FileBody>\n                <FileInfoIcon>\n                    <IconButton\n                        icon={<SettingsIcon />}\n                        onClick={() => showFileDetails(file.id)}\n                        data-testid={\"fm-file-wrapper-file-info-icon\"}\n                    />\n                </FileInfoIcon>\n                <LazyLoad height={200} offsetVertical={300}>\n                    <Ripple>\n                        <FilePreview data-testid={\"fm-file-wrapper-file-preview\"}>\n                            <FileClickable onClick={onSelect} />\n                            {children}\n                        </FilePreview>\n                    </Ripple>\n                </LazyLoad>\n            </FileBody>\n            <FileLabel onClick={onSelect} data-testid={\"fm-file-wrapper-file-label\"}>\n                {file.name}\n            </FileLabel>\n        </FileWrapper>\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":";;;;;;;AAAA;AAKA;AACA;AACA;AACA;AAGA;AAVA;AACA;AACA;AACA;;AA0BA,IAAMA,IAAyB,GAAG,SAA5BA,IAAyB,OAAgE;EAAA,IAA1DC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,eAAe,QAAfA,eAAe;EACpF,oBACI,6BAAC,mBAAW;IACR,QAAQ,EAAEH,QAAS;IACnB,aAAa,EAAE,CAACC,QAAS;IACzB,eAAa;EAAuB,gBAEpC,6BAAC,gBAAQ,qBACL,6BAAC,oBAAY,qBACT,6BAAC,kBAAU;IACP,IAAI,eAAE,6BAAC,wBAAY,OAAI;IACvB,OAAO,EAAE;MAAA,OAAME,eAAe,CAACJ,IAAI,CAACK,EAAE,CAAC;IAAA,CAAC;IACxC,eAAa;EAAiC,EAChD,CACS,eACf,6BAAC,sBAAQ;IAAC,MAAM,EAAE,GAAI;IAAC,cAAc,EAAE;EAAI,gBACvC,6BAAC,cAAM,qBACH,6BAAC,mBAAW;IAAC,eAAa;EAA+B,gBACrD,6BAAC,qBAAa;IAAC,OAAO,EAAEH;EAAS,EAAG,EACnCC,QAAQ,CACC,CACT,CACF,CACJ,eACX,6BAAC,iBAAS;IAAC,OAAO,EAAED,QAAS;IAAC,eAAa;EAA6B,GACnEF,IAAI,CAACM,IAAI,CACF,CACF;AAEtB,CAAC;AAED,IAAMC,YAAY,gBAAGC,cAAK,CAACC,IAAI,CAACV,IAAI,EAAE,UAACW,IAAI,EAAEC,IAAI,EAAK;EAClD,IAAID,IAAI,CAACT,QAAQ,KAAKU,IAAI,CAACV,QAAQ,EAAE;IACjC,OAAO,KAAK;EAChB,CAAC,MAAM,IAAIS,IAAI,CAACV,IAAI,CAACM,IAAI,KAAKK,IAAI,CAACX,IAAI,CAACM,IAAI,EAAE;IAC1C,OAAO,KAAK;EAChB;EAEA,OAAO,IAAI;AACf,CAAC,CAAC;AAEFC,YAAY,CAACK,WAAW,GAAG,cAAc;AAAC,eAC3BL,YAAY;AAAA"}

package/components/Grid/Grid.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { FolderItem } from "@webiny/app-aco/types";
+import { FileItem } from "@webiny/app/types";
+interface GridProps {
+    records: FileItem[];
+    folders: FolderItem[];
+    loading?: boolean;
+    onRecordClick: (id: string) => void;
+    onFolderClick: (id: string) => void;
+    selected: FileItem[];
+    multiple?: boolean;
+    toggleSelected: (file: FileItem) => void;
+    onChange?: Function;
+    onClose?: Function;
+}
+export declare const Grid: React.FC<GridProps>;
+export {};

package/components/Grid/Grid.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Grid = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _appAco = require("@webiny/app-aco");
+var _i18n = require("@webiny/app/i18n");
+var _Progress = require("@webiny/ui/Progress");
+var _getFileTypePlugin = _interopRequireDefault(require("../../getFileTypePlugin"));
+var _File = _interopRequireDefault(require("./File"));
+var _styled = require("./styled");
+var _templateObject;
+var t = _i18n.i18n.ns("app-admin/file-manager/components/grid");
+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 Grid = function Grid(_ref) {
+  var folders = _ref.folders,
+    records = _ref.records,
+    loading = _ref.loading,
+    onRecordClick = _ref.onRecordClick,
+    onFolderClick = _ref.onFolderClick,
+    selected = _ref.selected,
+    onChange = _ref.onChange,
+    onClose = _ref.onClose,
+    toggleSelected = _ref.toggleSelected,
+    multiple = _ref.multiple;
+  if (loading) {
+    return /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+      label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Loading Files..."]))),
+      style: {
+        opacity: 1
+      }
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.FolderList, null, /*#__PURE__*/_react.default.createElement(_appAco.FolderGrid, {
+    folders: folders,
+    onFolderClick: onFolderClick
+  })), /*#__PURE__*/_react.default.createElement(_styled.FileList, null, records.map(function (record) {
+    return renderFile({
+      file: record,
+      showFileDetails: onRecordClick,
+      selected: selected.some(function (current) {
+        return current.id === record.id;
+      }),
+      onSelect: function () {
+        var _onSelect = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!(typeof onChange === "function")) {
+                  _context.next = 7;
+                  break;
+                }
+                if (!multiple) {
+                  _context.next = 4;
+                  break;
+                }
+                toggleSelected(record);
+                return _context.abrupt("return");
+              case 4:
+                _context.next = 6;
+                return onChange(record);
+              case 6:
+                onClose && onClose();
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function onSelect() {
+          return _onSelect.apply(this, arguments);
+        }
+        return onSelect;
+      }()
+    });
+  })));
+};
+exports.Grid = Grid;

package/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","renderFile","props","file","plugin","getFileTypePlugin","id","render","Grid","folders","records","loading","onRecordClick","onFolderClick","selected","onChange","onClose","toggleSelected","multiple","opacity","map","record","showFileDetails","some","current","onSelect"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { FolderGrid } from \"@webiny/app-aco\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport getFileTypePlugin from \"~/getFileTypePlugin\";\nimport FileThumbnail, { FileProps } from \"./File\";\n\nimport { FileList, FolderList } from \"./styled\";\n\nimport { FolderItem } from \"@webiny/app-aco/types\";\nimport { FileItem } from \"@webiny/app/types\";\n\nconst t = i18n.ns(\"app-admin/file-manager/components/grid\");\n\ninterface GridProps {\n    records: FileItem[];\n    folders: FolderItem[];\n    loading?: boolean;\n    onRecordClick: (id: string) => void;\n    onFolderClick: (id: string) => void;\n    selected: FileItem[];\n    multiple?: boolean;\n    toggleSelected: (file: FileItem) => void;\n    onChange?: Function;\n    onClose?: Function;\n}\n\ninterface RenderFileProps extends Omit<FileProps, \"children\"> {\n    file: FileItem;\n    children?: React.ReactNode;\n}\n\nconst renderFile: React.FC<RenderFileProps> = props => {\n    const { file } = props;\n    const plugin = getFileTypePlugin(file);\n    if (!plugin) {\n        return null;\n    }\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\nexport const Grid: React.FC<GridProps> = ({\n    folders,\n    records,\n    loading,\n    onRecordClick,\n    onFolderClick,\n    selected,\n    onChange,\n    onClose,\n    toggleSelected,\n    multiple\n}) => {\n    if (loading) {\n        return <CircularProgress label={t`Loading Files...`} style={{ opacity: 1 }} />;\n    }\n\n    return (\n        <>\n            <FolderList>\n                <FolderGrid folders={folders} onFolderClick={onFolderClick} />\n            </FolderList>\n            <FileList>\n                {records.map(record =>\n                    renderFile({\n                        file: record,\n                        showFileDetails: onRecordClick,\n                        selected: selected.some(current => current.id === record.id),\n                        onSelect: async () => {\n                            if (typeof onChange === \"function\") {\n                                if (multiple) {\n                                    toggleSelected(record);\n                                    return;\n                                }\n\n                                await onChange(record);\n                                onClose && onClose();\n                            }\n                        }\n                    })\n                )}\n            </FileList>\n        </>\n    );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAgD;AAKhD,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,wCAAwC,CAAC;AAoB3D,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;EAEA,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;AAEM,IAAMK,IAAyB,GAAG,SAA5BA,IAAyB,OAWhC;EAAA,IAVFC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,QAAQ,QAARA,QAAQ;EAER,IAAIP,OAAO,EAAE;IACT,oBAAO,6BAAC,0BAAgB;MAAC,KAAK,EAAEb,CAAC,mGAAmB;MAAC,KAAK,EAAE;QAAEqB,OAAO,EAAE;MAAE;IAAE,EAAG;EAClF;EAEA,oBACI,yEACI,6BAAC,kBAAU,qBACP,6BAAC,kBAAU;IAAC,OAAO,EAAEV,OAAQ;IAAC,aAAa,EAAEI;EAAc,EAAG,CACrD,eACb,6BAAC,gBAAQ,QACJH,OAAO,CAACU,GAAG,CAAC,UAAAC,MAAM;IAAA,OACfpB,UAAU,CAAC;MACPE,IAAI,EAAEkB,MAAM;MACZC,eAAe,EAAEV,aAAa;MAC9BE,QAAQ,EAAEA,QAAQ,CAACS,IAAI,CAAC,UAAAC,OAAO;QAAA,OAAIA,OAAO,CAAClB,EAAE,KAAKe,MAAM,CAACf,EAAE;MAAA,EAAC;MAC5DmB,QAAQ;QAAA,uGAAE;UAAA;YAAA;cAAA;gBAAA,MACF,OAAOV,QAAQ,KAAK,UAAU;kBAAA;kBAAA;gBAAA;gBAAA,KAC1BG,QAAQ;kBAAA;kBAAA;gBAAA;gBACRD,cAAc,CAACI,MAAM,CAAC;gBAAC;cAAA;gBAAA;gBAAA,OAIrBN,QAAQ,CAACM,MAAM,CAAC;cAAA;gBACtBL,OAAO,IAAIA,OAAO,EAAE;cAAC;cAAA;gBAAA;YAAA;UAAA;QAAA,CAE5B;QAAA;UAAA;QAAA;QAAA;MAAA;IACL,CAAC,CAAC;EAAA,EACL,CACM,CACZ;AAEX,CAAC;AAAC"}

package/components/Grid/index.d.ts

@@ -0,0 +1 @@
+export * from "./Grid";

package/components/Grid/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Grid = require("./Grid");
+Object.keys(_Grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Grid[key];
+    }
+  });
+});

package/components/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Grid\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/Grid/styled.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const FolderList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare type FileWrapperProps = {
+    disableSelect: boolean;
+    selected: boolean;
+};
+export declare const FileBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileInfoIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FilePreview: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileClickable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & FileWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/components/Grid/styled.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FolderList = exports.FileWrapper = exports.FilePreview = exports.FileList = exports.FileLabel = exports.FileInfoIcon = exports.FileClickable = exports.FileBody = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("@emotion/react");
+var FolderList = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FolderList",
+  target: "e1ahl7xf0"
+})("margin:16px;");
+exports.FolderList = FolderList;
+var FileList = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileList",
+  target: "e1ahl7xf1"
+})("display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:16px;row-gap:16px;margin:16px;");
+exports.FileList = FileList;
+var COMPONENT_WIDTH = 200;
+var COMPONENT_HEIGHT = 200;
+var grow = /*#__PURE__*/(0, _react.keyframes)("0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}label:grow;");
+var FileBody = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileBody",
+  target: "e1ahl7xf2"
+})("transition:200ms ease-in opacity;width:", COMPONENT_WIDTH, ";height:", COMPONENT_HEIGHT, ";overflow:hidden;");
+exports.FileBody = FileBody;
+var FileInfoIcon = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileInfoIcon",
+  target: "e1ahl7xf3"
+})("opacity:0;position:absolute;top:0;right:0;z-index:10;transition:all 150ms ease-in;&:hover{animation-name:", grow, ";animation-duration:0.4s;animation-timing-function:ease-in;animation-delay:0.2s;}& .mdc-icon-button svg{color:var(--mdc-theme-secondary);}");
+exports.FileInfoIcon = FileInfoIcon;
+var FilePreview = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FilePreview",
+  target: "e1ahl7xf4"
+})("text-align:center;position:relative;background-color:var(--mdc-theme-surface);width:100%;height:100%;");
+exports.FilePreview = FilePreview;
+var FileClickable = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileClickable",
+  target: "e1ahl7xf5"
+})("position:absolute;top:30px;left:0;width:100%;height:170px;z-index:2;");
+exports.FileClickable = FileClickable;
+var FileLabel = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileLabel",
+  target: "e1ahl7xf6"
+})("padding:15px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.8rem;color:var(--mdc-theme-on-surface);background-color:var(--mdc-theme-on-background);");
+exports.FileLabel = FileLabel;
+var FileWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileWrapper",
+  target: "e1ahl7xf7"
+})("display:inline-block;float:left;position:relative;z-index:1;cursor:", function (_ref) {
+  var disableSelect = _ref.disableSelect;
+  return disableSelect ? "auto" : "pointer";
+}, ";width:100%;max-width:", COMPONENT_WIDTH, ";border:1px solid var(--mdc-theme-on-background);border-radius:2px;box-shadow:", function (_ref2) {
+  var selected = _ref2.selected;
+  return selected ? "0px 0px 0px 2px var(--mdc-theme-primary)" : "none";
+}, ";&:hover ", FileInfoIcon, "{opacity:1;}");
+exports.FileWrapper = FileWrapper;