@hybridcore/ui 1.3.7 → 1.4.0

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

@@ -0,0 +1,186 @@
+import { jsxs as n, Fragment as C, jsx as e } from "react/jsx-runtime";
+import a from "react";
+import { AddPhotoAlternate as I, Delete as W, Search as j, CheckBox as E, CloudUpload as P, Add as _ } from "@mui/icons-material";
+import { IconButton as S, Dialog as N, DialogContent as O, Box as u, TextField as q, InputAdornment as z, Button as d, DialogActions as G } from "@mui/material";
+import i from "./styled.js";
+import H from "../../../../hooks/useToggle.js";
+import J from "../../../tabs/index.js";
+function Z({
+  value: s,
+  list: A,
+  newIcon: o,
+  loading: m,
+  onChange: f,
+  onFileUpload: y
+}) {
+  const { state: b, action: g } = H(!1), [x, k] = a.useState(""), [l, r] = a.useState(null), [p, B] = a.useState();
+  a.useEffect(() => (o && r(o), () => {
+  }), [o]);
+  const F = (t) => {
+    k(t.target.value);
+  }, U = (t) => () => {
+    r(t);
+  }, v = () => {
+    l && (f(l), h());
+  }, D = () => {
+    r(null), f("");
+  }, h = () => {
+    g.close(), r(null);
+  }, R = (t) => {
+    t.target.files && B(t.target.files[0]);
+  }, T = () => {
+    p && y(p);
+  };
+  return /* @__PURE__ */ n(C, { children: [
+    /* @__PURE__ */ n(i.Container, { children: [
+      s ? /* @__PURE__ */ e(i.Img, { src: s }) : /* @__PURE__ */ e(I, { color: "action" }),
+      /* @__PURE__ */ n(i.Actions, { children: [
+        /* @__PURE__ */ e(
+          S,
+          {
+            title: "Add Icon",
+            color: "primary",
+            onClick: g.open,
+            children: /* @__PURE__ */ e(I, {})
+          }
+        ),
+        !!s && /* @__PURE__ */ e(
+          S,
+          {
+            title: "Remove Icon",
+            color: "primary",
+            onClick: D,
+            children: /* @__PURE__ */ e(W, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ n(
+      N,
+      {
+        open: b.isOpen,
+        onClose: h,
+        maxWidth: "sm",
+        fullWidth: !0,
+        scroll: "paper",
+        children: [
+          /* @__PURE__ */ e(O, { sx: { padding: 0 }, children: /* @__PURE__ */ e(
+            J,
+            {
+              tabContents: [
+                {
+                  label: "Choose Icon",
+                  content: /* @__PURE__ */ n(u, { p: 1, children: [
+                    /* @__PURE__ */ e(
+                      q,
+                      {
+                        label: "Search",
+                        id: "search-input",
+                        fullWidth: !0,
+                        sx: { mb: 1 },
+                        onChange: F,
+                        InputProps: {
+                          startAdornment: /* @__PURE__ */ e(z, { position: "start", children: /* @__PURE__ */ e(j, {}) })
+                        }
+                      }
+                    ),
+                    A.filter((t) => {
+                      const c = t.split("/ontology-icon/");
+                      return !(c[1] && c[1].includes("/"));
+                    }).filter((t) => {
+                      if (x) {
+                        if (t.search(new RegExp(x, "i")) !== -1)
+                          return !0;
+                      } else return !0;
+                      return !1;
+                    }).map((t, c) => /* @__PURE__ */ n(
+                      i.SelectButton,
+                      {
+                        variant: l === t ? "outlined" : "text",
+                        onClick: U(t),
+                        sx: { padding: 1 },
+                        children: [
+                          /* @__PURE__ */ e("img", { src: t, alt: "icon", width: "auto", height: 64 }),
+                          l === t ? /* @__PURE__ */ e(E, {}) : null
+                        ]
+                      },
+                      c
+                    ))
+                  ] })
+                },
+                {
+                  label: "Upload Icon",
+                  content: /* @__PURE__ */ n(C, { children: [
+                    o && /* @__PURE__ */ e(
+                      u,
+                      {
+                        p: 1,
+                        display: "inline-block",
+                        className: "iconSelection",
+                        children: /* @__PURE__ */ e(d, { variant: "outlined", color: "secondary", children: /* @__PURE__ */ e(
+                          "img",
+                          {
+                            src: o,
+                            alt: "icon",
+                            width: "auto",
+                            height: 64
+                          }
+                        ) })
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      u,
+                      {
+                        p: 1,
+                        paddingTop: 2,
+                        display: "flex",
+                        alignItems: "center",
+                        children: [
+                          /* @__PURE__ */ e(
+                            i.FileUploadInput,
+                            {
+                              type: "file",
+                              onChange: R
+                            }
+                          ),
+                          /* @__PURE__ */ e(
+                            d,
+                            {
+                              onClick: T,
+                              variant: "contained",
+                              color: "primary",
+                              startIcon: /* @__PURE__ */ e(P, {}),
+                              disabled: m || p === null,
+                              children: m ? "Uploading..." : "Upload!"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] })
+                }
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ n(G, { style: { padding: "5px 15px 15px 15px" }, children: [
+            /* @__PURE__ */ e(d, { onClick: h, variant: "contained", children: "Cancel" }),
+            /* @__PURE__ */ e(
+              d,
+              {
+                onClick: v,
+                color: "primary",
+                variant: "contained",
+                disabled: l === null,
+                startIcon: /* @__PURE__ */ e(_, {}),
+                children: "Add Icon"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Z as default
+};

package/dist/components/template-form/components/select-icon/styled.js

@@ -0,0 +1,76 @@
+import { styled as o, Button as i } from "@mui/material";
+const e = o("div")(({ theme: t }) => ({
+  position: "relative",
+  display: "flex",
+  width: 150,
+  height: 150,
+  justifyContent: "center",
+  alignItems: "center",
+  border: `1px solid ${t.palette.text.disabled}`,
+  marginTop: 10,
+  padding: 10,
+  borderRadius: 5,
+  overflow: "hidden",
+  "&:hover": {
+    "& > img": {
+      opacity: 0.2
+    },
+    "& > div": {
+      display: "flex",
+      opacity: 1
+    }
+  }
+})), r = o("img")({
+  width: "100%",
+  transition: "all 0.3s",
+  opacity: 1
+}), n = o("div")({
+  position: "absolute",
+  display: "none",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 9,
+  transition: "all 0.3s",
+  justifyContent: "center",
+  alignItems: "center",
+  opacity: 0
+}), a = o(i)(({ theme: t }) => ({
+  position: "relative",
+  ...t.palette.mode === "light" ? {
+    color: t.palette.primary.main,
+    borderColor: t.palette.primary.main
+  } : {
+    color: t.palette.text.primary,
+    borderColor: t.palette.text.primary
+  },
+  "&.MuiButton-textPrimary": {
+    border: "1px solid transparent"
+  },
+  ".MuiSvgIcon-root": {
+    position: "absolute",
+    top: 0,
+    right: 1,
+    width: 20,
+    height: 20,
+    zIndex: 9
+  }
+})), l = o("input")(({ theme: t }) => ({
+  flex: 1,
+  border: "1px solid",
+  borderColor: t.palette.text.disabled,
+  //var(--bg-grid);
+  padding: 6,
+  marginRight: 5,
+  borderRadius: 5
+})), p = {
+  Container: e,
+  Img: r,
+  Actions: n,
+  SelectButton: a,
+  FileUploadInput: l
+};
+export {
+  p as default
+};

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

@@ -0,0 +1,338 @@
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import f from "react";
+import P from "lodash";
+import { useForm as M, Controller as l } from "react-hook-form";
+import j from "./components/property-list/index.js";
+import O from "./components/recognition-property-list/index.js";
+import { CatalogueInstanceSelector as K } from "./components/catalogue-instance-selector/index.js";
+import { getNestedChildrenFromMap as L } from "../../utils/ontology.js";
+import { Container as _ } from "../container/index.js";
+import { TreeSelect as w } from "../tree-select/index.js";
+import { FormLabel as A, Button as b } from "@mui/material";
+import B from "./components/select-icon/index.js";
+import { T as m } from "../../TextField-D87qTh1k.js";
+import { F as g } from "../../property-list-form-BfP9gzSo.js";
+import { F as d } from "../../FormControlLabel-D9KFjcIx.js";
+import { C as c } from "../../Checkbox-qy3cjvnb.js";
+import { B as x } from "../../Box-BPyg-Ybm.js";
+function D(e, p) {
+  const {
+    register: s,
+    handleSubmit: T,
+    control: i,
+    formState: { errors: v },
+    getValues: h,
+    reset: C
+  } = M({
+    defaultValues: e.defaultValues
+  }), [V, F] = f.useState([]), I = (n) => {
+    const a = new Map(n);
+    for (const [r, o] of a)
+      a.set(r, {
+        ...o,
+        label: o.name,
+        value: o.templateKey,
+        checked: h("parent") === o.templateKey
+      });
+    return L(a);
+  }, S = () => {
+    const n = I(e.mappedTemplates);
+    F(n);
+  }, k = () => {
+    if (e.onCancel) {
+      e.onCancel();
+      return;
+    }
+  };
+  return f.useImperativeHandle(p, () => ({
+    resetForm() {
+      C();
+    }
+  })), f.useEffect(() => (S(), () => {
+  }), [e.mappedTemplates]), /* @__PURE__ */ t(_, { disableHeader: !0, children: /* @__PURE__ */ u("form", { onSubmit: (n, a) => {
+    n == null || n.preventDefault(), T(((o) => (y) => {
+      e.onSubmit(y, o);
+    })(a))();
+  }, children: [
+    /* @__PURE__ */ t(
+      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__ */ t(
+      m,
+      {
+        label: "Template Key",
+        variant: e.inputVariant,
+        fullWidth: !0,
+        disabled: e.disableTemlateKey,
+        sx: { mb: 2 },
+        ...s("templateKey")
+      }
+    ),
+    /* @__PURE__ */ t(
+      m,
+      {
+        label: "Description",
+        variant: e.inputVariant,
+        fullWidth: !0,
+        sx: { mb: 2 },
+        ...s("description")
+      }
+    ),
+    /* @__PURE__ */ t(
+      m,
+      {
+        label: "Version",
+        variant: e.inputVariant,
+        fullWidth: !0,
+        sx: { mb: 2 },
+        ...s("version")
+      }
+    ),
+    /* @__PURE__ */ t(g, { sx: { mb: 2 }, children: /* @__PURE__ */ t(
+      l,
+      {
+        name: "parent",
+        control: i,
+        render: ({ field: { value: n, onChange: a } }) => {
+          if (e.disableParent) {
+            const r = n ? e.mappedTemplates.get(n) : void 0;
+            return /* @__PURE__ */ t(
+              m,
+              {
+                label: "Parent",
+                variant: e.inputVariant,
+                fullWidth: !0,
+                disabled: !0,
+                value: (r == null ? void 0 : r.name) || "-"
+              }
+            );
+          }
+          return /* @__PURE__ */ t(
+            w,
+            {
+              label: "Parent",
+              idKey: "templateKey",
+              data: V,
+              selected: n ? [n] : "",
+              onChange: (r, o) => {
+                a({
+                  target: {
+                    value: o ? r : ""
+                  }
+                }), S();
+              }
+            }
+          );
+        }
+      }
+    ) }),
+    "agentReferenceIds" in e.defaultValues && /* @__PURE__ */ t(
+      l,
+      {
+        name: "agentReferenceIds",
+        control: i,
+        render: ({ field: { onChange: n } }) => /* @__PURE__ */ t(
+          K,
+          {
+            templates: e.agentTemplates,
+            data: e.agentsData,
+            inputVariant: e.inputVariant,
+            selectedInstances: e.selectedAgentInstances,
+            onSelect: (a) => {
+              n({
+                target: {
+                  value: a
+                }
+              }), e.onAgentSelect && e.onAgentSelect(a);
+            },
+            onSearchSubmit: e.onCatalogueInstanceSearchSubmit,
+            openMapping: e.openMapping,
+            mappingData: e.mappingData,
+            objectTemplate: e.objectTemplate,
+            mapboxAccessToken: e.mapboxAccessToken,
+            onMappingSubmit: e.onMappingSubmit,
+            onMappingOpen: e.onMappingOpen,
+            onMappingClose: e.onMappingClose
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ u(g, { row: !0, sx: { mb: 2 }, children: [
+      /* @__PURE__ */ t(
+        d,
+        {
+          control: /* @__PURE__ */ t(
+            l,
+            {
+              name: "creatable",
+              control: i,
+              render: ({ field: { value: n, ...a } }) => /* @__PURE__ */ t(c, { checked: n, ...a })
+            }
+          ),
+          label: "Creatable"
+        }
+      ),
+      /* @__PURE__ */ t(
+        d,
+        {
+          control: /* @__PURE__ */ t(
+            l,
+            {
+              name: "editable",
+              control: i,
+              render: ({ field: { value: n, ...a } }) => /* @__PURE__ */ t(c, { checked: n, ...a })
+            }
+          ),
+          label: "Editable"
+        }
+      ),
+      "stationary" in e.defaultValues && /* @__PURE__ */ t(
+        d,
+        {
+          control: /* @__PURE__ */ t(
+            l,
+            {
+              name: "stationary",
+              control: i,
+              render: ({ field: { value: n, ...a } }) => /* @__PURE__ */ t(c, { checked: n, ...a })
+            }
+          ),
+          label: "Stationary"
+        }
+      ),
+      "livingObject" in e.defaultValues && /* @__PURE__ */ t(
+        d,
+        {
+          control: /* @__PURE__ */ t(
+            l,
+            {
+              name: "livingObject",
+              control: i,
+              render: ({ field: { value: n, ...a } }) => /* @__PURE__ */ t(c, { checked: n, ...a })
+            }
+          ),
+          label: "Living Object"
+        }
+      ),
+      "storeFile" in e.defaultValues && /* @__PURE__ */ t(
+        d,
+        {
+          control: /* @__PURE__ */ t(
+            l,
+            {
+              name: "storeFile",
+              control: i,
+              render: ({ field: { value: n, ...a } }) => /* @__PURE__ */ t(c, { checked: n, ...a })
+            }
+          ),
+          label: "Store File"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ u(g, { children: [
+      /* @__PURE__ */ t(A, { children: "Icon" }),
+      /* @__PURE__ */ t(
+        l,
+        {
+          name: "icon",
+          control: i,
+          render: ({ field: { value: n, onChange: a } }) => /* @__PURE__ */ t(
+            B,
+            {
+              list: [],
+              value: n ?? "",
+              newIcon: "",
+              onFileUpload: () => {
+              },
+              onChange: a
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      l,
+      {
+        name: "properties",
+        control: i,
+        render: ({ field: { value: n, onChange: a } }) => /* @__PURE__ */ t(
+          j,
+          {
+            list: n || [],
+            inputVariant: e.inputVariant,
+            templateId: P.get(e.defaultValues, "id"),
+            disablePropertyId: e.disablePropertyId,
+            onChange: a
+          }
+        )
+      }
+    ),
+    "recognitionPropertyList" in e.defaultValues && /* @__PURE__ */ t(
+      l,
+      {
+        name: "recognitionPropertyList",
+        control: i,
+        render: ({ field: { value: n, onChange: a } }) => /* @__PURE__ */ t(
+          O,
+          {
+            list: n || [],
+            getFormValues: h,
+            onChange: a
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ u(x, { display: "flex", justifyContent: "space-between", mt: 3, children: [
+      /* @__PURE__ */ t(
+        b,
+        {
+          color: "primary",
+          variant: "text",
+          disabled: e.loading,
+          sx: { textTransform: "none" },
+          onClick: k,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ t(x, { children: e.saveButtons ? e.saveButtons.map((n, a) => /* @__PURE__ */ t(
+        b,
+        {
+          type: "submit",
+          color: "primary",
+          variant: "contained",
+          disabled: e.loading,
+          startIcon: n.icon,
+          sx: { ml: 1, textTransform: "none" },
+          onClick: n.onClick,
+          children: n.label
+        },
+        a
+      )) : /* @__PURE__ */ t(
+        b,
+        {
+          type: "submit",
+          color: "primary",
+          variant: "contained",
+          disabled: e.loading,
+          sx: { textTransform: "none" },
+          children: e.loading ? "Saving..." : "Save"
+        }
+      ) })
+    ] })
+  ] }) });
+}
+const ae = f.forwardRef(D);
+export {
+  ae as TemplateForm
+};