next-recomponents 1.2.6 → 1.2.7

package/dist/index.d.mts

@@ -63,6 +63,7 @@ interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<H
     totals?: Array<string>;
     symbols?: Record<string, ReactNode>;
     exportName?: string;
+    handlers?: Record<string, ReactNode>;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -63,6 +63,7 @@ interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<H
     totals?: Array<string>;
     symbols?: Record<string, ReactNode>;
     exportName?: string;
+    handlers?: Record<string, ReactNode>;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -11137,13 +11137,19 @@ function TD(_a) {
     item,
     index,
     color: color2,
-    symbols
+    symbols,
+    handlers,
+    mapedData,
+    setMapedData
   } = _b, props = __objRest(_b, [
     "className",
     "item",
     "index",
     "color",
-    "symbols"
+    "symbols",
+    "handlers",
+    "mapedData",
+    "setMapedData"
   ]);
   const [isHidded, setIsHidded] = (0, import_react23.useState)(false);
   const isNode = (0, import_react23.useMemo)(() => {
@@ -11179,10 +11185,37 @@ function TD(_a) {
         "border-b max-w-[200px] p-5 ",
         ["number", "money"].includes(item == null ? void 0 : item.cellTypeOf) && "text-right"
       ].join(" "),
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: symbols && symbols[item == null ? void 0 : item.name] && "flex justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: symbols && symbols[item == null ? void 0 : item.name] && (isNode ? import_react23.default.cloneElement(symbols[item == null ? void 0 : item.name], __spreadValues({}, newProps)) : symbols[item == null ? void 0 : item.name]) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: item == null ? void 0 : item.content })
-      ] })
+      children: handlers && handlers[item == null ? void 0 : item.name] ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: import_react23.default.Children.map(handlers[item == null ? void 0 : item.name], (child) => {
+        if (import_react23.default.isValidElement(child)) {
+          const oldProps = (child == null ? void 0 : child.props) || {};
+          const alteredProps = __spreadProps(__spreadValues({}, oldProps), {
+            value: item == null ? void 0 : item.content,
+            onChange: (e) => {
+              var _a2;
+              const newData = [...mapedData];
+              newData[index][item == null ? void 0 : item.name].content = e.target.value;
+              setMapedData == null ? void 0 : setMapedData(newData);
+              e.item = item;
+              (_a2 = oldProps == null ? void 0 : oldProps.onChange) == null ? void 0 : _a2.call(oldProps, e);
+            }
+          });
+          return import_react23.default.cloneElement(child, __spreadValues({}, alteredProps));
+        }
+      }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "div",
+        {
+          className: symbols && symbols[item == null ? void 0 : item.name] && "flex justify-between",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: symbols && import_react23.default.Children.map(symbols[item == null ? void 0 : item.name], (child) => {
+              if (import_react23.default.isValidElement(child)) {
+                return import_react23.default.cloneElement(child, __spreadValues({}, newProps));
+              }
+              return child;
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: item == null ? void 0 : item.content })
+          ]
+        }
+      )
     }
   );
 }
@@ -11226,26 +11259,22 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 function FilterMenu({
   h,
   mapedData,
+  setMapedData,
   selectedFilter,
   index,
-  filters,
-  setFilters,
-  setSelectedFilter,
-  items
+  setSelectedFilter
 }) {
-  const [visibleFloat, setVisibleFloat] = (0, import_react24.useState)(false);
   const [text, setText] = (0, import_react24.useState)("");
   const [newMapedData, setNewMapedData] = (0, import_react24.useState)([]);
   (0, import_react24.useEffect)(() => {
     setNewMapedData(
-      [...new Set(mapedData.map((md) => {
-        var _a;
-        return (_a = md[h]) == null ? void 0 : _a.content;
-      }))].filter(
-        (item) => {
-          return item && `${item}`.toLowerCase().includes(text.toLowerCase());
-        }
-      )
+      [
+        ...new Set(
+          mapedData.filter((md) => md.__visible__ === true).map((md) => md[h])
+        )
+      ].filter((item) => {
+        return item && `${item}`.toLowerCase().includes(text.toLowerCase());
+      })
     );
   }, [mapedData, text]);
   (0, import_react24.useEffect)(() => {
@@ -11258,21 +11287,25 @@ function FilterMenu({
         className: "absolute bg-white border rounded min-w-[200px] ",
         style: { zIndex: 9999999 },
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-start text-black", children: [
-          filters[h].length != items.length && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
               className: "flex gap-1 w-full hover:bg-gray-100 p-3 cursor-pointer",
               onClick: (e) => {
-                const newFilters = __spreadValues({}, filters);
-                newFilters[h] = [...items];
-                setFilters(newFilters);
+                const nmd = [...mapedData];
+                setMapedData(
+                  nmd.map((d) => {
+                    const newd = __spreadValues({}, d);
+                    newd[h].exclude = false;
+                    return newd;
+                  })
+                );
+                setSelectedFilter(null);
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-red-500", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FilterOffIcon, {}) }),
                 " ",
-                'Limpiar filtro de "',
-                h,
-                '"'
+                "Limpiar filtros"
               ]
             }
           ),
@@ -11284,7 +11317,6 @@ function FilterMenu({
               placeholder: "Buscar...",
               value: text,
               onChange: (e) => {
-                setFilters(__spreadProps(__spreadValues({}, filters), { [h]: [] }));
                 setText(e.target.value);
               }
             }
@@ -11300,15 +11332,16 @@ function FilterMenu({
                     "input",
                     {
                       type: "checkbox",
-                      checked: filters[h].length == items.length,
+                      checked: mapedData.map((d) => d[h].exclude).every((d) => d === false),
                       onChange: (e) => {
-                        const newFilters = __spreadValues({}, filters);
-                        if (filters[h].length == items.length) {
-                          newFilters[h] = [];
-                        } else {
-                          newFilters[h] = [...items];
-                        }
-                        setFilters(newFilters);
+                        const nmd = [...mapedData];
+                        setMapedData(
+                          nmd.map((d) => {
+                            const newd = __spreadValues({}, d);
+                            newd[h].exclude = false;
+                            return newd;
+                          })
+                        );
                       }
                     }
                   ),
@@ -11316,8 +11349,20 @@ function FilterMenu({
                   "(Seleccionar todo)"
                 ] }) }),
                 newMapedData.map((item, key) => {
-                  var _a;
-                  const checked = (_a = filters[h]) == null ? void 0 : _a.find((i) => i == item);
+                  const excludeds = mapedData.filter((d) => {
+                    const obj = Object.keys(d).map((i) => {
+                      return d[i].exclude === true;
+                    });
+                    return obj.some((o) => o === true);
+                  });
+                  const finded = excludeds.find(
+                    (e) => e[item.name].content == item.content
+                  );
+                  const disabled = finded && Object.keys(finded).map((k) => {
+                    var _a;
+                    if (k == item.name) return false;
+                    return (_a = finded[k]) == null ? void 0 : _a.exclude;
+                  }).some((i) => i === true);
                   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "div",
                     {
@@ -11327,27 +11372,20 @@ function FilterMenu({
                           "input",
                           {
                             type: "checkbox",
-                            checked: !!checked,
+                            checked: !item.exclude,
+                            disabled,
                             onChange: (e) => {
-                              const newFilters = __spreadValues({}, filters);
-                              newFilters[h] = newFilters[h] || [];
-                              const index2 = newFilters[h].findIndex(
-                                (nf) => nf == item
-                              );
-                              if (index2 >= 0) {
-                                newFilters[h].splice(index2, 1);
-                              } else {
-                                newFilters[h].push(item);
-                              }
-                              setFilters(newFilters);
+                              const n = [...newMapedData];
+                              n[key].exclude = !item.exclude;
+                              setNewMapedData(n);
                             }
                           }
                         ),
                         " ",
-                        item
+                        item.content
                       ] })
                     },
-                    item
+                    item.content
                   );
                 })
               ]
@@ -11356,7 +11394,9 @@ function FilterMenu({
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full p-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-row  gap-2 justify-end w-full ", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
-              onClick: (e) => setSelectedFilter(null),
+              onClick: (e) => {
+                setSelectedFilter(null);
+              },
               className: "p-1 border rounded shadow hover:bg-gray-100",
               children: "Aceptar"
             }
@@ -11399,12 +11439,11 @@ function HTable(_a) {
   const [selected, setSelected] = (0, import_react25.useState)(null);
   const [selectedFilter, setSelectedFilter] = (0, import_react25.useState)(null);
   const modalRef = (0, import_react25.useRef)(null);
-  const [filters, setFilters] = (0, import_react25.useState)({});
   const head = (0, import_react25.useMemo)(() => {
     return [...new Set(data.map((d) => Object.keys(d)).flat())];
   }, [data]);
   const mapedTotals = (0, import_react25.useMemo)(() => {
-    return mapedData.reduce((acc, md) => {
+    return mapedData == null ? void 0 : mapedData.reduce((acc, md) => {
       head.forEach((h) => {
         var _a2, _b2;
         const value = isNaN(+((_a2 = md[h]) == null ? void 0 : _a2.content)) ? 0 : +((_b2 = md[h]) == null ? void 0 : _b2.content);
@@ -11417,21 +11456,9 @@ function HTable(_a) {
       return acc;
     }, {});
   }, [mapedData]);
-  (0, import_react25.useEffect)(() => {
-    setFilters(__spreadValues({}, head.reduce((acc, hh) => {
-      const newAcc = __spreadValues({}, acc);
-      newAcc[hh] = [
-        ...new Set(mapedData.map((md) => {
-          var _a2;
-          return (_a2 = md[hh]) == null ? void 0 : _a2.content;
-        }))
-      ];
-      return newAcc;
-    }, {})));
-  }, [mapedData, head]);
   (0, import_react25.useEffect)(() => {
     const newData = data.map((d, trkey) => {
-      const obj = {};
+      const obj = { __visible__: true };
       for (let key in d) {
         const typeOf = typeof d[key];
         const isObject2 = typeOf == "object";
@@ -11439,28 +11466,21 @@ function HTable(_a) {
         const cellTypeOf = isDate ? "date" : isObject2 ? "object" : typeOf;
         const content = cellTypeOf == "date" ? d[key].split("T").join(" ").split(".")[0] : cellTypeOf == "object" ? import_react25.default.isValidElement(d[key]) ? d[key] : JSON.stringify(d[key]) : d[key];
         obj[key] = {
+          index: trkey,
           originalData: content,
           cellTypeOf,
           title: content,
           content,
-          name: key
+          name: key,
+          exclude: false
         };
       }
       return obj;
     });
     setMapedData(newData);
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", __spreadProps(__spreadValues({}, props), { className: "w-full border-collapse table-auto", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", __spreadProps(__spreadValues({}, props), { className: "w-full border-collapse table-auto", children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "bg-gray-800 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: head.map((h, key) => {
-      var _a2;
-      const items = [
-        ...new Set(
-          mapedData.map((item) => {
-            var _a3;
-            return (_a3 = item[h]) == null ? void 0 : _a3.content;
-          })
-        )
-      ];
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "th",
         {
@@ -11476,18 +11496,16 @@ function HTable(_a) {
                 children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-white w-full bg-black rounded p-1 flex justify-center", children: [
                   h,
                   " ",
-                  ((_a2 = filters[h]) == null ? void 0 : _a2.length) != items.length && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-red-300", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterOffIcon, {}) })
+                  !mapedData.map((d) => d[h].exclude).every((d) => d === false) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-red-300", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterOffIcon, {}) })
                 ] })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               FilterMenu,
               {
-                filters,
-                setFilters,
-                items,
                 h,
                 mapedData,
+                setMapedData,
                 index: key,
                 selectedFilter,
                 setSelectedFilter
@@ -11495,25 +11513,23 @@ function HTable(_a) {
             )
           ]
         },
-        key
+        h
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "divide-y divide-gray-200", children: mapedData.filter((md) => {
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "divide-y divide-gray-200", children: mapedData.map((md, trKey) => {
       var _a2;
-      for (let datum of Object.keys(md)) {
-        if (!filters[datum].map((d) => `${d}`.toLowerCase()).includes(`${(_a2 = md[datum]) == null ? void 0 : _a2.content}`.toLowerCase())) {
-          return false;
+      const color2 = trKey % 2 == 0 ? "bg-white" : "bg-gray-100";
+      for (let d in md) {
+        if (md[d].exclude === true) {
+          return null;
         }
       }
-      return true;
-    }).map((md, trKey) => {
-      const color2 = trKey % 2 == 0 ? "bg-white" : "bg-gray-100";
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "tr",
         {
           onDoubleClick: (e) => {
-            var _a2;
-            (_a2 = modalRef.current) == null ? void 0 : _a2.showModal();
+            var _a3;
+            (_a3 = modalRef.current) == null ? void 0 : _a3.showModal();
           },
           onClick: (e) => setSelected(trKey),
           className: [
@@ -11522,28 +11538,41 @@ function HTable(_a) {
             selected == trKey && "bg-green-200 hover:bg-green-300"
           ].join(" "),
           children: head.map((h, tdKey) => {
+            var _a3;
+            const item = md[h];
+            const id3 = trKey + "-" + (((_a3 = md == null ? void 0 : md.id) == null ? void 0 : _a3.content) || tdKey) + "-" + h;
             return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               TD,
               {
                 index: trKey,
                 symbols,
-                item: md[h],
-                color: color2
+                handlers: props.handlers,
+                item,
+                color: color2,
+                mapedData,
+                setMapedData
               },
-              tdKey
+              id3
             );
           })
         },
-        trKey
+        ((_a2 = md == null ? void 0 : md.id) == null ? void 0 : _a2.content) || trKey
       );
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tfoot", { className: "bg-gray-800 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: head.map((h, fkey) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "text-right border-b max-w-[200px] p-5 ", children: totals && totals.includes(h) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex justify-between text-white w-full bg-black rounded p-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "p-1", children: symbols && symbols[h] && symbols[h] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "p-1", children: mapedTotals[h] })
-      ] }) }, fkey);
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "th",
+        {
+          className: "text-right border-b max-w-[200px] p-5 ",
+          children: totals && totals.includes(h) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex justify-between text-white w-full bg-black rounded p-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "p-1", children: symbols && symbols[h] && symbols[h] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "p-1", children: mapedTotals[h] })
+          ] })
+        },
+        fkey
+      );
     }) }) })
-  ] }));
+  ] })) });
 }
 
 // ../../node_modules/xlsx/xlsx.mjs
@@ -32054,16 +32083,17 @@ function Table(props) {
   const isArray = Array.isArray(props.data);
   const exported = useExportdata();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "bg-gray-200 border rounded shadow p-1", children: [
-    (props == null ? void 0 : props.exportName) && props.data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    (props == null ? void 0 : props.exportName) && props.data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
         className: "p-2 border rounded shadow bg-green-800 text-white flex gap-1",
         onClick: (e) => exported.export(
           mapedData.map((md) => {
-            for (let i of Object.keys(md)) {
-              md[i] = md[i].content;
+            const _a = md, { __visible__ } = _a, newMd = __objRest(_a, ["__visible__"]);
+            for (let i of Object.keys(newMd)) {
+              newMd[i] = newMd[i].content;
             }
-            return md;
+            return newMd;
           }),
           props.exportName
         ),
@@ -32072,14 +32102,14 @@ function Table(props) {
           " Exportar"
         ]
       }
-    ),
-    isArray && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    ) }),
+    isArray ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       HTable,
       __spreadValues({}, __spreadProps(__spreadValues({}, props), {
         mapedData,
         setMapedData
       }))
-    )
+    ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: " p-5 border rounded shadow bg-yellw-500", children: "No es un array" })
   ] });
 }