next-recomponents 2.0.23 → 2.0.25

package/dist/index.d.mts

@@ -72,6 +72,7 @@ interface TableProps {
     editableFields?: string[];
     onSelect?: (data: GridValidRowModel[]) => void;
     onSave?: (data: GridValidRowModel[]) => void;
+    onCloseModal?: (data: GridValidRowModel | undefined) => boolean;
     buttons?: Record<string, any>;
     exportName?: string;
     modal?: React$1.ReactNode;
@@ -84,6 +85,7 @@ interface TableProps {
     currentCoin?: string;
     className?: string;
     fontSize?: string;
+    colSize?: Record<string, number>;
     [key: string]: any;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -72,6 +72,7 @@ interface TableProps {
     editableFields?: string[];
     onSelect?: (data: GridValidRowModel[]) => void;
     onSave?: (data: GridValidRowModel[]) => void;
+    onCloseModal?: (data: GridValidRowModel | undefined) => boolean;
     buttons?: Record<string, any>;
     exportName?: string;
     modal?: React$1.ReactNode;
@@ -84,6 +85,7 @@ interface TableProps {
     currentCoin?: string;
     className?: string;
     fontSize?: string;
+    colSize?: Record<string, number>;
     [key: string]: any;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -35715,8 +35715,8 @@ function EditIcon() {
       fill: "currentColor",
       strokeWidth: "0",
       viewBox: "0 0 576 512",
-      height: "20px",
-      width: "20px",
+      height: "12px",
+      width: "12px",
       xmlns: "http://www.w3.org/2000/svg",
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" })
     }
@@ -35774,12 +35774,12 @@ function CustomFooter({
   }) });
 }
 function ModalDialog({ open, onClose, modal, selectedRow }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material.Dialog, { open, onClose, maxWidth: "xl", fullWidth: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material.Dialog, { open, maxWidth: "xl", fullWidth: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         onClick: onClose,
-        className: "text-gray-500 hover:text-gray-800 text-xl font-bold p-5",
+        className: " font-bold p-1 m-5 w-[30px] h-[30px] flex items-center justify-center hover:animate-pulse border shadow rounded bg-red-500 text-white",
         children: "\xD7"
       }
     ) }),
@@ -35822,7 +35822,7 @@ function Toolbar({
     ) : onSave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { onClick: () => onSave(rows.map(stripMeta)), children: "Guardar" })
   ] });
 }
-function useColumns(rows, currentCoin, options) {
+function useColumns(rows, currentCoin, options, colSize) {
   const {
     flex,
     editableFields,
@@ -35835,7 +35835,7 @@ function useColumns(rows, currentCoin, options) {
   return (0, import_react4.useMemo)(() => {
     if (!rows.length) return [];
     const cols = Object.keys(rows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key) => {
-      var _a;
+      var _a, _b;
       return {
         field: key,
         headerName: key,
@@ -35863,18 +35863,21 @@ function useColumns(rows, currentCoin, options) {
           }
           return value;
         },
-        flex,
-        editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
+        flex: key == "id" ? false : !(colSize == null ? void 0 : colSize[key]),
+        width: key == "id" ? 80 : (_a = colSize == null ? void 0 : colSize[key]) != null ? _a : void 0,
+        editable: (_b = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _b : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
         renderCell: (buttons == null ? void 0 : buttons[key]) ? (params) => {
-          var _a2, _b;
+          var _a2, _b2, _c;
+          const children = ((_a2 = buttons == null ? void 0 : buttons[key]) == null ? void 0 : _a2.type) == "input" ? null : (_b2 = params == null ? void 0 : params.row) == null ? void 0 : _b2[key];
           return import_react4.default.cloneElement(buttons[key], {
-            className: `${(_a2 = params == null ? void 0 : params.className) != null ? _a2 : ""} m-auto text-xs`,
-            children: (_b = params == null ? void 0 : params.row) == null ? void 0 : _b[key],
+            className: `${(_c = params == null ? void 0 : params.className) != null ? _c : ""} m-auto text-xs`,
+            children,
+            row: params == null ? void 0 : params.row,
             onClick: async (e) => {
-              var _a3, _b2;
+              var _a3, _b3;
               e.row = params == null ? void 0 : params.row;
-              if ((_b2 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b2.onClick) {
+              if ((_b3 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b3.onClick) {
                 const newVal = await buttons[key].props.onClick(e);
                 if (newVal) handleRowUpdate({ ...e.row, newVal });
               }
@@ -35887,9 +35890,10 @@ function useColumns(rows, currentCoin, options) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        flex,
+        // flex,
         editable: false,
         type: "string",
+        width: 10,
         renderCell: (params) => {
           var _a;
           return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -35913,6 +35917,7 @@ function IHTable({
   editableFields,
   onSave,
   onSelect,
+  onCloseModal,
   buttons,
   exportName,
   modal,
@@ -35923,7 +35928,8 @@ function IHTable({
   footer = {},
   currentCoin = "$",
   fontSize = "1rem",
-  className
+  className,
+  colSize
 }) {
   var _a;
   if (modal && onSelect)
@@ -35944,6 +35950,8 @@ function IHTable({
     setOpen(true);
   };
   const handleClose = () => {
+    const pass = onCloseModal ? onCloseModal == null ? void 0 : onCloseModal(modalRow) : true;
+    if (!pass) return;
     setOpen(false);
     setModalRow(void 0);
   };
@@ -35964,15 +35972,20 @@ function IHTable({
     }
     return [];
   }, [selectedRows, rows]);
-  const columns = useColumns(rows, currentCoin, {
-    flex,
-    editableFields,
-    buttons: resolvedButtons,
-    hideColumns,
-    modal,
-    handleRowUpdate,
-    onModalOpen: handleModalOpen
-  });
+  const columns = useColumns(
+    rows,
+    currentCoin,
+    {
+      flex,
+      editableFields,
+      buttons: resolvedButtons,
+      hideColumns,
+      modal,
+      handleRowUpdate,
+      onModalOpen: handleModalOpen
+    },
+    colSize
+  );
   if (!rows.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "m-2", children: [
     header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold  p-2 ", children: header }),

package/dist/index.mjs

@@ -35695,8 +35695,8 @@ function EditIcon() {
       fill: "currentColor",
       strokeWidth: "0",
       viewBox: "0 0 576 512",
-      height: "20px",
-      width: "20px",
+      height: "12px",
+      width: "12px",
       xmlns: "http://www.w3.org/2000/svg",
       children: /* @__PURE__ */ jsx6("path", { d: "M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" })
     }
@@ -35754,12 +35754,12 @@ function CustomFooter({
   }) });
 }
 function ModalDialog({ open, onClose, modal, selectedRow }) {
-  return /* @__PURE__ */ jsxs5(Dialog, { open, onClose, maxWidth: "xl", fullWidth: true, children: [
+  return /* @__PURE__ */ jsxs5(Dialog, { open, maxWidth: "xl", fullWidth: true, children: [
     /* @__PURE__ */ jsx6("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx6(
       "button",
       {
         onClick: onClose,
-        className: "text-gray-500 hover:text-gray-800 text-xl font-bold p-5",
+        className: " font-bold p-1 m-5 w-[30px] h-[30px] flex items-center justify-center hover:animate-pulse border shadow rounded bg-red-500 text-white",
         children: "\xD7"
       }
     ) }),
@@ -35802,7 +35802,7 @@ function Toolbar({
     ) : onSave && /* @__PURE__ */ jsx6(Button, { onClick: () => onSave(rows.map(stripMeta)), children: "Guardar" })
   ] });
 }
-function useColumns(rows, currentCoin, options) {
+function useColumns(rows, currentCoin, options, colSize) {
   const {
     flex,
     editableFields,
@@ -35815,7 +35815,7 @@ function useColumns(rows, currentCoin, options) {
   return useMemo(() => {
     if (!rows.length) return [];
     const cols = Object.keys(rows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key) => {
-      var _a;
+      var _a, _b;
       return {
         field: key,
         headerName: key,
@@ -35843,18 +35843,21 @@ function useColumns(rows, currentCoin, options) {
           }
           return value;
         },
-        flex,
-        editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
+        flex: key == "id" ? false : !(colSize == null ? void 0 : colSize[key]),
+        width: key == "id" ? 80 : (_a = colSize == null ? void 0 : colSize[key]) != null ? _a : void 0,
+        editable: (_b = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _b : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
         renderCell: (buttons == null ? void 0 : buttons[key]) ? (params) => {
-          var _a2, _b;
+          var _a2, _b2, _c;
+          const children = ((_a2 = buttons == null ? void 0 : buttons[key]) == null ? void 0 : _a2.type) == "input" ? null : (_b2 = params == null ? void 0 : params.row) == null ? void 0 : _b2[key];
           return React3.cloneElement(buttons[key], {
-            className: `${(_a2 = params == null ? void 0 : params.className) != null ? _a2 : ""} m-auto text-xs`,
-            children: (_b = params == null ? void 0 : params.row) == null ? void 0 : _b[key],
+            className: `${(_c = params == null ? void 0 : params.className) != null ? _c : ""} m-auto text-xs`,
+            children,
+            row: params == null ? void 0 : params.row,
             onClick: async (e) => {
-              var _a3, _b2;
+              var _a3, _b3;
               e.row = params == null ? void 0 : params.row;
-              if ((_b2 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b2.onClick) {
+              if ((_b3 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b3.onClick) {
                 const newVal = await buttons[key].props.onClick(e);
                 if (newVal) handleRowUpdate({ ...e.row, newVal });
               }
@@ -35867,9 +35870,10 @@ function useColumns(rows, currentCoin, options) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        flex,
+        // flex,
         editable: false,
         type: "string",
+        width: 10,
         renderCell: (params) => {
           var _a;
           return /* @__PURE__ */ jsx6(
@@ -35893,6 +35897,7 @@ function IHTable({
   editableFields,
   onSave,
   onSelect,
+  onCloseModal,
   buttons,
   exportName,
   modal,
@@ -35903,7 +35908,8 @@ function IHTable({
   footer = {},
   currentCoin = "$",
   fontSize = "1rem",
-  className
+  className,
+  colSize
 }) {
   var _a;
   if (modal && onSelect)
@@ -35924,6 +35930,8 @@ function IHTable({
     setOpen(true);
   };
   const handleClose = () => {
+    const pass = onCloseModal ? onCloseModal == null ? void 0 : onCloseModal(modalRow) : true;
+    if (!pass) return;
     setOpen(false);
     setModalRow(void 0);
   };
@@ -35944,15 +35952,20 @@ function IHTable({
     }
     return [];
   }, [selectedRows, rows]);
-  const columns = useColumns(rows, currentCoin, {
-    flex,
-    editableFields,
-    buttons: resolvedButtons,
-    hideColumns,
-    modal,
-    handleRowUpdate,
-    onModalOpen: handleModalOpen
-  });
+  const columns = useColumns(
+    rows,
+    currentCoin,
+    {
+      flex,
+      editableFields,
+      buttons: resolvedButtons,
+      hideColumns,
+      modal,
+      handleRowUpdate,
+      onModalOpen: handleModalOpen
+    },
+    colSize
+  );
   if (!rows.length) return null;
   return /* @__PURE__ */ jsxs5("div", { className: "m-2", children: [
     header && /* @__PURE__ */ jsx6("div", { className: "font-bold  p-2 ", children: header }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/table/index.tsx

@@ -28,6 +28,7 @@ interface TableProps {
   editableFields?: string[];
   onSelect?: (data: GridValidRowModel[]) => void;
   onSave?: (data: GridValidRowModel[]) => void;
+  onCloseModal?: (data: GridValidRowModel | undefined) => boolean;
   buttons?: Record<string, any>;
   exportName?: string;
   modal?: React.ReactNode;
@@ -40,6 +41,7 @@ interface TableProps {
   currentCoin?: string;
   className?: string;
   fontSize?: string;
+  colSize?: Record<string, number>;
   [key: string]: any;
 }
 
@@ -67,8 +69,8 @@ function EditIcon() {
       fill="currentColor"
       strokeWidth="0"
       viewBox="0 0 576 512"
-      height="20px"
-      width="20px"
+      height="12px"
+      width="12px"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" />
@@ -166,11 +168,11 @@ interface ModalDialogProps {
 
 function ModalDialog({ open, onClose, modal, selectedRow }: ModalDialogProps) {
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
+    <Dialog open={open} maxWidth="xl" fullWidth>
       <div className="flex justify-end">
         <button
           onClick={onClose}
-          className="text-gray-500 hover:text-gray-800 text-xl font-bold p-5"
+          className=" font-bold p-1 m-5 w-[30px] h-[30px] flex items-center justify-center hover:animate-pulse border shadow rounded bg-red-500 text-white"
         >
           &times;
         </button>
@@ -255,6 +257,7 @@ function useColumns(
     handleRowUpdate: (row: GridRowModel) => GridRowModel;
     onModalOpen: (row: GridValidRowModel) => void;
   },
+  colSize?: Record<string, number>,
 ) {
   const {
     flex,
@@ -310,14 +313,19 @@ function useColumns(
 
           return value;
         },
-        flex,
+        flex: key == "id" ? false : !colSize?.[key],
+        width: key == "id" ? 80 : (colSize?.[key] ?? undefined),
         editable: editableFields?.includes(key) ?? false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
         renderCell: buttons?.[key]
-          ? (params: any) =>
-              React.cloneElement(buttons[key], {
+          ? (params: any) => {
+              const children =
+                buttons?.[key]?.type == "input" ? null : params?.row?.[key];
+
+              return React.cloneElement(buttons[key], {
                 className: `${params?.className ?? ""} m-auto text-xs`,
-                children: params?.row?.[key],
+                children,
+                row: params?.row,
                 onClick: async (e: TableButtonProps) => {
                   e.row = params?.row;
                   if (buttons[key]?.props?.onClick) {
@@ -326,7 +334,8 @@ function useColumns(
                     if (newVal) handleRowUpdate({ ...e.row, newVal });
                   }
                 },
-              })
+              });
+            }
           : null,
       }));
 
@@ -334,9 +343,10 @@ function useColumns(
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        flex,
+        // flex,
         editable: false,
         type: "string",
+        width: 10,
         renderCell: (params: any) =>
           (
             <Button
@@ -362,6 +372,7 @@ function IHTable({
   editableFields,
   onSave,
   onSelect,
+  onCloseModal,
   buttons,
   exportName,
   modal,
@@ -373,6 +384,7 @@ function IHTable({
   currentCoin = "$",
   fontSize = "1rem",
   className,
+  colSize,
 }: TableProps) {
   if (modal && onSelect)
     throw new Error("Solo se puede usar modal o onSelect por separado");
@@ -397,6 +409,9 @@ function IHTable({
     setOpen(true);
   };
   const handleClose = () => {
+    const pass = onCloseModal ? onCloseModal?.(modalRow) : true;
+
+    if (!pass) return;
     setOpen(false);
     setModalRow(undefined);
   };
@@ -420,15 +435,20 @@ function IHTable({
     return [];
   }, [selectedRows, rows]);
 
-  const columns = useColumns(rows, currentCoin, {
-    flex,
-    editableFields,
-    buttons: resolvedButtons,
-    hideColumns,
-    modal,
-    handleRowUpdate,
-    onModalOpen: handleModalOpen,
-  });
+  const columns = useColumns(
+    rows,
+    currentCoin,
+    {
+      flex,
+      editableFields,
+      buttons: resolvedButtons,
+      hideColumns,
+      modal,
+      handleRowUpdate,
+      onModalOpen: handleModalOpen,
+    },
+    colSize,
+  );
 
   if (!rows.length) return null;