@webiny/app-headless-cms 0.0.0-ee-vpcs.549378cf03

package/admin/components/FieldEditor/FieldEditor.js

@@ -0,0 +1,249 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldEditor = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _i18n = require("@webiny/app/i18n");
+
+var _roundDrag_indicator24px = require("../../icons/round-drag_indicator-24px.svg");
+
+var _DropZone = require("../DropZone");
+
+var _Draggable = _interopRequireDefault(require("../Draggable"));
+
+var _EditFieldDialog = _interopRequireDefault(require("./EditFieldDialog"));
+
+var _Field = _interopRequireDefault(require("./Field"));
+
+var _Styled = require("./Styled");
+
+var _useModelFieldEditor2 = require("./useModelFieldEditor");
+
+var _FieldEditorContext = require("./FieldEditorContext");
+
+var _ModelFieldProvider = require("../ModelFieldProvider");
+
+var _templateObject;
+
+var t = _i18n.i18n.namespace("app-headless-cms/admin/components/editor");
+
+var fieldTypes = ["field", "newField"];
+
+var Editor = function Editor() {
+  var _useModelFieldEditor = (0, _useModelFieldEditor2.useModelFieldEditor)(),
+      parent = _useModelFieldEditor.parent,
+      depth = _useModelFieldEditor.depth,
+      insertField = _useModelFieldEditor.insertField,
+      updateField = _useModelFieldEditor.updateField,
+      deleteField = _useModelFieldEditor.deleteField,
+      fields = _useModelFieldEditor.fields,
+      noConflict = _useModelFieldEditor.noConflict,
+      editField = _useModelFieldEditor.editField,
+      onFieldDrop = _useModelFieldEditor.onFieldDrop,
+      onEndDrag = _useModelFieldEditor.onEndDrag,
+      field = _useModelFieldEditor.field,
+      dropTarget = _useModelFieldEditor.dropTarget,
+      getFieldPlugin = _useModelFieldEditor.getFieldPlugin;
+
+  var canDropIntoField = function canDropIntoField(field, draggable) {
+    var fieldPlugin = getFieldPlugin(field.type);
+    var canAccept = fieldPlugin.field.canAccept;
+
+    if (typeof canAccept === "function" && !canAccept(field, draggable)) {
+      return false;
+    }
+
+    return true;
+  };
+
+  var isVerticalDropzoneVisible = function isVerticalDropzoneVisible(cb) {
+    return function (item) {
+      var _fieldPlugin$field$al;
+
+      if (!parent) {
+        return cb(item);
+      }
+
+      var fieldPlugin = getFieldPlugin(parent.type);
+      var allowLayout = (_fieldPlugin$field$al = fieldPlugin.field.allowLayout) !== null && _fieldPlugin$field$al !== void 0 ? _fieldPlugin$field$al : true;
+
+      if (!allowLayout) {
+        return false;
+      }
+
+      if (!canDropIntoField(parent, item)) {
+        return false;
+      }
+
+      return cb(item);
+    };
+  };
+
+  var isHorizontalDropzoneVisible = function isHorizontalDropzoneVisible(cb) {
+    return function (item) {
+      if (!parent) {
+        return cb(item);
+      }
+
+      if (!canDropIntoField(parent, item)) {
+        return false;
+      }
+
+      return cb(item);
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fields.length === 0 && /*#__PURE__*/_react.default.createElement(_DropZone.Center, {
+    isDroppable: isHorizontalDropzoneVisible(function () {
+      return true;
+    }),
+    onDrop: function onDrop(item) {
+      return onFieldDrop(item, {
+        row: 0,
+        index: 0
+      });
+    }
+  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Drop your first field here"])))), fields.map(function (row, index) {
+    return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
+      beginDrag: {
+        parent: parent ? parent.fieldId : null,
+        type: "row",
+        fields: row,
+        pos: {
+          row: index
+        }
+      },
+      endDrag: onEndDrag,
+      key: row.map(function (f) {
+        return f.fieldId;
+      }).join(".")
+    }, function (_ref
+    /* RowContainer start - includes drag handle, drop zones and the Row itself. */
+    ) {
+      var drag = _ref.drag,
+          isDragging = _ref.isDragging;
+      return /*#__PURE__*/_react.default.createElement(_Styled.RowContainer, {
+        style: {
+          opacity: isDragging ? 0.3 : 1
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _Styled.rowHandle,
+        ref: drag
+      }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+        icon: /*#__PURE__*/_react.default.createElement(_roundDrag_indicator24px.ReactComponent, null)
+      })), /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
+        isVisible: isHorizontalDropzoneVisible(noConflict()),
+        "data-testid": "cms-editor-row-droppable-top-".concat(index),
+        onDrop: function onDrop(item) {
+          return onFieldDrop(item, {
+            row: index,
+            index: null
+          });
+        }
+      }), /*#__PURE__*/_react.default.createElement(_Styled.Row, {
+        "data-testid": "cms.editor.field-row"
+      }, row.map(function (field, fieldIndex) {
+        return /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+          field: field,
+          key: field.fieldId
+        }, /*#__PURE__*/_react.default.createElement(_Draggable.default, {
+          beginDrag: {
+            parent: parent ? parent.fieldId : null,
+            type: "field",
+            field: field,
+            pos: {
+              row: index,
+              index: fieldIndex
+            }
+          },
+          endDrag: onEndDrag
+        }, function (_ref2) {
+          var drag = _ref2.drag;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: _Styled.fieldContainer,
+            ref: drag
+          }, /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
+            depth: depth,
+            onDrop: function onDrop(item) {
+              return onFieldDrop(item, {
+                row: index,
+                index: fieldIndex
+              });
+            },
+            isVisible: isVerticalDropzoneVisible(noConflict(function (item) {
+              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
+            }))
+          }), /*#__PURE__*/_react.default.createElement("div", {
+            className: _Styled.fieldHandle
+          }, /*#__PURE__*/_react.default.createElement(_Field.default, {
+            parent: parent,
+            field: field,
+            onEdit: editField,
+            onDelete: deleteField
+          })), fieldIndex === row.length - 1 && /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
+            last: true,
+            depth: depth,
+            isVisible: isVerticalDropzoneVisible(noConflict(function (item) {
+              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
+            })),
+            onDrop: function onDrop(item) {
+              return onFieldDrop(item, {
+                row: index,
+                index: fieldIndex + 1
+              });
+            }
+          }));
+        }));
+      })), index === fields.length - 1 ? /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
+        "data-testid": "cms-editor-row-droppable-bottom-".concat(index),
+        last: true,
+        isVisible: isHorizontalDropzoneVisible(noConflict()),
+        onDrop: function onDrop(item) {
+          return onFieldDrop(item, {
+            row: index + 1,
+            index: null
+          });
+        }
+      }) : null);
+    });
+  }), field ? /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+    field: field
+  }, /*#__PURE__*/_react.default.createElement(_EditFieldDialog.default, {
+    onClose: function onClose() {
+      return editField(null);
+    },
+    onSubmit: function onSubmit(field) {
+      if (field.id) {
+        updateField(field);
+        editField(null);
+        return;
+      }
+
+      insertField({
+        field: field,
+        position: dropTarget
+      });
+      editField(null);
+    }
+  })) : null);
+};
+
+var FieldEditor = function FieldEditor(props) {
+  return /*#__PURE__*/_react.default.createElement(_FieldEditorContext.FieldEditorProvider, props, /*#__PURE__*/_react.default.createElement(Editor, null));
+};
+
+exports.FieldEditor = FieldEditor;

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

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","namespace","fieldTypes","Editor","useModelFieldEditor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldPlugin","canDropIntoField","draggable","fieldPlugin","type","canAccept","isVerticalDropzoneVisible","cb","item","allowLayout","isHorizontalDropzoneVisible","length","row","index","map","fieldId","pos","f","join","drag","isDragging","opacity","rowHandle","fieldIndex","fieldContainer","includes","get","fieldHandle","id","position","FieldEditor","props"],"sources":["FieldEditor.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport get from \"lodash/get\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as HandleIcon } from \"~/admin/icons/round-drag_indicator-24px.svg\";\nimport { Center, Vertical, Horizontal } from \"../DropZone\";\nimport Draggable from \"../Draggable\";\nimport EditFieldDialog from \"./EditFieldDialog\";\nimport Field from \"./Field\";\nimport { rowHandle, fieldHandle, fieldContainer, Row, RowContainer } from \"./Styled\";\nimport { useModelFieldEditor } from \"./useModelFieldEditor\";\nimport { DragSource, FieldEditorProvider, IsVisibleCallable } from \"./FieldEditorContext\";\nimport { CmsModelField, CmsEditorFieldsLayout, CmsModelFieldTypePlugin } from \"~/types\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst fieldTypes: string[] = [\"field\", \"newField\"];\n\nconst Editor: React.FC = () => {\n    const {\n        parent,\n        depth,\n        insertField,\n        updateField,\n        deleteField,\n        fields,\n        noConflict,\n        editField,\n        onFieldDrop,\n        onEndDrag,\n        field,\n        dropTarget,\n        getFieldPlugin\n    } = useModelFieldEditor();\n\n    const canDropIntoField = (field: CmsModelField, draggable: DragSource) => {\n        const fieldPlugin = getFieldPlugin(field.type) as CmsModelFieldTypePlugin;\n        const canAccept = fieldPlugin.field.canAccept;\n        if (typeof canAccept === \"function\" && !canAccept(field, draggable)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const isVerticalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            const fieldPlugin = getFieldPlugin(parent.type) as CmsModelFieldTypePlugin;\n            const allowLayout = fieldPlugin.field.allowLayout ?? true;\n            if (!allowLayout) {\n                return false;\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    const isHorizontalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    return (\n        <Fragment>\n            {fields.length === 0 && (\n                <Center\n                    isDroppable={isHorizontalDropzoneVisible(() => true)}\n                    onDrop={item =>\n                        onFieldDrop(item, {\n                            row: 0,\n                            index: 0\n                        })\n                    }\n                >\n                    {t`Drop your first field here`}\n                </Center>\n            )}\n\n            {fields.map((row, index) => (\n                <Draggable\n                    beginDrag={{\n                        parent: parent ? parent.fieldId : null,\n                        type: \"row\",\n                        fields: row,\n                        pos: { row: index }\n                    }}\n                    endDrag={onEndDrag}\n                    key={row.map(f => f.fieldId).join(\".\")}\n                >\n                    {(\n                        {\n                            drag,\n                            isDragging\n                        } /* RowContainer start - includes drag handle, drop zones and the Row itself. */\n                    ) => (\n                        <RowContainer style={{ opacity: isDragging ? 0.3 : 1 }}>\n                            <div className={rowHandle} ref={drag}>\n                                <Icon icon={<HandleIcon />} />\n                            </div>\n                            <Horizontal\n                                isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                data-testid={`cms-editor-row-droppable-top-${index}`}\n                                onDrop={item => onFieldDrop(item, { row: index, index: null })}\n                            />\n                            {/* Row start - includes field drop zones and fields */}\n                            <Row data-testid={\"cms.editor.field-row\"}>\n                                {row.map((field, fieldIndex) => (\n                                    <ModelFieldProvider field={field} key={field.fieldId}>\n                                        <Draggable\n                                            beginDrag={{\n                                                parent: parent ? parent.fieldId : null,\n                                                type: \"field\",\n                                                field,\n                                                pos: {\n                                                    row: index,\n                                                    index: fieldIndex\n                                                }\n                                            }}\n                                            endDrag={onEndDrag}\n                                        >\n                                            {({ drag }) => (\n                                                <div className={fieldContainer} ref={drag}>\n                                                    <Vertical\n                                                        depth={depth}\n                                                        onDrop={item =>\n                                                            onFieldDrop(item, {\n                                                                row: index,\n                                                                index: fieldIndex\n                                                            })\n                                                        }\n                                                        isVisible={isVerticalDropzoneVisible(\n                                                            noConflict(\n                                                                item =>\n                                                                    fieldTypes.includes(\n                                                                        item.type\n                                                                    ) &&\n                                                                    (row.length < 4 ||\n                                                                        get(item, \"pos.row\") ===\n                                                                            index)\n                                                            )\n                                                        )}\n                                                    />\n\n                                                    <div className={fieldHandle}>\n                                                        <Field\n                                                            parent={parent}\n                                                            field={field}\n                                                            onEdit={editField}\n                                                            onDelete={deleteField}\n                                                        />\n                                                    </div>\n\n                                                    {/* Field end */}\n                                                    {fieldIndex === row.length - 1 && (\n                                                        <Vertical\n                                                            last\n                                                            depth={depth}\n                                                            isVisible={isVerticalDropzoneVisible(\n                                                                noConflict(item => {\n                                                                    return (\n                                                                        fieldTypes.includes(\n                                                                            item.type\n                                                                        ) &&\n                                                                        (row.length < 4 ||\n                                                                            get(item, \"pos.row\") ===\n                                                                                index)\n                                                                    );\n                                                                })\n                                                            )}\n                                                            onDrop={item =>\n                                                                onFieldDrop(item, {\n                                                                    row: index,\n                                                                    index: fieldIndex + 1\n                                                                })\n                                                            }\n                                                        />\n                                                    )}\n                                                </div>\n                                            )}\n                                        </Draggable>\n                                    </ModelFieldProvider>\n                                ))}\n                            </Row>\n                            {/* Row end */}\n                            {index === fields.length - 1 ? (\n                                <Horizontal\n                                    data-testid={`cms-editor-row-droppable-bottom-${index}`}\n                                    last\n                                    isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                    onDrop={item =>\n                                        onFieldDrop(item, {\n                                            row: index + 1,\n                                            index: null\n                                        })\n                                    }\n                                />\n                            ) : null}\n                        </RowContainer>\n                    )}\n                </Draggable>\n            ))}\n\n            {field ? (\n                <ModelFieldProvider field={field}>\n                    <EditFieldDialog\n                        onClose={() => editField(null)}\n                        onSubmit={field => {\n                            if (field.id) {\n                                updateField(field);\n                                editField(null);\n                                return;\n                            }\n                            insertField({ field, position: dropTarget });\n\n                            editField(null);\n                        }}\n                    />\n                </ModelFieldProvider>\n            ) : null}\n        </Fragment>\n    );\n};\n\nexport interface FieldEditorProps {\n    parent?: CmsModelField;\n    layout: CmsEditorFieldsLayout;\n    fields: CmsModelField[];\n    onChange: (params: { fields: CmsModelField[]; layout: CmsEditorFieldsLayout }) => void;\n}\n\nexport const FieldEditor: React.FC<FieldEditorProps> = props => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+import React from "react";
+import { CmsModelField, CmsEditorFieldId, CmsEditorFieldRendererPlugin, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, FieldLayoutPosition } from "../../../types";
+import { FieldEditorProps } from "./FieldEditor";
+import { DragObjectWithType, DragSourceMonitor } from "react-dnd";
+interface DropTarget {
+    row: number;
+    index: number | null;
+}
+interface Position {
+    row: number;
+    index: number;
+}
+export interface DragSource extends DragObjectWithType {
+    parent?: string;
+    pos?: Partial<Position>;
+    type: "row" | "field" | "newField";
+    fieldType?: string;
+    field?: CmsModelField | null;
+    fields?: CmsModelField[];
+}
+/**
+ * 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: CmsModelField;
+    position: FieldLayoutPosition;
+}
+interface MoveFieldParams {
+    field: CmsEditorFieldId | CmsModelField;
+    position: FieldLayoutPosition;
+}
+interface GetFieldsInLayoutCallable {
+    (): CmsModelField[][];
+}
+interface GetFieldPluginCallable {
+    (type: string): CmsEditorFieldTypePlugin | undefined;
+}
+interface GetFieldCallable {
+    (query: GetFieldParams): CmsModelField | undefined;
+}
+interface GetFieldRendererCallable {
+    (rendererName: string): CmsEditorFieldRendererPlugin | 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: CmsModelField): void;
+}
+interface DeleteFieldCallable {
+    (field: Pick<CmsModelField, "id">): void;
+}
+export interface IsVisibleCallable {
+    (item: DragSource): boolean;
+}
+interface NoConflictCallable {
+    (cb?: IsVisibleCallable): (item: DragSource) => boolean;
+}
+export interface FieldEditorContext {
+    fields: CmsModelField[][];
+    noConflict: NoConflictCallable;
+    layout: CmsEditorFieldsLayout;
+    onChange?: (data: any) => void;
+    getFieldsInLayout: GetFieldsInLayoutCallable;
+    getFieldPlugin: GetFieldPluginCallable;
+    getField: GetFieldCallable;
+    getFieldRendererPlugin: GetFieldRendererCallable;
+    editField: (field: CmsModelField | null) => void;
+    field: CmsModelField | null;
+    parent?: CmsModelField;
+    depth: number;
+    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<FieldEditorContext | undefined>;
+export declare const FieldEditorProvider: React.FC<FieldEditorProviderProps>;
+export {};