@absreim/react-bootstrap-data-grid-pro 2.4.1 → 2.6.0

package/grid-pro/resize/useResizeModel.js

@@ -1,65 +1,43 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { useMemo, useState } from "react";
-var useResizeModel = function (cols, display) {
-    var getInitWidthByName = function () {
-        return cols.reduce(function (prev, _a) {
-            var width = _a.width, name = _a.name;
-            var getEffectiveWidth = function () {
-                if (typeof width === "object") {
-                    return width.width;
-                }
-                if (width === undefined) {
-                    return 100;
-                }
-                return width;
-            };
-            prev[name] = getEffectiveWidth();
-            return prev;
-        }, {});
-    };
-    var _a = useState(getInitWidthByName()), widthByName = _a[0], setWidthByName = _a[1];
-    return useMemo(function () {
-        return cols.reduce(function (prev, _a) {
-            var resizeable = _a.resizeable, width = _a.width, name = _a.name;
-            var getEffectiveWidth = function () {
-                if (typeof width === "object") {
-                    return width.width;
-                }
-                if (display === "block" && resizeable) {
-                    return widthByName[name];
-                }
-                return width;
-            };
-            var getWidthSetter = function () {
-                if (display !== "block" || !resizeable) {
-                    return undefined;
-                }
-                if (typeof width === "object") {
-                    return width.setWidth;
-                }
-                return function (newWidth) {
-                    return setWidthByName(function (prevState) {
-                        var _a;
-                        return (__assign(__assign({}, prevState), (_a = {}, _a[name] = newWidth, _a)));
-                    });
-                };
-            };
-            prev[name] = {
-                width: getEffectiveWidth(),
-                setWidth: getWidthSetter(),
-            };
-            return prev;
-        }, {});
-    }, [cols, display, widthByName]);
+const useResizeModel = (cols, display) => {
+    const getInitWidthByName = () => cols.reduce((prev, { width, name }) => {
+        const getEffectiveWidth = () => {
+            if (typeof width === "object") {
+                return width.width;
+            }
+            if (width === undefined) {
+                return 100;
+            }
+            return width;
+        };
+        prev[name] = getEffectiveWidth();
+        return prev;
+    }, {});
+    const [widthByName, setWidthByName] = useState(getInitWidthByName());
+    return useMemo(() => cols.reduce((prev, { resizeable, width, name }) => {
+        const getEffectiveWidth = () => {
+            if (typeof width === "object") {
+                return width.width;
+            }
+            if (display === "block" && resizeable) {
+                return widthByName[name];
+            }
+            return width;
+        };
+        const getWidthSetter = () => {
+            if (display !== "block" || !resizeable) {
+                return undefined;
+            }
+            if (typeof width === "object") {
+                return width.setWidth;
+            }
+            return (newWidth) => setWidthByName((prevState) => (Object.assign(Object.assign({}, prevState), { [name]: newWidth })));
+        };
+        prev[name] = {
+            width: getEffectiveWidth(),
+            setWidth: getWidthSetter(),
+        };
+        return prev;
+    }, {}), [cols, display, widthByName]);
 };
 export default useResizeModel;

package/grid-pro/types.d.ts

@@ -1,4 +1,5 @@
-import { ColDef, ColDefBase, ColHeaderCellProps, GridProps } from "../grid";
+import { ColDef, ColDefBase, ColHeaderCellProps, GridProps, StyleModel } from "../grid";
+import { ReorderModel, ReorderStyleModel } from "./reorder/types";
 export type ProColDef<ValueType = any> = ColDefBase<ValueType> & {
     resizeable?: boolean;
     width?: ColDef["width"] | WidthModel;
@@ -6,8 +7,10 @@ export type ProColDef<ValueType = any> = ColDefBase<ValueType> & {
     maxResizeWidth?: number;
     keyboardResizeStep?: number;
 };
-export type GridProProps = Omit<GridProps, "cols"> & {
+export type GridProProps = Omit<GridProps, "cols" | "styleModel"> & {
     cols: ProColDef[];
+    reorder?: ReorderModel;
+    styleModel?: ProStyleModel;
 };
 export type ColHeaderCellProProps = ColHeaderCellProps & Pick<GridProps, "displayMode"> & {
     setWidth?: (width: number) => void;
@@ -16,3 +19,7 @@ export interface WidthModel {
     width: number;
     setWidth: (width: number) => void;
 }
+export interface ProStyleSubmodels {
+    reorderModel?: ReorderStyleModel;
+}
+export type ProStyleModel = ProStyleSubmodels & StyleModel;

package/grid-pro/util/index.d.ts

@@ -0,0 +1 @@
+export { default as reorderRows } from "./reorderRows";

package/grid-pro/util/index.js

@@ -0,0 +1 @@
+export { default as reorderRows } from "./reorderRows";

package/grid-pro/util/regDragCleanup.d.ts

@@ -0,0 +1,3 @@
+import { DragCleanupParams } from "./types";
+declare const regDragCleanup: (params: DragCleanupParams) => void;
+export default regDragCleanup;

package/grid-pro/util/regDragCleanup.js

@@ -0,0 +1,28 @@
+const regDragCleanup = ({ element, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, onContextMenu, }) => {
+    const listenerRef = {
+        up: () => { },
+        cancel: () => { },
+        keydown: () => { },
+        contextmenu: () => { },
+    };
+    const cleanup = () => {
+        element.removeEventListener("pointermove", onPointerMove);
+        element.removeEventListener("pointerup", listenerRef.up);
+        element.removeEventListener("pointercancel", listenerRef.cancel);
+        element.removeEventListener("keydown", listenerRef.keydown);
+        element.removeEventListener("contextmenu", listenerRef.contextmenu);
+    };
+    const augOnPointerUp = onPointerUp(cleanup);
+    const augOnPointerCancel = onPointerCancel(cleanup);
+    const augOnKeyDown = onKeyDown(cleanup);
+    element.addEventListener("pointermove", onPointerMove);
+    element.addEventListener("pointerup", augOnPointerUp);
+    element.addEventListener("pointercancel", augOnPointerCancel);
+    element.addEventListener("keydown", augOnKeyDown);
+    element.addEventListener("contextmenu", onContextMenu);
+    listenerRef.up = augOnPointerUp;
+    listenerRef.cancel = augOnPointerCancel;
+    listenerRef.keydown = augOnKeyDown;
+    listenerRef.contextmenu = onContextMenu;
+};
+export default regDragCleanup;

package/grid-pro/util/reorderRows.d.ts

@@ -0,0 +1,3 @@
+import { RowDef, RowId, ValidRowData } from "../";
+declare const reorderRows: <Data extends ValidRowData>(rows: RowDef<Data>[], id: RowId, destIndex: number) => RowDef<Data>[];
+export default reorderRows;

package/grid-pro/util/reorderRows.js

@@ -0,0 +1,17 @@
+const reorderRows = (rows, id, destIndex) => {
+    const rowsCopy = rows.slice();
+    const srcIndex = rowsCopy.findIndex((rowsCopy) => rowsCopy.id === id);
+    const srcContents = rowsCopy[srcIndex];
+    rowsCopy.splice(srcIndex, 1);
+    if (destIndex === 0) {
+        rowsCopy.splice(0, 0, srcContents);
+        return rowsCopy;
+    }
+    if (srcIndex < destIndex) {
+        rowsCopy.splice(destIndex - 1, 0, srcContents);
+        return rowsCopy;
+    }
+    rowsCopy.splice(destIndex, 0, srcContents);
+    return rowsCopy;
+};
+export default reorderRows;

package/grid-pro/util/types.d.ts

@@ -0,0 +1,10 @@
+export interface DragCleanupParams {
+    element: HTMLElement;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: PointerCleanupFnParam;
+    onPointerCancel: PointerCleanupFnParam;
+    onKeyDown: KeyboardCleanupFnParam;
+    onContextMenu: (event: PointerEvent) => void;
+}
+export type PointerCleanupFnParam = (removeListeners: () => void) => (event: PointerEvent) => void;
+export type KeyboardCleanupFnParam = (removeListeners: () => void) => (event: KeyboardEvent) => void;

package/grid-pro/util/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid-pro",
   "description": "Pro Version of data grid UI component for use with web apps using React and Bootstrap",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "license": "Commercial. See LICENSE file.",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/style.css

@@ -1 +1 @@
-.rbdg-sort-toggler{cursor:pointer}.rdbg-drag-marker-container{cursor:col-resize;width:1rem;height:1rem;touch-action:none}.rdbg-drag-marker{pointer-events:none}
+.rbdg-sort-toggler{cursor:pointer}.rbdg-draggable-container{width:1rem;height:1rem;touch-action:none}.rbdg-draggable-icon{pointer-events:none}.rbdg-resize-container{cursor:col-resize}.rbdg-reorder-container{cursor:grab !important}.rbdg-reorder-container:active{cursor:grabbing !important}.rbdg-plain-icon-button{display:inline-flex;padding:0;margin:0;border:none;background:none;color:inherit;font:inherit;-webkit-appearance:none;appearance:none}.rbdg-plain-icon-button:disabled{pointer-events:none;opacity:.65}.rbdg-drag-ghost{opacity:75%;position:fixed;padding:.5rem;z-index:2}.rbdg-reorder-dragged-row-pred{border-bottom-color:var(--bs-success)}.rbdg-reorder-dragged-row{border-top-width:1px;opacity:50%;border-color:var(--bs-success)}.rbdg-reorder-above-drag-target-row{border-bottom-color:var(--bs-primary)}.rbdg-reorder-below-drag-target-row{border-top-width:1px;border-top-color:var(--bs-primary)}