@webiny/app-admin 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/features/formModel/FocusManager.js

@@ -0,0 +1,109 @@
+import { isObjectField } from "./ObjectField.js";
+import { LayoutBuilderFactory } from "./LayoutBuilderFactory.js";
+export class FocusManager {
+  constructor(_fields) {
+    this._fields = _fields;
+  }
+  buildFocusPath(name, layout) {
+    const segments = name.split(".");
+    return this.walkLayout(layout, segments, this._fields);
+  }
+  walkLayout(layout, segments, fieldScope) {
+    const target = segments[0];
+    for (const node of layout) {
+      switch (node.type) {
+        case "row":
+          {
+            if (!node.fieldIds.includes(target)) {
+              break;
+            }
+            return this.diveIntoField(target, segments, fieldScope);
+          }
+        case "object":
+          {
+            if (node.fieldName !== target) {
+              break;
+            }
+            return this.diveIntoObjectNode(node, segments, fieldScope);
+          }
+        case "tabs":
+          {
+            const tabKey = node.id || LayoutBuilderFactory.tabsNodeKey(node);
+            for (const tab of node.tabs) {
+              const result = this.walkLayout(tab.layout, segments, fieldScope);
+              if (result !== null) {
+                return [{
+                  tabKey,
+                  tabId: tab.id
+                }, ...result];
+              }
+            }
+            break;
+          }
+      }
+    }
+    return null;
+  }
+  diveIntoField(fieldName, segments, fieldScope) {
+    if (segments.length === 1) {
+      return [];
+    }
+    const field = fieldScope.get(fieldName);
+    if (!field || !isObjectField(field)) {
+      return [];
+    }
+    const childScope = this.resolveChildScope(field, segments);
+    if (!childScope) {
+      return [];
+    }
+    const inner = field.getInnerLayout();
+    if (!inner) {
+      return [];
+    }
+    return this.walkLayout(inner, childScope.segments, childScope.children);
+  }
+  diveIntoObjectNode(node, segments, fieldScope) {
+    if (segments.length === 1) {
+      return [];
+    }
+    const field = fieldScope.get(node.fieldName);
+    if (!field || !isObjectField(field)) {
+      return [];
+    }
+    const childScope = this.resolveChildScope(field, segments);
+    if (!childScope) {
+      return [];
+    }
+    const inner = Array.isArray(node.inner) ? node.inner : field.activeTemplateId ? node.inner[field.activeTemplateId] ?? null : null;
+    if (!inner) {
+      const stored = field.getInnerLayout();
+      if (!stored) {
+        return [];
+      }
+      return this.walkLayout(stored, childScope.segments, childScope.children);
+    }
+    return this.walkLayout(inner, childScope.segments, childScope.children);
+  }
+  resolveChildScope(field, segments) {
+    const nextSegment = segments[1];
+    if (field.isList) {
+      const index = parseInt(nextSegment, 10);
+      if (!isNaN(index)) {
+        const item = field.items[index];
+        if (!item) {
+          return null;
+        }
+        return {
+          segments: segments.slice(2),
+          children: item.children
+        };
+      }
+    }
+    return {
+      segments: segments.slice(1),
+      children: field.children
+    };
+  }
+}
+
+//# sourceMappingURL=FocusManager.js.map

package/features/formModel/FocusManager.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isObjectField","LayoutBuilderFactory","FocusManager","constructor","_fields","buildFocusPath","name","layout","segments","split","walkLayout","fieldScope","target","node","type","fieldIds","includes","diveIntoField","fieldName","diveIntoObjectNode","tabKey","id","tabsNodeKey","tab","tabs","result","tabId","length","field","get","childScope","resolveChildScope","inner","getInnerLayout","children","Array","isArray","activeTemplateId","stored","nextSegment","isList","index","parseInt","isNaN","item","items","slice"],"sources":["FocusManager.ts"],"sourcesContent":["import { isObjectField } from \"./ObjectField.js\";\nimport { LayoutBuilderFactory } from \"./LayoutBuilderFactory.js\";\nimport type { IField, IObjectField, LayoutNode, IObjectNode } from \"./abstractions.js\";\n\nexport interface TabActivation {\n    tabKey: string;\n    tabId: string;\n}\n\nexport class FocusManager {\n    constructor(private _fields: Map<string, IField>) {}\n\n    buildFocusPath(name: string, layout: LayoutNode[]): TabActivation[] | null {\n        const segments = name.split(\".\");\n        return this.walkLayout(layout, segments, this._fields);\n    }\n\n    private walkLayout(\n        layout: LayoutNode[],\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        const target = segments[0];\n\n        for (const node of layout) {\n            switch (node.type) {\n                case \"row\": {\n                    if (!node.fieldIds.includes(target)) {\n                        break;\n                    }\n                    return this.diveIntoField(target, segments, fieldScope);\n                }\n                case \"object\": {\n                    if (node.fieldName !== target) {\n                        break;\n                    }\n                    return this.diveIntoObjectNode(node, segments, fieldScope);\n                }\n                case \"tabs\": {\n                    const tabKey = node.id || LayoutBuilderFactory.tabsNodeKey(node);\n                    for (const tab of node.tabs) {\n                        const result = this.walkLayout(tab.layout, segments, fieldScope);\n                        if (result !== null) {\n                            return [{ tabKey, tabId: tab.id }, ...result];\n                        }\n                    }\n                    break;\n                }\n            }\n        }\n        return null;\n    }\n\n    private diveIntoField(\n        fieldName: string,\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        if (segments.length === 1) {\n            return [];\n        }\n        const field = fieldScope.get(fieldName);\n        if (!field || !isObjectField(field)) {\n            return [];\n        }\n        const childScope = this.resolveChildScope(field, segments);\n        if (!childScope) {\n            return [];\n        }\n        const inner = field.getInnerLayout();\n        if (!inner) {\n            return [];\n        }\n        return this.walkLayout(inner, childScope.segments, childScope.children);\n    }\n\n    private diveIntoObjectNode(\n        node: IObjectNode,\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        if (segments.length === 1) {\n            return [];\n        }\n        const field = fieldScope.get(node.fieldName);\n        if (!field || !isObjectField(field)) {\n            return [];\n        }\n        const childScope = this.resolveChildScope(field, segments);\n        if (!childScope) {\n            return [];\n        }\n        const inner = Array.isArray(node.inner)\n            ? node.inner\n            : field.activeTemplateId\n              ? (node.inner[field.activeTemplateId] ?? null)\n              : null;\n        if (!inner) {\n            const stored = field.getInnerLayout();\n            if (!stored) {\n                return [];\n            }\n            return this.walkLayout(stored, childScope.segments, childScope.children);\n        }\n        return this.walkLayout(inner, childScope.segments, childScope.children);\n    }\n\n    private resolveChildScope(\n        field: IObjectField,\n        segments: string[]\n    ): { segments: string[]; children: Map<string, IField> } | null {\n        const nextSegment = segments[1];\n        if (field.isList) {\n            const index = parseInt(nextSegment, 10);\n            if (!isNaN(index)) {\n                const item = field.items[index];\n                if (!item) {\n                    return null;\n                }\n                return { segments: segments.slice(2), children: item.children };\n            }\n        }\n        return { segments: segments.slice(1), children: field.children };\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/features/formModel/FormErrors.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { IFormVM } from "./abstractions.js";
+interface FormErrorsProps {
+    form: IFormVM;
+}
+export declare const FormErrors: (({ form }: FormErrorsProps) => React.JSX.Element | null) & {
+    displayName: string;
+};
+export {};

package/features/formModel/FormErrors.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import { Alert, Heading } from "@webiny/admin-ui";
+export const FormErrors = observer(({
+  form
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (form.submitCount > 0 && form.errors.length > 0 && ref.current) {
+      ref.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+    }
+  }, [form.submitCount]);
+  if (form.errors.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Alert, {
+    type: "danger",
+    variant: "subtle"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: 6
+  }, "Some fields contain errors"), /*#__PURE__*/React.createElement("ul", {
+    className: "list-disc mt-sm"
+  }, form.errors.map((error, index) => /*#__PURE__*/React.createElement("li", {
+    key: index,
+    className: "my-xs"
+  }, error.path ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "underline cursor-pointer",
+    onClick: () => form.focusField(error.path)
+  }, error.breadcrumb ? error.breadcrumb.join(" › ") : error.label ?? error.path) : error.label, ": ", error.message)))));
+});
+
+//# sourceMappingURL=FormErrors.js.map

package/features/formModel/FormErrors.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","observer","Alert","Heading","FormErrors","form","ref","submitCount","errors","length","current","scrollIntoView","behavior","block","createElement","type","variant","level","className","map","error","index","key","path","onClick","focusField","breadcrumb","join","label","message"],"sources":["FormErrors.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Alert, Heading } from \"@webiny/admin-ui\";\nimport type { IFormVM } from \"./abstractions.js\";\n\ninterface FormErrorsProps {\n    form: IFormVM;\n}\n\nexport const FormErrors = observer(({ form }: FormErrorsProps) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (form.submitCount > 0 && form.errors.length > 0 && ref.current) {\n            ref.current.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n        }\n    }, [form.submitCount]);\n\n    if (form.errors.length === 0) {\n        return null;\n    }\n\n    return (\n        <div ref={ref}>\n            <Alert type=\"danger\" variant=\"subtle\">\n                <Heading level={6}>Some fields contain errors</Heading>\n                <ul className=\"list-disc mt-sm\">\n                    {form.errors.map((error, index) => (\n                        <li key={index} className={\"my-xs\"}>\n                            {error.path ? (\n                                <button\n                                    type=\"button\"\n                                    className=\"underline cursor-pointer\"\n                                    onClick={() => form.focusField(error.path)}\n                                >\n                                    {error.breadcrumb\n                                        ? error.breadcrumb.join(\" › \")\n                                        : (error.label ?? error.path)}\n                                </button>\n                            ) : (\n                                error.label\n                            )}\n                            : {error.message}\n                        </li>\n                    ))}\n                </ul>\n            </Alert>\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,KAAK,EAAEC,OAAO,QAAQ,kBAAkB;AAOjD,OAAO,MAAMC,UAAU,GAAGH,QAAQ,CAAC,CAAC;EAAEI;AAAsB,CAAC,KAAK;EAC9D,MAAMC,GAAG,GAAGN,MAAM,CAAiB,IAAI,CAAC;EAExCD,SAAS,CAAC,MAAM;IACZ,IAAIM,IAAI,CAACE,WAAW,GAAG,CAAC,IAAIF,IAAI,CAACG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAIH,GAAG,CAACI,OAAO,EAAE;MAC/DJ,GAAG,CAACI,OAAO,CAACC,cAAc,CAAC;QAAEC,QAAQ,EAAE,QAAQ;QAAEC,KAAK,EAAE;MAAS,CAAC,CAAC;IACvE;EACJ,CAAC,EAAE,CAACR,IAAI,CAACE,WAAW,CAAC,CAAC;EAEtB,IAAIF,IAAI,CAACG,MAAM,CAACC,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAO,IAAI;EACf;EAEA,oBACIX,KAAA,CAAAgB,aAAA;IAAKR,GAAG,EAAEA;EAAI,gBACVR,KAAA,CAAAgB,aAAA,CAACZ,KAAK;IAACa,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAC;EAAQ,gBACjClB,KAAA,CAAAgB,aAAA,CAACX,OAAO;IAACc,KAAK,EAAE;EAAE,GAAC,4BAAmC,CAAC,eACvDnB,KAAA,CAAAgB,aAAA;IAAII,SAAS,EAAC;EAAiB,GAC1Bb,IAAI,CAACG,MAAM,CAACW,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBAC1BvB,KAAA,CAAAgB,aAAA;IAAIQ,GAAG,EAAED,KAAM;IAACH,SAAS,EAAE;EAAQ,GAC9BE,KAAK,CAACG,IAAI,gBACPzB,KAAA,CAAAgB,aAAA;IACIC,IAAI,EAAC,QAAQ;IACbG,SAAS,EAAC,0BAA0B;IACpCM,OAAO,EAAEA,CAAA,KAAMnB,IAAI,CAACoB,UAAU,CAACL,KAAK,CAACG,IAAI;EAAE,GAE1CH,KAAK,CAACM,UAAU,GACXN,KAAK,CAACM,UAAU,CAACC,IAAI,CAAC,KAAK,CAAC,GAC3BP,KAAK,CAACQ,KAAK,IAAIR,KAAK,CAACG,IACxB,CAAC,GAETH,KAAK,CAACQ,KACT,EAAC,IACA,EAACR,KAAK,CAACS,OACT,CACP,CACD,CACD,CACN,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/features/formModel/FormModel.d.ts

@@ -0,0 +1,59 @@
+import type { IFormModel, IField, IFieldBuilder, IFieldBuilderRegistry, IFormVM, IFormError, IFormModelConfig, ILayoutBuilder, ILayoutNodeBuilder, ILayoutModifier, IPositionedLayoutNode, ILayoutNodeAccessHandle, IRule, LayoutNode, LayoutNodeVM, FormRule } from "./abstractions.js";
+export declare class FormModel implements IFormModel {
+    private _fields;
+    private _builders;
+    private _layout;
+    private _baseline;
+    private _submitted;
+    private _submitCount;
+    private _validateOnChange;
+    private _isValid;
+    private _formRuleErrors;
+    private _activeTabs;
+    private _ruleEvaluators;
+    private _warnedRuleTypes;
+    private _formRules;
+    private _lastFocusedField;
+    private _registry;
+    private _layoutMutator;
+    private _layoutResolver;
+    private _focusManager;
+    constructor(config: IFormModelConfig, registry: IFieldBuilderRegistry);
+    evaluateRules(rules: IRule[] | undefined): {
+        visible: boolean;
+        disabled: boolean;
+    };
+    field(name: string): IField;
+    focusField(name: string): void;
+    fields(factory: (registry: IFieldBuilderRegistry) => Record<string, IFieldBuilder | undefined>): void;
+    layout(factory: (layout: ILayoutModifier) => (LayoutNode | IPositionedLayoutNode)[]): void;
+    layout(nodeId: string): ILayoutNodeAccessHandle;
+    removeField(name: string): void;
+    getData(): Record<string, unknown>;
+    setData(data: Record<string, unknown>): void;
+    reset(): void;
+    get isDirty(): boolean;
+    get isValid(): boolean | null;
+    get submitted(): boolean;
+    get submitCount(): number;
+    get errors(): IFormError[];
+    addRule(rule: FormRule): void;
+    setLayout(factory: (layout: ILayoutBuilder) => ILayoutNodeBuilder[]): void;
+    validate(): Promise<boolean>;
+    submit<T = Record<string, unknown>>(): Promise<T | false>;
+    get vm(): IFormVM;
+    get registry(): IFieldBuilderRegistry;
+    resolveChildLayout(layout: LayoutNode[], children: Map<string, IField>): LayoutNodeVM[];
+    getField(name: string): IField | undefined;
+    getFields(): Map<string, IField>;
+    getFieldBuilders(predicate?: (builder: IFieldBuilder) => boolean): IFieldBuilder[];
+    private _runFormRule;
+    private _tryGetField;
+    private _registerObjectNodeLayouts;
+    private _propagateAncestorRules;
+    private _generateDefaultLayout;
+    private _warnOrphanFields;
+    private _snapshotBaseline;
+    private _resetAllValidation;
+    private _createField;
+}