@webiny/app-headless-cms 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

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

@@ -0,0 +1,85 @@
+"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.AddTemplateIcon = exports.AddTemplateButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _info = require("@material-design-icons/svg/outlined/info.svg");
+var _add_circle_outline = require("@material-design-icons/svg/round/add_circle_outline.svg");
+var _Typography = require("@webiny/ui/Typography");
+var _TemplateGallery = require("./TemplateGallery");
+var _Button = require("@webiny/ui/Button");
+var AddIconContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "AddIconContainer",
+  target: "e4w4vi60"
+})("text-align:center;padding-top:3px;");
+var AddButtonContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "AddButtonContainer",
+  target: "e4w4vi61"
+})("text-align:center;margin-top:20px;:first-of-type{margin-top:0;}");
+var Info = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Info",
+  target: "e4w4vi62"
+})("display:flex;justify-content:center;align-items:center;margin-top:5px;> svg{width:20px;margin-right:5px;}");
+function useAddTemplate(params) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showGallery = _useState2[0],
+    setShowGallery = _useState2[1];
+  var browseTemplates = function browseTemplates() {
+    setShowGallery(true);
+  };
+  var onTemplate = function onTemplate(template) {
+    params.onTemplate(template);
+    onGalleryClose();
+  };
+  var onGalleryClose = function onGalleryClose() {
+    setShowGallery(false);
+  };
+  return {
+    showGallery: showGallery,
+    browseTemplates: browseTemplates,
+    onTemplate: onTemplate,
+    onGalleryClose: onGalleryClose
+  };
+}
+var AddTemplateButton = function AddTemplateButton(props) {
+  var _useAddTemplate = useAddTemplate({
+      onTemplate: props.onTemplate
+    }),
+    showGallery = _useAddTemplate.showGallery,
+    onTemplate = _useAddTemplate.onTemplate,
+    browseTemplates = _useAddTemplate.browseTemplates,
+    onGalleryClose = _useAddTemplate.onGalleryClose;
+  return /*#__PURE__*/_react.default.createElement(AddButtonContainer, null, showGallery ? /*#__PURE__*/_react.default.createElement(_TemplateGallery.TemplateGallery, {
+    onTemplate: onTemplate,
+    onClose: onGalleryClose
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+    onClick: browseTemplates
+  }, "+ Add a template"), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_info.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "caption"
+  }, "Click here to learn how templates and dynamic zones work"))));
+};
+exports.AddTemplateButton = AddTemplateButton;
+var AddTemplateIcon = function AddTemplateIcon(props) {
+  var _useAddTemplate2 = useAddTemplate({
+      onTemplate: props.onTemplate
+    }),
+    showGallery = _useAddTemplate2.showGallery,
+    onTemplate = _useAddTemplate2.onTemplate,
+    browseTemplates = _useAddTemplate2.browseTemplates,
+    onGalleryClose = _useAddTemplate2.onGalleryClose;
+  return /*#__PURE__*/_react.default.createElement(AddIconContainer, null, showGallery ? /*#__PURE__*/_react.default.createElement(_TemplateGallery.TemplateGallery, {
+    onTemplate: onTemplate,
+    onClose: onGalleryClose
+  }) : /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    onClick: browseTemplates,
+    icon: /*#__PURE__*/_react.default.createElement(_add_circle_outline.ReactComponent, null)
+  }));
+};
+exports.AddTemplateIcon = AddTemplateIcon;

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

@@ -0,0 +1 @@
+{"version":3,"names":["AddIconContainer","styled","AddButtonContainer","Info","useAddTemplate","params","useState","showGallery","setShowGallery","browseTemplates","onTemplate","template","onGalleryClose","AddTemplateButton","props","AddTemplateIcon"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ReactComponent as InfoIcon } from \"@material-design-icons/svg/outlined/info.svg\";\nimport { ReactComponent as AddIcon } from \"@material-design-icons/svg/round/add_circle_outline.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { TemplateGallery } from \"./TemplateGallery\";\nimport { IconButton, ButtonSecondary } from \"@webiny/ui/Button\";\n\nconst AddIconContainer = styled.div`\n    text-align: center;\n    padding-top: 3px;\n`;\n\nconst AddButtonContainer = styled.div`\n    text-align: center;\n    margin-top: 20px;\n    :first-of-type {\n        margin-top: 0;\n    }\n`;\n\nconst Info = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 5px;\n    > svg {\n        width: 20px;\n        margin-right: 5px;\n    }\n`;\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showGallery, setShowGallery] = useState(false);\n\n    const browseTemplates = () => {\n        setShowGallery(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate(template);\n        onGalleryClose();\n    };\n\n    const onGalleryClose = () => {\n        setShowGallery(false);\n    };\n\n    return {\n        showGallery,\n        browseTemplates,\n        onTemplate,\n        onGalleryClose\n    };\n}\n\ninterface AddTemplateProps {\n    label?: string;\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddButtonContainer>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <>\n                    <ButtonSecondary onClick={browseTemplates}>+ Add a template</ButtonSecondary>\n                    <Info>\n                        <InfoIcon />\n                        <Typography use={\"caption\"}>\n                            Click here to learn how templates and dynamic zones work\n                        </Typography>\n                    </Info>\n                </>\n            )}\n        </AddButtonContainer>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddIconContainer>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <IconButton onClick={browseTemplates} icon={<AddIcon />} />\n            )}\n        </AddIconContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,IAAMA,gBAAgB,oBAAGC,eAAM;EAAA;EAAA;AAAA,wCAG9B;AAED,IAAMC,kBAAkB,oBAAGD,eAAM;EAAA;EAAA;AAAA,qEAMhC;AAED,IAAME,IAAI,oBAAGF,eAAM;EAAA;EAAA;AAAA,+GASlB;AAMD,SAASG,cAAc,CAACC,MAA4B,EAAE;EAClD,gBAAsC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAA9CC,WAAW;IAAEC,cAAc;EAElC,IAAMC,eAAe,GAAG,SAAlBA,eAAe,GAAS;IAC1BD,cAAc,CAAC,IAAI,CAAC;EACxB,CAAC;EAED,IAAME,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAgC,EAAK;IACrDN,MAAM,CAACK,UAAU,CAACC,QAAQ,CAAC;IAC3BC,cAAc,EAAE;EACpB,CAAC;EAED,IAAMA,cAAc,GAAG,SAAjBA,cAAc,GAAS;IACzBJ,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC;EAED,OAAO;IACHD,WAAW,EAAXA,WAAW;IACXE,eAAe,EAAfA,eAAe;IACfC,UAAU,EAAVA,UAAU;IACVE,cAAc,EAAdA;EACJ,CAAC;AACL;AAOO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAuB,EAAK;EAC1D,sBAAqEV,cAAc,CAAC;MAChFM,UAAU,EAAEI,KAAK,CAACJ;IACtB,CAAC,CAAC;IAFMH,WAAW,mBAAXA,WAAW;IAAEG,UAAU,mBAAVA,UAAU;IAAED,eAAe,mBAAfA,eAAe;IAAEG,cAAc,mBAAdA,cAAc;EAIhE,oBACI,6BAAC,kBAAkB,QACdL,WAAW,gBACR,6BAAC,gCAAe;IAAC,UAAU,EAAEG,UAAW;IAAC,OAAO,EAAEE;EAAe,EAAG,gBAEpE,yEACI,6BAAC,uBAAe;IAAC,OAAO,EAAEH;EAAgB,GAAC,kBAAgB,CAAkB,eAC7E,6BAAC,IAAI,qBACD,6BAAC,oBAAQ,OAAG,eACZ,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAU,GAAC,0DAE5B,CAAa,CACV,CAEd,CACgB;AAE7B,CAAC;AAAC;AAEK,IAAMM,eAAe,GAAG,SAAlBA,eAAe,CAAID,KAAuB,EAAK;EACxD,uBAAqEV,cAAc,CAAC;MAChFM,UAAU,EAAEI,KAAK,CAACJ;IACtB,CAAC,CAAC;IAFMH,WAAW,oBAAXA,WAAW;IAAEG,UAAU,oBAAVA,UAAU;IAAED,eAAe,oBAAfA,eAAe;IAAEG,cAAc,oBAAdA,cAAc;EAIhE,oBACI,6BAAC,gBAAgB,QACZL,WAAW,gBACR,6BAAC,gCAAe;IAAC,UAAU,EAAEG,UAAW;IAAC,OAAO,EAAEE;EAAe,EAAG,gBAEpE,6BAAC,kBAAU;IAAC,OAAO,EAAEH,eAAgB;IAAC,IAAI,eAAE,6BAAC,kCAAO;EAAI,EAC3D,CACc;AAE3B,CAAC;AAAC"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BindComponentRenderProp, CmsEditorFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+declare type GetBind = CmsEditorFieldRendererProps["getBind"];
+interface MultiValueDynamicZoneProps {
+    field: CmsModelField;
+    bind: BindComponentRenderProp;
+    contentModel: CmsModel;
+    getBind: GetBind;
+}
+export declare const MultiValueDynamicZone: ({ bind, getBind, contentModel }: MultiValueDynamicZoneProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiValueDynamicZone = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _Accordion = require("@webiny/ui/Accordion");
+var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
+var _library_add = require("@material-design-icons/svg/outlined/library_add.svg");
+var _expand_less = require("@material-design-icons/svg/round/expand_less.svg");
+var _expand_more = require("@material-design-icons/svg/round/expand_more.svg");
+var _AddTemplate = require("./AddTemplate");
+var _TemplateIcon = require("./TemplateIcon");
+var _hooks = require("../../../hooks");
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+var BottomMargin = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "BottomMargin",
+  target: "e1mhu37c0"
+})("margin-bottom:20px;");
+var TemplateValueForm = function TemplateValueForm(_ref) {
+  var _field$settings;
+  var value = _ref.value,
+    contentModel = _ref.contentModel,
+    Bind = _ref.Bind,
+    isLast = _ref.isLast,
+    isFirst = _ref.isFirst,
+    onMoveUp = _ref.onMoveUp,
+    onMoveDown = _ref.onMoveDown,
+    onDelete = _ref.onDelete,
+    onClone = _ref.onClone;
+  var _useModelField = (0, _hooks.useModelField)(),
+    field = _useModelField.field;
+  var templates = ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.templates) || [];
+  var template = templates.find(function (tpl) {
+    return tpl.id === value._templateId;
+  });
+  if (!template) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    title: template.name,
+    description: template.description,
+    icon: /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
+      icon: template.icon
+    }),
+    actions: /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_expand_less.ReactComponent, null),
+      onClick: onMoveUp,
+      disabled: isFirst
+    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_expand_more.ReactComponent, null),
+      onClick: onMoveDown,
+      disabled: isLast
+    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Divider, null), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_library_add.ReactComponent, null),
+      onClick: onClone
+    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
+      onClick: onDelete
+    }))
+  }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+    fields: template.fields,
+    layout: template.layout || [],
+    contentModel: contentModel,
+    Bind: Bind
+  }));
+};
+var MultiValueDynamicZone = function MultiValueDynamicZone(_ref2) {
+  var bind = _ref2.bind,
+    getBind = _ref2.getBind,
+    contentModel = _ref2.contentModel;
+  var onTemplate = function onTemplate(template) {
+    bind.appendValue({
+      _templateId: template.id
+    });
+  };
+  var cloneValue = function cloneValue(index) {
+    var newValue = (0, _cloneDeep.default)(bind.value[index]);
+    bind.appendValue(newValue, index + 1);
+  };
+  var values = bind.value || [];
+  var hasValues = values.length > 0;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasValues ? /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, values.map(function (value, index) {
+    return /*#__PURE__*/_react.default.createElement(TemplateValueForm, {
+      key: index,
+      value: value,
+      contentModel: contentModel,
+      Bind: getBind(index),
+      isFirst: index === 0,
+      isLast: index === values.length - 1,
+      onMoveUp: function onMoveUp() {
+        return bind.moveValueUp(index);
+      },
+      onMoveDown: function onMoveDown() {
+        return bind.moveValueDown(index);
+      },
+      onDelete: function onDelete() {
+        return bind.removeValue(index);
+      },
+      onClone: function onClone() {
+        return cloneValue(index);
+      }
+    });
+  })) : null, hasValues ? /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateIcon, {
+    onTemplate: onTemplate
+  }) : /*#__PURE__*/_react.default.createElement(BottomMargin, null, /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateButton, {
+    onTemplate: onTemplate
+  })));
+};
+exports.MultiValueDynamicZone = MultiValueDynamicZone;

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

@@ -0,0 +1 @@
+{"version":3,"names":["BottomMargin","styled","TemplateValueForm","value","contentModel","Bind","isLast","isFirst","onMoveUp","onMoveDown","onDelete","onClone","useModelField","field","templates","settings","template","find","tpl","id","_templateId","name","description","icon","fields","layout","MultiValueDynamicZone","bind","getBind","onTemplate","appendValue","cloneValue","index","newValue","cloneDeep","values","hasValues","length","map","moveValueUp","moveValueDown","removeValue"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@material-design-icons/svg/outlined/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@material-design-icons/svg/round/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@material-design-icons/svg/round/expand_more.svg\";\nimport { AddTemplateButton, AddTemplateIcon } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsEditorFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\n\nconst BottomMargin = styled.div`\n    margin-bottom: 20px;\n`;\n\ntype GetBind = CmsEditorFieldRendererProps[\"getBind\"];\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\ninterface TemplateValueFormProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: () => void;\n}\n\nconst TemplateValueForm = ({\n    value,\n    contentModel,\n    Bind,\n    isLast,\n    isFirst,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onClone\n}: TemplateValueFormProps) => {\n    const { field } = useModelField();\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = templates.find(\n        tpl => tpl.id === value._templateId\n    );\n\n    if (!template) {\n        return null;\n    }\n\n    return (\n        <AccordionItem\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            actions={\n                <AccordionItem.Actions>\n                    <AccordionItem.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={onMoveUp}\n                        disabled={isFirst}\n                    />\n                    <AccordionItem.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={onMoveDown}\n                        disabled={isLast}\n                    />\n                    <AccordionItem.Divider />\n                    <AccordionItem.Action icon={<CloneIcon />} onClick={onClone} />\n                    <AccordionItem.Action icon={<DeleteIcon />} onClick={onDelete} />\n                </AccordionItem.Actions>\n            }\n        >\n            <Fields\n                fields={template.fields}\n                layout={template.layout || []}\n                contentModel={contentModel}\n                Bind={Bind}\n            />\n        </AccordionItem>\n    );\n};\n\ninterface MultiValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = ({\n    bind,\n    getBind,\n    contentModel\n}: MultiValueDynamicZoneProps) => {\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.appendValue({ _templateId: template.id });\n    };\n\n    const cloneValue = (index: number) => {\n        const newValue = cloneDeep(bind.value[index]);\n        bind.appendValue(newValue, index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    return (\n        <>\n            {hasValues ? (\n                <Accordion>\n                    {values.map((value, index) => (\n                        <TemplateValueForm\n                            key={index}\n                            value={value}\n                            contentModel={contentModel}\n                            Bind={getBind(index)}\n                            isFirst={index === 0}\n                            isLast={index === values.length - 1}\n                            onMoveUp={() => bind.moveValueUp(index)}\n                            onMoveDown={() => bind.moveValueDown(index)}\n                            onDelete={() => bind.removeValue(index)}\n                            onClone={() => cloneValue(index)}\n                        />\n                    ))}\n                </Accordion>\n            ) : null}\n            {hasValues ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <BottomMargin>\n                    <AddTemplateButton onTemplate={onTemplate} />\n                </BottomMargin>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BindComponentRenderProp, CmsEditorFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+declare type GetBind = CmsEditorFieldRendererProps["getBind"];
+interface SingleValueDynamicZoneProps {
+    field: CmsModelField;
+    bind: BindComponentRenderProp;
+    contentModel: CmsModel;
+    getBind: GetBind;
+}
+export declare const SingleValueDynamicZone: ({ field, bind, contentModel, getBind }: SingleValueDynamicZoneProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleValueDynamicZone = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
+var _Accordion = require("@webiny/ui/Accordion");
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+var _AddTemplate = require("./AddTemplate");
+var _TemplateIcon = require("./TemplateIcon");
+var SingleValueDynamicZone = function SingleValueDynamicZone(_ref) {
+  var _field$settings;
+  var field = _ref.field,
+    bind = _ref.bind,
+    contentModel = _ref.contentModel,
+    getBind = _ref.getBind;
+  var onTemplate = function onTemplate(template) {
+    bind.onChange({
+      _templateId: template.id
+    });
+  };
+  var templates = ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.templates) || [];
+  var template = bind.value ? templates.find(function (tpl) {
+    return tpl.id === bind.value._templateId;
+  }) : undefined;
+  var Bind = getBind();
+  var unsetValue = function unsetValue() {
+    bind.onChange(null);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, template ? /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    title: template.name,
+    description: template.description,
+    icon: /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
+      icon: template.icon
+    }),
+    open: true,
+    interactive: false,
+    actions: /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
+      onClick: unsetValue
+    }))
+  }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+    fields: template.fields,
+    layout: template.layout || [],
+    contentModel: contentModel,
+    Bind: Bind
+  }))) : null, bind.value ? null : /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateButton, {
+    onTemplate: onTemplate
+  }));
+};
+exports.SingleValueDynamicZone = SingleValueDynamicZone;

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

@@ -0,0 +1 @@
+{"version":3,"names":["SingleValueDynamicZone","field","bind","contentModel","getBind","onTemplate","template","onChange","_templateId","id","templates","settings","value","find","tpl","undefined","Bind","unsetValue","name","description","icon","fields","layout"],"sources":["SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { AddTemplateButton } from \"./AddTemplate\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon\";\nimport {\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsEditorFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\n\ntype GetBind = CmsEditorFieldRendererProps[\"getBind\"];\n\ninterface SingleValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const SingleValueDynamicZone = ({\n    field,\n    bind,\n    contentModel,\n    getBind\n}: SingleValueDynamicZoneProps) => {\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.onChange({ _templateId: template.id });\n    };\n\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = bind.value\n        ? templates.find(tpl => tpl.id === bind.value._templateId)\n        : undefined;\n\n    const Bind = getBind();\n\n    const unsetValue = () => {\n        bind.onChange(null);\n    };\n\n    return (\n        <>\n            {template ? (\n                <Accordion>\n                    <AccordionItem\n                        title={template.name}\n                        description={template.description}\n                        icon={<TemplateIcon icon={template.icon} />}\n                        open={true}\n                        interactive={false}\n                        actions={\n                            <AccordionItem.Actions>\n                                <AccordionItem.Action icon={<DeleteIcon />} onClick={unsetValue} />\n                            </AccordionItem.Actions>\n                        }\n                    >\n                        <Fields\n                            fields={template.fields}\n                            layout={template.layout || []}\n                            contentModel={contentModel}\n                            Bind={Bind}\n                        />\n                    </AccordionItem>\n                </Accordion>\n            ) : null}\n            {bind.value ? null : <AddTemplateButton onTemplate={onTemplate} />}\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAkBO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKA;EAAA;EAAA,IAJ/BC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;EAEP,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAgC,EAAK;IACrDJ,IAAI,CAACK,QAAQ,CAAC;MAAEC,WAAW,EAAEF,QAAQ,CAACG;IAAG,CAAC,CAAC;EAC/C,CAAC;EAED,IAAMC,SAAS,GAAG,oBAAAT,KAAK,CAACU,QAAQ,oDAAd,gBAAgBD,SAAS,KAAI,EAAE;EAEjD,IAAMJ,QAA4C,GAAGJ,IAAI,CAACU,KAAK,GACzDF,SAAS,CAACG,IAAI,CAAC,UAAAC,GAAG;IAAA,OAAIA,GAAG,CAACL,EAAE,KAAKP,IAAI,CAACU,KAAK,CAACJ,WAAW;EAAA,EAAC,GACxDO,SAAS;EAEf,IAAMC,IAAI,GAAGZ,OAAO,EAAE;EAEtB,IAAMa,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrBf,IAAI,CAACK,QAAQ,CAAC,IAAI,CAAC;EACvB,CAAC;EAED,oBACI,4DACKD,QAAQ,gBACL,6BAAC,oBAAS,qBACN,6BAAC,wBAAa;IACV,KAAK,EAAEA,QAAQ,CAACY,IAAK;IACrB,WAAW,EAAEZ,QAAQ,CAACa,WAAY;IAClC,IAAI,eAAE,6BAAC,0BAAY;MAAC,IAAI,EAAEb,QAAQ,CAACc;IAAK,EAAI;IAC5C,IAAI,EAAE,IAAK;IACX,WAAW,EAAE,KAAM;IACnB,OAAO,eACH,6BAAC,wBAAa,CAAC,OAAO,qBAClB,6BAAC,wBAAa,CAAC,MAAM;MAAC,IAAI,eAAE,6BAAC,8BAAU,OAAI;MAAC,OAAO,EAAEH;IAAW,EAAG;EAE1E,gBAED,6BAAC,cAAM;IACH,MAAM,EAAEX,QAAQ,CAACe,MAAO;IACxB,MAAM,EAAEf,QAAQ,CAACgB,MAAM,IAAI,EAAG;IAC9B,YAAY,EAAEnB,YAAa;IAC3B,IAAI,EAAEa;EAAK,EACb,CACU,CACR,GACZ,IAAI,EACPd,IAAI,CAACU,KAAK,GAAG,IAAI,gBAAG,6BAAC,8BAAiB;IAAC,UAAU,EAAEP;EAAW,EAAG,CACnE;AAEX,CAAC;AAAC"}

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

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

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

@@ -0,0 +1,54 @@
+"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,eAAM;EAAA;EAAA;AAAA,0HAO3B;AAED,IAAMC,QAAQ,oBAAGD,eAAM;EAAA;EAAA;AAAA,mGAKtB;AAED,IAAME,QAAQ,oBAAGF,eAAM;EAAA;EAAA;AAAA,6EAMtB;AAED,IAAMG,SAAS,oBAAGH,eAAM,EAACI,sBAAU;EAAA;EAAA;AAAA,yBAElC;AAED,IAAMC,eAAe,oBAAGL,eAAM,EAACI,sBAAU;EAAA;EAAA;AAAA,mFAKxC;AAED,IAAME,UAAU,oBAAGN,eAAM,EAACO,uBAAe;EAAA;EAAA;AAAA,wDAIxC;AAOM,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAAoD;EAAA,IAA9CC,QAAQ,QAARA,QAAQ;IAAEC,UAAU,QAAVA,UAAU;EAC/C,oBACI,6BAAC,aAAa,qBACV,6BAAC,QAAQ,qBACL,6BAAC,0BAAY;IAAC,IAAI,EAAED,QAAQ,CAACE;EAAK,EAAG,CAC9B,eACX,6BAAC,QAAQ,qBACL,6BAAC,SAAS;IAAC,GAAG,EAAE,GAAI;IAAC,GAAG,EAAE;EAAY,GACjCF,QAAQ,CAACG,IAAI,CACN,eACZ,6BAAC,eAAe;IAAC,GAAG,EAAE,GAAI;IAAC,GAAG,EAAE;EAAQ,GACnCH,QAAQ,CAACI,WAAW,CACP,eAClB,6BAAC,UAAU;IAAC,OAAO,EAAE;MAAA,OAAMH,UAAU,CAACD,QAAQ,CAAC;IAAA;EAAC,GAAC,mBAAiB,CAAa,CACxE,CACC;AAExB,CAAC;AAAC"}

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,40 @@
+"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,eAAM;EAAA;EAAA;AAAA,IAAM;AAErC,IAAMC,YAAY,oBAAGD,eAAM;EAAA;EAAA;AAAA,sEAK1B;AAOM,IAAME,eAAe,GAAG,SAAlBA,eAAe,OAAsD;EAAA;EAAA,IAAhDC,UAAU,QAAVA,UAAU;IAAEC,OAAO,QAAPA,OAAO;EACjD,qBAAkB,IAAAC,oBAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,IAAMC,SAAS,GAAG,oBAAAD,KAAK,CAACE,QAAQ,oDAAd,gBAAgBD,SAAS,KAAI,EAAE;EAEjD,oBACI,6BAAC,gBAAgB,qBACb,6BAAC,YAAY,QACRA,SAAS,CAACE,GAAG,CAAC,UAAAC,QAAQ;IAAA,oBACnB,6BAAC,0BAAY;MAAC,GAAG,EAAEA,QAAQ,CAACC,EAAG;MAAC,QAAQ,EAAED,QAAS;MAAC,UAAU,EAAEP;IAAW,EAAG;EAAA,CACjF,CAAC,CACS,eACf,6BAAC,kBAAU;IAAC,OAAO,EAAEC,OAAQ;IAAC,IAAI,eAAE,6BAAC,6BAAS;EAAI,EAAG,CACtC;AAE3B,CAAC;AAAC"}

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,17 @@
+"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,YAAY,OAAoC;EAAA,IAA9BC,IAAI,QAAJA,IAAI;EAC/B,IAAMC,MAAM,GAAGD,IAAI,GAAIA,IAAI,CAACE,KAAK,CAAC,GAAG,CAAC,GAAoCC,SAAS;EAEnF,OAAOF,MAAM,gBAAG,6BAAC,iCAAe;IAAC,IAAI,EAAEA;EAAO,EAAG,GAAG,IAAI;AAC5D,CAAC;AAAC"}

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,56 @@
+"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,YAAG,6FAI1B;AAED,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAAsE;EAAA,IAAhEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAEC,YAAY,QAAZA,YAAY;EACtD,IAAMC,gBAAgB,GAAGH,KAAK,CAACI,cAAc,KAAK,IAAI;EACtD,IAAMC,IAAI,GAAGJ,OAAO,EAAE;EAEtB,IAAMK,SAAS,GAAGH,gBAAgB,GAAGI,4CAAqB,GAAGC,8CAAsB;EAEnF,oBACI,6BAAC,IAAI,QACA,UAAAC,IAAI,EAAI;IACL,uBAA6BA,IAAI,CAACC,UAAU;MAApCC,OAAO,oBAAPA,OAAO;MAAEC,OAAO,oBAAPA,OAAO;IACxB,oBACI,yEACI,6BAAC,oBAAS,qBACN,6BAAC,wBAAa;MACV,KAAK,EAAEZ,KAAK,CAACa,KAAM;MACnB,WAAW,EAAEb,KAAK,CAACc,QAAS;MAC5B,SAAS,EAAEX,gBAAgB,GAAGN,eAAe,GAAGkB;IAAU,gBAE1D,6BAAC,SAAS;MACN,IAAI,EAAEN,IAAK;MACX,KAAK,EAAET,KAAM;MACb,OAAO,EAAEC,OAAQ;MACjB,YAAY,EAAEC;IAAa,EAC7B,CACU,CACR,EACXS,OAAO,KAAK,KAAK,iBACd,6BAAC,sCAAkB;MAAC,KAAK,EAAE;IAAK,GAAEC,OAAO,CAC5C,CACF;EAEX,CAAC,CACE;AAEf,CAAC;AAEM,IAAMI,wBAAsD,GAAG;EAClEC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,wCAAwC;EAC9CC,QAAQ,EAAE;IACNC,YAAY,EAAE,aAAa;IAC3BF,IAAI,EAAE,cAAc;IACpBG,WAAW,EAAE,yBAAyB;IACtCC,MAAM,yBAAY;MAAA,IAATtB,KAAK,SAALA,KAAK;MACV,OAAOA,KAAK,CAACiB,IAAI,KAAK,aAAa;IACvC,CAAC;IACDM,MAAM,kBAACC,KAAK,EAAE;MACV,oBAAO,6BAAC,kBAAkB,EAAKA,KAAK,CAAI;IAC5C;EACJ;AACJ,CAAC;AAAC"}