@nethru/ui 1.0.29 → 1.0.31

package/dist/ColumnedSection.js

@@ -0,0 +1,62 @@
+import { List, Stack } from "@mui/material";
+import ListItem from "./ListItem";
+import ListItemGrid from "./ListItemGrid";
+import { useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ColumnedSection({
+  columns,
+  labels = [],
+  contents = [],
+  sx
+}) {
+  const width = useMemo(() => {
+    return `${100 / columns}%`;
+  }, [columns]);
+  const styles = useMemo(() => {
+    return {
+      width: width,
+      bgcolor: '#f8f9fa',
+      p: '10px 20px',
+      borderRadius: '7px'
+    };
+  }, [width]);
+  return /*#__PURE__*/_jsx(List, {
+    children: /*#__PURE__*/_jsxs(ListItem, {
+      grid: true,
+      children: [labels.length > 0 && /*#__PURE__*/_jsx(ListItemGrid, {
+        xs: 12,
+        children: /*#__PURE__*/_jsx(Stack, {
+          direction: "row",
+          gap: 1,
+          children: labels.map((label, index) => /*#__PURE__*/_jsx(Stack, {
+            spacing: 1,
+            sx: {
+              width: width
+            },
+            children: /*#__PURE__*/_jsx(Stack, {
+              direction: "row",
+              alignItems: "baseline",
+              spacing: 1,
+              children: label
+            })
+          }, index))
+        })
+      }), /*#__PURE__*/_jsx(ListItemGrid, {
+        xs: 12,
+        children: /*#__PURE__*/_jsx(Stack, {
+          direction: "row",
+          gap: 1,
+          children: contents.map((content, index) => /*#__PURE__*/_jsx(Stack, {
+            spacing: 1,
+            sx: {
+              ...styles,
+              ...sx
+            },
+            children: content
+          }, index))
+        })
+      })]
+    })
+  });
+}

package/dist/PropertyTable.js

@@ -0,0 +1,63 @@
+import { useMemo, useState } from "react";
+import { DataGrid } from "@mui/x-data-grid";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function PropertyTable({
+  columns,
+  rows,
+  onUpdate
+}) {
+  const [updatedRows, setUpdatedRows] = useState(rows);
+  const columnsWithClassName = useMemo(() => {
+    return columns.map(column => {
+      const newColumn = {
+        ...column
+      };
+      if (column.fixed) {
+        newColumn.cellClassName = params => {
+          return !params.row.deletable ? 'fixed' : '';
+        };
+      } else if (column.dimmed) newColumn.cellClassName = 'dimmed';
+      return newColumn;
+    });
+  }, [columns]);
+  const processRowUpdate = row => {
+    const newRows = updatedRows.filter(r => r.id !== row.id);
+    newRows.push(row);
+    setUpdatedRows(newRows);
+    if (onUpdate) onUpdate(row, newRows);
+    return row;
+  };
+  return /*#__PURE__*/_jsx(DataGrid, {
+    columns: columnsWithClassName,
+    rows: rows,
+    columnHeaderHeight: 35,
+    rowHeight: 30,
+    isCellEditable: params => {
+      return params.row.deletable || !params.colDef.fixed;
+    },
+    processRowUpdate: processRowUpdate,
+    onProcessRowUpdateError: error => console.log(error),
+    disableColumnMenu: true,
+    disableRowSelectionOnClick: true,
+    hideFooter: true,
+    sx: styles
+  });
+}
+const styles = {
+  '.MuiDataGrid-columnHeaders': {
+    backgroundColor: '#f8f9fa'
+  },
+  '.MuiDataGrid-columnSeparator': {
+    visibility: 'hidden !important'
+  },
+  '.MuiDataGrid-cell.fixed': {
+    fontWeight: 'bold'
+  },
+  '.MuiDataGrid-cell.dimmed': {
+    color: '#666'
+  },
+  '& .Mui-error': {
+    backgroundColor: 'rgb(126,10,15, 0.1)',
+    color: '#750f0f'
+  }
+};

package/dist/index.js

@@ -7,6 +7,7 @@ export { default as AppendableFormList } from "./AppendableFormList";
 export { default as AvatarDropdown } from "./AvatarDropdown";
 export { default as Checkbox } from "./Checkbox";
 export { default as CircularProgress } from "./CircularProgress";
+export { default as ColumnedSection } from "./ColumnedSection";
 export { default as ConfirmDialog } from "./ConfirmDialog";
 export { default as DataGrid } from "./DataGrid";
 export { default as Dialog } from "./Dialog";
@@ -19,6 +20,7 @@ export { default as ListItemDivider } from "./ListItemDivider";
 export { default as ListItemGrid } from "./ListItemGrid";
 export { default as ListItemText } from "./ListItemText";
 export { default as MainHeader } from "./MainHeader";
+export { default as PropertyTable } from "./PropertyTable";
 export { default as ReferenceChipList } from "./ReferenceChipList";
 export { default as SearchTextField } from "./SearchTextField";
 export { default as Section } from "./Section";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "main": "dist/index.js",
   "files": [
     "/dist"