@webiny/app-file-manager 5.37.0-beta.0 → 5.37.0-beta.2

package/components/FileDetails/components/Aliases.js

@@ -0,0 +1,107 @@
+"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.Aliases = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _DynamicFieldset = require("@webiny/ui/DynamicFieldset");
+var _Input = require("@webiny/ui/Input");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Typography = require("@webiny/ui/Typography");
+var _Button = require("@webiny/ui/Button");
+var _validation = require("@webiny/validation");
+var _form = require("@webiny/form");
+var _delete = require("@material-design-icons/svg/outlined/delete.svg");
+var Fieldset = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eff9pp30",
+  label: "Fieldset"
+})({
+  position: "relative",
+  width: "100%",
+  marginBottom: 15,
+  ".webiny-ui-button": {
+    position: "absolute",
+    display: "block",
+    right: 10,
+    top: 13
+  }
+});
+var Header = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eff9pp31",
+  label: "Header"
+})({
+  display: "flex",
+  justifyContent: "space-between"
+});
+var DeleteAliasButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
+  label: "DeleteAliasButton",
+  target: "eff9pp32"
+})("position:absolute;top:5px;right:5px;");
+var FileAliasMessage = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "FileAliasMessage",
+  target: "eff9pp33"
+})("color:var(--mdc-theme-text-secondary-on-background);font-size:12px;");
+var PATHNAME_REGEX = /^\/[/.a-zA-Z0-9-]+$/;
+var Aliases = function Aliases() {
+  var _useBind = (0, _form.useBind)({
+      name: "aliases"
+    }),
+    value = _useBind.value,
+    onChange = _useBind.onChange;
+  var addAlias = function addAlias() {
+    var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+    newValue.push("");
+    if (!onChange) {
+      return;
+    }
+    onChange(newValue);
+  };
+  var aliasValidator = (0, _react.useMemo)(function () {
+    return [_validation.validation.create("required"), function (value) {
+      if (!PATHNAME_REGEX.test(value)) {
+        throw new Error("Value must be a valid pathname.");
+      }
+    }];
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_DynamicFieldset.DynamicFieldset, {
+    value: value || [""],
+    onChange: onChange
+  }, function (_ref) {
+    var actions = _ref.actions,
+      header = _ref.header,
+      row = _ref.row,
+      empty = _ref.empty;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, row(function (_ref2) {
+      var index = _ref2.index;
+      return /*#__PURE__*/_react.default.createElement(Fieldset, null, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+        validators: aliasValidator,
+        name: "aliases.".concat(index)
+      }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+        placeholder: "Alias",
+        description: "Enter a file path, e.g., /my/custom/file/path.png"
+      })), /*#__PURE__*/_react.default.createElement(DeleteAliasButton, {
+        icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null),
+        onClick: actions.remove(index)
+      }));
+    }), empty(function () {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "overline"
+      }, "File Aliases"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+        onClick: addAlias
+      }, "+ Add Alias")), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "caption"
+      }, /*#__PURE__*/_react.default.createElement(FileAliasMessage, null, "To make your file accessible via custom paths, add one or more aliases.")));
+    }), header(function () {
+      return /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "overline"
+      }, "File Aliases"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+        onClick: addAlias
+      }, "+ Add Alias"));
+    }));
+  });
+};
+exports.Aliases = Aliases;

package/components/FileDetails/components/Aliases.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_DynamicFieldset","_Input","_styled","_interopRequireDefault","_Typography","_Button","_validation","_form","_delete","Fieldset","styled","target","label","position","width","marginBottom","display","right","top","Header","justifyContent","DeleteAliasButton","IconButton","FileAliasMessage","PATHNAME_REGEX","Aliases","_useBind","useBind","name","value","onChange","addAlias","newValue","Array","isArray","_toConsumableArray2","default","push","aliasValidator","useMemo","validation","create","test","Error","createElement","DynamicFieldset","_ref","actions","header","row","empty","Fragment","_ref2","index","Bind","validators","concat","Input","placeholder","description","icon","ReactComponent","onClick","remove","Typography","use","ButtonDefault","exports"],"sources":["Aliases.tsx"],"sourcesContent":["import React, { Fragment, useMemo } from \"react\";\nimport { DynamicFieldset } from \"@webiny/ui/DynamicFieldset\";\nimport { Input } from \"@webiny/ui/Input\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { validation } from \"@webiny/validation\";\nimport { Bind, useBind } from \"@webiny/form\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete.svg\";\n\nconst Fieldset = styled(\"div\")({\n    position: \"relative\",\n    width: \"100%\",\n    marginBottom: 15,\n    \".webiny-ui-button\": {\n        position: \"absolute\",\n        display: \"block\",\n        right: 10,\n        top: 13\n    }\n});\n\nconst Header = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\"\n});\n\nconst DeleteAliasButton = styled(IconButton)`\n    position: absolute;\n    top: 5px;\n    right: 5px;\n`;\n\nconst FileAliasMessage = styled(\"span\")`\n    color: var(--mdc-theme-text-secondary-on-background);\n    font-size: 12px;\n`;\n\nconst PATHNAME_REGEX = /^\\/[/.a-zA-Z0-9-]+$/;\n\nexport const Aliases = () => {\n    const { value, onChange } = useBind<string[]>({ name: \"aliases\" });\n\n    const addAlias = () => {\n        const newValue = Array.isArray(value) ? [...value] : [];\n        newValue.push(\"\");\n        if (!onChange) {\n            return;\n        }\n        onChange(newValue);\n    };\n\n    const aliasValidator = useMemo(() => {\n        return [\n            validation.create(\"required\"),\n            (value: string) => {\n                if (!PATHNAME_REGEX.test(value)) {\n                    throw new Error(\"Value must be a valid pathname.\");\n                }\n            }\n        ];\n    }, []);\n\n    return (\n        <DynamicFieldset value={value || [\"\"]} onChange={onChange}>\n            {({ actions, header, row, empty }) => (\n                <>\n                    {row(({ index }) => (\n                        <Fieldset>\n                            <Bind validators={aliasValidator} name={`aliases.${index}`}>\n                                <Input\n                                    placeholder={\"Alias\"}\n                                    description={\n                                        \"Enter a file path, e.g., /my/custom/file/path.png\"\n                                    }\n                                />\n                            </Bind>\n                            <DeleteAliasButton\n                                icon={<DeleteIcon />}\n                                onClick={actions.remove(index)}\n                            />\n                        </Fieldset>\n                    ))}\n                    {empty(() => (\n                        <Fragment>\n                            <Header>\n                                <Typography use={\"overline\"}>File Aliases</Typography>\n                                <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>\n                            </Header>\n                            <Typography use={\"caption\"}>\n                                <FileAliasMessage>\n                                    To make your file accessible via custom paths, add one or more\n                                    aliases.\n                                </FileAliasMessage>\n                            </Typography>\n                        </Fragment>\n                    ))}\n                    {header(() => (\n                        <Header>\n                            <Typography use={\"overline\"}>File Aliases</Typography>\n                            <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>\n                        </Header>\n                    ))}\n                </>\n            )}\n        </DynamicFieldset>\n    );\n};\n"],"mappings":"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"}

package/components/FileDetails/components/BaseFields.d.ts

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

package/components/FileDetails/components/BaseFields.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseFields = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _appAdmin = require("@webiny/app-admin");
+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 BaseFields = function BaseFields(_ref) {
+  var model = _ref.model;
+  var fields = (0, _react.useMemo)(function () {
+    return model.fields.filter(function (f) {
+      return f.fieldId !== "extensions";
+    });
+  }, [model]);
+  return /*#__PURE__*/_react.default.createElement(_appAdmin.CompositionScope, {
+    name: "fm.fileDetails.baseFields"
+  }, /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+    model: model
+  }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+    contentModel: model,
+    Bind: _form.Bind,
+    fields: fields,
+    layout: model.layout || []
+  })));
+};
+exports.BaseFields = BaseFields;

package/components/FileDetails/components/BaseFields.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_appAdmin","_ModelProvider","_Fields","_form","BaseFields","_ref","model","fields","useMemo","filter","f","fieldId","default","createElement","CompositionScope","name","ModelProvider","Fields","contentModel","Bind","layout","exports"],"sources":["BaseFields.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport { CmsModel } from \"@webiny/app-headless-cms/types\";\nimport { ModelProvider } from \"@webiny/app-headless-cms/admin/components/ModelProvider\";\nimport { Fields } from \"@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields\";\nimport { Bind } from \"@webiny/form\";\n\ninterface BaseFieldsProps {\n    model: CmsModel;\n}\n\nexport const BaseFields = ({ model }: BaseFieldsProps) => {\n    const fields = useMemo(() => {\n        return model.fields.filter(f => f.fieldId !== \"extensions\");\n    }, [model]);\n\n    return (\n        <CompositionScope name={\"fm.fileDetails.baseFields\"}>\n            <ModelProvider model={model}>\n                <Fields\n                    contentModel={model}\n                    Bind={Bind as any}\n                    fields={fields}\n                    layout={model.layout || []}\n                />\n            </ModelProvider>\n        </CompositionScope>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAMO,IAAMK,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAmC;EAAA,IAA7BC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAC9B,IAAMC,MAAM,GAAG,IAAAC,cAAO,EAAC,YAAM;IACzB,OAAOF,KAAK,CAACC,MAAM,CAACE,MAAM,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,OAAO,KAAK,YAAY;IAAA,EAAC;EAC/D,CAAC,EAAE,CAACL,KAAK,CAAC,CAAC;EAEX,oBACIT,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,SAAA,CAAAc,gBAAgB;IAACC,IAAI,EAAE;EAA4B,gBAChDlB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,cAAA,CAAAe,aAAa;IAACV,KAAK,EAAEA;EAAM,gBACxBT,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACX,OAAA,CAAAe,MAAM;IACHC,YAAY,EAAEZ,KAAM;IACpBa,IAAI,EAAEA,UAAY;IAClBZ,MAAM,EAAEA,MAAO;IACfa,MAAM,EAAEd,KAAK,CAACc,MAAM,IAAI;EAAG,CAC9B,CACU,CACD,CAAC;AAE3B,CAAC;AAACC,OAAA,CAAAjB,UAAA,GAAAA,UAAA"}

package/components/FileDetails/components/Content.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface ContentProps {
+    children: React.ReactNode;
+}
+export declare const Content: {
+    ({ children }: ContentProps): JSX.Element;
+    Panel: ({ children }: PanelProps) => JSX.Element;
+};
+interface PanelProps {
+    children: React.ReactNode;
+}
+export {};

package/components/FileDetails/components/Content.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Content = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireDefault(require("react"));
+var Horizontal = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Horizontal",
+  target: "echkhvn0"
+})("display:flex;height:calc(100vh - 160px);");
+var Grow = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Grow",
+  target: "echkhvn1"
+})("flex:1;:last-of-type{border-left:1px solid var(--mdc-theme-on-background);}");
+var Content = function Content(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(Horizontal, null, children);
+};
+exports.Content = Content;
+var Panel = function Panel(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(Grow, {
+    "data-role": "panel"
+  }, children);
+};
+Content.Panel = Panel;

package/components/FileDetails/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_styled","_interopRequireDefault","require","_react","Horizontal","styled","label","target","Grow","Content","_ref","children","default","createElement","exports","Panel","_ref2"],"sources":["Content.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\n\nconst Horizontal = styled.div`\n    display: flex;\n    height: calc(100vh - 160px);\n`;\n\nconst Grow = styled.div`\n    flex: 1;\n    :last-of-type {\n        border-left: 1px solid var(--mdc-theme-on-background);\n    }\n`;\n\ninterface ContentProps {\n    children: React.ReactNode;\n}\n\nexport const Content = ({ children }: ContentProps) => {\n    return <Horizontal>{children}</Horizontal>;\n};\n\ninterface PanelProps {\n    children: React.ReactNode;\n}\n\nconst Panel = ({ children }: PanelProps) => {\n    return <Grow data-role={\"panel\"}>{children}</Grow>;\n};\n\nContent.Panel = Panel;\n"],"mappings":";;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAME,UAAU,oBAAGC,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,8CAGxB;AAED,IAAMC,IAAI,oBAAGH,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,iFAKlB;AAMM,IAAME,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAAmC;EAAA,IAA7BC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAC9B,oBAAOR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACT,UAAU,QAAEO,QAAqB,CAAC;AAC9C,CAAC;AAACG,OAAA,CAAAL,OAAA,GAAAA,OAAA;AAMF,IAAMM,KAAK,GAAG,SAARA,KAAKA,CAAAC,KAAA,EAAiC;EAAA,IAA3BL,QAAQ,GAAAK,KAAA,CAARL,QAAQ;EACrB,oBAAOR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACL,IAAI;IAAC,aAAW;EAAQ,GAAEG,QAAe,CAAC;AACtD,CAAC;AAEDF,OAAO,CAACM,KAAK,GAAGA,KAAK"}

package/components/FileDetails/components/CreatedOn.d.ts

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

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":["_react","_interopRequireDefault","require","_dayjs","_today","_Icon","_Typography","_styled","_useFile2","CreatedOnWrapper","styled","label","target","InlineIcon","Icon","CreatedOn","_useFile","useFile","file","default","createElement","icon","ReactComponent","Typography","use","tag","dayjs","createdOn","format","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AAEA,IAAMO,gBAAgB,oBAAGC,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,sCAG9B;AAED,IAAMC,UAAU,oBAAGH,eAAM,EAACI,UAAI;EAAAH,KAAA;EAAAC,MAAA;AAAA,6GAM7B;AAEM,IAAMG,SAAS,GAAG,SAAZA,SAASA,CAAA,EAAS;EAC3B,IAAAC,QAAA,GAAiB,IAAAC,iBAAO,EAAC,CAAC;IAAlBC,IAAI,GAAAF,QAAA,CAAJE,IAAI;EAEZ,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACX,gBAAgB,qBACbT,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACP,UAAU;IAACQ,IAAI,eAAErB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAAChB,MAAA,CAAAkB,cAAY,MAAE;EAAE,CAAE,CAAC,eACtCtB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACd,WAAA,CAAAiB,UAAU;IAACC,GAAG,EAAE,SAAU;IAACC,GAAG,EAAE;EAAO,GACnC,IAAAC,cAAK,EAACR,IAAI,CAACS,SAAS,CAAC,CAACC,MAAM,CAAC,wBAAwB,CAC9C,CACE,CAAC;AAE3B,CAAC;AAACC,OAAA,CAAAd,SAAA,GAAAA,SAAA"}

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,59 @@
+"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 _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireWildcard(require("react"));
+var _appAdmin = require("@webiny/app-admin");
+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 HideEmptyCells = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "HideEmptyCells",
+  target: "emim0ei0"
+})(".mdc-layout-grid__cell:empty{display:none;}");
+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(_appAdmin.CompositionScope, {
+    name: "fm.fileDetails.extensionFields"
+  }, /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+    model: model
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: value,
+    onChange: onChange
+  }, function () {
+    return /*#__PURE__*/_react.default.createElement(HideEmptyCells, null, /*#__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":["_styled","_interopRequireDefault","require","_react","_interopRequireWildcard","_appAdmin","_ModelProvider","_Fields","_form","HideEmptyCells","styled","label","target","Extensions","_ref","_extensionsField$sett","_extensionsField$sett2","model","extensionsField","useMemo","fields","find","f","fieldId","settings","layout","length","push","apply","_toConsumableArray2","default","map","field","_useBind","useBind","name","value","onChange","createElement","CompositionScope","ModelProvider","Form","data","Fields","contentModel","Bind","exports"],"sources":["Extensions.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React, { useMemo } from \"react\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport { CmsModel } from \"@webiny/app-headless-cms/types\";\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\nconst HideEmptyCells = styled.div`\n    .mdc-layout-grid__cell:empty {\n        display: none;\n    }\n`;\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        <CompositionScope name={\"fm.fileDetails.extensionFields\"}>\n            <ModelProvider model={model}>\n                <Form data={value} onChange={onChange}>\n                    {() => (\n                        <HideEmptyCells>\n                            <Fields\n                                contentModel={model}\n                                Bind={Bind as any}\n                                fields={fields}\n                                layout={layout}\n                            />\n                        </HideEmptyCells>\n                    )}\n                </Form>\n            </ModelProvider>\n        </CompositionScope>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAMO,cAAc,oBAAGC,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,iDAI5B;AAMM,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAmC;EAAA,IAAAC,qBAAA,EAAAC,sBAAA;EAAA,IAA7BC,KAAK,GAAAH,IAAA,CAALG,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,EAAAL,qBAAA,GAAAG,eAAe,CAACM,QAAQ,cAAAT,qBAAA,uBAAxBA,qBAAA,CAA0BK,MAAM,KAAI,EAAE;EACrD,IAAMK,MAAM,GAAG,EAAAT,sBAAA,GAAAE,eAAe,CAACM,QAAQ,cAAAR,sBAAA,uBAAxBA,sBAAA,CAA0BS,MAAM,KAAI,EAAE;EAErD,IAAI,CAACA,MAAM,CAACC,MAAM,EAAE;IAChBD,MAAM,CAACE,IAAI,CAAAC,KAAA,CAAXH,MAAM,MAAAI,mBAAA,CAAAC,OAAA,EAASV,MAAM,CAACW,GAAG,CAAC,UAAAC,KAAK;MAAA,OAAI,CAACA,KAAK,CAACT,OAAO,CAAC;IAAA,EAAC,EAAC;EACxD;EAEA,IAAAU,QAAA,GAA4B,IAAAC,aAAO,EAAC;MAChCC,IAAI,EAAE;IACV,CAAC,CAAC;IAFMC,KAAK,GAAAH,QAAA,CAALG,KAAK;IAAEC,QAAQ,GAAAJ,QAAA,CAARI,QAAQ;EAIvB,oBACIlC,MAAA,CAAA2B,OAAA,CAAAQ,aAAA,CAACjC,SAAA,CAAAkC,gBAAgB;IAACJ,IAAI,EAAE;EAAiC,gBACrDhC,MAAA,CAAA2B,OAAA,CAAAQ,aAAA,CAAChC,cAAA,CAAAkC,aAAa;IAACvB,KAAK,EAAEA;EAAM,gBACxBd,MAAA,CAAA2B,OAAA,CAAAQ,aAAA,CAAC9B,KAAA,CAAAiC,IAAI;IAACC,IAAI,EAAEN,KAAM;IAACC,QAAQ,EAAEA;EAAS,GACjC;IAAA,oBACGlC,MAAA,CAAA2B,OAAA,CAAAQ,aAAA,CAAC7B,cAAc,qBACXN,MAAA,CAAA2B,OAAA,CAAAQ,aAAA,CAAC/B,OAAA,CAAAoC,MAAM;MACHC,YAAY,EAAE3B,KAAM;MACpB4B,IAAI,EAAEA,UAAY;MAClBzB,MAAM,EAAEA,MAAO;MACfK,MAAM,EAAEA;IAAO,CAClB,CACW,CAAC;EAAA,CAEnB,CACK,CACD,CAAC;AAE3B,CAAC;AAACqB,OAAA,CAAAjC,UAAA,GAAAA,UAAA"}

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":["_styled","_interopRequireDefault","require","_react","Row","styled","label","target","Column","FlexRow","_ref","children","default","createElement","exports","FlexColumn","_ref2"],"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,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAME,GAAG,oBAAGC,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,sCAGjB;AAED,IAAMC,MAAM,oBAAGH,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,kBAEpB;AAEM,IAAME,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAAoD;EAAA,IAA9CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAC9B,oBAAOR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACT,GAAG,QAAEO,QAAc,CAAC;AAChC,CAAC;AAACG,OAAA,CAAAL,OAAA,GAAAA,OAAA;AAEK,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAAC,KAAA,EAAoD;EAAA,IAA9CL,QAAQ,GAAAK,KAAA,CAARL,QAAQ;EACjC,oBAAOR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACL,MAAM,QAAEG,QAAiB,CAAC;AACtC,CAAC;AAACG,OAAA,CAAAC,UAAA,GAAAA,UAAA"}

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":["_react","_interopRequireDefault","require","_styled","_SimpleForm","_Button","_form","_useFileDetails2","SimpleFormFooterStyled","styled","SimpleFormFooter","label","target","Footer","_useFileDetails","useFileDetails","close","form","useForm","default","createElement","ButtonDefault","onClick","ButtonPrimary","submit","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AAEA,IAAMM,sBAAsB,oBAAGC,eAAM,EAACC,4BAAgB;EAAAC,KAAA;EAAAC,MAAA;AAAA,+BAErD;AAEM,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAA,EAAS;EACxB,IAAAC,eAAA,GAAkB,IAAAC,+BAAc,EAAC,CAAC;IAA1BC,KAAK,GAAAF,eAAA,CAALE,KAAK;EACb,IAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACZ,sBAAsB,qBACnBR,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACf,OAAA,CAAAgB,aAAa;IAACC,OAAO,EAAEN;EAAM,GAAC,QAAqB,CAAC,eACrDhB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACf,OAAA,CAAAkB,aAAa;IAACD,OAAO,EAAEL,IAAI,CAACO;EAAO,GAAC,WAAwB,CACzC,CAAC;AAEjC,CAAC;AAACC,OAAA,CAAAZ,MAAA,GAAAA,MAAA"}

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":["_react","_interopRequireDefault","require","_styled","_close","_Button","_SimpleForm","_useFileDetails2","CloseButton","styled","IconButton","label","target","Header","_useFileDetails","useFileDetails","close","default","createElement","SimpleFormHeader","title","icon","ReactComponent","onClick","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AAEA,IAAMM,WAAW,oBAAGC,eAAM,EAACC,kBAAU;EAAAC,KAAA;EAAAC,MAAA;AAAA,iCAGpC;AAEM,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAA,EAAS;EACxB,IAAAC,eAAA,GAAkB,IAAAC,+BAAc,EAAC,CAAC;IAA1BC,KAAK,GAAAF,eAAA,CAALE,KAAK;EAEb,oBACIhB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACZ,WAAA,CAAAa,gBAAgB;IAACC,KAAK,EAAE;EAAe,gBACpCpB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACV,WAAW;IAACa,IAAI,eAAErB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACd,MAAA,CAAAkB,cAAS,MAAE,CAAE;IAACC,OAAO,EAAEP;EAAM,CAAE,CACrC,CAAC;AAE3B,CAAC;AAACQ,OAAA,CAAAX,MAAA,GAAAA,MAAA"}

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":["_react","_interopRequireDefault","require","_Input","_validation","_","_form","Name","_useFile","useFile","file","_useFileManagerApi","useFileManagerApi","canEdit","bind","useBind","name","validators","validation","create","default","createElement","Input","Object","assign","label","disabled","autoFocus","placeholder","description","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,CAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAEO,IAAMK,IAAI,GAAG,SAAPA,IAAIA,CAAA,EAAS;EACtB,IAAAC,QAAA,GAAiB,IAAAC,SAAO,EAAC,CAAC;IAAlBC,IAAI,GAAAF,QAAA,CAAJE,IAAI;EACZ,IAAAC,kBAAA,GAAoB,IAAAC,mBAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,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,oBACInB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAClB,MAAA,CAAAmB,KAAK,EAAAC,MAAA,CAAAC,MAAA,KACEV,IAAI;IACRW,KAAK,EAAE,MAAO;IACdC,QAAQ,EAAE,CAACb,OAAO,CAACH,IAAI,CAAE;IACzBiB,SAAS;IACTC,WAAW,EAAE,YAAa;IAC1BC,WAAW,EAAE;EAA4C,EAC5D,CAAC;AAEV,CAAC;AAACC,OAAA,CAAAvB,IAAA,GAAAA,IAAA"}

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":["_react","_interopRequireDefault","require","_Thumbnail","_styled","PreviewContainer","styled","label","target","Preview","default","createElement","Thumbnail","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,gBAAgB,oBAAGC,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,8OAW9B;AAEM,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EACzB,oBACIT,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACN,gBAAgB,qBACbL,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,UAAA,CAAAS,SAAS,MAAE,CACE,CAAC;AAE3B,CAAC;AAACC,OAAA,CAAAJ,OAAA,GAAAA,OAAA"}

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":["_react","_interopRequireDefault","require","_styled","_TypeAndSize","_CreatedOn","PreviewMetaWrapper","styled","label","target","PreviewMeta","default","createElement","TypeAndSize","CreatedOn","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAEA,IAAMI,kBAAkB,oBAAGC,eAAM;EAAAC,KAAA;EAAAC,MAAA;AAAA,oIAMhC;AAEM,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,oBACIV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACN,kBAAkB,qBACfN,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,YAAA,CAAAS,WAAW,MAAE,CAAC,eACfb,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACP,UAAA,CAAAS,SAAS,MAAE,CACI,CAAC;AAE7B,CAAC;AAACC,OAAA,CAAAL,WAAA,GAAAA,WAAA"}

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;