@zauru-sdk/components 1.0.13 → 1.0.15

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.15](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.14...v1.0.15) (2024-03-21)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.14](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.13...v1.0.14) (2024-03-21)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.13](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.12...v1.0.13) (2024-03-21)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Chat/ChatLayout.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { FormDocumentType } from "@zauru-sdk/types";
+interface ChatLayoutProps {
+    children?: React.ReactNode;
+    sendingMessage?: boolean;
+    formConfig?: {
+        document_type: FormDocumentType;
+        form_id: number;
+        document_id: number;
+        id_number?: string;
+        reference?: string;
+        attachmentFieldId: number;
+        messageFieldId: number;
+    };
+}
+declare const ChatLayout: React.FC<ChatLayoutProps>;
+export default ChatLayout;

package/dist/Chat/ChatLayout.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { TextField } from "../Form";
+import { Form } from "@remix-run/react";
+import { LoadingInputSkeleton } from "src";
+import { AttachmentIconSVG, SendMessageIcon, SpinnerSvg, } from "@zauru-sdk/icons";
+const ChatLayout = ({ children, sendingMessage = false, formConfig = undefined, }) => {
+    const refAttachment = useRef(null);
+    const [formValues, setFormValues] = useState({ image: null });
+    const handleAttachmentClick = () => {
+        if (refAttachment.current) {
+            refAttachment.current.click();
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "flex flex-col-reverse overflow-y-auto p-4 bg-gray-100 border border-gray-200 rounded-lg grow max-h-[65vh]", children: children }), _jsxs(Form, { id: "formRef", encType: "multipart/form-data", method: "post", children: [formConfig ? (_jsxs(_Fragment, { children: [_jsx(TextField, { hidden: true, name: "reference", defaultValue: formConfig.reference ?? "" }), _jsx(TextField, { hidden: true, name: "form_id", defaultValue: formConfig.form_id }), _jsx(TextField, { hidden: true, name: "document_id", defaultValue: formConfig.document_id }), _jsx(TextField, { hidden: true, name: "document_type", defaultValue: formConfig.document_type }), _jsx(TextField, { hidden: true, name: "id_number", defaultValue: formConfig?.id_number ?? "" })] })) : (_jsx(_Fragment, {})), _jsxs("div", { className: "mt-4 flex", children: [sendingMessage ? (_jsx(LoadingInputSkeleton, {})) : (_jsx("input", { name: `message${formConfig?.messageFieldId
+                                    ? `_${formConfig?.messageFieldId}`
+                                    : ""}`, type: "text", placeholder: "Escribe un mensaje...", className: "form-input px-4 py-2 border border-gray-300 rounded-l-lg grow" })), _jsx("button", { onClick: handleAttachmentClick, className: `${formValues?.image ? "bg-blue-500" : ""} hover:bg-blue-700 text-white font-bold py-2 px-4`, type: "button", children: _jsx(AttachmentIconSVG, {}) }), _jsx("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-r-lg", type: "submit", name: "action", value: "sendMessage", children: sendingMessage ? _jsx(SpinnerSvg, {}) : _jsx(SendMessageIcon, {}) })] }), _jsx("input", { ref: refAttachment, hidden: true, name: `attachment${formConfig?.attachmentFieldId
+                            ? `_${formConfig?.attachmentFieldId}`
+                            : ""}`, type: "file", accept: ".jpg, .png, .jpeg, .png", onChange: (e) => {
+                            if (e.target.value && e.target.value !== "") {
+                                setFormValues({ ...formValues, image: e.target.value });
+                            }
+                            else {
+                                setFormValues({ ...formValues, image: null });
+                            }
+                        } })] })] }));
+};
+export default ChatLayout;

package/dist/Chat/ChatMessageHistory.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    author: string;
+    content: string;
+    date?: string;
+    onLike?: (like: boolean) => void;
+    onUpdateComment?: (text: string, itsNew?: boolean) => void;
+    id: string;
+    commentOwner?: boolean;
+    imageLink?: string;
+};
+export declare const ChatMessageHistory: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Chat/ChatMessageHistory.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIconSVG, PencilSvg } from "@zauru-sdk/icons";
+import { useState, useEffect, useRef } from "react";
+export const ChatMessageHistory = (props) => {
+    const { author, content, onLike, onUpdateComment, id, commentOwner = false, date, imageLink, } = props;
+    const initials = author ? author[0].toUpperCase() : "A";
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [updatedContent, setUpdatedContent] = useState(content);
+    const textAreaRef = useRef(null);
+    const [shouldPulse, setShouldPulse] = useState(false);
+    useEffect(() => {
+        if (isUpdating && textAreaRef.current) {
+            textAreaRef.current.style.height = "auto";
+            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+            textAreaRef.current.focus();
+        }
+    }, [isUpdating]);
+    // Efecto secundario que se ejecuta cada vez que 'isUpdating' cambia
+    useEffect(() => {
+        // Activar la animación
+        setShouldPulse(true);
+        // Establecer un temporizador para eliminar la clase después de que la animación se haya completado
+        const timer = setTimeout(() => {
+            setShouldPulse(false);
+        }, 15000); // Tiempo total de la animación
+        // Limpiar el temporizador si el componente se desmonta o si 'isUpdating' cambia de nuevo antes de que la animación se complete
+        return () => clearTimeout(timer);
+    }, [isUpdating]);
+    const handleUpdate = (e) => {
+        if (e.target.value.length <= 254) {
+            setUpdatedContent(e.target.value);
+        }
+    };
+    const handleUpdateClick = () => {
+        if (isUpdating) {
+            if (textAreaRef.current) {
+                textAreaRef.current.blur();
+            }
+            //onUpdateComment && onUpdateComment(updatedContent, itsNew);
+        }
+        setIsUpdating(!isUpdating);
+    };
+    return (_jsxs("div", { className: "p-1 rounded-xl flex items-center space-x-4 relative", children: [commentOwner && (_jsx("div", { className: "absolute top-2 right-2", children: _jsx("button", { onClick: handleUpdateClick, className: `${shouldPulse ? "animate-custom-pulse" : ""}`, children: isUpdating ? _jsx(CheckIconSVG, {}) : _jsx(PencilSvg, {}) }) })), _jsx("div", { className: `w-[0%] lg:w-[8%] h-16 bg-purple-300 rounded-full flex items-center justify-center overflow-hidden text-white text-xl font-bold`, children: initials }), _jsxs("div", { className: "flex flex-col justify-between h-full w-[92%]", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex flex-row space-x-2", children: [_jsx("div", { className: "text-xl font-medium text-black", children: author }), _jsx("div", { className: "text-xl font-medium text-gray-500", children: date && _jsxs(_Fragment, { children: [" - ", date] }) })] }), isUpdating ? (_jsx("textarea", { ref: textAreaRef, className: "bg-gray-100 rounded p-2 w-full resize-none", value: updatedContent, onChange: handleUpdate, maxLength: 254, placeholder: "Deja tus buenos deseos..." })) : (_jsx("p", { className: "text-gray-500", children: updatedContent }))] }), _jsx("div", { className: "flex justify-end items-center", children: _jsx("button", { onClick: () => { }, children: _jsx(_Fragment, {}) }) })] }), imageLink && (_jsx("div", { className: `w-[25%] flex items-center justify-center overflow-hidden text-white text-xl font-bold`, children: _jsx("div", { onClick: () => {
+                        return window.open(imageLink, "_blank");
+                    }, children: _jsx("img", { src: imageLink, alt: "IMG_CHAT", className: `h-48 w-48 inline mr-1 pb-1`, style: {
+                            stroke: "currentColor",
+                            strokeWidth: 2,
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            fill: "none",
+                            backgroundColor: "transparent",
+                        } }) }) }))] }));
+};

package/dist/Chat/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ChatLayout";
+export * from "./ChatMessageHistory";

package/dist/Chat/index.js

@@ -0,0 +1,2 @@
+export * from "./ChatLayout";
+export * from "./ChatMessageHistory";

package/dist/ConnectionState/ConnectionState.d.ts

@@ -0,0 +1,2 @@
+declare const ConnectionState: () => import("react/jsx-runtime").JSX.Element;
+export default ConnectionState;

package/dist/ConnectionState/ConnectionState.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsOnline } from "@zauru-sdk/hooks";
+const ConnectionState = () => {
+    const isOnline = useIsOnline();
+    // Definir estilos
+    const styles = {
+        container: {
+            padding: "10px",
+            borderRadius: "5px",
+            backgroundColor: isOnline ? "#d4edda" : "#f8d7da",
+            color: isOnline ? "#155724" : "#721c24",
+            fontWeight: "bold",
+        },
+        text: {
+            fontSize: "16px",
+            margin: 0,
+        },
+    };
+    // Renderizar el estado de conexión
+    return (_jsx("div", { style: styles.container, children: _jsx("p", { style: styles.text, children: isOnline ? "ONLINE ✅🌐" : "OFFLINE ❌🌐" }) }));
+};
+export default ConnectionState;

package/dist/ConnectionState/index.d.ts

@@ -0,0 +1 @@
+export * from "./ConnectionState";

package/dist/ConnectionState/index.js

@@ -0,0 +1 @@
+export * from "./ConnectionState";

package/dist/DynamicTable/BasicPrintDynamicTable.d.ts

@@ -0,0 +1,10 @@
+import { GenericDynamicTableColumn } from "@zauru-sdk/types";
+export declare const BasicTableHTML: (props: {
+    data: {
+        [key: string]: string;
+    }[];
+    headers: GenericDynamicTableColumn[];
+    footer: {
+        [key: string]: string;
+    };
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/DynamicTable/BasicPrintDynamicTable.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isNumeric } from "@zauru-sdk/common";
+//TABLA PARA LA IMPRESION:
+export const BasicTableHTML = (props) => {
+    const { data, footer, headers } = props;
+    return (_jsxs("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [_jsx("thead", { children: _jsx("tr", { children: headers?.map((titulo, index) => (_jsx("th", { style: {
+                            border: "1px solid black",
+                            padding: "10px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                        }, children: titulo.label }, index))) }) }), _jsx("tbody", { children: data?.map((fila, index) => (_jsx("tr", { children: headers?.map((titulo, index) => (_jsx("td", { style: {
+                            border: "1px solid black",
+                            padding: "1px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                            fontSize: isNumeric(fila[titulo.name])
+                                ? "2em"
+                                : "1em",
+                        }, children: fila[titulo.name] }, index))) }, index))) }), _jsx("tfoot", { children: _jsx("tr", { children: headers?.map((titulo, index) => (_jsx("td", { style: {
+                            padding: "10px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                            fontSize: isNumeric(footer[titulo.name])
+                                ? "2em"
+                                : "1em",
+                        }, children: footer[titulo.name] }, index))) }) })] }));
+};

package/dist/DynamicTable/DynamicPrintTable.d.ts

@@ -0,0 +1,23 @@
+import React, { type ReactNode } from "react";
+export type TableStateItem = {
+    item_id: string | undefined;
+    quantity: number | undefined;
+};
+export type FormatedItem = {
+    label: string;
+    value: number;
+    template: string;
+};
+type Props = {
+    name: string;
+    formName?: string;
+    className?: string;
+    items: FormatedItem[];
+    onChange?: (tableState?: TableStateItem[]) => void;
+    forwardedRef?: React.RefObject<{
+        insertItems: (items: FormatedItem[]) => void;
+        getTableState: (updatedData?: ReactNode[][]) => TableStateItem[] | undefined;
+    }>;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export default _default;

package/dist/DynamicTable/DynamicPrintTable.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useCallback, useState } from "react";
+import { TextFieldWithoutValidation } from "src";
+import { SelectFieldWithoutValidation } from "src";
+import { useAppSelector } from "@zauru-sdk/redux";
+const errorAnimation = {
+    hidden: { opacity: 0, y: -10 },
+    visible: { opacity: 1, y: 0 },
+};
+const DynamicPrintTable = ({ forwardedRef, ...props }) => {
+    const { items, onChange, className } = props;
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const createItemSelect = (rowIndex, defaultValue) => (_jsx(SelectFieldWithoutValidation, { name: "item_select", isClearable: true, onChange: (value) => {
+            const selectedItem = items?.find((x) => x.value === value?.value);
+            updateRow(rowIndex, selectedItem);
+        }, options: items, defaultValue: defaultValue }, rowIndex));
+    const createItemQuantity = (rowIndex, defaultValue) => (_jsx(TextFieldWithoutValidation, { name: "item_quantity", type: "number", integer: true, defaultValue: defaultValue ?? 1, min: 1, onChange: (value) => {
+            updateRow(rowIndex, undefined, Number(value));
+        } }, rowIndex));
+    const createTemplateName = (rowIndex, defaultValue) => (_jsx("div", { children: defaultValue != "" ? defaultValue : "No hay etiqueta" }, rowIndex));
+    const createRow = (rowIndex, item, quantity) => {
+        const itemCreated = createItemSelect(rowIndex, item ?? undefined);
+        const quantityCreated = createItemQuantity(rowIndex, quantity ?? 1);
+        const templateCreated = createTemplateName(rowIndex, item ? item.template : "Seleccione un item para visualizar su etiqueta.");
+        return [itemCreated, quantityCreated, templateCreated];
+    };
+    const [tableData, setTableData] = useState([]);
+    const [isInitialItemAdded, setIsInitialItemAdded] = useState(false);
+    const insertItems = useCallback((newItems) => {
+        setTableData((prevData) => [
+            ...(prevData ?? []),
+            ...newItems.map((item, index) => {
+                const rowIndex = (prevData?.length ?? 0) + index;
+                const [itemCreated, quantityCreated, templateCreated] = createRow(rowIndex, item);
+                updateRow(rowIndex, item, 1);
+                return [itemCreated, quantityCreated, templateCreated];
+            }),
+        ]);
+    }, [items]);
+    const getTableState = (temp) => {
+        const updatedData = temp ?? tableData;
+        const tableState = updatedData?.map((rowData) => {
+            const firstElement = rowData[0];
+            const item_id = React.isValidElement(firstElement)
+                ? firstElement.props.defaultValue?.value
+                : undefined;
+            const secondElement = rowData[1];
+            const quantity = React.isValidElement(secondElement)
+                ? secondElement.props.defaultValue
+                : undefined;
+            return {
+                item_id,
+                quantity,
+            };
+        });
+        return tableState;
+    };
+    const updateRow = (rowIndex, item, quantity) => {
+        setTableData((prevData) => {
+            const updatedData = prevData?.map((_, index) => {
+                if (index === rowIndex) {
+                    const firstElement = prevData[index][0];
+                    const selectedItem = item ??
+                        (React.isValidElement(firstElement)
+                            ? items?.find((x) => x.value === firstElement.props.defaultValue?.value)
+                            : undefined);
+                    const secondElement = prevData[index][1];
+                    const newQuantity = quantity
+                        ? quantity
+                        : React.isValidElement(secondElement)
+                            ? secondElement.props.defaultValue
+                            : undefined;
+                    return createRow(rowIndex, selectedItem, newQuantity);
+                }
+                else {
+                    return prevData[index];
+                }
+            });
+            if (onChange) {
+                const tableState = getTableState(updatedData);
+                onChange(tableState);
+            }
+            return updatedData;
+        });
+    };
+    const addRow = () => {
+        setTableData((prevData) => [
+            ...(prevData ?? []),
+            createRow(prevData?.length ?? 0),
+        ]);
+    };
+    const removeRow = (rowIndex) => {
+        setTableData((prevData) => prevData?.filter((_, index) => index !== rowIndex));
+    };
+    React.useImperativeHandle(forwardedRef, () => ({
+        insertItems,
+        getTableState,
+    }));
+    const pastelGrayBackground = {
+        backgroundColor: "#B69E99",
+    };
+    const renderHeader = () => (_jsxs("tr", { style: { ...pastelGrayBackground }, children: [_jsx("th", { className: "text-left align-middle p-2", children: "Item" }), _jsx("th", { className: "text-left align-middle p-2", children: "Cantidad" }), _jsx("th", { className: "text-left align-middle p-2", children: "Etiqueta" }), _jsx("th", { className: "w-16" })] }));
+    const renderRow = (rowData, rowIndex) => (_jsxs("tr", { children: [rowData.map((cellData, cellIndex) => (_jsx("td", { className: "align-middle p-2", children: cellData }, cellIndex))), rowIndex !== 0 && (_jsx("td", { className: "align-middle w-16", children: _jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        removeRow(rowIndex);
+                    }, type: "button", children: "x" }) }))] }, rowIndex));
+    const renderRows = () => {
+        return tableData?.map((rowData, rowIndex) => renderRow(rowData, rowIndex));
+    };
+    const error = formValidations[props.formName ?? "-1"][props.name];
+    const borderColor = error ? "border-red-500" : "border-transparent";
+    useEffect(() => {
+        if (!isInitialItemAdded && items?.length > 0) {
+            insertItems([items[0]]);
+            setIsInitialItemAdded(true);
+        }
+    }, [isInitialItemAdded, items, insertItems]);
+    return (_jsxs("div", { className: `${className} ${borderColor} border-2`, style: { overflowX: "auto" }, children: [!!error && _jsx("div", { className: "text-red-500 text-sm mb-2", children: error }), _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { className: "align-middle", children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            addRow();
+                                        }, type: "button", children: "+" }) }), _jsxs("td", { colSpan: 2, children: ["Total de etiquetas a imprimir:", " ", tableData?.reduce((sum, x) => {
+                                            const val = React.isValidElement(x[1])
+                                                ? x[1]?.props?.defaultValue
+                                                : undefined;
+                                            if (!sum)
+                                                return val;
+                                            return sum + val;
+                                        }, 0)] })] }) })] })] }));
+};
+export default React.forwardRef(DynamicPrintTable);

package/dist/DynamicTable/GenericDynamicTable.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { GenericDynamicTableColumn, RowDataType, SelectFieldOption } from "@zauru-sdk/types";
+type Props = {
+    name?: string;
+    className?: string;
+    columns: GenericDynamicTableColumn[];
+    onChange?: (tableState?: any[]) => void;
+    defaultValue?: RowDataType[];
+    footerRow?: RowDataType;
+    thCSSProperties?: React.CSSProperties;
+    thElementsClassName?: string;
+    editable?: boolean;
+    searcheables?: SelectFieldOption[];
+    loading?: boolean;
+    paginated?: boolean;
+    defaultItemsPerPage?: number;
+    itemsPerPageOptions?: number[];
+    withoutBg?: boolean;
+};
+export declare const GenericDynamicTable: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DynamicTable/GenericDynamicTable.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { SelectFieldWithoutValidation } from "../Form/SelectField";
+import { TextFieldWithoutValidation } from "../Form/TextField";
+import { CheckboxWithoutValidation } from "../Form/Checkbox";
+import { createModal } from "../Modal";
+import { Button } from "../Buttons/Button";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { generateClientUUID } from "@zauru-sdk/common";
+import { LoadingInputSkeleton, WithTooltip } from "src";
+import { TrashSvg } from "@zauru-sdk/icons";
+const GenericDynamicTableErrorComponent = ({ name, formName, }) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[formName ?? "-1"]?.[name ?? "-1"];
+    return error ? (_jsxs("p", { className: `mt-2 text-sm text-red-600 dark:text-red-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })) : (_jsx(_Fragment, {}));
+};
+export const GenericDynamicTable = (props) => {
+    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, } = props;
+    const [tableData, setTableData] = useState(defaultValue);
+    const [deletedData, setDeletedData] = useState([]);
+    const [search, setSearch] = useState("");
+    const [filteredTableData, setFilteredTableData] = useState(tableData);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
+    useEffect(() => {
+        if (defaultValue.length) {
+            setTableData(defaultValue);
+        }
+    }, []);
+    useEffect(() => {
+        setFilteredTableData(tableData);
+    }, [tableData]);
+    useEffect(() => {
+        changeFilteredData();
+    }, [tableData, search]);
+    const totalPages = () => {
+        return Math.ceil(filteredTableData.length / itemsPerPage);
+    };
+    const addRow = () => {
+        const defs = {};
+        columns.forEach((x) => {
+            defs[`${x.name}`] =
+                x.type == "label" || x.type == "textField"
+                    ? ""
+                    : x.type == "selectField"
+                        ? 0
+                        : x.type == "checkbox"
+                            ? false
+                            : 0;
+        });
+        setTableData((prevData) => [
+            ...prevData,
+            { id: generateClientUUID(), ...defs },
+        ]);
+    };
+    const removeRow = (rowId) => {
+        const newDeletedData = [...deletedData];
+        const deletedItem = tableData?.find((x) => x.id === rowId);
+        if (deletedItem && !isNaN(deletedItem.id)) {
+            newDeletedData.push(deletedItem);
+        }
+        setDeletedData(newDeletedData);
+        setTableData((prevData) => prevData?.filter((x) => x.id !== rowId));
+    };
+    const handleChange = (name, value, rowId) => {
+        // Encontrar el índice de la fila que está cambiando
+        const rowIndex = tableData.findIndex((x) => x.id === rowId);
+        // Crear una copia del objeto en esa fila
+        const updatedRow = { ...tableData[rowIndex], [name]: value };
+        // Copiar todo el array
+        const updatedData = [...tableData];
+        // Reemplazar el objeto en la fila que cambió
+        updatedData[rowIndex] = updatedRow;
+        // Actualizar el estado con el nuevo array
+        setTableData(updatedData);
+        onChange && onChange(updatedData);
+    };
+    const renderHeader = () => (_jsxs("tr", { style: { ...thCSSProperties }, children: [columns.map((column, index) => {
+                const ancho = column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
+                return (_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName}`, style: { width: `${ancho}%` }, children: column.label }, index));
+            }), editable && _jsx("th", { style: { width: "4%" } })] }));
+    const renderRow = (rowData, index) => {
+        return (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [columns.map((column) => {
+                    if (loading) {
+                        return (_jsx("td", { className: "align-middle p-1", children: _jsx(LoadingInputSkeleton, {}) }, `${rowData.id}-${column.name}`));
+                    }
+                    const tempVal = rowData[column.name];
+                    const defaultVal = column.type === "selectField"
+                        ? column.options?.find((x) => x.value === tempVal)
+                        : tempVal;
+                    if (column.type === "label") {
+                        return (_jsx("td", { className: "align-middle p-1", children: _jsx("div", { children: defaultVal }) }, `${rowData.id}-${column.name}`));
+                    }
+                    const FieldComponent = column.type === "textField"
+                        ? TextFieldWithoutValidation
+                        : column.type === "checkbox"
+                            ? CheckboxWithoutValidation
+                            : SelectFieldWithoutValidation;
+                    const setTableValue = (columnName, newValue) => {
+                        setTableData((prevState) => {
+                            // Encontrar el índice de la fila que está cambiando
+                            const rowIndex = prevState.findIndex((x) => x.id === rowData.id);
+                            // Crear una copia del objeto en esa fila
+                            const updatedRow = {
+                                ...prevState[rowIndex],
+                                [columnName]: newValue,
+                            };
+                            // Copiar todo el array
+                            const updatedData = [...prevState];
+                            // Reemplazar el objeto en la fila que cambió
+                            updatedData[rowIndex] = updatedRow;
+                            return updatedData;
+                        });
+                    };
+                    return (_jsx("td", { className: "align-middle p-1", children: column.loadingOptions ? (_jsx(LoadingInputSkeleton, {})) : (_jsx(FieldComponent, { 
+                            //name={column.name}
+                            type: column.textFieldType, integer: !!column.integer, disabled: column.disabled, isClearable: true, onChange: (value) => {
+                                const sendValue = value?.value ?? value;
+                                handleChange(column.name, sendValue, rowData.id);
+                                column.onChange &&
+                                    column.onChange(rowData, sendValue, setTableValue);
+                            }, defaultValue: defaultVal, options: column.options ?? [] }, `${rowData.id}-${column.name}`)) }, `${rowData.id}-${column.name}`));
+                }), editable && (_jsx("td", { className: "align-middle w-16", children: _jsx(WithTooltip, { text: "Eliminar", children: _jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                createModal({
+                                    title: "¿Está seguro que quiere eliminar este registro?",
+                                    description: "Una vez eliminada la información no podrá ser recuperada.",
+                                }).then((response) => {
+                                    if (response === "OK") {
+                                        removeRow(rowData.id);
+                                    }
+                                });
+                            }, type: "button", children: _jsx(TrashSvg, {}) }) }) }))] }, rowData.id));
+    };
+    const renderRows = () => {
+        let mapeable = filteredTableData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+        if (loading) {
+            mapeable = [
+                { id: 1 },
+                { id: 2 },
+                { id: 3 },
+                { id: 4 },
+                { id: 5 },
+                { id: 6 },
+                { id: 7 },
+                { id: 8 },
+                { id: 9 },
+                { id: 10 },
+            ];
+        }
+        return mapeable.map((rowData, index) => renderRow(rowData, index));
+    };
+    const handleChangeSearch = (newSearch) => {
+        setSearch(newSearch);
+    };
+    const changeFilteredData = () => {
+        if (search) {
+            const filteredData = tableData.filter((rowData) => {
+                for (const searchable of searcheables) {
+                    const column = columns.find((col) => col.name === searchable.value);
+                    if (column) {
+                        const tempVal = rowData[column.name];
+                        const defaultVal = column.type === "selectField"
+                            ? column.options?.find((x) => x.value === tempVal)?.label
+                            : tempVal;
+                        if (defaultVal
+                            ?.toString()
+                            .toLowerCase()
+                            .includes(search.toLowerCase())) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            });
+            setFilteredTableData(filteredData);
+        }
+        else {
+            setFilteredTableData(tableData);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [name && (_jsxs(_Fragment, { children: [_jsx(GenericDynamicTableErrorComponent, { name: name }), _jsx("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), _jsx("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), _jsxs("div", { className: `${className}`, children: [searcheables.length > 0 && (_jsx("div", { children: _jsx(TextFieldWithoutValidation, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
+                                .map((x) => x.label)
+                                .join(", ")}`, onChange: handleChangeSearch, disabled: loading }) })), _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), footerRow && !editable ? (_jsx("tfoot", { className: "border-t-2 border-black", children: _jsx("tr", { children: Object.keys(footerRow ?? {})?.map((x, indx) => {
+                                        return (_jsx("td", { className: "align-middle", children: footerRow[x] }, indx));
+                                    }) }) })) : editable ? (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { className: "align-middle", children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                addRow();
+                                            }, type: "button", children: "+" }) }) }) })) : (_jsx(_Fragment, {}))] }), paginated && totalPages() > 1 && (_jsxs("div", { className: "flex justify-between items-center mt-4", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Button, { type: "button", disabled: currentPage === 1, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), _jsx("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), _jsx(Button, { type: "button", disabled: currentPage === totalPages(), onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), _jsx("div", { children: _jsx("select", { value: itemsPerPage, onChange: (e) => {
+                                        setItemsPerPage(Number(e.target.value));
+                                        setCurrentPage(1); // resetear la página al cambiar los elementos por página
+                                    }, children: itemsPerPageOptions.map((option) => (_jsxs("option", { value: option, children: [option, " elementos por p\u00E1gina"] }, option))) }) })] }))] })] }));
+};

package/dist/DynamicTable/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+type Props = {
+    cellInputs?: boolean;
+    intersectionTitle?: string;
+    className?: string;
+    onChange?: (data: string) => void;
+    defaultValue?: string;
+    onValidate?: (headerValue: string, rowValue: string) => boolean;
+    onRemove?: () => void;
+    margins?: {
+        marginLeft?: number;
+        marginTop?: number;
+        verticalGap?: number;
+        horizontalGap?: number;
+    };
+    forwardedRef?: React.RefObject<{
+        getTotalForRows: () => number;
+        getTotalForColumns: () => number;
+        getColumnsCount: () => number;
+        getRowsCount: () => number;
+    }>;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export default _default;