@webiny/app-headless-cms 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

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

@@ -1,91 +0,0 @@
-"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 _Button = require("@webiny/ui/Button");
-var _TemplateDialog = require("./TemplateDialog");
-var _Typography = require("@webiny/ui/Typography");
-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 _Elevation = require("@webiny/ui/Elevation");
-var AddTemplateButtonContainer = /*#__PURE__*/(0, _styled.default)(_Elevation.Elevation, {
-  label: "AddTemplateButtonContainer",
-  target: "e34m0te0"
-})("padding:25px 0 20px;text-align:center;");
-
-/**
- * This hacking is needed to position the button exactly in the middle of available area and not stretch the parent element.
- */
-var AddTemplateIconContainer = /*#__PURE__*/(0, _styled.default)("div", {
-  label: "AddTemplateIconContainer",
-  target: "e34m0te1"
-})("text-align:center;height:36px;> button{margin-left:-24px;position:absolute;}");
-var Info = /*#__PURE__*/(0, _styled.default)("div", {
-  label: "Info",
-  target: "e34m0te2"
-})("margin-top:8px;display:flex;justify-content:center;align-items:center;> svg{width:20px;margin-right:5px;}");
-function useAddTemplate(params) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showTemplateDialog = _useState2[0],
-    setShowTemplateDialog = _useState2[1];
-  var addTemplate = function addTemplate() {
-    setShowTemplateDialog(true);
-  };
-  var onTemplate = function onTemplate(template) {
-    params.onTemplate(template);
-  };
-  var onDialogClose = function onDialogClose() {
-    setShowTemplateDialog(false);
-  };
-  return {
-    addTemplate: addTemplate,
-    onTemplate: onTemplate,
-    onDialogClose: onDialogClose,
-    showTemplateDialog: showTemplateDialog
-  };
-}
-var AddTemplateButton = function AddTemplateButton(props) {
-  var _useAddTemplate = useAddTemplate({
-      onTemplate: props.onTemplate
-    }),
-    addTemplate = _useAddTemplate.addTemplate,
-    onTemplate = _useAddTemplate.onTemplate,
-    showTemplateDialog = _useAddTemplate.showTemplateDialog,
-    onDialogClose = _useAddTemplate.onDialogClose;
-  return /*#__PURE__*/_react.default.createElement(AddTemplateButtonContainer, {
-    z: 2
-  }, showTemplateDialog ? /*#__PURE__*/_react.default.createElement(_TemplateDialog.TemplateDialog, {
-    onTemplate: onTemplate,
-    onClose: onDialogClose
-  }) : null, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
-    onClick: addTemplate
-  }, "+ 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
-    }),
-    addTemplate = _useAddTemplate2.addTemplate,
-    onTemplate = _useAddTemplate2.onTemplate,
-    showTemplateDialog = _useAddTemplate2.showTemplateDialog,
-    onDialogClose = _useAddTemplate2.onDialogClose;
-  return /*#__PURE__*/_react.default.createElement(AddTemplateIconContainer, null, showTemplateDialog ? /*#__PURE__*/_react.default.createElement(_TemplateDialog.TemplateDialog, {
-    onTemplate: onTemplate,
-    onClose: onDialogClose
-  }) : null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    onClick: addTemplate,
-    icon: /*#__PURE__*/_react.default.createElement(_add_circle_outline.ReactComponent, null)
-  }));
-};
-exports.AddTemplateIcon = AddTemplateIcon;

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

@@ -1 +0,0 @@
-{"version":3,"names":["AddTemplateButtonContainer","styled","Elevation","AddTemplateIconContainer","Info","useAddTemplate","params","useState","showTemplateDialog","setShowTemplateDialog","addTemplate","onTemplate","template","onDialogClose","AddTemplateButton","props","AddTemplateIcon"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { ButtonSecondary, IconButton } from \"@webiny/ui/Button\";\nimport { TemplateDialog } from \"./TemplateDialog\";\nimport { Typography } from \"@webiny/ui/Typography\";\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 { Elevation } from \"@webiny/ui/Elevation\";\n\nconst AddTemplateButtonContainer = styled(Elevation)`\n    padding: 25px 0 20px;\n    text-align: center;\n`;\n\n/**\n * This hacking is needed to position the button exactly in the middle of available area and not stretch the parent element.\n */\nconst AddTemplateIconContainer = styled.div`\n    text-align: center;\n    height: 36px;\n    > button {\n        margin-left: -24px;\n        position: absolute;\n    }\n`;\n\nconst Info = styled.div`\n    margin-top: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    > svg {\n        width: 20px;\n        margin-right: 5px;\n    }\n`;\n\ninterface AddTemplateProps {\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showTemplateDialog, setShowTemplateDialog] = useState(false);\n\n    const addTemplate = () => {\n        setShowTemplateDialog(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate(template);\n    };\n\n    const onDialogClose = () => {\n        setShowTemplateDialog(false);\n    };\n\n    return {\n        addTemplate,\n        onTemplate,\n        onDialogClose,\n        showTemplateDialog\n    };\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { addTemplate, onTemplate, showTemplateDialog, onDialogClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddTemplateButtonContainer z={2}>\n            {showTemplateDialog ? (\n                <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />\n            ) : null}\n            <ButtonSecondary onClick={addTemplate}>+ 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        </AddTemplateButtonContainer>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { addTemplate, onTemplate, showTemplateDialog, onDialogClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddTemplateIconContainer>\n            {showTemplateDialog ? (\n                <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />\n            ) : null}\n            <IconButton onClick={addTemplate} icon={<AddIcon />} />\n        </AddTemplateIconContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,0BAA0B,oBAAGC,eAAM,EAACC,oBAAS;EAAA;EAAA;AAAA,4CAGlD;;AAED;AACA;AACA;AACA,IAAMC,wBAAwB,oBAAGF,eAAM;EAAA;EAAA;AAAA,kFAOtC;AAED,IAAMG,IAAI,oBAAGH,eAAM;EAAA;EAAA;AAAA,+GASlB;AAUD,SAASI,cAAc,CAACC,MAA4B,EAAE;EAClD,gBAAoD,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAA5DC,kBAAkB;IAAEC,qBAAqB;EAEhD,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBD,qBAAqB,CAAC,IAAI,CAAC;EAC/B,CAAC;EAED,IAAME,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAgC,EAAK;IACrDN,MAAM,CAACK,UAAU,CAACC,QAAQ,CAAC;EAC/B,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IACxBJ,qBAAqB,CAAC,KAAK,CAAC;EAChC,CAAC;EAED,OAAO;IACHC,WAAW,EAAXA,WAAW;IACXC,UAAU,EAAVA,UAAU;IACVE,aAAa,EAAbA,aAAa;IACbL,kBAAkB,EAAlBA;EACJ,CAAC;AACL;AAEO,IAAMM,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAuB,EAAK;EAC1D,sBAAuEV,cAAc,CAAC;MAClFM,UAAU,EAAEI,KAAK,CAACJ;IACtB,CAAC,CAAC;IAFMD,WAAW,mBAAXA,WAAW;IAAEC,UAAU,mBAAVA,UAAU;IAAEH,kBAAkB,mBAAlBA,kBAAkB;IAAEK,aAAa,mBAAbA,aAAa;EAIlE,oBACI,6BAAC,0BAA0B;IAAC,CAAC,EAAE;EAAE,GAC5BL,kBAAkB,gBACf,6BAAC,8BAAc;IAAC,UAAU,EAAEG,UAAW;IAAC,OAAO,EAAEE;EAAc,EAAG,GAClE,IAAI,eACR,6BAAC,uBAAe;IAAC,OAAO,EAAEH;EAAY,GAAC,kBAAgB,CAAkB,eACzE,6BAAC,IAAI,qBACD,6BAAC,oBAAQ,OAAG,eACZ,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAU,GAAC,0DAE5B,CAAa,CACV,CACkB;AAErC,CAAC;AAAC;AAEK,IAAMM,eAAe,GAAG,SAAlBA,eAAe,CAAID,KAAuB,EAAK;EACxD,uBAAuEV,cAAc,CAAC;MAClFM,UAAU,EAAEI,KAAK,CAACJ;IACtB,CAAC,CAAC;IAFMD,WAAW,oBAAXA,WAAW;IAAEC,UAAU,oBAAVA,UAAU;IAAEH,kBAAkB,oBAAlBA,kBAAkB;IAAEK,aAAa,oBAAbA,aAAa;EAIlE,oBACI,6BAAC,wBAAwB,QACpBL,kBAAkB,gBACf,6BAAC,8BAAc;IAAC,UAAU,EAAEG,UAAW;IAAC,OAAO,EAAEE;EAAc,EAAG,GAClE,IAAI,eACR,6BAAC,kBAAU;IAAC,OAAO,EAAEH,WAAY;IAAC,IAAI,eAAE,6BAAC,kCAAO;EAAI,EAAG,CAChC;AAEnC,CAAC;AAAC"}

package/admin/plugins/fields/dynamicZone/DynamicZone.d.ts

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

package/admin/plugins/fields/dynamicZone/DynamicZone.js

@@ -1,62 +0,0 @@
-"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.DynamicZone = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Accordion = require("@webiny/ui/Accordion");
-var _AddTemplate = require("./AddTemplate");
-var _DynamicZoneTemplate = require("./DynamicZoneTemplate");
-var _hooks = require("../../../hooks");
-function updateOrCreateTemplate(templates, template) {
-  var templateIndex = templates.findIndex(function (tpl) {
-    return tpl.id === template.id;
-  });
-  if (templateIndex > -1) {
-    return [].concat((0, _toConsumableArray2.default)(templates.slice(0, templateIndex)), [template], (0, _toConsumableArray2.default)(templates.slice(templateIndex + 1)));
-  }
-  return [].concat((0, _toConsumableArray2.default)(templates), [template]);
-}
-var DynamicZone = function DynamicZone() {
-  var _field$settings;
-  var _useModelField = (0, _hooks.useModelField)(),
-    field = _useModelField.field;
-  var _useModelFieldEditor = (0, _hooks.useModelFieldEditor)(),
-    updateField = _useModelFieldEditor.updateField;
-  var newTemplateId = (0, _react.useRef)(undefined);
-  var templates = ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.templates) || [];
-  var onTemplate = function onTemplate(template) {
-    var _field$settings2;
-    var templates = ((_field$settings2 = field.settings) === null || _field$settings2 === void 0 ? void 0 : _field$settings2.templates) || [];
-    newTemplateId.current = template.id;
-    updateField((0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
-      settings: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field.settings || {}), {}, {
-        templates: updateOrCreateTemplate(templates, template)
-      })
-    }));
-  };
-  (0, _react.useEffect)(function () {
-    // We only want to open the accordion item on first mount of a new template.
-    newTemplateId.current = undefined;
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, templates.length ? /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, templates.map(function (template, index) {
-    return /*#__PURE__*/_react.default.createElement(_DynamicZoneTemplate.DynamicZoneTemplate, {
-      key: template.id,
-      open: template.id === newTemplateId.current,
-      index: index,
-      field: field,
-      template: template,
-      onChange: updateField
-    });
-  })) : null, templates.length ? /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateIcon, {
-    onTemplate: onTemplate
-  }) : /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateButton, {
-    onTemplate: onTemplate
-  }));
-};
-exports.DynamicZone = DynamicZone;

package/admin/plugins/fields/dynamicZone/DynamicZone.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["updateOrCreateTemplate","templates","template","templateIndex","findIndex","tpl","id","slice","DynamicZone","useModelField","field","useModelFieldEditor","updateField","newTemplateId","useRef","undefined","settings","onTemplate","current","useEffect","length","map","index"],"sources":["DynamicZone.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport { Accordion } from \"@webiny/ui/Accordion\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { AddTemplateIcon, AddTemplateButton } from \"./AddTemplate\";\nimport { DynamicZoneTemplate } from \"./DynamicZoneTemplate\";\nimport { useModelField, useModelFieldEditor } from \"~/admin/hooks\";\n\nfunction updateOrCreateTemplate(\n    templates: CmsDynamicZoneTemplate[],\n    template: CmsDynamicZoneTemplate\n) {\n    const templateIndex = templates.findIndex(tpl => tpl.id === template.id);\n\n    if (templateIndex > -1) {\n        return [\n            ...templates.slice(0, templateIndex),\n            template,\n            ...templates.slice(templateIndex + 1)\n        ];\n    }\n\n    return [...templates, template];\n}\n\nexport const DynamicZone = () => {\n    const { field } = useModelField();\n    const { updateField } = useModelFieldEditor();\n    const newTemplateId = useRef<string | undefined>(undefined);\n\n    const templates: CmsDynamicZoneTemplate[] = field.settings?.templates || [];\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        const templates = field.settings?.templates || [];\n\n        newTemplateId.current = template.id;\n\n        updateField({\n            ...field,\n            settings: {\n                ...(field.settings || {}),\n                templates: updateOrCreateTemplate(templates, template)\n            }\n        });\n    };\n\n    useEffect(() => {\n        // We only want to open the accordion item on first mount of a new template.\n        newTemplateId.current = undefined;\n    }, []);\n\n    return (\n        <>\n            {templates.length ? (\n                <Accordion>\n                    {templates.map((template, index) => (\n                        <DynamicZoneTemplate\n                            key={template.id}\n                            open={template.id === newTemplateId.current}\n                            index={index}\n                            field={field}\n                            template={template}\n                            onChange={updateField}\n                        />\n                    ))}\n                </Accordion>\n            ) : null}\n            {templates.length ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <AddTemplateButton onTemplate={onTemplate} />\n            )}\n        </>\n    );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAEA,SAASA,sBAAsB,CAC3BC,SAAmC,EACnCC,QAAgC,EAClC;EACE,IAAMC,aAAa,GAAGF,SAAS,CAACG,SAAS,CAAC,UAAAC,GAAG;IAAA,OAAIA,GAAG,CAACC,EAAE,KAAKJ,QAAQ,CAACI,EAAE;EAAA,EAAC;EAExE,IAAIH,aAAa,GAAG,CAAC,CAAC,EAAE;IACpB,kDACOF,SAAS,CAACM,KAAK,CAAC,CAAC,EAAEJ,aAAa,CAAC,IACpCD,QAAQ,oCACLD,SAAS,CAACM,KAAK,CAACJ,aAAa,GAAG,CAAC,CAAC;EAE7C;EAEA,kDAAWF,SAAS,IAAEC,QAAQ;AAClC;AAEO,IAAMM,WAAW,GAAG,SAAdA,WAAW,GAAS;EAAA;EAC7B,qBAAkB,IAAAC,oBAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,2BAAwB,IAAAC,0BAAmB,GAAE;IAArCC,WAAW,wBAAXA,WAAW;EACnB,IAAMC,aAAa,GAAG,IAAAC,aAAM,EAAqBC,SAAS,CAAC;EAE3D,IAAMd,SAAmC,GAAG,oBAAAS,KAAK,CAACM,QAAQ,oDAAd,gBAAgBf,SAAS,KAAI,EAAE;EAE3E,IAAMgB,UAAU,GAAG,SAAbA,UAAU,CAAIf,QAAgC,EAAK;IAAA;IACrD,IAAMD,SAAS,GAAG,qBAAAS,KAAK,CAACM,QAAQ,qDAAd,iBAAgBf,SAAS,KAAI,EAAE;IAEjDY,aAAa,CAACK,OAAO,GAAGhB,QAAQ,CAACI,EAAE;IAEnCM,WAAW,6DACJF,KAAK;MACRM,QAAQ,8DACAN,KAAK,CAACM,QAAQ,IAAI,CAAC,CAAC;QACxBf,SAAS,EAAED,sBAAsB,CAACC,SAAS,EAAEC,QAAQ;MAAC;IACzD,GACH;EACN,CAAC;EAED,IAAAiB,gBAAS,EAAC,YAAM;IACZ;IACAN,aAAa,CAACK,OAAO,GAAGH,SAAS;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI,4DACKd,SAAS,CAACmB,MAAM,gBACb,6BAAC,oBAAS,QACLnB,SAAS,CAACoB,GAAG,CAAC,UAACnB,QAAQ,EAAEoB,KAAK;IAAA,oBAC3B,6BAAC,wCAAmB;MAChB,GAAG,EAAEpB,QAAQ,CAACI,EAAG;MACjB,IAAI,EAAEJ,QAAQ,CAACI,EAAE,KAAKO,aAAa,CAACK,OAAQ;MAC5C,KAAK,EAAEI,KAAM;MACb,KAAK,EAAEZ,KAAM;MACb,QAAQ,EAAER,QAAS;MACnB,QAAQ,EAAEU;IAAY,EACxB;EAAA,CACL,CAAC,CACM,GACZ,IAAI,EACPX,SAAS,CAACmB,MAAM,gBACb,6BAAC,4BAAe;IAAC,UAAU,EAAEH;EAAW,EAAG,gBAE3C,6BAAC,8BAAiB;IAAC,UAAU,EAAEA;EAAW,EAC7C,CACF;AAEX,CAAC;AAAC"}

package/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { CmsDynamicZoneTemplate, CmsModelField } from "../../../../types";
-interface DynamicZoneTemplateProps {
-    index: number;
-    field: CmsModelField;
-    template: CmsDynamicZoneTemplate;
-    onChange: (field: CmsModelField) => void;
-    open: boolean;
-}
-export declare const DynamicZoneTemplate: ({ index, field, template, onChange, open }: DynamicZoneTemplateProps) => JSX.Element;
-export {};

package/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.js

@@ -1,104 +0,0 @@
-"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.DynamicZoneTemplate = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _dotPropImmutable = require("dot-prop-immutable");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _edit = require("@material-design-icons/svg/outlined/edit.svg");
-var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.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 _Accordion = require("@webiny/ui/Accordion");
-var _appAdmin = require("@webiny/app-admin");
-var _arrayUtils = require("../../arrayUtils");
-var _TemplateDialog = require("./TemplateDialog");
-var _FieldEditor = require("../../../components/FieldEditor");
-var TEMPLATES_PATH = "settings.templates";
-var DynamicZoneTemplate = function DynamicZoneTemplate(_ref) {
-  var _field$settings;
-  var index = _ref.index,
-    field = _ref.field,
-    template = _ref.template,
-    onChange = _ref.onChange,
-    open = _ref.open;
-  var _useConfirmationDialo = (0, _appAdmin.useConfirmationDialog)({
-      title: "Delete content template",
-      message: "Are you sure you want to delete this content template?",
-      acceptLabel: "Yes, I'm sure!"
-    }),
-    showConfirmation = _useConfirmationDialo.showConfirmation;
-  var _useState = (0, _react.useState)(undefined),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    templateToEdit = _useState2[0],
-    setTemplateToEdit = _useState2[1];
-  var templates = ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.templates) || [];
-  var isFirst = index === 0;
-  var isLast = index === templates.length - 1;
-  var callbackDeps = [onChange, field, index, template.id];
-  var onDialogClose = (0, _react.useCallback)(function () {
-    setTemplateToEdit(undefined);
-  }, []);
-  var editTemplate = (0, _react.useCallback)(function () {
-    setTemplateToEdit(template);
-  }, [template]);
-  var updateTemplate = (0, _react.useCallback)(function (params) {
-    onChange((0, _dotPropImmutable.set)(field, "".concat(TEMPLATES_PATH, ".").concat(index), function (tpl) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tpl), params);
-    }));
-  }, callbackDeps);
-  var updateFieldsAndLayout = (0, _react.useCallback)(function (params) {
-    updateTemplate((0, _objectSpread2.default)((0, _objectSpread2.default)({}, template), params));
-  }, [updateTemplate]);
-  var moveTemplateUp = (0, _react.useCallback)(function () {
-    onChange((0, _dotPropImmutable.set)(field, TEMPLATES_PATH, (0, _arrayUtils.pullValueAtIndex)(templates, index)));
-  }, callbackDeps);
-  var moveTemplateDown = (0, _react.useCallback)(function () {
-    onChange((0, _dotPropImmutable.set)(field, TEMPLATES_PATH, (0, _arrayUtils.pushValueAtIndex)(templates, index)));
-  }, callbackDeps);
-  var deleteTemplate = (0, _react.useCallback)(function () {
-    showConfirmation(function () {
-      onChange((0, _dotPropImmutable.set)(field, TEMPLATES_PATH, (0, _arrayUtils.removeValueAtIndex)(templates, index)));
-    });
-  }, callbackDeps);
-  var icon = template.icon ? template.icon.split("/") : undefined;
-  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
-    title: template.name,
-    description: template.description,
-    icon: icon ? /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-      icon: icon
-    }) : undefined,
-    open: open,
-    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: moveTemplateUp,
-      disabled: isFirst
-    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
-      icon: /*#__PURE__*/_react.default.createElement(_expand_more.ReactComponent, null),
-      onClick: moveTemplateDown,
-      disabled: isLast
-    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Divider, null), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
-      icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
-      onClick: editTemplate
-    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
-      icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
-      onClick: deleteTemplate
-    }))
-  }, templateToEdit ? /*#__PURE__*/_react.default.createElement(_TemplateDialog.TemplateDialog, {
-    template: templateToEdit,
-    onTemplate: updateTemplate,
-    onClose: onDialogClose
-  }) : null, /*#__PURE__*/_react.default.createElement(_FieldEditor.FieldEditor, {
-    parent: field,
-    fields: template.fields,
-    layout: template.layout,
-    onChange: updateFieldsAndLayout
-  }));
-};
-exports.DynamicZoneTemplate = DynamicZoneTemplate;

package/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["TEMPLATES_PATH","DynamicZoneTemplate","index","field","template","onChange","open","useConfirmationDialog","title","message","acceptLabel","showConfirmation","useState","undefined","templateToEdit","setTemplateToEdit","templates","settings","isFirst","isLast","length","callbackDeps","id","onDialogClose","useCallback","editTemplate","updateTemplate","params","set","tpl","updateFieldsAndLayout","moveTemplateUp","pullValueAtIndex","moveTemplateDown","pushValueAtIndex","deleteTemplate","removeValueAtIndex","icon","split","name","description","fields","layout"],"sources":["DynamicZoneTemplate.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { set } from \"dot-prop-immutable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { ReactComponent as EditIcon } from \"@material-design-icons/svg/outlined/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.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 { AccordionItem } from \"@webiny/ui/Accordion\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport { pullValueAtIndex, pushValueAtIndex, removeValueAtIndex } from \"~/admin/plugins/arrayUtils\";\nimport { CmsDynamicZoneTemplate, CmsEditorFieldsLayout, CmsModelField } from \"~/types\";\nimport { TemplateDialog } from \"./TemplateDialog\";\nimport { FieldEditor } from \"~/admin/components/FieldEditor\";\n\ninterface DynamicZoneTemplateProps {\n    index: number;\n    field: CmsModelField;\n    template: CmsDynamicZoneTemplate;\n    onChange: (field: CmsModelField) => void;\n    open: boolean;\n}\n\ninterface UpdateTemplate {\n    (template: CmsDynamicZoneTemplate): void;\n}\n\ninterface UpdateFieldsAndLayout {\n    (params: { fields: CmsModelField[]; layout: CmsEditorFieldsLayout }): void;\n}\n\nconst TEMPLATES_PATH = \"settings.templates\";\n\nexport const DynamicZoneTemplate = ({\n    index,\n    field,\n    template,\n    onChange,\n    open\n}: DynamicZoneTemplateProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        title: \"Delete content template\",\n        message: \"Are you sure you want to delete this content template?\",\n        acceptLabel: \"Yes, I'm sure!\"\n    });\n\n    const [templateToEdit, setTemplateToEdit] = useState<CmsDynamicZoneTemplate | undefined>(\n        undefined\n    );\n\n    const templates = field.settings?.templates || [];\n    const isFirst = index === 0;\n    const isLast = index === templates.length - 1;\n\n    const callbackDeps = [onChange, field, index, template.id];\n\n    const onDialogClose = useCallback(() => {\n        setTemplateToEdit(undefined);\n    }, []);\n\n    const editTemplate = useCallback(() => {\n        setTemplateToEdit(template);\n    }, [template]);\n\n    const updateTemplate = useCallback<UpdateTemplate>(params => {\n        onChange(\n            set(field, `${TEMPLATES_PATH}.${index}`, (tpl: CmsDynamicZoneTemplate) => {\n                return { ...tpl, ...params };\n            })\n        );\n    }, callbackDeps);\n\n    const updateFieldsAndLayout = useCallback<UpdateFieldsAndLayout>(\n        params => {\n            updateTemplate({ ...template, ...params });\n        },\n        [updateTemplate]\n    );\n\n    const moveTemplateUp = useCallback(() => {\n        onChange(set(field, TEMPLATES_PATH, pullValueAtIndex(templates, index)));\n    }, callbackDeps);\n\n    const moveTemplateDown = useCallback(() => {\n        onChange(set(field, TEMPLATES_PATH, pushValueAtIndex(templates, index)));\n    }, callbackDeps);\n\n    const deleteTemplate = useCallback(() => {\n        showConfirmation(() => {\n            onChange(set(field, TEMPLATES_PATH, removeValueAtIndex(templates, index)));\n        });\n    }, callbackDeps);\n\n    const icon = template.icon ? (template.icon.split(\"/\") as IconProp) : undefined;\n\n    return (\n        <AccordionItem\n            title={template.name}\n            description={template.description}\n            icon={icon ? <FontAwesomeIcon icon={icon} /> : undefined}\n            open={open}\n            actions={\n                <AccordionItem.Actions>\n                    <AccordionItem.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={moveTemplateUp}\n                        disabled={isFirst}\n                    />\n                    <AccordionItem.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={moveTemplateDown}\n                        disabled={isLast}\n                    />\n                    <AccordionItem.Divider />\n                    <AccordionItem.Action icon={<EditIcon />} onClick={editTemplate} />\n                    <AccordionItem.Action icon={<DeleteIcon />} onClick={deleteTemplate} />\n                </AccordionItem.Actions>\n            }\n        >\n            {templateToEdit ? (\n                <TemplateDialog\n                    template={templateToEdit}\n                    onTemplate={updateTemplate}\n                    onClose={onDialogClose}\n                />\n            ) : null}\n\n            <FieldEditor\n                parent={field}\n                fields={template.fields}\n                layout={template.layout}\n                onChange={updateFieldsAndLayout}\n            />\n        </AccordionItem>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fields/dynamicZone/TemplateDialog.d.ts

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

package/admin/plugins/fields/dynamicZone/TemplateDialog.js

@@ -1,141 +0,0 @@
-"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.TemplateDialog = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Button = require("@webiny/ui/Button");
-var _Grid = require("@webiny/ui/Grid");
-var _Input = require("@webiny/ui/Input");
-var _form = require("@webiny/form");
-var _validation = require("@webiny/validation");
-var _utils = require("@webiny/utils");
-var _IconPicker = require("../../../components/IconPicker");
-var _Dialog = require("../../../components/Dialog");
-var _Alert = require("@webiny/ui/Alert");
-var typeNameValidator = function typeNameValidator(value) {
-  var regex = new RegExp("^[A-Z]+[_0-9A-Za-z]+$");
-  if (regex.test(value)) {
-    return true;
-  }
-  throw Error("Must start with a capital letter, may contain numbers, and must not contain spaces.");
-};
-var getGraphQLTypeName = function getGraphQLTypeName(value) {
-  var titleCase = value.charAt(0).toUpperCase() + value.slice(1);
-  return titleCase.replace(/[^a-zA-Z0-9]/g, "");
-};
-var TemplateDialog = function TemplateDialog(props) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showWarning = _useState2[0],
-    setWarning = _useState2[1];
-  var newTemplate = !Boolean(props.template);
-  var dialogTitle = newTemplate ? "Add Template" : "Edit Template";
-  var submitLabel = newTemplate ? "Add Template" : "Update Template";
-  var onSubmit = function onSubmit(template) {
-    if (template.id) {
-      props.onTemplate(template);
-    } else {
-      props.onTemplate((0, _objectSpread2.default)((0, _objectSpread2.default)({}, template), {}, {
-        id: (0, _utils.generateAlphaNumericLowerCaseId)(),
-        fields: [],
-        layout: []
-      }));
-    }
-    props.onClose();
-  };
-  var showGqlTypeNameWarning = function showGqlTypeNameWarning() {
-    setWarning(true);
-  };
-  var hideGqlTypeNameWarning = function hideGqlTypeNameWarning() {
-    setWarning(false);
-  };
-  var checkGqlType = function checkGqlType(data) {
-    var _props$template;
-    if (newTemplate) {
-      return;
-    }
-    if (data.gqlTypeName !== ((_props$template = props.template) === null || _props$template === void 0 ? void 0 : _props$template.gqlTypeName)) {
-      showGqlTypeNameWarning();
-    } else {
-      hideGqlTypeNameWarning();
-    }
-  };
-  var nameOnBlur = function nameOnBlur(form) {
-    return function () {
-      if (!form.data.gqlTypeName) {
-        /**
-         * There is a possibility that name is undefined, so let's check for it.
-         */
-        var name = form.data.name;
-        if (!name) {
-          return;
-        }
-        form.setValue("gqlTypeName", getGraphQLTypeName(name));
-      }
-    };
-  };
-  var onFormChange = function onFormChange(data, form) {
-    checkGqlType(data, form);
-  };
-  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
-    open: true,
-    onClose: props.onClose
-  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
-    onSubmit: onSubmit,
-    data: props.template,
-    onChange: onFormChange
-  }, function (_ref) {
-    var Bind = _ref.Bind,
-      submit = _ref.submit,
-      form = _ref.form;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, dialogTitle), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, showWarning ? /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-      span: 12
-    }, /*#__PURE__*/_react.default.createElement(_Alert.Alert, {
-      title: "GraphQL Schema Change",
-      type: "danger"
-    }, "You've changed the GraphQL schema type name! If your API is being queried by a 3rd party application, this will affect the GraphQL queries in those applications. Make sure your consumers are informed about this change!")) : null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-      span: 12
-    }, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "name",
-      validators: [_validation.validation.create("required")]
-    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-      label: "Name",
-      onBlur: nameOnBlur(form)
-    }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-      span: 12
-    }, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "gqlTypeName",
-      validators: [_validation.validation.create("required"), typeNameValidator]
-    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-      autoFocus: false,
-      label: "GraphQL Type Name",
-      description: "This string will be used to generate the GraphQL schema. "
-    }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-      span: 12
-    }, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "icon",
-      validators: [_validation.validation.create("required")]
-    }, /*#__PURE__*/_react.default.createElement(_IconPicker.IconPicker, {
-      label: "Icon"
-    }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-      span: 12
-    }, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "description",
-      validators: [_validation.validation.create("required")]
-    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-      rows: 3,
-      label: "Description"
-    }))))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
-      onClick: props.onClose
-    }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-      onClick: submit
-    }, submitLabel)));
-  }));
-};
-exports.TemplateDialog = TemplateDialog;

package/admin/plugins/fields/dynamicZone/TemplateDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["typeNameValidator","value","regex","RegExp","test","Error","getGraphQLTypeName","titleCase","charAt","toUpperCase","slice","replace","TemplateDialog","props","useState","showWarning","setWarning","newTemplate","Boolean","template","dialogTitle","submitLabel","onSubmit","id","onTemplate","generateAlphaNumericLowerCaseId","fields","layout","onClose","showGqlTypeNameWarning","hideGqlTypeNameWarning","checkGqlType","data","gqlTypeName","nameOnBlur","form","name","setValue","onFormChange","Bind","submit","validation","create"],"sources":["TemplateDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ButtonPrimary, ButtonDefault } from \"@webiny/ui/Button\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Form, FormAPI, FormOnSubmit } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { IconPicker } from \"~/admin/components/IconPicker\";\nimport { Dialog, DialogTitle, DialogContent, DialogActions } from \"~/admin/components/Dialog\";\nimport { Alert } from \"@webiny/ui/Alert\";\n\nconst typeNameValidator = (value: string) => {\n    const regex = new RegExp(\"^[A-Z]+[_0-9A-Za-z]+$\");\n    if (regex.test(value)) {\n        return true;\n    }\n\n    throw Error(\n        `Must start with a capital letter, may contain numbers, and must not contain spaces.`\n    );\n};\n\nconst getGraphQLTypeName = (value: string) => {\n    const titleCase = value.charAt(0).toUpperCase() + value.slice(1);\n    return titleCase.replace(/[^a-zA-Z0-9]/g, \"\");\n};\n\ninterface TemplateDialogProps {\n    onClose: () => void;\n    template?: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateDialog = (props: TemplateDialogProps) => {\n    const [showWarning, setWarning] = useState(false);\n    const newTemplate = !Boolean(props.template);\n    const dialogTitle = newTemplate ? \"Add Template\" : \"Edit Template\";\n    const submitLabel = newTemplate ? \"Add Template\" : \"Update Template\";\n\n    const onSubmit: FormOnSubmit<CmsDynamicZoneTemplate> = template => {\n        if (template.id) {\n            props.onTemplate(template);\n        } else {\n            props.onTemplate({\n                ...template,\n                id: generateAlphaNumericLowerCaseId(),\n                fields: [],\n                layout: []\n            });\n        }\n        props.onClose();\n    };\n\n    const showGqlTypeNameWarning = () => {\n        setWarning(true);\n    };\n\n    const hideGqlTypeNameWarning = () => {\n        setWarning(false);\n    };\n\n    const checkGqlType: FormOnSubmit<CmsDynamicZoneTemplate> = data => {\n        if (newTemplate) {\n            return;\n        }\n\n        if (data.gqlTypeName !== props.template?.gqlTypeName) {\n            showGqlTypeNameWarning();\n        } else {\n            hideGqlTypeNameWarning();\n        }\n    };\n\n    const nameOnBlur = (form: FormAPI<CmsDynamicZoneTemplate>) => () => {\n        if (!form.data.gqlTypeName) {\n            /**\n             * There is a possibility that name is undefined, so let's check for it.\n             */\n            const name = form.data.name;\n            if (!name) {\n                return;\n            }\n            form.setValue(\"gqlTypeName\", getGraphQLTypeName(name));\n        }\n    };\n\n    const onFormChange: FormOnSubmit<CmsDynamicZoneTemplate> = (data, form) => {\n        checkGqlType(data, form);\n    };\n\n    return (\n        <Dialog open={true} onClose={props.onClose}>\n            <Form<CmsDynamicZoneTemplate>\n                onSubmit={onSubmit}\n                data={props.template}\n                onChange={onFormChange}\n            >\n                {({ Bind, submit, form }) => (\n                    <>\n                        <DialogTitle>{dialogTitle}</DialogTitle>\n                        <DialogContent>\n                            <Grid>\n                                {showWarning ? (\n                                    <Cell span={12}>\n                                        <Alert title={\"GraphQL Schema Change\"} type={\"danger\"}>\n                                            You&apos;ve changed the GraphQL schema type name! If\n                                            your API is being queried by a 3rd party application,\n                                            this will affect the GraphQL queries in those\n                                            applications. Make sure your consumers are informed\n                                            about this change!\n                                        </Alert>\n                                    </Cell>\n                                ) : null}\n                                <Cell span={12}>\n                                    <Bind\n                                        name={\"name\"}\n                                        validators={[validation.create(\"required\")]}\n                                    >\n                                        <Input label={\"Name\"} onBlur={nameOnBlur(form)} />\n                                    </Bind>\n                                </Cell>\n                                <Cell span={12}>\n                                    <Bind\n                                        name={\"gqlTypeName\"}\n                                        validators={[\n                                            validation.create(\"required\"),\n                                            typeNameValidator\n                                        ]}\n                                    >\n                                        <Input\n                                            autoFocus={false}\n                                            label={\"GraphQL Type Name\"}\n                                            description={\n                                                \"This string will be used to generate the GraphQL schema. \"\n                                            }\n                                        />\n                                    </Bind>\n                                </Cell>\n                                <Cell span={12}>\n                                    <Bind\n                                        name={\"icon\"}\n                                        validators={[validation.create(\"required\")]}\n                                    >\n                                        <IconPicker label={\"Icon\"} />\n                                    </Bind>\n                                </Cell>\n                                <Cell span={12}>\n                                    <Bind\n                                        name={\"description\"}\n                                        validators={[validation.create(\"required\")]}\n                                    >\n                                        <Input rows={3} label={\"Description\"} />\n                                    </Bind>\n                                </Cell>\n                            </Grid>\n                        </DialogContent>\n                        <DialogActions>\n                            <ButtonDefault onClick={props.onClose}>Cancel</ButtonDefault>\n                            <ButtonPrimary onClick={submit}>{submitLabel}</ButtonPrimary>\n                        </DialogActions>\n                    </>\n                )}\n            </Form>\n        </Dialog>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fields/dynamicZone/commonValidators.d.ts

@@ -1,2 +0,0 @@
-import { CmsModelFieldValidatorConfig } from "../../../../types";
-export declare const commonValidators: CmsModelFieldValidatorConfig[];

package/admin/plugins/fields/dynamicZone/commonValidators.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.commonValidators = void 0;
-var commonValidators = [{
-  name: "minLength",
-  label: "Minimum number of entries",
-  description: "Define the minimum number of entries a user must create.",
-  defaultMessage: "You must create at least {value} entries.",
-  variables: [{
-    name: "value",
-    description: "This defines the minimum number of entries a user must create."
-  }]
-}, {
-  name: "maxLength",
-  label: "Maximum number of entries",
-  description: "Define the maximum number of entries a user can create.",
-  defaultMessage: "You have too many entries (max: {value}).",
-  variables: [{
-    name: "value",
-    description: "This defines the maximum number of entries a user can create."
-  }]
-}];
-exports.commonValidators = commonValidators;

package/admin/plugins/fields/dynamicZone/commonValidators.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["commonValidators","name","label","description","defaultMessage","variables"],"sources":["commonValidators.ts"],"sourcesContent":["import { CmsModelFieldValidatorConfig } from \"~/types\";\n\nexport const commonValidators: CmsModelFieldValidatorConfig[] = [\n    {\n        name: \"minLength\",\n        label: \"Minimum number of entries\",\n        description: \"Define the minimum number of entries a user must create.\",\n        defaultMessage: \"You must create at least {value} entries.\",\n        variables: [\n            {\n                name: \"value\",\n                description: \"This defines the minimum number of entries a user must create.\"\n            }\n        ]\n    },\n    {\n        name: \"maxLength\",\n        label: \"Maximum number of entries\",\n        description: \"Define the maximum number of entries a user can create.\",\n        defaultMessage: \"You have too many entries (max: {value}).\",\n        variables: [\n            {\n                name: \"value\",\n                description: \"This defines the maximum number of entries a user can create.\"\n            }\n        ]\n    }\n];\n"],"mappings":";;;;;;AAEO,IAAMA,gBAAgD,GAAG,CAC5D;EACIC,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,2BAA2B;EAClCC,WAAW,EAAE,0DAA0D;EACvEC,cAAc,EAAE,2CAA2C;EAC3DC,SAAS,EAAE,CACP;IACIJ,IAAI,EAAE,OAAO;IACbE,WAAW,EAAE;EACjB,CAAC;AAET,CAAC,EACD;EACIF,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,2BAA2B;EAClCC,WAAW,EAAE,yDAAyD;EACtEC,cAAc,EAAE,2CAA2C;EAC3DC,SAAS,EAAE,CACP;IACIJ,IAAI,EAAE,OAAO;IACbE,WAAW,EAAE;EACjB,CAAC;AAET,CAAC,CACJ;AAAC"}

package/admin/plugins/fields/dynamicZone.d.ts

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

package/admin/plugins/fields/dynamicZone.js

@@ -1,83 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dynamicZoneField = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _dynamic_form = require("@material-design-icons/svg/outlined/dynamic_form.svg");
-var _i18n = require("@webiny/app/i18n");
-var _DynamicZone = require("./dynamicZone/DynamicZone");
-var _createFieldsList = require("../../graphql/createFieldsList");
-var _createTypeName = require("../../../utils/createTypeName");
-var _commonValidators = require("./dynamicZone/commonValidators");
-var _templateObject, _templateObject2, _templateObject3;
-var t = _i18n.i18n.ns("app-headless-cms/admin/fields");
-var listValidators = {
-  validators: _commonValidators.commonValidators,
-  title: "List validators",
-  description: "These validators are applied to the entire dynamic zone."
-};
-var dynamicZoneField = {
-  type: "cms-editor-field-type",
-  name: "cms-editor-field-type-dynamic-zone",
-  field: {
-    type: "dynamicZone",
-    label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Dynamic Zone"]))),
-    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Define content templates to be used during content creation."]))),
-    icon: /*#__PURE__*/_react.default.createElement(_dynamic_form.ReactComponent, null),
-    allowMultipleValues: true,
-    allowPredefinedValues: false,
-    validators: function validators(field) {
-      if (field.multipleValues) {
-        return {
-          validators: ["dynamicZone"],
-          title: "Template Validators",
-          description: "Validators for each of the templates in this dynamic zone."
-        };
-      }
-      return ["required"];
-    },
-    listValidators: listValidators,
-    canAccept: function canAccept(_, draggable) {
-      return draggable.fieldType !== "dynamicZone";
-    },
-    multipleValuesLabel: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Use as a list of values"]))),
-    createField: function createField() {
-      return {
-        type: this.type,
-        listValidation: [{
-          name: "dynamicZone"
-        }],
-        settings: {
-          templates: []
-        },
-        renderer: {
-          name: "dynamicZone"
-        }
-      };
-    },
-    render: function render() {
-      return /*#__PURE__*/_react.default.createElement(_DynamicZone.DynamicZone, null);
-    },
-    graphql: {
-      queryField: function queryField(_ref) {
-        var _field$settings;
-        var model = _ref.model,
-          field = _ref.field;
-        var prefix = "".concat(model.singularApiName, "_").concat((0, _createTypeName.createTypeName)(field.fieldId));
-        var templates = ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.templates) || [];
-        var fragments = templates.map(function (template) {
-          return "...on ".concat(prefix, "_").concat(template.gqlTypeName, " {\n                        ").concat((0, _createFieldsList.createFieldsList)({
-            model: model,
-            fields: template.fields || []
-          }), "\n                        _templateId\n                        __typename\n                    }");
-        });
-        return "{ ".concat(fragments.join("\n"), " }");
-      }
-    }
-  }
-};
-exports.dynamicZoneField = dynamicZoneField;