@bluemarble/bm-components 0.0.44 → 0.0.46

package/dist/esm/index.js

@@ -3866,7 +3866,7 @@ const AutoCreatedRows = ({ tableData, columns, primaryKey, }) => {
     }))))));
 };
 
-const Grid$1 = (props) => {
+const Grid = (props) => {
     const { columnTitles, isLoading, footer, noFilterButtons = false, selectedFilters, customButtons, setSelectedFilters, defaultData, setTableData, updateFilters, tableData, rowOptions = [60, 100, 150], noPagination, primaryKey, noFilters, } = props;
     const [order, setOrder] = useState(undefined);
     const [orderBy, setOrderBy] = useState("");
@@ -15002,98 +15002,19 @@ const GridPagination = ({ currentPage, totalNumberOfPages, onPageChange, rowsPer
                 React__default.createElement(MdArrowForwardIos, { size: 8 * 2 })))));
 };
 
-/* eslint no-undef: "off" */
-function useEvent(event, handler, passive = false) {
-    useEffect(() => {
-        window.addEventListener(event, handler, passive);
-        return function cleanup() {
-            window.removeEventListener(event, handler);
-        };
-    });
-}
-
-function Grid({ columns: columnsData, children, fixedColumns, paperProps, tableBodyProps, tableHeadProps, tableProps, sortedDirection, sortedBy, onSortBy, dense = true, striped, bordered, currentPage, totalNumberOfPages, onPageChange, rowsPerPage, setRowsPerPage, rowsPerPageOptions, }) {
-    const [columns, setColumns] = useState([]);
-    const [startResize, setStartResize] = useState(0);
-    const columnsRef = useRef(null);
-    const [draggingColumn, setDraggingColumn] = useState(-1);
-    const defaultColumn = useRef(columnsData);
-    const startColumnWidth = useRef(undefined);
-    function handleResizeColumn(event) {
-        if (draggingColumn < 0 || event.clientX === 0)
-            return;
-        const initialWidth = startColumnWidth.current;
-        const offset = event.clientX - startResize;
-        const newWidth = (initialWidth || 100) + offset;
-        setColumns((prevColuns) => {
-            prevColuns[draggingColumn].width = newWidth;
-            return prevColuns.slice(0);
-        });
-    }
-    function getTableWidth() {
-        if (fixedColumns)
-            return {
-                width: columns.reduce((acc, col) => (acc += (col === null || col === void 0 ? void 0 : col.width) || 100), 0),
-            };
-        return {};
-    }
-    function getColWidth(width) {
-        if (fixedColumns)
-            return width;
-        return "auto";
-    }
-    useEffect(() => {
-        const newColumns = columnsData.map((column) => (Object.assign(Object.assign({}, column), { width: column.width || 100 })));
-        defaultColumn.current = newColumns;
-        setColumns(newColumns);
-    }, [columnsData]);
-    useEvent("mousemove", (event) => {
-        if (draggingColumn >= 0) {
-            handleResizeColumn(event);
-        }
-    });
-    useEvent("mousedown", (event) => {
-        if (event.target.id) {
-            if (String(event.target.id).startsWith("resize-col")) {
-                event.preventDefault();
-                const dragginCol = parseInt(event.target.id.split("-").pop());
-                setDraggingColumn(dragginCol);
-                setStartResize(event.clientX);
-                startColumnWidth.current = columns[dragginCol].width;
-            }
-        }
-    });
-    useEvent("mouseup", () => {
-        setDraggingColumn(-1);
-    });
-    return (React__default.createElement(Paper, Object.assign({}, paperProps, { sx: Object.assign({ "tbody tr td": {
+function BaseGrid({ columns, children, fixedColumns, paperProps, tableBodyProps, tableHeadProps, tableProps, sortedDirection, sortedBy, onSortBy, dense = true, striped, bordered, currentPage, totalNumberOfPages, onPageChange, rowsPerPage, setRowsPerPage, rowsPerPageOptions, }) {
+    return (React__default.createElement(Paper, Object.assign({}, paperProps, { sx: Object.assign({ "tr td": {
                 py: dense ? 0.23 : 0.7,
                 border: bordered ? "1px solid" : "",
                 borderColor: "divider",
-            }, "tbody tr:nth-of-type(even)": {
+            }, "tr:nth-of-type(even)": {
                 transition: "background-color ease 200ms",
                 bgcolor: striped ? "divider" : "initial",
-            }, width: fixedColumns ? "fit-content" : "100%" }, paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx) }),
-        React__default.createElement(Table, Object.assign({ size: "small", stickyHeader: true }, tableProps, { sx: Object.assign(Object.assign({}, getTableWidth()), tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) }),
+            }, width: fixedColumns ? "fit-content" : "100" }, paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx) }),
+        React__default.createElement(Table, Object.assign({ size: "small", stickyHeader: true }, tableProps, { sx: Object.assign({}, tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) }),
             React__default.createElement(TableHead, Object.assign({}, tableHeadProps),
-                React__default.createElement(TableRow, { ref: columnsRef }, columns.map((column, index) => (React__default.createElement(TableCell, { key: column.name, padding: dense ? "none" : "normal", sx: Object.assign(Object.assign({ border: "1px solid", borderColor: "divider", width: column.width || 100, minWidth: getColWidth((column === null || column === void 0 ? void 0 : column.width) || 100), maxWidth: getColWidth((column === null || column === void 0 ? void 0 : column.width) || 100), pl: 2, zIndex: columns.length - index }, column === null || column === void 0 ? void 0 : column.sx), { position: tableProps.stickyHeader ? "sticky" : "relative" }) },
-                    React__default.createElement(TableSortLabel, { active: sortedBy === column.name, direction: sortedDirection, onClick: () => onSortBy(column.name), disabled: column.canSort === false, sx: { position: "relative", right: "-9px" } }, column.label),
-                    index < columns.length && (React__default.createElement(Box$2, { id: `resize-col-${index}`, sx: {
-                            width: "4px",
-                            height: "100%",
-                            position: "absolute",
-                            top: 0,
-                            zIndex: index,
-                            right: "-3px",
-                            bgcolor: draggingColumn === index
-                                ? "primary.main"
-                                : "transparent",
-                            transition: "all ease 200ms",
-                            ":hover": {
-                                cursor: "w-resize",
-                                bgcolor: "primary.main",
-                            },
-                        } }))))))),
+                React__default.createElement(TableRow, null, columns.map((column) => (React__default.createElement(TableCell, { key: column.name, padding: dense ? "none" : "normal", sx: Object.assign({ pl: 2 }, column === null || column === void 0 ? void 0 : column.sx) },
+                    React__default.createElement(TableSortLabel, { active: sortedBy === column.name, direction: sortedDirection, onClick: () => onSortBy(column.name), disabled: column.canSort === false, sx: { position: "relative", right: "-9px" } }, column.label)))))),
             React__default.createElement(TableBody, Object.assign({}, tableBodyProps), children)),
         React__default.createElement(GridPagination, { rowsPerPageOptions: rowsPerPageOptions, currentPage: currentPage, totalNumberOfPages: totalNumberOfPages, onPageChange: onPageChange, setRowsPerPage: setRowsPerPage, rowsPerPage: rowsPerPage, dense: dense })));
 }
@@ -15173,11 +15094,12 @@ function createFilter(filters) {
 }
 
 function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100], }) {
-    const [defaultData, setDefaultData] = useState([]);
+    const [data, setData] = useState([]);
     const [sortedBy, setSortedBy] = useState("");
     const [sortedDirection, setSortedDirection] = useState("desc");
     const [currentPage, setCurrentPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[0]);
+    const defaultData = useRef([]);
     const toggleSortedDirection = () => {
         if (sortedDirection === "desc")
             setSortedDirection("asc");
@@ -15201,7 +15123,8 @@ function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100], })
         }
     };
     const set = (data) => {
-        setDefaultData(data);
+        setData(data);
+        defaultData.current = data;
     };
     const sortData = (data) => {
         if (sortedBy) {
@@ -15223,16 +15146,17 @@ function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100], })
         setCurrentPage(pageNumber);
     };
     const onChangeRowsPerPage = (rows) => {
-        const totalNumberOfPages = Math.round(filteredData.length / rows) - 1;
+        let totalNumberOfPages = Math.round(filteredData.length / rows) - 1;
+        totalNumberOfPages = totalNumberOfPages <= 0 ? 0 : 1;
         if (currentPage > totalNumberOfPages)
             setCurrentPage(totalNumberOfPages);
         setRowsPerPage(rows);
     };
     const filteredData = useMemo(() => {
-        const newData = defaultData.slice(0);
+        const newData = defaultData.current.slice(0);
         const newFilter = createFilter(filters);
         return newData.filter(newFilter.apply);
-    }, [defaultData, filters]);
+    }, [data, filters]);
     const displayData = useMemo(() => {
         const sortedData = sortData(filteredData);
         const startPage = currentPage * rowsPerPage;
@@ -15242,10 +15166,10 @@ function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100], })
     const totalNumberOfPages = Math.round(filteredData.length / rowsPerPage) - 1;
     return {
         data: displayData,
+        defaultData: defaultData.current,
         set,
         onSortBy,
         sortedBy,
-        defaultData,
         sortedDirection,
         columns,
         currentPage,
@@ -15257,6 +15181,16 @@ function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100], })
     };
 }
 
+/* eslint no-undef: "off" */
+function useEvent(event, handler, passive = false) {
+    useEffect(() => {
+        window.addEventListener(event, handler, passive);
+        return function cleanup() {
+            window.removeEventListener(event, handler);
+        };
+    });
+}
+
 function useLoading() {
     const [state, setState] = useState([]);
     const isLoading = (prop) => state.includes(prop);
@@ -15284,5 +15218,5 @@ const Modal = (_a) => {
             React__default.createElement(React__default.Fragment, null, rest.children))));
 };
 
-export { Autocomplete, Grid as BaseGrid, Checkbox, EditableTableCell, Grid$1 as Grid, Input, InputMask, LargeButton, Modal, Radio, Select, Switch, TabPanel, Td, Tr, createFilter, filterData, getTabProps, useEvent, useFilter, useGrid, useLoading };
+export { Autocomplete, BaseGrid, Checkbox, EditableTableCell, Grid, Input, InputMask, LargeButton, Modal, Radio, Select, Switch, TabPanel, Td, Tr, createFilter, filterData, getTabProps, useEvent, useFilter, useGrid, useLoading };
 //# sourceMappingURL=index.js.map