@glideapps/glide-data-grid - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1-beta1

API.md

@@ -96,5 +96,11 @@ # Glide Data Grid
 
-`rowMarkerWidth` is the width of the marker column on the very left. It defaults to `50`.
+`rowMarkerWidth` is the width of the marker column on the very left. By default it adapts based on the number of rows in your data set.
 
 ```ts
+rowSelectionMode?: "auto" | "multi";
+```
+
+`rowSelectionMode` changes how selecting a row marker behaves. In auto mode it adapts to touch or mouse environments automatically, in multi-mode it always acts as if the multi key (Ctrl) is pressed.
+
+```ts
 onHeaderMenuClick?: (col: number, screenPosition: Rectangle) => void;
@@ -101,0 +107,0 @@ ```

dist/js/data-editor/data-editor.js

@@ -132,2 +132,4 @@ "use strict";
       onDragStart = p.onDragStart,
+      _p$rowSelectionMode = p.rowSelectionMode,
+      rowSelectionMode = _p$rowSelectionMode === void 0 ? "auto" : _p$rowSelectionMode,
       onHeaderMenuClick = p.onHeaderMenuClick,
@@ -143,3 +145,3 @@ onItemHovered = p.onItemHovered,
       trailingRowOptions = p.trailingRowOptions,
-      rest = _objectWithoutProperties(p, ["columns", "rows", "getCellContent", "onCellClicked", "onHeaderClicked", "onCellEdited", "onRowAppended", "onColumnMoved", "onDeleteRows", "onDragStart", "onHeaderMenuClick", "onItemHovered", "onVisibleRegionChanged", "selectedColumns", "onSelectedColumnsChange", "selectedRows", "onSelectedRowsChange", "gridSelection", "onGridSelectionChange", "trailingRowOptions"]);
+      rest = _objectWithoutProperties(p, ["columns", "rows", "getCellContent", "onCellClicked", "onHeaderClicked", "onCellEdited", "onRowAppended", "onColumnMoved", "onDeleteRows", "onDragStart", "rowSelectionMode", "onHeaderMenuClick", "onItemHovered", "onVisibleRegionChanged", "selectedColumns", "onSelectedColumnsChange", "selectedRows", "onSelectedRowsChange", "gridSelection", "onGridSelectionChange", "trailingRowOptions"]);
 
@@ -155,4 +157,8 @@ var rowMarkerWidth = (rowMarkerWidthRaw !== null && rowMarkerWidthRaw !== void 0 ? rowMarkerWidthRaw : rows > 10000) ? 48 : rows > 1000 ? 44 : rows > 100 ? 36 : 32;
   var setSelectedRows = setSelectedRowsOuter !== null && setSelectedRowsOuter !== void 0 ? setSelectedRowsOuter : setSelectedRowsInner;
-  var selectedColumns = selectedColumnsOuter !== null && selectedColumnsOuter !== void 0 ? selectedColumnsOuter : selectedColumnsInner;
-  var setSelectedColumns = setSelectedColumnsOuter !== null && setSelectedColumnsOuter !== void 0 ? setSelectedColumnsOuter : setSelectedColumnsInner;
+  var mangledOuterCols = selectedColumnsOuter === null || selectedColumnsOuter === void 0 ? void 0 : selectedColumnsOuter.offset(rowMarkerOffset);
+  var selectedColumns = mangledOuterCols !== null && mangledOuterCols !== void 0 ? mangledOuterCols : selectedColumnsInner;
+  var mangledSetSelectedColumns = React.useCallback(function (newColumns) {
+    setSelectedColumnsOuter === null || setSelectedColumnsOuter === void 0 ? void 0 : setSelectedColumnsOuter(newColumns.offset(-rowMarkerOffset));
+  }, [rowMarkerOffset, setSelectedColumnsOuter]);
+  var setSelectedColumns = setSelectedColumnsOuter !== undefined ? mangledSetSelectedColumns : setSelectedColumnsInner;
 
@@ -420,3 +426,3 @@ var _React$useState11 = React.useState({
 
-          if (isMultiKey) {
+          if (isMultiKey || rowSelectionMode === "multi") {
             setSelectedRows(selectedRows.add(newSlice));
@@ -426,3 +432,3 @@ } else {
           }
-        } else if (isMultiKey || args.isTouch) {
+        } else if (isMultiKey || args.isTouch || rowSelectionMode === "multi") {
           if (isSelected) {
@@ -543,3 +549,3 @@ setSelectedRows(selectedRows.remove(row));
     }
-  }, [gridSelection, hasRowMarkers, rowMarkerOffset, showTrailingBlankRow, rows, rowMarkers, setGridSelection, focus, setSelectedColumns, selectedRows, setSelectedRows, appendRow, lastRowSticky, selectedColumns]);
+  }, [gridSelection, hasRowMarkers, rowMarkerOffset, showTrailingBlankRow, rows, rowMarkers, setGridSelection, focus, setSelectedColumns, selectedRows, rowSelectionMode, setSelectedRows, appendRow, lastRowSticky, selectedColumns]);
   var onMouseUp = React.useCallback(function (args) {
@@ -556,3 +562,3 @@ var _mouse$previousSelect;
     if (args.kind === "header") {
-      onHeaderClicked === null || onHeaderClicked === void 0 ? void 0 : onHeaderClicked(args.location[0]);
+      onHeaderClicked === null || onHeaderClicked === void 0 ? void 0 : onHeaderClicked(args.location[0] - rowMarkerOffset);
     }
@@ -577,3 +583,3 @@
     }
-  }, [gridSelection, onHeaderClicked, reselect]);
+  }, [gridSelection, onHeaderClicked, reselect, rowMarkerOffset]);
   var onHeaderMenuClickInner = React.useCallback(function (col, screenPosition) {
@@ -580,0 +586,0 @@ onHeaderMenuClick === null || onHeaderMenuClick === void 0 ? void 0 : onHeaderMenuClick(col - rowMarkerOffset, screenPosition);

dist/js/data-grid/data-grid-types.js

@@ -250,2 +250,12 @@ "use strict";
 
+    _defineProperty(this, "offset", function (amount) {
+      if (amount === 0) return _this;
+
+      var newItems = _this.items.map(function (x) {
+        return [x[0] + amount, x[1] + amount];
+      });
+
+      return new CompactSelection(newItems);
+    });
+
     _defineProperty(this, "add", function (selection) {
@@ -252,0 +262,0 @@ var slice = typeof selection === "number" ? [selection, selection + 1] : selection;

dist/js/scrolling-data-grid/scrolling-data-grid.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _scrollRegion = _interopRequireDefault(require("../scroll-region/scroll-region"));
+var _infiniteScroller = require("./infinite-scroller");
 
@@ -112,4 +112,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
     if (args === undefined) return;
-    setClientHeight(args.clientHeight);
-    setClientWidth(args.clientWidth);
+    setClientHeight(args.height);
+    setClientWidth(args.width);
     var x = 0;
@@ -129,11 +129,11 @@ var tx = 0;
 
-        if (args.scrollLeft >= cx + c.width) {
+        if (args.x >= cx + c.width) {
           x += c.width;
           cellX++;
           cellRight++;
-        } else if (args.scrollLeft > cx) {
+        } else if (args.x > cx) {
           x += c.width;
 
           if (smoothScrollX) {
-            tx += cx - args.scrollLeft;
+            tx += cx - args.x;
           } else {
@@ -144,3 +144,3 @@ cellX++;
           cellRight++;
-        } else if (args.scrollLeft + args.clientWidth > cx) {
+        } else if (args.x + args.width > cx) {
           x += c.width;
@@ -164,9 +164,9 @@ cellRight++;
       if (smoothScrollY) {
-        cellY = Math.floor(args.scrollTop / rowHeight);
-        ty = cellY * rowHeight - args.scrollTop;
+        cellY = Math.floor(args.y / rowHeight);
+        ty = cellY * rowHeight - args.y;
       } else {
-        cellY = Math.ceil(args.scrollTop / rowHeight);
+        cellY = Math.ceil(args.y / rowHeight);
       }
 
-      cellBottom = Math.ceil(args.clientHeight / rowHeight) + cellY;
+      cellBottom = Math.ceil(args.height / rowHeight) + cellY;
       if (ty < 0) cellBottom++;
@@ -180,11 +180,11 @@ } else {
 
-        if (args.scrollTop >= y + rh) {
+        if (args.y >= y + rh) {
           y += rh;
           cellY++;
           cellBottom++;
-        } else if (args.scrollTop > cy) {
+        } else if (args.y > cy) {
           y += rh;
 
           if (smoothScrollY) {
-            ty += cy - args.scrollTop;
+            ty += cy - args.y;
           } else {
@@ -195,3 +195,3 @@ cellY++;
           cellBottom++;
-        } else if (args.scrollTop + args.clientHeight > rh / 2 + y) {
+        } else if (args.y + args.height > rh / 2 + y) {
           y += rh;
@@ -232,3 +232,3 @@ cellBottom++;
   }, [processArgs]);
-  return React.createElement(_scrollRegion.default, {
+  return React.createElement(_infiniteScroller.InfiniteScroller, {
     scrollRef: scrollRef,
@@ -235,0 +235,0 @@ className: className,

dist/ts/data-editor/data-editor.d.ts

@@ -33,2 +33,3 @@ import * as React from "react";
     readonly getCellContent: ReplaceReturnType<DataGridSearchProps["getCellContent"], GridCell>;
+    readonly rowSelectionMode?: "auto" | "multi";
 }
@@ -35,0 +36,0 @@ export interface DataEditorRef {

dist/ts/data-grid/data-grid-types.d.ts

@@ -200,2 +200,3 @@ import { Theme } from "index";
     static fromSingleSelection: (selection: number | Slice) => CompactSelection;
+    offset: (amount: number) => CompactSelection;
     add: (selection: number | Slice) => CompactSelection;
@@ -202,0 +203,0 @@ remove: (selection: number) => CompactSelection;

package.json

 {
     "name": "@glideapps/glide-data-grid",
-    "version": "3.0.0",
+    "version": "3.0.1-beta1",
     "description": "Super fast, pure canvas Data Grid Editor",
@@ -5,0 +5,0 @@ "main": "dist/js/index.js",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

418625

increased by0.39%

Lines of code

7538

increased by0.31%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

87

decreased by-2.25%

Number of low quality alerts

1

increased byInfinity%

No dependency changes