next-recomponents 2.0.40 → 2.0.42

package/package.json

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

package/src/index.tsx

@@ -19,3 +19,4 @@ export { useFormValues } from "./form";
 export { default as DocumentViewer } from "./doc-viewer";
 export { default as Table3 } from "./table3";
 export { default as usePopup } from "./pop";
+export { default as TableAdvanced } from "./table-advanced";

package/src/input/index.tsx

@@ -21,13 +21,13 @@ export default function Input({
   const [showPassword, setShowPassword] = useState(false);
   const svg = icon;
   return (
-    <div className="w-full relative">
-      <div className="relative flex items-center border rounded bg-white pr-1 mb-5">
+    <div className="w-full relative my-3">
+      <div className="relative flex items-center border rounded bg-white pr-1 mb-5 w-full">
         <input
           {...props}
           type={isPassword && showPassword ? "text" : props.type}
           className={[
-            "flex p-2 w-full bg-transparent pt-4",
+            "block p-2 w-full bg-transparent  min-w-0",
             isPassword && "pr-10",
             value !== "" && !isValid && "bg-red-200 text-black",
             value !== "" && isValid && "bg-green-200 text-black",
@@ -36,7 +36,7 @@ export default function Input({
             .filter(Boolean)
             .join(" ")}
         />
-        <label className="absolute -top-2.5 left-2 text-xs font-bold bg-white px-1">
+        <label className="absolute -top-2.5 left-2 text-xs font-bold  px-1">
           {label}
           {props?.required && <span className="text-red-500 ml-1">*</span>}
         </label>

package/src/modal/index.tsx

@@ -15,6 +15,7 @@ export default function Modal({
   children,
   color = "primary",
   title,
+  onClose,
 }: {
   button: ReactElement<React.ComponentPropsWithRef<"button">>;
   children: ReactElement<
@@ -22,9 +23,12 @@ export default function Modal({
   >;
   color?: PopupColor;
   title?: string;
+  onClose?: () => Promise<boolean>;
 }) {
   const pop = usePopup();
-  const hide = () => pop.close(false);
+  const hide = () => {
+    pop.close(false);
+  };
 
   const childrenWithHide = useMemo(
     () => cloneElement(children, { hide }),
@@ -39,14 +43,14 @@ export default function Modal({
   const onClick = props?.onClick;
 
   return (
-    <>
+    <div className="">
       {cloneElement(button, {
         onClick: (e) => {
           onClick?.(e as any);
-          pop.modal(childrenWithHide, color, false, true);
+          pop.modal(childrenWithHide, color, false, true, onClose);
         },
       })}
       {pop.PopupComponent}
-    </>
+    </div>
   );
 }

package/src/pop/color.tsx

@@ -58,7 +58,7 @@ export const COLOR_CONFIG: Record<PopupColor, ColorTokens> = {
     label: "◎",
   },
   white: {
-    bg: "from-gray-50 to-white",
+    bg: "from-white to-white",
     iconBg: "bg-gray-100",
     iconText: "text-gray-500",
     border: "border-gray-200",

package/src/pop/index.tsx

@@ -30,13 +30,21 @@ export default function usePopup() {
     [],
   );
 
-  const close = useCallback((confirmed: boolean, value?: string) => {
-    setPopup((prev) => {
-      if (confirmed) prev.onConfirm?.(value);
-      else prev.onCancel?.();
-      return { ...prev, visible: false, inputValue: "" };
-    });
-  }, []);
+  const close = useCallback(
+    async (confirmed: boolean, value?: string) => {
+      const prev = { ...popup };
+      let visible = false;
+      if (confirmed) {
+        prev.onConfirm?.(value);
+      } else if (prev?.onCancel) {
+        visible = !Boolean(await prev.onCancel?.());
+      }
+
+      const data = { ...prev, visible, inputValue: "" };
+      setPopup(data);
+    },
+    [popup],
+  );
 
   const alert = useCallback(
     (message: string, color: PopupColor = "primary"): Promise<void> =>
@@ -58,14 +66,19 @@ export default function usePopup() {
       color: PopupColor = "primary",
       icons: boolean = false,
       full: boolean = false,
+      onClose?: () => Promise<boolean>,
     ): Promise<void> =>
       new Promise((resolve) =>
         open({
           type: "modal",
           message,
           color,
-          onConfirm: () => resolve(),
-          onCancel: () => resolve(),
+          // onConfirm: () => {
+          //   resolve();
+          // },
+          onCancel: async () => {
+            return await onClose?.();
+          },
           icons,
           full,
         }),

package/src/pop/overlay.tsx

@@ -16,7 +16,7 @@ export function PopupOverlay({
 
   return (
     <div
-      className={"fixed inset-0 flex items-center justify-center z-[1000]  "}
+      className="fixed inset-0 flex items-center justify-center z-[1000] overflow-auto p-1"
       style={{ background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)" }}
       // onClick={(e) => {
       //   if (e.target === e.currentTarget) {
@@ -33,7 +33,7 @@ export function PopupOverlay({
       `}</style>
 
       <div
-        className={`bg-gradient-to-br ${c.bg} border ${c.border} ${popup.full == true ? " w-full h-screen m-20 " : " max-w-sm "} rounded-2xl shadow-2xl  mx-4`}
+        className={`bg-gradient-to-br ${c.bg} border ${c.border} ${popup.full == true ? " w-screen h-screen  mt-10 " : " max-w-sm "} rounded shadow  m-2`}
         style={{ animation: "fadeInScale 0.18s ease-out", overflow: "auto" }}
       >
         {/* Header */}
@@ -77,7 +77,9 @@ export function PopupOverlay({
         )}
 
         {/* Divider */}
-        <div className={`border-t ${c.border} mt-4`} />
+        {popup.type !== "modal" && (
+          <div className={`border-t ${c.border} mt-4`} />
+        )}
 
         {/* Actions */}
         {popup.type !== "modal" && (

package/src/pop/types.ts

@@ -40,7 +40,7 @@ export interface PopupState {
   inputValue: string;
   color: PopupColor;
   onConfirm?: (value?: string) => void;
-  onCancel?: () => void;
+  onCancel?: () => void | Promise<boolean | void>;
   icons?: boolean;
   full?: boolean;
 }

package/src/select/index.tsx

@@ -119,7 +119,7 @@ export default function Select({
     }
   }, [isOpen]);
   return (
-    <div ref={containerRef} className="w-full relative mb-5">
+    <div ref={containerRef} className="w-full relative my-3">
       <div className="relative flex items-center border rounded bg-white">
         <input
           autoComplete="off"
@@ -163,7 +163,7 @@ export default function Select({
           onKeyDown={handleKeyDown}
         />
         {label && (
-          <label className="absolute -top-2.5 left-2 text-xs font-bold bg-white px-1">
+          <label className="absolute -top-2.5 left-2 text-xs font-bold  px-1">
             {label} {props?.required && <span className="text-red-500">*</span>}
           </label>
         )}

package/src/table/index.tsx

@@ -9,13 +9,6 @@ import regularExpresions from "../regular-expresions";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
-export interface TableButtonProps extends React.MouseEvent<
-  HTMLButtonElement,
-  MouseEvent
-> {
-  row: Record<string, any>;
-}
-
 type FooterAggregation = "sum" | "avg" | "count";
 
 interface FooterType {
@@ -23,7 +16,12 @@ interface FooterType {
 }
 
 type GridDensity = "compact" | "standard" | "comfortable";
-
+export interface TableButtonProps extends React.MouseEvent<
+  HTMLButtonElement,
+  MouseEvent
+> {
+  row: Record<string, any>;
+}
 interface TableProps {
   data: any;
   searchable?: boolean;

package/src/table-advanced/context.ts

@@ -0,0 +1,88 @@
+import { useEffect, useMemo, useReducer, useState } from "react";
+import { filterReducer } from "./filter.reducer";
+import { FiltersType, SortType } from "./types";
+import { sortReducer } from "./sort.reducer";
+import useExcel from "../use-excel";
+
+export default function useContext({ onSelect }: { onSelect?: boolean }) {
+  const excel = useExcel();
+  const [editions, setEditions] = useState<any[]>([]);
+  const [selected, setSelected] = useState<any[]>([]);
+  const [data, setData] = useState<any[]>([]);
+  const headers = [...new Set(data.map((b) => Object.keys(b)).flat())];
+
+  const [currentHeader, setCurrentHeader] = useState<string | null>(null);
+  const cols = headers.length;
+  const [filters, setFilters] = useReducer(
+    filterReducer,
+    new Array<FiltersType>(),
+  );
+  const [searchBy, setSearchBy] = useState<string>("");
+  const [sort, setSort] = useReducer(sortReducer, new Array<SortType>());
+
+  const sortedData: any[] = useMemo(() => {
+    return [...data].sort((a, b) => {
+      for (const { field, type } of sort.reverse()) {
+        const av = a[field];
+        const bv = b[field];
+
+        // nulls/undefined van siempre al final, independiente de ASC/DESC
+        if (av == null && bv == null) continue;
+        if (av == null) return 1;
+        if (bv == null) return -1;
+
+        let cmp: number;
+        if (typeof av === "number" && typeof bv === "number") {
+          cmp = av - bv;
+        } else {
+          cmp = `${av}`.localeCompare(`${bv}`, undefined, { numeric: true });
+        }
+
+        if (cmp !== 0) {
+          return type === "DESC" ? -cmp : cmp;
+        }
+        // empate: sigue al siguiente campo en context.sort
+      }
+      return 0;
+    });
+  }, [data, sort]);
+  const filteredData = [...sortedData].filter((d) => {
+    if (editions.includes(d?.id)) return true;
+
+    for (const { field, values } of filters) {
+      if (!values.includes(d[field])) {
+        return false;
+      }
+    }
+    return true;
+  });
+
+  useEffect(() => {
+    if (filters.length == 0) {
+      setEditions([]);
+    }
+  }, [filters]);
+  return {
+    currentHeader,
+    setCurrentHeader,
+    sort,
+    setSort,
+    cols,
+    headers,
+    data,
+    sortedData,
+    filters,
+    setFilters,
+    filteredData,
+    setData,
+    searchBy,
+    setSearchBy,
+    selected,
+    setSelected,
+    editions,
+    excel,
+    setEditions,
+  };
+}
+
+export type ContextType = ReturnType<typeof useContext>;

package/src/table-advanced/filter.reducer.ts

@@ -0,0 +1,19 @@
+import { FiltersType } from "./types";
+
+export const filterReducer = (acc: FiltersType[], b: FiltersType | null) => {
+  if (b == null) return [];
+  const newAcc: FiltersType[] = [];
+  newAcc.push(b);
+  return newAcc;
+
+  // const newAcc = [...acc];
+
+  // const index = newAcc.findIndex((aa) => aa.field == b.field);
+  // if (index >= 0) {
+  //   newAcc[index].values = b.values;
+  // } else {
+  //   newAcc.push(b);
+  // }
+
+  // return newAcc;
+};