@bluemarble/bm-components 0.0.40 → 0.0.42

package/dist/esm/index.js

@@ -15002,32 +15002,33 @@ 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 columnsResizing = useRef(undefined);
+    const startColumnWidth = useRef(undefined);
     function handleResizeColumn(event) {
-        if (columnsResizing.current === undefined || event.clientX === 0)
+        if (draggingColumn < 0 || event.clientX === 0)
             return;
-        const newColumns = defaultColumn.current.map((column, columnIndex) => {
-            if (columnsResizing.current === columnIndex) {
-                const width = ((column === null || column === void 0 ? void 0 : column.width) || 0) + event.pageX - startResize;
-                return Object.assign(Object.assign({}, column), { width: width <= 0 ? 0 : width });
-            }
-            return column;
+        const initialWidth = startColumnWidth.current;
+        const offset = event.clientX - startResize;
+        const newWidth = (initialWidth || 100) + offset;
+        setColumns((prevColuns) => {
+            prevColuns[draggingColumn].width = newWidth;
+            return prevColuns.slice(0);
         });
-        setColumns(newColumns);
-    }
-    function onDragStart(ev, index) {
-        setStartResize(ev.pageX);
-        columnsResizing.current = index;
-    }
-    function ondragend() {
-        setStartResize(0);
-        columnsResizing.current = undefined;
-        defaultColumn.current = columns;
     }
     function getTableWidth() {
         if (fixedColumns)
@@ -15036,11 +15037,35 @@ function Grid({ columns: columnsData, children, fixedColumns, paperProps, tableB
             };
         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({ "tr td": {
                 py: dense ? 0.23 : 0.7,
                 border: bordered ? "1px solid" : "",
@@ -15048,19 +15073,21 @@ function Grid({ columns: columnsData, children, fixedColumns, paperProps, tableB
             }, "tr:nth-of-type(even)": {
                 transition: "background-color ease 200ms",
                 bgcolor: striped ? "divider" : "initial",
-            }, width: fixedColumns ? "fit-content" : "initial" }, paperProps === null || paperProps === void 0 ? void 0 : paperProps.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(Object.assign({}, getTableWidth()), 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({ border: "1px solid", borderColor: "divider", width: column.width || 100, pl: 2, zIndex: columns.length - index }, column === null || column === void 0 ? void 0 : column.sx) },
+                React__default.createElement(TableRow, { ref: columnsRef }, columns.map((column, index) => (React__default.createElement(TableCell, { key: column.name, padding: dense ? "none" : "normal", sx: 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) },
                     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, { draggable: true, onDragStart: (ev) => onDragStart(ev, index), onDrag: handleResizeColumn, onDragEnd: ondragend, sx: {
+                    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: "transparent",
+                            bgcolor: draggingColumn === index
+                                ? "primary.main"
+                                : "transparent",
                             transition: "all ease 200ms",
                             ":hover": {
                                 cursor: "w-resize",
@@ -15222,7 +15249,7 @@ function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100], })
         sortedDirection,
         columns,
         currentPage,
-        totalNumberOfPages: totalNumberOfPages === 0 ? 1 : totalNumberOfPages,
+        totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
         onPageChange,
         setRowsPerPage: onChangeRowsPerPage,
         rowsPerPageOptions,
@@ -15230,15 +15257,5 @@ 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);
-        };
-    });
-}
-
 export { Autocomplete, Grid as BaseGrid, Checkbox, EditableTableCell, Grid$1 as Grid, Input, InputMask, LargeButton, Radio, Select, Switch, TabPanel, Td, Tr, createFilter, filterData, getTabProps, useEvent, useFilter, useGrid };
 //# sourceMappingURL=index.js.map