@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/components/ContentEntryForm/ContentEntryForm.js

@@ -1,68 +1,67 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onForm"];
-import React, { useCallback, useEffect, useRef } from "react";
-import styled from "@emotion/styled";
-import { Form } from "@webiny/form";
-import { plugins } from "@webiny/plugins";
-import { CircularProgress } from "@webiny/ui/Progress";
-import RenderFieldElement from "./RenderFieldElement";
-import { useContentEntryForm } from "./useContentEntryForm";
-import { Fields } from "./Fields";
-var FormWrapper = /*#__PURE__*/styled("div", {
-  target: "ejw5gwy0",
-  label: "FormWrapper"
-})({
-  height: "calc(100vh - 260px)",
-  overflow: "auto"
-});
-export var ContentEntryForm = function ContentEntryForm(_ref) {
-  var onForm = _ref.onForm,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var contentModel = props.contentModel;
-
-  var _useContentEntryForm = useContentEntryForm(props),
-      loading = _useContentEntryForm.loading,
-      data = _useContentEntryForm.data,
-      onChange = _useContentEntryForm.onChange,
-      onSubmit = _useContentEntryForm.onSubmit,
-      invalidFields = _useContentEntryForm.invalidFields;
+import React, { useEffect, useRef } from "react";
+import { makeDecoratable } from "@webiny/app-admin";
+import { ModelProvider, useModel } from "../ModelProvider";
+import { useFormRenderer } from "./useFormRenderer";
+import { ContentEntryFormProvider } from "./ContentEntryFormProvider";
+import { CustomLayout } from "./CustomLayout";
+import { DefaultLayout } from "./DefaultLayout";
+import { useGoToRevision } from "./useGoToRevision";
+export const ContentEntryForm = makeDecoratable("ContentEntryForm", ({
+  entry,
+  persistEntry,
+  onChange,
+  onInvalidFields,
+  onAfterCreate,
+  setSaveEntry,
+  header = true,
+  ...props
+}) => {
+  const formElementRef = useRef(null);
+  const {
+    model
+  } = useModel();
+  const {
+    goToRevision
+  } = useGoToRevision();
+  const formRenderer = useFormRenderer(model);
+  const defaultOnAfterCreate = entry => {
+    goToRevision(entry.id);
+  };
 
-  var ref = useRef(null);
-  useEffect(function () {
-    typeof onForm === "function" && onForm(ref.current);
-  }, []);
-  var formRenderer = plugins.byType("cms-content-form-renderer").find(function (pl) {
-    return pl.modelId === contentModel.modelId;
-  });
-  var renderCustomLayout = useCallback(function (formRenderProps) {
-    var fields = contentModel.fields.reduce(function (acc, field) {
-      acc[field.fieldId] = /*#__PURE__*/React.createElement(RenderFieldElement, {
-        field: field,
-        Bind: formRenderProps.Bind,
-        contentModel: contentModel
-      });
-      return acc;
-    }, {});
-    return formRenderer.render(_objectSpread(_objectSpread({}, formRenderProps), {}, {
-      contentModel: contentModel,
-      fields: fields
-    }));
-  }, [formRenderer]);
-  return /*#__PURE__*/React.createElement(Form, {
+  // When entry changes, scroll to the top of the form.
+  useEffect(() => {
+    if (!formElementRef.current) {
+      return;
+    }
+    setTimeout(() => {
+      formElementRef.current?.scrollTo(0, 0);
+    }, 20);
+  }, [entry.id, formElementRef.current]);
+  if (model.isBeingDeleted) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "Model is being deleted.");
+  }
+  return /*#__PURE__*/React.createElement(ContentEntryFormProvider, {
+    model: model,
+    entry: entry,
     onChange: onChange,
-    onSubmit: onSubmit,
-    data: data,
-    ref: ref,
-    invalidFields: invalidFields
-  }, function (formProps) {
-    return /*#__PURE__*/React.createElement(FormWrapper, {
-      "data-testid": "cms-content-form"
-    }, loading && /*#__PURE__*/React.createElement(CircularProgress, null), formRenderer ? renderCustomLayout(formProps) : /*#__PURE__*/React.createElement(Fields, Object.assign({
-      contentModel: contentModel,
-      fields: contentModel.fields,
-      layout: contentModel.layout
-    }, formProps)));
-  });
-};
+    onInvalidFields: onInvalidFields,
+    onAfterCreate: onAfterCreate || defaultOnAfterCreate,
+    setSaveEntry: setSaveEntry,
+    confirmNavigationIfDirty: true,
+    persistEntry: persistEntry
+  }, /*#__PURE__*/React.createElement(ModelProvider, {
+    model: model
+  }, header ? header : null, /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    id: "cms-content-form",
+    "data-element": "cms-content-form",
+    "data-testid": "cms-content-form",
+    ref: formElementRef
+  }), formRenderer ? /*#__PURE__*/React.createElement(CustomLayout, {
+    model: model,
+    formRenderer: formRenderer
+  }) : /*#__PURE__*/React.createElement(DefaultLayout, {
+    model: model
+  }))));
+});
+
+//# sourceMappingURL=ContentEntryForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","makeDecoratable","ModelProvider","useModel","useFormRenderer","ContentEntryFormProvider","CustomLayout","DefaultLayout","useGoToRevision","ContentEntryForm","entry","persistEntry","onChange","onInvalidFields","onAfterCreate","setSaveEntry","header","props","formElementRef","model","goToRevision","formRenderer","defaultOnAfterCreate","id","current","setTimeout","scrollTo","isBeingDeleted","createElement","Fragment","confirmNavigationIfDirty","Object","assign","ref"],"sources":["ContentEntryForm.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { FormOnSubmit, FormValidation } from \"@webiny/form\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsContentEntry } from \"~/types\";\nimport { ModelProvider, useModel } from \"~/admin/components/ModelProvider\";\nimport { useFormRenderer } from \"~/admin/components/ContentEntryForm/useFormRenderer\";\nimport type { ContentEntryFormContext, PersistEntry } from \"./ContentEntryFormProvider\";\nimport { ContentEntryFormProvider } from \"./ContentEntryFormProvider\";\nimport { CustomLayout } from \"./CustomLayout\";\nimport { DefaultLayout } from \"./DefaultLayout\";\nimport { useGoToRevision } from \"~/admin/components/ContentEntryForm/useGoToRevision\";\n\nexport interface ContentEntryFormProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n    entry: Partial<CmsContentEntry>;\n    /**\n     * This callback is executed when an entry, or a revision, are created.\n     * @param entry\n     */\n    onAfterCreate?: (entry: CmsContentEntry) => void;\n    /**\n     * This callback is executed when the form is valid, and it needs to persist the content entry.\n     */\n    persistEntry: PersistEntry;\n    onChange?: FormOnSubmit<Partial<CmsContentEntry>>;\n    onInvalidFields?: (invalidFields: FormValidation) => void;\n    header?: React.ReactNode;\n    /**\n     * This prop is used to get a reference to `saveEntry` callback, so it can be triggered by components\n     * outside the ContentEntryForm context.\n     * TODO: introduce a `layout` prop to be able to mount arbitrary components around the entry form, within the context.\n     */\n    setSaveEntry?: (cb: ContentEntryFormContext[\"saveEntry\"]) => void;\n}\n\nexport const ContentEntryForm = makeDecoratable(\n    \"ContentEntryForm\",\n    ({\n        entry,\n        persistEntry,\n        onChange,\n        onInvalidFields,\n        onAfterCreate,\n        setSaveEntry,\n        header = true,\n        ...props\n    }: ContentEntryFormProps) => {\n        const formElementRef = useRef<HTMLDivElement>(null);\n        const { model } = useModel();\n        const { goToRevision } = useGoToRevision();\n        const formRenderer = useFormRenderer(model);\n\n        const defaultOnAfterCreate = (entry: CmsContentEntry) => {\n            goToRevision(entry.id);\n        };\n\n        // When entry changes, scroll to the top of the form.\n        useEffect(() => {\n            if (!formElementRef.current) {\n                return;\n            }\n\n            setTimeout(() => {\n                formElementRef.current?.scrollTo(0, 0);\n            }, 20);\n        }, [entry.id, formElementRef.current]);\n\n        if (model.isBeingDeleted) {\n            return <>Model is being deleted.</>;\n        }\n\n        return (\n            <ContentEntryFormProvider\n                model={model}\n                entry={entry}\n                onChange={onChange}\n                onInvalidFields={onInvalidFields}\n                onAfterCreate={onAfterCreate || defaultOnAfterCreate}\n                setSaveEntry={setSaveEntry}\n                confirmNavigationIfDirty={true}\n                persistEntry={persistEntry}\n            >\n                <ModelProvider model={model}>\n                    {header ? header : null}\n                    <div\n                        {...props}\n                        id={\"cms-content-form\"}\n                        data-element={\"cms-content-form\"}\n                        data-testid={\"cms-content-form\"}\n                        ref={formElementRef}\n                    >\n                        {formRenderer ? (\n                            <CustomLayout model={model} formRenderer={formRenderer} />\n                        ) : (\n                            <DefaultLayout model={model} />\n                        )}\n                    </div>\n                </ModelProvider>\n            </ContentEntryFormProvider>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,aAAa,EAAEC,QAAQ;AAChC,SAASC,eAAe;AAExB,SAASC,wBAAwB;AACjC,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,eAAe;AAyBxB,OAAO,MAAMC,gBAAgB,GAAGR,eAAe,CAC3C,kBAAkB,EAClB,CAAC;EACGS,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,eAAe;EACfC,aAAa;EACbC,YAAY;EACZC,MAAM,GAAG,IAAI;EACb,GAAGC;AACgB,CAAC,KAAK;EACzB,MAAMC,cAAc,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAM;IAAEmB;EAAM,CAAC,GAAGhB,QAAQ,CAAC,CAAC;EAC5B,MAAM;IAAEiB;EAAa,CAAC,GAAGZ,eAAe,CAAC,CAAC;EAC1C,MAAMa,YAAY,GAAGjB,eAAe,CAACe,KAAK,CAAC;EAE3C,MAAMG,oBAAoB,GAAIZ,KAAsB,IAAK;IACrDU,YAAY,CAACV,KAAK,CAACa,EAAE,CAAC;EAC1B,CAAC;;EAED;EACAxB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACmB,cAAc,CAACM,OAAO,EAAE;MACzB;IACJ;IAEAC,UAAU,CAAC,MAAM;MACbP,cAAc,CAACM,OAAO,EAAEE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAAChB,KAAK,CAACa,EAAE,EAAEL,cAAc,CAACM,OAAO,CAAC,CAAC;EAEtC,IAAIL,KAAK,CAACQ,cAAc,EAAE;IACtB,oBAAO7B,KAAA,CAAA8B,aAAA,CAAA9B,KAAA,CAAA+B,QAAA,QAAE,yBAAyB,CAAC;EACvC;EAEA,oBACI/B,KAAA,CAAA8B,aAAA,CAACvB,wBAAwB;IACrBc,KAAK,EAAEA,KAAM;IACbT,KAAK,EAAEA,KAAM;IACbE,QAAQ,EAAEA,QAAS;IACnBC,eAAe,EAAEA,eAAgB;IACjCC,aAAa,EAAEA,aAAa,IAAIQ,oBAAqB;IACrDP,YAAY,EAAEA,YAAa;IAC3Be,wBAAwB,EAAE,IAAK;IAC/BnB,YAAY,EAAEA;EAAa,gBAE3Bb,KAAA,CAAA8B,aAAA,CAAC1B,aAAa;IAACiB,KAAK,EAAEA;EAAM,GACvBH,MAAM,GAAGA,MAAM,GAAG,IAAI,eACvBlB,KAAA,CAAA8B,aAAA,QAAAG,MAAA,CAAAC,MAAA,KACQf,KAAK;IACTM,EAAE,EAAE,kBAAmB;IACvB,gBAAc,kBAAmB;IACjC,eAAa,kBAAmB;IAChCU,GAAG,EAAEf;EAAe,IAEnBG,YAAY,gBACTvB,KAAA,CAAA8B,aAAA,CAACtB,YAAY;IAACa,KAAK,EAAEA,KAAM;IAACE,YAAY,EAAEA;EAAa,CAAE,CAAC,gBAE1DvB,KAAA,CAAA8B,aAAA,CAACrB,aAAa;IAACY,KAAK,EAAEA;EAAM,CAAE,CAEjC,CACM,CACO,CAAC;AAEnC,CACJ,CAAC","ignoreList":[]}

package/admin/components/ContentEntryForm/ContentEntryFormPreview.d.ts

@@ -1,7 +1,24 @@
-/// <reference types="react" />
-import { CmsEditorContentModel } from "../../../types";
-interface Props {
+import React from "react";
+import type { CmsEditorContentModel } from "../../../types";
+export interface ContentEntryFormPreviewProps {
     contentModel: CmsEditorContentModel;
 }
-export declare const ContentEntryFormPreview: (props: Props) => JSX.Element;
-export {};
+export declare const ContentEntryFormPreview: ((props: ContentEntryFormPreviewProps) => React.JSX.Element) & {
+    original: (props: ContentEntryFormPreviewProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: ContentEntryFormPreviewProps) => React.JSX.Element) & {
+        original: (props: ContentEntryFormPreviewProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: ContentEntryFormPreviewProps) => React.JSX.Element) & {
+        original: (props: ContentEntryFormPreviewProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

package/admin/components/ContentEntryForm/ContentEntryFormPreview.js

@@ -1,43 +1,33 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import React, { useCallback } from "react";
-import styled from "@emotion/styled";
-import { Form } from "@webiny/form";
-import { plugins } from "@webiny/plugins";
-import RenderFieldElement from "./RenderFieldElement";
-import { Fields } from "./Fields";
-var FormWrapper = /*#__PURE__*/styled("div", {
-  target: "eh1hbib0",
-  label: "FormWrapper"
-})({
-  height: "calc(100vh - 260px)",
-  overflow: "auto"
+import React from "react";
+import { makeDecoratable } from "@webiny/app-admin";
+import { ModelProvider } from "../ModelProvider";
+import { useFormRenderer } from "./useFormRenderer";
+import { CustomLayout } from "./CustomLayout";
+import { DefaultLayout } from "./DefaultLayout";
+import { ContentEntryFormProvider } from "./ContentEntryFormProvider";
+export const ContentEntryFormPreview = makeDecoratable("ContentEntryFormPreview", props => {
+  const {
+    contentModel
+  } = props;
+  const formRenderer = useFormRenderer(contentModel);
+  return /*#__PURE__*/React.createElement(ContentEntryFormProvider, {
+    entry: {},
+    model: contentModel,
+    persistEntry: entry => Promise.resolve({
+      entry
+    }),
+    confirmNavigationIfDirty: false
+  }, /*#__PURE__*/React.createElement(ModelProvider, {
+    model: contentModel
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-h-calc(100vh-260px) wby-overflow-auto",
+    "data-testid": "cms-content-form"
+  }, formRenderer ? /*#__PURE__*/React.createElement(CustomLayout, {
+    model: contentModel,
+    formRenderer: formRenderer
+  }) : /*#__PURE__*/React.createElement(DefaultLayout, {
+    model: contentModel
+  }))));
 });
-export var ContentEntryFormPreview = function ContentEntryFormPreview(props) {
-  var contentModel = props.contentModel;
-  var formRenderer = plugins.byType("cms-content-form-renderer").find(function (pl) {
-    return pl.modelId === contentModel.modelId;
-  });
-  var renderCustomLayout = useCallback(function (formRenderProps) {
-    var fields = contentModel.fields.reduce(function (acc, field) {
-      acc[field.fieldId] = /*#__PURE__*/React.createElement(RenderFieldElement, {
-        field: field,
-        Bind: formRenderProps.Bind,
-        contentModel: contentModel
-      });
-      return acc;
-    }, {});
-    return formRenderer.render(_objectSpread(_objectSpread({}, formRenderProps), {}, {
-      contentModel: contentModel,
-      fields: fields
-    }));
-  }, [formRenderer, contentModel.fields]);
-  return /*#__PURE__*/React.createElement(Form, null, function (formProps) {
-    return /*#__PURE__*/React.createElement(FormWrapper, {
-      "data-testid": "cms-content-form"
-    }, formRenderer ? renderCustomLayout(formProps) : /*#__PURE__*/React.createElement(Fields, Object.assign({
-      contentModel: contentModel,
-      fields: contentModel.fields,
-      layout: contentModel.layout
-    }, formProps)));
-  });
-};
+
+//# sourceMappingURL=ContentEntryFormPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","ModelProvider","useFormRenderer","CustomLayout","DefaultLayout","ContentEntryFormProvider","ContentEntryFormPreview","props","contentModel","formRenderer","createElement","entry","model","persistEntry","Promise","resolve","confirmNavigationIfDirty","className"],"sources":["ContentEntryFormPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsContentEntry, CmsEditorContentModel } from \"~/types\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider\";\nimport { useFormRenderer } from \"~/admin/components/ContentEntryForm/useFormRenderer\";\nimport { CustomLayout } from \"~/admin/components/ContentEntryForm/CustomLayout\";\nimport { DefaultLayout } from \"~/admin/components/ContentEntryForm/DefaultLayout\";\nimport { ContentEntryFormProvider } from \"./ContentEntryFormProvider\";\n\nexport interface ContentEntryFormPreviewProps {\n    contentModel: CmsEditorContentModel;\n}\n\nexport const ContentEntryFormPreview = makeDecoratable(\n    \"ContentEntryFormPreview\",\n    (props: ContentEntryFormPreviewProps) => {\n        const { contentModel } = props;\n\n        const formRenderer = useFormRenderer(contentModel);\n\n        return (\n            <ContentEntryFormProvider\n                entry={{}}\n                model={contentModel}\n                persistEntry={entry => Promise.resolve({ entry } as { entry: CmsContentEntry })}\n                confirmNavigationIfDirty={false}\n            >\n                <ModelProvider model={contentModel}>\n                    <div\n                        className={\"wby-h-calc(100vh-260px) wby-overflow-auto\"}\n                        data-testid={\"cms-content-form\"}\n                    >\n                        {formRenderer ? (\n                            <CustomLayout model={contentModel} formRenderer={formRenderer} />\n                        ) : (\n                            <DefaultLayout model={contentModel} />\n                        )}\n                    </div>\n                </ModelProvider>\n            </ContentEntryFormProvider>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,wBAAwB;AAMjC,OAAO,MAAMC,uBAAuB,GAAGN,eAAe,CAClD,yBAAyB,EACxBO,KAAmC,IAAK;EACrC,MAAM;IAAEC;EAAa,CAAC,GAAGD,KAAK;EAE9B,MAAME,YAAY,GAAGP,eAAe,CAACM,YAAY,CAAC;EAElD,oBACIT,KAAA,CAAAW,aAAA,CAACL,wBAAwB;IACrBM,KAAK,EAAE,CAAC,CAAE;IACVC,KAAK,EAAEJ,YAAa;IACpBK,YAAY,EAAEF,KAAK,IAAIG,OAAO,CAACC,OAAO,CAAC;MAAEJ;IAAM,CAA+B,CAAE;IAChFK,wBAAwB,EAAE;EAAM,gBAEhCjB,KAAA,CAAAW,aAAA,CAACT,aAAa;IAACW,KAAK,EAAEJ;EAAa,gBAC/BT,KAAA,CAAAW,aAAA;IACIO,SAAS,EAAE,2CAA4C;IACvD,eAAa;EAAmB,GAE/BR,YAAY,gBACTV,KAAA,CAAAW,aAAA,CAACP,YAAY;IAACS,KAAK,EAAEJ,YAAa;IAACC,YAAY,EAAEA;EAAa,CAAE,CAAC,gBAEjEV,KAAA,CAAAW,aAAA,CAACN,aAAa;IAACQ,KAAK,EAAEJ;EAAa,CAAE,CAExC,CACM,CACO,CAAC;AAEnC,CACJ,CAAC","ignoreList":[]}

package/admin/components/ContentEntryForm/ContentEntryFormProvider.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import type { FormOnSubmit, FormValidation, FormInvalidFields } from "@webiny/form";
+import type { CmsContentEntry, CmsModel } from "@webiny/app-headless-cms-common/types";
+import type { CreateEntryResponse, UpdateEntryRevisionResponse } from "../../contexts/Cms";
+interface SaveEntryOptions {
+    skipValidators?: string[];
+    createNewRevision?: boolean;
+}
+export interface ContentEntryFormContext {
+    entry: Partial<CmsContentEntry>;
+    saveEntry: (options?: SaveEntryOptions) => Promise<CmsContentEntry | null>;
+    invalidFields: FormInvalidFields;
+}
+export declare const ContentEntryFormContext: React.Context<ContentEntryFormContext | undefined>;
+export interface SetSaveEntry {
+    (cb: ContentEntryFormContext["saveEntry"]): void;
+}
+export interface PersistEntry {
+    (entry: Partial<CmsContentEntry>, options?: SaveEntryOptions): Promise<CreateEntryResponse | UpdateEntryRevisionResponse>;
+}
+interface ContentEntryFormProviderProps {
+    entry: Partial<CmsContentEntry>;
+    model: CmsModel;
+    persistEntry: PersistEntry;
+    confirmNavigationIfDirty: boolean;
+    onChange?: FormOnSubmit<Partial<CmsContentEntry>>;
+    onInvalidFields?: (invalidFields: FormValidation) => void;
+    onAfterCreate?: (entry: CmsContentEntry) => void;
+    setSaveEntry?: SetSaveEntry;
+    children: React.ReactNode;
+}
+export declare const ContentEntryFormProvider: ({ model, entry, children, persistEntry, onChange, onInvalidFields, onAfterCreate, setSaveEntry, confirmNavigationIfDirty }: ContentEntryFormProviderProps) => React.JSX.Element;
+export {};

package/admin/components/ContentEntryForm/ContentEntryFormProvider.js

@@ -0,0 +1,114 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import pick from "lodash/pick";
+import { Prompt } from "@webiny/react-router";
+import { Form } from "@webiny/form";
+import { prepareFormData } from "@webiny/app-headless-cms-common";
+import { CompositionScope, useSnackbar } from "@webiny/app-admin";
+const promptMessage = "There are some unsaved changes! Are you sure you want to navigate away and discard all changes?";
+export const ContentEntryFormContext = /*#__PURE__*/React.createContext(undefined);
+const formValidationToMap = invalidFields => {
+  return Object.keys(invalidFields).reduce((acc, key) => ({
+    ...acc,
+    [key]: invalidFields[key].message || "Value is invalid."
+  }), {});
+};
+export const ContentEntryFormProvider = ({
+  model,
+  entry,
+  children,
+  persistEntry,
+  onChange,
+  onInvalidFields,
+  onAfterCreate,
+  setSaveEntry,
+  confirmNavigationIfDirty
+}) => {
+  const ref = useRef(null);
+  const [invalidFields, setInvalidFields] = useState({});
+  const {
+    showSnackbar
+  } = useSnackbar();
+  const saveOptionsRef = useRef({
+    skipValidators: undefined
+  });
+  const saveEntry = useCallback(async (options = {}) => {
+    saveOptionsRef.current.skipValidators = options.skipValidators;
+    return ref.current.submit(undefined, {
+      skipValidators: options.skipValidators
+    });
+  }, []);
+  const onFormSubmit = async data => {
+    const fieldsIds = model.fields.map(item => item.fieldId);
+    const formData = pick(data, [...fieldsIds]);
+    const gqlData = prepareFormData(formData, model.fields);
+    const isNewEntry = data.id === undefined;
+    const {
+      entry,
+      error
+    } = await persistEntry({
+      id: data.id,
+      ...gqlData
+    }, {
+      skipValidators: saveOptionsRef.current.skipValidators,
+      createNewRevision: data.meta?.locked
+    });
+    if (error) {
+      if (error.code === "VALIDATION_FAILED") {
+        const errors = error.data || [];
+        setInvalidFields(errors.reduce((acc, item) => ({
+          ...acc,
+          [item.fieldId]: item.error
+        }), {}));
+      }
+      showSnackbar(error.message);
+      return;
+    }
+    showSnackbar("Entry saved successfully!");
+    setInvalidFields({});
+    const isNewRevision = !isNewEntry && data.id !== entry.id;
+    if ((isNewEntry || isNewRevision) && onAfterCreate) {
+      // We need a timeout to let the Prompt component update.
+      await new Promise(resolve => {
+        setTimeout(() => {
+          onAfterCreate(entry);
+          resolve();
+        }, 50);
+      });
+    }
+    return entry;
+  };
+  useEffect(() => {
+    if (typeof setSaveEntry === "function") {
+      setSaveEntry(saveEntry);
+    }
+  }, [setSaveEntry]);
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: onFormSubmit,
+    onChange: onChange,
+    data: entry,
+    ref: ref,
+    validateOnFirstSubmit: true,
+    invalidFields: invalidFields,
+    onInvalid: invalidFields => {
+      setInvalidFields(formValidationToMap(invalidFields));
+      onInvalidFields && onInvalidFields(invalidFields);
+      showSnackbar("Some fields did not pass the validation. Please check the form.");
+    }
+  }, formProps => {
+    const context = {
+      entry: formProps.data,
+      saveEntry,
+      invalidFields
+    };
+    return /*#__PURE__*/React.createElement(ContentEntryFormContext.Provider, {
+      value: context
+    }, confirmNavigationIfDirty ? /*#__PURE__*/React.createElement(CompositionScope, {
+      name: "cms.contentEntryForm"
+    }, /*#__PURE__*/React.createElement(Prompt, {
+      when: !formProps.form.isPristine,
+      message: promptMessage
+    })) : null, children);
+  });
+};
+
+//# sourceMappingURL=ContentEntryFormProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","pick","Prompt","Form","prepareFormData","CompositionScope","useSnackbar","promptMessage","ContentEntryFormContext","createContext","undefined","formValidationToMap","invalidFields","Object","keys","reduce","acc","key","message","ContentEntryFormProvider","model","entry","children","persistEntry","onChange","onInvalidFields","onAfterCreate","setSaveEntry","confirmNavigationIfDirty","ref","setInvalidFields","showSnackbar","saveOptionsRef","skipValidators","saveEntry","options","current","submit","onFormSubmit","data","fieldsIds","fields","map","item","fieldId","formData","gqlData","isNewEntry","id","error","createNewRevision","meta","locked","code","errors","isNewRevision","Promise","resolve","setTimeout","createElement","onSubmit","validateOnFirstSubmit","onInvalid","formProps","context","Provider","value","name","when","form","isPristine"],"sources":["ContentEntryFormProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport pick from \"lodash/pick\";\nimport { Prompt } from \"@webiny/react-router\";\nimport { Form } from \"@webiny/form\";\nimport { prepareFormData } from \"@webiny/app-headless-cms-common\";\nimport type { FormAPI, FormOnSubmit, FormValidation, FormInvalidFields } from \"@webiny/form\";\nimport type { CmsContentEntry, CmsModel } from \"@webiny/app-headless-cms-common/types\";\nimport { CompositionScope, useSnackbar } from \"@webiny/app-admin\";\nimport type { CreateEntryResponse, UpdateEntryRevisionResponse } from \"~/admin/contexts/Cms\";\n\nconst promptMessage =\n    \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\";\n\ninterface SaveEntryOptions {\n    skipValidators?: string[];\n    createNewRevision?: boolean;\n}\n\nexport interface ContentEntryFormContext {\n    entry: Partial<CmsContentEntry>;\n    saveEntry: (options?: SaveEntryOptions) => Promise<CmsContentEntry | null>;\n    invalidFields: FormInvalidFields;\n}\n\nexport const ContentEntryFormContext = React.createContext<ContentEntryFormContext | undefined>(\n    undefined\n);\n\nexport interface SetSaveEntry {\n    (cb: ContentEntryFormContext[\"saveEntry\"]): void;\n}\n\nexport interface PersistEntry {\n    (entry: Partial<CmsContentEntry>, options?: SaveEntryOptions): Promise<\n        CreateEntryResponse | UpdateEntryRevisionResponse\n    >;\n}\n\ninterface ContentEntryFormProviderProps {\n    entry: Partial<CmsContentEntry>;\n    model: CmsModel;\n    persistEntry: PersistEntry;\n    confirmNavigationIfDirty: boolean;\n    onChange?: FormOnSubmit<Partial<CmsContentEntry>>;\n    onInvalidFields?: (invalidFields: FormValidation) => void;\n    onAfterCreate?: (entry: CmsContentEntry) => void;\n    setSaveEntry?: SetSaveEntry;\n    children: React.ReactNode;\n}\n\ninterface InvalidFieldError {\n    fieldId: string;\n    error: string;\n}\n\nconst formValidationToMap = (invalidFields: FormValidation): FormInvalidFields => {\n    return Object.keys(invalidFields).reduce(\n        (acc, key) => ({ ...acc, [key]: invalidFields[key].message || \"Value is invalid.\" }),\n        {} as FormInvalidFields\n    );\n};\n\nexport const ContentEntryFormProvider = ({\n    model,\n    entry,\n    children,\n    persistEntry,\n    onChange,\n    onInvalidFields,\n    onAfterCreate,\n    setSaveEntry,\n    confirmNavigationIfDirty\n}: ContentEntryFormProviderProps) => {\n    const ref = useRef<FormAPI<CmsContentEntry> | null>(null);\n    const [invalidFields, setInvalidFields] = useState<FormInvalidFields>({});\n    const { showSnackbar } = useSnackbar();\n    const saveOptionsRef = useRef<SaveEntryOptions>({ skipValidators: undefined });\n\n    const saveEntry = useCallback(async (options: SaveEntryOptions = {}) => {\n        saveOptionsRef.current.skipValidators = options.skipValidators;\n\n        return ref.current!.submit(undefined, {\n            skipValidators: options.skipValidators\n        }) as unknown as Promise<CmsContentEntry | null>;\n    }, []);\n\n    const onFormSubmit: FormOnSubmit<CmsContentEntry> = async data => {\n        const fieldsIds = model.fields.map(item => item.fieldId);\n        const formData = pick(data, [...fieldsIds]);\n\n        const gqlData = prepareFormData(formData, model.fields) as Partial<CmsContentEntry>;\n        const isNewEntry = data.id === undefined;\n\n        const { entry, error } = await persistEntry(\n            { id: data.id, ...gqlData },\n            {\n                skipValidators: saveOptionsRef.current.skipValidators,\n                createNewRevision: data.meta?.locked\n            }\n        );\n\n        if (error) {\n            if (error.code === \"VALIDATION_FAILED\") {\n                const errors: InvalidFieldError[] = error.data || [];\n\n                setInvalidFields(\n                    errors.reduce((acc, item) => ({ ...acc, [item.fieldId]: item.error }), {})\n                );\n            }\n            showSnackbar(error.message);\n\n            return;\n        }\n\n        showSnackbar(\"Entry saved successfully!\");\n        setInvalidFields({});\n\n        const isNewRevision = !isNewEntry && data.id !== entry.id;\n\n        if ((isNewEntry || isNewRevision) && onAfterCreate) {\n            // We need a timeout to let the Prompt component update.\n            await new Promise<void>(resolve => {\n                setTimeout(() => {\n                    onAfterCreate(entry);\n                    resolve();\n                }, 50);\n            });\n        }\n\n        return entry;\n    };\n\n    useEffect(() => {\n        if (typeof setSaveEntry === \"function\") {\n            setSaveEntry(saveEntry);\n        }\n    }, [setSaveEntry]);\n\n    return (\n        <Form<CmsContentEntry>\n            onSubmit={onFormSubmit}\n            onChange={onChange}\n            data={entry}\n            ref={ref}\n            validateOnFirstSubmit\n            invalidFields={invalidFields}\n            onInvalid={invalidFields => {\n                setInvalidFields(formValidationToMap(invalidFields));\n                onInvalidFields && onInvalidFields(invalidFields);\n                showSnackbar(\"Some fields did not pass the validation. Please check the form.\");\n            }}\n        >\n            {formProps => {\n                const context: ContentEntryFormContext = {\n                    entry: formProps.data,\n                    saveEntry,\n                    invalidFields\n                };\n                return (\n                    <ContentEntryFormContext.Provider value={context}>\n                        {confirmNavigationIfDirty ? (\n                            <CompositionScope name={\"cms.contentEntryForm\"}>\n                                <Prompt when={!formProps.form.isPristine} message={promptMessage} />\n                            </CompositionScope>\n                        ) : null}\n                        {children}\n                    </ContentEntryFormContext.Provider>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/components/ContentEntryForm/CustomLayout.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { CmsContentFormRendererPlugin, CmsModel } from "@webiny/app-headless-cms-common/types";
+interface CustomLayoutProps {
+    model: CmsModel;
+    formRenderer: CmsContentFormRendererPlugin;
+}
+export declare const CustomLayout: ({ model, formRenderer }: CustomLayoutProps) => React.JSX.Element;
+export {};

package/admin/components/ContentEntryForm/CustomLayout.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Bind, useForm } from "@webiny/form";
+import { FieldElement } from "./FieldElement";
+export const CustomLayout = ({
+  model,
+  formRenderer
+}) => {
+  const {
+    data
+  } = useForm();
+  const fields = model.fields.reduce((acc, field) => {
+    acc[field.fieldId] = /*#__PURE__*/React.createElement(FieldElement, {
+      field: field
+      /**
+       * TODO @ts-refactor
+       * Figure out type for Bind.
+       */
+      // @ts-expect-error
+      ,
+      Bind: Bind,
+      contentModel: model
+    });
+    return acc;
+  }, {});
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formRenderer.render({
+    data,
+    contentModel: model,
+    fields,
+    /**
+     * TODO @ts-refactor
+     * Figure out type for Bind.
+     */
+    // @ts-expect-error
+    Bind
+  }));
+};
+
+//# sourceMappingURL=CustomLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Bind","useForm","FieldElement","CustomLayout","model","formRenderer","data","fields","reduce","acc","field","fieldId","createElement","contentModel","Fragment","render"],"sources":["CustomLayout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind, useForm } from \"@webiny/form\";\nimport type { CmsContentFormRendererPlugin, CmsModel } from \"@webiny/app-headless-cms-common/types\";\nimport { FieldElement } from \"~/admin/components/ContentEntryForm/FieldElement\";\n\ninterface CustomLayoutProps {\n    model: CmsModel;\n    formRenderer: CmsContentFormRendererPlugin;\n}\n\nexport const CustomLayout = ({ model, formRenderer }: CustomLayoutProps) => {\n    const { data } = useForm();\n\n    const fields = model.fields.reduce((acc, field) => {\n        acc[field.fieldId] = (\n            <FieldElement\n                field={field}\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                // @ts-expect-error\n                Bind={Bind}\n                contentModel={model}\n            />\n        );\n\n        return acc;\n    }, {} as Record<string, React.ReactElement>);\n\n    return (\n        <>\n            {formRenderer.render({\n                data,\n                contentModel: model,\n                fields,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                // @ts-expect-error\n                Bind\n            })}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,OAAO,QAAQ,cAAc;AAE5C,SAASC,YAAY;AAOrB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAgC,CAAC,KAAK;EACxE,MAAM;IAAEC;EAAK,CAAC,GAAGL,OAAO,CAAC,CAAC;EAE1B,MAAMM,MAAM,GAAGH,KAAK,CAACG,MAAM,CAACC,MAAM,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IAC/CD,GAAG,CAACC,KAAK,CAACC,OAAO,CAAC,gBACdZ,KAAA,CAAAa,aAAA,CAACV,YAAY;MACTQ,KAAK,EAAEA;MACP;AAChB;AACA;AACA;MACgB;MAAA;MACAV,IAAI,EAAEA,IAAK;MACXa,YAAY,EAAET;IAAM,CACvB,CACJ;IAED,OAAOK,GAAG;EACd,CAAC,EAAE,CAAC,CAAuC,CAAC;EAE5C,oBACIV,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QACKT,YAAY,CAACU,MAAM,CAAC;IACjBT,IAAI;IACJO,YAAY,EAAET,KAAK;IACnBG,MAAM;IACN;AAChB;AACA;AACA;IACgB;IACAP;EACJ,CAAC,CACH,CAAC;AAEX,CAAC","ignoreList":[]}

package/admin/components/ContentEntryForm/DefaultLayout.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { CmsModel } from "@webiny/app-headless-cms-common/types";
+export interface DefaultLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    model: CmsModel;
+}
+export declare const DefaultLayout: (({ model, ...props }: DefaultLayoutProps) => React.JSX.Element) & {
+    original: ({ model, ...props }: DefaultLayoutProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ model, ...props }: DefaultLayoutProps) => React.JSX.Element) & {
+        original: ({ model, ...props }: DefaultLayoutProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ model, ...props }: DefaultLayoutProps) => React.JSX.Element) & {
+        original: ({ model, ...props }: DefaultLayoutProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

package/admin/components/ContentEntryForm/DefaultLayout.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/app-admin";
+import { Bind } from "@webiny/form";
+import { Fields } from "./Fields";
+export const DefaultLayout = makeDecoratable("DefaultLayout", ({
+  model,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(Fields, {
+    contentModel: model,
+    fields: model.fields || [],
+    layout: model.layout || []
+    /**
+     * TODO @ts-refactor
+     * Figure out type for Bind.
+     */
+    // @ts-expect-error
+    ,
+    Bind: Bind
+  }));
+});
+
+//# sourceMappingURL=DefaultLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","Bind","Fields","DefaultLayout","model","props","createElement","contentModel","fields","layout"],"sources":["DefaultLayout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Bind } from \"@webiny/form\";\nimport type { CmsModel } from \"@webiny/app-headless-cms-common/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\n\nexport interface DefaultLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n    model: CmsModel;\n}\n\nexport const DefaultLayout = makeDecoratable(\n    \"DefaultLayout\",\n    ({ model, ...props }: DefaultLayoutProps) => {\n        return (\n            <div {...props}>\n                <Fields\n                    contentModel={model}\n                    fields={model.fields || []}\n                    layout={model.layout || []}\n                    /**\n                     * TODO @ts-refactor\n                     * Figure out type for Bind.\n                     */\n                    // @ts-expect-error\n                    Bind={Bind}\n                />\n            </div>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,MAAM;AAMf,OAAO,MAAMC,aAAa,GAAGH,eAAe,CACxC,eAAe,EACf,CAAC;EAAEI,KAAK;EAAE,GAAGC;AAA0B,CAAC,KAAK;EACzC,oBACIN,KAAA,CAAAO,aAAA,QAASD,KAAK,eACVN,KAAA,CAAAO,aAAA,CAACJ,MAAM;IACHK,YAAY,EAAEH,KAAM;IACpBI,MAAM,EAAEJ,KAAK,CAACI,MAAM,IAAI,EAAG;IAC3BC,MAAM,EAAEL,KAAK,CAACK,MAAM,IAAI;IACxB;AACpB;AACA;AACA;IACoB;IAAA;IACAR,IAAI,EAAEA;EAAK,CACd,CACA,CAAC;AAEd,CACJ,CAAC","ignoreList":[]}

package/admin/components/ContentEntryForm/FieldElement.d.ts

@@ -0,0 +1 @@
+export * from "@webiny/app-headless-cms-common/Fields/FieldElement";

package/admin/components/ContentEntryForm/FieldElement.js

@@ -0,0 +1,3 @@
+export * from "@webiny/app-headless-cms-common/Fields/FieldElement";
+
+//# sourceMappingURL=FieldElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["FieldElement.tsx"],"sourcesContent":["export * from \"@webiny/app-headless-cms-common/Fields/FieldElement\";\n"],"mappings":"AAAA,cAAc,qDAAqD","ignoreList":[]}

package/admin/components/ContentEntryForm/Fields.d.ts

@@ -1,12 +1 @@
-/// <reference types="react" />
-import { BindComponent } from "@webiny/form";
-import { CmsEditorContentModel, CmsEditorField, CmsEditorFieldsLayout } from "../../../types";
-interface Props {
-    Bind: BindComponent;
-    contentModel: CmsEditorContentModel;
-    fields: CmsEditorField[];
-    layout: CmsEditorFieldsLayout;
-    gridClassName?: string;
-}
-export declare const Fields: ({ Bind, fields, layout, contentModel, gridClassName }: Props) => JSX.Element;
-export {};
+export * from "@webiny/app-headless-cms-common/Fields/Fields";

package/admin/components/ContentEntryForm/Fields.js

@@ -1,33 +1,3 @@
-import React from "react";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import RenderFieldElement from "./RenderFieldElement";
+export * from "@webiny/app-headless-cms-common/Fields/Fields";
 
-var getFieldById = function getFieldById(fields, id) {
-  return fields.find(function (field) {
-    return field.id === id;
-  });
-};
-
-export var Fields = function Fields(_ref) {
-  var Bind = _ref.Bind,
-      fields = _ref.fields,
-      layout = _ref.layout,
-      contentModel = _ref.contentModel,
-      gridClassName = _ref.gridClassName;
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: gridClassName
-  }, layout.map(function (row, rowIndex) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: rowIndex
-    }, row.map(function (fieldId) {
-      return /*#__PURE__*/React.createElement(Cell, {
-        span: Math.floor(12 / row.length),
-        key: fieldId
-      }, /*#__PURE__*/React.createElement(RenderFieldElement, {
-        field: getFieldById(fields, fieldId),
-        Bind: Bind,
-        contentModel: contentModel
-      }));
-    }));
-  }));
-};
+//# sourceMappingURL=Fields.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["Fields.tsx"],"sourcesContent":["export * from \"@webiny/app-headless-cms-common/Fields/Fields\";\n"],"mappings":"AAAA,cAAc,+CAA+C","ignoreList":[]}

package/admin/components/ContentEntryForm/Header/ContentFormOptionsMenu/ContentFormOptionsMenu.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ContentFormOptionsMenu: () => React.JSX.Element;