@webiny/app-headless-cms 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/admin/components/FieldEditor/FieldEditorContext.js

@@ -1,333 +1,373 @@
-import React, { useCallback, useState } from "react";
-import dot from "dot-prop-immutable";
-import useDeepCompareEffect from "use-deep-compare-effect";
-import { plugins } from "@webiny/plugins";
-import * as utils from "./utils";
-import { useModelFieldEditor } from "./useModelFieldEditor";
+import react, { useCallback, useMemo, useState } from "react";
+import dot_prop_immutable from "dot-prop-immutable";
+import use_deep_compare_effect from "use-deep-compare-effect";
+import { useContainer } from "@webiny/app";
+import { isLayoutField } from "../../../types.js";
+import { useModelFieldEditor } from "./useModelFieldEditor.js";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
-
-/**
- * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types
- */
-
-export const FieldEditorContext = /*#__PURE__*/React.createContext(undefined);
-/**
- * We try to generate the random id string but with the check that it does not exist already.
- * Chances that the same string exists are quite small, but let's check it anyway.
- *
- * In most cases, there will be no iterations anyway...
- */
+import { CmsFieldType, CmsLayoutFieldType } from "../../../presentation/fieldTypes/abstractions.js";
+import { CmsFieldRenderer } from "../../../presentation/fieldRenderers/abstractions.js";
+import * as __rspack_external__utils_index_js_d2e4ad7a from "./utils/index.js";
+const FieldEditorContext = /*#__PURE__*/ react.createContext(void 0);
 const maxGenerateIdIterations = 100;
-const generateFieldId = layout => {
-  let id = generateAlphaNumericLowerCaseId(8);
-  let iteration = 0;
-  while (layout.includes(id) && iteration < maxGenerateIdIterations) {
-    id = generateAlphaNumericLowerCaseId(8);
-    iteration++;
-  }
-  if (iteration >= maxGenerateIdIterations) {
-    throw new Error(`Could not generate field ID in ${maxGenerateIdIterations} iterations.`);
-  }
-  return id;
-};
-export const FieldEditorProvider = ({
-  parent,
-  fields,
-  layout,
-  onChange,
-  children
-}) => {
-  // We need to determine depth of this provider so we can render drop zones with correct z-indexes.
-  let depth = 0;
-  try {
-    const editor = useModelFieldEditor();
-    depth = editor.depth + 1;
-  } catch {
-    // There's no parent provider, so this is the top-level one.
-  }
-  const [state, setState] = useState({
-    layout,
-    fields,
-    field: null,
-    dropTarget: {
-      row: -1,
-      index: null
+const generateFieldId = (layout)=>{
+    let id = generateAlphaNumericLowerCaseId(8);
+    let iteration = 0;
+    while(layout.includes(id) && iteration < maxGenerateIdIterations){
+        id = generateAlphaNumericLowerCaseId(8);
+        iteration++;
     }
-  });
-  useDeepCompareEffect(() => {
-    onChange({
-      fields: state.fields,
-      layout: state.layout
+    if (iteration >= maxGenerateIdIterations) throw new Error(`Could not generate field ID in ${maxGenerateIdIterations} iterations.`);
+    return id;
+};
+const FieldEditorProvider = ({ parent, fields, layout, onChange, children })=>{
+    let depth = 0;
+    let parentEditorContext;
+    try {
+        const editor = useModelFieldEditor();
+        depth = editor.depth + 1;
+        parentEditorContext = editor;
+    } catch  {}
+    const container = useContainer();
+    const fieldTypesMap = useMemo(()=>{
+        const all = container.resolveAll(CmsFieldType);
+        const map = new Map();
+        for (const ft of all)map.set(ft.type, ft);
+        return map;
+    }, [
+        container
+    ]);
+    const fieldRenderersMap = useMemo(()=>{
+        const all = container.resolveAll(CmsFieldRenderer);
+        const map = new Map();
+        for (const r of all)map.set(r.rendererName, r);
+        return map;
+    }, [
+        container
+    ]);
+    const layoutFieldTypesMap = useMemo(()=>{
+        const all = container.resolveAll(CmsLayoutFieldType);
+        const map = new Map();
+        for (const lft of all)map.set(lft.type, lft);
+        return map;
+    }, [
+        container
+    ]);
+    const [state, setState] = useState({
+        layout,
+        fields,
+        field: null,
+        dropTarget: {
+            row: -1,
+            index: null
+        }
     });
-  }, [state.fields, state.layout]);
-  const editField = useCallback(field => {
-    setState(state => ({
-      ...state,
-      field
-    }));
-  }, []);
-  const onDropTarget = {
-    dropTarget: parent ? parent.fieldId : null
-  };
-  const onFieldDrop = useCallback((source, dropTarget) => {
-    const {
-      pos,
-      type,
-      fieldType,
-      field,
-      fields = []
-    } = source;
-    const parentId = parent ? parent.fieldId : null;
-    if (type === "row") {
-      if (parentId !== source.parent) {
-        // We're dragging an existing row from another fieldset
-        fields.forEach((field, index) => {
-          insertField({
-            field,
-            position: {
-              row: dropTarget.row,
-              index: index === 0 ? null : index
-            }
-          });
-        });
-      } else if (pos && pos.row !== undefined) {
-        // We're dragging a row within the same fieldset
-        moveRow(pos.row, dropTarget.row);
-      }
-      return onDropTarget;
-    }
-
-    // If source pos is set, we are moving an existing field.
-    if (pos) {
-      if (!field) {
-        return onDropTarget;
-      }
-      if (parentId !== source.parent) {
-        // We're dragging an existing field from another fieldset
-        insertField({
-          field,
-          position: dropTarget
-        });
-      } else {
-        // We're dragging a field within the same fieldset
-        moveField({
-          field,
-          position: dropTarget
-        });
-      }
-      return onDropTarget;
-    }
-    if (!fieldType) {
-      return null;
-    }
-    const plugin = getFieldPlugin(fieldType);
-    if (!plugin) {
-      return null;
-    }
-    const fieldData = plugin.field.createField();
-    if (plugin.field.canEditSettings !== false) {
-      editField(fieldData);
-      setState(state => ({
-        ...state,
-        dropTarget
-      }));
-    } else {
-      insertField({
-        field: fieldData,
-        position: dropTarget
-      });
-    }
-    return null;
-  }, []);
-  const onEndDrag = ({
-    type,
-    field,
-    fields
-  }, monitor) => {
-    if (!monitor.didDrop()) {
-      return;
-    }
-
-    // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.
-    const monitorResult = monitor.getDropResult();
-    const parentId = parent ? parent.fieldId : null;
-    if (monitorResult?.dropTarget === parentId) {
-      return;
-    }
-    const removeFields = type === "row" ? fields || [] : field ? [field] : [];
-    removeFields.forEach(field => deleteField(field));
-  };
-  const getFieldsInLayout = () => {
-    // Replace every field ID with actual field object.
-    return state.layout.filter(arr => arr.length).map(row => {
-      return row.map(id => {
-        return getField({
-          id
+    use_deep_compare_effect(()=>{
+        onChange({
+            fields: state.fields,
+            layout: state.layout
         });
-      }).filter(Boolean);
-    }).filter(row => {
-      return row.length > 0;
-    });
-  };
-
-  /**
-   * Return field plugin.
-   */
-  const getFieldPlugin = type => {
-    return plugins.byType("cms-editor-field-type").find(plugin => plugin.field.type === type);
-  };
-  const getFieldRendererPlugin = name => {
-    return plugins.byType("cms-editor-field-renderer").find(plugin => plugin.renderer.rendererName === name);
-  };
-
-  /**
-   * Checks if field of given type already exists in the list of fields.
-   */
-  const getField = query => {
-    return state.fields.find(field => {
-      for (const key in query) {
-        if (!(key in field)) {
-          return false;
+    }, [
+        state.fields,
+        state.layout
+    ]);
+    const editField = useCallback((field)=>{
+        setState((state)=>({
+                ...state,
+                field
+            }));
+    }, []);
+    const onDropTarget = {
+        dropTarget: parent ? parent.fieldId : null
+    };
+    const onFieldDrop = useCallback((source, dropTarget)=>{
+        const { pos, type, fieldType, field, fields = [] } = source;
+        const parentId = parent ? parent.fieldId : null;
+        if ("row" === type) {
+            if (parentId !== source.parent) fields.forEach((field, index)=>{
+                insertField({
+                    field,
+                    position: {
+                        row: dropTarget.row,
+                        index: 0 === index ? null : index
+                    }
+                });
+            });
+            else if (pos && void 0 !== pos.row) moveRow(pos.row, dropTarget.row);
+            return onDropTarget;
         }
-        if (field[key] !== query[key]) {
-          return false;
+        if ("newLayoutField" === type) {
+            const lft = getLayoutFieldType(source.layoutFieldType || "");
+            if (!lft) return null;
+            const layoutField = lft.createField();
+            insertLayoutCell(layoutField, dropTarget);
+            return null;
         }
-      }
-      return true;
-    });
-  };
-
-  /**
-   * Inserts a new field into the target position.
-   */
-  const insertField = ({
-    field,
-    position
-  }) => {
-    if (!field.id) {
-      field.id = generateFieldId(layout.flat());
-    }
-    if (!field.type) {
-      throw new Error(`Field "type" missing.`);
-    }
-    const fieldPlugin = getFieldPlugin(field.type);
-    if (!fieldPlugin) {
-      throw new Error(`No plugin found for field type "${field.type}".`);
-    }
-    setState(prev => {
-      const next = {
-        ...prev,
-        fields: (prev.fields || []).concat(field)
-      };
-
-      // Move field to position where it was dropped.
-      return utils.moveField({
-        field,
-        position,
-        data: next
-      });
-    });
-  };
-
-  /**
-   * Moves field to the given target position.
-   */
-  const moveField = ({
-    field,
-    position
-  }) => {
-    setState(data => {
-      return utils.moveField({
-        field,
-        position,
-        data
-      });
-    });
-  };
-
-  /**
-   * Moves row to a destination row.
-   */
-  const moveRow = (source, destination) => {
-    setState(data => {
-      return utils.moveRow({
-        data,
-        source,
-        destination
-      });
-    });
-  };
-
-  /**
-   * Updates field.
-   */
-  const updateField = field => {
-    setState(data => {
-      for (let i = 0; i < data.fields.length; i++) {
-        if (data.fields[i].id === field.id) {
-          return dot.set(data, `fields.${i}`, field);
+        if ("layoutField" === type) {
+            if (source.layoutField) if (parentId !== source.parent) {
+                insertLayoutCell(source.layoutField, dropTarget);
+                if (fields.length > 0) for (const f of fields)addField(f);
+            } else moveLayoutCell(source.layoutField.id, dropTarget);
+            return onDropTarget;
         }
-      }
-      return data;
-    });
-  };
-
-  /**
-   * Deletes a field (both from the list of field and the layout).
-   */
-  const deleteField = field => {
-    setState(data => {
-      return utils.deleteField({
-        field,
-        data
-      });
-    });
-  };
-  const noConflict = useCallback(isVisible => item => {
-    const sameParent = item.parent === onDropTarget.dropTarget;
-    const draggedFields = [];
-    switch (item.type) {
-      case "row":
-        (item.fields || []).forEach(field => draggedFields.push(field.fieldId));
-        break;
-      case "field":
-        if (!item.field) {
-          break;
+        if (pos) {
+            if (!field) return onDropTarget;
+            if (parentId !== source.parent) insertField({
+                field,
+                position: dropTarget
+            });
+            else moveField({
+                field,
+                position: dropTarget
+            });
+            return onDropTarget;
         }
-        draggedFields.push(item.field.fieldId);
-        break;
-      default:
-        break;
-    }
-    if (draggedFields.length && !sameParent && fields.some(field => draggedFields.includes(field.fieldId))) {
-      return false;
-    }
-    return typeof isVisible === "function" ? isVisible(item) : true;
-  }, [fields.map(f => f.fieldId).join(".")]);
-  const value = {
-    parent,
-    depth,
-    getFieldsInLayout,
-    getFieldPlugin,
-    getFieldRendererPlugin,
-    getField,
-    editField,
-    field: state.field,
-    dropTarget: state.dropTarget,
-    onFieldDrop,
-    onEndDrag,
-    insertField,
-    moveField,
-    moveRow,
-    updateField,
-    deleteField,
-    fields: getFieldsInLayout(),
-    noConflict,
-    layout: state.layout
-  };
-  return /*#__PURE__*/React.createElement(FieldEditorContext.Provider, {
-    value: value
-  }, children);
+        if (!fieldType) return null;
+        const ft = fieldTypesMap.get(fieldType);
+        if (!ft) return null;
+        const fieldData = ft.createField();
+        if (false !== ft.canEditSettings) {
+            editField(fieldData);
+            setState((state)=>({
+                    ...state,
+                    dropTarget
+                }));
+        } else insertField({
+            field: fieldData,
+            position: dropTarget
+        });
+        return null;
+    }, []);
+    const onEndDrag = ({ type, field, fields, layoutField }, monitor)=>{
+        if (!monitor.didDrop()) return;
+        const monitorResult = monitor.getDropResult();
+        const parentId = parent ? parent.fieldId : null;
+        if (monitorResult?.dropTarget === parentId) return;
+        if ("layoutField" === type && layoutField?.id) return void deleteLayoutCell(layoutField.id);
+        const removeFields = "row" === type ? fields || [] : field ? [
+            field
+        ] : [];
+        removeFields.forEach((field)=>deleteField(field));
+    };
+    const getFieldsInLayout = ()=>state.layout.filter((arr)=>arr.length).map((row)=>row.map((cell)=>{
+                if (isLayoutField(cell)) return cell;
+                return getField({
+                    id: cell
+                });
+            }).filter(Boolean)).filter((row)=>row.length > 0);
+    const getFieldRenderer = (name)=>fieldRenderersMap.get(name);
+    const getField = (query)=>state.fields.find((field)=>{
+            for(const key in query){
+                if (!(key in field)) return false;
+                if (field[key] !== query[key]) return false;
+            }
+            return true;
+        });
+    const insertField = ({ field, position })=>{
+        if (!field.id) field.id = generateFieldId(layout.flat().filter((c)=>"string" == typeof c));
+        if (!field.type) throw new Error('Field "type" missing.');
+        if (!fieldTypesMap.has(field.type)) throw new Error(`No field type found for "${field.type}".`);
+        setState((prev)=>{
+            const next = {
+                ...prev,
+                fields: (prev.fields || []).concat(field)
+            };
+            return __rspack_external__utils_index_js_d2e4ad7a.moveField({
+                field,
+                position,
+                data: next
+            });
+        });
+    };
+    const moveField = ({ field, position })=>{
+        setState((data)=>__rspack_external__utils_index_js_d2e4ad7a.moveField({
+                field,
+                position,
+                data
+            }));
+    };
+    const moveRow = (source, destination)=>{
+        setState((data)=>__rspack_external__utils_index_js_d2e4ad7a.moveRow({
+                data,
+                source,
+                destination
+            }));
+    };
+    const updateField = (field)=>{
+        setState((data)=>{
+            for(let i = 0; i < data.fields.length; i++)if (data.fields[i].id === field.id) return dot_prop_immutable.set(data, `fields.${i}`, field);
+            return data;
+        });
+    };
+    const deleteField = (field)=>{
+        setState((data)=>__rspack_external__utils_index_js_d2e4ad7a.deleteField({
+                field,
+                data
+            }));
+    };
+    const addField = (field)=>{
+        setState((prev)=>{
+            if (prev.fields.some((f)=>f.id === field.id)) return prev;
+            return {
+                ...prev,
+                fields: [
+                    ...prev.fields,
+                    field
+                ]
+            };
+        });
+    };
+    const removeField = (fieldId)=>{
+        setState((prev)=>({
+                ...prev,
+                fields: prev.fields.filter((f)=>f.id !== fieldId)
+            }));
+    };
+    const getLayoutFieldType = (type)=>layoutFieldTypesMap.get(type);
+    const insertLayoutCell = (layoutField, position)=>{
+        const cell = {
+            ...layoutField,
+            id: generateAlphaNumericLowerCaseId(8)
+        };
+        setState((prev)=>{
+            const newLayout = [
+                ...prev.layout.map((row)=>[
+                        ...row
+                    ])
+            ];
+            const { row } = position;
+            newLayout.splice(row, 0, [
+                cell
+            ]);
+            return {
+                ...prev,
+                layout: newLayout.filter((r)=>r.length > 0)
+            };
+        });
+    };
+    const updateLayoutCell = (fieldId, layoutField)=>{
+        setState((prev)=>{
+            const newLayout = prev.layout.map((row)=>row.map((cell)=>{
+                    if (isLayoutField(cell) && cell.id === fieldId) return {
+                        ...layoutField,
+                        id: fieldId
+                    };
+                    return cell;
+                }));
+            return {
+                ...prev,
+                layout: newLayout
+            };
+        });
+    };
+    const deleteLayoutCell = (fieldId)=>{
+        setState((prev)=>{
+            let fields = prev.fields;
+            for (const row of prev.layout)for (const cell of row)if (isLayoutField(cell) && cell.id === fieldId && "tabs" === cell.type) {
+                const tabsField = cell;
+                const fieldIdsInTabs = new Set();
+                tabsField.tabs.forEach((tab)=>{
+                    tab.layout.forEach((r)=>{
+                        r.forEach((c)=>{
+                            if ("string" == typeof c) fieldIdsInTabs.add(c);
+                        });
+                    });
+                });
+                if (fieldIdsInTabs.size > 0) fields = fields.filter((f)=>!fieldIdsInTabs.has(f.id));
+            }
+            const newLayout = prev.layout.map((row)=>row.filter((cell)=>!(isLayoutField(cell) && cell.id === fieldId)));
+            return {
+                ...prev,
+                fields,
+                layout: newLayout.filter((r)=>r.length > 0)
+            };
+        });
+    };
+    const moveLayoutCell = (fieldId, position)=>{
+        setState((prev)=>{
+            let layoutField;
+            let sourceRow = -1;
+            for(let ri = 0; ri < prev.layout.length; ri++){
+                for (const cell of prev.layout[ri])if (isLayoutField(cell) && cell.id === fieldId) {
+                    layoutField = cell;
+                    sourceRow = ri;
+                    break;
+                }
+                if (layoutField) break;
+            }
+            if (!layoutField || -1 === sourceRow) return prev;
+            const withoutSource = prev.layout.map((row)=>row.filter((cell)=>!(isLayoutField(cell) && cell.id === fieldId)));
+            const sourceRowEmptied = 0 === withoutSource[sourceRow].length;
+            let targetRow = position.row;
+            if (sourceRowEmptied && sourceRow < targetRow) targetRow--;
+            const cleaned = withoutSource.filter((r)=>r.length > 0);
+            targetRow = Math.max(0, Math.min(targetRow, cleaned.length));
+            cleaned.splice(targetRow, 0, [
+                layoutField
+            ]);
+            return {
+                ...prev,
+                layout: cleaned
+            };
+        });
+    };
+    const noConflict = useCallback((isVisible)=>(item)=>{
+            const sameParent = item.parent === onDropTarget.dropTarget;
+            const draggedFields = [];
+            switch(item.type){
+                case "row":
+                    (item.fields || []).forEach((field)=>draggedFields.push(field.fieldId));
+                    break;
+                case "field":
+                    if (!item.field) break;
+                    draggedFields.push(item.field.fieldId);
+                    break;
+                default:
+                    break;
+            }
+            if (draggedFields.length && !sameParent && fields.some((field)=>draggedFields.includes(field.fieldId))) return false;
+            return "function" == typeof isVisible ? isVisible(item) : true;
+        }, [
+        fields.map((f)=>f.fieldId).join(".")
+    ]);
+    const value = {
+        parent,
+        parentEditorContext,
+        depth,
+        getFieldsInLayout,
+        getFieldType: (typeOrField)=>{
+            if ("string" == typeof typeOrField) return fieldTypesMap.get(typeOrField);
+            const field = typeOrField;
+            for (const ft of fieldTypesMap.values())if (ft.matches?.(field)) return ft;
+            return fieldTypesMap.get(field.type);
+        },
+        getFieldRenderer,
+        getField,
+        editField,
+        field: state.field,
+        dropTarget: state.dropTarget,
+        onFieldDrop,
+        onEndDrag,
+        insertField,
+        moveField,
+        moveRow,
+        updateField,
+        deleteField,
+        insertLayoutCell,
+        updateLayoutCell,
+        deleteLayoutCell,
+        moveLayoutCell,
+        getLayoutFieldType,
+        addField,
+        removeField,
+        fields: getFieldsInLayout(),
+        noConflict,
+        layout: state.layout
+    };
+    return /*#__PURE__*/ react.createElement(FieldEditorContext.Provider, {
+        value: value
+    }, children);
 };
+export { FieldEditorContext, FieldEditorProvider };
 
 //# sourceMappingURL=FieldEditorContext.js.map