@rowsncolumns/grid - npm Package Compare versions

Comparing version 3.2.5 to 3.2.6

dist/Grid.d.ts

@@ -7,3 +7,3 @@ import React, { Key } from "react";
 import { Direction } from "./types";
-export interface GridProps {
+export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onScroll"> {
     /**
@@ -166,4 +166,2 @@ * Width of the grid
     fillhandleBorderColor?: string;
-    onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 }
@@ -258,2 +256,6 @@ export interface CellRangeArea extends CellInterface {
 }
+export interface PosXYRequired {
+    x: number;
+    y: number;
+}
 export declare type GridRef = {
@@ -276,2 +278,3 @@ scrollTo: (scrollPosition: ScrollCoords) => void;
     getViewPort: () => ViewPortProps;
+    getRelativePositionFromOffset: (x: number, y: number) => PosXYRequired | null;
 };
@@ -278,0 +281,0 @@ export declare type MergedCellMap = Map<string, AreaProps>;

dist/Grid.js

@@ -66,2 +66,3 @@ "use strict";
     const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 13, onScroll, onImmediateScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 1, activeCellStrokeWidth = 2, activeCell, selections = [], frozenRows = 0, frozenColumns = 0, itemRenderer = Cell_1.CellRenderer, mergedCells = [], snap = false, scrollThrottleTimeout = 100, onViewChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, showFrozenShadow = false, shadowSettings = defaultShadowSettings, borderStyles = [], children, stageProps, wrapper = (children) => children, cellAreas = [], showFillHandle = true, fillSelection, overscanCount = 1, fillHandleProps, fillhandleBorderColor = "white" } = props, rest = __rest(props, ["width", "height", "estimatedColumnWidth", "estimatedRowHeight", "rowHeight", "columnWidth", "rowCount", "columnCount", "scrollbarSize", "onScroll", "onImmediateScroll", "showScrollbar", "selectionBackgroundColor", "selectionBorderColor", "selectionStrokeWidth", "activeCellStrokeWidth", "activeCell", "selections", "frozenRows", "frozenColumns", "itemRenderer", "mergedCells", "snap", "scrollThrottleTimeout", "onViewChange", "selectionRenderer", "onBeforeRenderRow", "showFrozenShadow", "shadowSettings", "borderStyles", "children", "stageProps", "wrapper", "cellAreas", "showFillHandle", "fillSelection", "overscanCount", "fillHandleProps", "fillhandleBorderColor"]);
+    const hiddenRows = [5, 6];
     tiny_invariant_1.default(!(children && typeof children !== "function"), "Children should be a function");
@@ -86,3 +87,4 @@ /* Expose some methods in ref */
             resizeRows,
-            getViewPort
+            getViewPort,
+            getRelativePositionFromOffset
         };
@@ -333,5 +335,5 @@ });
     /**
-     * Get cell cordinates from current mouse x/y positions
+     * Get relative mouse position
      */
-    const getCellCoordsFromOffset = react_1.useCallback((left, top) => {
+    const getRelativePositionFromOffset = react_1.useCallback((left, top) => {
         var _a;
@@ -352,2 +354,12 @@ tiny_invariant_1.default(typeof left === "number" && typeof top === "number", "Top and left should be a number");
             .point({ x: left, y: top });
+        return { x, y };
+    }, []);
+    /**
+     * Get cell cordinates from current mouse x/y positions
+     */
+    const getCellCoordsFromOffset = react_1.useCallback((left, top) => {
+        const pos = getRelativePositionFromOffset(left, top);
+        if (!pos)
+            return null;
+        const { x, y } = pos;
         const rowIndex = helpers_1.getRowStartIndexForOffset({
@@ -354,0 +366,0 @@ rowHeight,

dist/hooks/useCopyPaste.d.ts

@@ -32,2 +32,3 @@ import React from "react";
     paste: () => void;
+    cut: () => void;
 }
@@ -34,0 +35,0 @@ /**

dist/hooks/useCopyPaste.js

@@ -60,2 +60,6 @@ "use strict";
     }, []);
+    const handleCut = react_1.useCallback(() => {
+        cutSelections.current = currentSelections();
+        handleProgramaticCopy();
+    }, []);
     const handleCopy = react_1.useCallback((e) => {
@@ -165,3 +169,4 @@ var _a, _b, _c, _d, _e;
         copy: handleProgramaticCopy,
-        paste: handleProgramaticPaste
+        paste: handleProgramaticPaste,
+        cut: handleCut
     };
@@ -168,0 +173,0 @@ };

dist/hooks/useSelection.js

@@ -227,2 +227,7 @@ "use strict";
         }
+        /**
+         * If user is selecting the same same,
+         * let not trigger another state change
+         */
+        // if (isSameAsActiveCell) return
         /* Trigger new selection */
@@ -260,2 +265,4 @@ newSelection(coords);
             const len = prevSelection.length;
+            if (!len)
+                return EMPTY_SELECTION;
             return prevSelection.map((sel, i) => {
@@ -609,5 +616,5 @@ if (len - 1 === i) {
      */
-    const handleClearLastSelection = () => {
+    const handleClearLastSelection = react_1.useCallback(() => {
         setSelections(prev => prev.slice(0, -1));
-    };
+    }, []);
     return {
@@ -614,0 +621,0 @@ activeCell,

package.json

 {
   "name": "@rowsncolumns/grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "3.2.5",
+  "version": "3.2.6",
   "main": "dist/index.js",
@@ -44,3 +44,3 @@ "license": "MIT",
   },
-  "gitHead": "d43d91e2552f61da652d37824bd9a1753a179603"
+  "gitHead": "5e6767666624934cc61710680925dd91efeb4726"
 }

src/hooks/useCopyPaste.ts

@@ -39,2 +39,3 @@ import React, { useCallback, useEffect, useRef } from "react";
   paste: () => void;
+  cut: () => void;
 }
@@ -93,2 +94,7 @@
 
+  const handleCut = useCallback(() => {
+    cutSelections.current = currentSelections();
+    handleProgramaticCopy();
+  }, []);
+
   const handleCopy = useCallback(
@@ -201,3 +207,4 @@ (e: ClipboardEvent) => {
     copy: handleProgramaticCopy,
-    paste: handleProgramaticPaste
+    paste: handleProgramaticPaste,
+    cut: handleCut
   };
@@ -204,0 +211,0 @@ };

src/hooks/useSelection.ts

@@ -383,2 +383,8 @@ import React, { useState, useCallback, useRef, useEffect } from "react";
 
+      /**
+       * If user is selecting the same same,
+       * let not trigger another state change
+       */
+      // if (isSameAsActiveCell) return
+
       /* Trigger new selection */
@@ -426,2 +432,3 @@ newSelection(coords);
       const len = prevSelection.length;
+      if (!len) return EMPTY_SELECTION;
       return prevSelection.map((sel, i) => {
@@ -830,5 +837,5 @@ if (len - 1 === i) {
    */
-  const handleClearLastSelection = () => {
+  const handleClearLastSelection = useCallback(() => {
     setSelections(prev => prev.slice(0, -1));
-  };
+  }, []);
 
@@ -835,0 +842,0 @@ return {

No alert changes

Improved metrics

Total package byte prevSize

479872

increased by0.5%

Lines of code

10444

increased by0.56%

No dependency changes