@hybridcore/ui 1.5.5 → 1.5.8

package/dist/index-D-mTkx9Q.js

@@ -0,0 +1,349 @@
+import { jsxs as h, Fragment as M, jsx as n } from "react/jsx-runtime";
+import I from "lodash";
+import q from "dayjs";
+import { FormControl as B, FormLabel as N, FormGroup as W, FormControlLabel as j, Checkbox as Y, Typography as P, Button as F, Chip as $, Dialog as v, DialogTitle as _, DialogContent as E, DialogActions as G, InputAdornment as H, Tooltip as K } from "@mui/material";
+import { Container as R, Values as U, MiniButton as J } from "./components/instance-form/components/composite-list/styled.js";
+import { KeyboardArrowUp as Q, KeyboardArrowDown as X, Add as Z, LockOutlined as z } from "@mui/icons-material";
+import O from "./hooks/useToggle.js";
+import { GeometryPicker as ee } from "./components/geometry-picker/index.js";
+import { PhoneInput as ne } from "./components/phone-input/index.js";
+import { DateTimePicker as ae } from "./components/date-time-picker/index.js";
+import { T as p } from "./TextField-BjFXx91l.js";
+import { F as le } from "./FormControlLabel-BNT5EI0b.js";
+import { C as te } from "./Checkbox-B0P8LhCl.js";
+import { F as oe, I as de } from "./InputLabel-ClDXuWBr.js";
+import { S as ie } from "./Select-ush_fSWy.js";
+import { M as re } from "./MenuItem-Lcjh1XlV.js";
+import { B as L } from "./Box-SSMZuKnS.js";
+import { useState as S } from "react";
+function me({
+  property: i,
+  mapboxAccessToken: e,
+  value: a,
+  variant: u = "outlined",
+  size: r = "medium",
+  onChange: g
+}) {
+  var C, V, l;
+  const d = O(!1), [m, T] = S(), [b, w] = S(!1), x = 10, A = (t) => {
+    T(I.get(t, i.propertyId));
+  }, y = () => {
+    g([...a || [], m]), T(""), d.action.close();
+  }, D = (t) => () => {
+    if (a) {
+      const o = [...a];
+      o.splice(t, 1), g(o);
+    }
+  }, k = (t) => {
+    const { value: o, checked: c } = t.target;
+    let s = I.isArray(a) ? a : [];
+    c ? s.push(o) : s = s.filter((f) => f !== o), g(s);
+  };
+  if (((V = (C = i.dataTypeInfo) == null ? void 0 : C.innerType) == null ? void 0 : V.type) === "enum") {
+    const { enumValues: t } = i.dataTypeInfo.innerType;
+    return /* @__PURE__ */ h(M, { children: [
+      /* @__PURE__ */ h(B, { fullWidth: !0, component: "fieldset", variant: u, children: [
+        /* @__PURE__ */ n(N, { component: "legend", sx: { mb: 1 }, children: i.name }),
+        /* @__PURE__ */ n(W, { children: t && t.length > 0 ? t.slice(0, b ? 9999 : x).map((o, c) => /* @__PURE__ */ n(
+          j,
+          {
+            label: o,
+            control: /* @__PURE__ */ n(
+              Y,
+              {
+                name: i.propertyId,
+                value: o,
+                size: "small",
+                checked: I.isArray(a) ? a.includes(o) : !1,
+                onChange: k
+              }
+            ),
+            componentsProps: {
+              typography: {
+                variant: "body2"
+              }
+            }
+          },
+          c
+        )) : /* @__PURE__ */ n(P, { variant: "caption", mb: 1, children: "No enum values!" }) })
+      ] }),
+      I.isArray(t) && t.length > x && /* @__PURE__ */ h(
+        F,
+        {
+          size: "small",
+          sx: { p: 0, textTransform: "none" },
+          endIcon: b ? /* @__PURE__ */ n(Q, {}) : /* @__PURE__ */ n(X, {}),
+          onClick: () => w((o) => !o),
+          children: [
+            "Show ",
+            b ? "Less" : "More"
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ h(M, { children: [
+    /* @__PURE__ */ h(R, { variant: u, children: [
+      /* @__PURE__ */ n(P, { children: i.name }),
+      /* @__PURE__ */ n(U, { children: I.isArray(a) && a.map((t, o) => {
+        var c, s;
+        return /* @__PURE__ */ n(
+          $,
+          {
+            label: ((s = (c = i.dataTypeInfo) == null ? void 0 : c.innerType) == null ? void 0 : s.type) === "date" ? q(t).format("DD/MM/YYYY HH:mm:ss") : t,
+            size: r,
+            onDelete: D(o)
+          },
+          o
+        );
+      }) }),
+      /* @__PURE__ */ n(
+        J,
+        {
+          startIcon: /* @__PURE__ */ n(Z, {}),
+          variant: "text",
+          onClick: d.action.open,
+          children: "Add"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ h(
+      v,
+      {
+        open: d.state.isOpen,
+        onClose: d.action.close,
+        maxWidth: "sm",
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ n(_, { children: "Add List Value" }),
+          /* @__PURE__ */ n(E, { children: (l = i.dataTypeInfo) != null && l.innerType ? /* @__PURE__ */ n(
+            ce,
+            {
+              mapboxAccessToken: e,
+              property: {
+                ...i,
+                name: "Value",
+                type: i.dataTypeInfo.innerType.type
+              },
+              value: m,
+              onChange: A
+            }
+          ) : null }),
+          /* @__PURE__ */ h(G, { children: [
+            /* @__PURE__ */ n(
+              F,
+              {
+                variant: "contained",
+                color: "inherit",
+                onClick: d.action.close,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ n(F, { variant: "contained", color: "primary", onClick: y, children: "Ok" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ce({
+  mapboxAccessToken: i,
+  property: e,
+  value: a,
+  variant: u = "standard",
+  size: r = "medium",
+  defaultExtent: g,
+  fieldOptions: d,
+  // keyAuth,
+  onChange: m
+}) {
+  var k, C, V;
+  const T = (l) => {
+    const o = l.target.value.split(",").map((c) => c.trimStart());
+    m({
+      [e.propertyId]: o
+    });
+  }, b = (l) => {
+    const { name: t, type: o, checked: c, value: s } = l.target;
+    let f = s;
+    e.type === "double" && (f = f.replace(",", "."), f = f.replace(/[^\d.-]+/g, "")), m({
+      [t]: o === "checkbox" ? c : f
+    });
+  }, w = (l) => {
+    m({
+      [e.propertyId]: l
+    });
+  }, x = (l) => {
+    m({
+      [e.propertyId]: l.target.value
+    });
+  }, A = (l) => (t) => {
+    m({
+      [l]: t
+    });
+  }, y = (l) => (t) => {
+    m({
+      [l]: t
+    });
+  }, D = (l) => (t) => {
+    m({
+      [l]: t
+    });
+  };
+  if ([
+    "string",
+    "integer",
+    "double",
+    "text",
+    "long",
+    "byte",
+    "bank-account"
+  ].includes(e.type))
+    return /* @__PURE__ */ n(
+      p,
+      {
+        label: e.name,
+        name: e.propertyId,
+        required: e.required,
+        value: a ?? e.defaultValue ?? "",
+        defaultValue: a,
+        onChange: b,
+        variant: u,
+        type: "text",
+        multiline: e.type === "text",
+        disabled: !e.editable,
+        fullWidth: !0,
+        InputProps: {
+          size: r,
+          ...d && d[e.propertyId] && {
+            tabIndex: d[e.propertyId].order
+          },
+          ...e.privacyPreservationMethod === "ENCRYPTION" ? {
+            endAdornment: /* @__PURE__ */ n(H, { position: "end", children: /* @__PURE__ */ n(K, { title: "Encrypted Field", children: /* @__PURE__ */ n(z, {}) }) })
+          } : {}
+        }
+      }
+    );
+  if (e.type === "date") {
+    const l = a !== void 0 ? q(a).format() : a;
+    return /* @__PURE__ */ n(
+      ae,
+      {
+        label: e.name,
+        value: l,
+        variant: u,
+        size: r,
+        name: e.propertyId,
+        onChange: w,
+        ...d && d[e.propertyId] && {
+          minDate: d[e.propertyId].minDate
+        }
+      }
+    );
+  }
+  if (e.type === "list") {
+    let l = "";
+    return e.defaultValue && (l = I.isArray(e.defaultValue) ? a.join(", ") : e.defaultValue), a && (l = I.isArray(a) ? a.join(",") : a), /* @__PURE__ */ n(
+      p,
+      {
+        label: e.name,
+        name: e.propertyId,
+        value: l,
+        onChange: T,
+        variant: u,
+        disabled: !e.editable,
+        required: e.required,
+        fullWidth: !0,
+        helperText: r === "small" ? null : "Add list values with the comma (,) separated string",
+        InputProps: {
+          size: r,
+          placeholder: r === "small" ? "Add list values with the comma (,) separated string" : "",
+          ...d && d[e.propertyId] && {
+            tabIndex: d[e.propertyId].order
+          }
+        }
+      }
+    );
+  }
+  if (e.type === "boolean")
+    return /* @__PURE__ */ n(
+      le,
+      {
+        control: /* @__PURE__ */ n(
+          te,
+          {
+            name: e.propertyId,
+            checked: !!a,
+            onChange: b,
+            size: r
+          }
+        ),
+        label: e.name
+      }
+    );
+  if (e.type === "enum") {
+    let l = [];
+    return (k = e.dataTypeInfo) != null && k.enumValues && (l = e.dataTypeInfo.enumValues), (V = (C = e.dataTypeInfo) == null ? void 0 : C.innerType) != null && V.enumValues && (l = e.dataTypeInfo.innerType.enumValues), /* @__PURE__ */ h(
+      oe,
+      {
+        fullWidth: !0,
+        variant: u,
+        size: r,
+        required: e.required,
+        children: [
+          /* @__PURE__ */ n(de, { id: `${e.propertyId}-label`, children: e.name }),
+          /* @__PURE__ */ n(
+            ie,
+            {
+              label: e.name,
+              name: e.name,
+              labelId: `${e.propertyId}-label`,
+              id: e.propertyId,
+              value: a ?? "",
+              onChange: x,
+              inputProps: {
+                ...d && d[e.propertyId] && {
+                  tabIndex: d[e.propertyId].order
+                }
+              },
+              children: l.map((t, o) => /* @__PURE__ */ n(re, { value: t, children: t }, o))
+            }
+          )
+        ]
+      }
+    );
+  }
+  return e.type === "geometry" ? /* @__PURE__ */ n(L, { sx: { width: "100%" }, children: /* @__PURE__ */ n(
+    ee,
+    {
+      mapboxAccessToken: i,
+      label: e.name,
+      value: a ?? e.defaultValue ?? "",
+      defaultExtent: g,
+      variant: u,
+      onChange: A(e.propertyId)
+    }
+  ) }) : e.type === "phone-number" ? /* @__PURE__ */ n(L, { sx: { width: "100%" }, children: /* @__PURE__ */ n(
+    ne,
+    {
+      label: e.name,
+      placeholder: "Enter phone number",
+      value: a ?? e.defaultValue ?? "",
+      onChange: y(e.propertyId)
+    }
+  ) }) : e.type === "composite-list" ? /* @__PURE__ */ n(L, { sx: { width: "100%" }, children: /* @__PURE__ */ n(
+    me,
+    {
+      property: e,
+      value: a ?? e.defaultValue ?? "",
+      variant: u,
+      size: r,
+      mapboxAccessToken: i,
+      onChange: D(e.propertyId)
+    }
+  ) }) : /* @__PURE__ */ n(M, {});
+}
+export {
+  me as C,
+  ce as V
+};

package/dist/main.d.ts

@@ -228,6 +228,7 @@ declare interface FieldOptions {
     hidden?: boolean;
     disabled?: boolean;
     minDate?: Dayjs;
+    helperText?: React.ReactNode;
     [key: string]: string | number | object | boolean;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.5.5",
+  "version": "1.5.8",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",