@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

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

@@ -0,0 +1 @@
+{"version":3,"names":["convertDefaultValue","field","value","type","Boolean","Number","useEntry","entryFromProps","useState","entry","setEntry","useCms","onEntryRevisionPublish","useEffect","id","next","params","publishRes","meta","useContentEntryForm","useContentEntry","listQueryVariables","useModel","model","useRouter","history","client","useApolloClient","useSnackbar","showSnackbar","invalidFields","setInvalidFields","loading","setLoading","renderPlugins","useMemo","plugins","byType","goToRevision","useCallback","push","modelId","encodeURIComponent","CREATE_CONTENT","createCreateMutation","UPDATE_CONTENT","createUpdateMutation","CREATE_CONTENT_FROM","createCreateFromMutation","useMutation","createMutation","updateMutation","createFromMutation","setInvalidFieldValues","errors","Array","isArray","values","reduce","acc","er","fieldId","error","resetInvalidFieldValues","createContent","formData","form","variables","data","fetchPolicy","getFetchPolicy","response","content","message","addEntryToListCache","GQLCache","cache","name","onSubmit","updateContent","revision","createContentFrom","newRevision","updateLatestRevisionInListCache","addRevisionToRevisionsCache","onChange","fieldsIds","fields","map","item","pick","gqlData","prepareFormData","isLocked","locked","defaultValues","settings","multipleValues","defaultValue","undefined","predefinedValues","enabled","selectedValue","find","selected","filter"],"sources":["useContentEntryForm.ts"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useMemo, useState, useEffect } from \"react\";\nimport pick from \"lodash/pick\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { FormOnSubmit } from \"@webiny/form\";\nimport {\n    createCreateFromMutation,\n    createCreateMutation,\n    createUpdateMutation,\n    CmsEntryCreateMutationResponse,\n    CmsEntryCreateMutationVariables,\n    CmsEntryUpdateMutationResponse,\n    CmsEntryUpdateMutationVariables,\n    CmsEntryCreateFromMutationResponse,\n    CmsEntryCreateFromMutationVariables\n} from \"~/admin/graphql/contentEntries\";\nimport { useApolloClient, useCms, useModel, useMutation } from \"~/admin/hooks\";\nimport * as GQLCache from \"~/admin/views/contentEntries/ContentEntry/cache\";\nimport { prepareFormData } from \"~/admin/views/contentEntries/ContentEntry/prepareFormData\";\nimport { CmsEditorContentEntry, CmsModelField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { useContentEntry } from \"~/admin/views/contentEntries/hooks/useContentEntry\";\nimport { plugins } from \"@webiny/plugins\";\nimport { getFetchPolicy } from \"~/utils/getFetchPolicy\";\n\n/**\n * Used for some fields to convert their values.\n */\nconst convertDefaultValue = (field: CmsModelField, value: any): string | number | boolean => {\n    switch (field.type) {\n        case \"boolean\":\n            return Boolean(value);\n        case \"number\":\n            return Number(value);\n        default:\n            return value;\n    }\n};\n\ninterface InvalidFieldError {\n    fieldId: string;\n    error: string;\n}\n\ninterface UseContentEntryForm {\n    data: Record<string, any>;\n    loading: boolean;\n    setLoading: Dispatch<SetStateAction<boolean>>;\n    onChange: FormOnSubmit;\n    onSubmit: FormOnSubmit;\n    invalidFields: Record<string, string>;\n    renderPlugins: CmsEditorFieldRendererPlugin[];\n}\n\nexport interface UseContentEntryFormParams {\n    entry: Partial<CmsEditorContentEntry>;\n    onChange?: FormOnSubmit;\n    onSubmit?: FormOnSubmit;\n    addEntryToListCache: boolean;\n}\n\nfunction useEntry(entryFromProps: Partial<CmsEditorContentEntry>) {\n    // We need to keep track of the entry locally\n    const [entry, setEntry] = useState(entryFromProps);\n    const { onEntryRevisionPublish } = useCms();\n\n    useEffect(() => {\n        setEntry(entryFromProps);\n\n        if (!entryFromProps.id) {\n            return;\n        }\n\n        return onEntryRevisionPublish(next => async params => {\n            const publishRes = await next(params);\n            setEntry(entry => {\n                return { ...entry, meta: publishRes?.entry?.meta || {} };\n            });\n            return publishRes;\n        });\n    }, [entryFromProps, entry.id]);\n\n    return entry;\n}\n\nexport function useContentEntryForm(params: UseContentEntryFormParams): UseContentEntryForm {\n    const { listQueryVariables } = useContentEntry();\n    const { model } = useModel();\n    const { history } = useRouter();\n    const client = useApolloClient();\n    const { showSnackbar } = useSnackbar();\n    const [invalidFields, setInvalidFields] = useState<Record<string, string>>({});\n    const [loading, setLoading] = useState(false);\n    const entry = useEntry(params.entry);\n\n    const renderPlugins = useMemo(\n        () => plugins.byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\"),\n        []\n    );\n\n    const goToRevision = useCallback(id => {\n        history.push(`/cms/content-entries/${model.modelId}?id=${encodeURIComponent(id)}`);\n    }, []);\n\n    const { CREATE_CONTENT, UPDATE_CONTENT, CREATE_CONTENT_FROM } = useMemo(() => {\n        return {\n            // LIST_CONTENT: createListQuery(model),\n            CREATE_CONTENT: createCreateMutation(model),\n            UPDATE_CONTENT: createUpdateMutation(model),\n            CREATE_CONTENT_FROM: createCreateFromMutation(model)\n        };\n    }, [model.modelId]);\n\n    const [createMutation] = useMutation<\n        CmsEntryCreateMutationResponse,\n        CmsEntryCreateMutationVariables\n    >(CREATE_CONTENT);\n    const [updateMutation] = useMutation<\n        CmsEntryUpdateMutationResponse,\n        CmsEntryUpdateMutationVariables\n    >(UPDATE_CONTENT);\n    const [createFromMutation] = useMutation<\n        CmsEntryCreateFromMutationResponse,\n        CmsEntryCreateFromMutationVariables\n    >(CREATE_CONTENT_FROM);\n\n    /**\n     * Note that when passing `error.data` variable we cast as InvalidFieldError[] because we know it is so.\n     */\n    const setInvalidFieldValues = (errors?: InvalidFieldError[]): void => {\n        if (Array.isArray(errors) === false || !errors) {\n            return;\n        }\n        const values = (errors || []).reduce((acc, er) => {\n            acc[er.fieldId] = er.error;\n            return acc;\n        }, {} as Record<string, string>);\n        setInvalidFields(() => values);\n    };\n\n    const resetInvalidFieldValues = (): void => {\n        setInvalidFields(() => ({}));\n    };\n\n    const createContent: FormOnSubmit = useCallback(\n        async (formData, form) => {\n            setLoading(true);\n            const response = await createMutation({\n                variables: { data: formData },\n                fetchPolicy: getFetchPolicy(model)\n            });\n\n            setLoading(false);\n\n            // Finalize \"create\" process\n            if (!response.data) {\n                showSnackbar(\"Missing response data in Create Entry.\");\n                return;\n            }\n            const { data: entry, error } = response.data.content || {};\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return;\n            } else if (!entry) {\n                showSnackbar(\"Missing entry data in Create Entry Response.\");\n                return;\n            }\n            resetInvalidFieldValues();\n            if (params.addEntryToListCache) {\n                GQLCache.addEntryToListCache(model, client.cache, entry, listQueryVariables);\n            }\n\n            showSnackbar(`${model.name} entry created successfully!`);\n            if (typeof params.onSubmit === \"function\") {\n                params.onSubmit(entry, form);\n            } else {\n                goToRevision(entry.id);\n            }\n            return entry;\n        },\n        [model.modelId, listQueryVariables, params.onSubmit, params.addEntryToListCache]\n    );\n\n    const updateContent = useCallback(\n        async (revision, data) => {\n            setLoading(true);\n            const response = await updateMutation({\n                variables: { revision, data },\n                fetchPolicy: getFetchPolicy(model)\n            });\n            setLoading(false);\n            if (!response.data) {\n                showSnackbar(\"Missing response data on Update Entry Response.\");\n                return;\n            }\n\n            const { error } = response.data.content;\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return null;\n            }\n\n            resetInvalidFieldValues();\n            showSnackbar(\"Content saved successfully.\");\n            const { data: entry } = response.data.content;\n            return entry;\n        },\n        [model.modelId]\n    );\n\n    const createContentFrom = useCallback(\n        async (revision: string, formData: Record<string, any>) => {\n            setLoading(true);\n            const response = await createFromMutation({\n                variables: { revision, data: formData },\n                fetchPolicy: getFetchPolicy(model)\n            });\n\n            if (!response.data) {\n                showSnackbar(\"Missing data in update callback on Create From Entry Response.\");\n                return;\n            }\n            const { data: newRevision, error } = response.data.content;\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return;\n            } else if (!newRevision) {\n                showSnackbar(\"Missing entry data in update callback on Create From Entry.\");\n                return;\n            }\n            resetInvalidFieldValues();\n            GQLCache.updateLatestRevisionInListCache(\n                model,\n                client.cache,\n                newRevision,\n                listQueryVariables\n            );\n            GQLCache.addRevisionToRevisionsCache(model, client.cache, newRevision);\n\n            showSnackbar(\"A new revision was created!\");\n            goToRevision(newRevision.id);\n\n            setLoading(false);\n\n            return newRevision;\n        },\n        [model.modelId, listQueryVariables]\n    );\n\n    const onChange: FormOnSubmit = (data, form) => {\n        if (!params.onChange) {\n            return;\n        }\n        return params.onChange(data, form);\n    };\n\n    const onSubmit: FormOnSubmit = async (data, form) => {\n        const fieldsIds = model.fields.map(item => item.fieldId);\n        const formData = pick(data, [...fieldsIds]);\n\n        const gqlData = prepareFormData(formData, model.fields);\n        if (!entry.id) {\n            return createContent(gqlData, form);\n        }\n\n        const { meta } = entry;\n        const { locked: isLocked } = meta || {};\n\n        if (!isLocked) {\n            return updateContent(entry.id, gqlData);\n        }\n\n        return createContentFrom(entry.id, gqlData);\n    };\n\n    const defaultValues = useMemo((): Record<string, any> => {\n        const values: Record<string, any> = {};\n        /**\n         * Assign the default values:\n         * * check the settings.defaultValue\n         * * check the predefinedValues for selected value\n         */\n        for (const field of model.fields) {\n            /**\n             * When checking if defaultValue is set in settings, we do the undefined check because it can be null, 0, empty string, false, etc...\n             */\n            const { settings, multipleValues = false } = field;\n            if (settings && settings.defaultValue !== undefined) {\n                /**\n                 * Special type of field is the boolean one.\n                 * We MUST set true/false for default value.\n                 */\n                values[field.fieldId] = convertDefaultValue(field, settings.defaultValue);\n                continue;\n            }\n            /**\n             * No point in going further if predefined values are not enabled.\n             */\n            const { predefinedValues } = field;\n            if (\n                !predefinedValues ||\n                !predefinedValues.enabled ||\n                Array.isArray(predefinedValues.values) === false\n            ) {\n                continue;\n            }\n            /**\n             * When field is not a multiple values one, we find the first possible default selected value and set it as field value.\n             */\n            if (!multipleValues) {\n                const selectedValue = predefinedValues.values.find(({ selected }) => {\n                    return !!selected;\n                });\n                if (selectedValue) {\n                    values[field.fieldId] = convertDefaultValue(field, selectedValue.value);\n                }\n                continue;\n            }\n            /**\n             *\n             */\n            values[field.fieldId] = predefinedValues.values\n                .filter(({ selected }) => !!selected)\n                .map(({ value }) => {\n                    return convertDefaultValue(field, value);\n                });\n        }\n        return values;\n    }, [model.modelId]);\n\n    return {\n        /**\n         * If entry is not set or `entry.id` does not exist, it means it's a new entry, so fetch default values.\n         */\n        data: entry && entry.id ? entry : defaultValues,\n        loading,\n        setLoading,\n        onChange,\n        onSubmit,\n        invalidFields,\n        renderPlugins\n    };\n}\n"],"mappings":"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"}

package/admin/components/ContentEntryForm/useRenderPlugins.js

@@ -1,7 +1,13 @@
-import { plugins } from "@webiny/plugins";
-import { useMemo } from "react";
-export function useRenderPlugins() {
-  return useMemo(function () {
-    return plugins.byType("cms-editor-field-renderer");
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRenderPlugins = useRenderPlugins;
+var _plugins = require("@webiny/plugins");
+var _react = require("react");
+function useRenderPlugins() {
+  return (0, _react.useMemo)(function () {
+    return _plugins.plugins.byType("cms-editor-field-renderer");
   }, []);
 }

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

@@ -0,0 +1 @@
+{"version":3,"names":["useRenderPlugins","useMemo","plugins","byType"],"sources":["useRenderPlugins.ts"],"sourcesContent":["import { plugins } from \"@webiny/plugins\";\nimport { useMemo } from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\n\nexport function useRenderPlugins() {\n    return useMemo(\n        () => plugins.byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\"),\n        []\n    );\n}\n"],"mappings":";;;;;;AAAA;AACA;AAGO,SAASA,gBAAgB,GAAG;EAC/B,OAAO,IAAAC,cAAO,EACV;IAAA,OAAMC,gBAAO,CAACC,MAAM,CAA+B,2BAA2B,CAAC;EAAA,GAC/E,EAAE,CACL;AACL"}

package/admin/components/ContentModelEditor/ContentModelEditorProvider.d.ts

@@ -0,0 +1,40 @@
+import React, { MutableRefObject } from "react";
+import { ApolloClient } from "apollo-client";
+import { GetCmsModelQueryResponse, UpdateCmsModelMutationResponse } from "../../graphql/contentModels";
+import { CmsModel } from "../../../types";
+import { FetchResult } from "apollo-link";
+import { TabsImperativeApi } from "@webiny/ui/Tabs";
+export interface ContentModelEditorProviderContext {
+    apolloClient: ApolloClient<any>;
+    data: CmsModel;
+    contentModel: CmsModel;
+    isPristine: boolean;
+    getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;
+    saveContentModel: (data?: CmsModel) => Promise<UpdateCmsModelMutationResponse["updateContentModel"]>;
+    setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;
+    tabsRef: MutableRefObject<TabsImperativeApi | undefined>;
+    activeTabIndex: number;
+    setActiveTabIndex: (index: number) => void;
+}
+export declare const contentModelEditorContext: React.Context<ContentModelEditorProviderContext | undefined>;
+interface State {
+    modelId: string | null;
+    isPristine: boolean;
+    data: CmsModel;
+    activeTabIndex: number;
+}
+interface Action {
+    data: Partial<State> | Partial<CmsModel>;
+    type: "state" | "data";
+}
+interface Reducer {
+    (prev: State, action: Action): State;
+}
+export declare const contentModelEditorReducer: Reducer;
+interface ContentModelEditorProviderProps {
+    apolloClient: ApolloClient<any>;
+    modelId?: string;
+    children: React.ReactElement;
+}
+export declare const ContentModelEditorProvider: React.FC<ContentModelEditorProviderProps>;
+export {};

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js

@@ -0,0 +1,260 @@
+"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.contentModelEditorReducer = exports.contentModelEditorContext = exports.ContentModelEditorProvider = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _get2 = _interopRequireDefault(require("lodash/get"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
+var _reactRouter = require("@webiny/react-router");
+var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
+var _contentModels = require("../../graphql/contentModels");
+var _viewsGraphql = require("../../viewsGraphql");
+var _ModelProvider = require("../ModelProvider");
+var contentModelEditorContext = /*#__PURE__*/_react.default.createContext(undefined);
+exports.contentModelEditorContext = contentModelEditorContext;
+var contentModelEditorReducer = function contentModelEditorReducer(prev, action) {
+  var data = action.data,
+    type = action.type;
+  switch (type) {
+    case "state":
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), data);
+    case "data":
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+        data: data
+      });
+    default:
+      return prev;
+  }
+};
+
+/**
+ * Cleanup is required because backend always expects string value in predefined values entries
+ */
+exports.contentModelEditorReducer = contentModelEditorReducer;
+var cleanupModelDataFields = function cleanupModelDataFields(fields) {
+  return fields.map(function (field) {
+    var predefinedValues = field.predefinedValues;
+    var _ref = predefinedValues || {},
+      _ref$enabled = _ref.enabled,
+      enabled = _ref$enabled === void 0 ? false : _ref$enabled,
+      _ref$values = _ref.values,
+      values = _ref$values === void 0 ? [] : _ref$values;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
+      predefinedValues: {
+        enabled: enabled,
+        values: values.map(function (_ref2) {
+          var label = _ref2.label,
+            value = _ref2.value,
+            selected = _ref2.selected;
+          return {
+            label: label,
+            selected: selected || false,
+            value: String(value)
+          };
+        })
+      }
+    });
+  });
+};
+var cleanupModelData = function cleanupModelData(data) {
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+    fields: cleanupModelDataFields(data.fields)
+  });
+};
+var ContentModelEditorProvider = function ContentModelEditorProvider(_ref3) {
+  var children = _ref3.children,
+    apolloClient = _ref3.apolloClient,
+    modelId = _ref3.modelId;
+  var _useReducer = (0, _react.useReducer)(contentModelEditorReducer, {
+      modelId: modelId || null,
+      isPristine: true,
+      data: null,
+      activeTabIndex: 0
+    }),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var tabsRef = (0, _react.useRef)();
+  var _useRouter = (0, _reactRouter.useRouter)(),
+    history = _useRouter.history;
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var setPristine = function setPristine(flag) {
+    dispatch({
+      type: "state",
+      data: {
+        isPristine: flag
+      }
+    });
+  };
+  var saveContentModel = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(data) {
+      var modelData, response;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!data) {
+              data = state.data;
+            }
+            modelData = (0, _pick.default)(data, ["group", "layout", "fields", "tags", "name", "settings", "description", "titleFieldId"]);
+            _context.next = 4;
+            return apolloClient.mutate({
+              mutation: _contentModels.UPDATE_CONTENT_MODEL,
+              variables: {
+                modelId: data.modelId,
+                data: cleanupModelData(modelData)
+              },
+              refetchQueries: [{
+                query: _viewsGraphql.LIST_MENU_CONTENT_GROUPS_MODELS
+              }]
+            });
+          case 4:
+            response = _context.sent;
+            setPristine(true);
+            if (!(!response.data || !response.data.updateContentModel)) {
+              _context.next = 8;
+              break;
+            }
+            return _context.abrupt("return", {
+              data: null,
+              error: null
+            });
+          case 8:
+            return _context.abrupt("return", response.data.updateContentModel);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function saveContentModel(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var setActiveTabIndex = (0, _react.useCallback)(function (activeTabIndex) {
+    dispatch({
+      type: "state",
+      data: {
+        activeTabIndex: activeTabIndex
+      }
+    });
+  }, []);
+
+  /**
+   * Set form data by providing a callback, which receives a fresh copy of data on which you can work on.
+   * Return new data once finished.
+   */
+  var setData = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(setter) {
+      var saveModel,
+        data,
+        _args2 = arguments;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            saveModel = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : false;
+            setPristine(false);
+            data = setter(state.data);
+            dispatch({
+              type: "data",
+              data: data
+            });
+            if (saveModel) {
+              _context2.next = 6;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 6:
+            _context2.next = 8;
+            return saveContentModel(data);
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function setData(_x2) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var getContentModel = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(modelId) {
+      var response, _get, data, error;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return apolloClient.query({
+              query: _contentModels.GET_CONTENT_MODEL,
+              variables: {
+                modelId: modelId
+              }
+            });
+          case 2:
+            response = _context3.sent;
+            _get = (0, _get2.default)(response, "data.getContentModel"), data = _get.data, error = _get.error;
+            if (!error) {
+              _context3.next = 6;
+              break;
+            }
+            throw new Error(error.message);
+          case 6:
+            _context3.next = 8;
+            return setData(function () {
+              return data;
+            }, false);
+          case 8:
+            setPristine(true);
+            return _context3.abrupt("return", response);
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function getContentModel(_x3) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  (0, _react.useEffect)(function () {
+    if (!modelId) {
+      return;
+    }
+    getContentModel(modelId).catch(function () {
+      history.push("/cms/content-models");
+      showSnackbar("Could not load content model with given ID.");
+    });
+  }, [modelId]);
+  var value = (0, _react.useMemo)(function () {
+    return {
+      // Keeping `data` for compatibility
+      data: state.data,
+      contentModel: state.data,
+      modelId: modelId,
+      apolloClient: apolloClient,
+      dispatch: dispatch,
+      isPristine: state.isPristine,
+      getContentModel: getContentModel,
+      saveContentModel: saveContentModel,
+      setData: setData,
+      tabsRef: tabsRef,
+      activeTabIndex: state.activeTabIndex,
+      setActiveTabIndex: setActiveTabIndex
+    };
+  }, [state, apolloClient]);
+  var Provider = contentModelEditorContext.Provider;
+  return /*#__PURE__*/_react.default.createElement(Provider, {
+    value: value
+  }, /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+    model: value.contentModel
+  }, children));
+};
+exports.ContentModelEditorProvider = ContentModelEditorProvider;

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["contentModelEditorContext","React","createContext","undefined","contentModelEditorReducer","prev","action","data","type","cleanupModelDataFields","fields","map","field","predefinedValues","enabled","values","label","value","selected","String","cleanupModelData","ContentModelEditorProvider","children","apolloClient","modelId","useReducer","isPristine","activeTabIndex","state","dispatch","tabsRef","useRef","useRouter","history","useSnackbar","showSnackbar","setPristine","flag","saveContentModel","modelData","pick","mutate","mutation","UPDATE_CONTENT_MODEL","variables","refetchQueries","query","LIST_MENU_CONTENT_GROUPS_MODELS","response","updateContentModel","error","setActiveTabIndex","useCallback","setData","setter","saveModel","getContentModel","GET_CONTENT_MODEL","get","Error","message","useEffect","catch","push","useMemo","contentModel","Provider"],"sources":["ContentModelEditorProvider.tsx"],"sourcesContent":["import React, {\n    MutableRefObject,\n    useCallback,\n    useEffect,\n    useMemo,\n    useReducer,\n    useRef\n} from \"react\";\nimport get from \"lodash/get\";\nimport pick from \"lodash/pick\";\nimport { ApolloClient } from \"apollo-client\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport {\n    GET_CONTENT_MODEL,\n    GetCmsModelQueryResponse,\n    GetCmsModelQueryVariables,\n    UPDATE_CONTENT_MODEL,\n    UpdateCmsModelMutationResponse,\n    UpdateCmsModelMutationVariables\n} from \"~/admin/graphql/contentModels\";\nimport { LIST_MENU_CONTENT_GROUPS_MODELS } from \"~/admin/viewsGraphql\";\nimport { CmsModelField, CmsModel } from \"~/types\";\nimport { FetchResult } from \"apollo-link\";\nimport { TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider\";\n\nexport interface ContentModelEditorProviderContext {\n    apolloClient: ApolloClient<any>;\n    data: CmsModel;\n    contentModel: CmsModel;\n    isPristine: boolean;\n    getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;\n    saveContentModel: (\n        data?: CmsModel\n    ) => Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]>;\n    setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;\n    tabsRef: MutableRefObject<TabsImperativeApi | undefined>;\n    activeTabIndex: number;\n    setActiveTabIndex: (index: number) => void;\n}\n\nexport const contentModelEditorContext = React.createContext<\n    ContentModelEditorProviderContext | undefined\n>(undefined);\n\ntype PickedCmsModel = Pick<\n    CmsModel,\n    \"layout\" | \"fields\" | \"name\" | \"settings\" | \"description\" | \"titleFieldId\" | \"group\"\n>;\ninterface State {\n    modelId: string | null;\n    isPristine: boolean;\n    data: CmsModel;\n    activeTabIndex: number;\n}\ninterface Action {\n    data: Partial<State> | Partial<CmsModel>;\n    type: \"state\" | \"data\";\n}\ninterface Reducer {\n    (prev: State, action: Action): State;\n}\nexport const contentModelEditorReducer: Reducer = (prev: State, action: Action): State => {\n    const { data, type } = action;\n    switch (type) {\n        case \"state\":\n            return { ...prev, ...data };\n\n        case \"data\":\n            return { ...prev, data: data as CmsModel };\n        default:\n            return prev;\n    }\n};\n\n/**\n * Cleanup is required because backend always expects string value in predefined values entries\n */\nconst cleanupModelDataFields = (fields: CmsModelField[]): CmsModelField[] => {\n    return fields.map(field => {\n        const { predefinedValues } = field;\n        const { enabled = false, values = [] } = predefinedValues || {};\n        return {\n            ...field,\n            predefinedValues: {\n                enabled,\n                values: values.map(({ label, value, selected }) => {\n                    return {\n                        label,\n                        selected: selected || false,\n                        value: String(value)\n                    };\n                })\n            }\n        };\n    });\n};\n\nconst cleanupModelData = (data: PickedCmsModel): PickedCmsModel => {\n    return {\n        ...data,\n        fields: cleanupModelDataFields(data.fields)\n    };\n};\n\ninterface ContentModelEditorProviderProps {\n    apolloClient: ApolloClient<any>;\n    modelId?: string;\n    children: React.ReactElement;\n}\n\nexport const ContentModelEditorProvider: React.FC<ContentModelEditorProviderProps> = ({\n    children,\n    apolloClient,\n    modelId\n}) => {\n    const [state, dispatch] = useReducer<Reducer>(contentModelEditorReducer, {\n        modelId: modelId || null,\n        isPristine: true,\n        data: null as unknown as CmsModel,\n        activeTabIndex: 0\n    });\n\n    const tabsRef = useRef<TabsImperativeApi>();\n\n    const { history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n\n    const setPristine = (flag: boolean): void => {\n        dispatch({ type: \"state\", data: { isPristine: flag } });\n    };\n\n    const saveContentModel = async (\n        data?: CmsModel\n    ): Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]> => {\n        if (!data) {\n            data = state.data;\n        }\n        const modelData: PickedCmsModel = pick(data, [\n            \"group\",\n            \"layout\",\n            \"fields\",\n            \"tags\",\n            \"name\",\n            \"settings\",\n            \"description\",\n            \"titleFieldId\"\n        ]);\n        const response = await apolloClient.mutate<\n            UpdateCmsModelMutationResponse,\n            UpdateCmsModelMutationVariables\n        >({\n            mutation: UPDATE_CONTENT_MODEL,\n            variables: {\n                modelId: data.modelId,\n                data: cleanupModelData(modelData)\n            },\n            refetchQueries: [\n                {\n                    query: LIST_MENU_CONTENT_GROUPS_MODELS\n                }\n            ]\n        });\n\n        setPristine(true);\n\n        if (!response.data || !response.data.updateContentModel) {\n            return {\n                data: null,\n                error: null\n            };\n        }\n\n        return response.data.updateContentModel;\n    };\n\n    const setActiveTabIndex = useCallback((activeTabIndex: number) => {\n        dispatch({ type: \"state\", data: { activeTabIndex } });\n    }, []);\n\n    /**\n     * Set form data by providing a callback, which receives a fresh copy of data on which you can work on.\n     * Return new data once finished.\n     */\n    const setData = async (setter: (value: any) => any, saveModel = false): Promise<void> => {\n        setPristine(false);\n        const data = setter(state.data);\n        dispatch({ type: \"data\", data });\n        if (!saveModel) {\n            return;\n        }\n        await saveContentModel(data);\n    };\n\n    const getContentModel = async (\n        modelId: string\n    ): Promise<FetchResult<GetCmsModelQueryResponse>> => {\n        const response = await apolloClient.query<\n            GetCmsModelQueryResponse,\n            GetCmsModelQueryVariables\n        >({\n            query: GET_CONTENT_MODEL,\n            variables: {\n                modelId\n            }\n        });\n\n        const { data, error } = get(response, \"data.getContentModel\");\n        if (error) {\n            throw new Error(error.message);\n        }\n\n        await setData(() => data, false);\n        setPristine(true);\n        return response;\n    };\n\n    useEffect(() => {\n        if (!modelId) {\n            return;\n        }\n        getContentModel(modelId).catch(() => {\n            history.push(`/cms/content-models`);\n            showSnackbar(`Could not load content model with given ID.`);\n        });\n    }, [modelId]);\n\n    const value = useMemo<ContentModelEditorProviderContext>(\n        () => ({\n            // Keeping `data` for compatibility\n            data: state.data,\n            contentModel: state.data,\n            modelId,\n            apolloClient,\n            dispatch,\n            isPristine: state.isPristine,\n            getContentModel,\n            saveContentModel,\n            setData,\n            tabsRef,\n            activeTabIndex: state.activeTabIndex,\n            setActiveTabIndex\n        }),\n        [state, apolloClient]\n    );\n\n    const { Provider } = contentModelEditorContext;\n\n    return (\n        <Provider value={value}>\n            <ModelProvider model={value.contentModel}>{children}</ModelProvider>\n        </Provider>\n    );\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AAQA;AACA;AAEA;AACA;AACA;AAQA;AAIA;AAiBO,IAAMA,yBAAyB,gBAAGC,cAAK,CAACC,aAAa,CAE1DC,SAAS,CAAC;AAAC;AAmBN,IAAMC,yBAAkC,GAAG,SAArCA,yBAAkC,CAAIC,IAAW,EAAEC,MAAc,EAAY;EACtF,IAAQC,IAAI,GAAWD,MAAM,CAArBC,IAAI;IAAEC,IAAI,GAAKF,MAAM,CAAfE,IAAI;EAClB,QAAQA,IAAI;IACR,KAAK,OAAO;MACR,mEAAYH,IAAI,GAAKE,IAAI;IAE7B,KAAK,MAAM;MACP,mEAAYF,IAAI;QAAEE,IAAI,EAAEA;MAAgB;IAC5C;MACI,OAAOF,IAAI;EAAC;AAExB,CAAC;;AAED;AACA;AACA;AAFA;AAGA,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIC,MAAuB,EAAsB;EACzE,OAAOA,MAAM,CAACC,GAAG,CAAC,UAAAC,KAAK,EAAI;IACvB,IAAQC,gBAAgB,GAAKD,KAAK,CAA1BC,gBAAgB;IACxB,WAAyCA,gBAAgB,IAAI,CAAC,CAAC;MAAA,oBAAvDC,OAAO;MAAPA,OAAO,6BAAG,KAAK;MAAA,mBAAEC,MAAM;MAANA,MAAM,4BAAG,EAAE;IACpC,mEACOH,KAAK;MACRC,gBAAgB,EAAE;QACdC,OAAO,EAAPA,OAAO;QACPC,MAAM,EAAEA,MAAM,CAACJ,GAAG,CAAC,iBAAgC;UAAA,IAA7BK,KAAK,SAALA,KAAK;YAAEC,KAAK,SAALA,KAAK;YAAEC,QAAQ,SAARA,QAAQ;UACxC,OAAO;YACHF,KAAK,EAALA,KAAK;YACLE,QAAQ,EAAEA,QAAQ,IAAI,KAAK;YAC3BD,KAAK,EAAEE,MAAM,CAACF,KAAK;UACvB,CAAC;QACL,CAAC;MACL;IAAC;EAET,CAAC,CAAC;AACN,CAAC;AAED,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIb,IAAoB,EAAqB;EAC/D,mEACOA,IAAI;IACPG,MAAM,EAAED,sBAAsB,CAACF,IAAI,CAACG,MAAM;EAAC;AAEnD,CAAC;AAQM,IAAMW,0BAAqE,GAAG,SAAxEA,0BAAqE,QAI5E;EAAA,IAHFC,QAAQ,SAARA,QAAQ;IACRC,YAAY,SAAZA,YAAY;IACZC,OAAO,SAAPA,OAAO;EAEP,kBAA0B,IAAAC,iBAAU,EAAUrB,yBAAyB,EAAE;MACrEoB,OAAO,EAAEA,OAAO,IAAI,IAAI;MACxBE,UAAU,EAAE,IAAI;MAChBnB,IAAI,EAAE,IAA2B;MACjCoB,cAAc,EAAE;IACpB,CAAC,CAAC;IAAA;IALKC,KAAK;IAAEC,QAAQ;EAOtB,IAAMC,OAAO,GAAG,IAAAC,aAAM,GAAqB;EAE3C,iBAAoB,IAAAC,sBAAS,GAAE;IAAvBC,OAAO,cAAPA,OAAO;EACf,mBAAyB,IAAAC,yBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EAEpB,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,IAAa,EAAW;IACzCR,QAAQ,CAAC;MAAErB,IAAI,EAAE,OAAO;MAAED,IAAI,EAAE;QAAEmB,UAAU,EAAEW;MAAK;IAAE,CAAC,CAAC;EAC3D,CAAC;EAED,IAAMC,gBAAgB;IAAA,mGAAG,iBACrB/B,IAAe;MAAA;MAAA;QAAA;UAAA;YAEf,IAAI,CAACA,IAAI,EAAE;cACPA,IAAI,GAAGqB,KAAK,CAACrB,IAAI;YACrB;YACMgC,SAAyB,GAAG,IAAAC,aAAI,EAACjC,IAAI,EAAE,CACzC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,MAAM,EACN,UAAU,EACV,aAAa,EACb,cAAc,CACjB,CAAC;YAAA;YAAA,OACqBgB,YAAY,CAACkB,MAAM,CAGxC;cACEC,QAAQ,EAAEC,mCAAoB;cAC9BC,SAAS,EAAE;gBACPpB,OAAO,EAAEjB,IAAI,CAACiB,OAAO;gBACrBjB,IAAI,EAAEa,gBAAgB,CAACmB,SAAS;cACpC,CAAC;cACDM,cAAc,EAAE,CACZ;gBACIC,KAAK,EAAEC;cACX,CAAC;YAET,CAAC,CAAC;UAAA;YAdIC,QAAQ;YAgBdZ,WAAW,CAAC,IAAI,CAAC;YAAC,MAEd,CAACY,QAAQ,CAACzC,IAAI,IAAI,CAACyC,QAAQ,CAACzC,IAAI,CAAC0C,kBAAkB;cAAA;cAAA;YAAA;YAAA,iCAC5C;cACH1C,IAAI,EAAE,IAAI;cACV2C,KAAK,EAAE;YACX,CAAC;UAAA;YAAA,iCAGEF,QAAQ,CAACzC,IAAI,CAAC0C,kBAAkB;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA,CAC1C;IAAA,gBA1CKX,gBAAgB;MAAA;IAAA;EAAA,GA0CrB;EAED,IAAMa,iBAAiB,GAAG,IAAAC,kBAAW,EAAC,UAACzB,cAAsB,EAAK;IAC9DE,QAAQ,CAAC;MAAErB,IAAI,EAAE,OAAO;MAAED,IAAI,EAAE;QAAEoB,cAAc,EAAdA;MAAe;IAAE,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;EACI,IAAM0B,OAAO;IAAA,mGAAG,kBAAOC,MAA2B;MAAA;QAAA;QAAA;MAAA;QAAA;UAAA;YAAEC,SAAS,8DAAG,KAAK;YACjEnB,WAAW,CAAC,KAAK,CAAC;YACZ7B,IAAI,GAAG+C,MAAM,CAAC1B,KAAK,CAACrB,IAAI,CAAC;YAC/BsB,QAAQ,CAAC;cAAErB,IAAI,EAAE,MAAM;cAAED,IAAI,EAAJA;YAAK,CAAC,CAAC;YAAC,IAC5BgD,SAAS;cAAA;cAAA;YAAA;YAAA;UAAA;YAAA;YAAA,OAGRjB,gBAAgB,CAAC/B,IAAI,CAAC;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA,CAC/B;IAAA,gBARK8C,OAAO;MAAA;IAAA;EAAA,GAQZ;EAED,IAAMG,eAAe;IAAA,mGAAG,kBACpBhC,OAAe;MAAA;MAAA;QAAA;UAAA;YAAA;YAAA,OAEQD,YAAY,CAACuB,KAAK,CAGvC;cACEA,KAAK,EAAEW,gCAAiB;cACxBb,SAAS,EAAE;gBACPpB,OAAO,EAAPA;cACJ;YACJ,CAAC,CAAC;UAAA;YARIwB,QAAQ;YAAA,OAUU,IAAAU,aAAG,EAACV,QAAQ,EAAE,sBAAsB,CAAC,EAArDzC,IAAI,QAAJA,IAAI,EAAE2C,KAAK,QAALA,KAAK;YAAA,KACfA,KAAK;cAAA;cAAA;YAAA;YAAA,MACC,IAAIS,KAAK,CAACT,KAAK,CAACU,OAAO,CAAC;UAAA;YAAA;YAAA,OAG5BP,OAAO,CAAC;cAAA,OAAM9C,IAAI;YAAA,GAAE,KAAK,CAAC;UAAA;YAChC6B,WAAW,CAAC,IAAI,CAAC;YAAC,kCACXY,QAAQ;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA,CAClB;IAAA,gBArBKQ,eAAe;MAAA;IAAA;EAAA,GAqBpB;EAED,IAAAK,gBAAS,EAAC,YAAM;IACZ,IAAI,CAACrC,OAAO,EAAE;MACV;IACJ;IACAgC,eAAe,CAAChC,OAAO,CAAC,CAACsC,KAAK,CAAC,YAAM;MACjC7B,OAAO,CAAC8B,IAAI,uBAAuB;MACnC5B,YAAY,+CAA+C;IAC/D,CAAC,CAAC;EACN,CAAC,EAAE,CAACX,OAAO,CAAC,CAAC;EAEb,IAAMP,KAAK,GAAG,IAAA+C,cAAO,EACjB;IAAA,OAAO;MACH;MACAzD,IAAI,EAAEqB,KAAK,CAACrB,IAAI;MAChB0D,YAAY,EAAErC,KAAK,CAACrB,IAAI;MACxBiB,OAAO,EAAPA,OAAO;MACPD,YAAY,EAAZA,YAAY;MACZM,QAAQ,EAARA,QAAQ;MACRH,UAAU,EAAEE,KAAK,CAACF,UAAU;MAC5B8B,eAAe,EAAfA,eAAe;MACflB,gBAAgB,EAAhBA,gBAAgB;MAChBe,OAAO,EAAPA,OAAO;MACPvB,OAAO,EAAPA,OAAO;MACPH,cAAc,EAAEC,KAAK,CAACD,cAAc;MACpCwB,iBAAiB,EAAjBA;IACJ,CAAC;EAAA,CAAC,EACF,CAACvB,KAAK,EAAEL,YAAY,CAAC,CACxB;EAED,IAAQ2C,QAAQ,GAAKlE,yBAAyB,CAAtCkE,QAAQ;EAEhB,oBACI,6BAAC,QAAQ;IAAC,KAAK,EAAEjD;EAAM,gBACnB,6BAAC,4BAAa;IAAC,KAAK,EAAEA,KAAK,CAACgD;EAAa,GAAE3C,QAAQ,CAAiB,CAC7D;AAEnB,CAAC;AAAC"}

package/admin/components/ContentModelEditor/Editor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="web" />
 import React from "react";
-export declare const EditContainer: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultValue" | "id" | "onError" | "className" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "placeholder" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture">, object>;
-export declare const Editor: () => JSX.Element;
+export declare const EditContainer: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Editor: React.FC;

package/admin/components/ContentModelEditor/Editor.js

@@ -1,42 +1,49 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Editor = exports.EditContainer = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouter = require("@webiny/react-router");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _emotion = require("emotion");
+var _i18n = require("@webiny/app/i18n");
+var _Progress = require("@webiny/ui/Progress");
+var _SplitView = require("@webiny/app-admin/components/SplitView");
+var _Icon = require("@webiny/ui/Icon");
+var _Typography = require("@webiny/ui/Typography");
+var _Tabs = require("@webiny/ui/Tabs");
+var _roundAssignment24px = require("./icons/round-assignment-24px.svg");
+var _FieldsSidebar = require("./FieldsSidebar");
+var _FieldEditor = require("../FieldEditor");
+var _PreviewTab = require("./PreviewTab");
+var _Header = _interopRequireDefault(require("./Header"));
+var _DragPreview = _interopRequireDefault(require("../DragPreview"));
+var _useModelEditor2 = require("./useModelEditor");
 var _templateObject;
-
-import React, { useRef, useState } from "react";
-import { Prompt } from "@webiny/react-router";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import { i18n } from "@webiny/app/i18n";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { Tab, Tabs } from "@webiny/ui/Tabs";
-import { ReactComponent as FormIcon } from "@svgr/webpack!./icons/round-assignment-24px.svg";
-import { FieldsSidebar } from "./FieldsSidebar";
-import { FieldEditor } from "../FieldEditor";
-import { PreviewTab } from "./PreviewTab";
-import Header from "./Header";
-import DragPreview from "../DragPreview";
-import { useContentModelEditor } from "./useContentModelEditor";
-var t = i18n.ns("app-headless-cms/admin/editor");
-var prompt = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["There are some unsaved changes! Are you sure you want to navigate away and discard all changes?"])));
-var ContentContainer = /*#__PURE__*/styled("div", {
+var t = _i18n.i18n.ns("app-headless-cms/admin/editor");
+var prompt = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["There are some unsaved changes! Are you sure you want to navigate away and discard all changes?"])));
+var ContentContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "epn2fgg0",
   label: "ContentContainer"
 })({
   paddingTop: 65
 });
-export var EditContainer = /*#__PURE__*/styled("div", {
+var EditContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "epn2fgg1",
   label: "EditContainer"
 })({
   padding: 40,
   position: "relative"
 });
-var LeftBarTitle = /*#__PURE__*/styled("div", {
+exports.EditContainer = EditContainer;
+var LeftBarTitle = /*#__PURE__*/(0, _styled.default)("div", {
   target: "epn2fgg2",
   label: "LeftBarTitle"
 })({
@@ -46,12 +53,12 @@ var LeftBarTitle = /*#__PURE__*/styled("div", {
   padding: 25,
   color: "var(--mdc-theme-on-surface)"
 });
-var titleIcon = /*#__PURE__*/css({
+var titleIcon = /*#__PURE__*/(0, _emotion.css)({
   height: 24,
   marginRight: 15,
   color: "var(--mdc-theme-primary)"
 }, "label:titleIcon;");
-var LeftBarFieldList = /*#__PURE__*/styled("div", {
+var LeftBarFieldList = /*#__PURE__*/(0, _styled.default)("div", {
   target: "epn2fgg3",
   label: "LeftBarFieldList"
 })({
@@ -59,80 +66,77 @@ var LeftBarFieldList = /*#__PURE__*/styled("div", {
   overflow: "auto",
   height: "calc(100vh - 250px)"
 });
-var formTabs = /*#__PURE__*/css({
+var formTabs = /*#__PURE__*/(0, _emotion.css)({
   "&.webiny-ui-tabs": {
     ".webiny-ui-tabs__tab-bar": {
       backgroundColor: "var(--mdc-theme-surface)"
     }
   }
 }, "label:formTabs;");
-export var Editor = function Editor() {
-  var _useContentModelEdito = useContentModelEditor(),
-      data = _useContentModelEdito.data,
-      setData = _useContentModelEdito.setData,
-      isPristine = _useContentModelEdito.isPristine;
-
-  var tabsRef = useRef(null);
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeTabIndex = _useState2[0],
-      setActiveTabIndex = _useState2[1];
-
+var Editor = function Editor() {
+  var _useModelEditor = (0, _useModelEditor2.useModelEditor)(),
+    data = _useModelEditor.data,
+    setData = _useModelEditor.setData,
+    isPristine = _useModelEditor.isPristine;
+  var tabsRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeTabIndex = _useState2[0],
+    setActiveTabIndex = _useState2[1];
   var onChange = function onChange(_ref) {
     var fields = _ref.fields,
-        layout = _ref.layout;
+      layout = _ref.layout;
     setData(function (data) {
-      return _objectSpread(_objectSpread({}, data), {}, {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
         fields: fields,
         layout: layout
       });
     });
   };
-
   if (!data) {
-    return /*#__PURE__*/React.createElement(CircularProgress, {
+    return /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
       label: "Loading content model..."
     });
   }
-
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "content-model-editor"
-  }, /*#__PURE__*/React.createElement(Prompt, {
+  }, /*#__PURE__*/_react.default.createElement(_reactRouter.Prompt, {
     when: !isPristine,
     message: prompt
-  }), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ContentContainer, null, /*#__PURE__*/React.createElement(SplitView, null, /*#__PURE__*/React.createElement(LeftPanel, {
+  }), /*#__PURE__*/_react.default.createElement(_Header.default, null), /*#__PURE__*/_react.default.createElement(ContentContainer, null, /*#__PURE__*/_react.default.createElement(_SplitView.SplitView, null, /*#__PURE__*/_react.default.createElement(_SplitView.LeftPanel, {
     span: 4
-  }, /*#__PURE__*/React.createElement(LeftBarTitle, null, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/_react.default.createElement(LeftBarTitle, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     className: titleIcon,
-    icon: /*#__PURE__*/React.createElement(FormIcon, null)
-  }), /*#__PURE__*/React.createElement(Typography, {
+    icon: /*#__PURE__*/_react.default.createElement(_roundAssignment24px.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "headline6"
-  }, "Fields")), /*#__PURE__*/React.createElement(LeftBarFieldList, null, /*#__PURE__*/React.createElement(FieldsSidebar, {
+  }, "Fields")), /*#__PURE__*/_react.default.createElement(LeftBarFieldList, null, /*#__PURE__*/_react.default.createElement(_FieldsSidebar.FieldsSidebar, {
     onFieldDragStart: function onFieldDragStart() {
-      if (tabsRef.current) {
-        tabsRef.current.switchTab(0);
+      if (!tabsRef.current) {
+        return;
       }
+      tabsRef.current.switchTab(0);
     }
-  }))), /*#__PURE__*/React.createElement(RightPanel, {
+  }))), /*#__PURE__*/_react.default.createElement(_SplitView.RightPanel, {
     span: 8
-  }, /*#__PURE__*/React.createElement(Tabs, {
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
     className: formTabs,
     ref: tabsRef,
     onActivate: function onActivate(e) {
       return setActiveTabIndex(e);
     }
-  }, /*#__PURE__*/React.createElement(Tab, {
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
     label: "Edit",
     "data-testid": "cms.editor.tab.edit"
-  }, /*#__PURE__*/React.createElement(EditContainer, null, /*#__PURE__*/React.createElement(FieldEditor, {
+  }, /*#__PURE__*/_react.default.createElement(EditContainer, null, /*#__PURE__*/_react.default.createElement(_FieldEditor.FieldEditor, {
     fields: data.fields,
-    layout: data.layout,
+    layout: data.layout || [],
     onChange: onChange
-  }))), /*#__PURE__*/React.createElement(Tab, {
+  }))), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
     label: "Preview",
     "data-testid": "cms.editor.tab.preview"
-  }, /*#__PURE__*/React.createElement(PreviewTab, {
+  }, /*#__PURE__*/_react.default.createElement(_PreviewTab.PreviewTab, {
     activeTab: activeTabIndex === 1
-  })))))), /*#__PURE__*/React.createElement(DragPreview, null));
-};
+  })))))), /*#__PURE__*/_react.default.createElement(_DragPreview.default, null));
+};
+exports.Editor = Editor;