@webiny/app-file-manager 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/components/FileDetails/components/CreatedOn.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreatedOn = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _today = require("@material-design-icons/svg/outlined/today.svg");
+var _Icon = require("@webiny/ui/Icon");
+var _Typography = require("@webiny/ui/Typography");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _useFile2 = require("../../../hooks/useFile");
+var CreatedOnWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "CreatedOnWrapper",
+  target: "e8xfka30"
+})("display:flex;align-items:center;");
+var InlineIcon = /*#__PURE__*/(0, _styled.default)(_Icon.Icon, {
+  label: "InlineIcon",
+  target: "e8xfka31"
+})("margin-right:5px;&.mdc-button__icon{display:inline;fill:var(--mdc-theme-text-secondary-on-background);}");
+var CreatedOn = function CreatedOn() {
+  var _useFile = (0, _useFile2.useFile)(),
+    file = _useFile.file;
+  return /*#__PURE__*/_react.default.createElement(CreatedOnWrapper, null, /*#__PURE__*/_react.default.createElement(InlineIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_today.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "caption",
+    tag: "span"
+  }, (0, _dayjs.default)(file.createdOn).format("DD MMM YYYY [at] HH:mm")));
+};
+exports.CreatedOn = CreatedOn;

package/components/FileDetails/components/CreatedOn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CreatedOnWrapper","styled","InlineIcon","Icon","CreatedOn","useFile","file","dayjs","createdOn","format"],"sources":["CreatedOn.tsx"],"sourcesContent":["import React from \"react\";\nimport dayjs from \"dayjs\";\nimport { ReactComponent as CalendarIcon } from \"@material-design-icons/svg/outlined/today.svg\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport styled from \"@emotion/styled\";\nimport { useFile } from \"~/hooks/useFile\";\n\nconst CreatedOnWrapper = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\nconst InlineIcon = styled(Icon)`\n    margin-right: 5px;\n    &.mdc-button__icon {\n        display: inline;\n        fill: var(--mdc-theme-text-secondary-on-background);\n    }\n`;\n\nexport const CreatedOn = () => {\n    const { file } = useFile();\n\n    return (\n        <CreatedOnWrapper>\n            <InlineIcon icon={<CalendarIcon />} />\n            <Typography use={\"caption\"} tag={\"span\"}>\n                {dayjs(file.createdOn).format(\"DD MMM YYYY [at] HH:mm\")}\n            </Typography>\n        </CreatedOnWrapper>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,gBAAgB,oBAAGC,eAAM;EAAA;EAAA;AAAA,sCAG9B;AAED,IAAMC,UAAU,oBAAGD,eAAM,EAACE,UAAI;EAAA;EAAA;AAAA,6GAM7B;AAEM,IAAMC,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC3B,eAAiB,IAAAC,iBAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EAEZ,oBACI,6BAAC,gBAAgB,qBACb,6BAAC,UAAU;IAAC,IAAI,eAAE,6BAAC,qBAAY;EAAI,EAAG,eACtC,6BAAC,sBAAU;IAAC,GAAG,EAAE,SAAU;IAAC,GAAG,EAAE;EAAO,GACnC,IAAAC,cAAK,EAACD,IAAI,CAACE,SAAS,CAAC,CAACC,MAAM,CAAC,wBAAwB,CAAC,CAC9C,CACE;AAE3B,CAAC;AAAC"}

package/components/FileDetails/components/Extensions.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CmsModel } from "@webiny/app-headless-cms/types";
+interface ExtensionsProps {
+    model: CmsModel;
+}
+export declare const Extensions: ({ model }: ExtensionsProps) => JSX.Element | null;
+export {};

package/components/FileDetails/components/Extensions.js

@@ -0,0 +1,51 @@
+"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.Extensions = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ModelProvider = require("@webiny/app-headless-cms/admin/components/ModelProvider");
+var _Fields = require("@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields");
+var _form = require("@webiny/form");
+var Extensions = function Extensions(_ref) {
+  var _extensionsField$sett, _extensionsField$sett2;
+  var model = _ref.model;
+  var extensionsField = (0, _react.useMemo)(function () {
+    return model.fields.find(function (f) {
+      return f.fieldId === "extensions";
+    });
+  }, [model]);
+  if (!extensionsField) {
+    return null;
+  }
+  var fields = ((_extensionsField$sett = extensionsField.settings) === null || _extensionsField$sett === void 0 ? void 0 : _extensionsField$sett.fields) || [];
+  var layout = ((_extensionsField$sett2 = extensionsField.settings) === null || _extensionsField$sett2 === void 0 ? void 0 : _extensionsField$sett2.layout) || [];
+  if (!layout.length) {
+    layout.push.apply(layout, (0, _toConsumableArray2.default)(fields.map(function (field) {
+      return [field.fieldId];
+    })));
+  }
+  var _useBind = (0, _form.useBind)({
+      name: "extensions"
+    }),
+    value = _useBind.value,
+    onChange = _useBind.onChange;
+  return /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+    model: model
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: value,
+    onChange: onChange
+  }, function () {
+    return /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+      contentModel: model,
+      Bind: _form.Bind,
+      fields: fields,
+      layout: layout
+    });
+  }));
+};
+exports.Extensions = Extensions;

package/components/FileDetails/components/Extensions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Extensions","model","extensionsField","useMemo","fields","find","f","fieldId","settings","layout","length","push","map","field","useBind","name","value","onChange","Bind"],"sources":["Extensions.tsx"],"sourcesContent":["import { CmsModel } from \"@webiny/app-headless-cms/types\";\nimport React, { useMemo } from \"react\";\nimport { ModelProvider } from \"@webiny/app-headless-cms/admin/components/ModelProvider\";\nimport { Fields } from \"@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields\";\nimport { Bind, Form, useBind } from \"@webiny/form\";\n\ninterface ExtensionsProps {\n    model: CmsModel;\n}\n\nexport const Extensions = ({ model }: ExtensionsProps) => {\n    const extensionsField = useMemo(() => {\n        return model.fields.find(f => f.fieldId === \"extensions\");\n    }, [model]);\n\n    if (!extensionsField) {\n        return null;\n    }\n\n    const fields = extensionsField.settings?.fields || [];\n    const layout = extensionsField.settings?.layout || [];\n\n    if (!layout.length) {\n        layout.push(...fields.map(field => [field.fieldId]));\n    }\n\n    const { value, onChange } = useBind({\n        name: \"extensions\"\n    });\n\n    return (\n        <ModelProvider model={model}>\n            <Form data={value} onChange={onChange}>\n                {() => (\n                    <Fields\n                        contentModel={model}\n                        Bind={Bind as any}\n                        fields={fields}\n                        layout={layout}\n                    />\n                )}\n            </Form>\n        </ModelProvider>\n    );\n};\n"],"mappings":";;;;;;;;;AACA;AACA;AACA;AACA;AAMO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAAmC;EAAA;EAAA,IAA7BC,KAAK,QAALA,KAAK;EAC9B,IAAMC,eAAe,GAAG,IAAAC,cAAO,EAAC,YAAM;IAClC,OAAOF,KAAK,CAACG,MAAM,CAACC,IAAI,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,OAAO,KAAK,YAAY;IAAA,EAAC;EAC7D,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEX,IAAI,CAACC,eAAe,EAAE;IAClB,OAAO,IAAI;EACf;EAEA,IAAME,MAAM,GAAG,0BAAAF,eAAe,CAACM,QAAQ,0DAAxB,sBAA0BJ,MAAM,KAAI,EAAE;EACrD,IAAMK,MAAM,GAAG,2BAAAP,eAAe,CAACM,QAAQ,2DAAxB,uBAA0BC,MAAM,KAAI,EAAE;EAErD,IAAI,CAACA,MAAM,CAACC,MAAM,EAAE;IAChBD,MAAM,CAACE,IAAI,OAAXF,MAAM,mCAASL,MAAM,CAACQ,GAAG,CAAC,UAAAC,KAAK;MAAA,OAAI,CAACA,KAAK,CAACN,OAAO,CAAC;IAAA,EAAC,EAAC;EACxD;EAEA,eAA4B,IAAAO,aAAO,EAAC;MAChCC,IAAI,EAAE;IACV,CAAC,CAAC;IAFMC,KAAK,YAALA,KAAK;IAAEC,QAAQ,YAARA,QAAQ;EAIvB,oBACI,6BAAC,4BAAa;IAAC,KAAK,EAAEhB;EAAM,gBACxB,6BAAC,UAAI;IAAC,IAAI,EAAEe,KAAM;IAAC,QAAQ,EAAEC;EAAS,GACjC;IAAA,oBACG,6BAAC,cAAM;MACH,YAAY,EAAEhB,KAAM;MACpB,IAAI,EAAEiB,UAAY;MAClB,MAAM,EAAEd,MAAO;MACf,MAAM,EAAEK;IAAO,EACjB;EAAA,CACL,CACE,CACK;AAExB,CAAC;AAAC"}

package/components/FileDetails/components/Flex.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const FlexRow: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const FlexColumn: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/components/FileDetails/components/Flex.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlexRow = exports.FlexColumn = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireDefault(require("react"));
+var Row = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Row",
+  target: "ek6axac0"
+})("display:flex;flex-direction:row;");
+var Column = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Column",
+  target: "ek6axac1"
+})("flex-grow:1;");
+var FlexRow = function FlexRow(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(Row, null, children);
+};
+exports.FlexRow = FlexRow;
+var FlexColumn = function FlexColumn(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(Column, null, children);
+};
+exports.FlexColumn = FlexColumn;

package/components/FileDetails/components/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Row","styled","Column","FlexRow","children","FlexColumn"],"sources":["Flex.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\n\nconst Row = styled.div`\n    display: flex;\n    flex-direction: row;\n`;\n\nconst Column = styled.div`\n    flex-grow: 1;\n`;\n\nexport const FlexRow = ({ children }: { children: React.ReactNode }) => {\n    return <Row>{children}</Row>;\n};\n\nexport const FlexColumn = ({ children }: { children: React.ReactNode }) => {\n    return <Column>{children}</Column>;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA,IAAMA,GAAG,oBAAGC,eAAM;EAAA;EAAA;AAAA,sCAGjB;AAED,IAAMC,MAAM,oBAAGD,eAAM;EAAA;EAAA;AAAA,kBAEpB;AAEM,IAAME,OAAO,GAAG,SAAVA,OAAO,OAAoD;EAAA,IAA9CC,QAAQ,QAARA,QAAQ;EAC9B,oBAAO,6BAAC,GAAG,QAAEA,QAAQ,CAAO;AAChC,CAAC;AAAC;AAEK,IAAMC,UAAU,GAAG,SAAbA,UAAU,QAAoD;EAAA,IAA9CD,QAAQ,SAARA,QAAQ;EACjC,oBAAO,6BAAC,MAAM,QAAEA,QAAQ,CAAU;AACtC,CAAC;AAAC"}

package/components/FileDetails/components/Footer.d.ts

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

package/components/FileDetails/components/Footer.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Footer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _SimpleForm = require("@webiny/app-admin/components/SimpleForm");
+var _Button = require("@webiny/ui/Button");
+var _form = require("@webiny/form");
+var _useFileDetails2 = require("../../../hooks/useFileDetails");
+var SimpleFormFooterStyled = /*#__PURE__*/(0, _styled.default)(_SimpleForm.SimpleFormFooter, {
+  label: "SimpleFormFooterStyled",
+  target: "echg8m60"
+})("justify-content:flex-end;");
+var Footer = function Footer() {
+  var _useFileDetails = (0, _useFileDetails2.useFileDetails)(),
+    close = _useFileDetails.close;
+  var form = (0, _form.useForm)();
+  return /*#__PURE__*/_react.default.createElement(SimpleFormFooterStyled, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    onClick: close
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    onClick: form.submit
+  }, "Save File"));
+};
+exports.Footer = Footer;

package/components/FileDetails/components/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SimpleFormFooterStyled","styled","SimpleFormFooter","Footer","useFileDetails","close","form","useForm","submit"],"sources":["Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { SimpleFormFooter } from \"@webiny/app-admin/components/SimpleForm\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useForm } from \"@webiny/form\";\nimport { useFileDetails } from \"~/hooks/useFileDetails\";\n\nconst SimpleFormFooterStyled = styled(SimpleFormFooter)`\n    justify-content: flex-end;\n`;\n\nexport const Footer = () => {\n    const { close } = useFileDetails();\n    const form = useForm();\n\n    return (\n        <SimpleFormFooterStyled>\n            <ButtonDefault onClick={close}>Cancel</ButtonDefault>\n            <ButtonPrimary onClick={form.submit}>Save File</ButtonPrimary>\n        </SimpleFormFooterStyled>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,sBAAsB,oBAAGC,eAAM,EAACC,4BAAgB;EAAA;EAAA;AAAA,+BAErD;AAEM,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;EACxB,sBAAkB,IAAAC,+BAAc,GAAE;IAA1BC,KAAK,mBAALA,KAAK;EACb,IAAMC,IAAI,GAAG,IAAAC,aAAO,GAAE;EAEtB,oBACI,6BAAC,sBAAsB,qBACnB,6BAAC,qBAAa;IAAC,OAAO,EAAEF;EAAM,GAAC,QAAM,CAAgB,eACrD,6BAAC,qBAAa;IAAC,OAAO,EAAEC,IAAI,CAACE;EAAO,GAAC,WAAS,CAAgB,CACzC;AAEjC,CAAC;AAAC"}

package/components/FileDetails/components/Header.d.ts

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

package/components/FileDetails/components/Header.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _close = require("@material-design-icons/svg/outlined/close.svg");
+var _Button = require("@webiny/ui/Button");
+var _SimpleForm = require("@webiny/app-admin/components/SimpleForm");
+var _useFileDetails2 = require("../../../hooks/useFileDetails");
+var CloseButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
+  label: "CloseButton",
+  target: "e1e01brf0"
+})("position:absolute;top:15px;");
+var Header = function Header() {
+  var _useFileDetails = (0, _useFileDetails2.useFileDetails)(),
+    close = _useFileDetails.close;
+  return /*#__PURE__*/_react.default.createElement(_SimpleForm.SimpleFormHeader, {
+    title: "File details"
+  }, /*#__PURE__*/_react.default.createElement(CloseButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
+    onClick: close
+  }));
+};
+exports.Header = Header;

package/components/FileDetails/components/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CloseButton","styled","IconButton","Header","useFileDetails","close"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ReactComponent as CloseIcon } from \"@material-design-icons/svg/outlined/close.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { SimpleFormHeader } from \"@webiny/app-admin/components/SimpleForm\";\nimport { useFileDetails } from \"~/hooks/useFileDetails\";\n\nconst CloseButton = styled(IconButton)`\n    position: absolute;\n    top: 15px;\n`;\n\nexport const Header = () => {\n    const { close } = useFileDetails();\n\n    return (\n        <SimpleFormHeader title={\"File details\"}>\n            <CloseButton icon={<CloseIcon />} onClick={close} />\n        </SimpleFormHeader>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,WAAW,oBAAGC,eAAM,EAACC,kBAAU;EAAA;EAAA;AAAA,iCAGpC;AAEM,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;EACxB,sBAAkB,IAAAC,+BAAc,GAAE;IAA1BC,KAAK,mBAALA,KAAK;EAEb,oBACI,6BAAC,4BAAgB;IAAC,KAAK,EAAE;EAAe,gBACpC,6BAAC,WAAW;IAAC,IAAI,eAAE,6BAAC,qBAAS,OAAI;IAAC,OAAO,EAAEA;EAAM,EAAG,CACrC;AAE3B,CAAC;AAAC"}

package/components/FileDetails/components/Name.d.ts

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

package/components/FileDetails/components/Name.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Name = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Input = require("@webiny/ui/Input");
+var _validation = require("@webiny/validation");
+var _ = require("../../..");
+var _form = require("@webiny/form");
+var Name = function Name() {
+  var _useFile = (0, _.useFile)(),
+    file = _useFile.file;
+  var _useFileManagerApi = (0, _.useFileManagerApi)(),
+    canEdit = _useFileManagerApi.canEdit;
+  var bind = (0, _form.useBind)({
+    name: "name",
+    validators: [_validation.validation.create("required")]
+  });
+  return /*#__PURE__*/_react.default.createElement(_Input.Input, Object.assign({}, bind, {
+    label: "Name",
+    disabled: !canEdit(file),
+    autoFocus: true,
+    placeholder: "Enter name",
+    description: "A descriptive name is easier to remember."
+  }));
+};
+exports.Name = Name;

package/components/FileDetails/components/Name.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Name","useFile","file","useFileManagerApi","canEdit","bind","useBind","name","validators","validation","create"],"sources":["Name.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { validation } from \"@webiny/validation\";\nimport { useFile, useFileManagerApi } from \"~/index\";\nimport { useBind } from \"@webiny/form\";\n\nexport const Name = () => {\n    const { file } = useFile();\n    const { canEdit } = useFileManagerApi();\n    const bind = useBind({\n        name: \"name\",\n        validators: [validation.create(\"required\")]\n    });\n\n    return (\n        <Input\n            {...bind}\n            label={\"Name\"}\n            disabled={!canEdit(file)}\n            autoFocus\n            placeholder={\"Enter name\"}\n            description={\"A descriptive name is easier to remember.\"}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG,SAAPA,IAAI,GAAS;EACtB,eAAiB,IAAAC,SAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,yBAAoB,IAAAC,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EACf,IAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC;IACjBC,IAAI,EAAE,MAAM;IACZC,UAAU,EAAE,CAACC,sBAAU,CAACC,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC,CAAC;EAEF,oBACI,6BAAC,YAAK,oBACEL,IAAI;IACR,KAAK,EAAE,MAAO;IACd,QAAQ,EAAE,CAACD,OAAO,CAACF,IAAI,CAAE;IACzB,SAAS;IACT,WAAW,EAAE,YAAa;IAC1B,WAAW,EAAE;EAA4C,GAC3D;AAEV,CAAC;AAAC"}

package/components/FileDetails/components/Preview.d.ts

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

package/components/FileDetails/components/Preview.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Preview = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Thumbnail = require("./Thumbnail");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var PreviewContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "PreviewContainer",
+  target: "eivi6al0"
+})("height:calc(100vh - 285px);background:repeating-conic-gradient(#efefef 0% 25%,transparent 0% 50%) 50%/25px 25px;display:flex;width:auto;align-items:center;justify-content:center;> img{max-width:400px;max-height:calc(100vh - 350px);}");
+var Preview = function Preview() {
+  return /*#__PURE__*/_react.default.createElement(PreviewContainer, null, /*#__PURE__*/_react.default.createElement(_Thumbnail.Thumbnail, null));
+};
+exports.Preview = Preview;

package/components/FileDetails/components/Preview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PreviewContainer","styled","Preview"],"sources":["Preview.tsx"],"sourcesContent":["import React from \"react\";\nimport { Thumbnail } from \"./Thumbnail\";\nimport styled from \"@emotion/styled\";\n\nconst PreviewContainer = styled.div`\n    height: calc(100vh - 285px);\n    background: repeating-conic-gradient(#efefef 0% 25%, transparent 0% 50%) 50%/25px 25px;\n    display: flex;\n    width: auto;\n    align-items: center;\n    justify-content: center;\n    > img {\n        max-width: 400px;\n        max-height: calc(100vh - 350px);\n    }\n`;\n\nexport const Preview = () => {\n    return (\n        <PreviewContainer>\n            <Thumbnail />\n        </PreviewContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,gBAAgB,oBAAGC,eAAM;EAAA;EAAA;AAAA,8OAW9B;AAEM,IAAMC,OAAO,GAAG,SAAVA,OAAO,GAAS;EACzB,oBACI,6BAAC,gBAAgB,qBACb,6BAAC,oBAAS,OAAG,CACE;AAE3B,CAAC;AAAC"}

package/components/FileDetails/components/PreviewMeta.d.ts

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

package/components/FileDetails/components/PreviewMeta.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewMeta = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _TypeAndSize = require("./TypeAndSize");
+var _CreatedOn = require("./CreatedOn");
+var PreviewMetaWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "PreviewMetaWrapper",
+  target: "eay16vj0"
+})("display:flex;align-items:center;justify-content:space-between;padding:5px;border-top:1px solid var(--mdc-theme-on-background);");
+var PreviewMeta = function PreviewMeta() {
+  return /*#__PURE__*/_react.default.createElement(PreviewMetaWrapper, null, /*#__PURE__*/_react.default.createElement(_TypeAndSize.TypeAndSize, null), /*#__PURE__*/_react.default.createElement(_CreatedOn.CreatedOn, null));
+};
+exports.PreviewMeta = PreviewMeta;

package/components/FileDetails/components/PreviewMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PreviewMetaWrapper","styled","PreviewMeta"],"sources":["PreviewMeta.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { TypeAndSize } from \"./TypeAndSize\";\nimport { CreatedOn } from \"./CreatedOn\";\n\nconst PreviewMetaWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px;\n    border-top: 1px solid var(--mdc-theme-on-background);\n`;\n\nexport const PreviewMeta = () => {\n    return (\n        <PreviewMetaWrapper>\n            <TypeAndSize />\n            <CreatedOn />\n        </PreviewMetaWrapper>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEA,IAAMA,kBAAkB,oBAAGC,eAAM;EAAA;EAAA;AAAA,oIAMhC;AAEM,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;EAC7B,oBACI,6BAAC,kBAAkB,qBACf,6BAAC,wBAAW,OAAG,eACf,6BAAC,oBAAS,OAAG,CACI;AAE7B,CAAC;AAAC"}

package/components/FileDetails/components/Tags.d.ts

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

package/components/FileDetails/components/Tags.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tags = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AutoComplete = require("@webiny/ui/AutoComplete");
+var _form = require("@webiny/form");
+var _ = require("../../..");
+var Tags = function Tags() {
+  var _useFile = (0, _.useFile)(),
+    file = _useFile.file;
+  var _useFileManagerApi = (0, _.useFileManagerApi)(),
+    canEdit = _useFileManagerApi.canEdit;
+  var _useFileManagerView = (0, _.useFileManagerView)(),
+    tags = _useFileManagerView.tags;
+  var bind = (0, _form.useBind)({
+    name: "tags"
+  });
+  return /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bind, {
+    value: (bind.value || []).filter(function (tag) {
+      return !tag.startsWith("mime:");
+    }),
+    options: tags.allTags.map(function (tagItem) {
+      return tagItem.tag;
+    }),
+    label: "Tags",
+    description: "Type in a new tag or select an existing one.",
+    unique: true,
+    allowFreeInput: true,
+    useSimpleValues: true,
+    disabled: !canEdit(file)
+  }));
+};
+exports.Tags = Tags;

package/components/FileDetails/components/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tags","useFile","file","useFileManagerApi","canEdit","useFileManagerView","tags","bind","useBind","name","value","filter","tag","startsWith","allTags","map","tagItem"],"sources":["Tags.tsx"],"sourcesContent":["import React from \"react\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { useBind } from \"@webiny/form\";\nimport { useFile, useFileManagerApi, useFileManagerView } from \"~/index\";\n\nexport const Tags = () => {\n    const { file } = useFile();\n    const { canEdit } = useFileManagerApi();\n    const { tags } = useFileManagerView();\n\n    const bind = useBind<string[]>({\n        name: \"tags\"\n    });\n\n    return (\n        <MultiAutoComplete\n            {...bind}\n            value={(bind.value || []).filter(tag => !tag.startsWith(\"mime:\"))}\n            options={tags.allTags.map(tagItem => tagItem.tag)}\n            label={\"Tags\"}\n            description={\"Type in a new tag or select an existing one.\"}\n            unique={true}\n            allowFreeInput={true}\n            useSimpleValues={true}\n            disabled={!canEdit(file)}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG,SAAPA,IAAI,GAAS;EACtB,eAAiB,IAAAC,SAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,yBAAoB,IAAAC,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EACf,0BAAiB,IAAAC,oBAAkB,GAAE;IAA7BC,IAAI,uBAAJA,IAAI;EAEZ,IAAMC,IAAI,GAAG,IAAAC,aAAO,EAAW;IAC3BC,IAAI,EAAE;EACV,CAAC,CAAC;EAEF,oBACI,6BAAC,+BAAiB,oBACVF,IAAI;IACR,KAAK,EAAE,CAACA,IAAI,CAACG,KAAK,IAAI,EAAE,EAAEC,MAAM,CAAC,UAAAC,GAAG;MAAA,OAAI,CAACA,GAAG,CAACC,UAAU,CAAC,OAAO,CAAC;IAAA,EAAE;IAClE,OAAO,EAAEP,IAAI,CAACQ,OAAO,CAACC,GAAG,CAAC,UAAAC,OAAO;MAAA,OAAIA,OAAO,CAACJ,GAAG;IAAA,EAAE;IAClD,KAAK,EAAE,MAAO;IACd,WAAW,EAAE,8CAA+C;IAC5D,MAAM,EAAE,IAAK;IACb,cAAc,EAAE,IAAK;IACrB,eAAe,EAAE,IAAK;IACtB,QAAQ,EAAE,CAACR,OAAO,CAACF,IAAI;EAAE,GAC3B;AAEV,CAAC;AAAC"}

package/components/FileDetails/components/Thumbnail.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * This component is used in the file grid to render thumbnails, as well as in the File Details preview.
+ */
+export declare const Thumbnail: () => JSX.Element;

package/components/FileDetails/components/Thumbnail.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Thumbnail = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _getFileTypePlugin = _interopRequireDefault(require("../../../getFileTypePlugin"));
+var _useFile2 = require("../../../hooks/useFile");
+/**
+ * This component is used in the file grid to render thumbnails, as well as in the File Details preview.
+ */
+var Thumbnail = function Thumbnail() {
+  var _useFile = (0, _useFile2.useFile)(),
+    file = _useFile.file;
+  var filePlugin = (0, _getFileTypePlugin.default)(file);
+
+  // TODO: implement preview rendering using component composition
+
+  return filePlugin ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filePlugin.render({
+    file: file,
+    width: 600
+  })) : /*#__PURE__*/_react.default.createElement("span", null, "No Preview Available.");
+};
+exports.Thumbnail = Thumbnail;

package/components/FileDetails/components/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Thumbnail","useFile","file","filePlugin","getFileTypePlugin","render","width"],"sources":["Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport getFileTypePlugin from \"~/getFileTypePlugin\";\nimport { useFile } from \"~/hooks/useFile\";\n\n/**\n * This component is used in the file grid to render thumbnails, as well as in the File Details preview.\n */\nexport const Thumbnail = () => {\n    const { file } = useFile();\n    const filePlugin = getFileTypePlugin(file);\n\n    // TODO: implement preview rendering using component composition\n\n    return filePlugin ? (\n        <>{filePlugin.render({ file, width: 600 })}</>\n    ) : (\n        <span>No Preview Available.</span>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC3B,eAAiB,IAAAC,iBAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,IAAMC,UAAU,GAAG,IAAAC,0BAAiB,EAACF,IAAI,CAAC;;EAE1C;;EAEA,OAAOC,UAAU,gBACb,4DAAGA,UAAU,CAACE,MAAM,CAAC;IAAEH,IAAI,EAAJA,IAAI;IAAEI,KAAK,EAAE;EAAI,CAAC,CAAC,CAAI,gBAE9C,2CAAM,uBAAqB,CAC9B;AACL,CAAC;AAAC"}

package/components/FileDetails/components/TypeAndSize.d.ts

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

package/components/FileDetails/components/TypeAndSize.js

@@ -0,0 +1,45 @@
+"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.TypeAndSize = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _bytes = _interopRequireDefault(require("bytes"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+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 _Icon = require("@webiny/ui/Icon");
+var _Typography = require("@webiny/ui/Typography");
+var _useFile2 = require("../../../hooks/useFile");
+var TypeAndSizeWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "TypeAndSizeWrapper",
+  target: "eyyrjdi0"
+})("display:flex;align-items:center;");
+var InlineIcon = /*#__PURE__*/(0, _styled.default)(_Icon.Icon, {
+  label: "InlineIcon",
+  target: "eyyrjdi1"
+})("margin-right:5px;&.mdc-button__icon{display:inline;fill:var(--mdc-theme-text-secondary-on-background);}");
+var TypeAndSize = function TypeAndSize() {
+  var _useFile = (0, _useFile2.useFile)(),
+    file = _useFile.file;
+  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(TypeAndSizeWrapper, null, /*#__PURE__*/_react.default.createElement(InlineIcon, {
+    icon: fileTypeIcon
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "caption"
+  }, file.type), /*#__PURE__*/_react.default.createElement("span", null, "\xA0-\xA0"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "caption",
+    tag: "span"
+  }, _bytes.default.format(file.size, {
+    unitSeparator: " "
+  })));
+};
+exports.TypeAndSize = TypeAndSize;

package/components/FileDetails/components/TypeAndSize.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TypeAndSizeWrapper","styled","InlineIcon","Icon","TypeAndSize","useFile","file","fileTypeIcon","useMemo","type","includes","bytes","format","size","unitSeparator"],"sources":["TypeAndSize.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport bytes from \"bytes\";\nimport styled from \"@emotion/styled\";\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 { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { useFile } from \"~/hooks/useFile\";\n\nconst TypeAndSizeWrapper = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\nconst InlineIcon = styled(Icon)`\n    margin-right: 5px;\n    &.mdc-button__icon {\n        display: inline;\n        fill: var(--mdc-theme-text-secondary-on-background);\n    }\n`;\n\nexport const TypeAndSize = () => {\n    const { file } = useFile();\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        <TypeAndSizeWrapper>\n            <InlineIcon icon={fileTypeIcon} />\n            <Typography use={\"caption\"}>{file.type}</Typography>\n            <span>&nbsp;-&nbsp;</span>\n            <Typography use={\"caption\"} tag={\"span\"}>\n                {bytes.format(file.size, {\n                    unitSeparator: \" \"\n                })}\n            </Typography>\n        </TypeAndSizeWrapper>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,kBAAkB,oBAAGC,eAAM;EAAA;EAAA;AAAA,sCAGhC;AAED,IAAMC,UAAU,oBAAGD,eAAM,EAACE,UAAI;EAAA;EAAA;AAAA,6GAM7B;AAEM,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;EAC7B,eAAiB,IAAAC,iBAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EAEZ,IAAMC,YAAY,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC/B,IAAIF,IAAI,IAAI,OAAOA,IAAI,CAACG,IAAI,KAAK,QAAQ,EAAE;MACvC,OAAOH,IAAI,CAACG,IAAI,CAACC,QAAQ,CAAC,OAAO,CAAC,gBAAG,6BAAC,4BAAS,OAAG,gBAAG,6BAAC,iCAAQ,OAAG;IACrE;IACA,oBAAO,6BAAC,4BAAS,OAAG;EACxB,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;EAEV,oBACI,6BAAC,kBAAkB,qBACf,6BAAC,UAAU;IAAC,IAAI,EAAEC;EAAa,EAAG,eAClC,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAU,GAAED,IAAI,CAACG,IAAI,CAAc,eACpD,2CAAM,WAAa,CAAO,eAC1B,6BAAC,sBAAU;IAAC,GAAG,EAAE,SAAU;IAAC,GAAG,EAAE;EAAO,GACnCE,cAAK,CAACC,MAAM,CAACN,IAAI,CAACO,IAAI,EAAE;IACrBC,aAAa,EAAE;EACnB,CAAC,CAAC,CACO,CACI;AAE7B,CAAC;AAAC"}

package/components/FileDetails/components/actions/CopyUrl.d.ts

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

package/components/FileDetails/components/actions/CopyUrl.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CopyUrl = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _content_copy = require("@material-design-icons/svg/outlined/content_copy.svg");
+var _Button = require("@webiny/ui/Button");
+var _Tooltip = require("@webiny/ui/Tooltip");
+var _useCopyFile2 = require("../../../../hooks/useCopyFile");
+var _useFile2 = require("../../../../hooks/useFile");
+var CopyUrl = function CopyUrl() {
+  var _useFile = (0, _useFile2.useFile)(),
+    file = _useFile.file;
+  var _useCopyFile = (0, _useCopyFile2.useCopyFile)({
+      file: file
+    }),
+    copyFileUrl = _useCopyFile.copyFileUrl;
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement("span", null, "Copy URL"),
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    onClick: copyFileUrl,
+    icon: /*#__PURE__*/_react.default.createElement(_content_copy.ReactComponent, {
+      style: {
+        margin: "0 8px 0 0"
+      }
+    })
+  }));
+};
+exports.CopyUrl = CopyUrl;

package/components/FileDetails/components/actions/CopyUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CopyUrl","useFile","file","useCopyFile","copyFileUrl","margin"],"sources":["CopyUrl.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CopyContentIcon } from \"@material-design-icons/svg/outlined/content_copy.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { useCopyFile } from \"~/hooks/useCopyFile\";\nimport { useFile } from \"~/hooks/useFile\";\n\nexport const CopyUrl = () => {\n    const { file } = useFile();\n    const { copyFileUrl } = useCopyFile({ file });\n\n    return (\n        <Tooltip content={<span>Copy URL</span>} placement={\"bottom\"}>\n            <IconButton\n                onClick={copyFileUrl}\n                icon={<CopyContentIcon style={{ margin: \"0 8px 0 0\" }} />}\n            />\n        </Tooltip>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,OAAO,GAAG,SAAVA,OAAO,GAAS;EACzB,eAAiB,IAAAC,iBAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,mBAAwB,IAAAC,yBAAW,EAAC;MAAED,IAAI,EAAJA;IAAK,CAAC,CAAC;IAArCE,WAAW,gBAAXA,WAAW;EAEnB,oBACI,6BAAC,gBAAO;IAAC,OAAO,eAAE,2CAAM,UAAQ,CAAQ;IAAC,SAAS,EAAE;EAAS,gBACzD,6BAAC,kBAAU;IACP,OAAO,EAAEA,WAAY;IACrB,IAAI,eAAE,6BAAC,4BAAe;MAAC,KAAK,EAAE;QAAEC,MAAM,EAAE;MAAY;IAAE;EAAI,EAC5D,CACI;AAElB,CAAC;AAAC"}

package/components/FileDetails/components/actions/DeleteImage.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface DeleteImageProps {
+    onDelete?: () => void;
+}
+export declare const DeleteImage: React.VFC<DeleteImageProps>;
+export {};

package/components/FileDetails/components/actions/DeleteImage.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteImage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mime = _interopRequireDefault(require("mime"));
+var _Tooltip = require("@webiny/ui/Tooltip");
+var _Button = require("@webiny/ui/Button");
+var _delete = require("@material-design-icons/svg/outlined/delete.svg");
+var _ = require("../../../..");
+var _useDeleteFile2 = require("../../../../hooks/useDeleteFile");
+var isImage = function isImage(file) {
+  var fileType = _mime.default.getType(file && file.name);
+  if (fileType) {
+    return fileType.includes("image");
+  }
+  return false;
+};
+var DeleteImage = function DeleteImage() {
+  var _useFile = (0, _.useFile)(),
+    file = _useFile.file;
+  var _useFileManagerApi = (0, _.useFileManagerApi)(),
+    canEdit = _useFileManagerApi.canEdit;
+  var _useFileDetails = (0, _.useFileDetails)(),
+    close = _useFileDetails.close;
+  var _useDeleteFile = (0, _useDeleteFile2.useDeleteFile)({
+      file: file,
+      onDelete: close
+    }),
+    openDialogDeleteFile = _useDeleteFile.openDialogDeleteFile;
+  if (!canEdit(file)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: isImage(file) ? /*#__PURE__*/_react.default.createElement("span", null, "Delete image") : /*#__PURE__*/_react.default.createElement("span", null, "Delete file"),
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    "data-testid": "fm-delete-file-button",
+    icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, {
+      style: {
+        margin: "0 8px 0 0"
+      }
+    }),
+    onClick: openDialogDeleteFile
+  }));
+};
+exports.DeleteImage = DeleteImage;

package/components/FileDetails/components/actions/DeleteImage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isImage","file","fileType","mime","getType","name","includes","DeleteImage","useFile","useFileManagerApi","canEdit","useFileDetails","close","useDeleteFile","onDelete","openDialogDeleteFile","margin"],"sources":["DeleteImage.tsx"],"sourcesContent":["import React from \"react\";\nimport mime from \"mime\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete.svg\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { useFile, useFileDetails, useFileManagerApi } from \"~/index\";\nimport { useDeleteFile } from \"~/hooks/useDeleteFile\";\n\ninterface DeleteImageProps {\n    onDelete?: () => void;\n}\n\nconst isImage = (file: FileItem) => {\n    const fileType = mime.getType(file && file.name);\n\n    if (fileType) {\n        return fileType.includes(\"image\");\n    }\n\n    return false;\n};\n\nexport const DeleteImage: React.VFC<DeleteImageProps> = () => {\n    const { file } = useFile();\n    const { canEdit } = useFileManagerApi();\n    const { close } = useFileDetails();\n    const { openDialogDeleteFile } = useDeleteFile({\n        file,\n        onDelete: close\n    });\n\n    if (!canEdit(file)) {\n        return null;\n    }\n\n    return (\n        <Tooltip\n            content={isImage(file) ? <span>Delete image</span> : <span>Delete file</span>}\n            placement={\"bottom\"}\n        >\n            <IconButton\n                data-testid={\"fm-delete-file-button\"}\n                icon={<DeleteIcon style={{ margin: \"0 8px 0 0\" }} />}\n                onClick={openDialogDeleteFile}\n            />\n        </Tooltip>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAMA,IAAMA,OAAO,GAAG,SAAVA,OAAO,CAAIC,IAAc,EAAK;EAChC,IAAMC,QAAQ,GAAGC,aAAI,CAACC,OAAO,CAACH,IAAI,IAAIA,IAAI,CAACI,IAAI,CAAC;EAEhD,IAAIH,QAAQ,EAAE;IACV,OAAOA,QAAQ,CAACI,QAAQ,CAAC,OAAO,CAAC;EACrC;EAEA,OAAO,KAAK;AAChB,CAAC;AAEM,IAAMC,WAAwC,GAAG,SAA3CA,WAAwC,GAAS;EAC1D,eAAiB,IAAAC,SAAO,GAAE;IAAlBP,IAAI,YAAJA,IAAI;EACZ,yBAAoB,IAAAQ,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EACf,sBAAkB,IAAAC,gBAAc,GAAE;IAA1BC,KAAK,mBAALA,KAAK;EACb,qBAAiC,IAAAC,6BAAa,EAAC;MAC3CZ,IAAI,EAAJA,IAAI;MACJa,QAAQ,EAAEF;IACd,CAAC,CAAC;IAHMG,oBAAoB,kBAApBA,oBAAoB;EAK5B,IAAI,CAACL,OAAO,CAACT,IAAI,CAAC,EAAE;IAChB,OAAO,IAAI;EACf;EAEA,oBACI,6BAAC,gBAAO;IACJ,OAAO,EAAED,OAAO,CAACC,IAAI,CAAC,gBAAG,2CAAM,cAAY,CAAO,gBAAG,2CAAM,aAAW,CAAQ;IAC9E,SAAS,EAAE;EAAS,gBAEpB,6BAAC,kBAAU;IACP,eAAa,uBAAwB;IACrC,IAAI,eAAE,6BAAC,sBAAU;MAAC,KAAK,EAAE;QAAEe,MAAM,EAAE;MAAY;IAAE,EAAI;IACrD,OAAO,EAAED;EAAqB,EAChC,CACI;AAElB,CAAC;AAAC"}

package/components/FileDetails/components/actions/Download.d.ts

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