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

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -1,108 +1,74 @@
 "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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Dialog = require("../Dialog");
-
 var _form = require("@webiny/form");
-
 var _Tabs = require("@webiny/ui/Tabs");
-
 var _i18n = require("@webiny/app/i18n");
-
 var _plugins = require("@webiny/plugins");
-
 var _GeneralTab = _interopRequireDefault(require("./EditFieldDialog/GeneralTab"));
-
 var _AppearanceTab = _interopRequireDefault(require("./EditFieldDialog/AppearanceTab"));
-
 var _PredefinedValues = _interopRequireDefault(require("./EditFieldDialog/PredefinedValues"));
-
 var _ValidatorsList = require("./EditFieldDialog/ValidatorsList");
-
 var _Button = require("@webiny/ui/Button");
-
 var _hooks = require("../../hooks");
-
 var _ModelFieldProvider = require("../ModelFieldProvider");
-
 var _ValidationsSection = require("./EditFieldDialog/ValidationsSection");
-
 var _getValidators = require("./EditFieldDialog/getValidators");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 var t = _i18n.i18n.namespace("app-headless-cms/admin/components/editor");
-
 var FullScreenDialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
   label: "FullScreenDialog",
   target: "eoy63ui0"
 })("width:100vw;height:100vh;.mdc-dialog__surface{width:100%;max-width:100% !important;max-height:100% !important;.webiny-ui-dialog__content{max-width:100% !important;max-height:100% !important;width:100vw;height:calc(100vh - 155px);overflow:scroll !important;}}");
-
 function setupState(field, fieldPlugin, contentModel) {
   var clonedField = (0, _cloneDeep.default)(field);
-
   if (!clonedField.renderer || !clonedField.renderer.name) {
     var _plugins$byType$filte = _plugins.plugins.byType("cms-editor-field-renderer").filter(function (item) {
-      return item.renderer.canUse({
-        field: field,
-        fieldPlugin: fieldPlugin
-      });
-    }),
-        _plugins$byType$filte2 = (0, _slicedToArray2.default)(_plugins$byType$filte, 1),
-        renderPlugin = _plugins$byType$filte2[0];
-
+        return item.renderer.canUse({
+          field: field,
+          fieldPlugin: fieldPlugin
+        });
+      }),
+      _plugins$byType$filte2 = (0, _slicedToArray2.default)(_plugins$byType$filte, 1),
+      renderPlugin = _plugins$byType$filte2[0];
     if (renderPlugin) {
       clonedField.renderer = {
         name: renderPlugin.renderer.rendererName
       };
     }
   }
-
   return {
     shadowField: clonedField,
     isTitleField: contentModel.titleFieldId === field.fieldId
   };
 }
-
 var EditFieldDialog = function EditFieldDialog(props) {
   var _useModelField = (0, _hooks.useModelField)(),
-      field = _useModelField.field,
-      fieldPlugin = _useModelField.fieldPlugin;
-
+    field = _useModelField.field,
+    fieldPlugin = _useModelField.fieldPlugin;
   var _useModelEditor = (0, _hooks.useModelEditor)(),
-      contentModel = _useModelEditor.data,
-      setContentModelData = _useModelEditor.setData;
-
+    contentModel = _useModelEditor.data,
+    setContentModelData = _useModelEditor.setData;
   var _useState = (0, _react.useState)(setupState(field, fieldPlugin, contentModel)),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-      _useState2$ = _useState2[0],
-      shadowField = _useState2$.shadowField,
-      isTitleField = _useState2$.isTitleField;
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    _useState2$ = _useState2[0],
+    shadowField = _useState2$.shadowField,
+    isTitleField = _useState2$.isTitleField;
   var headerTitle = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Field Settings - {fieldTypeLabel}"])))({
     fieldTypeLabel: fieldPlugin.field.label
   });
-
   var onSubmit = function onSubmit(data, form) {
     /**
      * In case title field `fieldId` changed, we need to update the title field on the model itself.
@@ -114,10 +80,8 @@ var EditFieldDialog = function EditFieldDialog(props) {
         });
       });
     }
-
     props.onSubmit(data, form);
   };
-
   return /*#__PURE__*/_react.default.createElement(FullScreenDialog, {
     preventOutsideDismiss: true,
     open: true,
@@ -128,7 +92,7 @@ var EditFieldDialog = function EditFieldDialog(props) {
     onSubmit: onSubmit
   }, function (_ref) {
     var shadowField = _ref.data,
-        submit = _ref.submit;
+      submit = _ref.submit;
     var individualValidation = (0, _getValidators.getFieldValidators)(shadowField, fieldPlugin);
     var hasValidators = individualValidation.validators.length > 0;
     var showValidatorsTab = shadowField.multipleValues || individualValidation.validators.length > 0;
@@ -136,7 +100,6 @@ var EditFieldDialog = function EditFieldDialog(props) {
     var listValidation = (0, _getValidators.getListValidators)(shadowField, fieldPlugin);
     return (
       /*#__PURE__*/
-
       /**
        * We're using the `shadowField` as the new context, because we want all changes by form inputs
        * to immediately be propagated to all dialog components.
@@ -177,6 +140,5 @@ var EditFieldDialog = function EditFieldDialog(props) {
     );
   }));
 };
-
 var _default = EditFieldDialog;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","namespace","FullScreenDialog","styled","Dialog","setupState","field","fieldPlugin","contentModel","clonedField","cloneDeep","renderer","name","plugins","byType","filter","item","canUse","renderPlugin","rendererName","shadowField","isTitleField","titleFieldId","fieldId","EditFieldDialog","props","useModelField","useModelEditor","data","setContentModelData","setData","useState","headerTitle","fieldTypeLabel","label","onSubmit","form","prev","onClose","submit","individualValidation","getFieldValidators","hasValidators","validators","length","showValidatorsTab","multipleValues","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","listValidation","getListValidators","title","description"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport styled from \"@emotion/styled\";\nimport { Dialog, DialogContent, DialogTitle, DialogActions } from \"~/admin/components/Dialog\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { Tabs, Tab } from \"@webiny/ui/Tabs\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    CmsEditorContentModel,\n    CmsModelField,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldTypePlugin\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues\";\nimport { ValidatorsList } from \"./EditFieldDialog/ValidatorsList\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useModelField, useModelEditor } from \"~/admin/hooks\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\nimport { ValidationsSection } from \"~/admin/components/FieldEditor/EditFieldDialog/ValidationsSection\";\nimport { getFieldValidators, getListValidators } from \"./EditFieldDialog/getValidators\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst FullScreenDialog = styled(Dialog)`\n    width: 100vw;\n    height: 100vh;\n    .mdc-dialog__surface {\n        width: 100%;\n        max-width: 100% !important;\n        max-height: 100% !important;\n        .webiny-ui-dialog__content {\n            max-width: 100% !important;\n            max-height: 100% !important;\n            width: 100vw;\n            height: calc(100vh - 155px);\n            overflow: scroll !important;\n        }\n    }\n`;\n\nfunction setupState(\n    field: CmsModelField,\n    fieldPlugin: CmsEditorFieldTypePlugin,\n    contentModel: CmsEditorContentModel\n): EditFieldState {\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, fieldPlugin }));\n\n        if (renderPlugin) {\n            clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n        }\n    }\n\n    return {\n        shadowField: clonedField,\n        isTitleField: contentModel.titleFieldId === field.fieldId\n    };\n}\n\ninterface EditFieldState {\n    shadowField: CmsModelField;\n    isTitleField: boolean;\n}\n\ninterface EditFieldDialogProps {\n    onClose: () => void;\n    onSubmit: FormOnSubmit<CmsModelField>;\n}\n\nconst EditFieldDialog: React.FC<EditFieldDialogProps> = props => {\n    const { field, fieldPlugin } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n    const [{ shadowField, isTitleField }] = useState<EditFieldState>(\n        setupState(field, fieldPlugin, contentModel)\n    );\n\n    const headerTitle = t`Field Settings - {fieldTypeLabel}`({\n        fieldTypeLabel: fieldPlugin.field.label\n    });\n\n    const onSubmit: FormOnSubmit<CmsModelField> = (data, form) => {\n        /**\n         * In case title field `fieldId` changed, we need to update the title field on the model itself.\n         */\n        if (isTitleField && contentModel.titleFieldId !== data.fieldId) {\n            setContentModelData(prev => {\n                return {\n                    ...prev,\n                    titleFieldId: data.fieldId\n                };\n            });\n        }\n\n        props.onSubmit(data, form);\n    };\n\n    return (\n        <FullScreenDialog\n            preventOutsideDismiss\n            open={true}\n            onClose={props.onClose}\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n        >\n            <DialogTitle>{headerTitle}</DialogTitle>\n            <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>\n                {({ data: shadowField, submit }) => {\n                    const individualValidation = getFieldValidators(shadowField, fieldPlugin);\n\n                    const hasValidators = individualValidation.validators.length > 0;\n\n                    const showValidatorsTab =\n                        shadowField.multipleValues || individualValidation.validators.length > 0;\n\n                    const predefinedValuesTabEnabled =\n                        fieldPlugin.field.allowPredefinedValues &&\n                        shadowField.predefinedValues &&\n                        shadowField.predefinedValues.enabled;\n\n                    const listValidation = getListValidators(shadowField, fieldPlugin);\n\n                    return (\n                        /**\n                         * We're using the `shadowField` as the new context, because we want all changes by form inputs\n                         * to immediately be propagated to all dialog components.\n                         */\n                        <ModelFieldProvider field={shadowField}>\n                            <DialogContent>\n                                <Tabs>\n                                    <Tab label={t`General`}>\n                                        <GeneralTab />\n                                    </Tab>\n                                    <Tab\n                                        label={t`Predefined Values`}\n                                        disabled={!predefinedValuesTabEnabled}\n                                    >\n                                        {predefinedValuesTabEnabled && <PredefinedValues />}\n                                    </Tab>\n\n                                    <Tab\n                                        visible={showValidatorsTab}\n                                        label={\"Validators\"}\n                                        data-testid={\"cms.editor.field.tabs.validators\"}\n                                    >\n                                        {shadowField.multipleValues ? (\n                                            <>\n                                                <ValidationsSection\n                                                    validators={listValidation.validators}\n                                                    fieldKey={\"listValidators\"}\n                                                    title={\n                                                        listValidation.title || \"List validators\"\n                                                    }\n                                                    description={\n                                                        listValidation.description ||\n                                                        \"These validators are applied to the entire list of values.\"\n                                                    }\n                                                />\n\n                                                {hasValidators ? (\n                                                    <ValidationsSection\n                                                        fieldKey={\"validators\"}\n                                                        validators={individualValidation.validators}\n                                                        title={\n                                                            individualValidation.title ||\n                                                            \"Individual value validators\"\n                                                        }\n                                                        description={\n                                                            individualValidation.description ||\n                                                            \"These validators are applied to each value in the list.\"\n                                                        }\n                                                    />\n                                                ) : null}\n                                            </>\n                                        ) : null}\n\n                                        {!shadowField.multipleValues && hasValidators ? (\n                                            <ValidatorsList\n                                                name={\"validation\"}\n                                                validators={individualValidation.validators}\n                                            />\n                                        ) : null}\n                                    </Tab>\n                                    <Tab label={t`Appearance`}>\n                                        <AppearanceTab />\n                                    </Tab>\n                                </Tabs>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault\n                                    data-testid=\"cms.editor.field.settings.cancel\"\n                                    onClick={props.onClose}\n                                >{t`Cancel`}</ButtonDefault>\n                                <ButtonPrimary\n                                    data-testid=\"cms.editor.field.settings.save\"\n                                    onClick={submit}\n                                >{t`Save Field`}</ButtonPrimary>\n                            </DialogActions>\n                        </ModelFieldProvider>\n                    );\n                }}\n            </Form>\n        </FullScreenDialog>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","namespace","FullScreenDialog","styled","Dialog","setupState","field","fieldPlugin","contentModel","clonedField","cloneDeep","renderer","name","plugins","byType","filter","item","canUse","renderPlugin","rendererName","shadowField","isTitleField","titleFieldId","fieldId","EditFieldDialog","props","useModelField","useModelEditor","data","setContentModelData","setData","useState","headerTitle","fieldTypeLabel","label","onSubmit","form","prev","onClose","submit","individualValidation","getFieldValidators","hasValidators","validators","length","showValidatorsTab","multipleValues","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","listValidation","getListValidators","title","description"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport styled from \"@emotion/styled\";\nimport { Dialog, DialogContent, DialogTitle, DialogActions } from \"~/admin/components/Dialog\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { Tabs, Tab } from \"@webiny/ui/Tabs\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    CmsEditorContentModel,\n    CmsModelField,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldTypePlugin\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues\";\nimport { ValidatorsList } from \"./EditFieldDialog/ValidatorsList\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useModelField, useModelEditor } from \"~/admin/hooks\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\nimport { ValidationsSection } from \"~/admin/components/FieldEditor/EditFieldDialog/ValidationsSection\";\nimport { getFieldValidators, getListValidators } from \"./EditFieldDialog/getValidators\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst FullScreenDialog = styled(Dialog)`\n    width: 100vw;\n    height: 100vh;\n    .mdc-dialog__surface {\n        width: 100%;\n        max-width: 100% !important;\n        max-height: 100% !important;\n        .webiny-ui-dialog__content {\n            max-width: 100% !important;\n            max-height: 100% !important;\n            width: 100vw;\n            height: calc(100vh - 155px);\n            overflow: scroll !important;\n        }\n    }\n`;\n\nfunction setupState(\n    field: CmsModelField,\n    fieldPlugin: CmsEditorFieldTypePlugin,\n    contentModel: CmsEditorContentModel\n): EditFieldState {\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, fieldPlugin }));\n\n        if (renderPlugin) {\n            clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n        }\n    }\n\n    return {\n        shadowField: clonedField,\n        isTitleField: contentModel.titleFieldId === field.fieldId\n    };\n}\n\ninterface EditFieldState {\n    shadowField: CmsModelField;\n    isTitleField: boolean;\n}\n\ninterface EditFieldDialogProps {\n    onClose: () => void;\n    onSubmit: FormOnSubmit<CmsModelField>;\n}\n\nconst EditFieldDialog: React.FC<EditFieldDialogProps> = props => {\n    const { field, fieldPlugin } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n    const [{ shadowField, isTitleField }] = useState<EditFieldState>(\n        setupState(field, fieldPlugin, contentModel)\n    );\n\n    const headerTitle = t`Field Settings - {fieldTypeLabel}`({\n        fieldTypeLabel: fieldPlugin.field.label\n    });\n\n    const onSubmit: FormOnSubmit<CmsModelField> = (data, form) => {\n        /**\n         * In case title field `fieldId` changed, we need to update the title field on the model itself.\n         */\n        if (isTitleField && contentModel.titleFieldId !== data.fieldId) {\n            setContentModelData(prev => {\n                return {\n                    ...prev,\n                    titleFieldId: data.fieldId\n                };\n            });\n        }\n\n        props.onSubmit(data, form);\n    };\n\n    return (\n        <FullScreenDialog\n            preventOutsideDismiss\n            open={true}\n            onClose={props.onClose}\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n        >\n            <DialogTitle>{headerTitle}</DialogTitle>\n            <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>\n                {({ data: shadowField, submit }) => {\n                    const individualValidation = getFieldValidators(shadowField, fieldPlugin);\n\n                    const hasValidators = individualValidation.validators.length > 0;\n\n                    const showValidatorsTab =\n                        shadowField.multipleValues || individualValidation.validators.length > 0;\n\n                    const predefinedValuesTabEnabled =\n                        fieldPlugin.field.allowPredefinedValues &&\n                        shadowField.predefinedValues &&\n                        shadowField.predefinedValues.enabled;\n\n                    const listValidation = getListValidators(shadowField, fieldPlugin);\n\n                    return (\n                        /**\n                         * We're using the `shadowField` as the new context, because we want all changes by form inputs\n                         * to immediately be propagated to all dialog components.\n                         */\n                        <ModelFieldProvider field={shadowField}>\n                            <DialogContent>\n                                <Tabs>\n                                    <Tab label={t`General`}>\n                                        <GeneralTab />\n                                    </Tab>\n                                    <Tab\n                                        label={t`Predefined Values`}\n                                        disabled={!predefinedValuesTabEnabled}\n                                    >\n                                        {predefinedValuesTabEnabled && <PredefinedValues />}\n                                    </Tab>\n\n                                    <Tab\n                                        visible={showValidatorsTab}\n                                        label={\"Validators\"}\n                                        data-testid={\"cms.editor.field.tabs.validators\"}\n                                    >\n                                        {shadowField.multipleValues ? (\n                                            <>\n                                                <ValidationsSection\n                                                    validators={listValidation.validators}\n                                                    fieldKey={\"listValidators\"}\n                                                    title={\n                                                        listValidation.title || \"List validators\"\n                                                    }\n                                                    description={\n                                                        listValidation.description ||\n                                                        \"These validators are applied to the entire list of values.\"\n                                                    }\n                                                />\n\n                                                {hasValidators ? (\n                                                    <ValidationsSection\n                                                        fieldKey={\"validators\"}\n                                                        validators={individualValidation.validators}\n                                                        title={\n                                                            individualValidation.title ||\n                                                            \"Individual value validators\"\n                                                        }\n                                                        description={\n                                                            individualValidation.description ||\n                                                            \"These validators are applied to each value in the list.\"\n                                                        }\n                                                    />\n                                                ) : null}\n                                            </>\n                                        ) : null}\n\n                                        {!shadowField.multipleValues && hasValidators ? (\n                                            <ValidatorsList\n                                                name={\"validation\"}\n                                                validators={individualValidation.validators}\n                                            />\n                                        ) : null}\n                                    </Tab>\n                                    <Tab label={t`Appearance`}>\n                                        <AppearanceTab />\n                                    </Tab>\n                                </Tabs>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault\n                                    data-testid=\"cms.editor.field.settings.cancel\"\n                                    onClick={props.onClose}\n                                >{t`Cancel`}</ButtonDefault>\n                                <ButtonPrimary\n                                    data-testid=\"cms.editor.field.settings.save\"\n                                    onClick={submit}\n                                >{t`Save Field`}</ButtonPrimary>\n                            </DialogActions>\n                        </ModelFieldProvider>\n                    );\n                }}\n            </Form>\n        </FullScreenDialog>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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"}