componentes-sinco 1.0.2-rc.6 → 1.0.2-rc.8

package/dist/index.js

@@ -1610,94 +1610,42 @@ var SCCalendarSwipeable = ({
 import React14, { useEffect as useEffect11, useState as useState10 } from "react";
 import { DataGridPro, useGridApiRef } from "@mui/x-data-grid-pro";
 import { LicenseInfo } from "@mui/x-license-pro";
-import { makeStyles } from "@mui/styles";
-var useStyles = makeStyles({
-  root: {
-    "& .MuiDataGrid-filler": {
-      display: "none !important"
-    },
-    "& .MuiDataGrid-footerContainer": {
-      minHeight: "26px !important",
-      height: "26px !important"
-    },
-    "& .MuiTablePagination-toolbar": {
-      minHeight: "25px !important",
-      height: "25px !important"
-    },
-    "& .MuiTablePagination-actions .MuiIconButton-root": {
-      padding: "0px !important"
-    },
-    "&.MuiDataGrid-root": {
-      "--DataGrid-topContainerHeight": "0px !important"
-      /* Cambia este valor según tus necesidades */
-    },
-    "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
-      "--height": "0px !important",
-      "minHeight": "0px !important",
-      "maxHeight": "0px !important"
-    },
-    "& .MuiDataGrid-cell": {
-      padding: "0 !important"
-    }
-  }
-});
-var SCDataGrid = (_a) => {
-  var _b = _a, { data, columns, rowsTable, checkboxSelection, width, height, maxHeight, density, agrupacion, groupingColDef, getTreeDataPath } = _b, props = __objRest(_b, ["data", "columns", "rowsTable", "checkboxSelection", "width", "height", "maxHeight", "density", "agrupacion", "groupingColDef", "getTreeDataPath"]);
+var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeight, density, groupingColDef, getTreeDataPath }) => {
   const apiRef = useGridApiRef();
-  const classes = useStyles();
   LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
   let validationTreeData = getTreeDataPath ? true : false;
-  let paginalion = 10;
-  let valor = 80;
-  let alto = 345;
-  let estilot = "compact";
-  let tamanoEncabezado = density == "compact" ? 24 : density == "standard" ? 36 : density == "comfortable" ? 52 : 24;
-  let tamanoCelda = density == "compact" ? 22 : density == "standard" ? 28 : density == "comfortable" ? 48 : 22;
-  let dataConvert = [];
+  let validationCheckboxSelection = checkboxSelection || false;
+  let styleDensity = density || "compact";
+  let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "38px" : styleDensity === "comfortable" ? "60px" : "27px";
+  let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 36 : 32;
+  let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
+  let validationGroupingColDef = groupingColDef || {};
   const [groupDataLenght, setGroupDataLengh] = useState10(0);
-  checkboxSelection = checkboxSelection || false;
-  const rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
-  width = width || "100%";
-  density = density || "compact";
-  agrupacion = agrupacion || false;
-  groupingColDef = groupingColDef || {};
-  getTreeDataPath = getTreeDataPath || void 0;
   const [pageSize, setPageSize] = useState10(rows);
   const [arrayRows, setArrayRows] = useState10([]);
-  const [heightTable, setHeightTable] = useState10(height || 0);
   useEffect11(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
-      if (validationTreeData) {
-        countGroupedElements(data, getTreeDataPath);
-      }
     }
   }, [data]);
-  useEffect11(() => {
-    if (groupDataLenght > 0 && validationTreeData == true) {
-      setHeightTable(heightTable ? heightTable : groupDataLenght * tamanoCelda + tamanoEncabezado + 27);
-    } else if (groupDataLenght <= 0 && validationTreeData == false) {
-      setHeightTable(heightTable ? heightTable : rows * tamanoCelda + tamanoEncabezado + 27);
-    }
-  }, [groupDataLenght]);
   const dataConvertRows = (data2, columnId) => {
-    let dataConvert2 = [];
+    let dataConvert = [];
     if ((data2 == null ? void 0 : data2.length) > 0) {
       const dataKeys = Object.keys(data2[0]);
       data2.map((item) => {
         const newKeys = {};
         let i = 0;
-        let id = dataConvert2.length + 1;
+        let id = dataConvert.length + 1;
         for (i = 0; i < dataKeys.length; i++) {
           newKeys[dataKeys[i]] = item[dataKeys[i]];
         }
         newKeys.id = columnId ? item[columnId] : id;
-        dataConvert2 = [...dataConvert2, newKeys];
+        dataConvert = [...dataConvert, newKeys];
       });
     }
-    setArrayRows(dataConvert2);
+    setArrayRows(dataConvert);
   };
   const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
   const [selectionModel, setSelectionModel] = useState10([]);
@@ -1737,41 +1685,27 @@ var SCDataGrid = (_a) => {
       setSelectionModel([...newSelection]);
     }
   };
-  const countGroupedElements = (row, getTreeDataPath2) => {
-    const groupedCounts = {};
-    data.forEach((row2) => {
-      const path = getTreeDataPath2(row2) || [];
-      const key = path[0];
-      if (!groupedCounts[key]) {
-        groupedCounts[key] = 0;
-      }
-      groupedCounts[key]++;
-    });
-    setGroupDataLengh(Object.keys(groupedCounts).length);
-    return groupedCounts;
-  };
-  const virtualScrollerHeight = validationTreeData ? groupDataLenght * tamanoCelda + 10 : rows * tamanoCelda;
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, heightTable > 0 ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", flexDirection: "column", width, maxHeight } }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, data && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { style: { width: width || "100%", maxHeight } }, /* @__PURE__ */ React14.createElement(
     DataGridPro,
-    __spreadProps(__spreadValues({
-      apiRef
-    }, props), {
+    {
+      apiRef,
+      rowHeight: styleRowHeight,
       rows: arrayRows,
       columns,
-      density,
+      density: styleDensity,
       treeData: validationTreeData,
       getTreeDataPath,
-      groupingColDef: validationTreeData == true ? groupingColDef : false,
+      groupingColDef: validationTreeData == true ? validationGroupingColDef : false,
       pagination: true,
       initialState: {
         pagination: { paginationModel: { pageSize: rows } }
       },
-      checkboxSelection,
+      checkboxSelection: validationCheckboxSelection,
       rowSelectionModel: selectionModel,
       onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
       isRowSelectable,
       disableRowSelectionOnClick: true,
-      className: classes.root,
+      hideFooter: validationTreeData == true ? true : false,
       localeText: {
         noRowsLabel: "No hay filas",
         columnMenuLabel: "Men\xFA de columna",
@@ -1782,9 +1716,36 @@ var SCDataGrid = (_a) => {
           labelRowsPerPage: "Filas por p\xE1gina:",
           labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
         }
+      },
+      sx: {
+        "& .MuiDataGrid-filler": {
+          display: "none !important"
+        },
+        "& .MuiDataGrid-footerContainer": {
+          minHeight: "26px !important",
+          height: "26px !important"
+        },
+        "& .MuiTablePagination-toolbar": {
+          minHeight: "25px !important",
+          height: "25px !important"
+        },
+        "& .MuiTablePagination-actions .MuiIconButton-root": {
+          padding: "0px !important"
+        },
+        "&.MuiDataGrid-root": {
+          [`--DataGrid-topContainerHeight`]: `${styleTopContainerHeight} !important`
+        },
+        "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
+          "--height": "0px !important",
+          "minHeight": "0px !important",
+          "maxHeight": "0px !important"
+        },
+        "& .MuiDataGrid-cell": {
+          padding: "0 !important"
+        }
       }
-    })
-  ))) : "");
+    }
+  ))));
 };
 
 // src/Components/SCAutocomplete.tsx