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

package/HeadlessCMS.js

@@ -1,36 +1,22 @@
 "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.HeadlessCMS = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _plugins = require("@webiny/plugins");
-
 var _appAdmin = require("@webiny/app-admin");
-
 var _app = require("@webiny/app");
-
 var _Cms = require("./admin/contexts/Cms");
-
 var _CmsMenuLoader = require("./admin/menus/CmsMenuLoader");
-
 var _apiInformation = _interopRequireDefault(require("./admin/plugins/apiInformation"));
-
 var _ContentEntriesModule = require("./admin/views/contentEntries/experiment/ContentEntriesModule");
-
 var _DefaultOnEntryDelete = require("./admin/plugins/entry/DefaultOnEntryDelete");
-
 var _DefaultOnEntryPublish = require("./admin/plugins/entry/DefaultOnEntryPublish");
-
 var _allPlugins = _interopRequireDefault(require("./allPlugins"));
-
 var createHeadlessCMSProvider = function createHeadlessCMSProvider(createApolloClient) {
   return function (Component) {
     return function HeadlessCMSProvider(_ref) {
@@ -41,26 +27,27 @@ var createHeadlessCMSProvider = function createHeadlessCMSProvider(createApolloC
     };
   };
 };
-
+/**
+ * If there is a problem with some state being reset, it's probably because of this plugin.
+ * Check that __typename from the API and the __typename in the state are the same.
+ * If not, add it into the attachTypeName array.
+ */
+var attachTypeName = ["CmsContentEntry", "RefField"];
 var HeadlessCMSExtension = function HeadlessCMSExtension(_ref2) {
   var createApolloClient = _ref2.createApolloClient;
-
   _plugins.plugins.register(_apiInformation.default);
-
   _plugins.plugins.register(_allPlugins.default);
-
   _plugins.plugins.register(new _app.ApolloCacheObjectIdPlugin(function (obj) {
     if (obj.__typename === "CmsContentModelField") {
       return null;
+    } else if (obj.__typename && attachTypeName.includes(obj.__typename)) {
+      return "".concat(obj.__typename, "_").concat(obj.id);
     }
-
     return undefined;
   }));
-
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ContentEntriesModule.ContentEntriesModule, null), /*#__PURE__*/_react.default.createElement(_appAdmin.Provider, {
     hoc: createHeadlessCMSProvider(createApolloClient)
   }), /*#__PURE__*/_react.default.createElement(_appAdmin.Plugins, null, /*#__PURE__*/_react.default.createElement(_CmsMenuLoader.CmsMenuLoader, null), /*#__PURE__*/_react.default.createElement(_DefaultOnEntryDelete.DefaultOnEntryDelete, null), /*#__PURE__*/_react.default.createElement(_DefaultOnEntryPublish.DefaultOnEntryPublish, null)));
 };
-
 var HeadlessCMS = /*#__PURE__*/(0, _react.memo)(HeadlessCMSExtension);
 exports.HeadlessCMS = HeadlessCMS;

package/HeadlessCMS.js.map

@@ -1 +1 @@
-{"version":3,"names":["createHeadlessCMSProvider","createApolloClient","Component","HeadlessCMSProvider","children","HeadlessCMSExtension","plugins","register","apiInformation","allPlugins","ApolloCacheObjectIdPlugin","obj","__typename","undefined","HeadlessCMS","memo"],"sources":["HeadlessCMS.tsx"],"sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugins, Provider } from \"@webiny/app-admin\";\nimport { ApolloCacheObjectIdPlugin } from \"@webiny/app\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CmsProvider } from \"./admin/contexts/Cms\";\nimport { CmsMenuLoader } from \"~/admin/menus/CmsMenuLoader\";\nimport apiInformation from \"./admin/plugins/apiInformation\";\nimport { ContentEntriesModule } from \"./admin/views/contentEntries/experiment/ContentEntriesModule\";\nimport { DefaultOnEntryDelete } from \"./admin/plugins/entry/DefaultOnEntryDelete\";\nimport { DefaultOnEntryPublish } from \"~/admin/plugins/entry/DefaultOnEntryPublish\";\nimport allPlugins from \"./allPlugins\";\n\nconst createHeadlessCMSProvider =\n    (createApolloClient: CreateApolloClient) =>\n    (Component: React.FC): React.FC => {\n        return function HeadlessCMSProvider({ children }) {\n            return (\n                <CmsProvider createApolloClient={createApolloClient}>\n                    <Component>{children}</Component>\n                </CmsProvider>\n            );\n        };\n    };\n\ninterface CreateApolloClientParams {\n    uri: string;\n}\ninterface CreateApolloClient {\n    (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n    createApolloClient: CreateApolloClient;\n}\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n    plugins.register(apiInformation);\n    plugins.register(allPlugins);\n\n    plugins.register(\n        new ApolloCacheObjectIdPlugin(obj => {\n            if (obj.__typename === \"CmsContentModelField\") {\n                return null;\n            }\n\n            return undefined;\n        })\n    );\n\n    return (\n        <Fragment>\n            <ContentEntriesModule />\n            <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n            <Plugins>\n                <CmsMenuLoader />\n                <DefaultOnEntryDelete />\n                <DefaultOnEntryPublish />\n            </Plugins>\n        </Fragment>\n    );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,yBAAyB,GAC3B,SADEA,yBACF,CAACC,kBAAD;EAAA,OACA,UAACC,SAAD,EAAmC;IAC/B,OAAO,SAASC,mBAAT,OAA2C;MAAA,IAAZC,QAAY,QAAZA,QAAY;MAC9C,oBACI,6BAAC,gBAAD;QAAa,kBAAkB,EAAEH;MAAjC,gBACI,6BAAC,SAAD,QAAYG,QAAZ,CADJ,CADJ;IAKH,CAND;EAOH,CATD;AAAA,CADJ;;AAuBA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,QAA8C;EAAA,IAA3CJ,kBAA2C,SAA3CA,kBAA2C;;EACvEK,gBAAA,CAAQC,QAAR,CAAiBC,uBAAjB;;EACAF,gBAAA,CAAQC,QAAR,CAAiBE,mBAAjB;;EAEAH,gBAAA,CAAQC,QAAR,CACI,IAAIG,8BAAJ,CAA8B,UAAAC,GAAG,EAAI;IACjC,IAAIA,GAAG,CAACC,UAAJ,KAAmB,sBAAvB,EAA+C;MAC3C,OAAO,IAAP;IACH;;IAED,OAAOC,SAAP;EACH,CAND,CADJ;;EAUA,oBACI,6BAAC,eAAD,qBACI,6BAAC,0CAAD,OADJ,eAEI,6BAAC,kBAAD;IAAU,GAAG,EAAEb,yBAAyB,CAACC,kBAAD;EAAxC,EAFJ,eAGI,6BAAC,iBAAD,qBACI,6BAAC,4BAAD,OADJ,eAEI,6BAAC,0CAAD,OAFJ,eAGI,6BAAC,4CAAD,OAHJ,CAHJ,CADJ;AAWH,CAzBD;;AA2BO,IAAMa,WAAW,gBAAG,IAAAC,WAAA,EAAKV,oBAAL,CAApB"}
+{"version":3,"names":["createHeadlessCMSProvider","createApolloClient","Component","HeadlessCMSProvider","children","attachTypeName","HeadlessCMSExtension","plugins","register","apiInformation","allPlugins","ApolloCacheObjectIdPlugin","obj","__typename","includes","id","undefined","HeadlessCMS","memo"],"sources":["HeadlessCMS.tsx"],"sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugins, Provider } from \"@webiny/app-admin\";\nimport { ApolloCacheObjectIdPlugin } from \"@webiny/app\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CmsProvider } from \"./admin/contexts/Cms\";\nimport { CmsMenuLoader } from \"~/admin/menus/CmsMenuLoader\";\nimport apiInformation from \"./admin/plugins/apiInformation\";\nimport { ContentEntriesModule } from \"./admin/views/contentEntries/experiment/ContentEntriesModule\";\nimport { DefaultOnEntryDelete } from \"./admin/plugins/entry/DefaultOnEntryDelete\";\nimport { DefaultOnEntryPublish } from \"~/admin/plugins/entry/DefaultOnEntryPublish\";\nimport allPlugins from \"./allPlugins\";\n\nconst createHeadlessCMSProvider =\n    (createApolloClient: CreateApolloClient) =>\n    (Component: React.FC): React.FC => {\n        return function HeadlessCMSProvider({ children }) {\n            return (\n                <CmsProvider createApolloClient={createApolloClient}>\n                    <Component>{children}</Component>\n                </CmsProvider>\n            );\n        };\n    };\n\ninterface CreateApolloClientParams {\n    uri: string;\n}\ninterface CreateApolloClient {\n    (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n    createApolloClient: CreateApolloClient;\n}\n\n/**\n * If there is a problem with some state being reset, it's probably because of this plugin.\n * Check that __typename from the API and the __typename in the state are the same.\n * If not, add it into the attachTypeName array.\n */\nconst attachTypeName = [\"CmsContentEntry\", \"RefField\"];\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n    plugins.register(apiInformation);\n    plugins.register(allPlugins);\n\n    plugins.register(\n        new ApolloCacheObjectIdPlugin(obj => {\n            if (obj.__typename === \"CmsContentModelField\") {\n                return null;\n            } else if (obj.__typename && attachTypeName.includes(obj.__typename)) {\n                return `${obj.__typename}_${obj.id}`;\n            }\n\n            return undefined;\n        })\n    );\n\n    return (\n        <Fragment>\n            <ContentEntriesModule />\n            <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n            <Plugins>\n                <CmsMenuLoader />\n                <DefaultOnEntryDelete />\n                <DefaultOnEntryPublish />\n            </Plugins>\n        </Fragment>\n    );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,yBAAyB,GAC3B,SADEA,yBAAyB,CAC1BC,kBAAsC;EAAA,OACvC,UAACC,SAAmB,EAAe;IAC/B,OAAO,SAASC,mBAAmB,OAAe;MAAA,IAAZC,QAAQ,QAARA,QAAQ;MAC1C,oBACI,6BAAC,gBAAW;QAAC,kBAAkB,EAAEH;MAAmB,gBAChD,6BAAC,SAAS,QAAEG,QAAQ,CAAa,CACvB;IAEtB,CAAC;EACL,CAAC;AAAA;AAaL;AACA;AACA;AACA;AACA;AACA,IAAMC,cAAc,GAAG,CAAC,iBAAiB,EAAE,UAAU,CAAC;AAEtD,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,QAAiD;EAAA,IAA3CL,kBAAkB,SAAlBA,kBAAkB;EAC9CM,gBAAO,CAACC,QAAQ,CAACC,uBAAc,CAAC;EAChCF,gBAAO,CAACC,QAAQ,CAACE,mBAAU,CAAC;EAE5BH,gBAAO,CAACC,QAAQ,CACZ,IAAIG,8BAAyB,CAAC,UAAAC,GAAG,EAAI;IACjC,IAAIA,GAAG,CAACC,UAAU,KAAK,sBAAsB,EAAE;MAC3C,OAAO,IAAI;IACf,CAAC,MAAM,IAAID,GAAG,CAACC,UAAU,IAAIR,cAAc,CAACS,QAAQ,CAACF,GAAG,CAACC,UAAU,CAAC,EAAE;MAClE,iBAAUD,GAAG,CAACC,UAAU,cAAID,GAAG,CAACG,EAAE;IACtC;IAEA,OAAOC,SAAS;EACpB,CAAC,CAAC,CACL;EAED,oBACI,6BAAC,eAAQ,qBACL,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,kBAAQ;IAAC,GAAG,EAAEhB,yBAAyB,CAACC,kBAAkB;EAAE,EAAG,eAChE,6BAAC,iBAAO,qBACJ,6BAAC,4BAAa,OAAG,eACjB,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,4CAAqB,OAAG,CACnB,CACH;AAEnB,CAAC;AAEM,IAAMgB,WAAW,gBAAG,IAAAC,WAAI,EAACZ,oBAAoB,CAAC;AAAC"}

package/admin/components/ContentEntryForm/ContentEntryForm.js

@@ -1,42 +1,25 @@
 "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.ContentEntryForm = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _RenderFieldElement = _interopRequireDefault(require("./RenderFieldElement"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _form = require("@webiny/form");
-
 var _plugins = require("@webiny/plugins");
-
 var _Progress = require("@webiny/ui/Progress");
-
 var _useContentEntryForm2 = require("./useContentEntryForm");
-
 var _Fields = require("./Fields");
-
 var _reactRouter = require("@webiny/react-router");
-
 var _appAdmin = require("@webiny/app-admin");
-
 var _ModelProvider = require("../ModelProvider");
-
 var _excluded = ["onForm"];
 var FormWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "ejw5gwy0",
@@ -45,78 +28,61 @@ var FormWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   height: "calc(100vh - 260px)",
   overflow: "auto"
 });
-
 function omitTypename(key, value) {
   return key === "__typename" ? undefined : value;
 }
-
 var stringify = function stringify(value) {
   return JSON.stringify(value || {}, omitTypename);
 };
-
 var isDifferent = function isDifferent(value, compare) {
   if (!value && !compare) {
     return false;
   }
-
   return stringify(value) !== stringify(compare);
 };
-
 var ContentEntryForm = function ContentEntryForm(_ref) {
   var onForm = _ref.onForm,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var formElementRef = (0, _react.useRef)(null);
-
   var _useModel = (0, _ModelProvider.useModel)(),
-      model = _useModel.model;
-
+    model = _useModel.model;
   var _useContentEntryForm = (0, _useContentEntryForm2.useContentEntryForm)(props),
-      loading = _useContentEntryForm.loading,
-      initialData = _useContentEntryForm.data,
-      _onChange = _useContentEntryForm.onChange,
-      _onSubmit = _useContentEntryForm.onSubmit,
-      invalidFields = _useContentEntryForm.invalidFields;
-
+    loading = _useContentEntryForm.loading,
+    initialData = _useContentEntryForm.data,
+    _onChange = _useContentEntryForm.onChange,
+    _onSubmit = _useContentEntryForm.onSubmit,
+    invalidFields = _useContentEntryForm.invalidFields;
   var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isDirty = _React$useState2[0],
-      setIsDirty = _React$useState2[1];
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isDirty = _React$useState2[0],
+    setIsDirty = _React$useState2[1];
   /**
    * Reset isDirty when the loaded data changes.
    */
-
-
   (0, _react.useEffect)(function () {
     if (!isDirty) {
       return;
     }
-
     setIsDirty(false);
   }, [initialData]);
-
   var _useSnackbar = (0, _appAdmin.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
+    showSnackbar = _useSnackbar.showSnackbar;
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (typeof onForm !== "function" || !ref.current) {
       return;
     }
-
     onForm(ref.current);
   }, []);
   (0, _react.useEffect)(function () {
     if (!formElementRef.current) {
       return;
     }
-
     formElementRef.current.scrollTo(0, 0);
   }, [initialData.id, formElementRef.current]);
-
   var formRenderer = _plugins.plugins.byType("cms-content-form-renderer").find(function (pl) {
     return pl.modelId === model.modelId;
   });
-
   var renderCustomLayout = (0, _react.useCallback)(function (formRenderProps) {
     var fields = model.fields.reduce(function (acc, field) {
       /**
@@ -130,15 +96,12 @@ var ContentEntryForm = function ContentEntryForm(_ref) {
       });
       return acc;
     }, {});
-
     if (!formRenderer) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Missing form renderer for modelId \"".concat(model.modelId, "\"."));
     }
-
     return formRenderer.render((0, _objectSpread2.default)((0, _objectSpread2.default)({}, formRenderProps), {}, {
       contentModel: model,
       fields: fields,
-
       /**
        * TODO @ts-refactor
        * Figure out type for Bind.
@@ -149,11 +112,9 @@ var ContentEntryForm = function ContentEntryForm(_ref) {
   return /*#__PURE__*/_react.default.createElement(_form.Form, {
     onChange: function onChange(data, form) {
       var different = isDifferent(data, initialData);
-
       if (isDirty !== different) {
         setIsDirty(different);
       }
-
       return _onChange(data, form);
     },
     onSubmit: function onSubmit(data, form) {
@@ -185,5 +146,4 @@ var ContentEntryForm = function ContentEntryForm(_ref) {
     }))));
   });
 };
-
 exports.ContentEntryForm = ContentEntryForm;

package/admin/components/ContentEntryForm/ContentEntryForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormWrapper","styled","height","overflow","omitTypename","key","value","undefined","stringify","JSON","isDifferent","compare","ContentEntryForm","onForm","props","formElementRef","useRef","useModel","model","useContentEntryForm","loading","initialData","data","onChange","onSubmit","invalidFields","React","useState","isDirty","setIsDirty","useEffect","useSnackbar","showSnackbar","ref","current","scrollTo","id","formRenderer","plugins","byType","find","pl","modelId","renderCustomLayout","useCallback","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","contentModel","form","different","formProps","layout"],"sources":["ContentEntryForm.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport styled from \"@emotion/styled\";\nimport { Form } from \"@webiny/form\";\nimport { FormAPI, FormRenderPropParams } from \"@webiny/form/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { CmsContentFormRendererPlugin } from \"~/types\";\nimport { useContentEntryForm, UseContentEntryFormParams } from \"./useContentEntryForm\";\nimport { Fields } from \"./Fields\";\nimport { Prompt } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { ModelProvider, useModel } from \"~/admin/components/ModelProvider\";\n\nconst FormWrapper = styled(\"div\")({\n    height: \"calc(100vh - 260px)\",\n    overflow: \"auto\"\n});\n\ninterface ContentEntryFormProps extends UseContentEntryFormParams {\n    onForm?: (form: FormAPI) => void;\n}\n\nfunction omitTypename(key: string, value: string): string | undefined {\n    return key === \"__typename\" ? undefined : value;\n}\n\nconst stringify = (value: any): string => {\n    return JSON.stringify(value || {}, omitTypename);\n};\n\nconst isDifferent = (value: any, compare: any): boolean => {\n    if (!value && !compare) {\n        return false;\n    }\n    return stringify(value) !== stringify(compare);\n};\n\nexport const ContentEntryForm: React.FC<ContentEntryFormProps> = ({ onForm, ...props }) => {\n    const formElementRef = useRef<HTMLDivElement>(null);\n    const { model } = useModel();\n    const {\n        loading,\n        data: initialData,\n        onChange,\n        onSubmit,\n        invalidFields\n    } = useContentEntryForm(props);\n\n    const [isDirty, setIsDirty] = React.useState<boolean>(false);\n    /**\n     * Reset isDirty when the loaded data changes.\n     */\n    useEffect(() => {\n        if (!isDirty) {\n            return;\n        }\n        setIsDirty(false);\n    }, [initialData]);\n\n    const { showSnackbar } = useSnackbar();\n\n    const ref = useRef<FormAPI | null>(null);\n\n    useEffect(() => {\n        if (typeof onForm !== \"function\" || !ref.current) {\n            return;\n        }\n        onForm(ref.current);\n    }, []);\n\n    useEffect(() => {\n        if (!formElementRef.current) {\n            return;\n        }\n\n        formElementRef.current.scrollTo(0, 0);\n    }, [initialData.id, formElementRef.current]);\n\n    const formRenderer = plugins\n        .byType<CmsContentFormRendererPlugin>(\"cms-content-form-renderer\")\n        .find(pl => pl.modelId === model.modelId);\n\n    const renderCustomLayout = useCallback(\n        (formRenderProps: FormRenderPropParams) => {\n            const fields = model.fields.reduce((acc, field) => {\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                acc[field.fieldId] = (\n                    <RenderFieldElement\n                        field={field}\n                        Bind={formRenderProps.Bind as any}\n                        contentModel={model}\n                    />\n                );\n\n                return acc;\n            }, {} as Record<string, React.ReactElement>);\n            if (!formRenderer) {\n                return <>{`Missing form renderer for modelId \"${model.modelId}\".`}</>;\n            }\n            return formRenderer.render({\n                ...formRenderProps,\n                contentModel: model,\n                fields,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                Bind: formRenderProps.Bind as any\n            });\n        },\n        [formRenderer]\n    );\n\n    return (\n        <Form\n            onChange={(data, form) => {\n                const different = isDifferent(data, initialData);\n                if (isDirty !== different) {\n                    setIsDirty(different);\n                }\n                return onChange(data, form);\n            }}\n            onSubmit={(data, form) => {\n                setIsDirty(false);\n                return onSubmit(data, form);\n            }}\n            data={initialData}\n            ref={ref}\n            invalidFields={invalidFields}\n            onInvalid={() => {\n                setIsDirty(true);\n                showSnackbar(\"Some fields did not pass the validation. Please check the form.\");\n            }}\n        >\n            {formProps => {\n                return (\n                    <ModelProvider model={model}>\n                        <Prompt\n                            when={isDirty}\n                            message={\n                                \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\"\n                            }\n                        />\n                        <FormWrapper data-testid={\"cms-content-form\"} ref={formElementRef}>\n                            {loading && <CircularProgress />}\n                            {formRenderer ? (\n                                renderCustomLayout(formProps)\n                            ) : (\n                                <Fields\n                                    contentModel={model}\n                                    fields={model.fields || []}\n                                    layout={model.layout || []}\n                                    {...formProps}\n                                    Bind={formProps.Bind as any}\n                                />\n                            )}\n                        </FormWrapper>\n                    </ModelProvider>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;AAEA,IAAMA,WAAW,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC9BC,MAAM,EAAE,qBADsB;EAE9BC,QAAQ,EAAE;AAFoB,CAAjB,CAAjB;;AASA,SAASC,YAAT,CAAsBC,GAAtB,EAAmCC,KAAnC,EAAsE;EAClE,OAAOD,GAAG,KAAK,YAAR,GAAuBE,SAAvB,GAAmCD,KAA1C;AACH;;AAED,IAAME,SAAS,GAAG,SAAZA,SAAY,CAACF,KAAD,EAAwB;EACtC,OAAOG,IAAI,CAACD,SAAL,CAAeF,KAAK,IAAI,EAAxB,EAA4BF,YAA5B,CAAP;AACH,CAFD;;AAIA,IAAMM,WAAW,GAAG,SAAdA,WAAc,CAACJ,KAAD,EAAaK,OAAb,EAAuC;EACvD,IAAI,CAACL,KAAD,IAAU,CAACK,OAAf,EAAwB;IACpB,OAAO,KAAP;EACH;;EACD,OAAOH,SAAS,CAACF,KAAD,CAAT,KAAqBE,SAAS,CAACG,OAAD,CAArC;AACH,CALD;;AAOO,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,OAA0B;EAAA,IAAvBC,MAAuB,QAAvBA,MAAuB;EAAA,IAAZC,KAAY;EACvF,IAAMC,cAAc,GAAG,IAAAC,aAAA,EAAuB,IAAvB,CAAvB;;EACA,gBAAkB,IAAAC,uBAAA,GAAlB;EAAA,IAAQC,KAAR,aAAQA,KAAR;;EACA,2BAMI,IAAAC,yCAAA,EAAoBL,KAApB,CANJ;EAAA,IACIM,OADJ,wBACIA,OADJ;EAAA,IAEUC,WAFV,wBAEIC,IAFJ;EAAA,IAGIC,SAHJ,wBAGIA,QAHJ;EAAA,IAIIC,SAJJ,wBAIIA,QAJJ;EAAA,IAKIC,aALJ,wBAKIA,aALJ;;EAQA,sBAA8BC,cAAA,CAAMC,QAAN,CAAwB,KAAxB,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;EACA;AACJ;AACA;;;EACI,IAAAC,gBAAA,EAAU,YAAM;IACZ,IAAI,CAACF,OAAL,EAAc;MACV;IACH;;IACDC,UAAU,CAAC,KAAD,CAAV;EACH,CALD,EAKG,CAACR,WAAD,CALH;;EAOA,mBAAyB,IAAAU,qBAAA,GAAzB;EAAA,IAAQC,YAAR,gBAAQA,YAAR;;EAEA,IAAMC,GAAG,GAAG,IAAAjB,aAAA,EAAuB,IAAvB,CAAZ;EAEA,IAAAc,gBAAA,EAAU,YAAM;IACZ,IAAI,OAAOjB,MAAP,KAAkB,UAAlB,IAAgC,CAACoB,GAAG,CAACC,OAAzC,EAAkD;MAC9C;IACH;;IACDrB,MAAM,CAACoB,GAAG,CAACC,OAAL,CAAN;EACH,CALD,EAKG,EALH;EAOA,IAAAJ,gBAAA,EAAU,YAAM;IACZ,IAAI,CAACf,cAAc,CAACmB,OAApB,EAA6B;MACzB;IACH;;IAEDnB,cAAc,CAACmB,OAAf,CAAuBC,QAAvB,CAAgC,CAAhC,EAAmC,CAAnC;EACH,CAND,EAMG,CAACd,WAAW,CAACe,EAAb,EAAiBrB,cAAc,CAACmB,OAAhC,CANH;;EAQA,IAAMG,YAAY,GAAGC,gBAAA,CAChBC,MADgB,CACqB,2BADrB,EAEhBC,IAFgB,CAEX,UAAAC,EAAE;IAAA,OAAIA,EAAE,CAACC,OAAH,KAAexB,KAAK,CAACwB,OAAzB;EAAA,CAFS,CAArB;;EAIA,IAAMC,kBAAkB,GAAG,IAAAC,kBAAA,EACvB,UAACC,eAAD,EAA2C;IACvC,IAAMC,MAAM,GAAG5B,KAAK,CAAC4B,MAAN,CAAaC,MAAb,CAAoB,UAACC,GAAD,EAAMC,KAAN,EAAgB;MAC/C;AAChB;AACA;AACA;MACgBD,GAAG,CAACC,KAAK,CAACC,OAAP,CAAH,gBACI,6BAAC,2BAAD;QACI,KAAK,EAAED,KADX;QAEI,IAAI,EAAEJ,eAAe,CAACM,IAF1B;QAGI,YAAY,EAAEjC;MAHlB,EADJ;MAQA,OAAO8B,GAAP;IACH,CAdc,EAcZ,EAdY,CAAf;;IAeA,IAAI,CAACX,YAAL,EAAmB;MACf,oBAAO,0GAAyCnB,KAAK,CAACwB,OAA/C,SAAP;IACH;;IACD,OAAOL,YAAY,CAACe,MAAb,6DACAP,eADA;MAEHQ,YAAY,EAAEnC,KAFX;MAGH4B,MAAM,EAANA,MAHG;;MAIH;AAChB;AACA;AACA;MACgBK,IAAI,EAAEN,eAAe,CAACM;IARnB,GAAP;EAUH,CA9BsB,EA+BvB,CAACd,YAAD,CA/BuB,CAA3B;EAkCA,oBACI,6BAAC,UAAD;IACI,QAAQ,EAAE,kBAACf,IAAD,EAAOgC,IAAP,EAAgB;MACtB,IAAMC,SAAS,GAAG7C,WAAW,CAACY,IAAD,EAAOD,WAAP,CAA7B;;MACA,IAAIO,OAAO,KAAK2B,SAAhB,EAA2B;QACvB1B,UAAU,CAAC0B,SAAD,CAAV;MACH;;MACD,OAAOhC,SAAQ,CAACD,IAAD,EAAOgC,IAAP,CAAf;IACH,CAPL;IAQI,QAAQ,EAAE,kBAAChC,IAAD,EAAOgC,IAAP,EAAgB;MACtBzB,UAAU,CAAC,KAAD,CAAV;MACA,OAAOL,SAAQ,CAACF,IAAD,EAAOgC,IAAP,CAAf;IACH,CAXL;IAYI,IAAI,EAAEjC,WAZV;IAaI,GAAG,EAAEY,GAbT;IAcI,aAAa,EAAER,aAdnB;IAeI,SAAS,EAAE,qBAAM;MACbI,UAAU,CAAC,IAAD,CAAV;MACAG,YAAY,CAAC,iEAAD,CAAZ;IACH;EAlBL,GAoBK,UAAAwB,SAAS,EAAI;IACV,oBACI,6BAAC,4BAAD;MAAe,KAAK,EAAEtC;IAAtB,gBACI,6BAAC,mBAAD;MACI,IAAI,EAAEU,OADV;MAEI,OAAO,EACH;IAHR,EADJ,eAOI,6BAAC,WAAD;MAAa,eAAa,kBAA1B;MAA8C,GAAG,EAAEb;IAAnD,GACKK,OAAO,iBAAI,6BAAC,0BAAD,OADhB,EAEKiB,YAAY,GACTM,kBAAkB,CAACa,SAAD,CADT,gBAGT,6BAAC,cAAD;MACI,YAAY,EAAEtC,KADlB;MAEI,MAAM,EAAEA,KAAK,CAAC4B,MAAN,IAAgB,EAF5B;MAGI,MAAM,EAAE5B,KAAK,CAACuC,MAAN,IAAgB;IAH5B,GAIQD,SAJR;MAKI,IAAI,EAAEA,SAAS,CAACL;IALpB,GALR,CAPJ,CADJ;EAwBH,CA7CL,CADJ;AAiDH,CAhIM"}
+{"version":3,"names":["FormWrapper","styled","height","overflow","omitTypename","key","value","undefined","stringify","JSON","isDifferent","compare","ContentEntryForm","onForm","props","formElementRef","useRef","useModel","model","useContentEntryForm","loading","initialData","data","onChange","onSubmit","invalidFields","React","useState","isDirty","setIsDirty","useEffect","useSnackbar","showSnackbar","ref","current","scrollTo","id","formRenderer","plugins","byType","find","pl","modelId","renderCustomLayout","useCallback","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","contentModel","form","different","formProps","layout"],"sources":["ContentEntryForm.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport styled from \"@emotion/styled\";\nimport { Form } from \"@webiny/form\";\nimport { FormAPI, FormRenderPropParams } from \"@webiny/form/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { CmsContentFormRendererPlugin } from \"~/types\";\nimport { useContentEntryForm, UseContentEntryFormParams } from \"./useContentEntryForm\";\nimport { Fields } from \"./Fields\";\nimport { Prompt } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { ModelProvider, useModel } from \"~/admin/components/ModelProvider\";\n\nconst FormWrapper = styled(\"div\")({\n    height: \"calc(100vh - 260px)\",\n    overflow: \"auto\"\n});\n\ninterface ContentEntryFormProps extends UseContentEntryFormParams {\n    onForm?: (form: FormAPI) => void;\n}\n\nfunction omitTypename(key: string, value: string): string | undefined {\n    return key === \"__typename\" ? undefined : value;\n}\n\nconst stringify = (value: any): string => {\n    return JSON.stringify(value || {}, omitTypename);\n};\n\nconst isDifferent = (value: any, compare: any): boolean => {\n    if (!value && !compare) {\n        return false;\n    }\n    return stringify(value) !== stringify(compare);\n};\n\nexport const ContentEntryForm: React.FC<ContentEntryFormProps> = ({ onForm, ...props }) => {\n    const formElementRef = useRef<HTMLDivElement>(null);\n    const { model } = useModel();\n    const {\n        loading,\n        data: initialData,\n        onChange,\n        onSubmit,\n        invalidFields\n    } = useContentEntryForm(props);\n\n    const [isDirty, setIsDirty] = React.useState<boolean>(false);\n    /**\n     * Reset isDirty when the loaded data changes.\n     */\n    useEffect(() => {\n        if (!isDirty) {\n            return;\n        }\n        setIsDirty(false);\n    }, [initialData]);\n\n    const { showSnackbar } = useSnackbar();\n\n    const ref = useRef<FormAPI | null>(null);\n\n    useEffect(() => {\n        if (typeof onForm !== \"function\" || !ref.current) {\n            return;\n        }\n        onForm(ref.current);\n    }, []);\n\n    useEffect(() => {\n        if (!formElementRef.current) {\n            return;\n        }\n\n        formElementRef.current.scrollTo(0, 0);\n    }, [initialData.id, formElementRef.current]);\n\n    const formRenderer = plugins\n        .byType<CmsContentFormRendererPlugin>(\"cms-content-form-renderer\")\n        .find(pl => pl.modelId === model.modelId);\n\n    const renderCustomLayout = useCallback(\n        (formRenderProps: FormRenderPropParams) => {\n            const fields = model.fields.reduce((acc, field) => {\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                acc[field.fieldId] = (\n                    <RenderFieldElement\n                        field={field}\n                        Bind={formRenderProps.Bind as any}\n                        contentModel={model}\n                    />\n                );\n\n                return acc;\n            }, {} as Record<string, React.ReactElement>);\n            if (!formRenderer) {\n                return <>{`Missing form renderer for modelId \"${model.modelId}\".`}</>;\n            }\n            return formRenderer.render({\n                ...formRenderProps,\n                contentModel: model,\n                fields,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                Bind: formRenderProps.Bind as any\n            });\n        },\n        [formRenderer]\n    );\n\n    return (\n        <Form\n            onChange={(data, form) => {\n                const different = isDifferent(data, initialData);\n                if (isDirty !== different) {\n                    setIsDirty(different);\n                }\n                return onChange(data, form);\n            }}\n            onSubmit={(data, form) => {\n                setIsDirty(false);\n                return onSubmit(data, form);\n            }}\n            data={initialData}\n            ref={ref}\n            invalidFields={invalidFields}\n            onInvalid={() => {\n                setIsDirty(true);\n                showSnackbar(\"Some fields did not pass the validation. Please check the form.\");\n            }}\n        >\n            {formProps => {\n                return (\n                    <ModelProvider model={model}>\n                        <Prompt\n                            when={isDirty}\n                            message={\n                                \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\"\n                            }\n                        />\n                        <FormWrapper data-testid={\"cms-content-form\"} ref={formElementRef}>\n                            {loading && <CircularProgress />}\n                            {formRenderer ? (\n                                renderCustomLayout(formProps)\n                            ) : (\n                                <Fields\n                                    contentModel={model}\n                                    fields={model.fields || []}\n                                    layout={model.layout || []}\n                                    {...formProps}\n                                    Bind={formProps.Bind as any}\n                                />\n                            )}\n                        </FormWrapper>\n                    </ModelProvider>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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"}

package/admin/components/ContentEntryForm/ContentEntryFormPreview.js

@@ -1,28 +1,18 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContentEntryFormPreview = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _form = require("@webiny/form");
-
 var _plugins = require("@webiny/plugins");
-
 var _RenderFieldElement = _interopRequireDefault(require("./RenderFieldElement"));
-
 var _Fields = require("./Fields");
-
 var FormWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eh1hbib0",
   label: "FormWrapper"
@@ -30,14 +20,11 @@ var FormWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   height: "calc(100vh - 260px)",
   overflow: "auto"
 });
-
 var ContentEntryFormPreview = function ContentEntryFormPreview(props) {
   var contentModel = props.contentModel;
-
   var formRenderer = _plugins.plugins.byType("cms-content-form-renderer").find(function (pl) {
     return pl.modelId === contentModel.modelId;
   });
-
   var renderCustomLayout = (0, _react.useCallback)(function (formRenderProps) {
     var fields = contentModel.fields.reduce(function (acc, field) {
       /**
@@ -51,11 +38,9 @@ var ContentEntryFormPreview = function ContentEntryFormPreview(props) {
       });
       return acc;
     }, {});
-
     if (!formRenderer) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Missing form renderer for modelId \"".concat(contentModel.modelId, "\"."));
     }
-
     return formRenderer.render((0, _objectSpread2.default)((0, _objectSpread2.default)({}, formRenderProps), {}, {
       /**
        * TODO @ts-refactor
@@ -78,5 +63,4 @@ var ContentEntryFormPreview = function ContentEntryFormPreview(props) {
     })));
   });
 };
-
 exports.ContentEntryFormPreview = ContentEntryFormPreview;

package/admin/components/ContentEntryForm/ContentEntryFormPreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormWrapper","styled","height","overflow","ContentEntryFormPreview","props","contentModel","formRenderer","plugins","byType","find","pl","modelId","renderCustomLayout","useCallback","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","formProps","layout"],"sources":["ContentEntryFormPreview.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Form, FormRenderPropParams } from \"@webiny/form\";\nimport { plugins } from \"@webiny/plugins\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport { CmsContentFormRendererPlugin, CmsEditorContentModel } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\n\nconst FormWrapper = styled(\"div\")({\n    height: \"calc(100vh - 260px)\",\n    overflow: \"auto\"\n});\n\ninterface Props {\n    contentModel: CmsEditorContentModel;\n}\n\nexport const ContentEntryFormPreview: React.FC<Props> = props => {\n    const { contentModel } = props;\n\n    const formRenderer = plugins\n        .byType<CmsContentFormRendererPlugin>(\"cms-content-form-renderer\")\n        .find(pl => pl.modelId === contentModel.modelId);\n\n    const renderCustomLayout = useCallback(\n        (formRenderProps: FormRenderPropParams) => {\n            const fields = contentModel.fields.reduce((acc, field) => {\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                acc[field.fieldId] = (\n                    <RenderFieldElement\n                        field={field}\n                        Bind={formRenderProps.Bind as any}\n                        contentModel={contentModel}\n                    />\n                );\n\n                return acc;\n            }, {} as Record<string, React.ReactElement>);\n            if (!formRenderer) {\n                return <>{`Missing form renderer for modelId \"${contentModel.modelId}\".`}</>;\n            }\n            return formRenderer.render({\n                ...formRenderProps,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                Bind: formRenderProps.Bind as any,\n                contentModel,\n                fields\n            });\n        },\n        [formRenderer, contentModel.fields]\n    );\n\n    return (\n        <Form>\n            {formProps => (\n                <FormWrapper data-testid={\"cms-content-form\"}>\n                    {formRenderer ? (\n                        renderCustomLayout(formProps)\n                    ) : (\n                        <Fields\n                            contentModel={contentModel}\n                            fields={contentModel.fields}\n                            layout={contentModel.layout || []}\n                            {...formProps}\n                            Bind={formProps.Bind as any}\n                        />\n                    )}\n                </FormWrapper>\n            )}\n        </Form>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,WAAW,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC9BC,MAAM,EAAE,qBADsB;EAE9BC,QAAQ,EAAE;AAFoB,CAAjB,CAAjB;;AASO,IAAMC,uBAAwC,GAAG,SAA3CA,uBAA2C,CAAAC,KAAK,EAAI;EAC7D,IAAQC,YAAR,GAAyBD,KAAzB,CAAQC,YAAR;;EAEA,IAAMC,YAAY,GAAGC,gBAAA,CAChBC,MADgB,CACqB,2BADrB,EAEhBC,IAFgB,CAEX,UAAAC,EAAE;IAAA,OAAIA,EAAE,CAACC,OAAH,KAAeN,YAAY,CAACM,OAAhC;EAAA,CAFS,CAArB;;EAIA,IAAMC,kBAAkB,GAAG,IAAAC,kBAAA,EACvB,UAACC,eAAD,EAA2C;IACvC,IAAMC,MAAM,GAAGV,YAAY,CAACU,MAAb,CAAoBC,MAApB,CAA2B,UAACC,GAAD,EAAMC,KAAN,EAAgB;MACtD;AAChB;AACA;AACA;MACgBD,GAAG,CAACC,KAAK,CAACC,OAAP,CAAH,gBACI,6BAAC,2BAAD;QACI,KAAK,EAAED,KADX;QAEI,IAAI,EAAEJ,eAAe,CAACM,IAF1B;QAGI,YAAY,EAAEf;MAHlB,EADJ;MAQA,OAAOY,GAAP;IACH,CAdc,EAcZ,EAdY,CAAf;;IAeA,IAAI,CAACX,YAAL,EAAmB;MACf,oBAAO,0GAAyCD,YAAY,CAACM,OAAtD,SAAP;IACH;;IACD,OAAOL,YAAY,CAACe,MAAb,6DACAP,eADA;MAEH;AAChB;AACA;AACA;MACgBM,IAAI,EAAEN,eAAe,CAACM,IANnB;MAOHf,YAAY,EAAZA,YAPG;MAQHU,MAAM,EAANA;IARG,GAAP;EAUH,CA9BsB,EA+BvB,CAACT,YAAD,EAAeD,YAAY,CAACU,MAA5B,CA/BuB,CAA3B;EAkCA,oBACI,6BAAC,UAAD,QACK,UAAAO,SAAS;IAAA,oBACN,6BAAC,WAAD;MAAa,eAAa;IAA1B,GACKhB,YAAY,GACTM,kBAAkB,CAACU,SAAD,CADT,gBAGT,6BAAC,cAAD;MACI,YAAY,EAAEjB,YADlB;MAEI,MAAM,EAAEA,YAAY,CAACU,MAFzB;MAGI,MAAM,EAAEV,YAAY,CAACkB,MAAb,IAAuB;IAHnC,GAIQD,SAJR;MAKI,IAAI,EAAEA,SAAS,CAACF;IALpB,GAJR,CADM;EAAA,CADd,CADJ;AAmBH,CA5DM"}
+{"version":3,"names":["FormWrapper","styled","height","overflow","ContentEntryFormPreview","props","contentModel","formRenderer","plugins","byType","find","pl","modelId","renderCustomLayout","useCallback","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","formProps","layout"],"sources":["ContentEntryFormPreview.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Form, FormRenderPropParams } from \"@webiny/form\";\nimport { plugins } from \"@webiny/plugins\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport { CmsContentFormRendererPlugin, CmsEditorContentModel } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\n\nconst FormWrapper = styled(\"div\")({\n    height: \"calc(100vh - 260px)\",\n    overflow: \"auto\"\n});\n\ninterface Props {\n    contentModel: CmsEditorContentModel;\n}\n\nexport const ContentEntryFormPreview: React.FC<Props> = props => {\n    const { contentModel } = props;\n\n    const formRenderer = plugins\n        .byType<CmsContentFormRendererPlugin>(\"cms-content-form-renderer\")\n        .find(pl => pl.modelId === contentModel.modelId);\n\n    const renderCustomLayout = useCallback(\n        (formRenderProps: FormRenderPropParams) => {\n            const fields = contentModel.fields.reduce((acc, field) => {\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                acc[field.fieldId] = (\n                    <RenderFieldElement\n                        field={field}\n                        Bind={formRenderProps.Bind as any}\n                        contentModel={contentModel}\n                    />\n                );\n\n                return acc;\n            }, {} as Record<string, React.ReactElement>);\n            if (!formRenderer) {\n                return <>{`Missing form renderer for modelId \"${contentModel.modelId}\".`}</>;\n            }\n            return formRenderer.render({\n                ...formRenderProps,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                Bind: formRenderProps.Bind as any,\n                contentModel,\n                fields\n            });\n        },\n        [formRenderer, contentModel.fields]\n    );\n\n    return (\n        <Form>\n            {formProps => (\n                <FormWrapper data-testid={\"cms-content-form\"}>\n                    {formRenderer ? (\n                        renderCustomLayout(formProps)\n                    ) : (\n                        <Fields\n                            contentModel={contentModel}\n                            fields={contentModel.fields}\n                            layout={contentModel.layout || []}\n                            {...formProps}\n                            Bind={formProps.Bind as any}\n                        />\n                    )}\n                </FormWrapper>\n            )}\n        </Form>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAEA,IAAMA,WAAW,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC9BC,MAAM,EAAE,qBAAqB;EAC7BC,QAAQ,EAAE;AACd,CAAC,CAAC;AAMK,IAAMC,uBAAwC,GAAG,SAA3CA,uBAAwC,CAAGC,KAAK,EAAI;EAC7D,IAAQC,YAAY,GAAKD,KAAK,CAAtBC,YAAY;EAEpB,IAAMC,YAAY,GAAGC,gBAAO,CACvBC,MAAM,CAA+B,2BAA2B,CAAC,CACjEC,IAAI,CAAC,UAAAC,EAAE;IAAA,OAAIA,EAAE,CAACC,OAAO,KAAKN,YAAY,CAACM,OAAO;EAAA,EAAC;EAEpD,IAAMC,kBAAkB,GAAG,IAAAC,kBAAW,EAClC,UAACC,eAAqC,EAAK;IACvC,IAAMC,MAAM,GAAGV,YAAY,CAACU,MAAM,CAACC,MAAM,CAAC,UAACC,GAAG,EAAEC,KAAK,EAAK;MACtD;AAChB;AACA;AACA;MACgBD,GAAG,CAACC,KAAK,CAACC,OAAO,CAAC,gBACd,6BAAC,2BAAkB;QACf,KAAK,EAAED,KAAM;QACb,IAAI,EAAEJ,eAAe,CAACM,IAAY;QAClC,YAAY,EAAEf;MAAa,EAElC;MAED,OAAOY,GAAG;IACd,CAAC,EAAE,CAAC,CAAC,CAAuC;IAC5C,IAAI,CAACX,YAAY,EAAE;MACf,oBAAO,0GAAyCD,YAAY,CAACM,OAAO,SAAQ;IAChF;IACA,OAAOL,YAAY,CAACe,MAAM,6DACnBP,eAAe;MAClB;AAChB;AACA;AACA;MACgBM,IAAI,EAAEN,eAAe,CAACM,IAAW;MACjCf,YAAY,EAAZA,YAAY;MACZU,MAAM,EAANA;IAAM,GACR;EACN,CAAC,EACD,CAACT,YAAY,EAAED,YAAY,CAACU,MAAM,CAAC,CACtC;EAED,oBACI,6BAAC,UAAI,QACA,UAAAO,SAAS;IAAA,oBACN,6BAAC,WAAW;MAAC,eAAa;IAAmB,GACxChB,YAAY,GACTM,kBAAkB,CAACU,SAAS,CAAC,gBAE7B,6BAAC,cAAM;MACH,YAAY,EAAEjB,YAAa;MAC3B,MAAM,EAAEA,YAAY,CAACU,MAAO;MAC5B,MAAM,EAAEV,YAAY,CAACkB,MAAM,IAAI;IAAG,GAC9BD,SAAS;MACb,IAAI,EAAEA,SAAS,CAACF;IAAY,GAEnC,CACS;EAAA,CACjB,CACE;AAEf,CAAC;AAAC"}

package/admin/components/ContentEntryForm/Fields.js

@@ -1,30 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Fields = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _RenderFieldElement = _interopRequireDefault(require("./RenderFieldElement"));
-
 var getFieldById = function getFieldById(fields, id) {
   return fields.find(function (field) {
     return field.id === id;
   }) || null;
 };
-
 var Fields = function Fields(_ref) {
   var Bind = _ref.Bind,
-      fields = _ref.fields,
-      layout = _ref.layout,
-      contentModel = _ref.contentModel,
-      gridClassName = _ref.gridClassName;
+    fields = _ref.fields,
+    layout = _ref.layout,
+    contentModel = _ref.contentModel,
+    gridClassName = _ref.gridClassName;
   return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
     className: gridClassName
   }, layout.map(function (row, rowIndex) {
@@ -42,5 +36,4 @@ var Fields = function Fields(_ref) {
     }));
   }));
 };
-
 exports.Fields = Fields;

package/admin/components/ContentEntryForm/Fields.js.map

@@ -1 +1 @@
-{"version":3,"names":["getFieldById","fields","id","find","field","Fields","Bind","layout","contentModel","gridClassName","map","row","rowIndex","fieldId","Math","floor","length"],"sources":["Fields.tsx"],"sourcesContent":["import React from \"react\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport {\n    CmsEditorContentModel,\n    CmsModelField,\n    CmsEditorFieldsLayout,\n    BindComponent\n} from \"~/types\";\n\ninterface FieldsProps {\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n    gridClassName?: string;\n}\n\nconst getFieldById = (fields: CmsModelField[], id: string): CmsModelField | null => {\n    return fields.find(field => field.id === id) || null;\n};\n\nexport const Fields: React.FC<FieldsProps> = ({\n    Bind,\n    fields,\n    layout,\n    contentModel,\n    gridClassName\n}) => {\n    return (\n        <Grid className={gridClassName}>\n            {layout.map((row, rowIndex) => (\n                <React.Fragment key={rowIndex}>\n                    {row.map(fieldId => (\n                        <Cell span={Math.floor(12 / row.length)} key={fieldId}>\n                            <RenderFieldElement\n                                field={getFieldById(fields, fieldId) as CmsModelField}\n                                Bind={Bind}\n                                contentModel={contentModel}\n                            />\n                        </Cell>\n                    ))}\n                </React.Fragment>\n            ))}\n        </Grid>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAgBA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,MAAD,EAA0BC,EAA1B,EAA+D;EAChF,OAAOD,MAAM,CAACE,IAAP,CAAY,UAAAC,KAAK;IAAA,OAAIA,KAAK,CAACF,EAAN,KAAaA,EAAjB;EAAA,CAAjB,KAAyC,IAAhD;AACH,CAFD;;AAIO,IAAMG,MAA6B,GAAG,SAAhCA,MAAgC,OAMvC;EAAA,IALFC,IAKE,QALFA,IAKE;EAAA,IAJFL,MAIE,QAJFA,MAIE;EAAA,IAHFM,MAGE,QAHFA,MAGE;EAAA,IAFFC,YAEE,QAFFA,YAEE;EAAA,IADFC,aACE,QADFA,aACE;EACF,oBACI,6BAAC,UAAD;IAAM,SAAS,EAAEA;EAAjB,GACKF,MAAM,CAACG,GAAP,CAAW,UAACC,GAAD,EAAMC,QAAN;IAAA,oBACR,6BAAC,cAAD,CAAO,QAAP;MAAgB,GAAG,EAAEA;IAArB,GACKD,GAAG,CAACD,GAAJ,CAAQ,UAAAG,OAAO;MAAA,oBACZ,6BAAC,UAAD;QAAM,IAAI,EAAEC,IAAI,CAACC,KAAL,CAAW,KAAKJ,GAAG,CAACK,MAApB,CAAZ;QAAyC,GAAG,EAAEH;MAA9C,gBACI,6BAAC,2BAAD;QACI,KAAK,EAAEb,YAAY,CAACC,MAAD,EAASY,OAAT,CADvB;QAEI,IAAI,EAAEP,IAFV;QAGI,YAAY,EAAEE;MAHlB,EADJ,CADY;IAAA,CAAf,CADL,CADQ;EAAA,CAAX,CADL,CADJ;AAiBH,CAxBM"}
+{"version":3,"names":["getFieldById","fields","id","find","field","Fields","Bind","layout","contentModel","gridClassName","map","row","rowIndex","fieldId","Math","floor","length"],"sources":["Fields.tsx"],"sourcesContent":["import React from \"react\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport {\n    CmsEditorContentModel,\n    CmsModelField,\n    CmsEditorFieldsLayout,\n    BindComponent\n} from \"~/types\";\n\ninterface FieldsProps {\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n    gridClassName?: string;\n}\n\nconst getFieldById = (fields: CmsModelField[], id: string): CmsModelField | null => {\n    return fields.find(field => field.id === id) || null;\n};\n\nexport const Fields: React.FC<FieldsProps> = ({\n    Bind,\n    fields,\n    layout,\n    contentModel,\n    gridClassName\n}) => {\n    return (\n        <Grid className={gridClassName}>\n            {layout.map((row, rowIndex) => (\n                <React.Fragment key={rowIndex}>\n                    {row.map(fieldId => (\n                        <Cell span={Math.floor(12 / row.length)} key={fieldId}>\n                            <RenderFieldElement\n                                field={getFieldById(fields, fieldId) as CmsModelField}\n                                Bind={Bind}\n                                contentModel={contentModel}\n                            />\n                        </Cell>\n                    ))}\n                </React.Fragment>\n            ))}\n        </Grid>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAgBA,IAAMA,YAAY,GAAG,SAAfA,YAAY,CAAIC,MAAuB,EAAEC,EAAU,EAA2B;EAChF,OAAOD,MAAM,CAACE,IAAI,CAAC,UAAAC,KAAK;IAAA,OAAIA,KAAK,CAACF,EAAE,KAAKA,EAAE;EAAA,EAAC,IAAI,IAAI;AACxD,CAAC;AAEM,IAAMG,MAA6B,GAAG,SAAhCA,MAA6B,OAMpC;EAAA,IALFC,IAAI,QAAJA,IAAI;IACJL,MAAM,QAANA,MAAM;IACNM,MAAM,QAANA,MAAM;IACNC,YAAY,QAAZA,YAAY;IACZC,aAAa,QAAbA,aAAa;EAEb,oBACI,6BAAC,UAAI;IAAC,SAAS,EAAEA;EAAc,GAC1BF,MAAM,CAACG,GAAG,CAAC,UAACC,GAAG,EAAEC,QAAQ;IAAA,oBACtB,6BAAC,cAAK,CAAC,QAAQ;MAAC,GAAG,EAAEA;IAAS,GACzBD,GAAG,CAACD,GAAG,CAAC,UAAAG,OAAO;MAAA,oBACZ,6BAAC,UAAI;QAAC,IAAI,EAAEC,IAAI,CAACC,KAAK,CAAC,EAAE,GAAGJ,GAAG,CAACK,MAAM,CAAE;QAAC,GAAG,EAAEH;MAAQ,gBAClD,6BAAC,2BAAkB;QACf,KAAK,EAAEb,YAAY,CAACC,MAAM,EAAEY,OAAO,CAAmB;QACtD,IAAI,EAAEP,IAAK;QACX,YAAY,EAAEE;MAAa,EAC7B,CACC;IAAA,CACV,CAAC,CACW;EAAA,CACpB,CAAC,CACC;AAEf,CAAC;AAAC"}

package/admin/components/ContentEntryForm/Label.js

@@ -1,26 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _emotion = require("emotion");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _Typography = require("@webiny/ui/Typography");
-
 var style = {
   label: /*#__PURE__*/(0, _emotion.css)({
     marginBottom: "5px !important"
   }, "label:label;")
 };
-
 var Label = function Label(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -29,6 +22,5 @@ var Label = function Label(_ref) {
     use: "body2"
   }, children));
 };
-
 var _default = Label;
 exports.default = _default;

package/admin/components/ContentEntryForm/Label.js.map

@@ -1 +1 @@
-{"version":3,"names":["style","label","css","marginBottom","Label","children","classNames"],"sources":["Label.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nconst style = {\n    label: css({\n        marginBottom: \"5px !important\"\n    })\n};\n\nconst Label: React.FC = ({ children }) => (\n    <div\n        className={classNames(\n            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n            style.label\n        )}\n    >\n        <Typography use={\"body2\"}>{children}</Typography>\n    </div>\n);\n\nexport default Label;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG;EACVC,KAAK,eAAE,IAAAC,YAAA,EAAI;IACPC,YAAY,EAAE;EADP,CAAJ;AADG,CAAd;;AAMA,IAAMC,KAAe,GAAG,SAAlBA,KAAkB;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,oBACpB;IACI,SAAS,EAAE,IAAAC,mBAAA,EACP,mEADO,EAEPN,KAAK,CAACC,KAFC;EADf,gBAMI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA2BI,QAA3B,CANJ,CADoB;AAAA,CAAxB;;eAWeD,K"}
+{"version":3,"names":["style","label","css","marginBottom","Label","children","classNames"],"sources":["Label.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nconst style = {\n    label: css({\n        marginBottom: \"5px !important\"\n    })\n};\n\nconst Label: React.FC = ({ children }) => (\n    <div\n        className={classNames(\n            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n            style.label\n        )}\n    >\n        <Typography use={\"body2\"}>{children}</Typography>\n    </div>\n);\n\nexport default Label;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG;EACVC,KAAK,eAAE,IAAAC,YAAG,EAAC;IACPC,YAAY,EAAE;EAClB,CAAC;AACL,CAAC;AAED,IAAMC,KAAe,GAAG,SAAlBA,KAAe;EAAA,IAAMC,QAAQ,QAARA,QAAQ;EAAA,oBAC/B;IACI,SAAS,EAAE,IAAAC,mBAAU,EACjB,mEAAmE,EACnEN,KAAK,CAACC,KAAK;EACb,gBAEF,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAQ,GAAEI,QAAQ,CAAc,CAC/C;AAAA,CACT;AAAC,eAEaD,KAAK;AAAA"}

package/admin/components/ContentEntryForm/RenderFieldElement.js

@@ -1,37 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 var _i18n = require("@webiny/app/i18n");
-
 var _Label = _interopRequireDefault(require("./Label"));
-
 var _useBind = require("./useBind");
-
 var _useRenderPlugins = require("./useRenderPlugins");
-
 var _ModelFieldProvider = require("../ModelFieldProvider");
-
 var _templateObject;
-
 var t = _i18n.i18n.ns("app-headless-cms/admin/components/content-form");
-
 var RenderFieldElement = function RenderFieldElement(props) {
   var renderPlugins = (0, _useRenderPlugins.useRenderPlugins)();
   var field = props.field,
-      Bind = props.Bind,
-      contentModel = props.contentModel;
+    Bind = props.Bind,
+    contentModel = props.contentModel;
   var getBind = (0, _useBind.useBind)({
     Bind: Bind,
     field: field
@@ -39,13 +27,11 @@ var RenderFieldElement = function RenderFieldElement(props) {
   var renderPlugin = renderPlugins.find(function (plugin) {
     return plugin.renderer.rendererName === (0, _get.default)(field, "renderer.name");
   });
-
   if (!renderPlugin) {
     return t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Cannot render \"{fieldName}\" field - field renderer missing."])))({
       fieldName: /*#__PURE__*/_react.default.createElement("strong", null, field.fieldId)
     });
   }
-
   return /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
     field: field
   }, renderPlugin.renderer.render({
@@ -55,6 +41,5 @@ var RenderFieldElement = function RenderFieldElement(props) {
     contentModel: contentModel
   }));
 };
-
 var _default = RenderFieldElement;
 exports.default = _default;

package/admin/components/ContentEntryForm/RenderFieldElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","RenderFieldElement","props","renderPlugins","useRenderPlugins","field","Bind","contentModel","getBind","useBind","renderPlugin","find","plugin","renderer","rendererName","get","fieldName","fieldId","render","Label"],"sources":["RenderFieldElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsModelField, CmsEditorContentModel, BindComponent } from \"~/types\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport Label from \"./Label\";\nimport { useBind } from \"./useBind\";\nimport { useRenderPlugins } from \"./useRenderPlugins\";\nimport { ModelFieldProvider } from \"../ModelFieldProvider\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/content-form\");\n\ninterface RenderFieldElementProps {\n    field: CmsModelField;\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n}\n\nconst RenderFieldElement: React.FC<RenderFieldElementProps> = props => {\n    const renderPlugins = useRenderPlugins();\n    const { field, Bind, contentModel } = props;\n    const getBind = useBind({ Bind, field });\n\n    const renderPlugin = renderPlugins.find(\n        plugin => plugin.renderer.rendererName === get(field, \"renderer.name\")\n    );\n\n    if (!renderPlugin) {\n        return t`Cannot render \"{fieldName}\" field - field renderer missing.`({\n            fieldName: <strong>{field.fieldId}</strong>\n        });\n    }\n\n    return (\n        <ModelFieldProvider field={field}>\n            {renderPlugin.renderer.render({ field, getBind, Label, contentModel })}\n        </ModelFieldProvider>\n    );\n};\n\nexport default RenderFieldElement;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,gDAAR,CAAV;;AAQA,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAwD,CAAAC,KAAK,EAAI;EACnE,IAAMC,aAAa,GAAG,IAAAC,kCAAA,GAAtB;EACA,IAAQC,KAAR,GAAsCH,KAAtC,CAAQG,KAAR;EAAA,IAAeC,IAAf,GAAsCJ,KAAtC,CAAeI,IAAf;EAAA,IAAqBC,YAArB,GAAsCL,KAAtC,CAAqBK,YAArB;EACA,IAAMC,OAAO,GAAG,IAAAC,gBAAA,EAAQ;IAAEH,IAAI,EAAJA,IAAF;IAAQD,KAAK,EAALA;EAAR,CAAR,CAAhB;EAEA,IAAMK,YAAY,GAAGP,aAAa,CAACQ,IAAd,CACjB,UAAAC,MAAM;IAAA,OAAIA,MAAM,CAACC,QAAP,CAAgBC,YAAhB,KAAiC,IAAAC,YAAA,EAAIV,KAAJ,EAAW,eAAX,CAArC;EAAA,CADW,CAArB;;EAIA,IAAI,CAACK,YAAL,EAAmB;IACf,OAAOZ,CAAC,gJAAD,CAA+D;MAClEkB,SAAS,eAAE,6CAASX,KAAK,CAACY,OAAf;IADuD,CAA/D,CAAP;EAGH;;EAED,oBACI,6BAAC,sCAAD;IAAoB,KAAK,EAAEZ;EAA3B,GACKK,YAAY,CAACG,QAAb,CAAsBK,MAAtB,CAA6B;IAAEb,KAAK,EAALA,KAAF;IAASG,OAAO,EAAPA,OAAT;IAAkBW,KAAK,EAALA,cAAlB;IAAyBZ,YAAY,EAAZA;EAAzB,CAA7B,CADL,CADJ;AAKH,CApBD;;eAsBeN,kB"}
+{"version":3,"names":["t","i18n","ns","RenderFieldElement","props","renderPlugins","useRenderPlugins","field","Bind","contentModel","getBind","useBind","renderPlugin","find","plugin","renderer","rendererName","get","fieldName","fieldId","render","Label"],"sources":["RenderFieldElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsModelField, CmsEditorContentModel, BindComponent } from \"~/types\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport Label from \"./Label\";\nimport { useBind } from \"./useBind\";\nimport { useRenderPlugins } from \"./useRenderPlugins\";\nimport { ModelFieldProvider } from \"../ModelFieldProvider\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/content-form\");\n\ninterface RenderFieldElementProps {\n    field: CmsModelField;\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n}\n\nconst RenderFieldElement: React.FC<RenderFieldElementProps> = props => {\n    const renderPlugins = useRenderPlugins();\n    const { field, Bind, contentModel } = props;\n    const getBind = useBind({ Bind, field });\n\n    const renderPlugin = renderPlugins.find(\n        plugin => plugin.renderer.rendererName === get(field, \"renderer.name\")\n    );\n\n    if (!renderPlugin) {\n        return t`Cannot render \"{fieldName}\" field - field renderer missing.`({\n            fieldName: <strong>{field.fieldId}</strong>\n        });\n    }\n\n    return (\n        <ModelFieldProvider field={field}>\n            {renderPlugin.renderer.render({ field, getBind, Label, contentModel })}\n        </ModelFieldProvider>\n    );\n};\n\nexport default RenderFieldElement;\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAE3D,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,gDAAgD,CAAC;AAQnE,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAqD,CAAGC,KAAK,EAAI;EACnE,IAAMC,aAAa,GAAG,IAAAC,kCAAgB,GAAE;EACxC,IAAQC,KAAK,GAAyBH,KAAK,CAAnCG,KAAK;IAAEC,IAAI,GAAmBJ,KAAK,CAA5BI,IAAI;IAAEC,YAAY,GAAKL,KAAK,CAAtBK,YAAY;EACjC,IAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC;IAAEH,IAAI,EAAJA,IAAI;IAAED,KAAK,EAALA;EAAM,CAAC,CAAC;EAExC,IAAMK,YAAY,GAAGP,aAAa,CAACQ,IAAI,CACnC,UAAAC,MAAM;IAAA,OAAIA,MAAM,CAACC,QAAQ,CAACC,YAAY,KAAK,IAAAC,YAAG,EAACV,KAAK,EAAE,eAAe,CAAC;EAAA,EACzE;EAED,IAAI,CAACK,YAAY,EAAE;IACf,OAAOZ,CAAC,iJAA8D;MAClEkB,SAAS,eAAE,6CAASX,KAAK,CAACY,OAAO;IACrC,CAAC,CAAC;EACN;EAEA,oBACI,6BAAC,sCAAkB;IAAC,KAAK,EAAEZ;EAAM,GAC5BK,YAAY,CAACG,QAAQ,CAACK,MAAM,CAAC;IAAEb,KAAK,EAALA,KAAK;IAAEG,OAAO,EAAPA,OAAO;IAAEW,KAAK,EAALA,cAAK;IAAEZ,YAAY,EAAZA;EAAa,CAAC,CAAC,CACrD;AAE7B,CAAC;AAAC,eAEaN,kBAAkB;AAAA"}

package/admin/components/ContentEntryForm/functions/getValue.js

@@ -4,26 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getValue = void 0;
-
 var getValue = function getValue(params) {
   var bind = params.bind,
-      field = params.field,
-      index = params.index;
+    field = params.field,
+    index = params.index;
   var value = bind.value || null;
-
   if (field.multipleValues) {
     if (!Array.isArray(value)) {
       value = [];
     }
-
     if (index >= 0) {
       return value[index] || null;
     }
-
     return value;
   }
-
   return value;
 };
-
 exports.getValue = getValue;

package/admin/components/ContentEntryForm/functions/getValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["getValue","params","bind","field","index","value","multipleValues","Array","isArray"],"sources":["getValue.ts"],"sourcesContent":["import { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface GetValueParams {\n    bind: BindComponentRenderProp;\n    field: Pick<CmsModelField, \"multipleValues\">;\n    index: number;\n}\nexport const getValue = (params: GetValueParams): string => {\n    const { bind, field, index } = params;\n    let value = bind.value || null;\n\n    if (field.multipleValues) {\n        if (!Array.isArray(value)) {\n            value = [];\n        }\n\n        if (index >= 0) {\n            return value[index] || null;\n        }\n\n        return value;\n    }\n\n    return value;\n};\n"],"mappings":";;;;;;;AAQO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,MAAD,EAAoC;EACxD,IAAQC,IAAR,GAA+BD,MAA/B,CAAQC,IAAR;EAAA,IAAcC,KAAd,GAA+BF,MAA/B,CAAcE,KAAd;EAAA,IAAqBC,KAArB,GAA+BH,MAA/B,CAAqBG,KAArB;EACA,IAAIC,KAAK,GAAGH,IAAI,CAACG,KAAL,IAAc,IAA1B;;EAEA,IAAIF,KAAK,CAACG,cAAV,EAA0B;IACtB,IAAI,CAACC,KAAK,CAACC,OAAN,CAAcH,KAAd,CAAL,EAA2B;MACvBA,KAAK,GAAG,EAAR;IACH;;IAED,IAAID,KAAK,IAAI,CAAb,EAAgB;MACZ,OAAOC,KAAK,CAACD,KAAD,CAAL,IAAgB,IAAvB;IACH;;IAED,OAAOC,KAAP;EACH;;EAED,OAAOA,KAAP;AACH,CAjBM"}
+{"version":3,"names":["getValue","params","bind","field","index","value","multipleValues","Array","isArray"],"sources":["getValue.ts"],"sourcesContent":["import { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface GetValueParams {\n    bind: BindComponentRenderProp;\n    field: Pick<CmsModelField, \"multipleValues\">;\n    index: number;\n}\nexport const getValue = (params: GetValueParams): string => {\n    const { bind, field, index } = params;\n    let value = bind.value || null;\n\n    if (field.multipleValues) {\n        if (!Array.isArray(value)) {\n            value = [];\n        }\n\n        if (index >= 0) {\n            return value[index] || null;\n        }\n\n        return value;\n    }\n\n    return value;\n};\n"],"mappings":";;;;;;AAQO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,MAAsB,EAAa;EACxD,IAAQC,IAAI,GAAmBD,MAAM,CAA7BC,IAAI;IAAEC,KAAK,GAAYF,MAAM,CAAvBE,KAAK;IAAEC,KAAK,GAAKH,MAAM,CAAhBG,KAAK;EAC1B,IAAIC,KAAK,GAAGH,IAAI,CAACG,KAAK,IAAI,IAAI;EAE9B,IAAIF,KAAK,CAACG,cAAc,EAAE;IACtB,IAAI,CAACC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,EAAE;MACvBA,KAAK,GAAG,EAAE;IACd;IAEA,IAAID,KAAK,IAAI,CAAC,EAAE;MACZ,OAAOC,KAAK,CAACD,KAAK,CAAC,IAAI,IAAI;IAC/B;IAEA,OAAOC,KAAK;EAChB;EAEA,OAAOA,KAAK;AAChB,CAAC;AAAC"}