@webiny/app-headless-cms 5.27.0-beta.0 → 5.28.0

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

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

package/admin/components/FieldEditor/Field.js

@@ -1,29 +1,61 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+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 _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 "../../icons/edit.svg";
-import { ReactComponent as DeleteIcon } from "../../icons/delete.svg";
-import { ReactComponent as TitleIcon } from "../../icons/title-24px.svg";
-import { ReactComponent as MoreVerticalIcon } from "../../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 t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/field");
+
+var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "erv8xml0",
   label: "FieldContainer"
 })({
@@ -32,7 +64,7 @@ var FieldContainer = /*#__PURE__*/styled("div", {
   justifyContent: "space-between",
   alignItems: "center"
 });
-var Info = /*#__PURE__*/styled("div", {
+var Info = /*#__PURE__*/(0, _styled.default)("div", {
   target: "erv8xml1",
   label: "Info"
 })({
@@ -43,7 +75,7 @@ var Info = /*#__PURE__*/styled("div", {
     lineHeight: "150%"
   }
 });
-var Actions = /*#__PURE__*/styled("div", {
+var Actions = /*#__PURE__*/(0, _styled.default)("div", {
   target: "erv8xml2",
   label: "Actions"
 })({
@@ -54,7 +86,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",
@@ -80,28 +112,28 @@ var Field = function Field(props) {
       onEdit = props.onEdit,
       parent = props.parent;
 
-  var _useSnackbar = useSnackbar(),
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
       showSnackbar = _useSnackbar.showSnackbar;
 
-  var _useContentModelEdito = useContentModelEditor(),
+  var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
       setData = _useContentModelEdito.setData,
       data = _useContentModelEdito.data;
 
-  var _useFieldEditor = useFieldEditor(),
+  var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
       getFieldPlugin = _useFieldEditor.getFieldPlugin;
 
-  var onDelete = useCallback(function () {
+  var onDelete = (0, _react.useCallback)(function () {
     props.onDelete(field);
   }, [field.fieldId]);
-  var setAsTitle = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var setAsTitle = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
     var response;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
+    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 _objectSpread(_objectSpread({}, data), {}, {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
                 titleFieldId: field.fieldId
               });
             });
@@ -117,7 +149,7 @@ var Field = function Field(props) {
             return _context.abrupt("return", showSnackbar(response.error.message));
 
           case 5:
-            showSnackbar(t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Title field set successfully."]))));
+            showSnackbar(t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Title field set successfully."]))));
 
           case 6:
           case "end":
@@ -127,7 +159,8 @@ var Field = function Field(props) {
     }, _callee);
   })), [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;
@@ -135,40 +168,40 @@ var Field = function Field(props) {
 
   var isTitleField = data && field.fieldId === data.titleFieldId && !parent;
   var lockedFields = data ? data.lockedFields || [] : [];
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement(Typography, {
+  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"]))), ")"), isTitleField && /*#__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, "(", t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["multiple values"]))), ")"), isTitleField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject3 || (_templateObject3 = (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.createElement(EditIcon, null),
+    icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
     onClick: function onClick() {
       return onEdit(field);
     }
-  }), /*#__PURE__*/React.createElement(Menu, {
+  }), /*#__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, {
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_title24px.ReactComponent, null)
+  })), t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
     disabled: lockedFields.some(function (lockedField) {
       return lockedField.fieldId === field.fieldId;
     }),
     onClick: onDelete
-  }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, 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", {
+  }) ? t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Cannot delete"]))) : t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "field-extra"
   }, fieldPlugin.field.render && fieldPlugin.field.render({
     field: field,
@@ -177,4 +210,6 @@ var Field = function Field(props) {
   })));
 };
 
-export default /*#__PURE__*/React.memo(Field);
+var _default = /*#__PURE__*/_react.default.memo(Field);
+
+exports.default = _default;

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

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

package/admin/components/FieldEditor/FieldEditor.js

@@ -1,24 +1,48 @@
-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 _useFieldEditor2 = require("./useFieldEditor");
+
+var _FieldEditorContext = require("./FieldEditorContext");
 
 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 "../../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(),
+  var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
       parent = _useFieldEditor.parent,
       depth = _useFieldEditor.depth,
       insertField = _useFieldEditor.insertField,
@@ -32,7 +56,7 @@ var Editor = function Editor() {
       field = _useFieldEditor.field,
       dropTarget = _useFieldEditor.dropTarget;
 
-  return /*#__PURE__*/React.createElement(Fragment, null, fields.length === 0 && /*#__PURE__*/React.createElement(Center, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fields.length === 0 && /*#__PURE__*/_react.default.createElement(_DropZone.Center, {
     onDrop: function onDrop(item) {
       return onFieldDrop(item, {
         row: 0,
@@ -42,8 +66,8 @@ var Editor = function Editor() {
     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",
@@ -61,16 +85,16 @@ var Editor = function Editor() {
     ) {
       var drag = _ref.drag,
           isDragging = _ref.isDragging;
-      return /*#__PURE__*/React.createElement(RowContainer, {
+      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, {
         "data-testid": "cms-editor-row-droppable-top-".concat(index),
         isVisible: noConflict(),
         onDrop: function onDrop(item) {
@@ -79,10 +103,10 @@ var Editor = function Editor() {
             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, {
+        return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
           key: field.fieldId,
           beginDrag: {
             parent: parent ? parent.fieldId : null,
@@ -96,10 +120,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, {
@@ -108,20 +132,20 @@ var Editor = function Editor() {
               });
             },
             isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
+              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
             })
-          }), /*#__PURE__*/React.createElement("div", {
-            className: fieldHandle
-          }, /*#__PURE__*/React.createElement(Field, {
+          }), /*#__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);
+              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
             }),
             onDrop: function onDrop(item) {
               return onFieldDrop(item, {
@@ -131,7 +155,7 @@ 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(),
@@ -143,7 +167,7 @@ var Editor = function Editor() {
         }
       }));
     });
-  }), /*#__PURE__*/React.createElement(EditFieldDialog, {
+  }), /*#__PURE__*/_react.default.createElement(_EditFieldDialog.default, {
     field: field,
     onClose: function onClose() {
       return editField(null);
@@ -164,6 +188,8 @@ var Editor = function Editor() {
   }));
 };
 
-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;