next-recomponents 1.3.5 → 1.3.7

package/package.json

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

package/src/table/filter.menu.tsx

@@ -22,13 +22,7 @@ export default function FilterMenu({
 
   useEffect(() => {
     setNewMapedData(
-      [
-        ...new Set<string>(
-          mapedData
-            .filter((md) => md.__visible__ === true)
-            .map((md: any) => md[h])
-        ),
-      ].filter((item) => {
+      [...new Set<string>(mapedData.map((md: any) => md[h]))].filter((item) => {
         return item && `${item}`.toLowerCase().includes(text.toLowerCase());
       })
     );
@@ -90,10 +84,13 @@ export default function FilterMenu({
                         .every((d) => d === false)}
                       onChange={(e) => {
                         const nmd = [...mapedData];
+                        const all = nmd
+                          .map((d) => d[h].exclude)
+                          .every((d) => d === false);
                         setMapedData(
                           nmd.map((d) => {
                             const newd = { ...d };
-                            newd[h].exclude = false;
+                            newd[h].exclude = all;
                             return newd;
                           })
                         );

package/src/table/filters.tsx

@@ -14,6 +14,22 @@ export function FilterOffIcon() {
   );
 }
 
+export function SaveIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M272 64h-16c-4.4 0-8 3.6-8 8v72c0 4.4 7.6 8 12 8h12c4.4 0 8-3.6 8-8V72c0-4.4-3.6-8-8-8z"></path>
+      <path d="M433.9 130.1L382 78.2c-9-9-21.3-14.2-34.1-14.2h-28c-8.8 0-16 7.3-16 16.2v80c0 8.8-7.2 16-16 16H160c-8.8 0-16-7.2-16-16v-80c0-8.8-7.2-16.2-16-16.2H96c-17.6 0-32 14.4-32 32v320c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V164c0-12.7-5.1-24.9-14.1-33.9zM322 400.1c0 8.8-8 16-17.8 16H143.8c-9.8 0-17.8-7.2-17.8-16v-96c0-8.8 8-16 17.8-16h160.4c9.8 0 17.8 7.2 17.8 16v96z"></path>
+    </svg>
+  );
+}
 export function ExcelIcon() {
   return (
     <svg

package/src/table/h.tsx

@@ -1,18 +1,21 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { TableProps } from ".";
 import TD from "./td";
-import { FilterOffIcon } from "./filters";
+import { ExcelIcon, FilterOffIcon, SaveIcon } from "./filters";
 import FilterMenu from "./filter.menu";
+import useExportdata from "./export";
 
 export default function HTable({
   data,
-  mapedData,
-  setMapedData,
   symbols,
   totals,
   exportName,
+  onSave,
   ...props
 }: TableProps) {
+  if (!Array.isArray(data)) return null;
+  const [mapedData, setMapedData] = useState([...data]);
+  const exported = useExportdata();
   const [selected, setSelected] = useState<number | null>(null);
   const [selectedFilter, setSelectedFilter] = useState<number | null>(null);
   const modalRef = useRef<HTMLDialogElement>(null);
@@ -34,22 +37,31 @@ export default function HTable({
     }, {});
   }, [mapedData]);
 
+  useEffect(() => {
+    setMapedData(data);
+  }, [data]);
+
   useEffect(() => {
     const newData = data.map((d: any, trkey: number) => {
-      const obj: any = { __visible__: true };
+      const obj: any = {};
       for (let key in d) {
+        const item: any = {};
+        for (let key in d) {
+          item[key] = d[key]?.content || d[key];
+        }
         const typeOf = typeof d[key];
         const isObject = typeOf == "object";
-        const isDate = typeOf == "string" && d[key].includes("T");
+        const isDate = typeOf == "string" && d[key].toString().includes("T");
         const cellTypeOf = isDate ? "date" : isObject ? "object" : typeOf;
         const content =
           cellTypeOf == "date"
             ? d[key].split("T").join(" ").split(".")[0]
             : cellTypeOf == "object"
             ? React.isValidElement(d[key])
-              ? d[key]
+              ? (d[key]?.props as any).defaultValue
               : JSON.stringify(d[key])
             : d[key];
+        const handler = React.isValidElement(d[key]) ? d[key] : null;
         obj[key] = {
           index: trkey,
           originalData: content,
@@ -58,14 +70,46 @@ export default function HTable({
           content,
           name: key,
           exclude: false,
+          handler,
         };
       }
       return obj;
     });
     setMapedData(newData);
   }, [data]);
+
+  const values = useMemo(() => {
+    return mapedData.length > 0
+      ? mapedData
+          .map((d: any) => Object.keys(d).map((k) => ({ [k]: d[k].content })))
+          .map((d) => Object.assign({}, ...d))
+      : ({} as any);
+  }, [mapedData]);
+
   return (
     <>
+      <div className="flex gap-2">
+        {onSave && (
+          <button
+            className="p-2 border rounded shadow bg-blue-800 text-white flex gap-1"
+            onClick={(e) => {
+              onSave({ data: values });
+            }}
+          >
+            <SaveIcon /> Guardar
+          </button>
+        )}
+        {exportName && mapedData.length > 0 && (
+          <>
+            <button
+              className="p-2 border rounded shadow bg-green-800 text-white flex gap-1"
+              onClick={(e) => exported.export(values, exportName)}
+            >
+              <ExcelIcon /> Exportar
+            </button>
+          </>
+        )}
+      </div>
       <table {...props} className="w-full border-collapse table-auto">
         <thead className="bg-gray-800 text-white">
           <tr>
@@ -73,7 +117,7 @@ export default function HTable({
               return (
                 <th
                   key={h}
-                  className="whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px] border-b p-5"
+                  className="whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px] border-b p-2"
                 >
                   <div
                     className="cursor-pointer flex "
@@ -81,7 +125,7 @@ export default function HTable({
                       setSelectedFilter(key == selectedFilter ? null : key);
                     }}
                   >
-                    <div className="text-white w-full bg-black rounded p-1 flex justify-center">
+                    <div className="text-white w-full bg-black rounded  flex justify-center">
                       {h}{" "}
                       {!mapedData
                         ?.map((d: any) => d[h]?.exclude)
@@ -136,7 +180,6 @@ export default function HTable({
                       key={id}
                       index={trKey}
                       symbols={symbols}
-                      handlers={props.handlers}
                       item={item}
                       color={color}
                       mapedData={mapedData}
@@ -148,27 +191,29 @@ export default function HTable({
             );
           })}
         </tbody>
-        <tfoot className="bg-gray-800 text-white">
-          <tr>
-            {head.map((h, fkey) => {
-              return (
-                <th
-                  key={fkey}
-                  className="text-right border-b max-w-[200px] p-5 "
-                >
-                  {totals && totals.includes(h) && (
-                    <div className="flex justify-between text-white w-full bg-black rounded p-1">
-                      <div className="p-1">
-                        {symbols && symbols[h] && symbols[h]}
+        {totals && (
+          <tfoot className="bg-gray-800 text-white">
+            <tr>
+              {head.map((h, fkey) => {
+                return (
+                  <th
+                    key={fkey}
+                    className="text-right border-b max-w-[200px] p-2 "
+                  >
+                    {totals.includes(h) && (
+                      <div className="flex justify-between text-white w-full bg-black rounded ">
+                        <div className="p-1">
+                          {symbols && symbols[h] && symbols[h]}
+                        </div>
+                        <div className="p-1">{mapedTotals[h]}</div>
                       </div>
-                      <div className="p-1">{mapedTotals[h]}</div>
-                    </div>
-                  )}
-                </th>
-              );
-            })}
-          </tr>
-        </tfoot>
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </tfoot>
+        )}
       </table>
     </>
   );

package/src/table/index.tsx

@@ -1,58 +1,27 @@
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";
 import HTable from "./h";
-import useExport from "./export";
-import { ExcelIcon } from "./filters";
+type DataType = string | number | Date | object | undefined | null;
+type Item = { content: DataType; handler: ReactNode };
+export type DataTypeOrItem = DataType | Item;
 
 export interface TableProps
   extends React.DetailedHTMLProps<
     React.TableHTMLAttributes<HTMLTableElement>,
     HTMLTableElement
   > {
-  data: Record<string, any> | Array<Record<string, any>>;
+  data: Record<string, DataTypeOrItem> | Array<Record<string, DataTypeOrItem>>;
   dataTypes?: Record<string, any>;
-  mapedData?: any;
-  setMapedData?: any;
   totals?: Array<string>;
   symbols?: Record<string, ReactNode>;
   exportName?: string;
-  handlers?: Record<string, ReactNode>;
+  onSave?: (e: { data: Record<string, any> }) => void;
 }
 
-export default function Table(props: TableProps) {
-  const [mapedData, setMapedData] = useState([]);
-  const isArray = Array.isArray(props.data);
-  const exported = useExport();
+export default function Table({ ...props }: TableProps) {
   return (
     <div className="bg-gray-200 border rounded shadow p-1">
-      {props?.exportName && props.data.length > 0 && (
-        <>
-          <button
-            className="p-2 border rounded shadow bg-green-800 text-white flex gap-1"
-            onClick={(e) =>
-              exported.export(
-                mapedData.map((md: any) => {
-                  const { __visible__, ...newMd } = md;
-                  for (let i of Object.keys(newMd)) {
-                    newMd[i] = newMd[i].content;
-                  }
-                  return newMd;
-                }),
-                props.exportName
-              )
-            }
-          >
-            <ExcelIcon /> Exportar
-          </button>
-        </>
-      )}
-      {isArray ? (
-        <HTable
-          {...{
-            ...props,
-            mapedData,
-            setMapedData,
-          }}
-        />
+      {Array.isArray(props.data) ? (
+        <HTable {...props} />
       ) : (
         <div className=" p-5 border rounded shadow bg-yellw-500">
           No es un array

package/src/table/td.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { Dispatch, useMemo, useState } from "react";
 
 interface TDProps
   extends React.DetailedHTMLProps<
@@ -7,17 +7,14 @@ interface TDProps
   > {
   index: number;
   item: {
-    cellTypeOf: string;
     content: string;
-    title: string;
     name: string;
-    index: number;
+    handler: React.ReactNode;
   };
   color: string;
   symbols: Record<string, any> | undefined;
-  handlers: Record<string, any> | undefined;
   mapedData?: any;
-  setMapedData?: (data: any) => void;
+  setMapedData?: Dispatch<any>;
 }
 export default function TD({
   className,
@@ -25,7 +22,6 @@ export default function TD({
   index,
   color,
   symbols,
-  handlers,
   mapedData,
   setMapedData,
   ...props
@@ -52,69 +48,64 @@ export default function TD({
       { defaultValue: item?.content }
     );
 
-  const newProps2 =
-    handlers &&
-    React.isValidElement(handlers[item?.name]) &&
-    Object.keys(handlers[item?.name]?.props)?.reduce(
-      (acc: any, i) => {
-        try {
-          const newAcc = { ...acc };
-          const hasEvent = `${i}`.startsWith("on");
-          if (hasEvent) {
-            newAcc[i] = (e: any) => {
-              e.item = item;
-              handlers[item?.name].props[i]?.(e);
-              if (i == "onChange") {
-                const newData = [...mapedData];
-                newData[index][item?.name].content = e.target.value;
-                setMapedData?.(newData);
-              }
-            };
-          }
-          return newAcc;
-        } catch (error) {}
-      },
-      { value: item?.content }
-    );
   return (
     <td
       onDoubleClick={(e) => setIsHidded(!isHidded)}
-      title={item?.title}
+      // title={item?.title}
       className={[
         isHidded && color,
         !isHidded && "whitespace-nowrap overflow-hidden text-ellipsis   ",
         "border-b max-w-[200px] p-5 ",
-        ["number", "money"].includes(item?.cellTypeOf) && "text-right",
+        // ["number", "money"].includes(item?.cellTypeOf) && "text-right",
       ].join(" ")}
     >
-      {handlers && handlers[item?.name] ? (
-        <div>
-          {React.Children.map(handlers[item?.name], (child) => {
-            if (React.isValidElement(child)) {
-              return React.cloneElement(child as any, {
-                ...newProps2,
-              });
-            }
-          })}
-        </div>
-      ) : (
-        <div
-          className={symbols && symbols[item?.name] && "flex justify-between"}
-        >
+      <div className={symbols && symbols[item?.name] && "flex justify-between"}>
+        {symbols && (
           <div>
-            {symbols &&
-              React.Children.map(symbols[item?.name], (child) => {
-                if (React.isValidElement(child)) {
-                  return React.cloneElement(child, {
-                    ...newProps,
+            {React.Children.map(symbols[item?.name], (child) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                  ...newProps,
+                });
+              }
+              return child;
+            })}
+          </div>
+        )}
+
+        <div>
+          {item?.handler
+            ? React.Children.map(item.handler, (handler) => {
+                if (React.isValidElement(handler)) {
+                  return React.cloneElement(handler as any, {
+                    value: mapedData[index][item.name].content,
+                    onChange: (e: any) => {
+                      const nmd = [...mapedData];
+                      nmd[index][item.name].content = e.target.value;
+                      e.item = Object.assign(
+                        {},
+                        ...nmd.map((d: any) =>
+                          Object.keys(d).map((k) => ({ [k]: d[k].content }))
+                        )[index]
+                      );
+                      e.setData = (data: any) => {
+                        const nmd = [...mapedData];
+                        for (let datum in data) {
+                          nmd[index][datum].content = data[datum];
+                        }
+                        setMapedData?.(nmd);
+                      };
+                      setMapedData?.(nmd);
+                      handler?.props?.onChange?.(e);
+                      // console.log("hola mundo", e.item);
+                    },
                   });
                 }
-                return child;
-              })}
-          </div>
-          <div>{item?.content}</div>
+                return handler;
+              })
+            : item.content}
         </div>
-      )}
+      </div>
     </td>
   );
 }