react-konva-grid - npm Package Compare versions

Comparing version 2.4.9 to 2.5.0

dist/Grid.d.ts

@@ -174,2 +174,3 @@ import React, { Key } from "react";
     scrollToItem: (coords: CellInterface) => void;
+    focus: () => void;
 };
@@ -176,0 +177,0 @@ export declare type MergedCellMap = Map<string, AreaProps>;

dist/Grid.js

@@ -68,2 +68,3 @@ "use strict";
             getCellOffsetFromCoords,
+            focus: () => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
         };
@@ -80,2 +81,3 @@ });
     const stageRef = react_1.useRef(null);
+    const containerRef = react_1.useRef(null);
     const verticalScrollRef = react_1.useRef(null);
@@ -792,3 +794,3 @@ const wheelingRef = react_1.useRef(null);
     return (react_1.default.createElement("div", { style: { position: "relative", width: containerWidth } },
-        react_1.default.createElement("div", Object.assign({ onWheel: handleWheel, tabIndex: -1 }, rest),
+        react_1.default.createElement("div", Object.assign({ onWheel: handleWheel, tabIndex: 1, ref: containerRef }, rest),
             react_1.default.createElement(ReactKonvaCore_1.Stage, { width: containerWidth, height: containerHeight, ref: stageRef, listening: listenToEvents },
@@ -795,0 +797,0 @@ react_1.default.createElement(ReactKonvaCore_1.Layer, null,

dist/hooks/useAutoSizer.js

@@ -53,2 +53,5 @@ "use strict";
     const handleViewChange = react_1.useCallback((cells) => {
+        /* Update viewport cells */
+        setViewport(cells);
+        /* Check if viewport has changed */
         if (!resizeOnScroll ||
@@ -58,3 +61,2 @@ (cells.rowStartIndex === viewport.rowStartIndex &&
             return;
-        setViewport(cells);
         if (gridRef.current) {
@@ -61,0 +63,0 @@ /* During first mount, column width is calculated. Do not re-calculate */

dist/hooks/useEditable.d.ts

 import React from "react";
-import { CellInterface, ScrollCoords, CellPosition, GridRef } from "../Grid";
+import { CellInterface, ScrollCoords, CellPosition, GridRef, AreaProps } from "../Grid";
+import { SelectionKeys } from "./useSelection";
 export interface UseEditableOptions {
@@ -8,2 +9,4 @@ getEditor?: (cell: CellInterface | null) => React.ElementType;
     onChange?: (value: string, coords: CellInterface) => void;
+    onSubmit?: (value: string, coords: CellInterface, nextCoords?: CellInterface) => void;
+    selections: AreaProps[];
 }
@@ -14,6 +17,8 @@ export interface EditableResults {
     onScroll: (props: ScrollCoords) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 export interface EditorProps extends CellInterface {
     onChange: (value: string) => void;
-    onSubmit: () => void;
+    onSubmit: (sourceKey?: SelectionKeys) => void;
+    onNext: () => void;
     onHide: () => void;
@@ -27,3 +32,3 @@ scrollPosition: ScrollCoords;
  */
-declare const useEditable: ({ getEditor, gridRef, getValue, onChange, }: UseEditableOptions) => EditableResults;
+declare const useEditable: ({ getEditor, gridRef, getValue, onChange, onSubmit, selections, }: UseEditableOptions) => EditableResults;
 export default useEditable;

dist/hooks/useEditable.js

@@ -34,2 +34,3 @@ "use strict";
 const react_1 = __importStar(require("react"));
+const useSelection_1 = require("./useSelection");
 /**
@@ -46,3 +47,2 @@ * Default cell editor
         inputRef.current.focus();
-        inputRef.current.select();
     }, []);
@@ -63,5 +63,12 @@ return (react_1.default.createElement("input", Object.assign({ type: "text", ref: inputRef, style: {
             // Enter key
-            if (e.which === 13) {
+            if (e.which === useSelection_1.SelectionKeys.Enter) {
                 onSubmit && onSubmit();
             }
+            if (e.which === useSelection_1.SelectionKeys.Escape) {
+                onHide();
+            }
+            if (e.which === useSelection_1.SelectionKeys.Tab) {
+                e.preventDefault();
+                onSubmit && onSubmit(useSelection_1.SelectionKeys.Tab);
+            }
         }, onBlur: () => onHide() }, rest)));
@@ -74,3 +81,3 @@ };
  */
-const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, }) => {
+const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, selections, }) => {
     const [activeCell, setActiveCell] = react_1.useState(null);
@@ -88,20 +95,46 @@ const [value, setValue] = react_1.useState("");
     });
+    const makeEditable = (coords, initialValue) => {
+        if (!gridRef.current)
+            return;
+        const pos = gridRef.current.getCellOffsetFromCoords(coords);
+        setActiveCell(coords);
+        setValue(initialValue || getValue(coords) || "");
+        setPosition(pos);
+    };
     /* Activate edit mode */
     const handleDoubleClick = react_1.useCallback((e) => {
         const { rowIndex, columnIndex } = gridRef.current.getCellCoordsFromOffset(e.clientX, e.clientY);
-        const activeCell = { rowIndex, columnIndex };
-        if (!gridRef.current)
+        makeEditable({ rowIndex, columnIndex });
+    }, [getValue]);
+    const handleKeyDown = react_1.useCallback((e) => {
+        if (e.nativeEvent.which in useSelection_1.SelectionKeys ||
+            e.nativeEvent.ctrlKey ||
+            e.nativeEvent.shiftKey)
             return;
-        const pos = gridRef.current.getCellOffsetFromCoords(activeCell);
-        setActiveCell(activeCell);
-        setValue(getValue(activeCell) || "");
-        setPosition(pos);
-    }, [getValue]);
+        const { top: rowIndex, left: columnIndex } = selections[0];
+        const initialValue = e.nativeEvent.key;
+        makeEditable({ rowIndex, columnIndex }, initialValue);
+    }, [selections]);
     /* Save the value */
-    const handleSubmit = react_1.useCallback(() => {
+    const handleSubmit = react_1.useCallback((sourceKey) => {
         if (!activeCell)
             return;
-        onChange && onChange(value, activeCell);
+        const nextActiveCell = sourceKey === useSelection_1.SelectionKeys.Tab
+            ? {
+                rowIndex: activeCell.rowIndex,
+                columnIndex: activeCell.columnIndex + 1,
+            }
+            : {
+                rowIndex: activeCell.rowIndex + 1,
+                columnIndex: activeCell.columnIndex,
+            };
+        onSubmit && onSubmit(value, activeCell, nextActiveCell);
         setActiveCell(null);
     }, [value, activeCell]);
+    const handleChange = react_1.useCallback((value) => {
+        if (!activeCell)
+            return;
+        setValue(value);
+        onChange && onChange(value, activeCell);
+    }, [activeCell]);
     /* When the input is blurred out */
@@ -118,2 +151,3 @@ const handleHide = react_1.useCallback(() => {
         onScroll: setScrollPosition,
+        onKeyDown: handleKeyDown,
     };
@@ -120,0 +154,0 @@ };

dist/hooks/useSelection.d.ts

 import React from "react";
-import { AreaProps, GridRef } from "./../Grid";
+import { AreaProps, CellInterface, GridRef } from "./../Grid";
 export interface UseSelectionOptions {
@@ -8,3 +8,14 @@ gridRef?: React.MutableRefObject<GridRef>;
     rowCount?: number;
+    newSelection: (coords: CellInterface) => void;
 }
+export declare enum SelectionKeys {
+    Right = 39,
+    Left = 37,
+    Up = 38,
+    Down = 40,
+    Enter = 13,
+    Escape = 27,
+    Tab = 9,
+    Meta = 91
+}
 /**
@@ -20,3 +31,4 @@ * useSelection hook to enable selection in datagrid
     onKeyDown: (e: React.KeyboardEvent) => void;
+    newSelection: (coords: CellInterface) => void;
 };
 export default useSelection;

dist/hooks/useSelection.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionKeys = void 0;
 const react_1 = require("react");
@@ -11,2 +12,13 @@ var Direction;
 })(Direction || (Direction = {}));
+var SelectionKeys;
+(function (SelectionKeys) {
+    SelectionKeys[SelectionKeys["Right"] = 39] = "Right";
+    SelectionKeys[SelectionKeys["Left"] = 37] = "Left";
+    SelectionKeys[SelectionKeys["Up"] = 38] = "Up";
+    SelectionKeys[SelectionKeys["Down"] = 40] = "Down";
+    SelectionKeys[SelectionKeys["Enter"] = 13] = "Enter";
+    SelectionKeys[SelectionKeys["Escape"] = 27] = "Escape";
+    SelectionKeys[SelectionKeys["Tab"] = 9] = "Tab";
+    SelectionKeys[SelectionKeys["Meta"] = 91] = "Meta";
+})(SelectionKeys = exports.SelectionKeys || (exports.SelectionKeys = {}));
 /**
@@ -156,15 +168,25 @@ * useSelection hook to enable selection in datagrid
         switch (e.nativeEvent.which) {
-            case 39:
+            case SelectionKeys.Right:
                 keyNavigate(Direction.Right, modify);
                 break;
-            case 37:
+            case SelectionKeys.Left:
                 keyNavigate(Direction.Left, modify);
                 break;
             // Up
-            case 38:
+            case SelectionKeys.Up:
                 keyNavigate(Direction.Up, modify);
                 break;
-            case 40:
+            case SelectionKeys.Enter:
+            case SelectionKeys.Down:
                 keyNavigate(Direction.Down, modify);
                 break;
+            case SelectionKeys.Tab:
+                if (modify) {
+                    keyNavigate(Direction.Left);
+                }
+                else {
+                    keyNavigate(Direction.Right);
+                }
+                e.preventDefault();
+                break;
         }
@@ -178,2 +200,3 @@ }, [rowCount, columnCount]);
         onKeyDown: handleKeyDown,
+        newSelection,
     };
@@ -180,0 +203,0 @@ };

package.json

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

src/hooks/useAutoSizer.ts

@@ -91,2 +91,5 @@ import React, { useCallback, useState, useRef, useEffect } from "react";
     (cells: ViewPortProps) => {
+      /* Update viewport cells */
+      setViewport(cells);
+      /* Check if viewport has changed */
       if (
@@ -98,3 +101,2 @@ !resizeOnScroll ||
         return;
-      setViewport(cells);
       if (gridRef.current) {
@@ -101,0 +103,0 @@ /* During first mount, column width is calculated. Do not re-calculate */

src/hooks/useSelection.ts

@@ -9,2 +9,3 @@ import React, { useState, useCallback, useRef } from "react";
   rowCount?: number;
+  newSelection: (coords: CellInterface) => void;
 }
@@ -19,2 +20,13 @@
 
+export enum SelectionKeys {
+  Right = 39,
+  Left = 37,
+  Up = 38,
+  Down = 40,
+  Enter = 13,
+  Escape = 27,
+  Tab = 9,
+  Meta = 91,
+}
+
 /**
@@ -185,7 +197,7 @@ * useSelection hook to enable selection in datagrid
       switch (e.nativeEvent.which) {
-        case 39:
+        case SelectionKeys.Right:
           keyNavigate(Direction.Right, modify);
           break;
 
-        case 37:
+        case SelectionKeys.Left:
           keyNavigate(Direction.Left, modify);
@@ -195,9 +207,19 @@ break;
         // Up
-        case 38:
+        case SelectionKeys.Up:
           keyNavigate(Direction.Up, modify);
           break;
 
-        case 40:
+        case SelectionKeys.Enter:
+        case SelectionKeys.Down:
           keyNavigate(Direction.Down, modify);
           break;
+
+        case SelectionKeys.Tab:
+          if (modify) {
+            keyNavigate(Direction.Left);
+          } else {
+            keyNavigate(Direction.Right);
+          }
+          e.preventDefault();
+          break;
       }
@@ -214,2 +236,3 @@ },
     onKeyDown: handleKeyDown,
+    newSelection,
   };
@@ -216,0 +239,0 @@ };

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

14719541

increased by0.05%

Lines of code

19682

increased by0.89%

No dependency changes