@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/components/FieldEditor/Field.js

@@ -1,228 +1,202 @@
-"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.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("../../icons/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 _useContentModelEditor = require("../ContentModelEditor/useContentModelEditor");
-
-var _useFieldEditor2 = require("./useFieldEditor");
-
-var _appAdmin = require("@webiny/app-admin");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-var t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/field");
-
-var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "erv8xml0",
-  label: "FieldContainer"
-})({
-  display: "flex",
-  flexDirection: "row",
-  justifyContent: "space-between",
-  alignItems: "center"
-});
-var Info = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "erv8xml1",
-  label: "Info"
-})({
-  display: "flex",
-  flexDirection: "column",
-  "> *": {
-    flex: "1 100%",
-    lineHeight: "150%"
-  }
-});
-var Actions = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "erv8xml2",
-  label: "Actions"
-})({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "right",
-  "> *": {
-    flex: "1 100%"
-  }
-});
-var menuStyles = /*#__PURE__*/(0, _emotion.css)({
-  width: 220,
-  right: -105,
-  left: "auto !important",
-  ".disabled": {
-    opacity: 0.5,
-    pointerEvents: "none"
-  }
-}, "label:menuStyles;");
-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;
+import react, { Fragment, useCallback, useMemo } from "react";
+import capitalize from "lodash/capitalize.js";
+import { ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as title_svg_ReactComponent } from "@webiny/icons/title.svg";
+import { ReactComponent as more_vert_svg_ReactComponent } from "@webiny/icons/more_vert.svg";
+import { plugins } from "@webiny/plugins";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useModelEditor } from "../../hooks/index.js";
+import { useModelFieldEditor } from "./useModelFieldEditor.js";
+import { useSnackbar } from "@webiny/app-admin";
+import { DropdownMenu, Heading, IconButton, Tag, Text } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/components/editor/field");
+const allowedTitleFieldTypes = [
+    "text",
+    "number"
+];
+const isFieldAllowedToBeTitle = (model, field, parent)=>{
+    if (field.list || parent) return false;
+    if (false === allowedTitleFieldTypes.includes(field.type)) return false;
+    if (model.titleFieldId === field.fieldId) return false;
+    return true;
 };
-
-var Field = function Field(props) {
-  var field = props.field,
-      onEdit = props.onEdit,
-      parent = props.parent;
-
-  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
-  var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
-      setData = _useContentModelEdito.setData,
-      data = _useContentModelEdito.data;
-
-  var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
-      getFieldPlugin = _useFieldEditor.getFieldPlugin;
-
-  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 (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), {}, {
+const isFieldAllowedToBeDescription = (model, field, parent)=>{
+    if (field.list || parent) return false;
+    if (model.descriptionFieldId === field.fieldId) return false;
+    return "long-text" === field.type;
+};
+const isFieldAllowedToBeImage = (model, field, parent)=>{
+    if (field.list || parent) return false;
+    if (model.imageFieldId === field.fieldId) return false;
+    return "file" === field.type && field.settings?.imagesOnly;
+};
+const getFieldTypeName = (model, field, parent)=>{
+    if (parent) return null;
+    const isTitleField = field.fieldId === model?.titleFieldId && !parent;
+    const isDescriptionField = field.fieldId === model?.descriptionFieldId && !parent;
+    const isImageField = field.fieldId === model?.imageFieldId && !parent;
+    return [
+        isTitleField ? "entry title" : null,
+        isDescriptionField ? "entry description" : null,
+        isImageField ? "entry image" : null
+    ].filter(Boolean).join("") || null;
+};
+const Field = (props)=>{
+    const { field, onEdit, parent } = props;
+    const { showSnackbar, showErrorSnackbar } = useSnackbar();
+    const { setData: setModel, data: model } = useModelEditor();
+    const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();
+    const removeFieldFromSelected = useCallback(async ()=>{
+        if (model.titleFieldId === field.fieldId) await setModel((data)=>({
+                ...data,
+                titleFieldId: null
+            }));
+        else if (model.descriptionFieldId === field.fieldId) await setModel((data)=>({
+                ...data,
+                descriptionFieldId: null
+            }));
+        else if (model.imageFieldId === field.fieldId) await setModel((data)=>({
+                ...data,
+                imageFieldId: null
+            }));
+    }, [
+        field.id,
+        setModel,
+        model
+    ]);
+    const onDelete = useCallback(async ()=>{
+        await removeFieldFromSelected();
+        props.onDelete(field);
+    }, [
+        field.fieldId
+    ]);
+    const setAsTitle = useCallback(async ()=>{
+        const response = await setModel((data)=>({
+                ...data,
                 titleFieldId: field.fieldId
-              });
+            }));
+        if (response && response.error) return showErrorSnackbar(response.error.message);
+        showSnackbar(t`Title field set successfully.`);
+    }, [
+        field.fieldId,
+        setModel
+    ]);
+    const setAsDescription = useCallback(async ()=>{
+        const response = await setModel((data)=>({
+                ...data,
+                descriptionFieldId: field.fieldId
+            }));
+        if (response && response.error) return showErrorSnackbar(response.error.message);
+        showSnackbar(t`Description field set successfully.`);
+    }, [
+        field.fieldId,
+        setModel
+    ]);
+    const setAsImage = useCallback(async ()=>{
+        const response = await setModel((data)=>({
+                ...data,
+                imageFieldId: field.fieldId
+            }));
+        if (response && response.error) return showErrorSnackbar(response.error.message);
+        showSnackbar(t`Image field set successfully.`);
+    }, [
+        field.fieldId,
+        setModel
+    ]);
+    const fieldPlugin = getFieldPlugin(field.type);
+    const editorFieldOptionPlugins = plugins.byType("cms-editor-field-option");
+    if (!fieldPlugin) return null;
+    const rendererPlugin = getFieldRendererPlugin(field.renderer.name);
+    const canEdit = false !== fieldPlugin.field.canEditSettings;
+    const defaultInformationRenderer = useMemo(()=>{
+        const fieldTypeName = getFieldTypeName(model, field, parent);
+        const fn = ()=>{
+            if (!fieldTypeName) return null;
+            return /*#__PURE__*/ react.createElement(Tag, {
+                content: capitalize(fieldTypeName),
+                variant: "neutral-base"
             });
-
-          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, setData]);
-  var fieldPlugin = getFieldPlugin(field.type);
-
-  var editorFieldOptionPlugins = _plugins.plugins.byType("cms-editor-field-option");
-
-  if (!fieldPlugin) {
-    return null;
-  }
-
-  var isTitleField = data && field.fieldId === data.titleFieldId && !parent;
-  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.default.createElement(_Typography.Typography, {
-    use: "caption"
-  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["multiple values"]))), ")"), isTitleField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["entry title"]))), ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    "data-testid": "cms.editor.edit-field",
-    icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
-    onClick: function onClick() {
-      return onEdit(field);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
-    className: menuStyles,
-    handle: /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-      icon: /*#__PURE__*/_react.default.createElement(_more_vert.ReactComponent, null)
-    })
-  }, editorFieldOptionPlugins.map(function (pl) {
-    return /*#__PURE__*/_react.default.cloneElement(pl.render(), {
-      key: pl.name
-    });
-  }), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
-    disabled: !isFieldAllowedToBeTitle(field, parent),
-    onClick: setAsTitle
-  }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-    icon: /*#__PURE__*/_react.default.createElement(_title24px.ReactComponent, null)
-  })), t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
-    onClick: onDelete
-  }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-    icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null)
-  })), t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "field-extra"
-  }, fieldPlugin.field.render && fieldPlugin.field.render({
-    field: field,
-    data: data,
-    setData: setData
-  })));
+        };
+        fn.displayName = "FieldTypeRenderer";
+        return fn;
+    }, [
+        field.id
+    ]);
+    const fieldInformationRenderer = fieldPlugin.field?.renderInfo;
+    const info = [
+        rendererPlugin?.renderer.name,
+        field.list ? "multiple values" : null
+    ].filter(Boolean).join(", ");
+    return /*#__PURE__*/ react.createElement(Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-between align-center"
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6
+    }, field.label), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, fieldPlugin.field.label, info && /*#__PURE__*/ react.createElement("span", {
+        className: "lowercase"
+    }, " (", info, ")"))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-end gap-sm"
+    }, fieldInformationRenderer ? fieldInformationRenderer({
+        model,
+        field
+    }) : defaultInformationRenderer(), canEdit ? /*#__PURE__*/ react.createElement(IconButton, {
+        "data-testid": "cms.editor.edit-field",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>onEdit(field),
+        variant: "ghost",
+        size: "sm"
+    }) : null, /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(more_vert_svg_ReactComponent, null),
+            variant: "ghost",
+            size: "sm"
+        })
+    }, editorFieldOptionPlugins.map((pl)=>/*#__PURE__*/ react.cloneElement(pl.render(), {
+            key: pl.name
+        })), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        disabled: !isFieldAllowedToBeTitle(model, field, parent),
+        onClick: setAsTitle,
+        text: t`Use as title`,
+        icon: /*#__PURE__*/ react.createElement(DropdownMenu.Item.Icon, {
+            element: /*#__PURE__*/ react.createElement(title_svg_ReactComponent, null),
+            label: t`Use as title`
+        })
+    }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        disabled: !isFieldAllowedToBeDescription(model, field, parent),
+        onClick: setAsDescription,
+        text: t`Use as description`,
+        icon: /*#__PURE__*/ react.createElement(DropdownMenu.Item.Icon, {
+            element: /*#__PURE__*/ react.createElement(title_svg_ReactComponent, null),
+            label: t`Use as description`
+        })
+    }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        disabled: !isFieldAllowedToBeImage(model, field, parent),
+        onClick: setAsImage,
+        text: t`Use as image`,
+        icon: /*#__PURE__*/ react.createElement(DropdownMenu.Item.Icon, {
+            element: /*#__PURE__*/ react.createElement(title_svg_ReactComponent, null),
+            label: t`Use as image`
+        })
+    }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        onClick: onDelete,
+        text: t`Delete`,
+        icon: /*#__PURE__*/ react.createElement(DropdownMenu.Item.Icon, {
+            element: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+            label: t`Delete`
+        }),
+        className: "text-destructive-primary! [&_svg]:fill-destructive"
+    })))), fieldPlugin.field.render && /*#__PURE__*/ react.createElement("div", {
+        className: "pt-md"
+    }, fieldPlugin.field.render({
+        field,
+        data: model,
+        setData: setModel
+    })));
 };
+const FieldEditor_Field = /*#__PURE__*/ react.memo(Field);
+export default FieldEditor_Field;
 
-var _default = /*#__PURE__*/_react.default.memo(Field);
-
-exports.default = _default;
+//# sourceMappingURL=Field.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","FieldContainer","styled","display","flexDirection","justifyContent","alignItems","Info","flex","lineHeight","Actions","menuStyles","css","width","right","left","opacity","pointerEvents","allowedTitleFieldTypes","isFieldAllowedToBeTitle","field","parent","multipleValues","includes","type","Field","props","onEdit","useSnackbar","showSnackbar","useContentModelEditor","setData","data","useFieldEditor","getFieldPlugin","useConfirmationDialog","title","message","showConfirmation","lockedFields","isLocked","some","lockedField","fieldId","storageId","onDelete","useCallback","setAsTitle","titleFieldId","response","error","fieldPlugin","editorFieldOptionPlugins","plugins","byType","isTitleField","label","map","pl","React","cloneElement","render","key","name","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 \"~/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\";\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 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 { 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 isTitleField = data && field.fieldId === data.titleFieldId && !parent;\n\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 onClick={onDelete}>\n                            <ListItemGraphic>\n                                <Icon icon={<DeleteIcon />} />\n                            </ListItemGraphic>\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"],"mappings":"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"}
+{"version":3,"file":"admin/components/FieldEditor/Field.js","sources":["../../../../src/admin/components/FieldEditor/Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useMemo } from \"react\";\nimport capitalize from \"lodash/capitalize.js\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"@webiny/icons/title.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsModelField, CmsEditorFieldOptionPlugin, CmsModel } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { IconButton, Heading, Text, DropdownMenu, Tag } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.list || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    } else if (model.titleFieldId === field.fieldId) {\n        return false;\n    }\n    return true;\n};\nconst isFieldAllowedToBeDescription = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n) => {\n    if (field.list || parent) {\n        return false;\n    } else if (model.descriptionFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"long-text\";\n};\n\nconst isFieldAllowedToBeImage = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.list || parent) {\n        return false;\n    } else if (model.imageFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"file\" && field.settings?.imagesOnly;\n};\n\nconst getFieldTypeName = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n): string | null => {\n    if (parent) {\n        return null;\n    }\n    const isTitleField = field.fieldId === model?.titleFieldId && !parent;\n    const isDescriptionField = field.fieldId === model?.descriptionFieldId && !parent;\n    const isImageField = field.fieldId === model?.imageFieldId && !parent;\n\n    return (\n        [\n            isTitleField ? \"entry title\" : null,\n            isDescriptionField ? \"entry description\" : null,\n            isImageField ? \"entry image\" : null\n        ]\n            .filter(Boolean)\n            .join(\"\") || null\n    );\n};\n\nexport interface FieldProps {\n    field: CmsModelField;\n    onDelete: (field: CmsModelField) => void;\n    onEdit: (field: CmsModelField) => void;\n    parent?: CmsModelField;\n}\n\nconst Field = (props: FieldProps) => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar, showErrorSnackbar } = useSnackbar();\n    const { setData: setModel, data: model } = useModelEditor();\n    const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();\n\n    const removeFieldFromSelected = useCallback(async () => {\n        if (model.titleFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    titleFieldId: null\n                };\n            });\n        } else if (model.descriptionFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    descriptionFieldId: null\n                };\n            });\n        } else if (model.imageFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    imageFieldId: null\n                };\n            });\n        }\n    }, [field.id, setModel, model]);\n\n    const onDelete = useCallback(async () => {\n        await removeFieldFromSelected();\n        props.onDelete(field);\n        return;\n    }, [field.fieldId]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsDescription = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, descriptionFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Description field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsImage = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, imageFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Image field set successfully.`);\n    }, [field.fieldId, setModel]);\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\n    const defaultInformationRenderer = useMemo(() => {\n        const fieldTypeName = getFieldTypeName(model, field, parent);\n        const fn = () => {\n            if (!fieldTypeName) {\n                return null;\n            }\n            return <Tag content={capitalize(fieldTypeName)} variant={\"neutral-base\"} />;\n        };\n\n        fn.displayName = \"FieldTypeRenderer\";\n\n        return fn;\n    }, [field.id]);\n\n    const fieldInformationRenderer = fieldPlugin.field?.renderInfo;\n\n    const info = [rendererPlugin?.renderer.name, field.list ? \"multiple values\" : null]\n        .filter(Boolean)\n        .join(\", \");\n\n    return (\n        <Fragment>\n            <div className={\"flex justify-between align-center\"}>\n                <div>\n                    <Heading level={6}>{field.label}</Heading>\n                    <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                        {fieldPlugin.field.label}\n                        {info && <span className={\"lowercase\"}> ({info})</span>}\n                    </Text>\n                </div>\n                <div className={\"flex items-center justify-end gap-sm\"}>\n                    {fieldInformationRenderer\n                        ? fieldInformationRenderer({ model, field })\n                        : defaultInformationRenderer()}\n                    {canEdit ? (\n                        <IconButton\n                            data-testid={\"cms.editor.edit-field\"}\n                            icon={<EditIcon />}\n                            onClick={() => onEdit(field)}\n                            variant={\"ghost\"}\n                            size={\"sm\"}\n                        />\n                    ) : null}\n                    <DropdownMenu\n                        trigger={\n                            <IconButton icon={<MoreVerticalIcon />} variant={\"ghost\"} size={\"sm\"} />\n                        }\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                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeTitle(model, field, parent)}\n                            onClick={setAsTitle}\n                            text={t`Use as title`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as title`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeDescription(model, field, parent)}\n                            onClick={setAsDescription}\n                            text={t`Use as description`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as description`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeImage(model, field, parent)}\n                            onClick={setAsImage}\n                            text={t`Use as image`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as image`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            onClick={onDelete}\n                            text={t`Delete`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<DeleteIcon />}\n                                    label={t`Delete`}\n                                />\n                            }\n                            className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n                        />\n                    </DropdownMenu>\n                </div>\n            </div>\n            {fieldPlugin.field.render && (\n                <div className={\"pt-md\"}>\n                    {fieldPlugin.field.render({ field, data: model, setData: setModel })}\n                </div>\n            )}\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"names":["t","i18n","allowedTitleFieldTypes","isFieldAllowedToBeTitle","model","field","parent","isFieldAllowedToBeDescription","isFieldAllowedToBeImage","getFieldTypeName","isTitleField","isDescriptionField","isImageField","Boolean","Field","props","onEdit","showSnackbar","showErrorSnackbar","useSnackbar","setModel","useModelEditor","getFieldPlugin","getFieldRendererPlugin","useModelFieldEditor","removeFieldFromSelected","useCallback","data","onDelete","setAsTitle","response","setAsDescription","setAsImage","fieldPlugin","editorFieldOptionPlugins","plugins","rendererPlugin","canEdit","defaultInformationRenderer","useMemo","fieldTypeName","fn","Tag","capitalize","fieldInformationRenderer","info","Fragment","Heading","Text","IconButton","EditIcon","DropdownMenu","MoreVerticalIcon","pl","React","TitleIcon","DeleteIcon"],"mappings":"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"}

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

@@ -1,12 +1,12 @@
 import React from "react";
-import { CmsEditorField, CmsEditorFieldsLayout } from "../../../types";
+import type { CmsEditorFieldsLayout, CmsModelField } from "../../../types.js";
 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: React.FC<FieldEditorProps>;
+export declare const FieldEditor: (props: FieldEditorProps) => React.JSX.Element;