@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

package/admin/components/FieldEditor/Field.js

@@ -1,29 +1,36 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+"use strict";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { Fragment, useCallback } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import { IconButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
-import { ReactComponent as EditIcon } from "@svgr/webpack!../../icons/edit.svg";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../icons/delete.svg";
-import { ReactComponent as TitleIcon } from "@svgr/webpack!../../icons/title-24px.svg";
-import { ReactComponent as MoreVerticalIcon } from "@svgr/webpack!../../icons/more_vert.svg";
-import { Menu, MenuItem } from "@webiny/ui/Menu";
-import { plugins } from "@webiny/plugins";
-import { ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { i18n } from "@webiny/app/i18n";
-import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { useContentModelEditor } from "../ContentModelEditor/useContentModelEditor";
-import { useFieldEditor } from "./useFieldEditor";
-var t = i18n.ns("app-headless-cms/admin/components/editor/field");
-var FieldContainer = /*#__PURE__*/styled("div", {
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _emotion = require("emotion");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Button = require("@webiny/ui/Button");
+var _Typography = require("@webiny/ui/Typography");
+var _edit = require("@material-design-icons/svg/outlined/edit.svg");
+var _delete = require("../../icons/delete.svg");
+var _title24px = require("../../icons/title-24px.svg");
+var _more_vert = require("../../icons/more_vert.svg");
+var _Menu = require("@webiny/ui/Menu");
+var _plugins = require("@webiny/plugins");
+var _List = require("@webiny/ui/List");
+var _Icon = require("@webiny/ui/Icon");
+var _i18n = require("@webiny/app/i18n");
+var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
+var _hooks = require("../../hooks");
+var _useModelFieldEditor2 = require("./useModelFieldEditor");
+var _appAdmin = require("@webiny/app-admin");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/field");
+var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "erv8xml0",
   label: "FieldContainer"
 })({
@@ -32,8 +39,12 @@ var FieldContainer = /*#__PURE__*/styled("div", {
   justifyContent: "space-between",
   alignItems: "center"
 });
-var Info = /*#__PURE__*/styled("div", {
-  target: "erv8xml1",
+var LowerCase = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "LowerCase",
+  target: "erv8xml1"
+})("text-transform:lowercase;");
+var Info = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "erv8xml2",
   label: "Info"
 })({
   display: "flex",
@@ -43,8 +54,8 @@ var Info = /*#__PURE__*/styled("div", {
     lineHeight: "150%"
   }
 });
-var Actions = /*#__PURE__*/styled("div", {
-  target: "erv8xml2",
+var Actions = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "erv8xml3",
   label: "Actions"
 })({
   display: "flex",
@@ -54,7 +65,7 @@ var Actions = /*#__PURE__*/styled("div", {
     flex: "1 100%"
   }
 });
-var menuStyles = /*#__PURE__*/css({
+var menuStyles = /*#__PURE__*/(0, _emotion.css)({
   width: 220,
   right: -105,
   left: "auto !important",
@@ -63,117 +74,117 @@ var menuStyles = /*#__PURE__*/css({
     pointerEvents: "none"
   }
 }, "label:menuStyles;");
+var FieldExtra = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FieldExtra",
+  target: "erv8xml4"
+})("padding:10px 0 10px;:empty{display:none;}");
 var allowedTitleFieldTypes = ["text", "number"];
-
 var isFieldAllowedToBeTitle = function isFieldAllowedToBeTitle(field, parent) {
   if (field.multipleValues || parent) {
     return false;
   } else if (allowedTitleFieldTypes.includes(field.type) === false) {
     return false;
   }
-
   return true;
 };
-
 var Field = function Field(props) {
   var field = props.field,
-      onEdit = props.onEdit,
-      parent = props.parent;
-
-  var _useSnackbar = useSnackbar(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
-  var _useContentModelEdito = useContentModelEditor(),
-      setData = _useContentModelEdito.setData,
-      data = _useContentModelEdito.data;
-
-  var _useFieldEditor = useFieldEditor(),
-      getFieldPlugin = _useFieldEditor.getFieldPlugin;
-
-  var onDelete = useCallback(function () {
-    props.onDelete(field);
-  }, [field.fieldId]);
-  var setAsTitle = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    onEdit = props.onEdit,
+    parent = props.parent;
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var _useModelEditor = (0, _hooks.useModelEditor)(),
+    setData = _useModelEditor.setData,
+    data = _useModelEditor.data;
+  var _useModelFieldEditor = (0, _useModelFieldEditor2.useModelFieldEditor)(),
+    getFieldPlugin = _useModelFieldEditor.getFieldPlugin,
+    getFieldRendererPlugin = _useModelFieldEditor.getFieldRendererPlugin;
+  var _useConfirmationDialo = (0, _appAdmin.useConfirmationDialog)({
+      title: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Warning - You are trying to delete a locked field!"]))),
+      message: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["You are about to delete a field which is used in the data storage"])))), /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["All data in that field will be lost and there is no going back!"])))), /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Are you sure you want to continue?"])))))
+    }),
+    showConfirmation = _useConfirmationDialo.showConfirmation;
+  var lockedFields = data ? data.lockedFields || [] : [];
+  var isLocked = lockedFields.some(function (lockedField) {
+    return lockedField.fieldId === field.storageId;
+  });
+  var onDelete = (0, _react.useCallback)(function () {
+    if (!isLocked) {
+      props.onDelete(field);
+      return;
+    }
+    showConfirmation(function () {
+      props.onDelete(field);
+    });
+  }, [field.fieldId, lockedFields]);
+  var setAsTitle = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
     var response;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return setData(function (data) {
-              return _objectSpread(_objectSpread({}, data), {}, {
-                titleFieldId: field.fieldId
-              });
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return setData(function (data) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+              titleFieldId: field.fieldId
             });
-
-          case 2:
-            response = _context.sent;
-
-            if (!response.error) {
-              _context.next = 5;
-              break;
-            }
-
-            return _context.abrupt("return", showSnackbar(response.error.message));
-
-          case 5:
-            showSnackbar(t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Title field set successfully."]))));
-
-          case 6:
-          case "end":
-            return _context.stop();
-        }
+          });
+        case 2:
+          response = _context.sent;
+          if (!(response && response.error)) {
+            _context.next = 5;
+            break;
+          }
+          return _context.abrupt("return", showSnackbar(response.error.message));
+        case 5:
+          showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Title field set successfully."]))));
+        case 6:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
-  })), [field.fieldId]);
+  })), [field.fieldId, setData]);
   var fieldPlugin = getFieldPlugin(field.type);
-  var editorFieldOptionPlugins = plugins.byType("cms-editor-field-option");
-
+  var editorFieldOptionPlugins = _plugins.plugins.byType("cms-editor-field-option");
   if (!fieldPlugin) {
     return null;
   }
-
-  var lockedFields = data.lockedFields || [];
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement(Typography, {
+  var rendererPlugin = getFieldRendererPlugin(field.renderer.name);
+  var canEdit = fieldPlugin.field.canEditSettings !== false;
+  var isTitleField = data && field.fieldId === data.titleFieldId && !parent;
+  var info = [rendererPlugin === null || rendererPlugin === void 0 ? void 0 : rendererPlugin.renderer.name, field.multipleValues ? "multiple values" : null, isTitleField ? "entry title" : null].filter(Boolean).join(", ");
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "subtitle1"
-  }, field.label), /*#__PURE__*/React.createElement(Typography, {
+  }, field.label), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "caption"
-  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/React.createElement(React.Fragment, null, "(", t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["multiple values"]))), ")"), field.fieldId === data.titleFieldId && /*#__PURE__*/React.createElement(React.Fragment, null, "(", t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["entry title"]))), ")"))), /*#__PURE__*/React.createElement(Actions, null, /*#__PURE__*/React.createElement(IconButton, {
+  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(LowerCase, null, "(", info, ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, canEdit ? /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     "data-testid": "cms.editor.edit-field",
-    icon: /*#__PURE__*/React.createElement(EditIcon, null),
+    icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
     onClick: function onClick() {
       return onEdit(field);
     }
-  }), /*#__PURE__*/React.createElement(Menu, {
+  }) : null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
     className: menuStyles,
-    handle: /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(MoreVerticalIcon, null)
+    handle: /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_more_vert.ReactComponent, null)
     })
   }, editorFieldOptionPlugins.map(function (pl) {
-    return /*#__PURE__*/React.cloneElement(pl.render(), {
+    return /*#__PURE__*/_react.default.cloneElement(pl.render(), {
       key: pl.name
     });
-  }), /*#__PURE__*/React.createElement(MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
     disabled: !isFieldAllowedToBeTitle(field, parent),
     onClick: setAsTitle
-  }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(TitleIcon, null)
-  })), t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Use as title"])))), /*#__PURE__*/React.createElement(MenuItem, {
-    disabled: lockedFields.some(function (lockedField) {
-      return lockedField.fieldId === field.fieldId;
-    }),
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_title24px.ReactComponent, null)
+  })), t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
     onClick: onDelete
-  }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
-  })), lockedFields.find(function (lockedField) {
-    return lockedField.fieldId === field.fieldId;
-  }) ? t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Cannot delete"]))) : t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Delete"]))))))), /*#__PURE__*/React.createElement("div", {
-    className: "field-extra"
-  }, fieldPlugin.field.render && fieldPlugin.field.render({
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null)
+  })), t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement(FieldExtra, null, fieldPlugin.field.render && fieldPlugin.field.render({
     field: field,
     data: data,
     setData: setData
   })));
 };
-
-export default /*#__PURE__*/React.memo(Field);
+var _default = /*#__PURE__*/_react.default.memo(Field);
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","FieldContainer","styled","display","flexDirection","justifyContent","alignItems","LowerCase","Info","flex","lineHeight","Actions","menuStyles","css","width","right","left","opacity","pointerEvents","FieldExtra","allowedTitleFieldTypes","isFieldAllowedToBeTitle","field","parent","multipleValues","includes","type","Field","props","onEdit","useSnackbar","showSnackbar","useModelEditor","setData","data","useModelFieldEditor","getFieldPlugin","getFieldRendererPlugin","useConfirmationDialog","title","message","showConfirmation","lockedFields","isLocked","some","lockedField","fieldId","storageId","onDelete","useCallback","setAsTitle","titleFieldId","response","error","fieldPlugin","editorFieldOptionPlugins","plugins","byType","rendererPlugin","renderer","name","canEdit","canEditSettings","isTitleField","info","filter","Boolean","join","label","map","pl","React","cloneElement","render","key","memo"],"sources":["Field.tsx"],"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 \"@material-design-icons/svg/outlined/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 { CmsModelField, 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 { useModelEditor } from \"~/admin/hooks\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\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 LowerCase = styled.span`\n    text-transform: lowercase;\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 FieldExtra = styled.div`\n    padding: 10px 0 10px;\n    :empty {\n        display: none;\n    }\n`;\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (field: CmsModelField, parent?: CmsModelField) => {\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: CmsModelField;\n    onDelete: (field: CmsModelField) => void;\n    onEdit: (field: CmsModelField) => void;\n    parent?: CmsModelField;\n}\nconst Field: React.FC<FieldProps> = props => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar } = useSnackbar();\n    const { setData, data } = useModelEditor();\n    const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();\n\n    const { showConfirmation } = useConfirmationDialog({\n        title: t`Warning - You are trying to delete a locked field!`,\n        message: (\n            <>\n                <p>{t`You are about to delete a field which is used in the data storage`}</p>\n                <p>{t`All data in that field will be lost and there is no going back!`}</p>\n                <p>&nbsp;</p>\n                <p>{t`Are you sure you want to continue?`}</p>\n            </>\n        )\n    });\n    const lockedFields = data ? data.lockedFields || [] : [];\n    const isLocked = lockedFields.some(lockedField => lockedField.fieldId === field.storageId);\n\n    const onDelete = useCallback(() => {\n        if (!isLocked) {\n            props.onDelete(field);\n            return;\n        }\n        showConfirmation(() => {\n            props.onDelete(field);\n        });\n    }, [field.fieldId, lockedFields]);\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 && response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setData]);\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 rendererPlugin = getFieldRendererPlugin(field.renderer.name);\n    const canEdit = fieldPlugin.field.canEditSettings !== false;\n    const isTitleField = data && field.fieldId === data.titleFieldId && !parent;\n\n    const info = [\n        rendererPlugin?.renderer.name,\n        field.multipleValues ? \"multiple values\" : null,\n        isTitleField ? \"entry title\" : null\n    ]\n        .filter(Boolean)\n        .join(\", \");\n\n    return (\n        <Fragment>\n            <FieldContainer>\n                <Info>\n                    <Typography use={\"subtitle1\"}>{field.label}</Typography>\n                    <Typography use={\"caption\"}>\n                        {fieldPlugin.field.label} {field.multipleValues && <></>}\n                        <LowerCase>({info})</LowerCase>\n                    </Typography>\n                </Info>\n                <Actions>\n                    {canEdit ? (\n                        <IconButton\n                            data-testid={\"cms.editor.edit-field\"}\n                            icon={<EditIcon />}\n                            onClick={() => onEdit(field)}\n                        />\n                    ) : null}\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 onClick={onDelete}>\n                            <ListItemGraphic>\n                                <Icon icon={<DeleteIcon />} />\n                            </ListItemGraphic>\n                            {t`Delete`}\n                        </MenuItem>\n                    </Menu>\n                </Actions>\n            </FieldContainer>\n            <FieldExtra>\n                {fieldPlugin.field.render && fieldPlugin.field.render({ field, data, setData })}\n            </FieldExtra>\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"mappings":"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"}

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

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

package/admin/components/FieldEditor/FieldEditor.js

@@ -1,49 +1,91 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldEditor = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _Icon = require("@webiny/ui/Icon");
+var _i18n = require("@webiny/app/i18n");
+var _roundDrag_indicator24px = require("../../icons/round-drag_indicator-24px.svg");
+var _DropZone = require("../DropZone");
+var _Draggable = _interopRequireDefault(require("../Draggable"));
+var _EditFieldDialog = _interopRequireDefault(require("./EditFieldDialog"));
+var _Field = _interopRequireDefault(require("./Field"));
+var _Styled = require("./Styled");
+var _useModelFieldEditor2 = require("./useModelFieldEditor");
+var _FieldEditorContext = require("./FieldEditorContext");
+var _ModelFieldProvider = require("../ModelFieldProvider");
 var _templateObject;
-
-import React, { Fragment } from "react";
-import get from "lodash/get";
-import { Icon } from "@webiny/ui/Icon";
-import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as HandleIcon } from "@svgr/webpack!../../icons/round-drag_indicator-24px.svg";
-import { Center, Vertical, Horizontal } from "../DropZone";
-import Draggable from "../Draggable";
-import EditFieldDialog from "./EditFieldDialog";
-import Field from "./Field";
-import { rowHandle, fieldHandle, fieldContainer, Row, RowContainer } from "./Styled";
-import { useFieldEditor } from "./useFieldEditor";
-import { FieldEditorProvider } from "./FieldEditorContext";
-var t = i18n.namespace("app-headless-cms/admin/components/editor");
+var t = _i18n.i18n.namespace("app-headless-cms/admin/components/editor");
 var fieldTypes = ["field", "newField"];
-
 var Editor = function Editor() {
-  var _useFieldEditor = useFieldEditor(),
-      parent = _useFieldEditor.parent,
-      depth = _useFieldEditor.depth,
-      insertField = _useFieldEditor.insertField,
-      updateField = _useFieldEditor.updateField,
-      deleteField = _useFieldEditor.deleteField,
-      fields = _useFieldEditor.fields,
-      noConflict = _useFieldEditor.noConflict,
-      editField = _useFieldEditor.editField,
-      onFieldDrop = _useFieldEditor.onFieldDrop,
-      onEndDrag = _useFieldEditor.onEndDrag,
-      field = _useFieldEditor.field,
-      dropTarget = _useFieldEditor.dropTarget;
-
-  return /*#__PURE__*/React.createElement(Fragment, null, fields.length === 0 && /*#__PURE__*/React.createElement(Center, {
+  var _useModelFieldEditor = (0, _useModelFieldEditor2.useModelFieldEditor)(),
+    parent = _useModelFieldEditor.parent,
+    depth = _useModelFieldEditor.depth,
+    insertField = _useModelFieldEditor.insertField,
+    updateField = _useModelFieldEditor.updateField,
+    deleteField = _useModelFieldEditor.deleteField,
+    fields = _useModelFieldEditor.fields,
+    noConflict = _useModelFieldEditor.noConflict,
+    editField = _useModelFieldEditor.editField,
+    onFieldDrop = _useModelFieldEditor.onFieldDrop,
+    onEndDrag = _useModelFieldEditor.onEndDrag,
+    field = _useModelFieldEditor.field,
+    dropTarget = _useModelFieldEditor.dropTarget,
+    getFieldPlugin = _useModelFieldEditor.getFieldPlugin;
+  var canDropIntoField = function canDropIntoField(field, draggable) {
+    var fieldPlugin = getFieldPlugin(field.type);
+    var canAccept = fieldPlugin.field.canAccept;
+    if (typeof canAccept === "function" && !canAccept(field, draggable)) {
+      return false;
+    }
+    return true;
+  };
+  var isVerticalDropzoneVisible = function isVerticalDropzoneVisible(cb) {
+    return function (item) {
+      var _fieldPlugin$field$al;
+      if (!parent) {
+        return cb(item);
+      }
+      var fieldPlugin = getFieldPlugin(parent.type);
+      var allowLayout = (_fieldPlugin$field$al = fieldPlugin.field.allowLayout) !== null && _fieldPlugin$field$al !== void 0 ? _fieldPlugin$field$al : true;
+      if (!allowLayout) {
+        return false;
+      }
+      if (!canDropIntoField(parent, item)) {
+        return false;
+      }
+      return cb(item);
+    };
+  };
+  var isHorizontalDropzoneVisible = function isHorizontalDropzoneVisible(cb) {
+    return function (item) {
+      if (!parent) {
+        return cb(item);
+      }
+      if (!canDropIntoField(parent, item)) {
+        return false;
+      }
+      return cb(item);
+    };
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fields.length === 0 && /*#__PURE__*/_react.default.createElement(_DropZone.Center, {
+    isDroppable: isHorizontalDropzoneVisible(function () {
+      return true;
+    }),
     onDrop: function onDrop(item) {
       return onFieldDrop(item, {
         row: 0,
         index: 0
       });
-    },
-    style: {
-      padding: "5px 0 15px 0"
     }
-  }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Drop your first field here"])))), fields.map(function (row, index) {
-    return /*#__PURE__*/React.createElement(Draggable, {
+  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Drop your first field here"])))), fields.map(function (row, index) {
+    return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
       beginDrag: {
         parent: parent ? parent.fieldId : null,
         type: "row",
@@ -56,34 +98,34 @@ var Editor = function Editor() {
       key: row.map(function (f) {
         return f.fieldId;
       }).join(".")
-    }, function (_ref
-    /* RowContainer start - includes drag handle, drop zones and the Row itself. */
-    ) {
+    }, function (_ref /* RowContainer start - includes drag handle, drop zones and the Row itself. */) {
       var drag = _ref.drag,
-          isDragging = _ref.isDragging;
-      return /*#__PURE__*/React.createElement(RowContainer, {
+        isDragging = _ref.isDragging;
+      return /*#__PURE__*/_react.default.createElement(_Styled.RowContainer, {
         style: {
           opacity: isDragging ? 0.3 : 1
         }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: rowHandle,
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _Styled.rowHandle,
         ref: drag
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: /*#__PURE__*/React.createElement(HandleIcon, null)
-      })), /*#__PURE__*/React.createElement(Horizontal, {
+      }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+        icon: /*#__PURE__*/_react.default.createElement(_roundDrag_indicator24px.ReactComponent, null)
+      })), /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
+        isVisible: isHorizontalDropzoneVisible(noConflict()),
         "data-testid": "cms-editor-row-droppable-top-".concat(index),
-        isVisible: noConflict(),
         onDrop: function onDrop(item) {
           return onFieldDrop(item, {
             row: index,
             index: null
           });
         }
-      }), /*#__PURE__*/React.createElement(Row, {
+      }), /*#__PURE__*/_react.default.createElement(_Styled.Row, {
         "data-testid": "cms.editor.field-row"
       }, row.map(function (field, fieldIndex) {
-        return /*#__PURE__*/React.createElement(Draggable, {
-          key: field.fieldId,
+        return /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+          field: field,
+          key: field.fieldId
+        }, /*#__PURE__*/_react.default.createElement(_Draggable.default, {
           beginDrag: {
             parent: parent ? parent.fieldId : null,
             type: "field",
@@ -96,10 +138,10 @@ var Editor = function Editor() {
           endDrag: onEndDrag
         }, function (_ref2) {
           var drag = _ref2.drag;
-          return /*#__PURE__*/React.createElement("div", {
-            className: fieldContainer,
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: _Styled.fieldContainer,
             ref: drag
-          }, /*#__PURE__*/React.createElement(Vertical, {
+          }, /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
             depth: depth,
             onDrop: function onDrop(item) {
               return onFieldDrop(item, {
@@ -107,22 +149,22 @@ var Editor = function Editor() {
                 index: fieldIndex
               });
             },
-            isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
-            })
-          }), /*#__PURE__*/React.createElement("div", {
-            className: fieldHandle
-          }, /*#__PURE__*/React.createElement(Field, {
+            isVisible: isVerticalDropzoneVisible(noConflict(function (item) {
+              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
+            }))
+          }), /*#__PURE__*/_react.default.createElement("div", {
+            className: _Styled.fieldHandle
+          }, /*#__PURE__*/_react.default.createElement(_Field.default, {
             parent: parent,
             field: field,
             onEdit: editField,
             onDelete: deleteField
-          })), fieldIndex === row.length - 1 && /*#__PURE__*/React.createElement(Vertical, {
+          })), fieldIndex === row.length - 1 && /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
             last: true,
             depth: depth,
-            isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
-            }),
+            isVisible: isVerticalDropzoneVisible(noConflict(function (item) {
+              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
+            })),
             onDrop: function onDrop(item) {
               return onFieldDrop(item, {
                 row: index,
@@ -130,37 +172,40 @@ var Editor = function Editor() {
               });
             }
           }));
-        });
-      })), index === fields.length - 1 && /*#__PURE__*/React.createElement(Horizontal, {
+        }));
+      })), index === fields.length - 1 ? /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
         "data-testid": "cms-editor-row-droppable-bottom-".concat(index),
         last: true,
-        isVisible: noConflict(),
+        isVisible: isHorizontalDropzoneVisible(noConflict()),
         onDrop: function onDrop(item) {
           return onFieldDrop(item, {
             row: index + 1,
             index: null
           });
         }
-      }));
+      }) : null);
     });
-  }), /*#__PURE__*/React.createElement(EditFieldDialog, {
-    field: field,
-    onClose: editField,
+  }), field ? /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+    field: field
+  }, /*#__PURE__*/_react.default.createElement(_EditFieldDialog.default, {
+    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);
     }
-  }));
+  })) : null);
 };
-
-export var FieldEditor = function FieldEditor(props) {
-  return /*#__PURE__*/React.createElement(FieldEditorProvider, props, /*#__PURE__*/React.createElement(Editor, null));
-};
+var FieldEditor = function FieldEditor(props) {
+  return /*#__PURE__*/_react.default.createElement(_FieldEditorContext.FieldEditorProvider, props, /*#__PURE__*/_react.default.createElement(Editor, null));
+};
+exports.FieldEditor = FieldEditor;