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

package/components/FileDetails/Tags.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _emotion = require("emotion");
+var _Chips = require("@webiny/ui/Chips");
+var _Button = require("@webiny/ui/Button");
+var _AutoComplete = require("@webiny/ui/AutoComplete");
+var _Icon = require("@webiny/ui/Icon");
+var _form = require("@webiny/form");
+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 chipsStyle = /*#__PURE__*/(0, _emotion.css)({
+  "&.mdc-chip-set": {
+    padding: 0,
+    marginLeft: -4,
+    "& .mdc-chip": {
+      backgroundColor: "var(--mdc-theme-background)"
+    }
+  }
+}, "label:chipsStyle;");
+var iconButtonStyle = /*#__PURE__*/(0, _emotion.css)({
+  "&.mdc-icon-button svg": {
+    width: 20,
+    height: 20
+  }
+}, "label:iconButtonStyle;");
+var addTagsStyle = /*#__PURE__*/(0, _emotion.css)({
+  "&.mdc-button:not(:disabled)": {
+    color: "var(--mdc-theme-text-secondary-on-background)",
+    textTransform: "capitalize",
+    letterSpacing: "initial",
+    marginLeft: -8
+  }
+}, "label:addTagsStyle;");
+var actionWrapperStyle = /*#__PURE__*/(0, _emotion.css)({
+  marginTop: 16,
+  "& button:first-child": {
+    marginRight: 16
+  }
+}, "label:actionWrapperStyle;");
+var Tags = function Tags() {
+  var _useFile = (0, _.useFile)(),
+    file = _useFile.file;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    editing = _useState2[0],
+    setEdit = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    updating = _useState4[0],
+    setUpdating = _useState4[1];
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var _useFileManagerApi = (0, _.useFileManagerApi)(),
+    canEdit = _useFileManagerApi.canEdit;
+  var _useFileManagerView = (0, _.useFileManagerView)(),
+    updateFile = _useFileManagerView.updateFile,
+    tags = _useFileManagerView.tags;
+  var _useState5 = (0, _react.useState)(file.tags),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    initialTags = _useState6[0],
+    setInitialTags = _useState6[1];
+  var handleEdit = (0, _react.useCallback)(function () {
+    return setEdit(true);
+  }, []);
+  var isEditingAllowed = canEdit(file);
+  var renderHeaderContent = (0, _react.useCallback)(function (_ref) {
+    var data = _ref.data;
+    if (editing) {
+      return null;
+    }
+    var hasTags = data.tags.length > 0;
+    if (hasTags) {
+      // 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) {
+        return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
+          key: tag,
+          label: tag
+        });
+      })), isEditingAllowed && /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+        className: iconButtonStyle,
+        icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
+        onClick: handleEdit
+      }));
+    }
+    // Render "add tags" action.
+    return /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+      className: addTagsStyle,
+      onClick: handleEdit,
+      disabled: !isEditingAllowed,
+      "data-testid": "fm.tags.add"
+    }, "Add tags...");
+  }, [editing, isEditingAllowed]);
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
+      var tags;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            tags = _ref2.tags;
+            setUpdating(true);
+            _context.next = 4;
+            return updateFile(file.id, {
+              tags: tags
+            });
+          case 4:
+            setUpdating(false);
+            setInitialTags(tags);
+            setEdit(false);
+            showSnackbar("Tags successfully updated.");
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmit(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: {
+      tags: initialTags
+    },
+    onSubmit: onSubmit
+  }, function (_ref4) {
+    var Bind = _ref4.Bind,
+      data = _ref4.data,
+      setValue = _ref4.setValue,
+      submit = _ref4.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)
+    }), renderHeaderContent({
+      data: data
+    })), editing && /*#__PURE__*/_react.default.createElement("li-content", null, /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "tags"
+    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, {
+      options: tags,
+      placeholder: "homepage asset",
+      description: "Type in a new tag or select an existing one.",
+      unique: true,
+      allowFreeInput: true,
+      useSimpleValues: true,
+      disabled: updating
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: actionWrapperStyle
+    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+      small: true,
+      onClick: submit,
+      "data-testid": "fm.tags.submit"
+    }, "Submit"), /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+      small: true,
+      onClick: function onClick() {
+        setValue("tags", initialTags);
+        setEdit(false);
+      }
+    }, "Cancel"))));
+  });
+};
+var _default = Tags;
+exports.default = _default;

package/components/FileDetails/Tags.js.map

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

package/components/FileDetails.d.ts

@@ -0,0 +1,20 @@
+export { useFile } from "./FileDetails/FileProvider";
+import React from "react";
+import { FileItem } from "@webiny/app-admin/types";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "li-title": {
+                children?: React.ReactNode;
+            };
+            "li-content": {
+                children?: React.ReactNode;
+            };
+        }
+    }
+}
+export interface FileDetailsProps {
+    file: FileItem;
+    onClose: () => void;
+}
+export declare const FileDetails: React.FC<FileDetailsProps>;

package/components/FileDetails.js

@@ -0,0 +1,243 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileDetails = void 0;
+Object.defineProperty(exports, "useFile", {
+  enumerable: true,
+  get: function get() {
+    return _FileProvider.useFile;
+  }
+});
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _FileProvider = require("./FileDetails/FileProvider");
+var _react = _interopRequireWildcard(require("react"));
+var _bytes = _interopRequireDefault(require("bytes"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _emotion = require("emotion");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Drawer = require("@webiny/ui/Drawer");
+var _Button = require("@webiny/ui/Button");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _Tags = _interopRequireDefault(require("./FileDetails/Tags"));
+var _Name = _interopRequireDefault(require("./FileDetails/Name"));
+var _Aliases = require("./FileDetails/Aliases");
+var _Tooltip = require("@webiny/ui/Tooltip");
+var _Icon = require("@webiny/ui/Icon");
+var _Typography = require("@webiny/ui/Typography");
+var _reactHotkeyz = require("react-hotkeyz");
+var _close = require("@material-design-icons/svg/outlined/close.svg");
+var _content_copy = require("@material-design-icons/svg/outlined/content_copy.svg");
+var _insert_photo = require("@material-design-icons/svg/outlined/insert_photo.svg");
+var _insert_drive_file = require("@material-design-icons/svg/outlined/insert_drive_file.svg");
+var _today = require("@material-design-icons/svg/outlined/today.svg");
+var _highlight = require("@material-design-icons/svg/outlined/highlight.svg");
+var _i18n = require("@webiny/app/i18n");
+var _DeleteImageAction = require("./FileDetails/DeleteImageAction");
+var _appAdmin = require("@webiny/app-admin");
+var _getFileTypePlugin = _interopRequireDefault(require("../getFileTypePlugin"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var t = _i18n.i18n.ns("app-admin/file-manager/file-details");
+var fileDetailsSidebar = /*#__PURE__*/(0, _emotion.css)({
+  "&.mdc-drawer": {
+    width: 360
+  }
+}, "label:fileDetailsSidebar;");
+var CloseButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
+  label: "CloseButton",
+  target: "e19slrb30"
+})("position:absolute;right:10px;top:8px;");
+var style = {
+  wrapper: /*#__PURE__*/(0, _emotion.css)({
+    height: "100vh",
+    overflowY: "auto"
+  }, "label:wrapper;"),
+  header: /*#__PURE__*/(0, _emotion.css)({
+    textAlign: "center",
+    marginBottom: 24,
+    paddingTop: 16,
+    "& span": {
+      textTransform: "capitalize",
+      color: "var(--mdc-theme-on-surface)",
+      fontWeight: 600
+    }
+  }, "label:header;"),
+  preview: /*#__PURE__*/(0, _emotion.css)({
+    boxSizing: "border-box",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    width: "100%",
+    height: 300,
+    margin: "0 auto 24px",
+    img: {
+      objectFit: "contain",
+      maxHeight: 300,
+      maxWidth: 300,
+      width: "100%",
+      position: "static",
+      transform: "none"
+    },
+    "&.dark": {
+      backgroundColor: "var(--mdc-theme-background)"
+    }
+  }, "label:preview;"),
+  download: /*#__PURE__*/(0, _emotion.css)({
+    textAlign: "center",
+    margin: "0 auto",
+    width: "100%",
+    "& .icon--active": {
+      "&.mdc-icon-button": {
+        color: "var(--mdc-theme-text-on-primary)"
+      }
+    }
+  }, "label:download;"),
+  list: /*#__PURE__*/(0, _emotion.css)({
+    textAlign: "left",
+    color: "var(--mdc-theme-on-surface)",
+    li: {
+      padding: "12px 16px",
+      lineHeight: "22px",
+      "li-title": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        minHeight: 48,
+        "& .list-item__title": {
+          fontWeight: 600
+        },
+        "& .list-item__icon": {
+          marginRight: 24
+        },
+        "& .list-item__content": {
+          flex: "1 0 200px"
+        }
+      },
+      "li-content": {
+        width: "100%",
+        display: "block",
+        "& .list-item__truncate": {
+          display: "block",
+          width: "100%",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }
+      }
+    }
+  }, "label:list;"),
+  drawerContent: /*#__PURE__*/(0, _emotion.css)({
+    "&.mdc-drawer__content": {
+      height: "auto",
+      overflowY: "inherit"
+    }
+  }, "label:drawerContent;")
+};
+var FileDetails = function FileDetails(_ref) {
+  var file = _ref.file,
+    onClose = _ref.onClose;
+  var filePlugin = (0, _getFileTypePlugin.default)(file);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    darkImageBackground = _useState2[0],
+    setDarkImageBackground = _useState2[1];
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  (0, _reactHotkeyz.useHotkeys)({
+    zIndex: 55,
+    disabled: !file,
+    keys: {
+      esc: onClose
+    }
+  });
+  var actions = (0, _get.default)(filePlugin, "fileDetails.actions") || (0, _get.default)(filePlugin, "actions") || [];
+  var fileTypeIcon = (0, _react.useMemo)(function () {
+    if (file && typeof file.type === "string") {
+      return file.type.includes("image") ? /*#__PURE__*/_react.default.createElement(_insert_photo.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_insert_drive_file.ReactComponent, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_insert_photo.ReactComponent, null);
+  }, [file]);
+  return /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
+    className: fileDetailsSidebar,
+    dir: "rtl",
+    modal: true,
+    open: Boolean(file),
+    onClose: onClose,
+    "data-testid": "fm.file-details.drawer"
+  }, file && /*#__PURE__*/_react.default.createElement(_FileProvider.FileProvider, {
+    file: file
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: style.wrapper,
+    dir: "ltr"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: style.header
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline5"
+  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["File details"])))), /*#__PURE__*/_react.default.createElement(CloseButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
+    onClick: onClose
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(style.preview, {
+      dark: darkImageBackground
+    })
+  }, filePlugin && filePlugin.render({
+    file: file
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: style.download
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement("span", null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Copy URL"])))),
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    onClick: function onClick() {
+      navigator.clipboard.writeText(file.src);
+      showSnackbar(t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["URL copied successfully."]))));
+    },
+    icon: /*#__PURE__*/_react.default.createElement(_content_copy.ReactComponent, {
+      style: {
+        margin: "0 8px 0 0"
+      }
+    })
+  })), actions.map(function (Component, index) {
+    return /*#__PURE__*/_react.default.createElement(Component, {
+      key: index,
+      file: file
+    });
+  }), /*#__PURE__*/_react.default.createElement(_DeleteImageAction.DeleteImageAction, null), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Toggle background"]))),
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_highlight.ReactComponent, null),
+    onClick: function onClick() {
+      return setDarkImageBackground(!darkImageBackground);
+    },
+    className: (0, _classnames.default)({
+      "icon--active": darkImageBackground
+    })
+  })))), /*#__PURE__*/_react.default.createElement(_Drawer.DrawerContent, {
+    dir: "ltr",
+    className: style.drawerContent
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: style.list
+  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Name.default, null)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "list-item__icon",
+    icon: fileTypeIcon
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "subtitle1"
+  }, file.type), " ", " - ", /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "subtitle1"
+  }, _bytes.default.format(file.size, {
+    unitSeparator: " "
+  }))))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "list-item__icon",
+    icon: /*#__PURE__*/_react.default.createElement(_today.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "subtitle1"
+  }, (0, _dayjs.default)(file.createdOn).format("DD MMM YYYY [at] HH:mm"))))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Tags.default, null)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Aliases.Aliases, null)))))));
+};
+exports.FileDetails = FileDetails;

package/components/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","FileDetails","file","onClose","filePlugin","getFileTypePlugin","useState","darkImageBackground","setDarkImageBackground","useSnackbar","showSnackbar","useHotkeys","zIndex","disabled","keys","esc","actions","get","fileTypeIcon","useMemo","type","includes","Boolean","classNames","dark","render","navigator","clipboard","writeText","src","map","Component","index","bytes","format","size","unitSeparator","dayjs","createdOn"],"sources":["FileDetails.tsx"],"sourcesContent":["export { useFile } from \"./FileDetails/FileProvider\";\nimport React, { useMemo, useState } from \"react\";\nimport bytes from \"bytes\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { Drawer, DrawerContent } from \"@webiny/ui/Drawer\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport dayjs from \"dayjs\";\nimport get from \"lodash/get\";\nimport Tags from \"./FileDetails/Tags\";\nimport Name from \"./FileDetails/Name\";\nimport { Aliases } from \"./FileDetails/Aliases\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\n// @ts-ignore\nimport { useHotkeys } from \"react-hotkeyz\";\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 { FileProvider } from \"./FileDetails/FileProvider\";\nimport { DeleteImageAction } from \"./FileDetails/DeleteImageAction\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { useSnackbar } from \"@webiny/app-admin\";\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`;\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\nexport interface FileDetailsProps {\n    file: FileItem;\n    onClose: () => void;\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = ({ file, onClose }) => {\n    const filePlugin = getFileTypePlugin(file);\n\n    const [darkImageBackground, setDarkImageBackground] = useState(false);\n    const { showSnackbar } = useSnackbar();\n\n    useHotkeys({\n        zIndex: 55,\n        disabled: !file,\n        keys: {\n            esc: onClose\n        }\n    });\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        <Drawer\n            className={fileDetailsSidebar}\n            dir=\"rtl\"\n            modal\n            open={Boolean(file)}\n            onClose={onClose}\n            data-testid={\"fm.file-details.drawer\"}\n        >\n            {file && (\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={() => {\n                                            navigator.clipboard.writeText(file.src);\n                                            showSnackbar(t`URL copied successfully.`);\n                                        }}\n                                        icon={<CopyContentIcon style={{ margin: \"0 8px 0 0\" }} />}\n                                    />\n                                </Tooltip>\n\n                                {actions.map(\n                                    (Component: React.FC<{ file: FileItem }>, index: number) => (\n                                        <Component key={index} file={file} />\n                                    )\n                                )}\n                                <DeleteImageAction />\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                                            {\" - \"}\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\n                                            className={\"list-item__icon\"}\n                                            icon={<CalendarIcon />}\n                                        />\n                                        <div>\n                                            <Typography use={\"subtitle1\"}>\n                                                {dayjs(file.createdOn).format(\n                                                    \"DD MMM YYYY [at] HH:mm\"\n                                                )}\n                                            </Typography>\n                                        </div>\n                                    </li-title>\n                                </li>\n                                <li>\n                                    <Tags />\n                                </li>\n                                <li>\n                                    <Aliases />\n                                </li>\n                            </ul>\n                        </DrawerContent>\n                    </div>\n                </FileProvider>\n            )}\n        </Drawer>\n    );\n};\n"],"mappings":"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"}

package/getFileTypePlugin.d.ts

@@ -0,0 +1,4 @@
+import { FileItem } from "@webiny/app/types";
+import { AdminFileManagerFileTypePlugin } from "@webiny/app-admin/types";
+import { FileManagerFileTypePlugin } from "./index";
+export default function getFileTypePlugin(file: FileItem): AdminFileManagerFileTypePlugin | FileManagerFileTypePlugin | null;

package/getFileTypePlugin.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getFileTypePlugin;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _minimatch = _interopRequireDefault(require("minimatch"));
+var _plugins = require("@webiny/plugins");
+var _index = require("./index");
+function getFileTypePlugin(file) {
+  if (!file) {
+    return null;
+  }
+  var fileTypePlugins = [].concat((0, _toConsumableArray2.default)(_plugins.plugins.byType("admin-file-manager-file-type")), (0, _toConsumableArray2.default)(_plugins.plugins.byType(_index.FileManagerFileTypePlugin.type))).filter(function (value, index, self) {
+    return self.indexOf(value) === index;
+  });
+
+  // Group by types, but only one plugin per group. Last in wins. This allows you to add plugins to the system
+  // and not worry about the order of plugin registration.
+  var byTypes = fileTypePlugins.reduce(function (acc, plugin) {
+    plugin.types.forEach(function (type) {
+      return acc[type] = plugin;
+    });
+    return acc;
+  }, {});
+
+  // Sort by type and by priority. More occurrences of `*` means lower priority.
+  var regExMatch = /\*/g;
+  var types = Object.keys(byTypes).sort(function (a, b) {
+    var countA = (a.match(regExMatch) || []).length;
+    var countB = (b.match(regExMatch) || []).length;
+    if (countB > countA) {
+      return -1;
+    } else if (countB < countA) {
+      return 1;
+    }
+    return 0;
+  });
+
+  // Find first matching type
+  var type = types.find(function (type) {
+    return (0, _minimatch.default)(file.type, type);
+  });
+  (0, _invariant.default)(type, "Missing plugin to handle \"".concat(file.type, "\"!"));
+
+  // return the plugin
+  return byTypes[type];
+}

package/getFileTypePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getFileTypePlugin","file","fileTypePlugins","plugins","byType","FileManagerFileTypePlugin","type","filter","value","index","self","indexOf","byTypes","reduce","acc","plugin","types","forEach","regExMatch","Object","keys","sort","a","b","countA","match","length","countB","find","minimatch","invariant"],"sources":["getFileTypePlugin.ts"],"sourcesContent":["import invariant from \"invariant\";\nimport minimatch from \"minimatch\";\nimport { plugins } from \"@webiny/plugins\";\nimport { FileItem } from \"@webiny/app/types\";\nimport { AdminFileManagerFileTypePlugin } from \"@webiny/app-admin/types\";\nimport { FileManagerFileTypePlugin } from \"~/index\";\n\nexport default function getFileTypePlugin(\n    file: FileItem\n): AdminFileManagerFileTypePlugin | FileManagerFileTypePlugin | null {\n    if (!file) {\n        return null;\n    }\n\n    const fileTypePlugins = [\n        ...plugins.byType<AdminFileManagerFileTypePlugin>(\"admin-file-manager-file-type\"),\n        ...plugins.byType<FileManagerFileTypePlugin>(FileManagerFileTypePlugin.type)\n    ].filter((value, index, self) => self.indexOf(value) === index);\n\n    // Group by types, but only one plugin per group. Last in wins. This allows you to add plugins to the system\n    // and not worry about the order of plugin registration.\n    const byTypes = fileTypePlugins.reduce<\n        Record<string, AdminFileManagerFileTypePlugin | FileManagerFileTypePlugin>\n    >((acc, plugin) => {\n        plugin.types.forEach(type => (acc[type] = plugin));\n        return acc;\n    }, {});\n\n    // Sort by type and by priority. More occurrences of `*` means lower priority.\n    const regExMatch = /\\*/g;\n    const types = Object.keys(byTypes).sort((a, b) => {\n        const countA = (a.match(regExMatch) || []).length;\n        const countB = (b.match(regExMatch) || []).length;\n        if (countB > countA) {\n            return -1;\n        } else if (countB < countA) {\n            return 1;\n        }\n        return 0;\n    });\n\n    // Find first matching type\n    const type = types.find(type => minimatch(file.type, type));\n\n    invariant(type, `Missing plugin to handle \"${file.type}\"!`);\n\n    // return the plugin\n    return byTypes[type];\n}\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAGA;AAEe,SAASA,iBAAiB,CACrCC,IAAc,EACmD;EACjE,IAAI,CAACA,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,IAAMC,eAAe,GAAG,2CACjBC,gBAAO,CAACC,MAAM,CAAiC,8BAA8B,CAAC,oCAC9ED,gBAAO,CAACC,MAAM,CAA4BC,gCAAyB,CAACC,IAAI,CAAC,GAC9EC,MAAM,CAAC,UAACC,KAAK,EAAEC,KAAK,EAAEC,IAAI;IAAA,OAAKA,IAAI,CAACC,OAAO,CAACH,KAAK,CAAC,KAAKC,KAAK;EAAA,EAAC;;EAE/D;EACA;EACA,IAAMG,OAAO,GAAGV,eAAe,CAACW,MAAM,CAEpC,UAACC,GAAG,EAAEC,MAAM,EAAK;IACfA,MAAM,CAACC,KAAK,CAACC,OAAO,CAAC,UAAAX,IAAI;MAAA,OAAKQ,GAAG,CAACR,IAAI,CAAC,GAAGS,MAAM;IAAA,CAAC,CAAC;IAClD,OAAOD,GAAG;EACd,CAAC,EAAE,CAAC,CAAC,CAAC;;EAEN;EACA,IAAMI,UAAU,GAAG,KAAK;EACxB,IAAMF,KAAK,GAAGG,MAAM,CAACC,IAAI,CAACR,OAAO,CAAC,CAACS,IAAI,CAAC,UAACC,CAAC,EAAEC,CAAC,EAAK;IAC9C,IAAMC,MAAM,GAAG,CAACF,CAAC,CAACG,KAAK,CAACP,UAAU,CAAC,IAAI,EAAE,EAAEQ,MAAM;IACjD,IAAMC,MAAM,GAAG,CAACJ,CAAC,CAACE,KAAK,CAACP,UAAU,CAAC,IAAI,EAAE,EAAEQ,MAAM;IACjD,IAAIC,MAAM,GAAGH,MAAM,EAAE;MACjB,OAAO,CAAC,CAAC;IACb,CAAC,MAAM,IAAIG,MAAM,GAAGH,MAAM,EAAE;MACxB,OAAO,CAAC;IACZ;IACA,OAAO,CAAC;EACZ,CAAC,CAAC;;EAEF;EACA,IAAMlB,IAAI,GAAGU,KAAK,CAACY,IAAI,CAAC,UAAAtB,IAAI;IAAA,OAAI,IAAAuB,kBAAS,EAAC5B,IAAI,CAACK,IAAI,EAAEA,IAAI,CAAC;EAAA,EAAC;EAE3D,IAAAwB,kBAAS,EAACxB,IAAI,uCAA+BL,IAAI,CAACK,IAAI,SAAK;;EAE3D;EACA,OAAOM,OAAO,CAACN,IAAI,CAAC;AACxB"}

package/index.d.ts

@@ -1,2 +1,4 @@
-import React from "react";
-export declare const FileManager: React.FC;
+export { useFile } from "./components/FileDetails";
+export { useFileManagerApi } from "./modules/FileManagerApiProvider/FileManagerApiContext";
+export { useFileManagerView } from "./modules/FileManagerRenderer/FileManagerViewProvider";
+export * from "./FileManagerFileTypePlugin";