react-konva-grid - npm Package Compare versions

Comparing version 2.7.19 to 2.7.20

dist/hooks/useEditable.d.ts

@@ -67,2 +67,6 @@ import React from "react";
     onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Get next focusable cell based on current activeCell and direction user is moving
+     */
+    nextFocusableCell: (currentCell: CellInterface, direction: Direction) => CellInterface;
 }
@@ -69,0 +73,0 @@ export interface EditorProps extends CellInterface {

dist/hooks/useEditable.js

@@ -62,6 +62,7 @@ "use strict";
                 return;
+            const isShiftKey = e.nativeEvent.shiftKey;
             // Enter key
             if (e.which === types_1.KeyCodes.Enter) {
                 onSubmit &&
-                    onSubmit(inputRef.current.value, cell, nextFocusableCell(cell, types_1.Direction.Down));
+                    onSubmit(inputRef.current.value, cell, nextFocusableCell(cell, isShiftKey ? types_1.Direction.Up : types_1.Direction.Down));
             }
@@ -98,2 +99,3 @@ if (e.which === types_1.KeyCodes.Escape) {
     });
+    const isDirtyRef = react_1.useRef(false);
     const showEditor = () => setShowEditor(true);
@@ -174,12 +176,23 @@ const hideEditor = () => {
         /* Next immediate cell */
-        let nextActiveCell = direction === types_1.Direction.Right
-            ? {
-                rowIndex: currentCell.rowIndex,
-                columnIndex: currentCell.columnIndex + 1,
-            }
-            : {
-                rowIndex: ((_b = (_a = initialActiveCell.current) === null || _a === void 0 ? void 0 : _a.rowIndex) !== null && _b !== void 0 ? _b : currentCell.rowIndex) +
-                    1,
-                columnIndex: (_d = (_c = initialActiveCell.current) === null || _c === void 0 ? void 0 : _c.columnIndex) !== null && _d !== void 0 ? _d : currentCell.columnIndex,
-            };
+        let nextActiveCell = currentCell;
+        switch (direction) {
+            case types_1.Direction.Right:
+                nextActiveCell = {
+                    rowIndex: currentCell.rowIndex,
+                    columnIndex: currentCell.columnIndex + 1,
+                };
+                break;
+            case types_1.Direction.Up:
+                nextActiveCell = {
+                    rowIndex: currentCell.rowIndex - 1,
+                    columnIndex: currentCell.columnIndex,
+                };
+                break;
+            default:
+                nextActiveCell = {
+                    rowIndex: ((_b = (_a = initialActiveCell.current) === null || _a === void 0 ? void 0 : _a.rowIndex) !== null && _b !== void 0 ? _b : currentCell.rowIndex) + 1,
+                    columnIndex: (_d = (_c = initialActiveCell.current) === null || _c === void 0 ? void 0 : _c.columnIndex) !== null && _d !== void 0 ? _d : currentCell.columnIndex,
+                };
+                break;
+        }
         if (direction === types_1.Direction.Right && !initialActiveCell.current) {
@@ -215,13 +228,23 @@ initialActiveCell.current = currentCell;
     }, []);
-    const handleMouseDown = react_1.useCallback(() => {
+    const handleMouseDown = react_1.useCallback((e) => {
+        if (currentActiveCellRef.current) {
+            if (isDirtyRef.current) {
+                handleSubmit(value, currentActiveCellRef.current);
+            }
+            else {
+                handleHide();
+            }
+        }
         initialActiveCell.current = undefined;
-    }, []);
-    const handleChange = react_1.useCallback((value, activeCell) => {
+    }, [value]);
+    const handleChange = react_1.useCallback((newValue, activeCell) => {
         if (!activeCell)
             return;
-        setValue(value);
-        onChange && onChange(value, activeCell);
-    }, []);
+        /* Check if the value has changed. Used to conditionally submit if editor is not in focus */
+        isDirtyRef.current = newValue !== value;
+        setValue(newValue);
+        onChange && onChange(newValue, activeCell);
+    }, [value]);
     /* When the input is blurred out */
-    const handleHide = react_1.useCallback((e) => {
+    const handleHide = react_1.useCallback(() => {
         hideEditor();
@@ -250,5 +273,6 @@ onCancel && onCancel();
         if (currentActiveCellRef.current) {
-            handleSubmit(value, currentActiveCellRef.current);
+            /* Keep the focus */
+            focusGrid();
         }
-    }, [value]);
+    }, []);
     const editorComponent = isEditorShown && Editor ? (react_1.default.createElement(Editor
@@ -265,2 +289,3 @@ /* This is the cell that is currently being edited */
         onMouseDown: handleMouseDown,
+        nextFocusableCell,
     };
@@ -267,0 +292,0 @@ };

dist/hooks/useSelection.js

@@ -141,3 +141,5 @@ "use strict";
         /* Exit early if grid is not initialized */
-        if (!gridRef || !gridRef.current)
+        if (!gridRef ||
+            !gridRef.current ||
+            e.nativeEvent.which === types_1.MouseButtonCodes.right)
             return;
@@ -144,0 +146,0 @@ const isShiftKey = e.nativeEvent.shiftKey;

dist/types.d.ts

@@ -38,1 +38,6 @@ export declare enum KeyCodes {
 }
+export declare enum MouseButtonCodes {
+    "left" = 1,
+    "middle" = 2,
+    "right" = 3
+}

dist/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MimeType = exports.Movement = exports.Direction = exports.KeyCodes = void 0;
+exports.MouseButtonCodes = exports.MimeType = exports.Movement = exports.Direction = exports.KeyCodes = void 0;
 var KeyCodes;
@@ -45,2 +45,8 @@ (function (KeyCodes) {
 })(MimeType = exports.MimeType || (exports.MimeType = {}));
+var MouseButtonCodes;
+(function (MouseButtonCodes) {
+    MouseButtonCodes[MouseButtonCodes["left"] = 1] = "left";
+    MouseButtonCodes[MouseButtonCodes["middle"] = 2] = "middle";
+    MouseButtonCodes[MouseButtonCodes["right"] = 3] = "right";
+})(MouseButtonCodes = exports.MouseButtonCodes || (exports.MouseButtonCodes = {}));
 //# sourceMappingURL=types.js.map

package.json

 {
   "name": "react-konva-grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "2.7.19",
+  "version": "2.7.20",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "license": "MIT",

src/hooks/useSelection.ts

@@ -10,3 +10,3 @@ import React, { useState, useCallback, useRef, useEffect } from "react";
 } from "./../helpers";
-import { KeyCodes, Direction, Movement } from "./../types";
+import { KeyCodes, Direction, Movement, MouseButtonCodes } from "./../types";
 
@@ -252,4 +252,8 @@ export interface UseSelectionOptions {
       /* Exit early if grid is not initialized */
-      if (!gridRef || !gridRef.current) return;
-
+      if (
+        !gridRef ||
+        !gridRef.current ||
+        e.nativeEvent.which === MouseButtonCodes.right
+      )
+        return;
       const isShiftKey = e.nativeEvent.shiftKey;
@@ -256,0 +260,0 @@ const isMetaKey = e.nativeEvent.ctrlKey || e.nativeEvent.metaKey;

src/types.ts

@@ -41,1 +41,7 @@ export enum KeyCodes {
 }
+
+export enum MouseButtonCodes {
+  "left" = 1,
+  "middle" = 2,
+  "right" = 3,
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16863054

increased by0.02%

Lines of code

25786

increased by0.34%

No dependency changes