react-konva-grid - npm Package Compare versions

Comparing version 2.5.0 to 2.5.1

dist/hooks/useEditable.d.ts

@@ -10,2 +10,3 @@ import React from "react";
     onSubmit?: (value: string, coords: CellInterface, nextCoords?: CellInterface) => void;
+    onDelete: (selections: AreaProps[]) => void;
     selections: AreaProps[];
@@ -31,3 +32,3 @@ }
  */
-declare const useEditable: ({ getEditor, gridRef, getValue, onChange, onSubmit, selections, }: UseEditableOptions) => EditableResults;
+declare const useEditable: ({ getEditor, gridRef, getValue, onChange, onSubmit, onDelete, selections, }: UseEditableOptions) => EditableResults;
 export default useEditable;

dist/hooks/useEditable.js

@@ -61,3 +61,3 @@ "use strict";
             // Enter key
-            if (e.which === useSelection_1.SelectionKeys.Enter) {
+            if (e.which === 13) {
                 onSubmit && onSubmit();
@@ -79,3 +79,3 @@ }
  */
-const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, selections, }) => {
+const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, onDelete, selections, }) => {
     const [activeCell, setActiveCell] = react_1.useState(null);
@@ -107,3 +107,4 @@ const [value, setValue] = react_1.useState("");
     const handleKeyDown = react_1.useCallback((e) => {
-        if (e.nativeEvent.which in useSelection_1.SelectionKeys ||
+        const keyCode = e.nativeEvent.keyCode;
+        if (keyCode in useSelection_1.SelectionKeys ||
             e.nativeEvent.ctrlKey ||
@@ -113,3 +114,8 @@ e.nativeEvent.shiftKey)
         const { top: rowIndex, left: columnIndex } = selections[0];
-        const initialValue = e.nativeEvent.key;
+        if (keyCode === useSelection_1.DeleteKeys.Delete || keyCode === useSelection_1.DeleteKeys.BackSpace) {
+            return onDelete(selections);
+        }
+        const initialValue = keyCode === 13 // Enter key
+            ? undefined
+            : e.nativeEvent.key;
         makeEditable({ rowIndex, columnIndex }, initialValue);
@@ -145,3 +151,3 @@ }, [selections]);
     const Editor = react_1.useMemo(() => getEditor(activeCell), [activeCell]);
-    const editorComponent = activeCell ? (react_1.default.createElement(Editor, { value: value, onChange: setValue, onSubmit: handleSubmit, position: position, scrollPosition: scrollPosition, onHide: handleHide })) : null;
+    const editorComponent = activeCell ? (react_1.default.createElement(Editor, { value: value, onChange: handleChange, onSubmit: handleSubmit, position: position, scrollPosition: scrollPosition, onHide: handleHide })) : null;
     return {
@@ -148,0 +154,0 @@ editorComponent,

dist/hooks/useSelection.d.ts

@@ -15,3 +15,2 @@ import React from "react";
     Down = 40,
-    Enter = 13,
     Escape = 27,
@@ -21,2 +20,6 @@ Tab = 9,
 }
+export declare enum DeleteKeys {
+    Delete = 9,
+    BackSpace = 8
+}
 /**
@@ -23,0 +26,0 @@ * useSelection hook to enable selection in datagrid

dist/hooks/useSelection.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionKeys = void 0;
+exports.DeleteKeys = exports.SelectionKeys = void 0;
 const react_1 = require("react");
@@ -18,3 +18,2 @@ var Direction;
     SelectionKeys[SelectionKeys["Down"] = 40] = "Down";
-    SelectionKeys[SelectionKeys["Enter"] = 13] = "Enter";
     SelectionKeys[SelectionKeys["Escape"] = 27] = "Escape";
@@ -24,2 +23,7 @@ SelectionKeys[SelectionKeys["Tab"] = 9] = "Tab";
 })(SelectionKeys = exports.SelectionKeys || (exports.SelectionKeys = {}));
+var DeleteKeys;
+(function (DeleteKeys) {
+    DeleteKeys[DeleteKeys["Delete"] = 9] = "Delete";
+    DeleteKeys[DeleteKeys["BackSpace"] = 8] = "BackSpace";
+})(DeleteKeys = exports.DeleteKeys || (exports.DeleteKeys = {}));
 /**
@@ -179,3 +183,2 @@ * useSelection hook to enable selection in datagrid
                 break;
-            case SelectionKeys.Enter:
             case SelectionKeys.Down:
@@ -182,0 +185,0 @@ keyNavigate(Direction.Down, modify);

package.json

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

src/hooks/useSelection.ts

@@ -24,3 +24,2 @@ import React, { useState, useCallback, useRef } from "react";
   Down = 40,
-  Enter = 13,
   Escape = 27,
@@ -31,2 +30,7 @@ Tab = 9,
 
+export enum DeleteKeys {
+  Delete = 9,
+  BackSpace = 8,
+}
+
 /**
@@ -210,3 +214,2 @@ * useSelection hook to enable selection in datagrid
 
-        case SelectionKeys.Enter:
         case SelectionKeys.Down:
@@ -213,0 +216,0 @@ keyNavigate(Direction.Down, modify);

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

14721124

increased by0.01%

Lines of code

19721

increased by0.2%

No dependency changes