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

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

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","Fieldset","styled","position","width","marginBottom","display","right","top","controlButtons","css","alignItems","justifyContent","marginRight","emptyStyles","textAlign","Header","onSelectedChange","params","bind","field","targetIndex","index","setToValue","value","form","setValue","map","defaultValue","multipleValues","selected","PredefinedValuesDynamicFieldset","getBind","renderValueInput","Bind","useModelField","actions","header","row","empty","add","remove"],"sources":["PredefinedValuesDynamicFieldset.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Grid, Cell, GridInner } from \"@webiny/ui/Grid\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { DynamicFieldset } from \"@webiny/ui/DynamicFieldset\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { BindComponent, CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { useModelField } from \"~/admin/hooks\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/dynamic-fieldset-predefined-values\");\n\nconst Fieldset = styled(\"div\")({\n    position: \"relative\",\n    width: \"100%\",\n    marginBottom: 15,\n    \".webiny-ui-button\": {\n        position: \"absolute\",\n        display: \"block\",\n        right: 10,\n        top: 13\n    }\n});\n\nconst controlButtons = css({\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    \">button\": {\n        marginRight: 15\n    }\n});\n\nconst emptyStyles = css({\n    textAlign: \"center\"\n});\n\nconst Header = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    marginBottom: 15\n});\n\ninterface PredefinedValue {\n    selected?: boolean;\n}\n\ninterface OnSelectedParams {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n    index: number;\n    value: boolean;\n}\nconst onSelectedChange = (params: OnSelectedParams) => {\n    const { bind, field, index: targetIndex, value: setToValue } = params;\n    bind.form.setValue(\n        \"predefinedValues.values\",\n        bind.value.map((value: PredefinedValue, index: number) => {\n            const defaultValue = field.multipleValues ? value.selected : false;\n            return {\n                ...value,\n                selected: index === targetIndex ? setToValue : defaultValue\n            };\n        })\n    );\n};\n\nexport interface Props {\n    getBind: (value?: any) => BindComponent;\n    renderValueInput?: (Bind: BindComponent) => React.ReactNode;\n}\nconst PredefinedValuesDynamicFieldset: React.FC<Props> = ({ getBind, renderValueInput = null }) => {\n    const Bind = getBind();\n    const { field } = useModelField();\n\n    return (\n        <Grid>\n            <Cell span={12}>\n                <Bind>\n                    {bind => {\n                        return (\n                            <DynamicFieldset {...bind}>\n                                {({ actions, header, row, empty }) => {\n                                    return (\n                                        <React.Fragment>\n                                            {row(({ index }) => {\n                                                const Bind = getBind(index);\n\n                                                return (\n                                                    <React.Fragment>\n                                                        <GridInner>\n                                                            <Cell span={4}>\n                                                                <Fieldset>\n                                                                    <Bind name={\"label\"}>\n                                                                        <Input label={t`Label`} />\n                                                                    </Bind>\n                                                                </Fieldset>\n                                                            </Cell>\n                                                            <Cell span={4}>\n                                                                <Fieldset>\n                                                                    {renderValueInput ? (\n                                                                        renderValueInput(Bind)\n                                                                    ) : (\n                                                                        <Bind name={\"value\"}>\n                                                                            <Input\n                                                                                label={t`Value`}\n                                                                            />\n                                                                        </Bind>\n                                                                    )}\n                                                                </Fieldset>\n                                                            </Cell>\n                                                            <Cell span={2}>\n                                                                <Fieldset>\n                                                                    <Bind name={\"selected\"}>\n                                                                        <Switch\n                                                                            label={\"Selected\"}\n                                                                            description={\n                                                                                \"Mark as selected value\"\n                                                                            }\n                                                                            onChange={value => {\n                                                                                onSelectedChange({\n                                                                                    bind,\n                                                                                    field,\n                                                                                    index,\n                                                                                    value\n                                                                                });\n                                                                            }}\n                                                                        />\n                                                                    </Bind>\n                                                                </Fieldset>\n                                                            </Cell>\n\n                                                            <Cell\n                                                                span={2}\n                                                                className={controlButtons}\n                                                            >\n                                                                <ButtonPrimary\n                                                                    small\n                                                                    onClick={actions.add(index)}\n                                                                >\n                                                                    +\n                                                                </ButtonPrimary>\n                                                                <ButtonSecondary\n                                                                    small\n                                                                    onClick={actions.remove(index)}\n                                                                >\n                                                                    -\n                                                                </ButtonSecondary>\n                                                            </Cell>\n                                                        </GridInner>\n                                                    </React.Fragment>\n                                                );\n                                            })}\n                                            {empty(() => {\n                                                return (\n                                                    <React.Fragment>\n                                                        <Header>\n                                                            <Typography\n                                                                use={\"overline\"}\n                                                            >{t`Predefined values`}</Typography>\n                                                        </Header>\n\n                                                        <GridInner className={emptyStyles}>\n                                                            <Cell span={12}>\n                                                                <Typography use={\"subtitle1\"}>\n                                                                    {t`There are no predefined values available.`}\n                                                                </Typography>\n                                                            </Cell>\n                                                            <Cell span={12}>\n                                                                <ButtonPrimary\n                                                                    onClick={actions.add()}\n                                                                >{t`Add a predefined value`}</ButtonPrimary>\n                                                            </Cell>\n                                                        </GridInner>\n                                                    </React.Fragment>\n                                                );\n                                            })}\n                                            {header(() => (\n                                                <Header>\n                                                    <Typography\n                                                        use={\"overline\"}\n                                                    >{t`Predefined values`}</Typography>\n                                                </Header>\n                                            ))}\n                                        </React.Fragment>\n                                    );\n                                }}\n                            </DynamicFieldset>\n                        );\n                    }}\n                </Bind>\n            </Cell>\n        </Grid>\n    );\n};\n\nexport default PredefinedValuesDynamicFieldset;\n"],"mappings":"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"}

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

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

package/admin/plugins/fields/boolean.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _toggle_on = require("@material-design-icons/svg/outlined/toggle_on.svg");
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _Select = require("@webiny/ui/Select");
+
+var _form = require("@webiny/form");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields");
+
+var plugin = {
+  type: "cms-editor-field-type",
+  name: "cms-editor-field-type-boolean",
+  field: {
+    type: "boolean",
+    label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Boolean"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Store boolean (\"yes\" or \"no\" ) values."]))),
+    icon: /*#__PURE__*/_react.default.createElement(_toggle_on.ReactComponent, null),
+    allowMultipleValues: false,
+    allowPredefinedValues: false,
+    multipleValuesLabel: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Use as a list of booleans"]))),
+    createField: function createField() {
+      return {
+        type: this.type,
+        validation: [],
+        renderer: {
+          name: ""
+        }
+      };
+    },
+    renderSettings: function renderSettings() {
+      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+        span: 12
+      }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+        name: "settings.defaultValue"
+      }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+        label: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Default value"]))),
+        description: "Default value for the field"
+      }, /*#__PURE__*/_react.default.createElement("option", {
+        value: "true"
+      }, "True"), /*#__PURE__*/_react.default.createElement("option", {
+        value: ""
+      }, "False")))));
+    }
+  }
+};
+var _default = plugin;
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","field","label","description","icon","allowMultipleValues","allowPredefinedValues","multipleValuesLabel","createField","validation","renderer","renderSettings"],"sources":["boolean.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as BooleanIcon } from \"@material-design-icons/svg/outlined/toggle_on.svg\";\nimport { CmsModelFieldTypePlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport { Bind } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\nconst plugin: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-boolean\",\n    field: {\n        type: \"boolean\",\n        label: t`Boolean`,\n        description: t`Store boolean (\"yes\" or \"no\" ) values.`,\n        icon: <BooleanIcon />,\n        allowMultipleValues: false,\n        allowPredefinedValues: false,\n        multipleValuesLabel: t`Use as a list of booleans`,\n        createField() {\n            return {\n                type: this.type,\n                validation: [],\n                renderer: {\n                    name: \"\"\n                }\n            };\n        },\n        renderSettings() {\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <Bind name={\"settings.defaultValue\"}>\n                            <Select\n                                label={t`Default value`}\n                                description={\"Default value for the field\"}\n                            >\n                                <option value={\"true\"}>True</option>\n                                <option value={\"\"}>False</option>\n                            </Select>\n                        </Bind>\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,+BAAR,CAAV;;AAEA,IAAMC,MAA+B,GAAG;EACpCC,IAAI,EAAE,uBAD8B;EAEpCC,IAAI,EAAE,+BAF8B;EAGpCC,KAAK,EAAE;IACHF,IAAI,EAAE,SADH;IAEHG,KAAK,EAAEP,CAAF,0FAFF;IAGHQ,WAAW,EAAER,CAAF,+HAHR;IAIHS,IAAI,eAAE,6BAAC,yBAAD,OAJH;IAKHC,mBAAmB,EAAE,KALlB;IAMHC,qBAAqB,EAAE,KANpB;IAOHC,mBAAmB,EAAEZ,CAAF,8GAPhB;IAQHa,WARG,yBAQW;MACV,OAAO;QACHT,IAAI,EAAE,KAAKA,IADR;QAEHU,UAAU,EAAE,EAFT;QAGHC,QAAQ,EAAE;UACNV,IAAI,EAAE;QADA;MAHP,CAAP;IAOH,CAhBE;IAiBHW,cAjBG,4BAiBc;MACb,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,cAAD;QACI,KAAK,EAAEhB,CAAF,kGADT;QAEI,WAAW,EAAE;MAFjB,gBAII;QAAQ,KAAK,EAAE;MAAf,UAJJ,eAKI;QAAQ,KAAK,EAAE;MAAf,WALJ,CADJ,CADJ,CADJ,CADJ;IAeH;EAjCE;AAH6B,CAAxC;eAwCeG,M"}

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

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

package/admin/plugins/fields/dateTime.js

@@ -0,0 +1,114 @@
+"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;
+
+  var _useModelField = (0, _hooks.useModelField)(),
+      field = _useModelField.field;
+
+  var lockedFields = model.lockedFields || [];
+  var fieldId = (0, _get2.default)(field, "fieldId", null);
+  var lockedField = lockedFields.find(function (lockedField) {
+    return lockedField.fieldId === fieldId;
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 12
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+    name: "placeholderText"
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Placeholder text"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Placeholder text (optional)"])))
+  })))), /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 6
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+    name: "settings.type"
+  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    label: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Format"]))),
+    description: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Cannot be changed later"]))),
+    disabled: lockedField && Boolean(lockedField.formatType)
+  }, /*#__PURE__*/_react.default.createElement("option", {
+    value: t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["date"])))
+  }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Date only"])))), /*#__PURE__*/_react.default.createElement("option", {
+    value: t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["time"])))
+  }, t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Time only"])))), /*#__PURE__*/_react.default.createElement("option", {
+    value: t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["dateTimeWithTimezone"])))
+  }, t(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["Date and time with timezone"])))), /*#__PURE__*/_react.default.createElement("option", {
+    value: t(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["dateTimeWithoutTimezone"])))
+  }, t(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["Date and time without timezone"]))))))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 6
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+    name: "settings.defaultSetValue"
+  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    label: t(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["Default Admin UI value"]))),
+    description: "Affects the Admin UI only"
+  }, /*#__PURE__*/_react.default.createElement("option", {
+    value: t(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["null"])))
+  }, t(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["Leave empty (null value)"])))), /*#__PURE__*/_react.default.createElement("option", {
+    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",
+  field: {
+    type: "datetime",
+    label: t(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["Date/Time"]))),
+    description: t(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["Store date and time."]))),
+    icon: /*#__PURE__*/_react.default.createElement(_scheduleBlack24px.ReactComponent, null),
+    validators: ["required", "dateGte", "dateLte"],
+    allowMultipleValues: true,
+    allowPredefinedValues: false,
+    // TODO: implement "renderPredefinedValues" and set to true.
+    multipleValuesLabel: t(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["Use as a list of dates and times"]))),
+    createField: function createField() {
+      return {
+        type: this.type,
+        settings: {
+          type: "date"
+        },
+        validation: [],
+        renderer: {
+          name: ""
+        }
+      };
+    },
+    renderSettings: function renderSettings() {
+      return /*#__PURE__*/_react.default.createElement(DateTimeSettings, null);
+    }
+  }
+};
+var _default = plugin;
+exports.default = _default;

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

@@ -0,0 +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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"}

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

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

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

@@ -0,0 +1,114 @@
+"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

@@ -0,0 +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,sBAJJ,eAKI,6BAAC,IAAD,qBACI,6BAAC,oBAAD,OADJ,eAEI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,8DAFJ,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"}

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

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

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

@@ -0,0 +1,82 @@
+"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

@@ -0,0 +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"}

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

@@ -0,0 +1,11 @@
+/// <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

@@ -0,0 +1,127 @@
+"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;