@webiny/app-headless-cms 5.34.8 → 5.35.0-beta.0

package/admin/plugins/fields/dateTime.js

@@ -1,43 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _Select = require("@webiny/ui/Select");
-
 var _Input = require("@webiny/ui/Input");
-
 var _i18n = require("@webiny/app/i18n");
-
 var _scheduleBlack24px = require("./icons/schedule-black-24px.svg");
-
 var _hooks = require("../../hooks");
-
 var _form = require("@webiny/form");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
-
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields");
-
 var DateTimeSettings = function DateTimeSettings() {
   var _useModel = (0, _hooks.useModel)(),
-      model = _useModel.model;
-
+    model = _useModel.model;
   var _useModelField = (0, _hooks.useModelField)(),
-      field = _useModelField.field;
-
+    field = _useModelField.field;
   var lockedFields = model.lockedFields || [];
   var fieldId = (0, _get2.default)(field, "fieldId", null);
   var lockedField = lockedFields.find(function (lockedField) {
@@ -79,7 +63,6 @@ var DateTimeSettings = function DateTimeSettings() {
     value: t(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["current"])))
   }, t(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["Current date/time"])))))))));
 };
-
 var plugin = {
   type: "cms-editor-field-type",
   name: "cms-editor-field-type-dateTime",

package/admin/plugins/fields/dateTime.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","DateTimeSettings","useModel","model","useModelField","field","lockedFields","fieldId","lockedField","find","Boolean","formatType","plugin","type","name","label","description","icon","validators","allowMultipleValues","allowPredefinedValues","multipleValuesLabel","createField","settings","validation","renderer","renderSettings"],"sources":["dateTime.tsx"],"sourcesContent":["import React from \"react\";\nimport { get } from \"lodash\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CmsModelField, CmsModelFieldTypePlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DateTimeIcon } from \"./icons/schedule-black-24px.svg\";\nimport { useModel, useModelField } from \"~/admin/hooks\";\nimport { Bind } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\nconst DateTimeSettings = () => {\n    const { model } = useModel();\n    const { field } = useModelField();\n    const lockedFields = model.lockedFields || [];\n    const fieldId = get(field, \"fieldId\", null);\n    const lockedField = lockedFields.find(\n        lockedField => lockedField.fieldId === fieldId\n    ) as CmsModelField<{\n        formatType: string;\n    }>;\n\n    return (\n        <>\n            <Grid>\n                <Cell span={12}>\n                    <Bind name={\"placeholderText\"}>\n                        <Input\n                            label={t`Placeholder text`}\n                            description={t`Placeholder text (optional)`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            <Grid>\n                <Cell span={6}>\n                    <Bind name={\"settings.type\"}>\n                        <Select\n                            label={t`Format`}\n                            description={t`Cannot be changed later`}\n                            disabled={lockedField && Boolean(lockedField.formatType)}\n                        >\n                            <option value={t`date`}>{t`Date only`}</option>\n                            <option value={t`time`}>{t`Time only`}</option>\n                            <option\n                                value={t`dateTimeWithTimezone`}\n                            >{t`Date and time with timezone`}</option>\n                            <option\n                                value={t`dateTimeWithoutTimezone`}\n                            >{t`Date and time without timezone`}</option>\n                        </Select>\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"settings.defaultSetValue\"}>\n                        <Select\n                            label={t`Default Admin UI value`}\n                            description={\"Affects the Admin UI only\"}\n                        >\n                            <option value={t`null`}>{t`Leave empty (null value)`}</option>\n                            <option value={t`current`}>{t`Current date/time`}</option>\n                        </Select>\n                    </Bind>\n                </Cell>\n            </Grid>\n        </>\n    );\n};\n\nconst plugin: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-dateTime\",\n    field: {\n        type: \"datetime\",\n        label: t`Date/Time`,\n        description: t`Store date and time.`,\n        icon: <DateTimeIcon />,\n        validators: [\"required\", \"dateGte\", \"dateLte\"],\n        allowMultipleValues: true,\n        allowPredefinedValues: false, // TODO: implement \"renderPredefinedValues\" and set to true.\n        multipleValuesLabel: t`Use as a list of dates and times`,\n        createField() {\n            return {\n                type: this.type,\n                settings: {\n                    type: \"date\"\n                },\n                validation: [],\n                renderer: {\n                    name: \"\"\n                }\n            };\n        },\n        renderSettings() {\n            return <DateTimeSettings />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","DateTimeSettings","useModel","model","useModelField","field","lockedFields","fieldId","lockedField","find","Boolean","formatType","plugin","type","name","label","description","icon","validators","allowMultipleValues","allowPredefinedValues","multipleValuesLabel","createField","settings","validation","renderer","renderSettings"],"sources":["dateTime.tsx"],"sourcesContent":["import React from \"react\";\nimport { get } from \"lodash\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CmsModelField, CmsModelFieldTypePlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DateTimeIcon } from \"./icons/schedule-black-24px.svg\";\nimport { useModel, useModelField } from \"~/admin/hooks\";\nimport { Bind } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\nconst DateTimeSettings = () => {\n    const { model } = useModel();\n    const { field } = useModelField();\n    const lockedFields = model.lockedFields || [];\n    const fieldId = get(field, \"fieldId\", null);\n    const lockedField = lockedFields.find(\n        lockedField => lockedField.fieldId === fieldId\n    ) as CmsModelField<{\n        formatType: string;\n    }>;\n\n    return (\n        <>\n            <Grid>\n                <Cell span={12}>\n                    <Bind name={\"placeholderText\"}>\n                        <Input\n                            label={t`Placeholder text`}\n                            description={t`Placeholder text (optional)`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            <Grid>\n                <Cell span={6}>\n                    <Bind name={\"settings.type\"}>\n                        <Select\n                            label={t`Format`}\n                            description={t`Cannot be changed later`}\n                            disabled={lockedField && Boolean(lockedField.formatType)}\n                        >\n                            <option value={t`date`}>{t`Date only`}</option>\n                            <option value={t`time`}>{t`Time only`}</option>\n                            <option\n                                value={t`dateTimeWithTimezone`}\n                            >{t`Date and time with timezone`}</option>\n                            <option\n                                value={t`dateTimeWithoutTimezone`}\n                            >{t`Date and time without timezone`}</option>\n                        </Select>\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"settings.defaultSetValue\"}>\n                        <Select\n                            label={t`Default Admin UI value`}\n                            description={\"Affects the Admin UI only\"}\n                        >\n                            <option value={t`null`}>{t`Leave empty (null value)`}</option>\n                            <option value={t`current`}>{t`Current date/time`}</option>\n                        </Select>\n                    </Bind>\n                </Cell>\n            </Grid>\n        </>\n    );\n};\n\nconst plugin: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-dateTime\",\n    field: {\n        type: \"datetime\",\n        label: t`Date/Time`,\n        description: t`Store date and time.`,\n        icon: <DateTimeIcon />,\n        validators: [\"required\", \"dateGte\", \"dateLte\"],\n        allowMultipleValues: true,\n        allowPredefinedValues: false, // TODO: implement \"renderPredefinedValues\" and set to true.\n        multipleValuesLabel: t`Use as a list of dates and times`,\n        createField() {\n            return {\n                type: this.type,\n                settings: {\n                    type: \"date\"\n                },\n                validation: [],\n                renderer: {\n                    name: \"\"\n                }\n            };\n        },\n        renderSettings() {\n            return <DateTimeSettings />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { CmsDynamicZoneTemplate } from "../../../../types";
 interface AddTemplateProps {
     onTemplate: UseAddTemplateParams["onTemplate"];
@@ -6,6 +6,6 @@ interface AddTemplateProps {
 interface UseAddTemplateParams {
     onTemplate: (template: CmsDynamicZoneTemplate) => void;
 }
-export declare const AddTemplateButton: (props: AddTemplateProps) => JSX.Element;
-export declare const AddTemplateIcon: (props: AddTemplateProps) => JSX.Element;
+export declare const AddTemplateButton: React.VFC<AddTemplateProps>;
+export declare const AddTemplateIcon: React.VFC<AddTemplateProps>;
 export {};

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

@@ -1,40 +1,28 @@
 "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"
@@ -43,25 +31,20 @@ 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];
-
+    _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,
@@ -69,16 +52,14 @@ function useAddTemplate(params) {
     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;
-
+      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, {
@@ -90,18 +71,15 @@ var AddTemplateButton = function AddTemplateButton(props) {
     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;
-
+      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
@@ -110,5 +88,4 @@ var AddTemplateIcon = function AddTemplateIcon(props) {
     icon: /*#__PURE__*/_react.default.createElement(_add_circle_outline.ReactComponent, null)
   }));
 };
-
 exports.AddTemplateIcon = AddTemplateIcon;

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

@@ -1 +1 @@
-{"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,eAAH,EAAUC,oBAAV;EAAA;EAAA;AAAA,4CAAhC;AAKA;AACA;AACA;;AACA,IAAMC,wBAAwB,oBAAGF,eAAH;EAAA;EAAA;AAAA,kFAA9B;AASA,IAAMG,IAAI,oBAAGH,eAAH;EAAA;EAAA;AAAA,+GAAV;;AAmBA,SAASI,cAAT,CAAwBC,MAAxB,EAAsD;EAClD,gBAAoD,IAAAC,eAAA,EAAS,KAAT,CAApD;EAAA;EAAA,IAAOC,kBAAP;EAAA,IAA2BC,qBAA3B;;EAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;IACtBD,qBAAqB,CAAC,IAAD,CAArB;EACH,CAFD;;EAIA,IAAME,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAAsC;IACrDN,MAAM,CAACK,UAAP,CAAkBC,QAAlB;EACH,CAFD;;EAIA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;IACxBJ,qBAAqB,CAAC,KAAD,CAArB;EACH,CAFD;;EAIA,OAAO;IACHC,WAAW,EAAXA,WADG;IAEHC,UAAU,EAAVA,UAFG;IAGHE,aAAa,EAAbA,aAHG;IAIHL,kBAAkB,EAAlBA;EAJG,CAAP;AAMH;;AAEM,IAAMM,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAA6B;EAC1D,sBAAuEV,cAAc,CAAC;IAClFM,UAAU,EAAEI,KAAK,CAACJ;EADgE,CAAD,CAArF;EAAA,IAAQD,WAAR,mBAAQA,WAAR;EAAA,IAAqBC,UAArB,mBAAqBA,UAArB;EAAA,IAAiCH,kBAAjC,mBAAiCA,kBAAjC;EAAA,IAAqDK,aAArD,mBAAqDA,aAArD;;EAIA,oBACI,6BAAC,0BAAD;IAA4B,CAAC,EAAE;EAA/B,GACKL,kBAAkB,gBACf,6BAAC,8BAAD;IAAgB,UAAU,EAAEG,UAA5B;IAAwC,OAAO,EAAEE;EAAjD,EADe,GAEf,IAHR,eAII,6BAAC,uBAAD;IAAiB,OAAO,EAAEH;EAA1B,GAAuC,kBAAvC,CAJJ,eAKI,6BAAC,IAAD,qBACI,6BAAC,oBAAD,OADJ,eAEI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA4B,0DAA5B,CAFJ,CALJ,CADJ;AAcH,CAnBM;;;;AAqBA,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACD,KAAD,EAA6B;EACxD,uBAAuEV,cAAc,CAAC;IAClFM,UAAU,EAAEI,KAAK,CAACJ;EADgE,CAAD,CAArF;EAAA,IAAQD,WAAR,oBAAQA,WAAR;EAAA,IAAqBC,UAArB,oBAAqBA,UAArB;EAAA,IAAiCH,kBAAjC,oBAAiCA,kBAAjC;EAAA,IAAqDK,aAArD,oBAAqDA,aAArD;;EAIA,oBACI,6BAAC,wBAAD,QACKL,kBAAkB,gBACf,6BAAC,8BAAD;IAAgB,UAAU,EAAEG,UAA5B;IAAwC,OAAO,EAAEE;EAAjD,EADe,GAEf,IAHR,eAII,6BAAC,kBAAD;IAAY,OAAO,EAAEH,WAArB;IAAkC,IAAI,eAAE,6BAAC,kCAAD;EAAxC,EAJJ,CADJ;AAQH,CAbM"}
+{"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\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\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: React.VFC<AddTemplateProps> = props => {\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: React.VFC<AddTemplateProps> = props => {\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,kFAQtC;AAED,IAAMG,IAAI,oBAAGH,eAAM;EAAA;EAAA;AAAA,+GAUlB;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,iBAA8C,GAAG,SAAjDA,iBAA8C,CAAGC,KAAK,EAAI;EACnE,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,eAA4C,GAAG,SAA/CA,eAA4C,CAAGD,KAAK,EAAI;EACjE,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 +1,2 @@
-/// <reference types="react" />
-export declare const DynamicZone: () => JSX.Element;
+import React from "react";
+export declare const DynamicZone: React.VFC;

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

@@ -1,55 +1,37 @@
 "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;
-
+    field = _useModelField.field;
   var _useModelFieldEditor = (0, _hooks.useModelFieldEditor)(),
-      updateField = _useModelFieldEditor.updateField;
-
+    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), {}, {
@@ -58,7 +40,6 @@ var DynamicZone = function DynamicZone() {
       })
     }));
   };
-
   (0, _react.useEffect)(function () {
     // We only want to open the accordion item on first mount of a new template.
     newTemplateId.current = undefined;
@@ -78,5 +59,4 @@ var DynamicZone = function DynamicZone() {
     onTemplate: onTemplate
   }));
 };
-
 exports.DynamicZone = DynamicZone;

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

@@ -1 +1 @@
-{"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,sBAAT,CACIC,SADJ,EAEIC,QAFJ,EAGE;EACE,IAAMC,aAAa,GAAGF,SAAS,CAACG,SAAV,CAAoB,UAAAC,GAAG;IAAA,OAAIA,GAAG,CAACC,EAAJ,KAAWJ,QAAQ,CAACI,EAAxB;EAAA,CAAvB,CAAtB;;EAEA,IAAIH,aAAa,GAAG,CAAC,CAArB,EAAwB;IACpB,kDACOF,SAAS,CAACM,KAAV,CAAgB,CAAhB,EAAmBJ,aAAnB,CADP,IAEID,QAFJ,oCAGOD,SAAS,CAACM,KAAV,CAAgBJ,aAAa,GAAG,CAAhC,CAHP;EAKH;;EAED,kDAAWF,SAAX,IAAsBC,QAAtB;AACH;;AAEM,IAAMM,WAAW,GAAG,SAAdA,WAAc,GAAM;EAAA;;EAC7B,qBAAkB,IAAAC,oBAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,2BAAwB,IAAAC,0BAAA,GAAxB;EAAA,IAAQC,WAAR,wBAAQA,WAAR;;EACA,IAAMC,aAAa,GAAG,IAAAC,aAAA,EAA2BC,SAA3B,CAAtB;EAEA,IAAMd,SAAmC,GAAG,oBAAAS,KAAK,CAACM,QAAN,oEAAgBf,SAAhB,KAA6B,EAAzE;;EAEA,IAAMgB,UAAU,GAAG,SAAbA,UAAa,CAACf,QAAD,EAAsC;IAAA;;IACrD,IAAMD,SAAS,GAAG,qBAAAS,KAAK,CAACM,QAAN,sEAAgBf,SAAhB,KAA6B,EAA/C;IAEAY,aAAa,CAACK,OAAd,GAAwBhB,QAAQ,CAACI,EAAjC;IAEAM,WAAW,6DACJF,KADI;MAEPM,QAAQ,8DACAN,KAAK,CAACM,QAAN,IAAkB,EADlB;QAEJf,SAAS,EAAED,sBAAsB,CAACC,SAAD,EAAYC,QAAZ;MAF7B;IAFD,GAAX;EAOH,CAZD;;EAcA,IAAAiB,gBAAA,EAAU,YAAM;IACZ;IACAN,aAAa,CAACK,OAAd,GAAwBH,SAAxB;EACH,CAHD,EAGG,EAHH;EAKA,oBACI,4DACKd,SAAS,CAACmB,MAAV,gBACG,6BAAC,oBAAD,QACKnB,SAAS,CAACoB,GAAV,CAAc,UAACnB,QAAD,EAAWoB,KAAX;IAAA,oBACX,6BAAC,wCAAD;MACI,GAAG,EAAEpB,QAAQ,CAACI,EADlB;MAEI,IAAI,EAAEJ,QAAQ,CAACI,EAAT,KAAgBO,aAAa,CAACK,OAFxC;MAGI,KAAK,EAAEI,KAHX;MAII,KAAK,EAAEZ,KAJX;MAKI,QAAQ,EAAER,QALd;MAMI,QAAQ,EAAEU;IANd,EADW;EAAA,CAAd,CADL,CADH,GAaG,IAdR,EAeKX,SAAS,CAACmB,MAAV,gBACG,6BAAC,4BAAD;IAAiB,UAAU,EAAEH;EAA7B,EADH,gBAGG,6BAAC,8BAAD;IAAmB,UAAU,EAAEA;EAA/B,EAlBR,CADJ;AAuBH,CAjDM"}
+{"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: React.VFC = () => {\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,WAAsB,GAAG,SAAzBA,WAAsB,GAAS;EAAA;EACxC,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,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { CmsDynamicZoneTemplate, CmsModelField } from "../../../../types";
 interface DynamicZoneTemplateProps {
     index: number;
@@ -7,5 +7,5 @@ interface DynamicZoneTemplateProps {
     onChange: (field: CmsModelField) => void;
     open: boolean;
 }
-export declare const DynamicZoneTemplate: ({ index, field, template, onChange, open }: DynamicZoneTemplateProps) => JSX.Element;
+export declare const DynamicZoneTemplate: React.VFC<DynamicZoneTemplateProps>;
 export {};

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

@@ -1,65 +1,43 @@
 "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;
-
+    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;
-
+      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];
-
+    _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;
@@ -123,5 +101,4 @@ var DynamicZoneTemplate = function DynamicZoneTemplate(_ref) {
     onChange: updateFieldsAndLayout
   }));
 };
-
 exports.DynamicZoneTemplate = DynamicZoneTemplate;

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

@@ -1 +1 @@
-{"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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"}
+{"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: React.VFC<DynamicZoneTemplateProps> = ({\n    index,\n    field,\n    template,\n    onChange,\n    open\n}) => {\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 +1,9 @@
-/// <reference types="react" />
+import React from "react";
 import { CmsDynamicZoneTemplate } from "../../../../types";
 interface TemplateDialogProps {
     onClose: () => void;
     template?: CmsDynamicZoneTemplate;
     onTemplate: (template: CmsDynamicZoneTemplate) => void;
 }
-export declare const TemplateDialog: (props: TemplateDialogProps) => JSX.Element;
+export declare const TemplateDialog: React.VFC<TemplateDialogProps>;
 export {};