@webiny/app-headless-cms 0.0.0-ee-vpcs.549378cf03

package/admin/plugins/fieldRenderers/dynamicZone/TemplateCard.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateCard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _Button = require("@webiny/ui/Button");
+
+var _TemplateIcon = require("./TemplateIcon");
+
+var CardContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "CardContainer",
+  target: "e8hs6u70"
+})("display:flex;flex-direction:column;width:170px;height:200px;margin:5px;border:1px solid var(--mdc-theme-background);");
+var CardIcon = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "CardIcon",
+  target: "e8hs6u71"
+})("text-align:center;padding:25px;font-size:1.5rem;background-color:var(--mdc-theme-background);");
+var CardBody = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "CardBody",
+  target: "e8hs6u72"
+})("display:flex;flex-direction:column;flex:1;padding:10px;text-align:left;");
+var CardTitle = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "CardTitle",
+  target: "e8hs6u73"
+})("margin-bottom:10px;");
+var CardDescription = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "CardDescription",
+  target: "e8hs6u74"
+})("text-overflow:ellipsis;margin-bottom:10px;white-space:nowrap;overflow:hidden;");
+var CardButton = /*#__PURE__*/(0, _styled.default)(_Button.ButtonSecondary, {
+  label: "CardButton",
+  target: "e8hs6u75"
+})("font-size:0.7rem;line-height:100%;margin-top:auto;");
+
+var TemplateCard = function TemplateCard(_ref) {
+  var template = _ref.template,
+      onTemplate = _ref.onTemplate;
+  return /*#__PURE__*/_react.default.createElement(CardContainer, null, /*#__PURE__*/_react.default.createElement(CardIcon, null, /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
+    icon: template.icon
+  })), /*#__PURE__*/_react.default.createElement(CardBody, null, /*#__PURE__*/_react.default.createElement(CardTitle, {
+    tag: "p",
+    use: "subtitle2"
+  }, template.name), /*#__PURE__*/_react.default.createElement(CardDescription, {
+    tag: "p",
+    use: "body2"
+  }, template.description), /*#__PURE__*/_react.default.createElement(CardButton, {
+    onClick: function onClick() {
+      return onTemplate(template);
+    }
+  }, "+ Insert Template")));
+};
+
+exports.TemplateCard = TemplateCard;

package/admin/plugins/fieldRenderers/dynamicZone/TemplateCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CardContainer","styled","CardIcon","CardBody","CardTitle","Typography","CardDescription","CardButton","ButtonSecondary","TemplateCard","template","onTemplate","icon","name","description"],"sources":["TemplateCard.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { ButtonSecondary } from \"@webiny/ui/Button\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon\";\n\nconst CardContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 170px;\n    height: 200px;\n    margin: 5px;\n    border: 1px solid var(--mdc-theme-background);\n`;\n\nconst CardIcon = styled.div`\n    text-align: center;\n    padding: 25px;\n    font-size: 1.5rem;\n    background-color: var(--mdc-theme-background);\n`;\n\nconst CardBody = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding: 10px;\n    text-align: left;\n`;\n\nconst CardTitle = styled(Typography)`\n    margin-bottom: 10px;\n`;\n\nconst CardDescription = styled(Typography)`\n    text-overflow: ellipsis;\n    margin-bottom: 10px;\n    white-space: nowrap;\n    overflow: hidden;\n`;\n\nconst CardButton = styled(ButtonSecondary)`\n    font-size: 0.7rem;\n    line-height: 100%;\n    margin-top: auto;\n`;\n\ninterface TemplateCardProps {\n    template: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateCard = ({ template, onTemplate }: TemplateCardProps) => {\n    return (\n        <CardContainer>\n            <CardIcon>\n                <TemplateIcon icon={template.icon} />\n            </CardIcon>\n            <CardBody>\n                <CardTitle tag={\"p\"} use={\"subtitle2\"}>\n                    {template.name}\n                </CardTitle>\n                <CardDescription tag={\"p\"} use={\"body2\"}>\n                    {template.description}\n                </CardDescription>\n                <CardButton onClick={() => onTemplate(template)}>+ Insert Template</CardButton>\n            </CardBody>\n        </CardContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AAEA,IAAMA,aAAa,oBAAGC,eAAH;EAAA;EAAA;AAAA,0HAAnB;AASA,IAAMC,QAAQ,oBAAGD,eAAH;EAAA;EAAA;AAAA,mGAAd;AAOA,IAAME,QAAQ,oBAAGF,eAAH;EAAA;EAAA;AAAA,6EAAd;AAQA,IAAMG,SAAS,oBAAGH,eAAH,EAAUI,sBAAV;EAAA;EAAA;AAAA,yBAAf;AAIA,IAAMC,eAAe,oBAAGL,eAAH,EAAUI,sBAAV;EAAA;EAAA;AAAA,mFAArB;AAOA,IAAME,UAAU,oBAAGN,eAAH,EAAUO,uBAAV;EAAA;EAAA;AAAA,wDAAhB;;AAWO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAAiD;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,UAAoC,QAApCA,UAAoC;EACzE,oBACI,6BAAC,aAAD,qBACI,6BAAC,QAAD,qBACI,6BAAC,0BAAD;IAAc,IAAI,EAAED,QAAQ,CAACE;EAA7B,EADJ,CADJ,eAII,6BAAC,QAAD,qBACI,6BAAC,SAAD;IAAW,GAAG,EAAE,GAAhB;IAAqB,GAAG,EAAE;EAA1B,GACKF,QAAQ,CAACG,IADd,CADJ,eAII,6BAAC,eAAD;IAAiB,GAAG,EAAE,GAAtB;IAA2B,GAAG,EAAE;EAAhC,GACKH,QAAQ,CAACI,WADd,CAJJ,eAOI,6BAAC,UAAD;IAAY,OAAO,EAAE;MAAA,OAAMH,UAAU,CAACD,QAAD,CAAhB;IAAA;EAArB,uBAPJ,CAJJ,CADJ;AAgBH,CAjBM"}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CmsDynamicZoneTemplate } from "../../../../types";
+interface TemplateGalleryProps {
+    onTemplate: (template: CmsDynamicZoneTemplate) => void;
+    onClose: () => void;
+}
+export declare const TemplateGallery: ({ onTemplate, onClose }: TemplateGalleryProps) => JSX.Element;
+export {};

package/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateGallery = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _highlight_off = require("@material-design-icons/svg/outlined/highlight_off.svg");
+
+var _Button = require("@webiny/ui/Button");
+
+var _hooks = require("../../../hooks");
+
+var _TemplateCard = require("./TemplateCard");
+
+var GalleryContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "GalleryContainer",
+  target: "e1pydjsn0"
+})();
+var GalleryCards = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "GalleryCards",
+  target: "e1pydjsn1"
+})("display:flex;flex-wrap:wrap;justify-content:center;padding:10px;");
+
+var TemplateGallery = function TemplateGallery(_ref) {
+  var _field$settings;
+
+  var onTemplate = _ref.onTemplate,
+      onClose = _ref.onClose;
+
+  var _useModelField = (0, _hooks.useModelField)(),
+      field = _useModelField.field;
+
+  var templates = ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.templates) || [];
+  return /*#__PURE__*/_react.default.createElement(GalleryContainer, null, /*#__PURE__*/_react.default.createElement(GalleryCards, null, templates.map(function (template) {
+    return /*#__PURE__*/_react.default.createElement(_TemplateCard.TemplateCard, {
+      key: template.id,
+      template: template,
+      onTemplate: onTemplate
+    });
+  })), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    onClick: onClose,
+    icon: /*#__PURE__*/_react.default.createElement(_highlight_off.ReactComponent, null)
+  }));
+};
+
+exports.TemplateGallery = TemplateGallery;

package/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GalleryContainer","styled","GalleryCards","TemplateGallery","onTemplate","onClose","useModelField","field","templates","settings","map","template","id"],"sources":["TemplateGallery.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ReactComponent as CloseIcon } from \"@material-design-icons/svg/outlined/highlight_off.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { TemplateCard } from \"./TemplateCard\";\n\nconst GalleryContainer = styled.div``;\n\nconst GalleryCards = styled.div`\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    padding: 10px;\n`;\n\ninterface TemplateGalleryProps {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n    onClose: () => void;\n}\n\nexport const TemplateGallery = ({ onTemplate, onClose }: TemplateGalleryProps) => {\n    const { field } = useModelField();\n    const templates = field.settings?.templates || [];\n\n    return (\n        <GalleryContainer>\n            <GalleryCards>\n                {templates.map(template => (\n                    <TemplateCard key={template.id} template={template} onTemplate={onTemplate} />\n                ))}\n            </GalleryCards>\n            <IconButton onClick={onClose} icon={<CloseIcon />} />\n        </GalleryContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,gBAAgB,oBAAGC,eAAH;EAAA;EAAA;AAAA,IAAtB;AAEA,IAAMC,YAAY,oBAAGD,eAAH;EAAA;EAAA;AAAA,sEAAlB;;AAYO,IAAME,eAAe,GAAG,SAAlBA,eAAkB,OAAmD;EAAA;;EAAA,IAAhDC,UAAgD,QAAhDA,UAAgD;EAAA,IAApCC,OAAoC,QAApCA,OAAoC;;EAC9E,qBAAkB,IAAAC,oBAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,IAAMC,SAAS,GAAG,oBAAAD,KAAK,CAACE,QAAN,oEAAgBD,SAAhB,KAA6B,EAA/C;EAEA,oBACI,6BAAC,gBAAD,qBACI,6BAAC,YAAD,QACKA,SAAS,CAACE,GAAV,CAAc,UAAAC,QAAQ;IAAA,oBACnB,6BAAC,0BAAD;MAAc,GAAG,EAAEA,QAAQ,CAACC,EAA5B;MAAgC,QAAQ,EAAED,QAA1C;MAAoD,UAAU,EAAEP;IAAhE,EADmB;EAAA,CAAtB,CADL,CADJ,eAMI,6BAAC,kBAAD;IAAY,OAAO,EAAEC,OAArB;IAA8B,IAAI,eAAE,6BAAC,6BAAD;EAApC,EANJ,CADJ;AAUH,CAdM"}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface TemplateIconProps {
+    icon: string;
+}
+export declare const TemplateIcon: ({ icon }: TemplateIconProps) => JSX.Element | null;
+export {};

package/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+var TemplateIcon = function TemplateIcon(_ref) {
+  var icon = _ref.icon;
+  var faIcon = icon ? icon.split("/") : undefined;
+  return faIcon ? /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: faIcon
+  }) : null;
+};
+
+exports.TemplateIcon = TemplateIcon;

package/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TemplateIcon","icon","faIcon","split","undefined"],"sources":["TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontAwesomeIcon, FontAwesomeIconProps } from \"@fortawesome/react-fontawesome\";\n\ninterface TemplateIconProps {\n    icon: string;\n}\n\nexport const TemplateIcon = ({ icon }: TemplateIconProps) => {\n    const faIcon = icon ? (icon.split(\"/\") as FontAwesomeIconProps[\"icon\"]) : undefined;\n\n    return faIcon ? <FontAwesomeIcon icon={faIcon} /> : null;\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAMO,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAAiC;EAAA,IAA9BC,IAA8B,QAA9BA,IAA8B;EACzD,IAAMC,MAAM,GAAGD,IAAI,GAAIA,IAAI,CAACE,KAAL,CAAW,GAAX,CAAJ,GAAuDC,SAA1E;EAEA,OAAOF,MAAM,gBAAG,6BAAC,iCAAD;IAAiB,IAAI,EAAEA;EAAvB,EAAH,GAAuC,IAApD;AACH,CAJM"}

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.d.ts

@@ -0,0 +1,2 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+export declare const dynamicZoneFieldRenderer: CmsEditorFieldRendererPlugin;

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dynamicZoneFieldRenderer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emotion = require("emotion");
+
+var _Accordion = require("@webiny/ui/Accordion");
+
+var _SingleValueDynamicZone = require("./SingleValueDynamicZone");
+
+var _MultiValueDynamicZone = require("./MultiValueDynamicZone");
+
+var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+
+var noBottomPadding = /*#__PURE__*/(0, _emotion.css)("> .webiny-ui-accordion-item__content{padding-bottom:0 !important;}label:noBottomPadding;");
+
+var DynamicZoneContent = function DynamicZoneContent(_ref) {
+  var field = _ref.field,
+      getBind = _ref.getBind,
+      contentModel = _ref.contentModel;
+  var isMultipleValues = field.multipleValues === true;
+  var Bind = getBind();
+  var Component = isMultipleValues ? _MultiValueDynamicZone.MultiValueDynamicZone : _SingleValueDynamicZone.SingleValueDynamicZone;
+  return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+    var _bind$validation = bind.validation,
+        isValid = _bind$validation.isValid,
+        message = _bind$validation.message;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+      title: field.label,
+      description: field.helpText,
+      className: isMultipleValues ? noBottomPadding : undefined
+    }, /*#__PURE__*/_react.default.createElement(Component, {
+      bind: bind,
+      field: field,
+      getBind: getBind,
+      contentModel: contentModel
+    }))), isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+      error: true
+    }, message));
+  });
+};
+
+var dynamicZoneFieldRenderer = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-dynamic-zone",
+  renderer: {
+    rendererName: "dynamicZone",
+    name: "Dynamic Zone",
+    description: "Renders a dynamic zone.",
+    canUse: function canUse(_ref2) {
+      var field = _ref2.field;
+      return field.type === "dynamicZone";
+    },
+    render: function render(props) {
+      return /*#__PURE__*/_react.default.createElement(DynamicZoneContent, props);
+    }
+  }
+};
+exports.dynamicZoneFieldRenderer = dynamicZoneFieldRenderer;

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["noBottomPadding","css","DynamicZoneContent","field","getBind","contentModel","isMultipleValues","multipleValues","Bind","Component","MultiValueDynamicZone","SingleValueDynamicZone","bind","validation","isValid","message","label","helpText","undefined","dynamicZoneFieldRenderer","type","name","renderer","rendererName","description","canUse","render","props"],"sources":["dynamicZoneRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { CmsEditorFieldRendererPlugin, CmsEditorFieldRendererProps } from \"~/types\";\nimport { SingleValueDynamicZone } from \"./SingleValueDynamicZone\";\nimport { MultiValueDynamicZone } from \"./MultiValueDynamicZone\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\n\nconst noBottomPadding = css`\n    > .webiny-ui-accordion-item__content {\n        padding-bottom: 0 !important;\n    }\n`;\n\nconst DynamicZoneContent = ({ field, getBind, contentModel }: CmsEditorFieldRendererProps) => {\n    const isMultipleValues = field.multipleValues === true;\n    const Bind = getBind();\n\n    const Component = isMultipleValues ? MultiValueDynamicZone : SingleValueDynamicZone;\n\n    return (\n        <Bind>\n            {bind => {\n                const { isValid, message } = bind.validation;\n                return (\n                    <>\n                        <Accordion>\n                            <AccordionItem\n                                title={field.label}\n                                description={field.helpText}\n                                className={isMultipleValues ? noBottomPadding : undefined}\n                            >\n                                <Component\n                                    bind={bind}\n                                    field={field}\n                                    getBind={getBind}\n                                    contentModel={contentModel}\n                                />\n                            </AccordionItem>\n                        </Accordion>\n                        {isValid === false && (\n                            <FormElementMessage error={true}>{message}</FormElementMessage>\n                        )}\n                    </>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport const dynamicZoneFieldRenderer: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-dynamic-zone\",\n    renderer: {\n        rendererName: \"dynamicZone\",\n        name: \"Dynamic Zone\",\n        description: \"Renders a dynamic zone.\",\n        canUse({ field }) {\n            return field.type === \"dynamicZone\";\n        },\n        render(props) {\n            return <DynamicZoneContent {...props} />;\n        }\n    }\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA,IAAMA,eAAe,oBAAGC,YAAH,6FAArB;;AAMA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAmE;EAAA,IAAhEC,KAAgE,QAAhEA,KAAgE;EAAA,IAAzDC,OAAyD,QAAzDA,OAAyD;EAAA,IAAhDC,YAAgD,QAAhDA,YAAgD;EAC1F,IAAMC,gBAAgB,GAAGH,KAAK,CAACI,cAAN,KAAyB,IAAlD;EACA,IAAMC,IAAI,GAAGJ,OAAO,EAApB;EAEA,IAAMK,SAAS,GAAGH,gBAAgB,GAAGI,4CAAH,GAA2BC,8CAA7D;EAEA,oBACI,6BAAC,IAAD,QACK,UAAAC,IAAI,EAAI;IACL,uBAA6BA,IAAI,CAACC,UAAlC;IAAA,IAAQC,OAAR,oBAAQA,OAAR;IAAA,IAAiBC,OAAjB,oBAAiBA,OAAjB;IACA,oBACI,yEACI,6BAAC,oBAAD,qBACI,6BAAC,wBAAD;MACI,KAAK,EAAEZ,KAAK,CAACa,KADjB;MAEI,WAAW,EAAEb,KAAK,CAACc,QAFvB;MAGI,SAAS,EAAEX,gBAAgB,GAAGN,eAAH,GAAqBkB;IAHpD,gBAKI,6BAAC,SAAD;MACI,IAAI,EAAEN,IADV;MAEI,KAAK,EAAET,KAFX;MAGI,OAAO,EAAEC,OAHb;MAII,YAAY,EAAEC;IAJlB,EALJ,CADJ,CADJ,EAeKS,OAAO,KAAK,KAAZ,iBACG,6BAAC,sCAAD;MAAoB,KAAK,EAAE;IAA3B,GAAkCC,OAAlC,CAhBR,CADJ;EAqBH,CAxBL,CADJ;AA4BH,CAlCD;;AAoCO,IAAMI,wBAAsD,GAAG;EAClEC,IAAI,EAAE,2BAD4D;EAElEC,IAAI,EAAE,wCAF4D;EAGlEC,QAAQ,EAAE;IACNC,YAAY,EAAE,aADR;IAENF,IAAI,EAAE,cAFA;IAGNG,WAAW,EAAE,yBAHP;IAINC,MAJM,yBAIY;MAAA,IAATtB,KAAS,SAATA,KAAS;MACd,OAAOA,KAAK,CAACiB,IAAN,KAAe,aAAtB;IACH,CANK;IAONM,MAPM,kBAOCC,KAPD,EAOQ;MACV,oBAAO,6BAAC,kBAAD,EAAwBA,KAAxB,CAAP;IACH;EATK;AAHwD,CAA/D"}

package/admin/plugins/fieldRenderers/file/File.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface FileProps {
+    url: string;
+    onRemove: () => void;
+    placeholder?: string;
+    styles?: Record<string, any>;
+    showFileManager?: () => void;
+    validation?: {
+        isValid?: boolean;
+        message?: string;
+    };
+    description?: string;
+}
+declare const File: React.FC<FileProps>;
+export default File;

package/admin/plugins/fieldRenderers/file/File.js

@@ -0,0 +1,103 @@
+"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.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _components = require("@webiny/app/components");
+
+var Ui = _interopRequireWildcard(require("@webiny/ui/ImageUpload"));
+
+var _utils = require("./utils");
+
+var _round_insert_drive_file24px = _interopRequireDefault(require("../../fields/icons/round_insert_drive_file-24px.svg"));
+
+var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+
+var imagePreviewProps = {
+  transform: {
+    width: 300
+  },
+  style: {
+    width: "100%",
+    height: 232,
+    objectFit: "cover"
+  }
+};
+var defaultStyles = {
+  width: "100%",
+  height: "auto"
+};
+var defaultValidation = {
+  isValid: undefined,
+  message: undefined
+};
+
+var File = function File(props) {
+  var url = props.url,
+      onRemove = props.onRemove,
+      placeholder = props.placeholder,
+      showFileManager = props.showFileManager,
+      description = props.description;
+  var styles = props.styles || defaultStyles;
+  var validation = props.validation || defaultValidation;
+  var isImage = (0, _react.useCallback)(function (url) {
+    return _utils.imagePlugins.some(function (extension) {
+      return url.includes(extension);
+    });
+  }, []);
+  var getImageSrc = (0, _react.useCallback)(function (url) {
+    if (url && isImage(url)) {
+      return url;
+    }
+
+    return _round_insert_drive_file24px.default;
+  }, []); // TODO @ts-refactor figure out correct type
+
+  var defaultRenderImagePreview = function defaultRenderImagePreview(renderImageProps) {
+    return /*#__PURE__*/_react.default.createElement(_components.Image, Object.assign({}, renderImageProps, imagePreviewProps));
+  };
+
+  var renderImagePreview = function renderImagePreview(url) {
+    if (url && !isImage(url)) {
+      return (0, _utils.createRenderImagePreview)({
+        value: url,
+        imagePreviewProps: imagePreviewProps
+      });
+    }
+
+    return defaultRenderImagePreview;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Ui.Image, {
+    renderImagePreview: renderImagePreview(url),
+    style: styles,
+    value: url ? {
+      src: getImageSrc(url)
+    } : null,
+    uploadImage: function uploadImage() {
+      if (!showFileManager) {
+        return;
+      }
+
+      showFileManager();
+    },
+    removeImage: onRemove,
+    placeholder: placeholder,
+    containerStyle: {
+      height: "auto"
+    }
+  }), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, validation.message || "Invalid value."), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+};
+
+var _default = File;
+exports.default = _default;

package/admin/plugins/fieldRenderers/file/File.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["imagePreviewProps","transform","width","style","height","objectFit","defaultStyles","defaultValidation","isValid","undefined","message","File","props","url","onRemove","placeholder","showFileManager","description","styles","validation","isImage","useCallback","imagePlugins","some","extension","includes","getImageSrc","fileIcon","defaultRenderImagePreview","renderImageProps","renderImagePreview","createRenderImagePreview","value","src"],"sources":["File.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Image } from \"@webiny/app/components\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { createRenderImagePreview, imagePlugins } from \"./utils\";\nimport fileIcon from \"../../fields/icons/round_insert_drive_file-24px.svg\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\n\nconst imagePreviewProps = {\n    transform: { width: 300 },\n    style: { width: \"100%\", height: 232, objectFit: \"cover\" }\n};\n\nconst defaultStyles = {\n    width: \"100%\",\n    height: \"auto\"\n};\n\ninterface ValidationStatus {\n    isValid?: boolean;\n    message?: string;\n}\nconst defaultValidation: ValidationStatus = {\n    isValid: undefined,\n    message: undefined\n};\n\nexport interface FileProps {\n    url: string;\n    onRemove: () => void;\n    placeholder?: string;\n    styles?: Record<string, any>;\n    showFileManager?: () => void;\n    validation?: {\n        isValid?: boolean;\n        message?: string;\n    };\n    description?: string;\n}\nconst File: React.FC<FileProps> = props => {\n    const { url, onRemove, placeholder, showFileManager, description } = props;\n\n    const styles = props.styles || defaultStyles;\n    const validation = props.validation || defaultValidation;\n\n    const isImage = useCallback(url => {\n        return imagePlugins.some(extension => url.includes(extension));\n    }, []);\n\n    const getImageSrc = useCallback(url => {\n        if (url && isImage(url)) {\n            return url;\n        }\n        return fileIcon;\n    }, []);\n\n    // TODO @ts-refactor figure out correct type\n    const defaultRenderImagePreview = (renderImageProps: any) => (\n        <Image {...renderImageProps} {...imagePreviewProps} />\n    );\n\n    const renderImagePreview = (url: string) => {\n        if (url && !isImage(url)) {\n            return createRenderImagePreview({ value: url, imagePreviewProps });\n        }\n\n        return defaultRenderImagePreview;\n    };\n\n    return (\n        <>\n            <Ui.Image\n                renderImagePreview={renderImagePreview(url)}\n                style={styles}\n                value={url ? { src: getImageSrc(url) } : null}\n                uploadImage={() => {\n                    if (!showFileManager) {\n                        return;\n                    }\n                    showFileManager();\n                }}\n                removeImage={onRemove}\n                placeholder={placeholder}\n                containerStyle={{ height: \"auto\" }}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>\n                    {validation.message || \"Invalid value.\"}\n                </FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </>\n    );\n};\n\nexport default File;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,iBAAiB,GAAG;EACtBC,SAAS,EAAE;IAAEC,KAAK,EAAE;EAAT,CADW;EAEtBC,KAAK,EAAE;IAAED,KAAK,EAAE,MAAT;IAAiBE,MAAM,EAAE,GAAzB;IAA8BC,SAAS,EAAE;EAAzC;AAFe,CAA1B;AAKA,IAAMC,aAAa,GAAG;EAClBJ,KAAK,EAAE,MADW;EAElBE,MAAM,EAAE;AAFU,CAAtB;AASA,IAAMG,iBAAmC,GAAG;EACxCC,OAAO,EAAEC,SAD+B;EAExCC,OAAO,EAAED;AAF+B,CAA5C;;AAiBA,IAAME,IAAyB,GAAG,SAA5BA,IAA4B,CAAAC,KAAK,EAAI;EACvC,IAAQC,GAAR,GAAqED,KAArE,CAAQC,GAAR;EAAA,IAAaC,QAAb,GAAqEF,KAArE,CAAaE,QAAb;EAAA,IAAuBC,WAAvB,GAAqEH,KAArE,CAAuBG,WAAvB;EAAA,IAAoCC,eAApC,GAAqEJ,KAArE,CAAoCI,eAApC;EAAA,IAAqDC,WAArD,GAAqEL,KAArE,CAAqDK,WAArD;EAEA,IAAMC,MAAM,GAAGN,KAAK,CAACM,MAAN,IAAgBZ,aAA/B;EACA,IAAMa,UAAU,GAAGP,KAAK,CAACO,UAAN,IAAoBZ,iBAAvC;EAEA,IAAMa,OAAO,GAAG,IAAAC,kBAAA,EAAY,UAAAR,GAAG,EAAI;IAC/B,OAAOS,mBAAA,CAAaC,IAAb,CAAkB,UAAAC,SAAS;MAAA,OAAIX,GAAG,CAACY,QAAJ,CAAaD,SAAb,CAAJ;IAAA,CAA3B,CAAP;EACH,CAFe,EAEb,EAFa,CAAhB;EAIA,IAAME,WAAW,GAAG,IAAAL,kBAAA,EAAY,UAAAR,GAAG,EAAI;IACnC,IAAIA,GAAG,IAAIO,OAAO,CAACP,GAAD,CAAlB,EAAyB;MACrB,OAAOA,GAAP;IACH;;IACD,OAAOc,oCAAP;EACH,CALmB,EAKjB,EALiB,CAApB,CAVuC,CAiBvC;;EACA,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B,CAACC,gBAAD;IAAA,oBAC9B,6BAAC,iBAAD,oBAAWA,gBAAX,EAAiC7B,iBAAjC,EAD8B;EAAA,CAAlC;;EAIA,IAAM8B,kBAAkB,GAAG,SAArBA,kBAAqB,CAACjB,GAAD,EAAiB;IACxC,IAAIA,GAAG,IAAI,CAACO,OAAO,CAACP,GAAD,CAAnB,EAA0B;MACtB,OAAO,IAAAkB,+BAAA,EAAyB;QAAEC,KAAK,EAAEnB,GAAT;QAAcb,iBAAiB,EAAjBA;MAAd,CAAzB,CAAP;IACH;;IAED,OAAO4B,yBAAP;EACH,CAND;;EAQA,oBACI,yEACI,6BAAC,EAAD,CAAI,KAAJ;IACI,kBAAkB,EAAEE,kBAAkB,CAACjB,GAAD,CAD1C;IAEI,KAAK,EAAEK,MAFX;IAGI,KAAK,EAAEL,GAAG,GAAG;MAAEoB,GAAG,EAAEP,WAAW,CAACb,GAAD;IAAlB,CAAH,GAA+B,IAH7C;IAII,WAAW,EAAE,uBAAM;MACf,IAAI,CAACG,eAAL,EAAsB;QAClB;MACH;;MACDA,eAAe;IAClB,CATL;IAUI,WAAW,EAAEF,QAVjB;IAWI,WAAW,EAAEC,WAXjB;IAYI,cAAc,EAAE;MAAEX,MAAM,EAAE;IAAV;EAZpB,EADJ,EAeKe,UAAU,CAACX,OAAX,KAAuB,KAAvB,iBACG,6BAAC,sCAAD;IAAoB,KAAK;EAAzB,GACKW,UAAU,CAACT,OAAX,IAAsB,gBAD3B,CAhBR,EAoBKS,UAAU,CAACX,OAAX,KAAuB,KAAvB,IAAgCS,WAAhC,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CArBR,CADJ;AA0BH,CAxDD;;eA0DeN,I"}

package/admin/plugins/fieldRenderers/file/fileField.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/file/fileField.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _components = require("@webiny/app-admin/components");
+
+var _File = _interopRequireDefault(require("./File"));
+
+var _templateObject, _templateObject2;
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/file");
+
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-file",
+  renderer: {
+    rendererName: "file-input",
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["File Input"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Enables selecting a single file via File Manager."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "file" && !field.multipleValues;
+    },
+    render: function render(_ref2) {
+      var field = _ref2.field,
+          getBind = _ref2.getBind,
+          Label = _ref2.Label;
+      var Bind = getBind();
+      var imagesOnly = field.settings && field.settings.imagesOnly;
+      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+        span: 12
+      }, /*#__PURE__*/_react.default.createElement(Label, null, field.label), /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+        var value = bind.value,
+            onChange = bind.onChange;
+        return /*#__PURE__*/_react.default.createElement(_components.FileManager, {
+          images: imagesOnly,
+          render: function render(_ref3) {
+            var showFileManager = _ref3.showFileManager;
+
+            var selectFile = function selectFile() {
+              showFileManager(function (file) {
+                return onChange(file.src);
+              });
+            };
+
+            return /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({}, bind, {
+              url: value,
+              onRemove: function onRemove() {
+                return onChange(null);
+              },
+              showFileManager: selectFile,
+              placeholder: field.placeholderText,
+              description: field.helpText,
+              "data-testid": "fr.input.filefield.".concat(field.label)
+            }));
+          }
+        });
+      })));
+    }
+  }
+};
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/file/fileField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","Label","Bind","imagesOnly","settings","label","bind","value","onChange","showFileManager","selectFile","file","src","placeholderText","helpText"],"sources":["fileField.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { FileManager } from \"@webiny/app-admin/components\";\nimport File from \"./File\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/file\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-file\",\n    renderer: {\n        rendererName: \"file-input\",\n        name: t`File Input`,\n        description: t`Enables selecting a single file via File Manager.`,\n        canUse({ field }) {\n            return field.type === \"file\" && !field.multipleValues;\n        },\n        render({ field, getBind, Label }) {\n            const Bind = getBind();\n\n            const imagesOnly = field.settings && field.settings.imagesOnly;\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <Label>{field.label}</Label>\n                        <Bind>\n                            {bind => {\n                                const { value, onChange } = bind;\n\n                                return (\n                                    <FileManager\n                                        images={imagesOnly}\n                                        render={({ showFileManager }) => {\n                                            const selectFile = () => {\n                                                showFileManager(file => onChange(file.src));\n                                            };\n                                            return (\n                                                <File\n                                                    {...bind}\n                                                    url={value}\n                                                    onRemove={() => onChange(null)}\n                                                    showFileManager={selectFile}\n                                                    placeholder={field.placeholderText}\n                                                    description={field.helpText}\n                                                    data-testid={`fr.input.filefield.${field.label}`}\n                                                />\n                                            );\n                                        }}\n                                    />\n                                );\n                            }}\n                        </Bind>\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,gCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,YADR;IAENF,IAAI,EAAEL,CAAF,6FAFE;IAGNQ,WAAW,EAAER,CAAF,sIAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,MAAf,IAAyB,CAACM,KAAK,CAACC,cAAvC;IACH,CANK;IAONC,MAPM,yBAO4B;MAAA,IAAzBF,KAAyB,SAAzBA,KAAyB;MAAA,IAAlBG,OAAkB,SAAlBA,OAAkB;MAAA,IAATC,KAAS,SAATA,KAAS;MAC9B,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,UAAU,GAAGN,KAAK,CAACO,QAAN,IAAkBP,KAAK,CAACO,QAAN,CAAeD,UAApD;MACA,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,KAAD,QAAQN,KAAK,CAACQ,KAAd,CADJ,eAEI,6BAAC,IAAD,QACK,UAAAC,IAAI,EAAI;QACL,IAAQC,KAAR,GAA4BD,IAA5B,CAAQC,KAAR;QAAA,IAAeC,QAAf,GAA4BF,IAA5B,CAAeE,QAAf;QAEA,oBACI,6BAAC,uBAAD;UACI,MAAM,EAAEL,UADZ;UAEI,MAAM,EAAE,uBAAyB;YAAA,IAAtBM,eAAsB,SAAtBA,eAAsB;;YAC7B,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;cACrBD,eAAe,CAAC,UAAAE,IAAI;gBAAA,OAAIH,QAAQ,CAACG,IAAI,CAACC,GAAN,CAAZ;cAAA,CAAL,CAAf;YACH,CAFD;;YAGA,oBACI,6BAAC,aAAD,oBACQN,IADR;cAEI,GAAG,EAAEC,KAFT;cAGI,QAAQ,EAAE;gBAAA,OAAMC,QAAQ,CAAC,IAAD,CAAd;cAAA,CAHd;cAII,eAAe,EAAEE,UAJrB;cAKI,WAAW,EAAEb,KAAK,CAACgB,eALvB;cAMI,WAAW,EAAEhB,KAAK,CAACiB,QANvB;cAOI,4CAAmCjB,KAAK,CAACQ,KAAzC;YAPJ,GADJ;UAWH;QAjBL,EADJ;MAqBH,CAzBL,CAFJ,CADJ,CADJ;IAkCH;EA7CK;AAH+B,CAA7C;eAoDef,M"}

package/admin/plugins/fieldRenderers/file/fileFields.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/file/fileFields.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _utils = require("./utils");
+
+var _components = require("@webiny/app-admin/components");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _File = _interopRequireDefault(require("./File"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/file");
+
+var FileUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eq80mh0",
+  label: "FileUploadWrapper"
+})({
+  position: "relative",
+  ".disabled": {
+    opacity: 0.75,
+    pointerEvents: "none"
+  },
+  ".mdc-text-field-helper-text": {
+    color: "var(--mdc-theme-text-secondary-on-background)"
+  }
+});
+
+var FieldRenderer = function FieldRenderer(_ref) {
+  var getBind = _ref.getBind,
+      Label = _ref.Label,
+      field = _ref.field;
+  var Bind = getBind();
+  var imagesOnly = field.settings && field.settings.imagesOnly;
+  return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+    var onChange = bind.onChange; // We need to make sure the value is an array, since this is a multi-value component.
+
+    var value = (Array.isArray(bind.value) ? bind.value : [bind.value]).filter(Boolean);
+    return /*#__PURE__*/_react.default.createElement(FileUploadWrapper, {
+      className: _utils.imageWrapperStyles
+    }, /*#__PURE__*/_react.default.createElement(_components.FileManager, {
+      multiple: true,
+      images: imagesOnly,
+      render: function render(_ref2) {
+        var showFileManager = _ref2.showFileManager;
+
+        var selectFiles = function selectFiles() {
+          var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+          showFileManager(function (files) {
+            var urls = files.map(function (f) {
+              return f.src;
+            });
+
+            if (index === -1) {
+              onChange([].concat((0, _toConsumableArray2.default)(value), (0, _toConsumableArray2.default)(urls)));
+            } else {
+              onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, index)), (0, _toConsumableArray2.default)(urls), (0, _toConsumableArray2.default)(value.slice(index + 1))));
+            }
+          });
+        };
+
+        return /*#__PURE__*/_react.default.createElement(_Grid.GridInner, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+          span: 12
+        }, /*#__PURE__*/_react.default.createElement(Label, null, field.label)), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value.map(function (url, index) {
+          return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+            span: 3,
+            key: url
+          }, /*#__PURE__*/_react.default.createElement(_File.default, {
+            url: url,
+            showFileManager: function showFileManager() {
+              return selectFiles(index);
+            },
+            onRemove: function onRemove() {
+              return onChange(_dotPropImmutable.default.delete(value, index));
+            },
+            placeholder: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Select a file\""]))),
+            "data-testid": "fr.input.file.".concat(field.label, ".").concat(index)
+          }));
+        })), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+          span: 3
+        }, /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({
+          url: "",
+          onRemove: function onRemove() {
+            return void 0;
+          }
+        }, bind, {
+          showFileManager: function showFileManager() {
+            return selectFiles();
+          },
+          placeholder: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Select a file\""]))),
+          "data-testid": "fr.input.file.".concat(field.label)
+        }))));
+      }
+    }));
+  });
+};
+/**
+ * Not used?
+ */
+// TODO @ts-refactor
+
+
+FieldRenderer.defaultProps = {
+  validation: {
+    isValid: null
+  },
+  styles: {
+    width: "100%",
+    height: "auto"
+  }
+};
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-files",
+  renderer: {
+    rendererName: "file-inputs",
+    name: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["File Inputs"]))),
+    description: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Enables selecting multiple files via File Manager."]))),
+    canUse: function canUse(_ref3) {
+      var field = _ref3.field;
+      return field.type === "file" && !!field.multipleValues;
+    },
+    render: function render(_ref4) {
+      var field = _ref4.field,
+          getBind = _ref4.getBind,
+          Label = _ref4.Label;
+      return /*#__PURE__*/_react.default.createElement(FieldRenderer, {
+        field: field,
+        getBind: getBind,
+        Label: Label
+      });
+    }
+  }
+};
+var _default = plugin;
+exports.default = _default;