@webiny/app-headless-cms 5.23.1 → 5.25.0-beta.0

package/admin/components/FieldEditor/FieldEditorContext.d.ts

@@ -4,7 +4,7 @@ import { FieldEditorProps } from "./FieldEditor";
 import { DragObjectWithType, DragSourceMonitor } from "react-dnd";
 interface DropTarget {
     row: number;
-    index: number;
+    index: number | null;
 }
 interface Position {
     row: number;
@@ -12,42 +12,87 @@ interface Position {
 }
 export interface DragSource extends DragObjectWithType {
     parent?: string;
-    pos: Partial<Position>;
+    pos?: Partial<Position>;
     type: "row" | "field" | "newField";
     fieldType?: string;
-    field?: CmsEditorField;
+    field?: CmsEditorField | null;
     fields?: CmsEditorField[];
 }
+/**
+ * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types
+ */
+interface GetFieldParams {
+    id?: string;
+    fieldId?: string;
+}
+interface InsertFieldParams {
+    field: CmsEditorField;
+    position: FieldLayoutPosition;
+}
+interface MoveFieldParams {
+    field: CmsEditorFieldId | CmsEditorField;
+    position: FieldLayoutPosition;
+}
+interface GetFieldsInLayoutCallable {
+    (): CmsEditorField[][];
+}
+interface GetFieldPluginCallable {
+    (type: string): CmsEditorFieldTypePlugin | undefined;
+}
+interface GetFieldCallable {
+    (query: GetFieldParams): CmsEditorField | undefined;
+}
+interface OnFieldDropCallable {
+    (source: Partial<DragSource>, target: DropTarget): void;
+}
+interface InsertFieldCallable {
+    (params: InsertFieldParams): void;
+}
+interface MoveFieldCallable {
+    (params: MoveFieldParams): void;
+}
+interface OnEndDragCallable {
+    (item: DragSource, monitor: DragSourceMonitor): void;
+}
+interface MoveRowCallable {
+    (source: number, destination: number): void;
+}
+interface UpdateFieldCallable {
+    (field: Pick<CmsEditorField, "id">): void;
+}
+interface DeleteFieldCallable {
+    (field: Pick<CmsEditorField, "id">): void;
+}
+interface IsVisibleCallable {
+    (item: DragSource): boolean;
+}
+interface NoConflictCallable {
+    (cb?: IsVisibleCallable): (item: DragSource) => boolean;
+}
 export interface FieldEditorContextValue {
     fields: CmsEditorField[][];
-    noConflict: Function;
+    noConflict: NoConflictCallable;
     layout: CmsEditorFieldsLayout;
     onChange?: (data: any) => void;
-    getFieldsInLayout: () => CmsEditorField[][];
-    getFieldPlugin: (type: string) => CmsEditorFieldTypePlugin;
-    getField: (query: Record<string, string>) => CmsEditorField;
-    editField: (field: CmsEditorField) => void;
-    field: CmsEditorField;
-    parent: CmsEditorField;
+    getFieldsInLayout: GetFieldsInLayoutCallable;
+    getFieldPlugin: GetFieldPluginCallable;
+    getField: GetFieldCallable;
+    editField: (field: CmsEditorField | null) => void;
+    field: CmsEditorField | null;
+    parent?: CmsEditorField;
     depth: number;
-    dropTarget?: DropTarget;
-    onFieldDrop: (source: Partial<DragSource>, target: DropTarget) => void;
-    onEndDrag: (item: DragSource, monitor: DragSourceMonitor) => void;
-    insertField: (params: {
-        field: CmsEditorField;
-        position: FieldLayoutPosition;
-    }) => void;
-    moveField: (params: {
-        field: CmsEditorFieldId | CmsEditorField;
-        position: FieldLayoutPosition;
-    }) => void;
-    moveRow: (source: number, destination: number) => void;
-    updateField: (field: CmsEditorField) => void;
-    deleteField: (field: CmsEditorField) => void;
+    dropTarget: DropTarget;
+    onFieldDrop: OnFieldDropCallable;
+    onEndDrag: OnEndDragCallable;
+    insertField: InsertFieldCallable;
+    moveField: MoveFieldCallable;
+    moveRow: MoveRowCallable;
+    updateField: UpdateFieldCallable;
+    deleteField: DeleteFieldCallable;
 }
 interface FieldEditorProviderProps extends FieldEditorProps {
     children: React.ReactElement;
 }
 export declare const FieldEditorContext: React.Context<FieldEditorContextValue>;
-export declare const FieldEditorProvider: ({ parent, fields, layout, onChange, children }: FieldEditorProviderProps) => JSX.Element;
+export declare const FieldEditorProvider: React.FC<FieldEditorProviderProps>;
 export {};

package/admin/components/FieldEditor/FieldEditorContext.js

@@ -3,12 +3,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from "react";
 import dot from "dot-prop-immutable";
 import shortid from "shortid";
-import cloneDeep from "lodash/cloneDeep";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { plugins } from "@webiny/plugins";
 import * as utils from "./utils";
 import { useFieldEditor } from "./useFieldEditor";
-export var FieldEditorContext = /*#__PURE__*/React.createContext(null);
+export var FieldEditorContext = /*#__PURE__*/React.createContext(
+/**
+ * Safe to cast.
+ */
+{
+  field: null
+});
 export var FieldEditorProvider = function FieldEditorProvider(_ref) {
   var parent = _ref.parent,
       fields = _ref.fields,
@@ -28,7 +33,10 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
     layout: layout,
     fields: fields,
     field: null,
-    dropTarget: null
+    dropTarget: {
+      row: -1,
+      index: null
+    }
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
@@ -55,7 +63,8 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
         type = source.type,
         fieldType = source.fieldType,
         field = source.field,
-        fields = source.fields;
+        _source$fields = source.fields,
+        fields = _source$fields === void 0 ? [] : _source$fields;
     var parentId = parent ? parent.fieldId : null;
 
     if (type === "row") {
@@ -70,7 +79,7 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
             }
           });
         });
-      } else {
+      } else if (pos && pos.row !== undefined) {
         // We're dragging a row within the same fieldset
         moveRow(pos.row, dropTarget.row);
       }
@@ -80,6 +89,10 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
 
 
     if (pos) {
+      if (!field) {
+        return onDropTarget;
+      }
+
       if (parentId !== source.parent) {
         // We're dragging an existing field from another fieldset
         insertField({
@@ -97,7 +110,20 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
       return onDropTarget;
     }
 
+    if (!fieldType) {
+      return null;
+    }
+
     var plugin = getFieldPlugin(fieldType);
+
+    if (!plugin) {
+      return null;
+    }
+    /**
+     * TODO @ts-refactor figure out better type for this.
+     */
+
+
     editField(plugin.field.createField());
     setState(function (state) {
       return _objectSpread(_objectSpread({}, state), {}, {
@@ -126,7 +152,7 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
       return;
     }
 
-    var removeFields = type === "row" ? fields : [field];
+    var removeFields = type === "row" ? fields || [] : field ? [field] : [];
     removeFields.forEach(function (field) {
       return deleteField(field);
     });
@@ -134,17 +160,17 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
 
   var getFieldsInLayout = function getFieldsInLayout() {
     // Replace every field ID with actual field object.
-    var fields = cloneDeep(state.layout.filter(function (arr) {
+    return state.layout.filter(function (arr) {
       return arr.length;
-    }));
-    fields.forEach(function (row, rowIndex) {
-      row.forEach(function (fieldId, fieldIndex) {
-        fields[rowIndex][fieldIndex] = getField({
-          id: fieldId
+    }).map(function (row) {
+      return row.map(function (id) {
+        return getField({
+          id: id
         });
-      });
+      }).filter(Boolean);
+    }).filter(function (row) {
+      return row.length > 0;
     });
-    return fields;
   };
   /**
    * Return field plugin.
@@ -152,9 +178,8 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
 
 
   var getFieldPlugin = function getFieldPlugin(type) {
-    return plugins.byType("cms-editor-field-type").find(function (_ref3) {
-      var field = _ref3.field;
-      return field.type === type;
+    return plugins.byType("cms-editor-field-type").find(function (plugin) {
+      return plugin.field.type === type;
     });
   };
   /**
@@ -166,11 +191,13 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
     return state.fields.find(function (field) {
       for (var key in query) {
         if (!(key in field)) {
-          return null;
-        }
+          return false;
+        } // TODO @ts-refactor figure if there is a way to fix this.
+        // @ts-ignore
+
 
         if (field[key] !== query[key]) {
-          return null;
+          return false;
         }
       }
 
@@ -182,9 +209,9 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
    */
 
 
-  var insertField = function insertField(_ref4) {
-    var field = _ref4.field,
-        position = _ref4.position;
+  var insertField = function insertField(_ref3) {
+    var field = _ref3.field,
+        position = _ref3.position;
 
     if (!field.id) {
       field.id = shortid.generate();
@@ -200,19 +227,16 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
       throw new Error("Invalid field \"type\".");
     }
 
-    setState(function (data) {
-      data = dot.set(data, "fields", function (fields) {
-        if (Array.isArray(fields)) {
-          return fields.concat(field);
-        }
-
-        return [field];
+    setState(function (prev) {
+      var next = _objectSpread(_objectSpread({}, prev), {}, {
+        fields: (prev.fields || []).concat(field)
       }); // Move field to position where it was dropped.
 
+
       return utils.moveField({
         field: field,
         position: position,
-        data: data
+        data: next
       });
     });
   };
@@ -221,9 +245,9 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
    */
 
 
-  var moveField = function moveField(_ref5) {
-    var field = _ref5.field,
-        position = _ref5.position;
+  var moveField = function moveField(_ref4) {
+    var field = _ref4.field,
+        position = _ref4.position;
     setState(function (data) {
       return utils.moveField({
         field: field,
@@ -283,12 +307,16 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
 
       switch (item.type) {
         case "row":
-          item.fields.forEach(function (field) {
+          (item.fields || []).forEach(function (field) {
             return draggedFields.push(field.fieldId);
           });
           break;
 
         case "field":
+          if (!item.field) {
+            break;
+          }
+
           draggedFields.push(item.field.fieldId);
           break;
 

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FieldEditorContext.tsx"],"names":["React","useCallback","useState","dot","shortid","useDeepCompareEffect","plugins","utils","useFieldEditor","FieldEditorContext","createContext","field","FieldEditorProvider","parent","fields","layout","onChange","children","depth","editor","dropTarget","row","index","state","setState","editField","onDropTarget","fieldId","onFieldDrop","source","pos","type","fieldType","parentId","forEach","insertField","position","undefined","moveRow","moveField","plugin","getFieldPlugin","createField","onEndDrag","monitor","didDrop","getDropResult","removeFields","deleteField","getFieldsInLayout","filter","arr","length","map","id","getField","Boolean","byType","find","query","key","generate","Error","fieldPlugin","prev","next","concat","data","destination","updateField","i","set","noConflict","isVisible","item","sameParent","draggedFields","push","some","includes","f","join","value"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport dot from \"dot-prop-immutable\";\nimport shortid from \"shortid\";\nimport useDeepCompareEffect from \"use-deep-compare-effect\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldId,\n    CmsEditorFieldsLayout,\n    CmsEditorFieldTypePlugin,\n    FieldLayoutPosition\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport * as utils from \"./utils\";\nimport { FieldEditorProps } from \"./FieldEditor\";\nimport { DragObjectWithType, DragSourceMonitor } from \"react-dnd\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\n\ninterface DropTarget {\n    row: number;\n    index: number | null;\n}\n\ninterface Position {\n    row: number;\n    index: number;\n}\n\nexport interface DragSource extends DragObjectWithType {\n    parent?: string;\n    pos?: Partial<Position>;\n    type: \"row\" | \"field\" | \"newField\";\n    fieldType?: string;\n    field?: CmsEditorField | null;\n    fields?: CmsEditorField[];\n}\n\n/**\n * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types\n */\ninterface GetFieldParams {\n    id?: string;\n    fieldId?: string;\n}\ninterface InsertFieldParams {\n    field: CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface MoveFieldParams {\n    field: CmsEditorFieldId | CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface GetFieldsInLayoutCallable {\n    (): CmsEditorField[][];\n}\ninterface GetFieldPluginCallable {\n    (type: string): CmsEditorFieldTypePlugin | undefined;\n}\ninterface GetFieldCallable {\n    (query: GetFieldParams): CmsEditorField | undefined;\n}\ninterface OnFieldDropCallable {\n    (source: Partial<DragSource>, target: DropTarget): void;\n}\ninterface InsertFieldCallable {\n    (params: InsertFieldParams): void;\n}\ninterface MoveFieldCallable {\n    (params: MoveFieldParams): void;\n}\ninterface OnEndDragCallable {\n    (item: DragSource, monitor: DragSourceMonitor): void;\n}\ninterface MoveRowCallable {\n    (source: number, destination: number): void;\n}\ninterface UpdateFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface DeleteFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface IsVisibleCallable {\n    (item: DragSource): boolean;\n}\ninterface NoConflictCallable {\n    (cb?: IsVisibleCallable): (item: DragSource) => boolean;\n}\nexport interface FieldEditorContextValue {\n    fields: CmsEditorField[][];\n    noConflict: NoConflictCallable;\n    layout: CmsEditorFieldsLayout;\n    onChange?: (data: any) => void;\n    getFieldsInLayout: GetFieldsInLayoutCallable;\n    getFieldPlugin: GetFieldPluginCallable;\n    getField: GetFieldCallable;\n    editField: (field: CmsEditorField | null) => void;\n    field: CmsEditorField | null;\n    parent?: CmsEditorField;\n    depth: number;\n    dropTarget: DropTarget;\n    onFieldDrop: OnFieldDropCallable;\n    onEndDrag: OnEndDragCallable;\n    insertField: InsertFieldCallable;\n    moveField: MoveFieldCallable;\n    moveRow: MoveRowCallable;\n    updateField: UpdateFieldCallable;\n    deleteField: DeleteFieldCallable;\n}\n\ninterface FieldEditorProviderProps extends FieldEditorProps {\n    children: React.ReactElement;\n}\n\nexport const FieldEditorContext = React.createContext<FieldEditorContextValue>(\n    /**\n     * Safe to cast.\n     */\n    {\n        field: null\n    } as unknown as FieldEditorContextValue\n);\n\ninterface State {\n    layout: CmsEditorFieldsLayout;\n    fields: CmsEditorField[];\n    field: CmsEditorField | null;\n    dropTarget: DropTarget;\n}\nexport const FieldEditorProvider: React.FC<FieldEditorProviderProps> = ({\n    parent,\n    fields,\n    layout,\n    onChange,\n    children\n}) => {\n    // We need to determine depth of this provider so we can render drop zones with correct z-indexes.\n    let depth = 0;\n    try {\n        const editor = useFieldEditor();\n        depth = editor.depth + 1;\n    } catch {\n        // There's no parent provider, so this is the top-level one.\n    }\n\n    const [state, setState] = useState<State>({\n        layout,\n        fields,\n        field: null,\n        dropTarget: {\n            row: -1,\n            index: null\n        }\n    });\n\n    useDeepCompareEffect(() => {\n        onChange({ fields: state.fields, layout: state.layout });\n    }, [state.fields, state.layout]);\n\n    const editField = useCallback((field: CmsEditorField | null) => {\n        setState(state => ({ ...state, field }));\n    }, []);\n\n    const onDropTarget = {\n        dropTarget: parent ? parent.fieldId : null\n    };\n\n    const onFieldDrop = useCallback<OnFieldDropCallable>((source, dropTarget) => {\n        const { pos, type, fieldType, field, fields = [] } = source;\n\n        const parentId = parent ? parent.fieldId : null;\n\n        if (type === \"row\") {\n            if (parentId !== source.parent) {\n                // We're dragging an existing row from another fieldset\n                fields.forEach((field, index) => {\n                    insertField({\n                        field,\n                        position: {\n                            row: dropTarget.row,\n                            index: index === 0 ? null : index\n                        }\n                    });\n                });\n            } else if (pos && pos.row !== undefined) {\n                // We're dragging a row within the same fieldset\n                moveRow(pos.row, dropTarget.row);\n            }\n\n            return onDropTarget;\n        }\n\n        // If source pos is set, we are moving an existing field.\n        if (pos) {\n            if (!field) {\n                return onDropTarget;\n            }\n            if (parentId !== source.parent) {\n                // We're dragging an existing field from another fieldset\n                insertField({ field, position: dropTarget });\n            } else {\n                // We're dragging a field within the same fieldset\n                moveField({ field, position: dropTarget });\n            }\n            return onDropTarget;\n        }\n\n        if (!fieldType) {\n            return null;\n        }\n        const plugin = getFieldPlugin(fieldType);\n        if (!plugin) {\n            return null;\n        }\n        /**\n         * TODO @ts-refactor figure out better type for this.\n         */\n        editField(plugin.field.createField() as CmsEditorField);\n        setState(state => ({\n            ...state,\n            dropTarget\n        }));\n        return null;\n    }, []);\n\n    const onEndDrag: OnEndDragCallable = ({ type, field, fields }, monitor) => {\n        if (!monitor.didDrop()) {\n            return;\n        }\n\n        // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.\n        const { dropTarget } = monitor.getDropResult();\n        const parentId = parent ? parent.fieldId : null;\n        if (dropTarget === parentId) {\n            return;\n        }\n\n        const removeFields = type === \"row\" ? fields || [] : field ? [field] : [];\n        removeFields.forEach(field => deleteField(field));\n    };\n\n    const getFieldsInLayout: GetFieldsInLayoutCallable = () => {\n        // Replace every field ID with actual field object.\n        return state.layout\n            .filter(arr => arr.length)\n            .map(row => {\n                return row\n                    .map(id => {\n                        return getField({ id });\n                    })\n                    .filter(Boolean);\n            })\n            .filter(row => {\n                return row.length > 0;\n            }) as CmsEditorField[][];\n    };\n\n    /**\n     * Return field plugin.\n     */\n    const getFieldPlugin: GetFieldPluginCallable = type => {\n        return plugins\n            .byType<CmsEditorFieldTypePlugin>(\"cms-editor-field-type\")\n            .find(plugin => plugin.field.type === type);\n    };\n\n    /**\n     * Checks if field of given type already exists in the list of fields.\n     */\n    const getField: GetFieldCallable = query => {\n        return state.fields.find(field => {\n            for (const key in query) {\n                if (!(key in field)) {\n                    return false;\n                }\n                // TODO @ts-refactor figure if there is a way to fix this.\n                // @ts-ignore\n                if (field[key] !== query[key]) {\n                    return false;\n                }\n            }\n\n            return true;\n        });\n    };\n\n    /**\n     * Inserts a new field into the target position.\n     */\n    const insertField: InsertFieldCallable = ({ field, position }) => {\n        if (!field.id) {\n            field.id = shortid.generate();\n        }\n\n        if (!field.type) {\n            throw new Error(`Field \"type\" missing.`);\n        }\n\n        const fieldPlugin = getFieldPlugin(field.type);\n        if (!fieldPlugin) {\n            throw new Error(`Invalid field \"type\".`);\n        }\n\n        setState(prev => {\n            const next: State = {\n                ...prev,\n                fields: (prev.fields || []).concat(field)\n            };\n\n            // Move field to position where it was dropped.\n            return utils.moveField({ field, position, data: next });\n        });\n    };\n\n    /**\n     * Moves field to the given target position.\n     */\n    const moveField: MoveFieldCallable = ({ field, position }) => {\n        setState(data => {\n            return utils.moveField<State>({ field, position, data });\n        });\n    };\n\n    /**\n     * Moves row to a destination row.\n     */\n    const moveRow: MoveRowCallable = (source, destination) => {\n        setState(data => {\n            return utils.moveRow({ data, source, destination });\n        });\n    };\n\n    /**\n     * Updates field.\n     */\n    const updateField: UpdateFieldCallable = field => {\n        setState(data => {\n            for (let i = 0; i < data.fields.length; i++) {\n                if (data.fields[i].id === field.id) {\n                    return dot.set(data, `fields.${i}`, field);\n                }\n            }\n            return data;\n        });\n    };\n\n    /**\n     * Deletes a field (both from the list of field and the layout).\n     */\n    const deleteField: DeleteFieldCallable = field => {\n        setState(data => {\n            return utils.deleteField({ field, data });\n        });\n    };\n\n    const noConflict: NoConflictCallable = useCallback(\n        (isVisible?: IsVisibleCallable) => item => {\n            const sameParent = item.parent === onDropTarget.dropTarget;\n            const draggedFields: string[] = [];\n            switch (item.type) {\n                case \"row\":\n                    (item.fields || []).forEach(field => draggedFields.push(field.fieldId));\n                    break;\n                case \"field\":\n                    if (!item.field) {\n                        break;\n                    }\n                    draggedFields.push(item.field.fieldId);\n                    break;\n                default:\n                    break;\n            }\n\n            if (\n                draggedFields.length &&\n                !sameParent &&\n                fields.some(field => draggedFields.includes(field.fieldId))\n            ) {\n                return false;\n            }\n\n            return typeof isVisible === \"function\" ? isVisible(item) : true;\n        },\n        [fields.map(f => f.fieldId).join(\".\")]\n    );\n\n    const value = {\n        parent,\n        depth,\n        getFieldsInLayout,\n        getFieldPlugin,\n        getField,\n        editField,\n        field: state.field,\n        dropTarget: state.dropTarget,\n        onFieldDrop,\n        onEndDrag,\n        insertField,\n        moveField,\n        moveRow,\n        updateField,\n        deleteField,\n        fields: getFieldsInLayout(),\n        noConflict,\n        layout: state.layout\n    };\n\n    return <FieldEditorContext.Provider value={value}>{children}</FieldEditorContext.Provider>;\n};\n"]}

package/admin/components/FieldEditor/Styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const RowContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object>;
-export declare const Row: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object>;
+export declare const RowContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Row: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export declare const fieldContainer: string;
 export declare const rowHandle: string;
 export declare const fieldHandle: string;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Styled.ts"],"names":["css","styled","RowContainer","position","display","flexDirection","marginBottom","borderRadius","backgroundColor","border","boxShadow","Row","paddingLeft","paddingRight","fieldContainer","flex","padding","margin","transition","color","cursor","rowHandle","width","left","top","transform","zIndex","fieldHandle"],"mappings":"AAAA,SAASA,GAAT,QAAoB,SAApB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AAEA,OAAO,IAAMC,YAAY,gBAAGD,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACtCE,EAAAA,QAAQ,EAAE,UAD4B;AAEtCC,EAAAA,OAAO,EAAE,MAF6B;AAGtCC,EAAAA,aAAa,EAAE,QAHuB;AAItCC,EAAAA,YAAY,EAAE,EAJwB;AAKtCC,EAAAA,YAAY,EAAE,CALwB;AAMtCC,EAAAA,eAAe,EAAE,0BANqB;AAOtCC,EAAAA,MAAM,EAAE,0CAP8B;AAQtCC,EAAAA,SAAS,EACL;AATkC,CAAjB,CAAlB;AAYP,OAAO,IAAMC,GAAG,gBAAGV,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAC7BG,EAAAA,OAAO,EAAE,MADoB;AAE7BC,EAAAA,aAAa,EAAE,KAFc;AAG7BG,EAAAA,eAAe,EAAE,0BAHY;AAI7BI,EAAAA,WAAW,EAAE,EAJgB;AAK7BC,EAAAA,YAAY,EAAE,EALe;AAM7BV,EAAAA,QAAQ,EAAE;AANmB,CAAjB,CAAT;AASP,OAAO,IAAMW,cAAc,gBAAGd,GAAG,CAAC;AAC9BG,EAAAA,QAAQ,EAAE,UADoB;AAE9BY,EAAAA,IAAI,EAAE,QAFwB;AAG9BP,EAAAA,eAAe,EAAE,6BAHa;AAI9BQ,EAAAA,OAAO,EAAE,QAJqB;AAK9BC,EAAAA,MAAM,EAAE,EALsB;AAM9BV,EAAAA,YAAY,EAAE,CANgB;AAO9BE,EAAAA,MAAM,EAAE,0CAPsB;AAQ9BS,EAAAA,UAAU,EAAE,kBARkB;AAS9BC,EAAAA,KAAK,EAAE,6BATuB;AAU9BC,EAAAA,MAAM,EAAE,MAVsB;AAW9B,aAAW;AACPV,IAAAA,SAAS,EACL;AAFG;AAXmB,CAAD,0BAA1B;AAiBP,OAAO,IAAMW,SAAS,gBAAGrB,GAAG,CAAC;AACzBsB,EAAAA,KAAK,EAAE,EADkB;AAEzBF,EAAAA,MAAM,EAAE,MAFiB;AAGzBjB,EAAAA,QAAQ,EAAE,UAHe;AAIzBoB,EAAAA,IAAI,EAAE,EAJmB;AAKzBC,EAAAA,GAAG,EAAE,KALoB;AAMzBC,EAAAA,SAAS,EAAE,kBANc;AAOzBC,EAAAA,MAAM,EAAE,CAPiB;AAQzBP,EAAAA,KAAK,EAAE;AARkB,CAAD,qBAArB;AAWP,OAAO,IAAMQ,WAAW,gBAAG3B,GAAG,CAAC;AAC3BoB,EAAAA,MAAM,EAAE;AADmB,CAAD,uBAAvB","sourcesContent":["import { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\n\nexport const RowContainer = styled(\"div\")({\n    position: \"relative\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    marginBottom: 20,\n    borderRadius: 2,\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    boxShadow:\n        \"var(--mdc-theme-on-background) 1px 1px 1px, var(--mdc-theme-on-background) 1px 1px 2px\"\n});\n\nexport const Row = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    paddingLeft: 40,\n    paddingRight: 10,\n    position: \"relative\"\n});\n\nexport const fieldContainer = css({\n    position: \"relative\",\n    flex: \"1 100%\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    padding: \"0 15px\",\n    margin: 10,\n    borderRadius: 2,\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    transition: \"box-shadow 225ms\",\n    color: \"var(--mdc-theme-on-surface)\",\n    cursor: \"grab\",\n    \"&:hover\": {\n        boxShadow:\n            \"var(--mdc-theme-on-background) 1px 1px 1px, var(--mdc-theme-on-background) 1px 1px 2px\"\n    }\n});\n\nexport const rowHandle = css({\n    width: 30,\n    cursor: \"grab\",\n    position: \"absolute\",\n    left: 10,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    zIndex: 1,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nexport const fieldHandle = css({\n    cursor: \"grab\"\n});\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["FieldEditor","useFieldEditor"],"mappings":"AAAA,SAASA,WAAT;AACA,SAASC,cAAT","sourcesContent":["export { FieldEditor } from \"./FieldEditor\";\nexport { useFieldEditor } from \"./useFieldEditor\";\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useFieldEditor.ts"],"names":["useContext","FieldEditorContext","useFieldEditor"],"mappings":"AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,SAASC,kBAAT;AAEA,OAAO,SAASC,cAAT,GAA0B;AAC7B,SAAOF,UAAU,CAACC,kBAAD,CAAjB;AACH","sourcesContent":["import { useContext } from \"react\";\nimport { FieldEditorContext } from \"./FieldEditorContext\";\n\nexport function useFieldEditor() {\n    return useContext(FieldEditorContext);\n}\n"]}

package/admin/components/FieldEditor/utils/deleteField.d.ts

@@ -1,10 +1,8 @@
-import { CmsEditorField, CmsEditorFieldsLayout } from "../../../../types";
-interface Data {
-    fields: CmsEditorField[];
-    layout: CmsEditorFieldsLayout;
+import { CmsEditorField, CmsModel } from "../../../../types";
+declare type DeleteFieldParamsData = Pick<CmsModel, "fields" | "layout">;
+interface DeleteFieldParams {
+    field: Pick<CmsEditorField, "id">;
+    data: DeleteFieldParamsData;
 }
-declare const _default: ({ field, data }: {
-    field: CmsEditorField;
-    data: Data;
-}) => any;
+declare const _default: (params: DeleteFieldParams) => any;
 export default _default;

package/admin/components/FieldEditor/utils/deleteField.js

@@ -1,14 +1,18 @@
 import dot from "dot-prop-immutable";
-export default (function (_ref) {
-  var field = _ref.field,
-      data = _ref.data;
-  // Remove the field from fields list...
-  var fieldIndex = data.fields.findIndex(function (item) {
+export default (function (params) {
+  var field = params.field,
+      prev = params.data; // Remove the field from fields list...
+
+  var fieldIndex = prev.fields.findIndex(function (item) {
     return item.id === field.id;
   });
-  data = dot.delete(data, "fields.".concat(fieldIndex)); // ...and rebuild the layout object.
+  var data = dot.delete(prev, "fields.".concat(fieldIndex)); // ...and rebuild the layout object.
 
   return dot.set(data, "layout", function (layout) {
+    if (!layout) {
+      return [];
+    }
+
     var newLayout = [];
     var currentRowIndex = 0;
     layout.forEach(function (row) {

package/admin/components/FieldEditor/utils/deleteField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["deleteField.ts"],"names":["dot","params","field","prev","data","fieldIndex","fields","findIndex","item","id","delete","set","layout","newLayout","currentRowIndex","forEach","row","fieldId","find","Array","isArray","push","length"],"mappings":"AAAA,OAAOA,GAAP,MAAgB,oBAAhB;AAQA,gBAAe,UAACC,MAAD,EAA+B;AAC1C,MAAQC,KAAR,GAA8BD,MAA9B,CAAQC,KAAR;AAAA,MAAqBC,IAArB,GAA8BF,MAA9B,CAAeG,IAAf,CAD0C,CAE1C;;AACA,MAAMC,UAAU,GAAGF,IAAI,CAACG,MAAL,CAAYC,SAAZ,CAAsB,UAAAC,IAAI;AAAA,WAAIA,IAAI,CAACC,EAAL,KAAYP,KAAK,CAACO,EAAtB;AAAA,GAA1B,CAAnB;AACA,MAAML,IAAI,GAAGJ,GAAG,CAACU,MAAJ,CAAWP,IAAX,mBAA2BE,UAA3B,EAAb,CAJ0C,CAM1C;;AACA,SAAOL,GAAG,CAACW,GAAJ,CAAQP,IAAR,EAAc,QAAd,EAAwB,UAACQ,MAAD,EAA6C;AACxE,QAAI,CAACA,MAAL,EAAa;AACT,aAAO,EAAP;AACH;;AACD,QAAMC,SAA0C,GAAG,EAAnD;AACA,QAAIC,eAAe,GAAG,CAAtB;AACAF,IAAAA,MAAM,CAACG,OAAP,CAAe,UAAAC,GAAG,EAAI;AAClBA,MAAAA,GAAG,CAACD,OAAJ,CAAY,UAAAE,OAAO,EAAI;AACnB,YAAMf,KAAK,GAAGE,IAAI,CAACE,MAAL,CAAYY,IAAZ,CAAiB,UAAAV,IAAI;AAAA,iBAAIA,IAAI,CAACC,EAAL,KAAYQ,OAAhB;AAAA,SAArB,CAAd;;AACA,YAAI,CAACf,KAAL,EAAY;AACR;AACH;;AACD,YAAI,CAACiB,KAAK,CAACC,OAAN,CAAcP,SAAS,CAACC,eAAD,CAAvB,CAAL,EAAgD;AAC5CD,UAAAA,SAAS,CAACC,eAAD,CAAT,GAA6B,EAA7B;AACH;;AAEDD,QAAAA,SAAS,CAACC,eAAD,CAAT,CAA2BO,IAA3B,CAAgCJ,OAAhC;AACH,OAVD;AAWAJ,MAAAA,SAAS,CAACC,eAAD,CAAT,IAA8BD,SAAS,CAACC,eAAD,CAAT,CAA2BQ,MAAzD,IAAmER,eAAe,EAAlF;AACH,KAbD;AAeA,WAAOD,SAAP;AACH,GAtBM,CAAP;AAuBH,CA9BD","sourcesContent":["import dot from \"dot-prop-immutable\";\nimport { CmsEditorField, CmsModel } from \"~/types\";\n\ntype DeleteFieldParamsData = Pick<CmsModel, \"fields\" | \"layout\">;\ninterface DeleteFieldParams {\n    field: Pick<CmsEditorField, \"id\">;\n    data: DeleteFieldParamsData;\n}\nexport default (params: DeleteFieldParams) => {\n    const { field, data: prev } = params;\n    // Remove the field from fields list...\n    const fieldIndex = prev.fields.findIndex(item => item.id === field.id);\n    const data = dot.delete(prev, `fields.${fieldIndex}`) as DeleteFieldParamsData;\n\n    // ...and rebuild the layout object.\n    return dot.set(data, \"layout\", (layout: DeleteFieldParamsData[\"layout\"]) => {\n        if (!layout) {\n            return [];\n        }\n        const newLayout: DeleteFieldParamsData[\"layout\"] = [];\n        let currentRowIndex = 0;\n        layout.forEach(row => {\n            row.forEach(fieldId => {\n                const field = data.fields.find(item => item.id === fieldId);\n                if (!field) {\n                    return;\n                }\n                if (!Array.isArray(newLayout[currentRowIndex])) {\n                    newLayout[currentRowIndex] = [];\n                }\n\n                newLayout[currentRowIndex].push(fieldId);\n            });\n            newLayout[currentRowIndex] && newLayout[currentRowIndex].length && currentRowIndex++;\n        });\n\n        return newLayout;\n    });\n};\n"]}

package/admin/components/FieldEditor/utils/getFieldPosition.d.ts

@@ -1,6 +1,7 @@
-import { FieldLayoutPosition } from "../../../../types";
-declare const _default: ({ field, data }: {
-    field: any;
-    data: any;
-}) => FieldLayoutPosition;
+import { CmsEditorField, CmsModel, FieldLayoutPosition } from "../../../../types";
+interface GetFieldPositionParams {
+    field: string | CmsEditorField;
+    data: Pick<CmsModel, "layout">;
+}
+declare const _default: (params: GetFieldPositionParams) => FieldLayoutPosition | null;
 export default _default;

package/admin/components/FieldEditor/utils/getFieldPosition.js

@@ -1,10 +1,11 @@
-export default (function (_ref) {
-  var field = _ref.field,
-      data = _ref.data;
+export default (function (params) {
+  var field = params.field,
+      data = params.data;
   var id = typeof field === "string" ? field : field.id;
+  var layout = data.layout ? data.layout : [];
 
-  for (var i = 0; i < data.layout.length; i++) {
-    var row = data.layout[i];
+  for (var i = 0; i < layout.length; i++) {
+    var row = layout[i];
 
     for (var j = 0; j < row.length; j++) {
       if (row[j] === id) {

package/admin/components/FieldEditor/utils/getFieldPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getFieldPosition.ts"],"names":["params","field","data","id","layout","i","length","row","j","index"],"mappings":"AAMA,gBAAe,UAACA,MAAD,EAAgE;AAC3E,MAAQC,KAAR,GAAwBD,MAAxB,CAAQC,KAAR;AAAA,MAAeC,IAAf,GAAwBF,MAAxB,CAAeE,IAAf;AACA,MAAMC,EAAE,GAAG,OAAOF,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCA,KAAK,CAACE,EAArD;AACA,MAAMC,MAAM,GAAGF,IAAI,CAACE,MAAL,GAAcF,IAAI,CAACE,MAAnB,GAA4B,EAA3C;;AACA,OAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,MAAM,CAACE,MAA3B,EAAmCD,CAAC,EAApC,EAAwC;AACpC,QAAME,GAAG,GAAGH,MAAM,CAACC,CAAD,CAAlB;;AACA,SAAK,IAAIG,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,GAAG,CAACD,MAAxB,EAAgCE,CAAC,EAAjC,EAAqC;AACjC,UAAID,GAAG,CAACC,CAAD,CAAH,KAAWL,EAAf,EAAmB;AACf,eAAO;AAAEI,UAAAA,GAAG,EAAEF,CAAP;AAAUI,UAAAA,KAAK,EAAED;AAAjB,SAAP;AACH;AACJ;AACJ;;AAED,SAAO,IAAP;AACH,CAdD","sourcesContent":["import { CmsEditorField, CmsModel, FieldLayoutPosition } from \"~/types\";\n\ninterface GetFieldPositionParams {\n    field: string | CmsEditorField;\n    data: Pick<CmsModel, \"layout\">;\n}\nexport default (params: GetFieldPositionParams): FieldLayoutPosition | null => {\n    const { field, data } = params;\n    const id = typeof field === \"string\" ? field : field.id;\n    const layout = data.layout ? data.layout : [];\n    for (let i = 0; i < layout.length; i++) {\n        const row = layout[i];\n        for (let j = 0; j < row.length; j++) {\n            if (row[j] === id) {\n                return { row: i, index: j };\n            }\n        }\n    }\n\n    return null;\n};\n"]}

package/admin/components/FieldEditor/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["default","getFieldPosition","moveField","deleteField","moveRow"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAApB;AACA,SAASD,OAAO,IAAIE,SAApB;AACA,SAASF,OAAO,IAAIG,WAApB;AACA,SAASH,OAAO,IAAII,OAApB","sourcesContent":["export { default as getFieldPosition } from \"./getFieldPosition\";\nexport { default as moveField } from \"./moveField\";\nexport { default as deleteField } from \"./deleteField\";\nexport { default as moveRow } from \"./moveRow\";\n"]}

package/admin/components/FieldEditor/utils/moveField.d.ts

@@ -1,7 +1,8 @@
 import { CmsEditorField, CmsEditorFieldId, FieldLayoutPosition } from "../../../../types";
-declare const _default: (params: {
-    field: CmsEditorFieldId | CmsEditorField;
+interface MoveFieldParams<T> {
+    field: CmsEditorFieldId | Pick<CmsEditorField, "id">;
     position: FieldLayoutPosition;
-    data: object;
-}) => any;
+    data: T;
+}
+declare const _default: <T extends Required<Pick<import("../../../../types").CmsEditorContentModel, "layout" | "fields">>>(params: MoveFieldParams<T>) => T;
 export default _default;

package/admin/components/FieldEditor/utils/moveField.js

@@ -1,32 +1,38 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import dot from "dot-prop-immutable";
 import getFieldPosition from "./getFieldPosition";
 
-var moveField = function moveField(_ref) {
-  var field = _ref.field,
-      position = _ref.position,
-      data = _ref.data;
+var moveField = function moveField(params) {
+  var field = params.field,
+      position = params.position,
+      prev = params.data;
   var row = position.row,
       index = position.index;
   var fieldId = typeof field === "string" ? field : field.id;
+
+  var next = _objectSpread(_objectSpread({}, prev), {}, {
+    layout: prev.layout ? prev.layout || [] : []
+  });
+
   var existingPosition = getFieldPosition({
     field: fieldId,
-    data: data
+    data: prev
   });
 
   if (existingPosition) {
-    data = dot.delete(data, "layout.".concat(existingPosition.row, ".").concat(existingPosition.index));
+    next = dot.delete(prev, "layout.".concat(existingPosition.row, ".").concat(existingPosition.index));
   } // Setting a form field into a new non-existing row.
 
 
-  if (!data.layout[row]) {
-    return dot.set(data, "layout.".concat(row), [fieldId]);
+  if (!next.layout[row]) {
+    return dot.set(next, "layout.".concat(row), [fieldId]);
   } // Drop the field at the specified index.
 
 
   if (index === null) {
     // Create a new row with the new field at the given row index,
-    return dot.set(data, "layout", function (layout) {
+    return dot.set(next, "layout", function (layout) {
       var newLayout = _toConsumableArray(layout);
 
       newLayout.splice(row, 0, [fieldId]);
@@ -34,7 +40,7 @@ var moveField = function moveField(_ref) {
     });
   }
 
-  return dot.set(data, "layout.".concat(row), function (layout) {
+  return dot.set(next, "layout.".concat(row), function (layout) {
     var newLayout = _toConsumableArray(layout);
 
     newLayout.splice(index, 0, fieldId);

package/admin/components/FieldEditor/utils/moveField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["moveField.ts"],"names":["dot","getFieldPosition","moveField","params","field","position","prev","data","row","index","fieldId","id","next","layout","existingPosition","delete","set","newLayout","splice","filter","length"],"mappings":";;AAAA,OAAOA,GAAP,MAAgB,oBAAhB;AAOA,OAAOC,gBAAP;;AAUA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAqBC,MAArB,EAAoD;AAClE,MAAQC,KAAR,GAAwCD,MAAxC,CAAQC,KAAR;AAAA,MAAeC,QAAf,GAAwCF,MAAxC,CAAeE,QAAf;AAAA,MAA+BC,IAA/B,GAAwCH,MAAxC,CAAyBI,IAAzB;AACA,MAAQC,GAAR,GAAuBH,QAAvB,CAAQG,GAAR;AAAA,MAAaC,KAAb,GAAuBJ,QAAvB,CAAaI,KAAb;AACA,MAAMC,OAAO,GAAG,OAAON,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCA,KAAK,CAACO,EAA1D;;AAEA,MAAIC,IAAO,mCACJN,IADI;AAEPO,IAAAA,MAAM,EAAEP,IAAI,CAACO,MAAL,GAAcP,IAAI,CAACO,MAAL,IAAe,EAA7B,GAAkC;AAFnC,IAAX;;AAKA,MAAMC,gBAAgB,GAAGb,gBAAgB,CAAC;AAAEG,IAAAA,KAAK,EAAEM,OAAT;AAAkBH,IAAAA,IAAI,EAAED;AAAxB,GAAD,CAAzC;;AAEA,MAAIQ,gBAAJ,EAAsB;AAClBF,IAAAA,IAAI,GAAGZ,GAAG,CAACe,MAAJ,CAAWT,IAAX,mBAA2BQ,gBAAgB,CAACN,GAA5C,cAAmDM,gBAAgB,CAACL,KAApE,EAAP;AACH,GAdiE,CAgBlE;;;AACA,MAAI,CAACG,IAAI,CAACC,MAAL,CAAYL,GAAZ,CAAL,EAAuB;AACnB,WAAOR,GAAG,CAACgB,GAAJ,CAAQJ,IAAR,mBAAwBJ,GAAxB,GAA+B,CAACE,OAAD,CAA/B,CAAP;AACH,GAnBiE,CAqBlE;;;AACA,MAAID,KAAK,KAAK,IAAd,EAAoB;AAChB;AACA,WAAOT,GAAG,CAACgB,GAAJ,CAAQJ,IAAR,EAAc,QAAd,EAAwB,UAACC,MAAD,EAAwB;AACnD,UAAMI,SAAS,sBAAOJ,MAAP,CAAf;;AACAI,MAAAA,SAAS,CAACC,MAAV,CAAiBV,GAAjB,EAAsB,CAAtB,EAAyB,CAACE,OAAD,CAAzB;AACA,aAAOO,SAAP;AACH,KAJM,CAAP;AAKH;;AAED,SAAOjB,GAAG,CAACgB,GAAJ,CAAQJ,IAAR,mBAAwBJ,GAAxB,GAA+B,UAACK,MAAD,EAAsB;AACxD,QAAMI,SAAS,sBAAOJ,MAAP,CAAf;;AACAI,IAAAA,SAAS,CAACC,MAAV,CAAiBT,KAAjB,EAAwB,CAAxB,EAA2BC,OAA3B;AACA,WAAOO,SAAP;AACH,GAJM,CAAP;AAKH,CApCD;;AAsCA,gBAAe,UAAqBd,MAArB,EAAuD;AAClE,SAAOH,GAAG,CAACgB,GAAJ,CAAQd,SAAS,CAAIC,MAAJ,CAAjB,EAA8B,QAA9B,EAAwC,UAACU,MAAD,EAAwB;AACnE,WAAO,mBAAIA,MAAJ,EAAYM,MAAZ,CAAmB,UAAAX,GAAG;AAAA,aAAIA,GAAG,CAACY,MAAJ,GAAa,CAAjB;AAAA,KAAtB,CAAP;AACH,GAFM,CAAP;AAGH,CAJD","sourcesContent":["import dot from \"dot-prop-immutable\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldId,\n    CmsModel as BaseCmsModel,\n    FieldLayoutPosition\n} from \"~/types\";\nimport getFieldPosition from \"./getFieldPosition\";\n\ntype CmsModel = Required<Pick<BaseCmsModel, \"fields\" | \"layout\">>;\n\ninterface MoveFieldParams<T> {\n    field: CmsEditorFieldId | Pick<CmsEditorField, \"id\">;\n    position: FieldLayoutPosition;\n    data: T;\n}\n\nconst moveField = <T extends CmsModel>(params: MoveFieldParams<T>) => {\n    const { field, position, data: prev } = params;\n    const { row, index } = position;\n    const fieldId = typeof field === \"string\" ? field : field.id;\n\n    let next: T = {\n        ...prev,\n        layout: prev.layout ? prev.layout || [] : []\n    };\n\n    const existingPosition = getFieldPosition({ field: fieldId, data: prev });\n\n    if (existingPosition) {\n        next = dot.delete(prev, `layout.${existingPosition.row}.${existingPosition.index}`) as T;\n    }\n\n    // Setting a form field into a new non-existing row.\n    if (!next.layout[row]) {\n        return dot.set(next, `layout.${row}`, [fieldId]);\n    }\n\n    // Drop the field at the specified index.\n    if (index === null) {\n        // Create a new row with the new field at the given row index,\n        return dot.set(next, \"layout\", (layout: string[][]) => {\n            const newLayout = [...layout];\n            newLayout.splice(row, 0, [fieldId]);\n            return newLayout;\n        });\n    }\n\n    return dot.set(next, `layout.${row}`, (layout: string[]) => {\n        const newLayout = [...layout];\n        newLayout.splice(index, 0, fieldId);\n        return newLayout;\n    });\n};\n\nexport default <T extends CmsModel>(params: MoveFieldParams<T>): T => {\n    return dot.set(moveField<T>(params), \"layout\", (layout: string[][]) => {\n        return [...layout].filter(row => row.length > 0);\n    });\n};\n"]}

package/admin/components/FieldEditor/utils/moveRow.d.ts

@@ -1,9 +1,8 @@
-import { CmsEditorFieldsLayout } from "../../../../types";
-declare const _default: ({ data, source, destination }: {
+import { CmsModel } from "../../../../types";
+interface Params {
     source: number;
     destination: number;
-    data: {
-        layout: CmsEditorFieldsLayout;
-    };
-}) => any;
+    data: Pick<CmsModel, "layout">;
+}
+declare const _default: ({ data, source, destination }: Params) => any;
 export default _default;