@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/dist/cjs/formBuilder/FormBuilderCanvas.cjs

@@ -0,0 +1,407 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FormBuilderCanvas_exports = {};
+__export(FormBuilderCanvas_exports, {
+  FormBuilderCanvas: () => FormBuilderCanvas
+});
+module.exports = __toCommonJS(FormBuilderCanvas_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.cjs");
+var import_model = require("./model.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FormBuilderCanvas({
+  layout,
+  activeTab,
+  selection,
+  stacked,
+  mode,
+  errors,
+  drag,
+  onChange,
+  onTab,
+  onSelect,
+  onAdd
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const iconSize = Number(knobProps.controlIcon.width);
+  const [deleteKey, setDeleteKey] = (0, import_react2.useState)();
+  const tab = layout.tabs.find(node => node.key === activeTab) ?? layout.tabs[0];
+  const sectionLabel = label => label || t("formBuilder.untitledSection", "Untitled section");
+  const fieldTitle = field => field.df.label || field.df.fieldname;
+  function fieldMenu(field) {
+    const location = (0, import_model.fieldLocation)(layout, field.key);
+    if (!location) return [];
+    return [{
+      key: "edit",
+      label: t("formBuilder.editProperties", "Edit properties"),
+      onSelect: () => onSelect(field.key)
+    }, {
+      key: "up",
+      label: t("formBuilder.moveUp", "Move up"),
+      onSelect: () => onChange((0, import_model.moveFieldBy)(layout, field.key, -1))
+    }, {
+      key: "down",
+      label: t("formBuilder.moveDown", "Move down"),
+      onSelect: () => onChange((0, import_model.moveFieldBy)(layout, field.key, 1))
+    }, ...layout.tabs.flatMap(item => item.sections).filter(section => section.key !== location.sectionKey).map(section => ({
+      key: section.key,
+      label: t("formBuilder.moveToSection", "Move to section: {{section}}", {
+        section: sectionLabel(section.df?.label)
+      }),
+      onSelect: () => {
+        const next = (0, import_model.moveFieldToSection)(layout, field.key, section.key);
+        onChange(next);
+        const nextLocation = (0, import_model.fieldLocation)(next, field.key);
+        if (nextLocation) onTab(nextLocation.tabKey);
+      }
+    })), {
+      key: "remove",
+      label: (0, import_model.canDeleteField)(field, mode) ? t("formBuilder.delete", "Delete") : t("formBuilder.hide", "Hide"),
+      onSelect: () => (0, import_model.canDeleteField)(field, mode) ? setDeleteKey(field.key) : onChange((0, import_model.updateField)(layout, field.key, {
+        hidden: 1
+      }))
+    }];
+  }
+  function renderFieldCard(field) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Card, {
+      minWidth: 0,
+      tier: "elevated",
+      ...(selection === field.key ? {
+        borderColor: "$accentColor"
+      } : void 0),
+      onPress: event => {
+        const target = event.target;
+        if (import_components.isWeb && target.closest?.("button, [role=button], [data-sortable-handle]")) return;
+        if (!drag.suppressClick.current) onSelect(field.key);
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        ...knobProps.gapSm,
+        alignItems: "center",
+        minWidth: 0,
+        children: [import_components.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SortableHandle, {
+          itemId: field.key,
+          label: fieldTitle(field),
+          dragging: drag.drag?.field.key === field.key,
+          onPointerDown: event => drag.fieldPointerDown(field.key, event),
+          onKeyDown: event => drag.keyDown(field.key, event)
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          flex: 1,
+          minWidth: 0,
+          ...knobProps.gapSm,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            ...knobProps.gapSm,
+            alignItems: "center",
+            minWidth: 0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              ...knobProps.label,
+              numberOfLines: 1,
+              flexShrink: 1,
+              children: fieldTitle(field)
+            }), field.df.reqd ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              ...knobProps.label,
+              color: "$red10",
+              "aria-label": t("formBuilder.required", "Required"),
+              children: "*"
+            }) : null]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            ...knobProps.gapSm,
+            flexWrap: "wrap",
+            minWidth: 0,
+            alignItems: "center",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+              size: "$2",
+              children: field.df.fieldtype
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              ...knobProps.body,
+              color: "$color11",
+              numberOfLines: 1,
+              flexShrink: 1,
+              children: field.df.fieldname
+            }), field.df.hidden ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+              size: "$2",
+              children: t("formBuilder.hidden", "Hidden")
+            }) : null, field.df.read_only ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+              size: "$2",
+              children: t("formBuilder.readOnly", "Read Only")
+            }) : null]
+          })]
+        }), errors[field.key] ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.WarningCircleIcon, {
+          size: iconSize,
+          "aria-label": t("formBuilder.fieldError", "Field needs attention")
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          flexShrink: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu, {
+            items: fieldMenu(field),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              size: "$2",
+              chromeless: true,
+              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsThreeIcon, {
+                size: iconSize
+              }),
+              "aria-label": t("formBuilder.fieldMenu", "Menu for {{field}}", {
+                field: fieldTitle(field)
+              })
+            })
+          })
+        })]
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    ...knobProps.gap,
+    testID: "form-builder-canvas",
+    ...{
+      onClickCapture: event => {
+        if (event.target.closest?.("[data-sortable-handle]")) event.preventDefault();
+      }
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tabs, {
+      value: tab.key,
+      onChange: onTab,
+      items: layout.tabs.map((item, index) => ({
+        value: item.key,
+        label: item.df?.label || (index === 0 ? t("formBuilder.details", "Details") : t("formBuilder.untitledTab", "Untitled tab"))
+      }))
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gapSm,
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        outlined: true,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+          size: iconSize
+        }),
+        onPress: () => {
+          const next = (0, import_model.addTab)(layout);
+          onChange(next);
+          onTab(next.tabs.at(-1).key);
+          onSelect(next.tabs.at(-1).key);
+        },
+        children: t("formBuilder.addTab", "Add tab")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        onPress: () => onSelect(tab.key),
+        children: t("formBuilder.tabProperties", "Tab properties")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        outlined: true,
+        onPress: () => {
+          const next = (0, import_model.addSection)(layout, tab.key);
+          onChange(next);
+          onSelect(next.tabs.find(item => item.key === tab.key).sections.at(-1).key);
+        },
+        children: t("formBuilder.addSection", "Add section")
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0,
+      ref: node => {
+        if (import_components.isWeb) drag.scrollRef.current = node?.getScrollableNode?.() ?? node;
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gapLg,
+        minWidth: 0,
+        flexShrink: 0,
+        children: [(0, import_model.fieldsFromLayout)(layout).length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+          size: "$2",
+          title: t("formBuilder.emptyTitle", "This form has no fields"),
+          description: t("formBuilder.emptyDescription", "Add a field to start building the form."),
+          action: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            onPress: onAdd,
+            children: t("formBuilder.addField", "Add field")
+          })
+        }) : null, tab.sections.map(section => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Card, {
+          tier: "content",
+          "data-fb-section": section.key,
+          minWidth: 0,
+          flexShrink: 0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            alignItems: "center",
+            ...knobProps.gapSm,
+            minWidth: 0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+              ...knobProps.heading,
+              flex: 1,
+              minWidth: 0,
+              numberOfLines: 1,
+              ...(!section.df?.label ? {
+                color: "$color11"
+              } : void 0),
+              children: sectionLabel(section.df?.label)
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+              size: "$2",
+              children: t("formBuilder.fieldCount", "{{count}} fields", {
+                count: section.columns.reduce((n, column) => n + column.fields.length, 0)
+              })
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+              flexShrink: 0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu, {
+                items: [{
+                  key: "section-properties",
+                  label: t("formBuilder.sectionProperties", "Section properties"),
+                  onSelect: () => onSelect(section.key)
+                }, ...section.columns.map((column, index) => ({
+                  key: column.key,
+                  label: t("formBuilder.numberedColumnProperties", "Column {{number}} properties", {
+                    number: index + 1
+                  }),
+                  onSelect: () => onSelect(column.key)
+                })), {
+                  key: "add-column",
+                  label: t("formBuilder.addColumn", "Add column"),
+                  onSelect: () => {
+                    const next = (0, import_model.addColumn)(layout, section.key);
+                    onChange(next);
+                  }
+                }, ...(section.columns.length > 1 ? [{
+                  key: "remove-column",
+                  label: t("formBuilder.removeColumn", "Remove column"),
+                  onSelect: () => onChange((0, import_model.removeColumn)(layout, section.columns.find(column => column.key === selection)?.key ?? section.columns.at(-1).key))
+                }] : []), {
+                  key: "add-section",
+                  label: t("formBuilder.addSectionBelow", "Add section below"),
+                  onSelect: () => onChange((0, import_model.addSection)(layout, tab.key, section.key))
+                }, ...(layout.tabs.length > 1 || tab.sections.length > 1 ? [{
+                  key: "remove-section",
+                  label: t("formBuilder.removeSection", "Remove section"),
+                  onSelect: () => onChange((0, import_model.removeSection)(layout, section.key))
+                }] : [])],
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                  size: "$2",
+                  chromeless: true,
+                  icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsThreeIcon, {
+                    size: iconSize
+                  }),
+                  "aria-label": t("formBuilder.sectionMenu", "Menu for section {{section}}", {
+                    section: sectionLabel(section.df?.label)
+                  })
+                })
+              })
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+            flexDirection: stacked ? "column" : "row",
+            ...knobProps.gap,
+            minWidth: 0,
+            "data-fb-columns": "",
+            "data-fb-stacked": String(stacked),
+            children: section.columns.map((column, columnIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+              flex: stacked ? void 0 : 1,
+              flexShrink: 0,
+              minWidth: 0,
+              ...knobProps.gapSm,
+              "data-fb-column": column.key,
+              children: [column.fields.map((field, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+                "data-fb-field": field.key,
+                "data-fb-fieldname": field.df.fieldname,
+                "data-fb-selected": String(selection === field.key),
+                minWidth: 0,
+                flexShrink: 0,
+                y: drag.offset(column.key, index),
+                opacity: drag.drag?.field.key === field.key && !drag.drag.palette ? 0 : 1,
+                transition: knobProps.transition,
+                children: renderFieldCard(field)
+              }, field.key)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+                minWidth: 0,
+                "data-fb-dropzone": column.key,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                  size: "$2",
+                  outlined: true,
+                  icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+                    size: iconSize
+                  }),
+                  "aria-label": t("formBuilder.addFieldToColumn", "Add field to {{column}}", {
+                    column: t("formBuilder.columnPosition", "{{section}}, column {{number}}", {
+                      section: sectionLabel(section.df?.label),
+                      number: columnIndex + 1
+                    })
+                  }),
+                  onPress: () => {
+                    const inserted = (0, import_model.insertField)(layout, (0, import_model.newFieldFromType)(layout, "Data"), {
+                      columnId: column.key,
+                      index: column.fields.length
+                    });
+                    onChange(inserted.layout);
+                    onSelect(inserted.key);
+                  },
+                  children: t("formBuilder.addFieldHere", "Add field")
+                })
+              })]
+            }, column.key))
+          })]
+        }, section.key))]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.body,
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: drag.announcement
+      })
+    }), import_components.isWeb && drag.drag ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      "data-fb-overlay": "",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      x: drag.drag.x,
+      y: drag.drag.y,
+      width: drag.drag.width,
+      pointerEvents: "none",
+      zIndex: 1e3,
+      transition: drag.drag.mode === "pointer" ? "none" : knobProps.transition,
+      "aria-hidden": true,
+      ...{
+        inert: true
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        scale: import_components.LIFT_SCALE,
+        children: renderFieldCard(drag.drag.field)
+      })
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ConfirmDialog, {
+      open: !!deleteKey,
+      onOpenChange: open => {
+        if (!open) setDeleteKey(void 0);
+      },
+      title: t("formBuilder.deleteTitle", "Remove this form item?"),
+      confirmLabel: t("formBuilder.delete", "Delete"),
+      destructive: true,
+      onConfirm: () => {
+        if (deleteKey) onChange((0, import_model.removeField)(layout, deleteKey));
+      }
+    })]
+  });
+}