@hybridcore/ui 1.5.23 → 1.5.24

package/dist/components/instance-table/index.js

@@ -1,125 +1,148 @@
-import { jsx as i, Fragment as c, jsxs as x } from "react/jsx-runtime";
-import { useState as b, useMemo as R } from "react";
-import { DataGrid as m } from "@mui/x-data-grid";
-import { ButtonBase as D, Box as M } from "@mui/material";
-import { DataGridActions as N } from "./styled.js";
-import F from "dayjs";
-import G from "lodash";
-const $ = ({
-  template: n,
-  data: s,
-  selectedIds: p = [],
-  sortColumnsBy: f = "type",
-  actions: l,
-  actionsWidth: a = 50,
-  enableCheckboxSelection: h = !1,
+import { jsx as o, Fragment as D, jsxs as j } from "react/jsx-runtime";
+import { useState as B, useMemo as $ } from "react";
+import { DataGrid as N } from "@mui/x-data-grid";
+import { ButtonBase as k, Box as A } from "@mui/material";
+import { DataGridActions as E } from "./styled.js";
+import P from "dayjs";
+import T from "lodash";
+const U = ({
+  template: l,
+  data: h,
+  selectedIds: R = [],
+  sortColumnsBy: G = "type",
+  actions: u,
+  actionsWidth: m = 50,
+  enableCheckboxSelection: M = !1,
+  fieldOptions: e,
   onSelect: d,
-  onTitleClick: u
+  onTitleClick: y
 }) => {
-  const [y, g] = b(p), w = R(() => [
-    {
-      field: "template",
-      headerName: "",
-      sortable: !1,
-      filterable: !1,
-      align: "center",
-      width: 30,
-      renderCell: () => n ? /* @__PURE__ */ i(
-        "img",
+  const [F, H] = B(R), S = $(() => {
+    var w, g, s, v, b, x, C, I;
+    return [
+      ...(w = e == null ? void 0 : e.templateIcon) != null && w.hidden ? [] : [
         {
-          src: n.icon,
-          height: 20,
-          style: { display: "inline", maxWidth: 20 }
+          field: "template",
+          headerName: "",
+          sortable: !1,
+          filterable: !1,
+          align: "center",
+          width: 30,
+          renderCell: (g = e == null ? void 0 : e.templateIcon) != null && g.renderCell ? (s = e == null ? void 0 : e.templateIcon) == null ? void 0 : s.renderCell : () => l ? /* @__PURE__ */ o(
+            "img",
+            {
+              src: l.icon,
+              height: 20,
+              style: { display: "inline", maxWidth: 20 }
+            }
+          ) : /* @__PURE__ */ o(D, {})
         }
-      ) : /* @__PURE__ */ i(c, {})
-    },
-    {
-      field: "title",
-      headerName: "Title",
-      width: 400,
-      sortable: !1,
-      valueGetter: (e) => e.row.title,
-      renderCell: (e) => {
-        const { row: t, value: r } = e;
-        return u ? /* @__PURE__ */ i(
-          D,
-          {
-            onClick: () => u(t),
-            sx: { "&:hover": { textDecoration: "underline" } },
-            disableRipple: !0,
-            children: r
+      ],
+      ...(v = e == null ? void 0 : e.title) != null && v.hidden ? [] : [
+        {
+          field: "title",
+          headerName: "Title",
+          width: 400,
+          sortable: !1,
+          filterable: !1,
+          valueGetter: (r) => r.row.title,
+          renderCell: (b = e == null ? void 0 : e.title) != null && b.renderCell ? (x = e == null ? void 0 : e.title) == null ? void 0 : x.renderCell : (r) => {
+            const { row: t, value: c } = r;
+            return y ? /* @__PURE__ */ o(
+              k,
+              {
+                onClick: () => y(t),
+                sx: { "&:hover": { textDecoration: "underline" } },
+                disableRipple: !0,
+                children: c
+              }
+            ) : c;
           }
-        ) : r;
-      }
-    },
-    ...n ? [
-      ...n.properties.filter(
-        (e) => e.visible && e.type !== "geometry" && e.type !== "coordinate"
-      ).sort(
-        (e, t) => f === "type" ? e.type < t.type ? -1 : e.type > t.type ? 1 : 0 : e.name < t.name ? -1 : 1
-      ).map((e) => {
-        const t = `variables.${e.type}.${e.propertyId}`;
-        return {
-          field: t,
-          headerName: e.name,
+        }
+      ],
+      ...(C = e == null ? void 0 : e.description) != null && C.hidden ? [] : [
+        {
+          field: "description",
+          headerName: "Description",
+          width: 400,
           sortable: !1,
-          width: 150,
-          valueFormatter: (r) => r.value && e.type === "date" ? F(r.value).format("DD/MM/YYYY HH:mm") : r.value,
-          valueGetter: (r) => G.get(r.row, t)
-        };
-      })
-    ] : []
-  ], [n]), v = (o) => {
-    g(o), d && d(o);
+          filterable: !1,
+          valueGetter: (r) => r.row.description,
+          renderCell: (I = e == null ? void 0 : e.description) == null ? void 0 : I.renderCell
+        }
+      ],
+      ...l ? [
+        ...l.properties.filter(
+          (r) => (!e || !e[r.propertyId] || !e[r.propertyId].hidden) && r.visible && r.type !== "geometry" && r.type !== "coordinate"
+        ).sort(
+          (r, t) => G === "type" ? r.type < t.type ? -1 : r.type > t.type ? 1 : 0 : r.name < t.name ? -1 : 1
+        ).map((r) => {
+          var c;
+          const t = `variables.${r.type}.${r.propertyId}`;
+          return {
+            field: t,
+            headerName: r.name,
+            sortable: !1,
+            filterable: !1,
+            width: 150,
+            valueFormatter: (n) => n.value && r.type === "date" ? P(n.value).format("DD/MM/YYYY HH:mm") : n.value,
+            valueGetter: (n) => T.get(n.row, t),
+            renderCell: e && ((c = e[r.propertyId]) == null ? void 0 : c.renderCell)
+          };
+        })
+      ] : []
+    ];
+  }, [l]), Y = (a) => {
+    H(a), d && d(a);
   };
-  return /* @__PURE__ */ x(M, { position: "relative", children: [
-    /* @__PURE__ */ i(
-      m,
+  return /* @__PURE__ */ j(A, { position: "relative", children: [
+    /* @__PURE__ */ o(
+      N,
       {
-        columns: w,
-        rows: s,
+        columns: S,
+        rows: h,
         autoHeight: !0,
         density: "compact",
         sx: {
           border: "none",
           "& .MuiDataGrid-main": {
-            marginRight: l ? `${a}px` : 0
+            marginRight: u ? `${m}px` : 0
           }
         },
-        getRowId: (o) => o.id,
+        getRowId: (a) => a.id,
         hideFooterPagination: !0,
         hideFooter: !0,
-        checkboxSelection: h,
-        rowSelectionModel: y,
-        onRowSelectionModelChange: v,
+        checkboxSelection: M,
+        rowSelectionModel: F,
+        onRowSelectionModelChange: Y,
         keepNonExistentRowsSelected: !0
       }
     ),
-    l !== void 0 && /* @__PURE__ */ i(N, { width: a, children: /* @__PURE__ */ i(
-      m,
+    u !== void 0 && /* @__PURE__ */ o(E, { width: m, children: /* @__PURE__ */ o(
+      N,
       {
         columns: [
           {
             field: "actions",
             type: "actions",
-            width: a,
+            width: m,
             headerClassName: "pinned",
-            getActions: () => l
+            getActions: () => u
           }
         ],
-        rows: s,
+        rows: h,
         autoHeight: !0,
         density: "compact",
         hideFooter: !0,
         sx: { border: "none" },
         slots: {
-          noRowsOverlay: () => /* @__PURE__ */ i(c, {})
+          noRowsOverlay: () => /* @__PURE__ */ o(D, {})
         },
-        getRowId: (o) => o.id
+        getRowId: (a) => a.id
       }
     ) })
   ] });
 };
 export {
-  $ as InstanceTable
+  U as InstanceTable
 };

package/dist/main.d.ts

@@ -15,6 +15,7 @@ import { FC } from 'react';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { GridActionsCellItemProps } from '@mui/x-data-grid';
+import { GridRenderCellParams } from '@mui/x-data-grid';
 import { IconButtonProps } from '@mui/material/IconButton';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LocalizationProvider } from '@mui/x-date-pickers';
@@ -413,6 +414,11 @@ declare interface InstanceHierarchyTableProps {
 
 export declare const InstanceTable: FC<InstanceTableProps>;
 
+declare interface InstanceTableFieldOptions {
+    hidden?: boolean;
+    renderCell?(params: GridRenderCellParams<any>): React.ReactElement;
+}
+
 declare interface InstanceTableProps {
     template: ONTOLOGY.TemplateType;
     data: INSTANCE.GenericInstanceView[];
@@ -421,6 +427,12 @@ declare interface InstanceTableProps {
     sortColumnsBy?: "name" | "type";
     actions?: React.ReactElement<GridActionsCellItemProps>[];
     actionsWidth?: number;
+    fieldOptions?: {
+        templateIcon?: InstanceTableFieldOptions;
+        title?: InstanceTableFieldOptions;
+        description?: InstanceTableFieldOptions;
+        [key: string]: InstanceTableFieldOptions;
+    };
     onSelect?(selectedIds: number[]): void;
     onTitleClick?(instance: INSTANCE.GenericInstanceView): void;
 }

package/package.json

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