@webiny/app-headless-cms 5.23.1 → 5.25.0-beta.0

package/admin/components/FieldEditor/EditFieldDialog/ValidatorsTab.js

@@ -11,31 +11,32 @@ import { Grid, Cell } from "@webiny/ui/Grid";
 import { validation } from "@webiny/validation";
 import { Input } from "@webiny/ui/Input";
 
-var onEnabledChange = function onEnabledChange(_ref) {
-  var data = _ref.data,
-      validationValue = _ref.validationValue,
-      onChangeValidation = _ref.onChangeValidation,
-      validator = _ref.validator;
+var onEnabledChange = function onEnabledChange(params) {
+  var data = params.data,
+      validationValue = params.validationValue,
+      onChangeValidation = params.onChangeValidation,
+      validator = params.validator;
 
   if (data) {
     var index = validationValue.findIndex(function (item) {
       return item.name === validator.name;
     });
     onChangeValidation([].concat(_toConsumableArray(validationValue.slice(0, index)), _toConsumableArray(validationValue.slice(index + 1))));
-  } else {
-    onChangeValidation([].concat(_toConsumableArray(validationValue), [{
-      name: validator.name,
-      settings: validator.defaultSettings,
-      message: validator.defaultMessage
-    }]));
+    return;
   }
+
+  onChangeValidation([].concat(_toConsumableArray(validationValue), [{
+    name: validator.name,
+    settings: validator.defaultSettings,
+    message: validator.defaultMessage
+  }]));
 };
 
-var onFormChange = _debounce(function (_ref2) {
-  var data = _ref2.data,
-      validationValue = _ref2.validationValue,
-      onChangeValidation = _ref2.onChangeValidation,
-      validatorIndex = _ref2.validatorIndex;
+var onFormChange = _debounce(function (_ref) {
+  var data = _ref.data,
+      validationValue = _ref.validationValue,
+      onChangeValidation = _ref.onChangeValidation,
+      validatorIndex = _ref.validatorIndex;
 
   var newValidationValue = _cloneDeep(validationValue);
 
@@ -55,12 +56,12 @@ var ValidatorsTab = function ValidatorsTab(props) {
   return /*#__PURE__*/React.createElement(Bind, {
     name: name,
     defaultValue: []
-  }, function (_ref3) {
-    var validationValue = _ref3.value,
-        onChangeValidation = _ref3.onChange;
-    return validators.map(function (_ref4) {
-      var optional = _ref4.optional,
-          validator = _ref4.validator;
+  }, function (bind) {
+    var validationValue = bind.value,
+        onChangeValidation = bind.onChange;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, validators.map(function (_ref2) {
+      var optional = _ref2.optional,
+          validator = _ref2.validator;
       var validatorIndex = (validationValue || []).findIndex(function (item) {
         return item.name === validator.name;
       });
@@ -93,28 +94,35 @@ var ValidatorsTab = function ValidatorsTab(props) {
             validatorIndex: validatorIndex
           });
         }
-      }, function (_ref5) {
-        var Bind = _ref5.Bind,
-            setValue = _ref5.setValue;
+      }, function (_ref3) {
+        var Bind = _ref3.Bind,
+            setValue = _ref3.setValue;
         return /*#__PURE__*/React.createElement(SimpleFormContent, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
           span: 12
         }, /*#__PURE__*/React.createElement(Bind, {
           name: "message",
           validators: validation.create("required")
-        }, /*#__PURE__*/React.createElement(Input, {
-          label: "Message",
-          description: "This message will be displayed to the user"
-        })))), typeof validator.renderSettings === "function" && validator.renderSettings({
+        }, function (bind) {
+          return /*#__PURE__*/React.createElement(Input, Object.assign({}, bind, {
+            label: "Message",
+            description: "This message will be displayed to the user"
+          }));
+        }))), typeof validator.renderSettings === "function" && validator.renderSettings({
           field: field,
           setValue: setValue,
           setMessage: function setMessage(message) {
             setValue("message", message);
           },
           data: data,
+
+          /**
+           * TODO @ts-refactor
+           * Figure out type for Bind.
+           */
           Bind: Bind
         }));
       }));
-    });
+    }));
   });
 };
 

package/admin/components/FieldEditor/EditFieldDialog/ValidatorsTab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ValidatorsTab.tsx"],"names":["React","css","Switch","SimpleForm","SimpleFormContent","SimpleFormHeader","Form","Grid","Cell","validation","Input","onEnabledChange","params","data","validationValue","onChangeValidation","validator","index","findIndex","item","name","slice","settings","defaultSettings","message","defaultMessage","onFormChange","validatorIndex","newValidationValue","noMargin","margin","ValidatorsTab","props","field","validators","Bind","form","bind","value","onChange","map","optional","label","setValue","create","renderSettings","setMessage"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { cloneDeep, debounce } from \"lodash\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport {\n    SimpleForm,\n    SimpleFormContent,\n    SimpleFormHeader\n} from \"@webiny/app-admin/components/SimpleForm\";\nimport { Form, FormRenderPropParams } from \"@webiny/form\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { Input } from \"@webiny/ui/Input\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldValidator,\n    CmsEditorFieldValidatorPlugin,\n    CmsEditorFieldValidatorPluginValidator\n} from \"~/types\";\nimport { Validator } from \"@webiny/validation/types\";\n\ninterface OnChangeValidationCallable {\n    (validators: CmsEditorFieldValidator[]): void;\n}\ninterface OnEnabledChangeParams {\n    data: CmsEditorFieldValidator;\n    validationValue: CmsEditorFieldValidator[];\n    onChangeValidation: OnChangeValidationCallable;\n    validator: CmsEditorFieldValidatorPluginValidator;\n}\nconst onEnabledChange = (params: OnEnabledChangeParams): void => {\n    const { data, validationValue, onChangeValidation, validator } = params;\n    if (data) {\n        const index = validationValue.findIndex(item => item.name === validator.name);\n        onChangeValidation([\n            ...validationValue.slice(0, index),\n            ...validationValue.slice(index + 1)\n        ]);\n        return;\n    }\n    onChangeValidation([\n        ...validationValue,\n        {\n            name: validator.name,\n            settings: validator.defaultSettings,\n            message: validator.defaultMessage\n        }\n    ]);\n};\n\nconst onFormChange = debounce(({ data, validationValue, onChangeValidation, validatorIndex }) => {\n    const newValidationValue = cloneDeep(validationValue);\n    newValidationValue[validatorIndex] = {\n        ...newValidationValue[validatorIndex],\n        ...cloneDeep(data)\n    };\n    onChangeValidation(newValidationValue);\n}, 200);\n\nconst noMargin = css({\n    margin: \"0 !important\"\n});\n\ninterface ValidatorsTabPropsValidator {\n    optional: boolean;\n    validator: CmsEditorFieldValidatorPlugin[\"validator\"];\n}\ninterface ValidatorsTabProps {\n    name: string;\n    validators: ValidatorsTabPropsValidator[];\n    form: FormRenderPropParams;\n    field: CmsEditorField;\n}\n\nconst ValidatorsTab: React.FC<ValidatorsTabProps> = props => {\n    const {\n        field,\n        name,\n        validators,\n        form: { Bind }\n    } = props;\n\n    return (\n        <Bind name={name} defaultValue={[]}>\n            {bind => {\n                const { value: validationValue, onChange: onChangeValidation } = bind;\n                return (\n                    <>\n                        {validators.map(({ optional, validator }) => {\n                            const validatorIndex = (\n                                (validationValue || []) as Validator[]\n                            ).findIndex(item => item.name === validator.name);\n                            const data = (validationValue || [])[validatorIndex];\n\n                            return (\n                                <SimpleForm\n                                    key={validator.name}\n                                    noElevation\n                                    className={noMargin}\n                                    data-testid={`cms.editor.field-validator.${validator.name}`}\n                                >\n                                    <SimpleFormHeader title={validator.label}>\n                                        {optional && (\n                                            <Switch\n                                                label=\"Enabled\"\n                                                value={validatorIndex >= 0}\n                                                onChange={() =>\n                                                    onEnabledChange({\n                                                        data,\n                                                        validationValue,\n                                                        onChangeValidation,\n                                                        validator\n                                                    })\n                                                }\n                                            />\n                                        )}\n                                    </SimpleFormHeader>\n                                    {data && (\n                                        <Form\n                                            data={data}\n                                            onChange={data =>\n                                                onFormChange({\n                                                    data,\n                                                    validationValue,\n                                                    onChangeValidation,\n                                                    validatorIndex\n                                                })\n                                            }\n                                        >\n                                            {({ Bind, setValue }) => (\n                                                <SimpleFormContent>\n                                                    <Grid>\n                                                        <Cell span={12}>\n                                                            <Bind\n                                                                name={\"message\"}\n                                                                validators={validation.create(\n                                                                    \"required\"\n                                                                )}\n                                                            >\n                                                                {bind => {\n                                                                    return (\n                                                                        <Input\n                                                                            {...bind}\n                                                                            label={\"Message\"}\n                                                                            description={\n                                                                                \"This message will be displayed to the user\"\n                                                                            }\n                                                                        />\n                                                                    );\n                                                                }}\n                                                            </Bind>\n                                                        </Cell>\n                                                    </Grid>\n\n                                                    {typeof validator.renderSettings ===\n                                                        \"function\" &&\n                                                        validator.renderSettings({\n                                                            field,\n                                                            setValue,\n                                                            setMessage: (message: string) => {\n                                                                setValue(\"message\", message);\n                                                            },\n                                                            data,\n                                                            /**\n                                                             * TODO @ts-refactor\n                                                             * Figure out type for Bind.\n                                                             */\n                                                            Bind: Bind as any\n                                                        })}\n                                                </SimpleFormContent>\n                                            )}\n                                        </Form>\n                                    )}\n                                </SimpleForm>\n                            );\n                        })}\n                    </>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport default ValidatorsTab;\n"]}

package/admin/components/FieldEditor/EditFieldDialog/functions/getValue.d.ts

@@ -1,6 +1,8 @@
-declare const getValue: ({ bind, index, name }: {
-    bind: any;
-    index: any;
-    name: any;
-}) => any;
+import { BindComponentRenderProp } from "@webiny/form";
+interface Params {
+    bind: BindComponentRenderProp;
+    index: number;
+    name: string;
+}
+declare const getValue: (params: Params) => string[] | undefined;
 export default getValue;

package/admin/components/FieldEditor/EditFieldDialog/functions/getValue.js

@@ -1,9 +1,9 @@
 import get from "lodash/get";
 
-var getValue = function getValue(_ref) {
-  var bind = _ref.bind,
-      index = _ref.index,
-      name = _ref.name;
+var getValue = function getValue(params) {
+  var bind = params.bind,
+      index = params.index,
+      name = params.name;
   var value = bind.value || [];
 
   if (index >= 0) {

package/admin/components/FieldEditor/EditFieldDialog/functions/getValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getValue.ts"],"names":["get","getValue","params","bind","index","name","value"],"mappings":"AAAA,OAAOA,GAAP,MAAgB,YAAhB;;AAQA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,MAAD,EAA0C;AACvD,MAAQC,IAAR,GAA8BD,MAA9B,CAAQC,IAAR;AAAA,MAAcC,KAAd,GAA8BF,MAA9B,CAAcE,KAAd;AAAA,MAAqBC,IAArB,GAA8BH,MAA9B,CAAqBG,IAArB;AACA,MAAMC,KAAK,GAAGH,IAAI,CAACG,KAAL,IAAc,EAA5B;;AAEA,MAAIF,KAAK,IAAI,CAAb,EAAgB;AACZ,WAAOJ,GAAG,CAACM,KAAD,YAAWF,KAAX,cAAoBC,IAApB,EAAV;AACH;;AAED,SAAOC,KAAP;AACH,CATD;;AAWA,eAAeL,QAAf","sourcesContent":["import get from \"lodash/get\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface Params {\n    bind: BindComponentRenderProp;\n    index: number;\n    name: string;\n}\nconst getValue = (params: Params): string[] | undefined => {\n    const { bind, index, name } = params;\n    const value = bind.value || [];\n\n    if (index >= 0) {\n        return get(value, `${index}.${name}`);\n    }\n\n    return value;\n};\n\nexport default getValue;\n"]}

package/admin/components/FieldEditor/EditFieldDialog/functions/setValue.d.ts

@@ -1,7 +1,9 @@
-declare const setValue: ({ value, bind, index, name }: {
-    value: any;
-    bind: any;
-    index: any;
-    name: any;
-}) => void;
+import { BindComponentRenderProp } from "@webiny/form";
+interface Params {
+    value: string[];
+    bind: BindComponentRenderProp;
+    index: number;
+    name: string;
+}
+declare const setValue: (params: Params) => void;
 export default setValue;

package/admin/components/FieldEditor/EditFieldDialog/functions/setValue.js

@@ -1,11 +1,11 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import set from "lodash/set";
 
-var setValue = function setValue(_ref) {
-  var value = _ref.value,
-      bind = _ref.bind,
-      index = _ref.index,
-      name = _ref.name;
+var setValue = function setValue(params) {
+  var value = params.value,
+      bind = params.bind,
+      index = params.index,
+      name = params.name;
 
   var newValue = _toConsumableArray(bind.value || []);
 

package/admin/components/FieldEditor/EditFieldDialog/functions/setValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["setValue.ts"],"names":["set","setValue","params","value","bind","index","name","newValue","onChange"],"mappings":";AAAA,OAAOA,GAAP,MAAgB,YAAhB;;AASA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,MAAD,EAA0B;AACvC,MAAQC,KAAR,GAAqCD,MAArC,CAAQC,KAAR;AAAA,MAAeC,IAAf,GAAqCF,MAArC,CAAeE,IAAf;AAAA,MAAqBC,KAArB,GAAqCH,MAArC,CAAqBG,KAArB;AAAA,MAA4BC,IAA5B,GAAqCJ,MAArC,CAA4BI,IAA5B;;AACA,MAAIC,QAAQ,sBAAQH,IAAI,CAACD,KAAL,IAAc,EAAtB,CAAZ;;AACA,MAAIE,KAAK,IAAI,CAAb,EAAgB;AACZL,IAAAA,GAAG,CAACO,QAAD,YAAcF,KAAd,cAAuBC,IAAvB,GAA+BH,KAA/B,CAAH;AACH,GAFD,MAEO;AACHI,IAAAA,QAAQ,GAAGJ,KAAX;AACH;;AAEDC,EAAAA,IAAI,CAACI,QAAL,CAAcD,QAAd;AACH,CAVD;;AAYA,eAAeN,QAAf","sourcesContent":["import set from \"lodash/set\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface Params {\n    value: string[];\n    bind: BindComponentRenderProp;\n    index: number;\n    name: string;\n}\nconst setValue = (params: Params): void => {\n    const { value, bind, index, name } = params;\n    let newValue = [...(bind.value || [])];\n    if (index >= 0) {\n        set(newValue, `${index}.${name}`, value);\n    } else {\n        newValue = value;\n    }\n\n    bind.onChange(newValue);\n};\n\nexport default setValue;\n"]}

package/admin/components/FieldEditor/EditFieldDialog.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from "react";
 import { CmsEditorField } from "../../../types";
-declare type EditFieldDialogProps = {
-    field: CmsEditorField;
-    onClose: Function;
-    onSubmit: (data: any) => void;
-};
-declare const EditFieldDialog: ({ field, onSubmit, ...props }: EditFieldDialogProps) => JSX.Element;
+interface EditFieldDialogProps {
+    field: CmsEditorField | null;
+    onClose: () => void;
+    onSubmit: (data: CmsEditorField) => void;
+}
+declare const EditFieldDialog: React.FC<EditFieldDialogProps>;
 export default EditFieldDialog;

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -8,7 +8,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var _excluded = ["field", "onSubmit"];
 import React, { useState, useEffect, useCallback } from "react";
 import { css } from "emotion";
-import { Dialog, DialogContent, DialogTitle, DialogActions, DialogButton } from "@webiny/ui/Dialog";
+import { Dialog, DialogContent, DialogTitle, DialogActions } from "@webiny/ui/Dialog";
 import { Form } from "@webiny/form";
 import { Tabs, Tab } from "@webiny/ui/Tabs";
 import { i18n } from "@webiny/app/i18n";
@@ -21,6 +21,8 @@ import { Grid, Cell } from "@webiny/ui/Grid";
 import { Typography } from "@webiny/ui/Typography";
 import { Elevation } from "@webiny/ui/Elevation";
 import { useFieldEditor } from "./useFieldEditor";
+import invariant from "invariant";
+import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
 var t = i18n.namespace("app-headless-cms/admin/components/editor");
 var dialogBody = /*#__PURE__*/css({
   "&.webiny-ui-dialog__content": {
@@ -31,9 +33,8 @@ var dialogBody = /*#__PURE__*/css({
 
 var getValidators = function getValidators(fieldPlugin, key) {
   var defaultValidators = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return plugins.byType("cms-editor-field-validator").map(function (plugin) {
-    return plugin.validator;
-  }).map(function (validator) {
+  var mappedValidators = plugins.byType("cms-editor-field-validator").map(function (_ref) {
+    var validator = _ref.validator;
     var allowedValidators = fieldPlugin.field[key] || defaultValidators;
 
     if (allowedValidators.includes(validator.name)) {
@@ -49,7 +50,13 @@ var getValidators = function getValidators(fieldPlugin, key) {
     }
 
     return null;
-  }).filter(Boolean).sort(function (a, b) {
+  });
+  var filteredValidators = mappedValidators.filter(Boolean);
+  return filteredValidators
+  /**
+   * We can safely cast because we are filtering in previous step.
+   */
+  .sort(function (a, b) {
     if (!a.optional && b.optional) {
       return -1;
     }
@@ -86,10 +93,10 @@ var fieldEditorDialog = /*#__PURE__*/css({
   }
 }, "label:fieldEditorDialog;");
 
-var EditFieldDialog = function EditFieldDialog(_ref) {
-  var field = _ref.field,
-      onSubmit = _ref.onSubmit,
-      props = _objectWithoutProperties(_ref, _excluded);
+var EditFieldDialog = function EditFieldDialog(_ref2) {
+  var field = _ref2.field,
+      _onSubmit = _ref2.onSubmit,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -101,7 +108,8 @@ var EditFieldDialog = function EditFieldDialog(_ref) {
 
   useEffect(function () {
     if (!field) {
-      return setCurrent(field);
+      setCurrent(field);
+      return;
     }
 
     var clonedField = _cloneDeep(field);
@@ -127,22 +135,31 @@ var EditFieldDialog = function EditFieldDialog(_ref) {
   var onClose = useCallback(function () {
     setCurrent(null);
     props.onClose();
-  }, undefined);
+  }, []);
   var render = null;
   var headerTitle = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Field Settings"])));
 
   if (current) {
+    /**
+     * Something must be very wrong for field plugin to be missing.
+     */
     var fieldPlugin = getFieldPlugin(current.type);
+    /**
+     * We will throw error because of that.
+     */
 
-    if (fieldPlugin) {
-      headerTitle = t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Field Settings - {fieldTypeLabel}"])))({
-        fieldTypeLabel: fieldPlugin.field.label
-      });
-    }
-
+    invariant(fieldPlugin, "Missing field plugin for type \"".concat(current.type, "\"."));
+    headerTitle = t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Field Settings - {fieldTypeLabel}"])))({
+      fieldTypeLabel: fieldPlugin.field.label
+    });
     render = /*#__PURE__*/React.createElement(Form, {
       data: current,
-      onSubmit: onSubmit
+      onSubmit: function onSubmit(data) {
+        /**
+         * We know that data is CmsEditorField.
+         */
+        return _onSubmit(data);
+      }
     }, function (form) {
       var predefinedValuesTabEnabled = fieldPlugin.field.allowPredefinedValues && form.data.predefinedValues && form.data.predefinedValues.enabled;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogContent, {
@@ -174,7 +191,7 @@ var EditFieldDialog = function EditFieldDialog(_ref) {
       }, /*#__PURE__*/React.createElement(Elevation, {
         z: 2
       }, /*#__PURE__*/React.createElement(ValidatorsTab, {
-        field: field,
+        field: current,
         name: "listValidation",
         validators: getListValidators(fieldPlugin),
         form: form
@@ -205,17 +222,17 @@ var EditFieldDialog = function EditFieldDialog(_ref) {
         label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Appearance"])))
       }, /*#__PURE__*/React.createElement(AppearanceTab, {
         form: form,
-        field: form.data,
+        field: form.data // TODO @ts-refactor verify that this actually worked? There was no fieldPlugin in AppearanceTab props
+        // @ts-ignore
+        ,
         fieldPlugin: fieldPlugin
-      })))), /*#__PURE__*/React.createElement(DialogActions, {
-        style: {
-          justifyContent: "flex-end"
-        }
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogButton, {
+      })))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(ButtonDefault, {
         onClick: onClose
-      }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Cancel"])))), /*#__PURE__*/React.createElement(DialogButton, {
-        onClick: form.submit
-      }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Save"])))))));
+      }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Cancel"])))), /*#__PURE__*/React.createElement(ButtonPrimary, {
+        onClick: function onClick(ev) {
+          form.submit(ev);
+        }
+      }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Save Field"]))))));
     });
   }
 

package/admin/components/FieldEditor/EditFieldDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["EditFieldDialog.tsx"],"names":["React","useState","useEffect","useCallback","css","Dialog","DialogContent","DialogTitle","DialogActions","Form","Tabs","Tab","i18n","plugins","GeneralTab","AppearanceTab","PredefinedValues","ValidatorsTab","Grid","Cell","Typography","Elevation","useFieldEditor","invariant","ButtonDefault","ButtonPrimary","t","namespace","dialogBody","width","height","getValidators","fieldPlugin","key","defaultValidators","mappedValidators","byType","map","validator","allowedValidators","field","includes","name","optional","filteredValidators","filter","Boolean","sort","a","b","getListValidators","getFieldValidators","fieldEditorDialog","maxWidth","maxHeight","paddingTop","EditFieldDialog","onSubmit","props","current","setCurrent","getFieldPlugin","clonedField","renderer","item","canUse","renderPlugin","rendererName","onClose","render","headerTitle","type","fieldTypeLabel","label","data","form","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","multipleValues","Array","isArray","validators","length","ev","submit"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport { cloneDeep } from \"lodash\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogContent, DialogTitle, DialogActions } from \"@webiny/ui/Dialog\";\nimport { Form } from \"@webiny/form\";\nimport { Tabs, Tab } from \"@webiny/ui/Tabs\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldTypePlugin,\n    CmsEditorFieldValidatorPlugin\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues\";\nimport ValidatorsTab from \"./EditFieldDialog/ValidatorsTab\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport invariant from \"invariant\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst dialogBody = css({\n    \"&.webiny-ui-dialog__content\": {\n        width: 875,\n        height: 450\n    }\n});\n\ninterface EditFieldDialogProps {\n    field: CmsEditorField | null;\n    onClose: () => void;\n    onSubmit: (data: CmsEditorField) => void;\n}\n\ninterface Validator {\n    optional: boolean;\n    validator: CmsEditorFieldValidatorPlugin[\"validator\"];\n}\nconst getValidators = (\n    fieldPlugin: CmsEditorFieldTypePlugin,\n    /**\n     * We only have validators and listValidators, thats why the strict string types\n     */\n    key: \"validators\" | \"listValidators\",\n    defaultValidators: string[] = []\n): Validator[] => {\n    const mappedValidators = plugins\n        .byType<CmsEditorFieldValidatorPlugin>(\"cms-editor-field-validator\")\n        .map(({ validator }) => {\n            const allowedValidators = fieldPlugin.field[key] || defaultValidators;\n            if (allowedValidators.includes(validator.name)) {\n                return {\n                    optional: true,\n                    validator\n                };\n            } else if (allowedValidators.includes(`!${validator.name}`)) {\n                return {\n                    optional: false,\n                    validator\n                };\n            }\n\n            return null;\n        });\n\n    const filteredValidators = mappedValidators.filter(Boolean) as Validator[];\n\n    return (\n        filteredValidators\n            /**\n             * We can safely cast because we are filtering in previous step.\n             */\n            .sort((a: Validator, b: Validator) => {\n                if (!a.optional && b.optional) {\n                    return -1;\n                }\n\n                if (a.optional && !b.optional) {\n                    return 1;\n                }\n\n                return 0;\n            }) as Validator[]\n    );\n};\n\nconst getListValidators = (fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators(fieldPlugin, \"listValidators\", [\"minLength\", \"maxLength\"]);\n};\n\nconst getFieldValidators = (fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators(fieldPlugin, \"validators\");\n};\n\nconst fieldEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"calc(100vh - 155px)\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nconst EditFieldDialog: React.FC<EditFieldDialogProps> = ({ field, onSubmit, ...props }) => {\n    const [current, setCurrent] = useState<CmsEditorField | null>(null);\n\n    const { getFieldPlugin } = useFieldEditor();\n\n    useEffect((): void => {\n        if (!field) {\n            setCurrent(field);\n            return;\n        }\n\n        const clonedField = cloneDeep(field);\n\n        if (!clonedField.renderer || !clonedField.renderer.name) {\n            const [renderPlugin] = plugins\n                .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n                .filter(item => item.renderer.canUse({ field }));\n\n            if (renderPlugin) {\n                clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n            }\n        }\n\n        setCurrent(clonedField);\n    }, [field]);\n\n    const onClose = useCallback((): void => {\n        setCurrent(null);\n        props.onClose();\n    }, []);\n\n    let render = null;\n    let headerTitle = t`Field Settings`;\n\n    if (current) {\n        /**\n         * Something must be very wrong for field plugin to be missing.\n         */\n        const fieldPlugin = getFieldPlugin(current.type) as CmsEditorFieldTypePlugin;\n        /**\n         * We will throw error because of that.\n         */\n        invariant(fieldPlugin, `Missing field plugin for type \"${current.type}\".`);\n\n        headerTitle = t`Field Settings - {fieldTypeLabel}`({\n            fieldTypeLabel: fieldPlugin.field.label\n        });\n\n        render = (\n            <Form\n                data={current}\n                onSubmit={data => {\n                    /**\n                     * We know that data is CmsEditorField.\n                     */\n                    return onSubmit(data as unknown as CmsEditorField);\n                }}\n            >\n                {form => {\n                    const predefinedValuesTabEnabled =\n                        fieldPlugin.field.allowPredefinedValues &&\n                        form.data.predefinedValues &&\n                        form.data.predefinedValues.enabled;\n\n                    return (\n                        <>\n                            <DialogContent className={dialogBody}>\n                                <Tabs>\n                                    <Tab label={t`General`}>\n                                        <GeneralTab\n                                            form={form}\n                                            field={form.data as CmsEditorField}\n                                            fieldPlugin={fieldPlugin}\n                                        />\n                                    </Tab>\n                                    <Tab\n                                        label={t`Predefined Values`}\n                                        disabled={!predefinedValuesTabEnabled}\n                                    >\n                                        {predefinedValuesTabEnabled && (\n                                            <PredefinedValues\n                                                form={form}\n                                                field={form.data as CmsEditorField}\n                                                fieldPlugin={fieldPlugin}\n                                            />\n                                        )}\n                                    </Tab>\n\n                                    {form.data.multipleValues && (\n                                        <Tab\n                                            label={\"Validators\"}\n                                            data-testid={\"cms.editor.field.tabs.validators\"}\n                                        >\n                                            <Grid>\n                                                <Cell span={12}>\n                                                    <Typography use={\"headline5\"}>\n                                                        List validators\n                                                    </Typography>\n                                                    <br />\n                                                    <Typography use={\"body2\"}>\n                                                        These validators are applied to the entire\n                                                        list of values.\n                                                    </Typography>\n                                                </Cell>\n                                                <Cell span={12}>\n                                                    <Elevation z={2}>\n                                                        <ValidatorsTab\n                                                            field={current}\n                                                            name={\"listValidation\"}\n                                                            validators={getListValidators(\n                                                                fieldPlugin\n                                                            )}\n                                                            form={form}\n                                                        />\n                                                    </Elevation>\n                                                </Cell>\n                                            </Grid>\n\n                                            <Grid>\n                                                <Cell span={12}>\n                                                    <Typography use={\"headline5\"}>\n                                                        Individual value validators\n                                                    </Typography>\n                                                    <br />\n                                                    <Typography use={\"body2\"}>\n                                                        These validators are applied to each value\n                                                        in the list.\n                                                    </Typography>\n                                                </Cell>\n                                                <Cell span={12}>\n                                                    <Elevation z={2}>\n                                                        <ValidatorsTab\n                                                            field={current}\n                                                            form={form}\n                                                            name={\"validation\"}\n                                                            validators={getFieldValidators(\n                                                                fieldPlugin\n                                                            )}\n                                                        />\n                                                    </Elevation>\n                                                </Cell>\n                                            </Grid>\n                                        </Tab>\n                                    )}\n\n                                    {!form.data.multipleValues &&\n                                        Array.isArray(fieldPlugin.field.validators) &&\n                                        fieldPlugin.field.validators.length > 0 && (\n                                            <Tab\n                                                label={\"Validators\"}\n                                                data-testid={\"cms.editor.field.tabs.validators\"}\n                                            >\n                                                <ValidatorsTab\n                                                    field={current}\n                                                    form={form}\n                                                    name={\"validation\"}\n                                                    validators={getFieldValidators(fieldPlugin)}\n                                                />\n                                            </Tab>\n                                        )}\n                                    <Tab label={t`Appearance`}>\n                                        <AppearanceTab\n                                            form={form}\n                                            field={form.data as CmsEditorField}\n                                            // TODO @ts-refactor verify that this actually worked? There was no fieldPlugin in AppearanceTab props\n                                            // @ts-ignore\n                                            fieldPlugin={fieldPlugin}\n                                        />\n                                    </Tab>\n                                </Tabs>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault onClick={onClose}>{t`Cancel`}</ButtonDefault>\n                                <ButtonPrimary\n                                    onClick={ev => {\n                                        form.submit(ev);\n                                    }}\n                                >{t`Save Field`}</ButtonPrimary>\n                            </DialogActions>\n                        </>\n                    );\n                }}\n            </Form>\n        );\n    }\n\n    return (\n        <Dialog\n            preventOutsideDismiss\n            open={!!current}\n            onClose={onClose}\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n            className={fieldEditorDialog}\n        >\n            <DialogTitle>{headerTitle}</DialogTitle>\n            {render}\n        </Dialog>\n    );\n};\n\nexport default EditFieldDialog;\n"]}

package/admin/components/FieldEditor/Field.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
 import { CmsEditorField } from "../../../types";
-export interface Props {
+export interface FieldProps {
     field: CmsEditorField;
-    onDelete: Function;
-    onEdit: Function;
+    onDelete: (field: CmsEditorField) => void;
+    onEdit: (field: CmsEditorField) => void;
     parent?: CmsEditorField;
 }
-declare const _default: React.NamedExoticComponent<Props>;
+declare const _default: React.NamedExoticComponent<FieldProps>;
 export default _default;

package/admin/components/FieldEditor/Field.js

@@ -133,8 +133,8 @@ var Field = function Field(props) {
     return null;
   }
 
-  var isTitleField = field.fieldId === data.titleFieldId && !parent;
-  var lockedFields = data.lockedFields || [];
+  var isTitleField = data && field.fieldId === data.titleFieldId && !parent;
+  var lockedFields = data ? data.lockedFields || [] : [];
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement(Typography, {
     use: "subtitle1"
   }, field.label), /*#__PURE__*/React.createElement(Typography, {

package/admin/components/FieldEditor/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Field.tsx"],"names":["React","Fragment","useCallback","css","styled","IconButton","Typography","ReactComponent","EditIcon","DeleteIcon","TitleIcon","MoreVerticalIcon","Menu","MenuItem","plugins","ListItemGraphic","Icon","i18n","useSnackbar","useContentModelEditor","useFieldEditor","t","ns","FieldContainer","display","flexDirection","justifyContent","alignItems","Info","flex","lineHeight","Actions","menuStyles","width","right","left","opacity","pointerEvents","allowedTitleFieldTypes","isFieldAllowedToBeTitle","field","parent","multipleValues","includes","type","Field","props","onEdit","showSnackbar","setData","data","getFieldPlugin","onDelete","fieldId","setAsTitle","titleFieldId","response","error","message","fieldPlugin","editorFieldOptionPlugins","byType","isTitleField","lockedFields","label","map","pl","cloneElement","render","key","name","some","lockedField","find","memo"],"mappings":"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","sourcesContent":["import React, { Fragment, useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as EditIcon } from \"~/admin/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"~/admin/icons/title-24px.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"~/admin/icons/more_vert.svg\";\nimport { Menu, MenuItem } from \"@webiny/ui/Menu\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CmsEditorField, CmsEditorFieldOptionPlugin } from \"~/types\";\nimport { ListItemGraphic } from \"@webiny/ui/List\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst FieldContainer = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\"\n});\n\nconst Info = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    \"> *\": {\n        flex: \"1 100%\",\n        lineHeight: \"150%\"\n    }\n});\n\nconst Actions = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"right\",\n    \"> *\": {\n        flex: \"1 100%\"\n    }\n});\n\nconst menuStyles = css({\n    width: 220,\n    right: -105,\n    left: \"auto !important\",\n    \".disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (field: CmsEditorField, parent?: CmsEditorField) => {\n    if (field.multipleValues || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    }\n    return true;\n};\n\nexport interface FieldProps {\n    field: CmsEditorField;\n    onDelete: (field: CmsEditorField) => void;\n    onEdit: (field: CmsEditorField) => void;\n    parent?: CmsEditorField;\n}\nconst Field: React.FC<FieldProps> = props => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar } = useSnackbar();\n    const { setData, data } = useContentModelEditor();\n    const { getFieldPlugin } = useFieldEditor();\n\n    const onDelete = useCallback(() => {\n        props.onDelete(field);\n    }, [field.fieldId]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setData(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId]);\n\n    const fieldPlugin = getFieldPlugin(field.type);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldPlugin) {\n        return null;\n    }\n\n    const isTitleField = data && field.fieldId === data.titleFieldId && !parent;\n\n    const lockedFields = data ? data.lockedFields || [] : [];\n    return (\n        <Fragment>\n            <FieldContainer>\n                <Info>\n                    <Typography use={\"subtitle1\"}>{field.label}</Typography>\n                    <Typography use={\"caption\"}>\n                        {fieldPlugin.field.label}{\" \"}\n                        {field.multipleValues && <>({t`multiple values`})</>}\n                        {isTitleField && <>({t`entry title`})</>}\n                    </Typography>\n                </Info>\n                <Actions>\n                    <IconButton\n                        data-testid={\"cms.editor.edit-field\"}\n                        icon={<EditIcon />}\n                        onClick={() => onEdit(field)}\n                    />\n                    <Menu\n                        className={menuStyles}\n                        handle={<IconButton icon={<MoreVerticalIcon />} />}\n                    >\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <MenuItem\n                            disabled={!isFieldAllowedToBeTitle(field, parent)}\n                            onClick={setAsTitle}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<TitleIcon />} />\n                            </ListItemGraphic>\n                            {t`Use as title`}\n                        </MenuItem>\n                        <MenuItem\n                            disabled={lockedFields.some(\n                                lockedField => lockedField.fieldId === field.fieldId\n                            )}\n                            onClick={onDelete}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<DeleteIcon />} />\n                            </ListItemGraphic>\n                            {lockedFields.find(lockedField => lockedField.fieldId === field.fieldId)\n                                ? t`Cannot delete`\n                                : t`Delete`}\n                        </MenuItem>\n                    </Menu>\n                </Actions>\n            </FieldContainer>\n            <div className={\"field-extra\"}>\n                {fieldPlugin.field.render && fieldPlugin.field.render({ field, data, setData })}\n            </div>\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"]}

package/admin/components/FieldEditor/FieldEditor.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { CmsEditorField, CmsEditorFieldsLayout } from "../../../types";
 export interface FieldEditorProps {
     parent?: CmsEditorField;
@@ -9,4 +9,4 @@ export interface FieldEditorProps {
         layout: CmsEditorFieldsLayout;
     }) => void;
 }
-export declare const FieldEditor: (props: FieldEditorProps) => JSX.Element;
+export declare const FieldEditor: React.FC<FieldEditorProps>;

package/admin/components/FieldEditor/FieldEditor.js

@@ -145,17 +145,20 @@ var Editor = function Editor() {
     });
   }), /*#__PURE__*/React.createElement(EditFieldDialog, {
     field: field,
-    onClose: editField,
+    onClose: function onClose() {
+      return editField(null);
+    },
     onSubmit: function onSubmit(field) {
       if (field.id) {
         updateField(field);
-      } else {
-        insertField({
-          field: field,
-          position: dropTarget
-        });
+        editField(null);
+        return;
       }
 
+      insertField({
+        field: field,
+        position: dropTarget
+      });
       editField(null);
     }
   }));

package/admin/components/FieldEditor/FieldEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FieldEditor.tsx"],"names":["React","Fragment","get","Icon","i18n","ReactComponent","HandleIcon","Center","Vertical","Horizontal","Draggable","EditFieldDialog","Field","rowHandle","fieldHandle","fieldContainer","Row","RowContainer","useFieldEditor","FieldEditorProvider","t","namespace","fieldTypes","Editor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","length","item","row","index","padding","map","fieldId","type","pos","f","join","drag","isDragging","opacity","fieldIndex","includes","id","position","FieldEditor","props"],"mappings":"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","sourcesContent":["import React, { Fragment } from \"react\";\nimport get from \"lodash/get\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as HandleIcon } from \"~/admin/icons/round-drag_indicator-24px.svg\";\nimport { Center, Vertical, Horizontal } from \"../DropZone\";\nimport Draggable from \"../Draggable\";\nimport EditFieldDialog from \"./EditFieldDialog\";\nimport Field from \"./Field\";\nimport { rowHandle, fieldHandle, fieldContainer, Row, RowContainer } from \"./Styled\";\nimport { useFieldEditor } from \"./useFieldEditor\";\nimport { FieldEditorProvider } from \"./FieldEditorContext\";\nimport { CmsEditorField, CmsEditorFieldsLayout } from \"~/types\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst fieldTypes: string[] = [\"field\", \"newField\"];\n\nconst Editor: React.FC = () => {\n    const {\n        parent,\n        depth,\n        insertField,\n        updateField,\n        deleteField,\n        fields,\n        noConflict,\n        editField,\n        onFieldDrop,\n        onEndDrag,\n        field,\n        dropTarget\n    } = useFieldEditor();\n\n    return (\n        <Fragment>\n            {fields.length === 0 && (\n                <Center\n                    onDrop={item =>\n                        onFieldDrop(item, {\n                            row: 0,\n                            index: 0\n                        })\n                    }\n                    style={{ padding: \"5px 0 15px 0\" }}\n                >\n                    {t`Drop your first field here`}\n                </Center>\n            )}\n\n            {fields.map((row, index) => (\n                <Draggable\n                    beginDrag={{\n                        parent: parent ? parent.fieldId : null,\n                        type: \"row\",\n                        fields: row,\n                        pos: { row: index }\n                    }}\n                    endDrag={onEndDrag}\n                    key={row.map(f => f.fieldId).join(\".\")}\n                >\n                    {(\n                        {\n                            drag,\n                            isDragging\n                        } /* RowContainer start - includes drag handle, drop zones and the Row itself. */\n                    ) => (\n                        <RowContainer style={{ opacity: isDragging ? 0.3 : 1 }}>\n                            <div className={rowHandle} ref={drag}>\n                                <Icon icon={<HandleIcon />} />\n                            </div>\n                            <Horizontal\n                                data-testid={`cms-editor-row-droppable-top-${index}`}\n                                isVisible={noConflict()}\n                                onDrop={item => onFieldDrop(item, { row: index, index: null })}\n                            />\n                            {/* Row start - includes field drop zones and fields */}\n                            <Row data-testid={\"cms.editor.field-row\"}>\n                                {row.map((field, fieldIndex) => (\n                                    <Draggable\n                                        key={field.fieldId}\n                                        beginDrag={{\n                                            parent: parent ? parent.fieldId : null,\n                                            type: \"field\",\n                                            field,\n                                            pos: {\n                                                row: index,\n                                                index: fieldIndex\n                                            }\n                                        }}\n                                        endDrag={onEndDrag}\n                                    >\n                                        {({ drag }) => (\n                                            <div className={fieldContainer} ref={drag}>\n                                                <Vertical\n                                                    depth={depth}\n                                                    onDrop={item =>\n                                                        onFieldDrop(item, {\n                                                            row: index,\n                                                            index: fieldIndex\n                                                        })\n                                                    }\n                                                    isVisible={noConflict(\n                                                        item =>\n                                                            fieldTypes.includes(item.type) &&\n                                                            (row.length < 4 ||\n                                                                get(item, \"pos.row\") === index)\n                                                    )}\n                                                />\n\n                                                <div className={fieldHandle}>\n                                                    <Field\n                                                        parent={parent}\n                                                        field={field}\n                                                        onEdit={editField}\n                                                        onDelete={deleteField}\n                                                    />\n                                                </div>\n\n                                                {/* Field end */}\n                                                {fieldIndex === row.length - 1 && (\n                                                    <Vertical\n                                                        last\n                                                        depth={depth}\n                                                        isVisible={noConflict(\n                                                            item =>\n                                                                fieldTypes.includes(item.type) &&\n                                                                (row.length < 4 ||\n                                                                    get(item, \"pos.row\") === index)\n                                                        )}\n                                                        onDrop={item =>\n                                                            onFieldDrop(item, {\n                                                                row: index,\n                                                                index: fieldIndex + 1\n                                                            })\n                                                        }\n                                                    />\n                                                )}\n                                            </div>\n                                        )}\n                                    </Draggable>\n                                ))}\n                            </Row>\n                            {/* Row end */}\n                            {index === fields.length - 1 && (\n                                <Horizontal\n                                    data-testid={`cms-editor-row-droppable-bottom-${index}`}\n                                    last\n                                    isVisible={noConflict()}\n                                    onDrop={item =>\n                                        onFieldDrop(item, {\n                                            row: index + 1,\n                                            index: null\n                                        })\n                                    }\n                                />\n                            )}\n                        </RowContainer>\n                    )}\n                </Draggable>\n            ))}\n\n            <EditFieldDialog\n                field={field}\n                onClose={() => editField(null)}\n                onSubmit={field => {\n                    if (field.id) {\n                        updateField(field);\n                        editField(null);\n                        return;\n                    }\n                    insertField({ field, position: dropTarget });\n\n                    editField(null);\n                }}\n            />\n        </Fragment>\n    );\n};\n\nexport interface FieldEditorProps {\n    parent?: CmsEditorField;\n    layout: CmsEditorFieldsLayout;\n    fields: CmsEditorField[];\n    onChange: (params: { fields: CmsEditorField[]; layout: CmsEditorFieldsLayout }) => void;\n}\n\nexport const FieldEditor: React.FC<FieldEditorProps> = props => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"]}