@hybridcore/ui 1.6.0 → 1.6.2

package/dist/components/template-form/index.js

@@ -1,340 +1,301 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import k from "lodash";
-import f from "react";
-import { useForm as P, Controller as l } from "react-hook-form";
-import { CatalogueInstanceSelector as O } from "./components/catalogue-instance-selector/index.js";
-import j from "./components/property-list/index.js";
-import K from "./components/recognition-property-list/index.js";
-import { FormLabel as L, Button as g } from "@mui/material";
-import { getNestedChildrenFromMap as _ } from "../../utils/ontology.js";
-import { TreeSelect as w } from "../tree-select/index.js";
-import A from "./components/select-icon/index.js";
-import { T as m } from "../../TextField-1yCesIbH.js";
-import { F as h } from "../../property-list-form-zZQfpR0X.js";
-import { F as d } from "../../FormControlLabel-C8SPv14J.js";
-import { C as c } from "../../Checkbox-CWRMFTBp.js";
-import { B as p } from "../../Box-p6OtTUEo.js";
-function B(e, x) {
-  const {
-    register: s,
-    handleSubmit: T,
-    control: i,
-    formState: { errors: v },
-    getValues: b,
-    reset: V
-  } = P({
-    defaultValues: e.defaultValues
-  }), [C, F] = f.useState([]), I = (t) => {
-    const a = new Map(t);
-    for (const [r, o] of a)
-      a.set(r, {
-        ...o,
-        label: o.name,
-        value: o.templateKey,
-        checked: b("parent") === o.templateKey
-      });
-    return _(a, !1);
-  }, S = () => {
-    const t = I(e.mappedTemplates);
-    F(t);
-  }, M = () => {
-    if (e.onCancel) {
-      e.onCancel();
-      return;
-    }
-  };
-  return f.useImperativeHandle(x, () => ({
-    getValues: b,
-    resetForm() {
-      V();
-    }
-  })), f.useEffect(() => (S(), () => {
-  }), [e.mappedTemplates]), /* @__PURE__ */ u("form", { onSubmit: (t, a) => {
-    t == null || t.preventDefault(), T(((o) => (y) => {
-      e.onSubmit(y, o);
-    })(a))();
-  }, children: [
-    /* @__PURE__ */ n(
-      m,
-      {
-        label: "Name *",
-        variant: e.inputVariant,
-        fullWidth: !0,
-        sx: { mb: 2 },
-        ...s("name", { required: !0 }),
-        ...v.name && {
-          helperText: "This field is required!",
-          error: !0
-        }
-      }
-    ),
-    /* @__PURE__ */ n(
-      m,
-      {
-        label: "Template Key",
-        variant: e.inputVariant,
-        fullWidth: !0,
-        disabled: e.disableTemlateKey,
-        sx: { mb: 2 },
-        ...s("templateKey")
-      }
-    ),
-    /* @__PURE__ */ n(
-      m,
-      {
-        label: "Description",
-        variant: e.inputVariant,
-        fullWidth: !0,
-        sx: { mb: 2 },
-        ...s("description")
-      }
-    ),
-    /* @__PURE__ */ n(
-      m,
-      {
-        label: "Version",
-        variant: e.inputVariant,
-        fullWidth: !0,
-        sx: { mb: 2 },
-        ...s("version")
-      }
-    ),
-    /* @__PURE__ */ n(h, { sx: { mb: 2 }, children: /* @__PURE__ */ n(
-      l,
-      {
-        name: "parent",
-        control: i,
-        render: ({ field: { value: t, onChange: a } }) => {
-          if (e.disableParent) {
-            const r = t ? e.mappedTemplates.get(t) : void 0;
-            return /* @__PURE__ */ n(
-              m,
-              {
-                label: "Parent",
-                variant: e.inputVariant,
-                fullWidth: !0,
-                disabled: !0,
-                value: (r == null ? void 0 : r.name) || "-"
-              }
-            );
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import S from "lodash";
+import p from "react";
+import { Controller as o } from "react-hook-form";
+import { FormControlLabel as c, Checkbox as m, FormLabel as y } from "@mui/material";
+import { CatalogueInstanceSelector as C } from "./components/catalogue-instance-selector/index.js";
+import { PropertyList as I } from "./components/property-list/index.js";
+import { RecognitionPropertyList as V } from "./components/recognition-property-list/index.js";
+import { SelectIcon as k } from "./components/select-icon/index.js";
+import { TreeSelect as x } from "../tree-select/index.js";
+import { LabeledField as d } from "./helpers.js";
+import { useTemplateFormLogic as M } from "./logic.js";
+import { TemplateFormRoot as L, TemplateFormField as s, TemplateFormFieldGroup as v, TemplateFormCheckboxesRow as R, TemplateFormActionsRow as j, TemplateFormCancelButton as w, TemplateFormActionsRight as A, TemplateFormExtraSaveButton as O, TemplateFormSaveButton as K } from "./styled.js";
+function B(t, P) {
+  const { refs: F, state: n, form: T, actions: b } = M(t), { control: l, register: u, getValues: h } = T;
+  return p.useImperativeHandle(P, () => ({
+    getValues: h,
+    resetForm: b.resetForm
+  })), /* @__PURE__ */ g(
+    L,
+    {
+      ref: F.rootRef,
+      sx: n.sx,
+      onSubmit: b.handleFormSubmit,
+      children: [
+        /* @__PURE__ */ e(d, { label: "Name", required: !0, labelPosition: n.labelPosition, children: /* @__PURE__ */ e(
+          s,
+          {
+            label: n.labelPosition === "default" ? "Name *" : void 0,
+            variant: n.inputVariant,
+            fullWidth: !0,
+            ...u("name", { required: !0 }),
+            ...n.errors.name && {
+              helperText: "This field is required!",
+              error: !0
+            }
           }
-          return /* @__PURE__ */ n(
-            w,
-            {
-              label: "Parent",
-              idKey: "templateKey",
-              data: C,
-              selected: t ? [t] : "",
-              onChange: (r, o) => {
-                a({
-                  target: {
-                    value: o ? r : ""
+        ) }),
+        /* @__PURE__ */ e(d, { label: "Template Key", labelPosition: n.labelPosition, children: /* @__PURE__ */ e(
+          s,
+          {
+            label: n.labelPosition === "default" ? "Template Key" : void 0,
+            variant: n.inputVariant,
+            fullWidth: !0,
+            disabled: t.disableTemplateKey,
+            ...u("templateKey")
+          }
+        ) }),
+        /* @__PURE__ */ e(d, { label: "Description", labelPosition: n.labelPosition, children: /* @__PURE__ */ e(
+          s,
+          {
+            label: n.labelPosition === "default" ? "Description" : void 0,
+            variant: n.inputVariant,
+            fullWidth: !0,
+            ...u("description")
+          }
+        ) }),
+        /* @__PURE__ */ e(d, { label: "Version", labelPosition: n.labelPosition, children: /* @__PURE__ */ e(
+          s,
+          {
+            label: n.labelPosition === "default" ? "Version" : void 0,
+            variant: n.inputVariant,
+            fullWidth: !0,
+            ...u("version")
+          }
+        ) }),
+        /* @__PURE__ */ e(d, { label: "Parent", labelPosition: n.labelPosition, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(
+          o,
+          {
+            name: "parent",
+            control: l,
+            render: ({ field: { value: a, onChange: i } }) => {
+              if (t.disableParent) {
+                const r = a ? t.templates.get(a) : void 0;
+                return /* @__PURE__ */ e(
+                  s,
+                  {
+                    label: n.labelPosition === "default" ? "Parent" : void 0,
+                    variant: n.inputVariant,
+                    fullWidth: !0,
+                    disabled: !0,
+                    value: (r == null ? void 0 : r.name) || "-"
                   }
-                }), S();
+                );
               }
+              return /* @__PURE__ */ e(
+                x,
+                {
+                  label: n.labelPosition === "default" ? "Parent" : void 0,
+                  idKey: "templateKey",
+                  data: n.parents,
+                  selected: a ? [a] : "",
+                  onChange: (r, f) => {
+                    i({ target: { value: f ? r : "" } }), b.refreshParents();
+                  }
+                }
+              );
             }
-          );
-        }
-      }
-    ) }),
-    "agentReferenceIds" in e.defaultValues && /* @__PURE__ */ n(
-      l,
-      {
-        name: "agentReferenceIds",
-        control: i,
-        render: ({ field: { onChange: t } }) => /* @__PURE__ */ n(
-          O,
+          }
+        ) }) }),
+        "agentReferenceIds" in t.values && /* @__PURE__ */ e(
+          o,
           {
-            templates: e.agentTemplates ?? /* @__PURE__ */ new Map(),
-            data: e.agentsData,
-            inputVariant: e.inputVariant,
-            selectedInstances: e.selectedAgentInstances,
-            onSelect: (a) => {
-              t({
-                target: {
-                  value: a
+            name: "agentReferenceIds",
+            control: l,
+            render: ({ field: { onChange: a } }) => /* @__PURE__ */ e(
+              C,
+              {
+                templates: t.agentTemplates ?? /* @__PURE__ */ new Map(),
+                data: t.agentsData,
+                inputVariant: n.inputVariant,
+                selectedInstances: t.selectedAgentInstances,
+                onSelect: (i) => {
+                  a({ target: { value: i } }), t.onAgentSelect && t.onAgentSelect(i);
+                },
+                onSearchSubmit: t.onCatalogueInstanceSearchSubmit,
+                openMapping: t.openMapping ?? !1,
+                mappingData: t.mappingData ?? [],
+                objectTemplate: t.objectTemplate ?? {},
+                mapboxAccessToken: t.mapboxAccessToken ?? "",
+                onMappingSubmit: t.onMappingSubmit ? t.onMappingSubmit : () => {
+                },
+                onMappingOpen: t.onMappingOpen ? t.onMappingOpen : () => {
+                },
+                onMappingClose: t.onMappingClose ? t.onMappingClose : () => {
                 }
-              }), e.onAgentSelect && e.onAgentSelect(a);
-            },
-            onSearchSubmit: e.onCatalogueInstanceSearchSubmit,
-            openMapping: e.openMapping ?? !1,
-            mappingData: e.mappingData ?? [],
-            objectTemplate: e.objectTemplate ?? {},
-            mapboxAccessToken: e.mapboxAccessToken ?? "",
-            onMappingSubmit: e.onMappingSubmit ? e.onMappingSubmit : () => {
-            },
-            onMappingOpen: e.onMappingOpen ? e.onMappingOpen : () => {
-            },
-            onMappingClose: e.onMappingClose ? e.onMappingClose : () => {
-            }
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ u(h, { row: !0, sx: { mb: 2 }, children: [
-      /* @__PURE__ */ n(
-        d,
-        {
-          control: /* @__PURE__ */ n(
-            l,
+        ),
+        /* @__PURE__ */ g(R, { row: !0, children: [
+          /* @__PURE__ */ e(
+            c,
             {
-              name: "creatable",
-              control: i,
-              render: ({ field: { value: t, ...a } }) => /* @__PURE__ */ n(c, { checked: t, ...a })
+              control: /* @__PURE__ */ e(
+                o,
+                {
+                  name: "creatable",
+                  control: l,
+                  render: ({ field: { value: a, ...i } }) => /* @__PURE__ */ e(m, { checked: a, ...i })
+                }
+              ),
+              label: "Creatable"
             }
           ),
-          label: "Creatable"
-        }
-      ),
-      /* @__PURE__ */ n(
-        d,
-        {
-          control: /* @__PURE__ */ n(
-            l,
+          /* @__PURE__ */ e(
+            c,
             {
-              name: "editable",
-              control: i,
-              render: ({ field: { value: t, ...a } }) => /* @__PURE__ */ n(c, { checked: t, ...a })
+              control: /* @__PURE__ */ e(
+                o,
+                {
+                  name: "editable",
+                  control: l,
+                  render: ({ field: { value: a, ...i } }) => /* @__PURE__ */ e(m, { checked: a, ...i })
+                }
+              ),
+              label: "Editable"
             }
           ),
-          label: "Editable"
-        }
-      ),
-      "stationary" in e.defaultValues && /* @__PURE__ */ n(
-        d,
-        {
-          control: /* @__PURE__ */ n(
-            l,
+          "stationary" in t.values && /* @__PURE__ */ e(
+            c,
             {
-              name: "stationary",
-              control: i,
-              render: ({ field: { value: t, ...a } }) => /* @__PURE__ */ n(c, { checked: t, ...a })
+              control: /* @__PURE__ */ e(
+                o,
+                {
+                  name: "stationary",
+                  control: l,
+                  render: ({ field: { value: a, ...i } }) => /* @__PURE__ */ e(m, { checked: a, ...i })
+                }
+              ),
+              label: "Stationary"
             }
           ),
-          label: "Stationary"
-        }
-      ),
-      "livingObject" in e.defaultValues && /* @__PURE__ */ n(
-        d,
-        {
-          control: /* @__PURE__ */ n(
-            l,
+          "livingObject" in t.values && /* @__PURE__ */ e(
+            c,
             {
-              name: "livingObject",
-              control: i,
-              render: ({ field: { value: t, ...a } }) => /* @__PURE__ */ n(c, { checked: t, ...a })
+              control: /* @__PURE__ */ e(
+                o,
+                {
+                  name: "livingObject",
+                  control: l,
+                  render: ({ field: { value: a, ...i } }) => /* @__PURE__ */ e(m, { checked: a, ...i })
+                }
+              ),
+              label: "Living Object"
             }
           ),
-          label: "Living Object"
-        }
-      ),
-      "storeFile" in e.defaultValues && /* @__PURE__ */ n(
-        d,
-        {
-          control: /* @__PURE__ */ n(
-            l,
+          "storeFile" in t.values && /* @__PURE__ */ e(
+            c,
             {
-              name: "storeFile",
-              control: i,
-              render: ({ field: { value: t, ...a } }) => /* @__PURE__ */ n(c, { checked: t, ...a })
+              control: /* @__PURE__ */ e(
+                o,
+                {
+                  name: "storeFile",
+                  control: l,
+                  render: ({ field: { value: a, ...i } }) => /* @__PURE__ */ e(m, { checked: a, ...i })
+                }
+              ),
+              label: "Store File"
             }
-          ),
-          label: "Store File"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ u(h, { children: [
-      /* @__PURE__ */ n(L, { children: "Icon" }),
-      /* @__PURE__ */ n(
-        l,
-        {
-          name: "icon",
-          control: i,
-          render: ({ field: { value: t, onChange: a } }) => /* @__PURE__ */ n(
-            A,
+          )
+        ] }),
+        /* @__PURE__ */ e(d, { label: "Icon", labelPosition: n.labelPosition, children: /* @__PURE__ */ g(v, { children: [
+          n.labelPosition === "default" && /* @__PURE__ */ e(y, { children: "Icon" }),
+          /* @__PURE__ */ e(
+            o,
             {
-              list: [],
-              value: t ?? "",
-              newIcon: "",
-              onFileUpload: a,
-              onChange: a
+              name: "icon",
+              control: l,
+              render: ({ field: { value: a, onChange: i } }) => /* @__PURE__ */ e(
+                k,
+                {
+                  list: t.iconList ?? [],
+                  value: a ?? "",
+                  newIcon: t.newIcon ?? null,
+                  loading: t.iconUploading,
+                  onFileUpload: (r) => {
+                    var f;
+                    return (f = t.onIconUpload) == null ? void 0 : f.call(t, r);
+                  },
+                  onChange: i
+                }
+              )
             }
           )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ n(
-      l,
-      {
-        name: "properties",
-        control: i,
-        render: ({ field: { value: t, onChange: a } }) => /* @__PURE__ */ n(
-          j,
+        ] }) }),
+        /* @__PURE__ */ e(
+          o,
           {
-            list: t || [],
-            inputVariant: e.inputVariant,
-            templateId: k.get(e.defaultValues, "id"),
-            disablePropertyId: e.disablePropertyId,
-            onChange: a
+            name: "properties",
+            control: l,
+            render: ({ field: { value: a, onChange: i } }) => /* @__PURE__ */ e(
+              I,
+              {
+                list: a || [],
+                inputVariant: n.inputVariant,
+                labelPosition: n.labelPosition,
+                templateId: S.get(t.values, "id"),
+                disablePropertyId: t.disablePropertyId,
+                onChange: i
+              }
+            )
           }
-        )
-      }
-    ),
-    "recognitionPropertyList" in e.defaultValues && /* @__PURE__ */ n(
-      l,
-      {
-        name: "recognitionPropertyList",
-        control: i,
-        render: ({ field: { value: t, onChange: a } }) => /* @__PURE__ */ n(
-          K,
+        ),
+        "recognitionPropertyList" in t.values && /* @__PURE__ */ e(
+          o,
           {
-            list: t || [],
-            getFormValues: b,
-            onChange: a
+            name: "recognitionPropertyList",
+            control: l,
+            render: ({ field: { value: a, onChange: i } }) => /* @__PURE__ */ e(
+              V,
+              {
+                list: a || [],
+                getFormValues: h,
+                onChange: i
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ u(p, { display: "flex", justifyContent: "space-between", mt: 3, children: [
-      /* @__PURE__ */ n(
-        g,
-        {
-          color: "primary",
-          variant: "text",
-          disabled: e.loading,
-          sx: { textTransform: "none" },
-          onClick: M,
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ n(p, { children: e.saveButtons ? e.saveButtons.map((t, a) => /* @__PURE__ */ n(
-        g,
-        {
-          type: "submit",
-          color: "primary",
-          variant: "contained",
-          disabled: e.loading,
-          startIcon: t.icon,
-          sx: { ml: 1, textTransform: "none" },
-          onClick: t.onClick,
-          children: t.label
-        },
-        a
-      )) : /* @__PURE__ */ n(
-        g,
-        {
-          type: "submit",
-          color: "primary",
-          variant: "contained",
-          disabled: e.loading,
-          sx: { textTransform: "none" },
-          children: e.loading ? "Saving..." : "Save"
-        }
-      ) })
-    ] })
-  ] });
+        ),
+        /* @__PURE__ */ g(j, { children: [
+          /* @__PURE__ */ e(
+            w,
+            {
+              color: "primary",
+              variant: "text",
+              disabled: n.loading,
+              onClick: b.handleOnCancel,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ e(A, { children: t.saveButtons ? t.saveButtons.map((a, i) => /* @__PURE__ */ e(
+            O,
+            {
+              type: "submit",
+              color: "primary",
+              variant: "contained",
+              disabled: n.loading,
+              startIcon: a.icon,
+              onClick: a.onClick,
+              children: a.label
+            },
+            i
+          )) : /* @__PURE__ */ e(
+            K,
+            {
+              type: "submit",
+              color: "primary",
+              variant: "contained",
+              disabled: n.loading,
+              children: n.loading ? "Saving..." : "Save"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
 }
-const te = f.forwardRef(B);
+const Z = p.forwardRef(B);
 export {
-  te as TemplateForm
+  Z as TemplateForm
 };

package/dist/components/template-form/logic.js

@@ -0,0 +1,69 @@
+import { useThemeProps as K } from "@mui/material";
+import { useRef as M, useState as N, useEffect as R } from "react";
+import { useForm as D } from "react-hook-form";
+import { getNestedChildrenFromMap as E } from "../../utils/ontology.js";
+const z = (f) => {
+  const s = K({ props: f, name: "HCTemplateForm" }), {
+    values: i,
+    inputVariant: a = "outlined",
+    labelPosition: n = "default",
+    loading: l = !1,
+    templates: m,
+    onCancel: c,
+    onSubmit: d
+  } = s, h = M(null), S = D({ defaultValues: i }), { control: g, formState: F, getValues: p, handleSubmit: b, register: T, reset: x } = S, [C, P] = N([]), w = (e) => {
+    const o = new Map(e);
+    for (const [r, t] of o)
+      o.set(r, {
+        ...t,
+        label: t.name,
+        value: t.templateKey,
+        checked: p("parent") === t.templateKey
+      });
+    return E(o, !1);
+  }, u = () => {
+    P(w(m));
+  };
+  R(() => (u(), () => {
+  }), [m]);
+  const y = () => {
+    c && c();
+  }, V = (e, o) => {
+    var r;
+    (r = e == null ? void 0 : e.preventDefault) == null || r.call(e), b((t) => {
+      d(t, o);
+    })();
+  }, k = () => {
+    x();
+  };
+  return {
+    refs: { rootRef: h },
+    state: {
+      ownerState: {
+        inputVariant: a,
+        labelPosition: n,
+        loading: l
+      },
+      parents: C,
+      inputVariant: a,
+      labelPosition: n,
+      loading: l,
+      errors: F.errors,
+      sx: s.sx
+    },
+    form: {
+      control: g,
+      getValues: p,
+      register: T
+    },
+    actions: {
+      refreshParents: u,
+      handleOnCancel: y,
+      handleFormSubmit: V,
+      resetForm: k
+    }
+  };
+};
+export {
+  z as useTemplateFormLogic
+};